/* Copiado de destiny-web main@3890fd2 · demo V3.4: src/demo/v21/v3.css. No editar: se sobrescribe con tools/sync-demo.mjs. Sin sus @font-face (las fuentes las declara el tema). */
/* =====================================================================================================
   v3.css · Capa visual GLOBAL de la V3 (H-46/H-47), inspirada en agenciabillber.es.
   Contiene: tokens de diseño, tipografía, botones, cabecera flotante, escenas 1 y 2 de la portada (titular y
   manifiesto), anchos de banda comunes, banda final y motion global.
   Las escenas por sección (fichas, carpetas, carrusel, directorio…) están en scenes.css.
   Se carga en src/main.jsx, DESPUÉS de v21.css, para poder sobrescribirlo con la misma especificidad.

   Motion: lo que depende del scroll lee --p (0 a 1), que escribe src/demo/v21/scrollMotion.js. Sin JavaScript o con
   prefers-reduced-motion el CSS cae en --p:1 (estado final) y todo el contenido se ve.
   ===================================================================================================== */

/* Fuente de la firma de marca (solo para una palabra del titular). font-display:optional evita saltos al cargar. */
/* ---- Tokens de diseño: colores, radios, anchos y curva de movimiento. Viven en .demo-v2 (raíz de la demo). ---- */
.demo-v2{
 --navy:#0f2638; /* Azul noche de las bandas oscuras. */
 --sun:#f0b45a; /* Ámbar: acento cálido. */
 --sky:#a8d1ec; /* Azul claro: etiquetas y fichas. */
 --mint:#aadccb; /* Verde menta: etiquetas y fichas. */
 --sand:#f3ead9; /* Arena: tarjetas cálidas. */
 --ease:cubic-bezier(.16,1,.3,1); /* Curva de entrada rápida y frenada suave. */
 --r:24px; /* Radio habitual de bandas y tarjetas. */
 --r-lg:32px; /* Radio grande (tarjetas protagonistas). */
 --muted-ink:#7b8fa0; /* Gris azulado del texto aún sin teñir (contraste 3,3:1: solo para texto grande ≥24 px). */
 --band-w:min(1280px,calc(100% - 32px)); /* Ancho común de todas las bandas redondeadas. */
 accent-color:var(--blue); /* Controles nativos (casillas, radios) con el azul de marca. */
}
@media(max-width:760px){.demo-v2{--band-w:calc(100% - 20px);--r:20px;--r-lg:24px}} /* En móvil: bandas casi a ancho completo y radios menores. */

/* ---- Detalles del navegador que también llevan el diseño ---- */
html{scrollbar-color:var(--blue,#214f73) #eaf1f5} /* Barra de scroll con los colores de marca (Firefox/Chrome recientes). */
.demo-v2 ::selection{background:var(--sun);color:var(--navy)} /* Color al seleccionar texto. */
.demo-v2 :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} /* Anillo de foco visible para teclado (accesibilidad). */
.demo-v2 main:focus-visible{outline:0} /* <main> recibe foco programático al navegar: sin anillo para no dibujar una línea. */

/* ---- Tipografía: titulares con presencia, sin pasar de 6rem ni de -0.04em ---- */
.demo-v2 h1,.demo-v2 h2{text-wrap:balance} /* Reparte las líneas del titular de forma equilibrada. */
.v21-section h2{font-size:clamp(2rem,3.7vw,3.4rem);letter-spacing:-.04em;line-height:1.06;max-width:18ch} /* H2 de sección: grande y estrecho. */
.v21-text .v21-section h2,.v21-documentary .v21-section h2{max-width:none} /* En secciones de texto y páginas documentales, sin límite de ancho. */
.v21-section-heading .v2-kicker{display:none} /* Salvaguarda: si algún kicker llega al DOM, no se ve (SectionHeading ya no lo pinta). */
.v21-section-copy>p{text-wrap:pretty} /* Párrafos sin líneas finales cortas. */
.v2-picture img{border-radius:var(--r)} /* Todas las imágenes con esquinas redondeadas. */

/* ---- Etiqueta en píldora sobre el H1 de las páginas interiores (como los chips de Billber) ---- */
.v21-hero .v2-kicker,.v2-hero .v2-kicker{display:inline-flex;width:fit-content;padding:7px 15px;border-radius:999px;background:var(--pale);color:var(--blue);letter-spacing:.1em;margin-bottom:26px}

/* ---- Botones principales en píldora, con respuesta al pasar el ratón y al pulsar ---- */
.v2-button{border-radius:999px;padding:16px 26px;transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)} /* Forma y transiciones. */
.v2-button:hover{transform:translateY(-2px);box-shadow:0 16px 28px -16px rgba(33,79,115,.8)} /* Se eleva un poco y proyecta sombra. */
.v2-button:active{transform:translateY(0) scale(.98);box-shadow:none} /* Al pulsar se hunde ligeramente. */
.v2-button>span[aria-hidden]{transition:transform .25s var(--ease)} /* La flecha decorativa se mueve suave. */
.v2-button:hover>span[aria-hidden]{transform:translate(3px,-3px)} /* La flecha se desplaza arriba a la derecha. */

