/* Cierre de cada página (12-oct). La CTO, del final de Tu día: «me parece súper cutre... y poco hilado»: una franja
   con el titular, el botón a la derecha y una línea gris suelta hacia la página siguiente. Ahora las nueve páginas
   cierran igual y encadenadas: a la izquierda, el titular que cierra la historia y la ÚNICA llamada a la demo;
   a la derecha, una tarjeta grande con el clip real de lo que viene, su etiqueta «Siguiente · ...», la frase
   puente que ya existía, el gesto de entrar y los ocho capítulos del relato como puntos (Tu día -> Correo ->
   Asesoría -> Despacho -> Equipo -> Negocio -> Oficina Digital -> Seguridad; la portada lleva a Tu día).
   Seguridad es el final: su tarjeta abre el anuncio en vez de llevar a otra página.

   Movimiento «Premium» (motion-design): la tarjeta se posa como todas las láminas de la web (data-posa, sitio.js),
   la caja de cristal llega medio segundo después, el titular se revela línea a línea (js/cierres.js) y, al pasar
   el ratón, la tarjeta se eleva 4 px, el clip se acerca un 3 % y la flecha se enciende en amarillo. Sin rebotes.
   Con «reducir movimiento», estilo.css deja todo en 1 ms: los estados finales son los de reposo y el clip sigue
   reproduciéndose (js/cierres.js), porque es el producto, no un adorno.

   Va justo encima del pie (pie-c, de otra Fable): fondo en el tono de cierre de cada página (paginas.css) y sin
   borde abajo, para que el pie empiece limpio. */

.cierre { position: relative; overflow: clip; padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px); background: var(--tono-cierre, #ebe3d3); }
/* Capa de ambiente: una luz dorada muy tenue detrás de la tarjeta, como la luz radial del papel del anuncio */
.cierre::before { content: ""; position: absolute; right: -12%; top: -30%; width: 64%; height: 160%; background: radial-gradient(ellipse at center, rgba(205, 180, 108, 0.2) 0%, rgba(205, 180, 108, 0) 62%); pointer-events: none; }
/* Foto de fondo en TODOS los cierres (la CTO, 13-oct: «en esa pondría en todas»): la de la cabecera de la página
   que viene, así el cierre ya huele a lo siguiente. La pone cada cierre con style="--fondo: url(...)". Igual de
   tenue que la de los apartados (.con-fondo, estilo.css); va en ::after porque ::before es la luz dorada, y por
   debajo de todo con isolation para no tapar la tarjeta. */
.cierre { isolation: isolate; }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fondo, none) center / cover no-repeat; opacity: 0.07; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
@media (max-width: 760px) { .cierre::after { opacity: 0.05; } }
.cierre-int { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px 72px; align-items: center; }
.cierre-texto .etiqueta { display: block; margin-bottom: 14px; }
.cierre-texto .respiro { font-size: clamp(32px, 3.5vw, 52px); }
.cierre-texto .linea-seccion { max-width: 40ch; }
.cierre-acciones { margin-top: 30px; }

