/* ==========================================================================
   MIRALOS — V8 "FICHA TÉCNICA SUIZA"
   Dirección de arte: retícula visible de diseño suizo, numeración monumental,
   zapatilla escultórica cruzando columnas, tabla mínima de datos reales.
   Tipografía: Inter Tight (neo-grotesk suiza contemporánea).
   Cursor: cruz técnica de plano con coordenadas + corchete de encuadre.
   ========================================================================== */

:root{
  --f-head: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* retícula: líneas finas sobre las portadas (fondo oscurecido por overlay) */
  --v8-line: rgba(243,239,231,.22);
  --v8-line-strong: rgba(243,239,231,.42);
  --v8-ink: var(--text-inv);
  --v8-ink-dim: var(--text-inv-dim);

  /* Ancho del frame de la zapatilla: limitado por ancho (vw) Y por alto de
     viewport (svh). El límite por vw/hardcap (1080px / 88vw) es el que manda
     en pantallas normales y altas (≥900px de alto) — ahí la zapatilla es
     monumental, a pantalla casi completa, como en la primera versión de la
     ficha técnica suiza.
     El límite por altura solo entra a mandar en pantallas MUY bajas (laptops
     de poca altura, celulares en horizontal): calc((100svh - 225px) * 1.6)
     se despeja de "el frame (con aspect-ratio 16/10) más el bloque de abajo
     (nav + tabla + cta + su padding, comprimidos en la media query de
     max-height:900px más abajo, ≈120px) tienen que dejar el borde superior
     del frame por debajo del header flotante (bottom:70px) con margen de
     sobra" — así el frame se achica en vez de cortarse contra el header, y
     lo hace en cualquier altura baja, no solo en un valor puntual. */
  --v8-frame-w: min(1080px, 88vw, max(280px, calc((100svh - 225px) * 1.6)));

  /* Igual que --v8-frame-w pero para el breakpoint móvil (frame en 4:3 y
     tabla técnica apilada en una columna, que ocupa mucha más altura).
     Reserva 660px (antes 635px): +25px porque en pantallas táctiles las
     flechas/CTA ya no se achican por debajo de 44px (ver @media
     (pointer:coarse) más abajo), aunque el viewport sea bajo. */
  --v8-frame-w-mobile: min(100%, max(200px, calc((100svh - 660px) * 4 / 3)));
}

h1, h2, h3, h4{ font-weight: 800; letter-spacing: -.03em; }

/* ==========================================================================
   Portadas — contenedor de la ficha técnica
   ========================================================================== */
.v8-portada{ isolation: isolate; }

.v8-grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.v8-grid__v{
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--v8-line);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.v8-grid__h{
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--v8-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms + 320ms);
}
.v8-grid.is-drawn .v8-grid__v,
.v8-grid.is-drawn .v8-grid__h{ transform: none; }

.v8-content{
  position: relative;
  z-index: 2;
  justify-content: flex-end;
  gap: 0;
}

/* ---------- Cabecera: numeración monumental + título ---------- */
.v8-head{
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.v8-num{
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--v8-ink-dim);
}
.v8-portada .portada-title{
  font-weight: 800;
  letter-spacing: -.035em;
}
.v8-portada .portada-title small{
  font-family: var(--f-body);
}

/* ---------- Ficha: zapatilla + tabla de datos ---------- */
.v8-ficha{
  display: flex;
  flex-direction: column;
  align-items: center; /* centra visual/tabla/cta dentro de la sección */
  gap: clamp(1rem, 2.2vw, 1.5rem);
  width: 100%;
  /* Solapa bajo la cabecera (№ + título), como en la primera versión de la
     ficha técnica suiza: la zapatilla es escultórica y monumental, así que
     su recuadro empieza detrás del texto en vez de dejarle un hueco propio.
     El PNG del producto es transparente fuera de la silueta, así que el
     número/título siguen leyéndose donde no hay zapatilla encima.
     La posición del frame respecto al header NO depende de este valor (la
     controla solo el bloque de abajo: nav + tabla + cta, ver media query
     más abajo) — este margen solo decide cuánto baja el título para
     esconderse detrás de la zapatilla en vez de quedar detrás del header
     flotante. Tiene que ser una magnitud grande a propósito: el título
     monumental (hasta 4.6rem) es más alto que el hueco entre el header y el
     frame, así que si no se solapa con la zapatilla, se solapa con el
     header — y eso sí hay que evitarlo siempre. */
  margin-top: clamp(-5rem, -3.6vw, -2.6rem);
}

.v8-ficha__visual{
  position: relative;
  width: var(--v8-frame-w);
}
.v8-ficha__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: transparent; /* la retícula y el fondo de campaña se ven a través */
  border: 1px solid var(--v8-line-strong);
  border-radius: 0; /* prohibición central: cero border-radius en la presentación */
  perspective: 1000px;
}

