/* carrusel.css — la sección del carrusel de profundidad.
   =============================================================================
   Es el CSS del DepthCarousel de React Bits traducido a la casa. Lo que cambió
   respecto del original, y por qué:

   ① LOS COLORES SON TOKENS Y NO LITERALES. El original pinta `#0b0d12` bajo la
      tarjeta, `#05060a` de tinte y `rgba(255,255,255,…)` en los mandos. Aquí el
      negro es `var(--negro)` —el mismo que declara `base.css` y el mismo que
      lleva el video de la sección de al lado— y la tinta de los mandos es
      `var(--tinta)`. No es cosmética: toda la página se sostiene sobre que haya
      UN negro y no cuatro parecidos.

   ② EL TINTE DE LAS TARJETAS ES `var(--negro)` Y VA EN `multiply`. Multiplicar
      por negro apaga; multiplicar por el `#05060a` del original apaga y ADEMÁS
      tiñe de azul, que es el color de aquella demo y no el de esta casa.

   ③ SE FUERON LOS DOS `backdrop-filter`. El original desenfoca el fondo detrás
      de las flechas y de la fila de mandos. Detrás de ellos aquí no hay más que negro
      liso: desenfocar el negro cuesta una capa de composición por mando y no se
      ve nada. Los mandos llevan su propio fondo opaco y se acabó.

   ④ LA TARJETA ES 9:16 —la de Instagram, que es de donde salen las fotos— y su
      tamaño sale del ALTO DISPONIBLE de la sección y no de una prop en píxeles.
      Ver `--tarjeta` más abajo, que es el único cálculo delicado del archivo.

   ⑤ EL RESPALDO SIN JAVASCRIPT NO ES UNA MEDIA QUERY, ES UNA CLASE. Mientras
      `carrusel.js` no ponga `es-vivo`, la mesa enseña la PRIMERA tarjeta a
      tamaño natural y esconde las otras diez. Si el archivo no llega —o llega y
      revienta— lo que queda es una fotografía y su cintillo, no un hueco negro.
   ============================================================================= */