/* ---- Cabecera: pegada arriba en móvil y píldora flotante en escritorio ---- */
.v21-header{position:sticky;top:0;z-index:60;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);background:rgba(255,255,255,.92)} /* Base (móvil). */
@media(min-width:1051px){
 .v21-header{top:10px;width:var(--band-w);margin:12px auto 0;min-height:0;padding:7px 12px 7px 20px;border:1px solid rgba(22,50,71,.08);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 16px 36px -20px rgba(15,38,56,.5)} /* Píldora flotante. */
 .v21-header .v2-logo img{width:46px;height:46px} /* Logo más pequeño dentro de la píldora. */
 .v21-header .v21-submenu{border-radius:18px;box-shadow:0 22px 44px -22px rgba(15,38,56,.45)} /* Submenús desplegables redondeados. */
}

/* ---- Portada · escena 1: titular de Elisa, CTA y panorama ---- */
.v2-home-hero{width:var(--band-w);margin:0 auto;max-width:none;padding:clamp(28px,5vw,72px) clamp(10px,2vw,28px) clamp(20px,3vw,36px);text-align:left;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(18px,2.4vw,32px) 48px} /* Contenedor del hero. */
.v2-home-hero .v2-kicker{flex:1 0 100%;font-family:DestinyFutura,Arial,sans-serif;font-size:clamp(2.7rem,7vw,5.8rem);font-weight:500;line-height:1;letter-spacing:-.04em;text-transform:none;color:var(--ink);margin:0;max-width:15ch;text-wrap:balance} /* La frase de Elisa es el titular visual. */
.v3-accent{font-style:normal;font-family:DestinySignature,'Brush Script MT',cursive;font-weight:400;font-size:1.16em;letter-spacing:0;color:var(--blue);display:inline-block;transform:rotate(-3deg);padding-inline:.05em} /* Palabra con la firma de marca. */
.v2-home-hero h1{flex:0 1 28ch;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.5;letter-spacing:0;font-weight:500;color:var(--muted);margin:0} /* H1 de marca (SEO) como apoyo, en pequeño. */
.v2-home-hero h1>span{color:var(--blue)} /* La segunda línea del H1 en azul. */
.v2-home-hero .v2-actions{flex:0 0 auto;justify-content:flex-start;margin:0} /* Botones a la derecha del H1. */
@media(max-width:760px){.v2-home-hero .v2-actions{flex:1 0 100%;flex-direction:column;align-items:stretch}} /* En móvil los botones ocupan todo el ancho. */
.v2-panorama{width:var(--band-w);margin:8px auto 0;border-radius:var(--r);overflow:hidden} /* Panorama dentro de la banda redondeada. */
.v2-panorama img{aspect-ratio:2.4;max-height:64vh;border-radius:0;transform-origin:50% 55%} /* Proporción panorámica; la banda ya redondea. */
@media(max-width:760px){.v2-panorama img{aspect-ratio:1.15;max-height:none}} /* En móvil, proporción casi cuadrada. */