/* Sombra de suelo — elipse difusa que se desplaza en sentido contrario al
   tilt para vender la profundidad. No es "el producto": puede llevar forma
   redondeada (radial-gradient) sin violar la prohibición de border-radius. */
.v8-ficha__ground{
  position: absolute;
  left: 16%; right: 16%;
  bottom: 9%;
  height: 20%;
  background: radial-gradient(ellipse 62% 100% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 74%);
  filter: blur(7px);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Escenario 3D — recibe el rotateX/rotateY del tilt (v8.js, rAF + lerp).
   inset:8% dentro del frame deja el margen necesario para que, con un tilt
   máx. de ~8°, la zapatilla no se salga del recuadro técnico. */
.v8-ficha__stage{
  position: absolute;
  inset: 8%;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
}
.v8-ficha__frame .producto-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.4)) drop-shadow(0 8px 10px rgba(0,0,0,.28));
  transition: opacity .55s ease;
}
.v8-ficha__frame .producto-img.is-active{
  opacity: 1;
  pointer-events: auto;
}

.v8-ficha__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .1rem;
}
.v8-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--v8-line-strong);
  border-radius: 0;
  color: var(--v8-ink);
  transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.v8-arrow:hover{ background: rgba(243,239,231,.1); border-color: var(--v8-ink); }
.v8-arrow:active{ transform: scale(.94); }
.v8-arrow .icon{ width: 16px; height: 16px; stroke-width: 1.4; }
.v8-ficha[data-count="1"] .v8-arrow{ visibility: hidden; }

.v8-index{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--v8-ink-dim);
}
.v8-index__cur{ color: var(--v8-ink); }

/* ---------- Tabla técnica ---------- */
.v8-spec{
  display: flex;
  flex-wrap: wrap;
  width: var(--v8-frame-w);
  margin: 0;
  border-top: 1px solid var(--v8-line-strong);
  border-left: 1px solid var(--v8-line-strong);
}
.v8-spec__row{
  /* 20% × 5 = una sola fila siempre por encima del breakpoint móvil, para
     que la tabla no doble su alto cuando el frame se achica por poca
     altura de viewport (--v8-frame-w). El texto envuelve dentro de la
     celda en vez de forzar el salto de fila. */
  flex: 1 1 20%;
  min-width: 0;
  padding: .85rem 1rem;
  border-right: 1px solid var(--v8-line-strong);
  border-bottom: 1px solid var(--v8-line-strong);
}
.v8-spec__row dt{
  font-family: var(--f-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--v8-ink-dim);
  margin-bottom: .35rem;
}
.v8-spec__row dd{
  margin: 0;
  font-size: .96rem;
  font-weight: 500;
  color: var(--v8-ink);
}

/* ---------- CTA ---------- */
.v8-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: center;
  padding: .8rem 1.3rem;
  border: 1px solid var(--v8-ink);
  border-radius: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v8-ink);
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.v8-cta:hover{ background: var(--v8-ink); color: var(--negro); }
.v8-cta .icon{ width: 15px; height: 15px; transition: transform .25s ease; }
.v8-cta:hover .icon{ transform: translateX(3px); }

/* ==========================================================================
   Cursor técnico — cruz de plano con coordenadas + corchete de encuadre
   Solo desktop de puntero fino; se activa vía JS con la clase en <html>.
   ========================================================================== */
@media (pointer: fine){
  html.v8-cursor-active,
  html.v8-cursor-active *{ cursor: none; }
}

.v8-cursor{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
html.v8-cursor-active .v8-cursor{ opacity: 1; }

.v8-cursor__v,
.v8-cursor__h{
  position: absolute;
  background: var(--negro);
  transition: opacity .2s ease, background .2s ease;
}
.v8-cursor__v{ left: -1px; top: -12px; width: 1px; height: 24px; }
.v8-cursor__h{ left: -12px; top: -1px; width: 24px; height: 1px; }

.v8-cursor__coords{
  position: absolute;
  left: 12px; top: 12px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--negro);
  background: var(--crema);
  padding: 1px 5px;
  border: 1px solid var(--negro);
  transition: opacity .2s ease;
}

/* Contenedor independiente para los corchetes: a propósito NO comparte el
   transform de #v8-cursor (que sigue al puntero) — sus corchetes se
   posicionan en coordenadas absolutas de viewport vía JS (translate). */