/* ---------- Titular por líneas: cada palabra en su máscara, numerada por línea (--l) desde js/cierres.js ---------- */
.c-lineas .c-palabra { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.js .c-lineas .c-palabra > span { display: inline-block; transform: translateY(110%); transition: transform 950ms var(--salida) calc(var(--l, 0) * 120ms + 60ms); }
.js .c-lineas.c-visto .c-palabra > span { transform: none; }

/* ---------- La tarjeta del capítulo siguiente ---------- */
.cierre-tarjeta {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; text-align: left; color: inherit; cursor: pointer;
  border-radius: var(--radio); overflow: hidden; background: #fff;
  box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08);
  transition: transform 520ms var(--salida), box-shadow 520ms var(--suave);
}
/* El posado viene de estilo.css ([data-posa]); al pasar el ratón la tarjeta se eleva un poco y la sombra se hunde */
.cierre-tarjeta.puesta:hover, .cierre-tarjeta.puesta:focus-visible { transform: translateY(-4px); box-shadow: 0 70px 140px rgba(50, 38, 12, 0.2), 0 14px 34px rgba(50, 38, 12, 0.1), 0 0 0 1px rgba(74, 79, 90, 0.08); outline: none; }
.cierre-clip { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--humo); }
.cierre-clip video, .cierre-clip img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 1400ms var(--suave); }
.cierre-clip.cierre-foto img { object-position: center; }
.cierre-tarjeta:hover .cierre-clip video, .cierre-tarjeta:hover .cierre-clip img { transform: scale(1.035); }
/* El anuncio (Seguridad): el botón de reproducir en el centro del fotograma */
.cierre-play { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(247, 243, 235, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; box-shadow: 0 14px 34px rgba(42, 47, 58, 0.18); transition: transform 400ms var(--salida), background-color 300ms; }
.cierre-play svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--tinta); }
.cierre-tarjeta:hover .cierre-play { transform: scale(1.08); background: #fff; }

/* La caja de cristal: etiqueta, frase puente, capítulos y la flecha en círculo */
.cierre-cristal {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 18px 16px 22px; border-radius: 16px;
  background: rgba(247, 243, 235, 0.88); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1), 0 16px 40px rgba(50, 38, 12, 0.12);
}
.js .cierre-cristal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--suave) 550ms, transform 850ms var(--salida) 550ms; }
.js .cierre-tarjeta.puesta .cierre-cristal { opacity: 1; transform: none; }
.cierre-cristal .etiqueta { display: block; margin-bottom: 6px; }
.cierre-cristal b { display: block; font-weight: 300; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -0.015em; color: var(--tinta); text-wrap: balance; }
.cierre-cristal b em { font-style: normal; font-weight: 500; color: var(--oro-tinta); }
.cierre-ir { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--tinta-2); transition: color 240ms; }
.cierre-tarjeta:hover .cierre-ir { color: var(--oro-tinta); }
/* Los ocho capítulos: los pasados y el actual en oro mate, el que viene en amarillo con su halo */
.cierre-pasos { display: inline-flex; gap: 5px; margin-left: 12px; vertical-align: middle; }
.cierre-pasos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(74, 79, 90, 0.16); }
.cierre-pasos i.hecho { background: var(--oro-mate); }
.cierre-pasos i.ahora { background: var(--amarillo); box-shadow: 0 0 0 3px rgba(201, 168, 74, 0.22); }
/* La flecha en círculo, la misma de las franjas «Siguiente» (paginas.css), que se enciende al pasar */
.cierre-flecha { position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); background: rgba(255, 255, 255, 0.5); transition: transform 420ms var(--salida), background-color 300ms var(--suave), box-shadow 300ms; }
.cierre-flecha::before { content: ""; position: absolute; left: 16px; top: 24px; width: 18px; height: 1.5px; background: var(--tinta); transition: background-color 300ms; }
.cierre-flecha::after { content: ""; position: absolute; right: 15px; top: 20.5px; width: 8px; height: 8px; border: 1.5px solid var(--tinta); border-left: 0; border-bottom: 0; transform: rotate(45deg); transition: border-color 300ms; }
.cierre-tarjeta:hover .cierre-flecha, .cierre-tarjeta:focus-visible .cierre-flecha { background: var(--amarillo); box-shadow: inset 0 0 0 1px var(--amarillo); transform: translateX(5px); }

/* La portada no cierra con titular propio (ya lo hace «Mañana», con su botón): sólo la tarjeta, a todo el ancho */
.cierre-solo .cierre-int { grid-template-columns: 1fr; }
.cierre-solo .cierre-tarjeta { max-width: 980px; margin-inline: auto; }

/* ---------- Tamaños ---------- */
@media (max-width: 1040px) {
  .cierre-int { gap: 36px 44px; }
  .cierre-cristal { padding: 14px 14px 12px 18px; }
}
@media (max-width: 900px) {
  .cierre-int { grid-template-columns: 1fr; gap: 32px; }
  /* La tarjeta se vuelve vertical: el clip arriba y la caja debajo, dentro de la misma tarjeta blanca */
  .cierre-cristal { position: static; border-radius: 0; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 18px 20px 20px; }
}
@media (max-width: 640px) {
  .cierre { padding: 56px 0 52px; }
  .cierre-acciones { margin-top: 22px; }
  .cierre-acciones .boton { width: 100%; }
  .cierre-cristal { padding: 16px 16px 18px; gap: 12px; }
  .cierre-cristal b { font-size: clamp(19px, 5.6vw, 23px); }
  .cierre-flecha { width: 44px; height: 44px; }
  .cierre-flecha::before { left: 13px; top: 21px; width: 16px; }
  .cierre-flecha::after { right: 13px; top: 18px; width: 7px; height: 7px; }
  .cierre-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .c-lineas .c-palabra > span, .js .cierre-cristal { transform: none; opacity: 1; }
}