.carrusel{
  /* la garalda se declara aquí igual que en `.concursos` y en `.escala__cta`: el
     token vive en la sección, no en :root */
  --garalda:"Cormorant Concursos", Garamond, "Hoefler Text", "Times New Roman", serif;

  /* ── LAS PROPS DE VICTOR ────────────────────────────────────────────────────
     Están en CSS y no en JS porque son decisiones de COMPOSICIÓN y porque así
     una media query puede moverlas sin tocar una línea de código. `carrusel.js`
     las lee con getComputedStyle al arrancar y en cada resize. */
  --fondo:220;        /* depth  · px que se hunde cada tarjeta */
  --reparto:90;       /* spread · px que se corre de lado */
  --giro:22;          /* tilt   · grados de rotateY */
  --visibles:4;       /* visibleCards */
  --caida:0.2;        /* falloff */
  --desenfoque:6;     /* blur, en px, de la última visible */
  --perspectiva:1400px;
  --aire:120;         /* la holgura del cálculo de escala de la pila */

  /* ── LA ALTURA, DECLARADA Y NO MEDIDA ───────────────────────────────────────
     El cintillo se lleva su caja y lo que sobra es la mesa. Los dos números van
     escritos porque el alto de la tarjeta cuelga de ellos Y NO PUEDE SER UN
     PORCENTAJE: la tarjeta deriva su ANCHO del alto (`calc(alto * 9/16)`) y un
     `%` dentro de un `width` se resolvería contra el ANCHO del padre, que es
     otra cosa. Con longitudes de verdad, la razón 9:16 no se puede romper.

     `--cabecera` es exactamente lo que ocupa `.carrusel__cabecera`: sus dos
     rellenos más una línea de cintillo (cuerpo × interlineado 1.7, los mismos
     valores que `concursos.css` le da a `.cintillo`). Si se cambia el relleno
     de la cabecera hay que cambiarlo aquí: van juntos a propósito, y por eso
     están a tres líneas de distancia. */
  --relleno-arriba:clamp(1.4rem, 3.2vh, 2.4rem);
  --relleno-abajo:clamp(.9rem, 2vh, 1.4rem);
  --cabecera:calc(var(--relleno-arriba) + var(--relleno-abajo)
                  + 1.7 * clamp(.62rem, .82vw, .78rem));
  --mesa-alto:calc(100vh - var(--cabecera));
  --mesa-alto:calc(100svh - var(--cabecera));

  /* OPACA Y CON SU Z, igual que `.concursos`: el hero es position:fixed y sigue
     vivo debajo de toda la página. */
  position:relative; z-index:1;
  background:var(--negro);

  /* UNA PANTALLA DE ALTO. `100svh` y no `100vh`: en un teléfono el `vh` grande
     cuenta la barra de direcciones que va a aparecer, y con ella la pila se
     dibuja más alta que el hueco real y la tarjeta del frente se corta por
     abajo. `svh` es el alto que SIEMPRE hay. El fallback de `100vh` va delante
     para los motores que no conocen la unidad. */
  height:100vh;
  height:100svh;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* ── EL CINTILLO ──────────────────────────────────────────────────────────────
   Mismo papel y mismo tono que el de `.concursos` —de ahí hereda la clase
   `.cintillo` de `concursos.css`, que es la que pinta la garalda, el tracking de
   .34em y la caja de mayúsculas—. Aquí sólo se le da su sitio y su aire. */
.carrusel__cabecera{
  flex:0 0 auto;
  padding:var(--relleno-arriba) 1.6rem var(--relleno-abajo);
  text-align:center;
}
.carrusel__cabecera .cintillo{ color:var(--tinta); }

/* ── LA MESA ──────────────────────────────────────────────────────────────────
   Es el `.depth-carousel` del original: el que tiene la perspectiva, el que
   escucha rueda, puntero y teclado, y el que lleva los mandos. Ocupa TODO el
   hueco que deja el cintillo, y de ese hueco sale el tamaño de la tarjeta. */
.carrusel__mesa{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  perspective:var(--perspectiva);
  perspective-origin:50% 50%;
  /* `pan-y`: el dedo hacia abajo SIGUE scrolleando la página. Un carrusel que
     se come el scroll vertical en un teléfono es una trampa. */
  touch-action:pan-y;
  outline:none;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
}
.carrusel__mesa:active{ cursor:grabbing; }
/* ── EL FOCO VA POR DENTRO, PORQUE EL PADRE RECORTA ───────────────────────────
   Un `outline-offset` POSITIVO dibuja el recuadro FUERA de la mesa, y la mesa
   llena el ancho de un padre con `overflow:hidden` (el recorte de las tarjetas,
   que es deliberado y no se toca): los laterales y el canto de abajo se los
   comía el recorte, y entrando con Tab el de arriba caía fuera de la ventana.
   Resultado medido: quien navega con teclado no veía dónde estaba.
   Con offset NEGATIVO el recuadro cae DENTRO de la mesa, donde nada lo recorta;
   2 px de `--brasa` es el mismo foco que el resto del sitio (base.css:347), y
   `--filete` de 1 px era además demasiado tenue sobre el negro. */
.carrusel__mesa:focus-visible{
  outline:2px solid var(--brasa);
  outline-offset:-3px;
}

.carrusel__pila{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* ── LA TARJETA · EL ÚNICO CÁLCULO DELICADO ───────────────────────────────────
   9:16 al píxel, y el tamaño sale del ALTO. El original recibía `cardWidth` y
   `cardHeight` en píxeles desde React; aquí no hay quien los pase, así que los
   pone la hoja:

     --tarjeta-alto = 88 % del hueco de la mesa

   El 12 % que sobra es el aire de arriba y abajo por el que asoman las de atrás.
   NO HAY TECHO DE ANCHO, Y EL QUE HUBO SE QUITÓ MIDIENDO: con un `min(…, 115vw)`
   la tarjeta de un teléfono de 390 se dibujaba a 208 × 370, y sin él a 249 × 442
   —un 19 % más grande— porque quien manda ahí no es este cálculo sino el
   encogido de la pila, que ya deja la tarjeta muy por dentro del hueco. Un techo
   que se aplica ANTES del encogido se cobra dos veces.

   El ancho se deriva del alto y NO con `aspect-ratio`: con `aspect-ratio` y un
   alto definido el motor sigue aceptando un `max-width` que rompa la razón, y
   aquí la razón es el requisito. `calc(alto * 9 / 16)` no se puede romper. */
.carrusel__tarjeta{
  --tarjeta-alto:calc(var(--mesa-alto) * .88);
  position:absolute; top:50%; left:50%;
  width:calc(var(--tarjeta-alto) * 9 / 16);
  height:var(--tarjeta-alto);
  transform-origin:center center;
  transform:translate(-50%, -50%);
  overflow:hidden;
  border-radius:0;   /* la casa no redondea fotografías: el original iba a 18 px */
  background:var(--negro);
  /* la sombra del original, en el negro de la casa. Es lo que despega la tarjeta
     del frente del fondo cuando las de atrás ya están oscuras. */
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65), 0 8px 20px -10px rgba(0,0,0,.5);
  will-change:transform, opacity, filter;
  cursor:pointer;
}
.carrusel__tarjeta img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* EL TINTE. `multiply` contra el negro de la casa: apaga y no tiñe. */
.carrusel__tinte{
  position:absolute; inset:0;
  background:var(--negro);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* ── LOS MANDOS ───────────────────────────────────────────────────────────────
   Los crea `carrusel.js`; aquí sólo se visten. Sin `backdrop-filter` — ver ③. */
.carrusel__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3000;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--filete);
  border-radius:999px;
  background:var(--negro);
  color:var(--tinta);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .carrusel__flecha:hover{ border-color:var(--tenue); color:#fff; }
}
/* ── LOS CAMPOS DE TOQUE DE LOS MANDOS ────────────────────────────────────────
   La flecha se dibuja a 42 px; el folio y la pausa son texto de garalda, que es
   más bajo todavía. Un pulgar pide 44. Los tres se agrandan con una capa
   transparente y absoluta —no pinta, no ocupa flujo, no es item del flex—, así
   que el disco de 42 px y la letra se siguen dibujando EXACTAMENTE donde se
   dibujaban. Se agranda dónde acierta el dedo, no el mando.

   AQUÍ VIVÍAN ONCE PUNTOS, Y NO ERA QUE LES FALTARA ANCHO: ERA QUE NO CABÍAN.
   Once campos de 44 piden 484 px de ventana y un teléfono tiene 390, así que se
   solapaban y el punto de al lado robaba el toque. Medido, el campo real era de
   15×44 px. Ensancharlos no era una salida y estrecharlos tampoco, de modo que
   la tira entera se fue: en su sitio hay UN folio «VI / XI» que abre la lista de
   las once fotografías. Tres mandos anchos en vez de once estrechos, y ninguno
   por debajo de 44. */
.carrusel__flecha::after,
.carrusel__folio__res::after,
.carrusel__pausa::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:100%; min-width:44px; height:44px;
}
.carrusel__flecha::after{ width:44px; }