.v8-cursor-frame{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
}
.v8-cursor__corner{
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  opacity: 0;
  /* Pedido de Nestor: el encuadre debe asentarse con calma, no de golpe */
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.v8-cursor__corner::before,
.v8-cursor__corner::after{
  content: "";
  position: absolute;
  background: var(--negro);
}
.v8-cursor__corner::before{ width: 100%; height: 1px; }
.v8-cursor__corner::after{ width: 1px; height: 100%; }
/* La posición del recuadro de 14×14 en el viewport la fija el JS con
   transform: translate(x,y) (ver v8.js). Aquí solo se define, dentro de
   cada recuadro, en qué esquina caen los dos segmentos que forman la "L". */
.v8-cursor__corner--tl::before,
.v8-cursor__corner--tl::after{ top: 0; left: 0; }
.v8-cursor__corner--tr::before,
.v8-cursor__corner--tr::after{ top: 0; right: 0; }
.v8-cursor__corner--bl::before,
.v8-cursor__corner--bl::after{ bottom: 0; left: 0; }
.v8-cursor__corner--br::before,
.v8-cursor__corner--br::after{ bottom: 0; right: 0; }

/* estado "framing": sobre elementos interactivos, la cruz se retira y
   aparecen los 4 corchetes enmarcando el elemento */
.v8-cursor.is-framing .v8-cursor__v,
.v8-cursor.is-framing .v8-cursor__h{ opacity: 0; }
.v8-cursor-frame.is-framing .v8-cursor__corner{ opacity: 1; }

/* estado sobre portada: cruz ligeramente más larga (instrumento de medición) */
.v8-cursor.is-measuring .v8-cursor__v{ height: 36px; top: -18px; }
.v8-cursor.is-measuring .v8-cursor__h{ width: 36px; left: -18px; }
.v8-cursor.is-measuring .v8-cursor__v,
.v8-cursor.is-measuring .v8-cursor__h{ background: var(--crema); }
.v8-cursor.is-measuring .v8-cursor__coords{
  background: var(--negro);
  color: var(--crema);
  border-color: var(--crema);
}
.v8-cursor-frame.is-measuring.is-framing .v8-cursor__corner::before,
.v8-cursor-frame.is-measuring.is-framing .v8-cursor__corner::after{ background: var(--crema); }

@media (prefers-reduced-motion: reduce){
  .v8-grid__v, .v8-grid__h{ transition: none !important; transform: none !important; }
  .v8-ficha__frame .producto-img{ transition: opacity .01ms linear !important; }
  .v8-ficha__stage, .v8-ficha__ground{ transform: none !important; }
  .v8-cursor{ display: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 899px){
  .v8-content{ padding-bottom: clamp(1.6rem, 8vw, 2.4rem); }
}

/* Viewports bajos (laptops de poca altura y celulares en vertical): se
   comprimen paddings, gaps y la tabla técnica para dejarle más aire al
   frame de la zapatilla, que igual queda acotado por --v8-frame-w /
   --v8-frame-w-mobile más abajo. */
@media (max-height: 900px){
  .v8-content{
    padding-top: clamp(.6rem, 2vh, 1.1rem);
    padding-bottom: clamp(.25rem, 1vh, .4rem);
  }
  .v8-ficha{
    gap: clamp(.25rem, .7vh, .4rem);
    /* Overlap más profundo que el de escritorio alto: aquí el frame ya
       arrancó lo más abajo posible (ver --v8-frame-w), así que el único
       margen que le queda al título para no chocar con el header flotante
       es esconderse todavía más detrás de la zapatilla. */
    margin-top: clamp(-5.4rem, -4.8vw, -3rem);
  }
  .v8-ficha__nav{ margin-top: 0; }
  .v8-arrow{ width: 28px; height: 28px; }
  .v8-arrow .icon{ width: 14px; height: 14px; }
  .v8-spec__row{ padding: .22rem .6rem; }
  .v8-spec__row dt{ margin-bottom: .08rem; font-size: .56rem; }
  .v8-spec__row dd{ font-size: .78rem; }
  .v8-cta{ padding: .35rem .9rem; font-size: .72rem; }
}

/* Zona táctil ≥44px para flechas y CTA en pantallas táctiles (todos los
   celulares objetivo), sin importar la altura del viewport: la
   compactación de arriba (que los achica a 28px / ~32px) está pensada
   para laptops de poca altura con mouse, no para dedos. Va DESPUÉS a
   propósito, para ganarle la cascada a la regla de max-height:900px
   cuando ambas coinciden (celular bajo). */
@media (pointer: coarse){
  /* 46px, no 44px exactos: dos px de margen sobre el mínimo para
     absorber el redondeo de subpíxel de flexbox en pantallas de alto
     DPR (verificado con Playwright: 44px declarados podían medir 43.5px
     reales). */
  .v8-arrow{ width: 46px; height: 46px; }
  .v8-arrow .icon{ width: 17px; height: 17px; }
  .v8-cta{ min-height: 46px; }
}

@media (max-width: 640px){
  .v8-head{ gap: .7rem; }
  .v8-num{ font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .v8-ficha__visual{
    width: var(--v8-frame-w-mobile);
  }
  .v8-spec{ width: 100%; }
  .v8-ficha__frame{ aspect-ratio: 4 / 3; }
  .v8-spec__row{ flex: 1 1 44%; }
}

@media (max-width: 420px){
  .v8-spec__row{ flex: 1 1 100%; }
}