/* ============================================================
   DESKTOP.CSS — layout de escritorio (>= 901px)
   ============================================================
   Este archivo solo se carga en escritorio (ver el <link media="(min-width: 901px)">
   en index.html), por eso las reglas de aquí NO necesitan envolverse en @media:
   si este archivo está activo, ya estamos en escritorio.

   css/mobile.css es el CSS base/móvil y no debe tocarse desde acá: mobile
   queda blindado porque este archivo nunca se carga por debajo de 901px.

   Principio central: los carruseles de producto (Push Up, Marlene, Blusas,
   Perfect Amistad) y el hero tienen decenas de overlays de texto posicionados
   en % contra `.carousel-image-frame` / la foto, calibrados a mano contra
   fotos ~1:2 mostradas en un viewport de celular (393x852). En vez de
   recalibrar cada overlay para escritorio, cada carrusel se muestra en
   escritorio como una tarjeta contenida que conserva ese mismo aspect-ratio
   -- así todos los overlays en % vuelven a caer en el lugar correcto solos.
   ============================================================ */

/* ============================================================
   1. NAVBAR
   ============================================================ */
.nav-links a {
  font-size: 1.05rem;
}

/* Menu de escritorio: los dos pantalones (Push Up y Marlene) van en una fila
   lado a lado, asi que en el menu se colapsan en un solo item "Perfect Fit"
   (el .nav-pc-only, oculto por defecto en mobile.css). */
.nav-links .nav-mobile-only {
  display: none;
}

.nav-links .nav-pc-only {
  display: inline-block;
}

/* En mobile.css el navbar ahora es transparente (pedido explícito solo
   para celular) -- en escritorio se mantiene el fondo blanco original.
   pedido 2026-08-04: mas delgada -- el padding de mobile.css (1rem arriba +
   safe-area, 1rem abajo) es para el notch de celular, no hace falta en
   escritorio, y esa altura le tapaba contenido a las fotos de abajo (el
   navbar es position:fixed sobre todo lo demas). */
.navbar {
  background: rgba(255, 255, 255, 0.95);
  /* pedido 2026-08-04 (audit de rendimiento): blur(10px) -> blur(4px), ver
     comentario largo en mobile.css -- en escritorio el viewport es mas
     ancho (mas pixeles que difuminar) asi que 10px era el peor caso de
     los dos archivos. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.6rem 0;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   2. HERO (Perfect Fit trio)
   ============================================================ */
.hero-trio {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(-50vw + 50%);
  height: min(90vh, 760px);
  background: #ffffff;
}

.hero-trio .perfectfit-illustration {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
}

.hero-trio .perfectfit-image {
  width: auto;
  height: 100%;
  object-fit: contain;
  background: none;
}

/* Pista de scroll (flecha animada hacia abajo) -- solo tiene sentido en
   movil, donde el hero es full-bleed por pantalla y se navega deslizando.
   En escritorio las 3 fotos ya se ven juntas en .hero-trio. */
.hero-scroll-hint {
  display: none;
}

/* Los overlays .pfd-* de la 3ra imagen (hero-03) están calibrados en
   mobile.css contra el marco COMPLETO de pantalla (.perfectfit-illustration
   ocupa 100dvh), pero la ilustración usa object-fit:contain y no llena ese
   marco entero -- queda una franja vacía arriba/abajo (~4% de margen a cada
   lado en un celular típico, ~92% del alto real es la ilustración).
   En escritorio, en cambio, .hero-trio hace que el marco se ajuste EXACTO al
   tamaño de la ilustración (sin franja vacía, ver reglas de arriba). Por eso
   el mismo % vertical cae en un punto distinto en cada caso, y horizontal
   sí es igual en los dos (el ancho nunca tiene franja vacía, ni en mobile ni
   en desktop). Estos valores convierten "% del marco completo" (mobile) a
   "% de la ilustración real" (desktop) con la fórmula:
   desktop_top = (mobile_top - 4.05) / 0.919 -- y lo mismo para alturas.
   Si se vuelve a tocar la posición en mobile.css, hay que recalcular estos. */
.hero-trio .pfd-badge {
  top: 0%;
}

.hero-trio .pfd-medallion {
  top: 41.3%;
}

.hero-trio .pfd-arrow-tiro {
  top: 26.1%;
}

.hero-trio .pfd-arrow-piernas {
  top: 39.1%;
  height: 45.7%;
}

.hero-trio .pfd-arrow-bota {
  top: 85.9%;
}

/* Mismo criterio que en móvil chico (mobile.css @media max-width:480px):
   la tarjeta del hero en escritorio tiene un ancho físico parecido al de un
   celular, no al del monitor completo. Padding y line-height más chicos
   que en móvil: la caja teal es más baja para no taparle la sonrisa a las
   modelos en la foto. */
.cuerpo-perfecto-text {
  font-size: 1.2rem;
  line-height: 1.3;
  padding: 0.6rem 1rem;
}

/* ============================================================
   3. CARRUSELES DE PRODUCTO (Push Up, Marlene, Blusas, Perfect Amistad)
   ============================================================
   Estas reglas generales son la tarjeta "default" -- hoy en día solo
   Blusas y Perfect Amistad las usan tal cual (Push Up y Marlene tienen su
   propio tamaño/recorte más abajo, dentro de .push-up-marlene-row). */
.carousel-fullscreen {
  display: flex;
  width: auto;
  max-width: none;
  margin: 3rem auto;
  gap: 1.25rem;
}

.carousel-fullscreen .carousel-viewport {
  flex: 0 0 auto;
  width: auto;
  height: min(78vh, 700px);
  aspect-ratio: 393 / 852;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-heavy);
  background: #ffffff;
}

