/* Portada · POR QUÉ SE CREÓ (pq-): la apertura del anuncio contada en cuatro golpes con sus propios clips
   (video/porque_*.{webm,mp4}, cortados del render: copiar, aristas, rebatir y desde dentro).
   La CTO (12-oct): las tres fotos de banco «no aportan nada»; quiere algo «que pase rápido, en movimiento, y que
   diga mucho más». Por eso cada golpe es un bloque normal (nada sticky ni pin: lo prohibió el 09-oct) con el
   clip mudo en bucle a un lado y, al otro, el titular, la línea y los rótulos que dice la locución.
   Prefijo pq- para no chocar con estilo.css; hereda variables, .contenedor, .respiro, .etiqueta y las entradas
   [data-entra]/[data-posa] de sitio.js. Se enlaza desde la propia sección (un <link> en el cuerpo es válido): así
   la sección no toca parciales/cabeza.html, que es de otra sesión. */

/* De la noche al día, como el anuncio: el problema arriba en gris azulado frío y la respuesta abajo ya sobre el
   papel cálido de la sección siguiente (AnIA). El degradado es la transición, no hay corte. */
.pq { position: relative; padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #e8eaee 0%, #efeee9 55%, var(--papel-calido) 100%); overflow: clip; }
.pq-cab { max-width: 820px; margin-bottom: clamp(36px, 5vw, 72px); }
.pq-cab .etiqueta { display: block; margin-bottom: 14px; }
.pq-cab .respiro { font-size: clamp(34px, 4.2vw, 60px); }

/* Cuatro golpes, uno tras otro; en escritorio el clip y el texto se alternan de lado para que el ojo baje en zigzag */
.pq-golpes { display: grid; gap: clamp(44px, 6vw, 96px); counter-reset: golpe; }
.pq-golpe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
/* En los pares el clip va a la izquierda y sigue siendo la columna ancha: el texto cambia de lado, el peso no */
.pq-golpe:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pq-golpe:nth-child(even) .pq-texto { order: 2; }
.pq-texto { position: relative; }
/* Número y regla dorada que se dibuja (la «regla-oro» del claim del anuncio) */
.pq-num { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-tinta); font-weight: 500; }
.pq-num::before { content: ""; width: 44px; height: 2px; background: var(--oro-mate); transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--salida) 250ms; }
.pq-texto.visto .pq-num::before { transform: scaleX(1); }
.pq-texto h3 { font-size: clamp(27px, 2.75vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); text-wrap: balance; }
.pq-texto h3 em { display: inline-block; font-style: normal; font-weight: 500; color: var(--oro-tinta); text-wrap: balance; }
.pq-texto p { margin-top: 14px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--tinta-2); max-width: 42ch; text-wrap: balance; }
/* Rótulos: lo que dice la voz, como las pastillas del anuncio, en cristal claro (nada negro) con su punto amarillo.
   Entran desde la izquierda con clip-path, uno tras otro, igual que los rótulos del vídeo. */
.pq-rotulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pq-rotulos li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--tinta-2); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; box-shadow: inset 0 0 0 1px rgba(74, 79, 90, 0.1), 0 6px 18px rgba(50, 38, 12, 0.06); white-space: nowrap; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 550ms var(--salida); }
.pq-rotulos li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--amarillo); flex: none; }
.pq-texto.visto .pq-rotulos li { clip-path: inset(0 0 0 0 round 999px); }
.pq-texto.visto .pq-rotulos li:nth-child(1) { transition-delay: 450ms; }
.pq-texto.visto .pq-rotulos li:nth-child(2) { transition-delay: 600ms; }
.pq-texto.visto .pq-rotulos li:nth-child(3) { transition-delay: 750ms; }

/* El clip: la noche del anuncio como lámina sobre el papel (la caja oscura ES la imagen; el fondo sigue claro).
   16:9 como los clips, esquinas y sombra de las láminas de la web; se posa con [data-posa] (sitio.js). */
.pq-clip { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #1a2131; box-shadow: var(--sombra-lamina), 0 0 0 1px rgba(74, 79, 90, 0.08); cursor: pointer; }
.pq-clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Una luz dorada muy tenue detrás de cada lámina, como el halo del anuncio: la caja oscura no cae a plomo sobre el papel */
.pq-clip::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(ellipse at 50% 60%, rgba(205, 180, 108, 0.22), transparent 65%); pointer-events: none; }

/* La respuesta (04): etiqueta dorada encima y el titular un punto mayor, es el golpe que contesta a los tres anteriores */
.pq-golpe.pq-respuesta .etiqueta { display: block; margin-bottom: 12px; }
.pq-golpe.pq-respuesta h3 { font-size: clamp(30px, 3.1vw, 46px); }
.pq-golpe.pq-respuesta .pq-rotulos li { background: rgba(255, 250, 230, 0.9); box-shadow: inset 0 0 0 1px rgba(205, 180, 108, 0.55), 0 6px 18px rgba(138, 111, 42, 0.1); color: var(--tinta); }

@media (max-width: 900px) {
  /* También los pares: su regla de dos columnas pesa más que .pq-golpe a secas y, sin nombrarlos, seguían a dos columnas en el móvil */
  .pq-golpe, .pq-golpe:nth-child(even) { grid-template-columns: 1fr; gap: 22px; }
  .pq-golpe:nth-child(even) .pq-texto { order: 0; }
  .pq-golpes { gap: 56px; }
}
@media (max-width: 520px) {
  .pq { padding: 64px 0 48px; }
  .pq-cab .respiro { font-size: clamp(30px, 8.4vw, 36px); }
  .pq-golpes { gap: 48px; }
  .pq-num { margin-bottom: 14px; font-size: 11px; }
  .pq-texto h3 { font-size: clamp(25px, 7.2vw, 30px); }
  .pq-golpe.pq-respuesta h3 { font-size: clamp(27px, 7.8vw, 33px); }
  .pq-texto p { margin-top: 12px; font-size: 16px; }
  .pq-rotulos { margin-top: 16px; gap: 6px; }
  .pq-rotulos li { font-size: 12.5px; padding: 6px 11px 6px 9px; }
  .pq-clip { border-radius: 14px; }
}
/* Con «reducir movimiento» (la CTO lo tiene) la sección sigue viva: reglas y rótulos ya en su sitio, y los clips
   siguen en bucle porque son el contenido, no un adorno (porque.js los arranca aunque sitio.js no lo haga). */
@media (prefers-reduced-motion: reduce) {
  .pq-num::before { transform: scaleX(1); }
  .pq-rotulos li { clip-path: inset(0 0 0 0 round 999px); }
}