/* ---- Sello de marca «CONNECT with …» (H-55): MISMO diseño que el de la versión EN (src/styles.css, .connect) ---- */
.v3-connect{display:flex;flex-direction:column;align-items:center;width:fit-content;margin:0 0 14px;color:var(--blue)} /* Bloque centrado en sí mismo: la firma queda centrada bajo CONNECT. */
.v3-connect span{font-family:DestinyFutura,Futura,Roboto,sans-serif;font-size:30px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none} /* CONNECT en Futura, 30 px, sin espaciado (como en EN). */
.v3-connect em{font-family:Signature,'Brush Script MT',cursive;font-size:27px;font-weight:400;line-height:1;margin-top:-7px;transform:rotate(-4deg);font-style:normal;color:#70777b} /* «with …» en letra de firma, gris, girada −4° y pegada a CONNECT (valores de EN; ≥ 24 px: texto grande). */
.v21-stat-section .v3-connect,.v3-topics-panel .v3-connect{color:var(--sky)} /* En paneles azul noche, CONNECT en azul cielo. */
.v21-stat-section .v3-connect em,.v3-topics-panel .v3-connect em{color:#c9d8e4} /* Y la firma en gris claro (contraste alto sobre azul noche). */
.v3-statement .v3-connect{margin-inline:auto} /* En la apertura centrada, el sello se centra. */
.v2-home-hero .v3-connect{flex:0 0 100%;margin:0 0 14px} /* En el hero de la portada: línea propia y alineado a la izquierda, como el titular. */
.v2-home-hero .v3-connect span{font-size:38px;letter-spacing:.16em} /* En el hero, el tamaño grande de EN (38 px con espaciado). */
.v2-home-hero .v3-connect em{font-size:35px;margin-top:-11px} /* Y su firma de 35 px. */
@media(max-width:780px){.v3-connect span{font-size:26px}.v3-connect em{font-size:24px}.v2-home-hero .v3-connect span{font-size:30px;letter-spacing:0}.v2-home-hero .v3-connect em{font-size:28px}} /* Móvil: algo menor (el gris sigue ≥ 24 px). */

/* ---- Portada · escena 2: manifiesto (el texto se tiñe palabra a palabra al hacer scroll) ---- */
.v3-manifesto{position:relative;width:var(--band-w);margin:clamp(40px,7vw,112px) auto;padding:clamp(24px,5vw,72px) clamp(16px,19%,272px);text-align:center;min-height:min(78vh,720px);display:grid;align-content:center;gap:clamp(22px,3vw,40px)} /* Sección centrada con hueco lateral para las fotos. */
.v3-reveal{font-size:clamp(1.5rem,2.9vw,2.6rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink);max-width:24em;margin:0;justify-self:center;text-wrap:pretty} /* Texto grande (≥24 px: "texto grande" para contraste). */
.v3-reveal span{color:var(--ink)} /* Base: sin soporte de color-mix o sin JS, todo en tinta. */
@supports(color:color-mix(in srgb,red,blue)){
 .v3-reveal span{color:color-mix(in srgb,var(--ink) calc(clamp(0,calc(var(--p,1) * (var(--n) + 10) - var(--i)),1) * 100%),var(--muted-ink))} /* Cada palabra pasa de gris a tinta según --p, su posición (--i) y el total (--n). */
}
.v3-manifesto-rest{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--muted);max-width:34em;margin:0;justify-self:center} /* Frase de cierre, tamaño normal. */
.v3-float{position:absolute;width:clamp(130px,16vw,236px);z-index:0;transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--amp,0px)),0)} /* Foto flotante: parallax = (0,5 − --p) × amplitud. */
.v3-float .v2-picture img{aspect-ratio:4/5;object-fit:cover;width:100%} /* Foto vertical recortada. */
.v3-float figcaption{position:static;padding:6px 2px 0;background:none;font-size:10px;color:var(--muted)} /* Pie «Imagen orientativa» discreto. */
.v3-f1{left:1.5%;top:8%;--amp:150px} /* Foto 1: arriba a la izquierda, se mueve 150 px. */
.v3-f2{right:1.5%;top:18%;--amp:-110px} /* Foto 2: derecha, se mueve en sentido contrario. */
.v3-f3{left:9%;bottom:2%;--amp:90px;width:clamp(100px,11vw,170px)} /* Foto 3: abajo a la izquierda, más pequeña. */
.v3-reveal,.v3-manifesto-rest{position:relative;z-index:1} /* El texto queda por encima de las fotos. */
@media(max-width:1000px){.v3-manifesto{min-height:0;padding-inline:8px}} /* En pantallas estrechas no hay fotos: texto a ancho completo. */

/* ---- Barra de pasos de la portada y secciones con tinte: misma banda redondeada que el resto ---- */
.v2-journey{width:var(--band-w);margin:clamp(8px,2vw,24px) auto;border-radius:var(--r)} /* Barra «01 Descubre · 02 Encuentra · 03 Hablemos». */
.v21-tint{background:var(--pale);width:var(--band-w);margin:20px auto;border-radius:var(--r)} /* Secciones con fondo pálido. */

/* ---- Banda final de los artículos y cierre oscuro de la portada ---- */
.v2-finish{background:var(--navy);color:#fff;border-radius:var(--r);width:var(--band-w);margin:clamp(24px,4vw,56px) auto 0;padding:clamp(48px,7vw,96px) 0} /* Banda de cierre de los artículos. */
.v2-finish h2,.v2-finish .v2-kicker{color:#fff} /* Titular y etiqueta en blanco. */
.v2-finish .v2-kicker{opacity:.7} /* Etiqueta algo más suave. */
.v2-finish .v2-button{background:#fff;border-color:#fff;color:var(--navy)!important} /* Botón blanco sobre fondo oscuro. */
.v2-finish .v2-button:hover{background:var(--sun);border-color:var(--sun)} /* Al pasar el ratón, ámbar. */
.v2-finish .v2-text-link{color:#fff} /* Enlaces de texto en blanco. */

/* H-53: la banda oscura de H/hablemos se retira; el cierre de todas las páginas es CtaBand (scenes.css §16). */

/* ---- Motion global ---- */
@media(prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:var(--ease,ease)}} /* Fundido corto entre páginas (la transición la lanza App.jsx). */
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){ /* Solo navegadores con animación ligada al scroll en CSS; el resto ve la versión estática. */
  .v2-panorama img{animation:v3-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%} /* El panorama se desplaza despacio. */
  @keyframes v3-drift{from{transform:translateY(-5%) scale(1.1)}to{transform:translateY(5%) scale(1.1)}} /* De −5 % a +5 % con zoom del 10 %. */
  .v21-has-image .v2-picture img{animation:v3-open linear both;animation-timeline:view();animation-range:entry 0% entry 45%} /* Las fotos de sección se abren con un recorte. */
  @keyframes v3-open{from{clip-path:inset(7% 7% 7% 7% round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}} /* Del recorte al 7 % a la foto completa. */
 }
}
@media(prefers-reduced-motion:reduce){.v3-float{transform:none}} /* Con "reducir movimiento" las fotos flotantes no se mueven. */