.carousel-fullscreen .carousel-track,
.carousel-fullscreen .carousel-slide {
  height: 100%;
  padding: 0;
}

.carousel-fullscreen .carousel-slide.material-slide img {
  width: min(70%, 300px);
  height: min(46%, 300px);
}

/* Mismo estilo plano que mobile.css (sin burbuja circular), solo que
   aca el glifo es teal en vez de blanco porque las tarjetas de escritorio
   tienen fondo claro, no una foto full-bleed detras. */
.carousel-fullscreen .carousel-arrow {
  position: static;
  transform: none;
  width: auto;
  height: auto;
  padding: 6px 4px;
  border-radius: 6px;
  border: none;
  background: none;
  box-shadow: none;
  color: rgba(68, 133, 143, 0.55);
  font-size: 1.6rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.carousel-fullscreen .carousel-arrow:hover {
  color: var(--brand-teal);
  transform: scale(1.08);
}

.carousel-fullscreen .carousel-dots {
  bottom: 16px;
}

/* ============================================================
   3.1 PUSH UP + MARLENE -- fila horizontal con tarjeta propia
   ============================================================
   Push Up y Marlene en una sola fila horizontal, cada uno con su propio
   carrusel independiente (arrows/dots propios, sin JS compartido). Solo
   escritorio -- en mobile.css .push-up-marlene-row no tiene ninguna regla,
   así que en móvil sigue siendo un <div> transparente y las dos secciones
   quedan apiladas exactamente igual que antes.

   A diferencia de la tarjeta "default" de arriba (aspect-ratio fijo
   393:852), esta tarjeta usa ancho/alto independientes para poder ser más
   grande -- por eso la foto ya no llena el mismo recorte que en móvil, y
   se compensa con object-position (enfoca arriba, donde está la prenda) y
   con el badge "Perfect Fit" reposicionado a coordenadas fijas más abajo
   en vez de depender del % calibrado para el aspect-ratio original. */
.push-up-marlene-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem 8rem;
  /* rompe el max-width:1200px de .container para poder crecer más en
     monitores anchos, mismo truco full-bleed que .carousel-fullscreen */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.push-up-marlene-row .section-divider {
  display: none;
}

.push-up-marlene-row .carousel-fullscreen {
  margin: 3rem 0;
  gap: 1.5rem;
}

.push-up-marlene-row .carousel-fullscreen .carousel-viewport {
  width: min(420px, 60vw);
  height: min(90vh, 1200px);
  aspect-ratio: unset;
}

/* pedido 2026-08-04: object-fit:cover (antes contain) -- la foto llena el
   mismo contenedor de siempre (420x1200, sin cambios de tamaño) en vez de
   dejar franjas vacias. Confirmado por el usuario que esta version se ve
   bien; falta recalibrar los overlays que dependian de la foto completa
   sin recortar (ver .blusas-sweet-overlay / .blusas-figura-overlay). */
.push-up-marlene-row .carousel-fullscreen .carousel-slide img:not(.pf-badge-logo) {
  object-fit: cover;
  object-position: center 15%;
  background: #ffffff;
}

/* height:auto (sin aspect-ratio) dejaba que el navegador use el ratio nativo
   de la foto en vez de forzar un rectangulo vertical -- en produccion/mobile
   es min(64vw,380px) de ancho x min(46vh,380px) de alto (~0.66 de ratio),
   aca se reproduce lo mismo con aspect-ratio en vez de una altura fija. */
.push-up-marlene-row .carousel-fullscreen .carousel-slide.material-slide img {
  width: min(60%, 280px);
  aspect-ratio: 0.66;
  height: auto;
  max-height: 60%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.push-up-marlene-row .carousel-fullscreen .carousel-dots {
  bottom: 4px;
}

/* .ref-name es una fuente fija de 3.4rem calibrada para el ancho completo
   de una tarjeta sola -- en la fila de a dos, la tarjeta es más angosta y
   ese tamaño se corta contra el borde del carrusel (overflow:hidden) en
   laptops de poca altura. Se reduce solo acá. */
.push-up-marlene-row .ref-name {
  font-size: 2.6rem;
}

/* Textos calibrados para el ancho completo de un celular: la tarjeta de
   escritorio tiene un ancho físico parecido al de un celular chico, así que
   se reutilizan los mismos valores que ya existen para pantallas angostas
   en mobile.css (@media max-width: 480px / 768px), en vez de dejar el valor
   base pensado para pantalla completa. */
.pa-title-entiende {
  font-size: 4rem;
}

.pa-copy-entiende {
  margin-top: 6rem;
}

.blusas-figura-overlay p {
  font-size: 1.6rem;
}

/* pedido 2026-08-04: mismo motivo que .pa-title-entiende arriba -- estos
   dos nunca tuvieron un tamaño reducido para tarjeta angosta (ni en mobile
   ni en desktop), por eso "TE SOSTIENE" y el texto de la pretina alta se
   ven sobredimensionados. Misma proporcion de reduccion que pa-title-entiende
   (~80%). */
.pa-title-sostiene {
  font-size: 3.7rem;
}

.pa-top-right-overlay p {
  font-size: 1rem;
}

.pa-intro-una-buena,
.pa-intro-amistad {
  font-size: 2.1rem;
}

/* ============================================================
   4. VIDEO REELS (grid) y VIDEO PRINCIPAL
   ============================================================ */
.reels-grid {
  grid-template-columns: 1fr 1fr;
  max-width: 640px;
}

@media (min-width: 1000px) {
  .reels-grid {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 980px;
  }
}

#video .perfectfit-image {
  max-height: 760px;
}

/* ============================================================
   5. BADGE "PERFECT FIT" -- solo existe en el HTML de Push Up, así que
      esto nunca toca Marlene/Blusas/Perfect Amistad aunque no esté
      anidado bajo .push-up-marlene-row.
   ============================================================ */
.carousel-slide .pf-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  pointer-events: none;
}