.carrusel__flecha:active{ transform:translateY(-50%) scale(.94); }
.carrusel__flecha--prev{ left:clamp(.6rem, 2vw, 1.6rem); }
.carrusel__flecha--sig { right:clamp(.6rem, 2vw, 1.6rem); }

/* ── EL FOLIO Y LA PAUSA ──────────────────────────────────────────────────────
   Se sientan donde estaba la tira de puntos —abajo y al centro, mismo fondo
   opaco— y las dos flechas se quedan donde estaban, a media altura en los
   costados: los mandos no se disputan un solo renglón y a 320 px la fila del
   centro mide menos de la mitad de la ventana.

   Números ROMANOS porque es lo que usa el resto de la casa, y garalda porque
   este rótulo es texto de revista, no un icono. */
.carrusel__mandos{
  bottom:clamp(.6rem, 2vh, 1.2rem); left:50%;
  transform:translateX(-50%);
  z-index:3000;
  display:flex; align-items:center; gap:clamp(.9rem, 3vw, 1.8rem);
  padding:4px 14px;
  border-radius:999px;
  background:var(--negro);
  /* Y ES EL ANCLA DE LA LISTA, no el folio: el folio se sienta a la IZQUIERDA de
     la fila, así que una lista centrada en ÉL se salía 3.2 px de la ventana por
     ese lado a 390 px —medido— y el `overflow:hidden` de la sección se la
     comía. Centrada en la fila entera, que sí está centrada en la ventana,
     queda dentro con margen. */
  position:absolute;
}
.carrusel__folio__res,
.carrusel__pausa{
  position:relative;                            /* ancla del campo de toque */
  display:block;
  margin:0; padding:.55rem .25rem;
  border:none; background:none;
  font-family:var(--garalda);
  font-size:clamp(.62rem, .82vw, .78rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinta);
  white-space:nowrap;
  cursor:pointer;
  list-style:none;                              /* el triángulo del <summary> */
}
.carrusel__folio__res::-webkit-details-marker{ display:none; }
.carrusel__folio__res:focus-visible,
.carrusel__pausa:focus-visible,
.carrusel__lista button:focus-visible{
  outline:2px solid var(--brasa);
  outline-offset:-2px;
}
@media (hover:hover) and (pointer:fine){
  .carrusel__folio__res:hover,
  .carrusel__pausa:hover,
  .carrusel__lista button:hover{ color:#fff; }
}

/* ── LA LISTA DE LAS ONCE ─────────────────────────────────────────────────────
   El registro de Concursos, con el mismo registro visual: negro opaco, filas de
   44, sin pastillas ni iconos nuevos. Abre HACIA ARRIBA porque el folio está al
   pie de la sección, y con `max-height` + scroll propio por si la ventana es
   baja. Es el contenido de un `<details>` cerrado: cuando está cerrado el motor
   no lo dibuja y sus once botones NO existen en el tabulador, que es
   exactamente lo que se buscaba al retirar los once puntos. */
/* Y SE ESCONDE A MANO, QUE NO ES REDUNDANTE: MEDIDO. Chrome esconde el interior
   de un `<details>` cerrado con `content-visibility:hidden` sobre su ranura, y
   esa contención NO ALCANZA a un hijo `position:absolute` cuyo bloque
   contenedor es el propio `<details>` —que está FUERA de la ranura—. Con sólo
   el `<details>` la lista quedaba dibujada estando cerrada: los once botones
   daban rect y salían en el tabulador, o sea exactamente los once controles
   invisibles que este cambio venía a quitar. Con `display:none` se van de la
   caja y del tabulador en cualquier motor. */
.carrusel__folio:not([open]) .carrusel__lista{ display:none; }
.carrusel__lista{
  position:absolute; bottom:calc(100% + .7rem); left:50%;
  transform:translateX(-50%);
  z-index:3100;
  margin:0; padding:.3rem 0;
  list-style:none;
  width:min(86vw, 30rem);
  max-height:calc(100svh - 10rem);
  overflow-y:auto;
  background:var(--negro);
  border:1px solid var(--filete);
}
.carrusel__lista li{ margin:0; }
.carrusel__lista button{
  display:flex; align-items:center; gap:.9rem;
  width:100%; min-height:44px;
  margin:0; padding:.35rem 1rem;
  border:none; background:none;
  font-family:var(--garalda);
  color:var(--tenue);
  text-align:left;
  cursor:pointer;
}
.carrusel__lista button[aria-current="true"]{ color:#fff; }
.carrusel__num{
  flex:0 0 2.8em;
  font-size:.74rem; letter-spacing:.16em;
  text-align:right;
}
.carrusel__nombre{
  flex:1 1 auto; min-width:0;
  font-size:.92rem; line-height:1.35; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── EL RESPALDO SIN JAVASCRIPT ───────────────────────────────────────────────
   Hasta que `carrusel.js` pone `es-vivo`, la primera tarjeta se dibuja centrada
   y sola. Sin transforms de JS, sin filtros y sin mandos, porque ninguno de los
   tres existe todavía. */
.carrusel__mesa:not(.es-vivo) .carrusel__tarjeta{ display:none; }
.carrusel__mesa:not(.es-vivo) .carrusel__tarjeta:first-child{
  display:block;
  position:relative; top:auto; left:auto;
  transform:none;
  margin:0 auto;
}
.carrusel__mesa:not(.es-vivo) .carrusel__pila{ position:relative; inset:auto;
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

/* ── EL TELÉFONO ──────────────────────────────────────────────────────────────
   Aquí sólo se mueve `--aire`, y por una razón medida: la holgura de 120 px del
   original es un tercio de una ventana de 390. Con ella, `escala()` bajaba la
   pila al 60 % y la tarjeta del frente se dibujaba a 178 px CSS de ancho — más
   chica que la miniatura de un contacto. A 40 px la escala queda en 0.64 y la
   tarjeta en 250 px, que es lo que hay que enseñar. El reparto, el fondo y el
   giro NO se tocan: son la composición y son de Victor. */
@media (max-width:640px){
  .carrusel{ --aire:40; }
}

/* ── SIN MOVIMIENTO ───────────────────────────────────────────────────────────
   `carrusel.js` ya no anima ni pone autoplay con `prefers-reduced-motion` —no
   pide un solo cuadro—, así que aquí sólo quedan las transiciones de los
   mandos, que son CSS y por tanto sólo se pueden apagar desde CSS. */
@media (prefers-reduced-motion: reduce){
  .carrusel__tarjeta{ will-change:auto; }
  .carrusel__flecha, .carrusel__folio__res, .carrusel__pausa{ transition:none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   EL CIERRE · LIZ SE PRESENTA Y DA DOS PUERTAS
   =============================================================================
   Vive en esta hoja y no en `base.css` porque VIAJA CON EL CARRUSEL: es el pie
   que cuelga de la sección de Liz, y el día que la sección se mueva otra vez el
   cierre se mueve con ella. Es un hermano de `.carrusel`, no un hijo — el porqué
   está escrito en `index.html`, junto al marcado: la sección mide una pantalla
   exacta y su autoplay cuelga de un umbral de 0.35 sobre ella.

   REGISTRO DE LA CASA Y NADA MÁS: garalda, versales con tracking en los rótulos,
   negro opaco de fondo. Ni un botón de formulario, ni una pastilla de color, ni
   un campo que rellenar. DOS PUERTAS Y NADA MÁS: la frase que había aquí —«Hola,
   soy Liz. Contáctame.»— subió a la cabecera de la sección, porque decía lo
   mismo que el rótulo de arriba a dos pantallazos de distancia y Victor cortó
   el eco. Lo que queda no es un pie al que le falte una línea: es la salida de
   una sección que YA se presentó, y las dos puertas dicen adónde van.
   ═══════════════════════════════════════════════════════════════════════════ */
.cierre{
  /* la garalda se declara aquí igual que en `.carrusel` y en `.escala__cta`: el
     token vive en la sección, no en :root */
  --garalda:"Cormorant Concursos", Garamond, "Hoefler Text", "Times New Roman", serif;

  /* OPACO Y CON SU Z, igual que `.carrusel`: el hero es `position:fixed` en
     z-index 0 y sigue vivo debajo del documento entero. */
  position:relative; z-index:1;
  background:var(--negro);

  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.6rem, 4.5vh, 2.8rem);
  padding:clamp(2.8rem, 9vh, 5.2rem) 1.2rem clamp(3.2rem, 11vh, 6rem);
  text-align:center;
}

/* ── LAS DOS PUERTAS ──────────────────────────────────────────────────────────
   En fila y con el mismo peso las dos: ninguna es la principal. El icono encima
   y el rótulo debajo, porque a 320 px dos enlaces con icono al lado del texto
   piden más ancho del que hay y acabarían envolviendo. */
.cierre__puertas{
  margin:0; padding:0; list-style:none;
  display:flex; align-items:flex-start;
  gap:clamp(2rem, 8vw, 3.6rem);
}
.cierre__puerta{
  position:relative;                            /* ancla del campo de toque */
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:.4rem .5rem;
  text-decoration:none;
  color:var(--tinta);
  transition:color 180ms ease;
}
.cierre__puerta svg{ display:block; width:26px; height:26px; }
/* ── EL RÓTULO DICE EL MOTIVO, Y POR ESO SON DOS RENGLONES ───────────────────
   Decía «WHATSAPP» e «INSTAGRAM», que es lo que el icono YA dice; ahora dice por
   qué se pulsa. Eso son 27 caracteres en vez de 8, y a versales con tracking no
   caben en una línea con dos puertas en fila: el corte viaja como `<br>` en el
   texto y en el diccionario, en el punto que cada idioma aguanta.

   EL TRACKING BAJA DE .26em A .2em POR LA MISMA CUENTA. A 320 px cada puerta
   tiene ~130 px y el renglón largo —DISPONIBILIDAD, 14 caracteres— mide 130 a
   .26em y 113 a .2em. Un rótulo de dos palabras aguanta el aire; uno de catorce
   letras no, y quedaba pegado al canto del otro. Sigue siendo versal con
   tracking, que es el registro de la casa, sólo que del lado que cabe.

   `text-align:center` lo hereda del `.cierre`, y `line-height` 1.65 es lo que
   separa dos renglones de versales sin que se lean como dos rótulos. */
.cierre__puerta__txt{
  font-family:var(--garalda);
  font-size:clamp(.62rem, .82vw, .78rem);
  line-height:1.65;
  letter-spacing:.2em; text-transform:uppercase;
  /* `--tenue` y no `--filete`: es texto, y `--filete` da 2.79:1 contra el negro
     —por debajo del 4.5:1 de la WCAG AA— mientras `--tenue` da 5.11:1 con el
     mismo matiz cálido. La misma razón que el conmutador de idioma
     (§ base.css, `.idioma__op.cintillo`). */
  color:var(--tenue);
  transition:color 180ms ease;
}
@media (hover:hover) and (pointer:fine){
  .cierre__puerta:hover{ color:#fff; }
  .cierre__puerta:hover .cierre__puerta__txt{ color:var(--tinta); }
}
.cierre__puerta:focus-visible{ outline:2px solid var(--brasa); outline-offset:3px; }

/* ── EL CAMPO DE TOQUE, QUE NO ES EL DIBUJO ───────────────────────────────────
   Misma técnica que los mandos del carrusel y que el conmutador de idioma: una
   capa transparente y absoluta que no pinta, no ocupa flujo y no mueve un
   píxel del icono ni de la letra. `min-width` y `min-height` de 44 son el
   suelo; el icono se dibuja a 26 px y el rótulo es más bajo todavía, así que
   sin esto el dedo tendría que acertar en el glifo.

   Y LAS DOS PUERTAS VAN SEPARADAS 2rem COMO MÍNIMO, que es más que la mitad de
   los 44 de cada campo: ninguno de los dos alcanza al otro ni a 320 px. */
.cierre__puerta::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:100%;  min-width:44px;
  height:100%; min-height:44px;
}

@media (prefers-reduced-motion: reduce){
  .cierre__puerta, .cierre__puerta__txt{ transition:none; }
}