.carousel-slide .pf-badge img {
  width: 280px;
  height: auto;
  object-fit: contain;
}

/* pedido 2026-08-04: esta foto (dos modelos) no tiene una zona blanca
   ancha arriba como push-up-01 -- el pelo de cada modelo empieza cerca
   del borde, dejando solo una franja angosta libre en la esquina. El
   badge de 280px no cabe ahi sin montarse sobre el pelo. Se achica solo
   para esta slide (medido contra captura real). */
.carousel-fullscreen .carousel-slide .pa-acompana-badge img.pf-badge-logo {
  width: 130px;
  height: auto;
  object-fit: contain;
}



/* ============================================================
   BLUSAS Y PERFECT AMISTAD EN FILA HORIZONTAL (escritorio)
   ============================================================ */
@media (min-width: 901px) {

  .blusas-amistad-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 3rem 8rem;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }

  .blusas-amistad-row .section-divider {
    display: none;
  }

  .blusas-amistad-row .carousel-fullscreen {
    margin: 3rem 0;
    gap: 1.5rem;
  }

  /* ===== TARJETA MÁS GRANDE (como Push Up/Marlene) ===== */
  .blusas-amistad-row .carousel-fullscreen .carousel-viewport {
    width: min(420px, 60vw);        /* ← Mismo ancho que Push Up */
    height: min(90vh, 1200px);      /* ← Misma altura que Push Up */
    aspect-ratio: unset;            /* ← Quita el aspect-ratio fijo */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-heavy);
    background: #ffffff;
    overflow: hidden;
  }

  /* ===== IMAGEN CON ENFOQUE (como Push Up) =====
     :not() excluye los logos/badges (Sweet Harmony en Blusas, Perfect Fit
     en Perfect Amistad) -- son <img> position:static con su propio tamaño
     fijo (ver mobile.css), no la foto de fondo. Sin el :not(), el
     width/height:100% !important de acá les ganaba a CUALQUIER otro
     tamaño que se les quisiera dar (por eso el logo no cambiaba de
     tamaño por más que se ajustara su propia regla). */
  /* pedido 2026-08-04: object-fit:cover -- LILI/GRACE y Perfect Amistad
     quieren la foto llenando la tarjeta (confirmado por el usuario), pero
     blusas-02 (SWEET HARMONY horneado en la foto) tiene un problema
     distinto: la caja usa vh/vw y cambia de tamaño segun viewport/zoom, asi
     que cover le recorta una cantidad DISTINTA de foto en cada pantalla y
     el overlay en % nunca queda alineado en todos los tamaños. Por eso
     blusas-02 tiene su propia excepcion en object-fit:contain mas abajo
     (.blusas-sweet-slide) -- NO quitar esa excepcion ni volver esta regla a
     contain de nuevo, eso rompe LILI/GRACE. */
  .blusas-amistad-row .carousel-fullscreen .carousel-slide:not(.blusas-rack-slide) img:not(.blusas-sweet-logo):not(.pa-intro-badge-logo):not(.bb-logo):not(.pf-badge-logo) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    background: #f5f5f5 !important;
    border-radius: 0 !important;
  }

  /* Percheros (blusas-05/06): misma regla de arriba pero SIN object-position
     fijo -- excluidos arriba via :not(.blusas-rack-slide) en el ancestro,
     en vez de acumular mas :not() en la regla general (pierde la guerra de
     especificidad, ver nota en CLAUDE.md). El object-position lo calcula
     initRackCrop() en main.js: la caja usa vw/vh y cambia de proporcion
     segun pantalla, asi que un % fijo aqui recorta distinto cada vez (igual
     problema que blusas-02/SWEET HARMONY, mismo tipo de solucion). */
  .blusas-amistad-row .carousel-fullscreen .carousel-slide.blusas-rack-slide img:not(.bb-logo) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #f5f5f5 !important;
    border-radius: 0 !important;
  }

  /* pedido 2026-08-04 (definitivo, version 4): blusas-02 vuelve a cover,
     igual que las demas slides (zoom/recorte, no letterbox). El texto
     "SWEET HARMONY"/"Entiende tu figura" queda anclado a la franja
     horneada en la foto via JS (ver syncSweetHarmonyOverlays() en
     main.js), que calcula la matematica exacta de object-fit:cover para
     saber donde cae esa franja dentro del recorte visible en cada tamaño
     de pantalla -- un % fijo de CSS no puede hacer esto porque la caja
     cambia de proporcion segun el viewport. */

  /* ===== SLIDE DE MATERIAL ===== */
  .blusas-amistad-row .carousel-fullscreen .carousel-slide.material-slide img {
    width: min(60%, 280px) !important;
    height: auto !important;
    max-height: 60% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
  }

  /* ===== DOTS ===== */
  .blusas-amistad-row .carousel-fullscreen .carousel-dots {
    bottom: 4px;
  }

  /* ===== BADGE "PERFECT FIT" DE LA SLIDE INTRO =====
     En movil el badge esta oculto (display:none en mobile.css) y va como
     franja. En escritorio se muestra de nuevo SOLO para centrarlo: el
     problema era que quedaba tirado a la derecha (el .fade-up pisaba el
     translate(-50%,-50%)), NO su altura. Se respeta el top:46% que ya trae
     mobile.css (altura original donde el usuario lo veia) y se recombina el
     transform de centrado con el .fade-up: sin esto, .fade-up pisa el
     translate(-50%,-50%) por completo y el logo queda pegado a la derecha
     en vez de centrado (mismo motivo que .pf-order-btn.zoom-in). */
  .blusas-amistad-row .pa-intro-badge {
    display: block;
    text-align: center;
  }

  .blusas-amistad-row .pa-intro-badge.fade-up {
    transform: translate(-50%, -50%) translateY(40px);
  }

  .blusas-amistad-row .pa-intro-badge.fade-up.show {
    transform: translate(-50%, -50%);
  }

  /* ===== SLIDE 2 "Te entiende" -- sube un poco mas =====
     Vuelve a cover (ver regla de arriba), asi que vuelve tambien el valor
     calibrado para ese recorte: 59% (70% era para contain, no aplica). */
  .blusas-amistad-row .pa-bottom-mid-overlay {
    top: 59%;
  }

  /* ===== FRANJA INFERIOR INVERTIDA: solo movil =====
     En escritorio el badge vuelve a la foto, asi que esta franja no tiene
     sentido y se oculta para no dejar un bloque crema tras la tarjeta. */
  .blusas-amistad-row .pa-amistad-footer-banner {
    display: none;
  }

  /* ===== TEXTO "Entiende tu figura, resalta lo mejor de ti" =====
     Antes top:82% (quedaba mas abajo de lo que deberia). La foto de esta
     slide (blusas-02) se muestra en la tarjeta con object-fit:contain y la
     tarjeta es mas baja en proporcion que la foto, asi que la foto llena
     toda la altura y los % de la slide = % de la foto. El valor correcto es
     el mismo que en movil (68%, medido contra el mockup) -- el 82% de antes
     era un error sin medir. */
  .blusas-amistad-row .blusas-figura-overlay {
    top: 68%;
  }

  /* ===== LOGO "Sweet Harmony" -- centrado dentro de la franja teal =====
     REVERTIDO 2026-08-04 (definitivo) a 44.5% -- valor original medido con
     PIL contra la foto real (franja teal en 39.4-49.9%, centro ~44.7%).
     Los ajustes intermedios (50%, 51.5%, 53%) compensaban a ojo el margen
     variable que dejaba el contenedor viejo (ver comentario grid arriba);
     con el marco ahora atado exacto a la foto, ese margen desaparece y el
     valor correcto vuelve a ser el original. */
  .blusas-amistad-row .blusas-sweet-overlay {
    top: 44.5%;
  }

  /* ===== "10 COLORES POR REF." -- mas chico solo en escritorio =====
     pedido 2026-08-05: en la tarjeta de escritorio (mas angosta que el
     full-bleed movil) el numero/texto se ven demasiado grandes. Tamaños de
     mobile.css intactos (7.8rem/3rem) -- estos son solo para >=901px. */
  .blusas-amistad-row .colores-numero {
    font-size: 6.4rem;
  }

  .blusas-amistad-row .colores-texto {
    font-size: 2.9rem;
  }

  .blusas-amistad-row .carousel-fullscreen .carousel-slide img.blusas-sweet-logo {
    width: min(48%, 240px);
  }

  /* ===== FLECHAS ===== */
  .blusas-amistad-row .carousel-fullscreen .carousel-arrow {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 6px 4px;
    border-radius: 6px;
    border: none;
    background: none;
    box-shadow: none;
    color: rgba(68, 133, 143, 0.55);
    font-size: 1.6rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  }

  .blusas-amistad-row .carousel-fullscreen .carousel-arrow:hover {
    color: var(--brand-teal);
    transform: scale(1.08);
  }
} 

/* ============================================================
   VIDEO - CORRECCIÓN PARA ESCRITORIO
   ============================================================ */
@media (min-width: 901px) {

  /* ===== CONTENEDOR DEL VIDEO ===== */
  /* margin vertical para el mismo respiro que el resto de bloques de
     escritorio (.carousel-fullscreen usa margin:3rem 0) -- en mobile el
     video sigue full-bleed, no hace falta ahi. */
  #video .perfectfit-illustration {
    width: 100%;
    max-width: 1000px;
    margin: 3rem auto;
    height: auto;
    max-height: 80vh;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-heavy);
    background: #ffffff;  /* ← Fondo BLANCO */
  }

  /* ===== VIDEO EN SÍ ===== */
  #video .perfectfit-image {
    width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    display: block !important;
    background: #ffffff !important;  /* ← Fondo BLANCO */
    border-radius: var(--border-radius);
  }

  /* ===== VIDEO ELEMENT ===== */
  #video .perfectfit-illustration video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    display: block;
    object-fit: contain;
    background: #ffffff;  /* ← Fondo BLANCO */
    border-radius: var(--border-radius);
  }
}