/* EMFF — hoja global compartida por todas las páginas.
Sólo contiene lo que no puede ir en estilos inline: @font-face, resets,
geometría responsive y estados (conmutados por atributos en el elemento raíz). */
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Variable.woff2?v=4523d2c6') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-400.woff2?v=c9c1cc18') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-500.woff2?v=c15c1925') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-600.woff2?v=99179cde') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
*{box-sizing:border-box;}
:root{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* La cabecera es fija: sin este margen un enlace con #id deja el destino debajo de ella. */
[id]{scroll-margin-top:104px;}
html{background:#F1EEE3;scrollbar-gutter:stable;}
/* Inicio conserva el petróleo del hero en el sobre-scroll; el resto arranca ya en crema
para que no se vea un fondo azul antes del primer pintado. */
:root:has([data-el="hero-full"]){background:#043948;}
body{margin:0;background:#F4F4F3;color:#043948;font-family:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,video{display:block;max-width:100%;}
img{height:auto;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:#056876;text-decoration:none;}
a:hover{color:#E85F1B;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
select{appearance:none;-webkit-appearance:none;}
summary{cursor:pointer;list-style:none;}
summary::-webkit-details-marker{display:none;}
::selection{background:#A2C86E;color:#fff;}
mark{background:#A2C86E;color:#fff;padding:0 .15em;border-radius:3px;}
:focus-visible{outline:2px solid #056876;outline-offset:3px;border-radius:4px;}
/* Rejillas responsive */
[data-r^="g-"]{display:grid;grid-template-columns:minmax(0,1fr);}
[data-r="g-24"]{grid-template-columns:repeat(2,minmax(0,1fr));}
[data-r="desk-nav"],[data-r="nav-cta"],[data-r="steps-nav"],[data-r="mobile-nav"]{display:none;}
/* Sólo los enlaces de primer nivel de la barra: la regla general alcanzaba también a las
tarjetas del mega-panel, que está dentro de esta misma navegación, y sus descripciones
salían en una línea desbordando la columna vecina. */
[data-r="desk-nav"] > a,[data-r="desk-nav"] > [data-el="drop"] > a{white-space:nowrap;}
[data-r="burger"]{display:flex;}
[data-r="step"]{position:static;}
/* Tinte de marca sobre las fotos de portada: un velo teal→verde en soft-light que unifica
material fotográfico de orígenes muy distintos sin apagar el color original. */
[data-el="hero-fig"]:has(> [data-el="hero-img"]){isolation:isolate;}
/* Safari: un hijo con transform compositado (paralaje/zoom) ignora el border-radius del padre
con overflow:hidden; la máscara obliga al recorte redondeado. */
[data-el="hero-fig"]{-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000);}
[data-el="hero-fig"]:has(> [data-el="hero-img"])::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(196deg,rgba(5,128,142,0.5) 0%,rgba(4,57,72,0.22) 48%,rgba(75,143,51,0.42) 100%);}
[data-el="hero-fig"][data-sin-velo]:has(> [data-el="hero-img"])::after{content:none;}
/* Estados */
[data-el="hero-fig"]{transform:scale(0.94);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.22,1,.36,1);}
:root[data-hero="in"] [data-el="hero-fig"]{transform:scale(1);}
[data-el="hero-img"],[data-el="hero-canvas"]{transform:scale(1.06) translate3d(0,var(--hero-y,0px),0);}
:root[data-scrolled="1"] [data-el="nav-pill"]{background:rgba(255,255,255,0.74);box-shadow:0 16px 44px -24px rgba(4,57,72,0.45),inset 0 1px 0 0 rgba(255,255,255,0.28),inset 0 -1px 0 0 rgba(238,234,222,0.08);}
/* Índice de «Nuestra respuesta»: el paso en pantalla se marca con el crema del sistema,
no con el negro; al pasar el cursor la píldora sube a blanco. */
[data-jump]{background:transparent;color:rgba(4,57,72,0.64);}
[data-jump]:hover,[data-jump]:focus-visible{background:#FFFFFF;color:#043948;}
:root[data-step="0"] [data-jump="0"],:root[data-step="1"] [data-jump="1"],:root[data-step="2"] [data-jump="2"],:root[data-step="3"] [data-jump="3"],:root[data-step="4"] [data-jump="4"],:root[data-step="5"] [data-jump="5"],:root[data-step="6"] [data-jump="6"]{background:#E8E8E6;color:#043948;}
:root[data-step="0"] [data-jump="0"]:hover,:root[data-step="1"] [data-jump="1"]:hover,:root[data-step="2"] [data-jump="2"]:hover,:root[data-step="3"] [data-jump="3"]:hover{background:#FFFFFF;}
/* Rejilla del panel: 7 áreas + la tarjeta a la página índice. */
[data-r="menu-grid"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
[data-el="menu-card"]:hover img{transform:scale(1.045);}
/* Al pasar por el menú el fondo se vuelve blanco sólido; con el panel abierto se mantiene. */
[data-el="nav-pill"]{border-radius:16px!important;}
[data-el="nav-pill"]:hover,:root[data-drop="open"] [data-el="nav-pill"],html:has([data-el="drop"]:focus-within) [data-el="nav-pill"]{background:#FFFFFF!important;box-shadow:0 20px 50px -24px rgba(4,57,72,0.34),inset 0 1px 0 0 rgba(255,255,255,0.6)!important;}
/* La cortina lleva su opacidad en línea, así que aquí hace falta !important. */
:root[data-drop="open"] [data-el="drop-scrim"],html:has([data-el="drop"]:focus-within) [data-el="drop-scrim"]{opacity:1!important;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-el="drop-scrim"]{background:rgba(4,57,72,0.66);}}
:root[data-drop="open"] [data-el="drop-panel"],html:has([data-el="drop"]:focus-within) [data-el="drop-panel"]{max-height:min(78vh,700px)!important;overflow-y:auto!important;}
:root[data-drop="open"] [data-el="drop-inner"],html:has([data-el="drop"]:focus-within) [data-el="drop-inner"]{opacity:1!important;transform:translateY(0)!important;transition-delay:.1s;}
:root[data-menu="open"] [data-r="mobile-nav"]{display:block;}
[data-el="burger"] span span{transition:transform .3s ease;}
:root[data-menu="open"] [data-el="burger"] span span:first-child{transform:translateY(2.75px) rotate(45deg);}
:root[data-menu="open"] [data-el="burger"] span span:last-child{transform:translateY(-2.75px) rotate(-45deg);}
[data-el="acc-sign"]::after{content:'+';}
/* Iconos de los principios: cada uno tiene su propio micro-movimiento al pasar el cursor. */
[data-el^="pr-"]{transform-box:view-box;transform-origin:12px 12px;transition:transform .55s cubic-bezier(.22,1,.36,1);}
[data-el="pr-beam"]{transform-origin:12px 8px;transform:rotate(-7deg);}
summary:hover [data-el="pr-lupa"],summary:focus-visible [data-el="pr-lupa"]{transform:translate(1.5px,-1.5px);}
summary:hover [data-el="pr-grid"],summary:focus-visible [data-el="pr-grid"]{transform:rotate(45deg) scale(0.92);}
summary:hover [data-el="pr-core"],summary:focus-visible [data-el="pr-core"]{transform:scale(1.9);}
summary:hover [data-el="pr-diamond"],summary:focus-visible [data-el="pr-diamond"]{transform:rotate(45deg) scale(0.82);}
summary:hover [data-el="pr-lens-a"],summary:focus-visible [data-el="pr-lens-a"]{transform:translateX(-2.4px);}
summary:hover [data-el="pr-lens-b"],summary:focus-visible [data-el="pr-lens-b"]{transform:translateX(2.4px);}
summary:hover [data-el="pr-beam"],summary:focus-visible [data-el="pr-beam"]{transform:rotate(0deg);}
summary:hover [data-el="pr-tri"],summary:focus-visible [data-el="pr-tri"]{transform:rotate(120deg);}
/* Diálogo global: el globo se acerca en lugar de rotar; la hoja del círculo se endereza. */
details[name="respuesta"] summary:hover [data-el="pr-tri"],details[name="respuesta"] summary:focus-visible [data-el="pr-tri"]{transform:translate(-2.6px,-2.4px);}
[data-el="pr-tri2"]{transform:translate(-3px,-2px) scale(.86);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease;}
summary:hover [data-el="pr-tri2"],summary:focus-visible [data-el="pr-tri2"]{opacity:1;transform:translate(0,0) scale(1);}
details[name="respuesta"] summary:hover [data-el="pr-core"],details[name="respuesta"] summary:focus-visible [data-el="pr-core"]{transform:translateY(-1.6px);}
details[name="respuesta"] [data-el="pr-beam"]{transform-origin:12px 16.6px;transform:rotate(-9deg);}
details[name="respuesta"] summary:hover [data-el="pr-beam"],details[name="respuesta"] summary:focus-visible [data-el="pr-beam"]{transform:rotate(4deg);}
details[name="respuesta"] summary:hover [data-el="pr-lens-a"],details[name="respuesta"] summary:focus-visible [data-el="pr-lens-a"]{transform:translate(-1.4px,1.1px);}
details[name="respuesta"] summary:hover [data-el="pr-lens-b"],details[name="respuesta"] summary:focus-visible [data-el="pr-lens-b"]{transform:translate(1.4px,1.1px);}
/* Salvaguardas: al pasar, el escudo se dibuja a sí mismo y el árbol brota desde la base.
El transform:none anula la regla genérica de summary:hover (rotación del rombo de otras páginas). */
details[name="respuesta"] summary:hover [data-el="pr-diamond"],details[name="respuesta"] summary:focus-visible [data-el="pr-diamond"]{transform:none;}
details[name="respuesta"] summary:hover [data-el="pr-diamond"] path,details[name="respuesta"] summary:focus-visible [data-el="pr-diamond"] path{stroke-dasharray:58;animation:emff-escudo 1s cubic-bezier(.4,0,.2,1) both;}
[data-el="pr-check"]{transform-origin:12px 16.6px;}
details[name="respuesta"] summary:hover [data-el="pr-check"],details[name="respuesta"] summary:focus-visible [data-el="pr-check"]{animation:emff-brote .85s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes emff-escudo{from{stroke-dashoffset:58;}to{stroke-dashoffset:0;}}
@keyframes emff-brote{0%{transform:scale(0.45);opacity:0;}35%{opacity:1;}100%{transform:scale(1);opacity:1;}}
/* ADN (Nature Integrity): crece ligeramente en hover. */
[data-el="pr-dna"]{transition:transform .45s cubic-bezier(.22,1,.36,1);}
details[name="respuesta"] summary:hover [data-el="pr-dna"],details[name="respuesta"] summary:focus-visible [data-el="pr-dna"]{transform:scale(1.15);}
/* Vídeo de Nature Integrity: la capa de play desaparece al reproducir; el mute alterna icono. */
[data-el="ni-box"][data-playing="1"] [data-el="ni-play"]{opacity:0 !important;pointer-events:none;}
[data-el="ni-mute"],[data-el="ni-full"]{display:flex;align-items:center;justify-content:center;}
[data-el="ni-box"]:not([data-playing="1"]) :is([data-el="ni-mute"],[data-el="ni-full"]){display:none;}
[data-el="ni-play"]:hover > span{transform:scale(1.08);}
[data-el="ni-mute"][data-muted="1"] [data-el="ni-on"]{display:none;}
[data-el="ni-mute"]:not([data-muted="1"]) [data-el="ni-off"]{display:none;}
/* Spotlight del vídeo NIM: capa fija a nivel de raíz, abierta con data-open.
Va con visibilidad + opacidad (no display) para poder fundirse, y el vídeo
viaja desde la caja pequeña con un FLIP que aplica site.js/el componente. */
[data-el="ni-overlay"]{display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s;}
[data-el="ni-overlay"][data-open="1"]{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .45s ease;}
details[name="respuesta"] summary:hover [data-el="pr-dna"] :is([data-el="pr-lens-a"],[data-el="pr-lens-b"]),details[name="respuesta"] summary:focus-visible [data-el="pr-dna"] :is([data-el="pr-lens-a"],[data-el="pr-lens-b"]){transform:none;}
/* Mercados ambientales: las flechas de intercambio dan una vuelta completa. */
[data-el="pr-giro"]{transition:transform .8s cubic-bezier(.22,1,.36,1);}
summary:hover [data-el="pr-giro"],summary:focus-visible [data-el="pr-giro"]{transform:rotate(360deg);}
/* Gobernanza: el frontón se eleva y las columnas se asientan. */
summary:hover [data-el="pr-check"],summary:focus-visible [data-el="pr-check"]{transform:translateY(0.9px);}
@media (prefers-reduced-motion:reduce){[data-el^="pr-"]{transition:none;}}
/* Iconos de los tipos de colaboración (Nuestra red): mismo lenguaje que los principios,
un micro-movimiento propio por tarjeta al pasar el cursor. */
[data-el^="tp-"]{transform-box:view-box;transform-origin:12px 12px;transition:transform .55s cubic-bezier(.22,1,.36,1);}
[data-el="tipo"]:hover [data-el="tp-eslabonA"]{transform:translate(1.4px,1.2px);}
[data-el="tipo"]:hover [data-el="tp-eslabonB"]{transform:translate(-1.4px,-1.2px);}
[data-el="tipo"]:hover [data-el="tp-burbujas"]{transform:translateY(-2.2px);}
[data-el="tipo"]:hover [data-el="tp-chip"]{transform:scale(1.28);}
[data-el="tipo"]:hover [data-el="tp-techo"]{transform:translateY(-1.8px);}
[data-el="tipo"]:hover [data-el="tp-huellaA"]{transform:translateY(-1.1px);}
[data-el="tipo"]:hover [data-el="tp-huellaB"]{transform:translateY(-2.4px);}
[data-el="tipo"]:hover [data-el="tp-capa"]{transform:translateX(2.8px);}
[data-el="tipo"]:hover [data-el="tp-anillo"]{transform:rotate(60deg);}
@media (prefers-reduced-motion:reduce){[data-el^="tp-"]{transition:none;}}
details[open] [data-el="acc-sign"]::after{content:'\2013';}
:root[data-stats="off"] [data-el="stats"]{display:none;}
:root[data-steps="flat"] [data-r="step"]{position:static;}
/* Enlace de navegación activo */
[aria-current="page"][data-nav]{background:rgba(4,57,72,0.07);}
/* Foto de la caja verde: apilada bajo el texto es una banda ancha; en dos columnas
pasa a cuadrada para acompañar la altura del bloque de texto. */
[data-el="horizonte-fig"]{aspect-ratio:16/10;}
@media (min-width:1000px){[data-el="horizonte-fig"]{aspect-ratio:1/1;height:100%;}}
[data-el="rejilla-formas"]>li{display:flex;flex-direction:column;border-top:1px solid #C9E1A8;border-left:1px solid #C9E1A8;}
[data-el="rejilla-formas"]>li>a{margin-top:auto;padding-top:16px;}
[data-el="rejilla-formas"]>li:first-child{border-top:0;}
@media (max-width:719.98px){[data-el="rejilla-formas"]>li{border-left:0;}}
@media (min-width:720px){
[data-r="g-2"],[data-r="g-123"],[data-r="g-124"]{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:720px) and (max-width:859.98px){
[data-el="rejilla-formas"]>li:nth-child(odd){border-left:0;}
[data-el="rejilla-formas"]>li:nth-child(-n+2){border-top:0;}
}
@media (min-width:860px){
[data-r="step-inner"]{display:grid;grid-template-columns:1.35fr 1fr;}
[data-r="step"]{position:sticky;will-change:transform,opacity;transform-origin:18% 130%;}
/* La ficha a punto de quedar tapada se retira: giro leve, desplazamiento a la derecha y
desvanecido. El progreso lo calcula la lógica en cada fotograma. */
[data-r="step"][data-saliendo="1"]{pointer-events:none;}
}
@media (min-width:1000px){
[data-r="g-steps"]{grid-template-columns:236px minmax(0,1fr);}
[data-r="steps-nav"]{display:flex;}
[data-r="g-56"]{grid-template-columns:5fr 6fr;}
/* Diálogo global: la columna de texto arranca donde la de la caja NIM superior (misma proporción que g-65). */
#dialogo [data-r="g-56"]{grid-template-columns:6fr 5fr;}
/* Bloque de texto de «Quiénes somos»: alinea la línea base de su primera línea
con la del titular (etiqueta 16px + margen 24px + diferencia de baselines). */
[data-el="qs-texto"]{padding-top:62px;}
[data-r="g-47"]{grid-template-columns:4fr 7fr;}
[data-r="g-75"]{grid-template-columns:7fr 5fr;}
[data-r="g-65"]{grid-template-columns:6fr 5fr;}
/* Visión: columna de texto más ancha para que la cita respire ("internacionales" en la 1.ª línea). */
#vision [data-r="g-65"]{grid-template-columns:8fr 4fr;}
[data-r="g-123"]{grid-template-columns:repeat(3,minmax(0,1fr));}
[data-r="g-124"]{grid-template-columns:repeat(4,minmax(0,1fr));}
[data-el="rejilla-formas"]>li:nth-child(4n+1){border-left:0;}
[data-el="rejilla-formas"]>li:nth-child(-n+4){border-top:0;}
[data-r="g-24"]{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1180px){
[data-r="g-steps"]{grid-template-columns:260px minmax(0,1fr);}
[data-r="desk-nav"]{display:flex;}
[data-r="nav-cta"]{display:inline-flex;}
[data-r="burger"]{display:none;}
}
/* Etiquetas de foros internacionales: son enlaces, así que en móvil el objetivo táctil
debe llegar a 44px; en escritorio recuperan la altura compacta de la píldora. */
[data-el="forum-chip"]{min-height:44px;}
[data-el="forum-chip"] [data-el="chip-arrow"]{transition:opacity .24s ease,transform .24s ease;}
[data-el="forum-chip"]:hover [data-el="chip-arrow"],[data-el="forum-chip"]:focus-visible [data-el="chip-arrow"]{opacity:1;transform:translateX(3px);}
[data-el="forum-chip"]:focus-visible{outline:2px solid #A2C86E;outline-offset:3px;}
@media (min-width:900px){[data-el="forum-chip"]{min-height:32px;}}
/* Iconos de las tarjetas de Acerca de EMFF: mismo lenguaje que los principios
—viewBox 24, trazo 1.25— pero aquí el micro-movimiento lo dispara la tarjeta
entera al pasar el cursor, no un summary. */
[data-el^="ac-"]{transform-box:view-box;transform-origin:12px 12px;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s ease;}
[data-el="ac-sys"]{transform:scale(.86);opacity:.68;}
article:hover [data-el="ac-sys"],article:focus-within [data-el="ac-sys"]{transform:scale(1);opacity:1;}
article:hover [data-el="ac-core"],article:focus-within [data-el="ac-core"]{transform:scale(.78);}
article:hover [data-el="ac-out"],article:focus-within [data-el="ac-out"]{transform:translate(-8.6px,6.6px);}
article:hover [data-el="ac-ring"],article:focus-within [data-el="ac-ring"]{transform:scale(.68);}
article:hover [data-el="ac-bull"],article:focus-within [data-el="ac-bull"]{transform:scale(1.9);}
article:hover [data-el="ac-sun"],article:focus-within [data-el="ac-sun"]{transform:translateY(-3.4px);}
[data-el="ac-rays"]{opacity:.34;transform:scale(.86);}
article:hover [data-el="ac-rays"],article:focus-within [data-el="ac-rays"]{opacity:.85;transform:scale(1);}
@media (prefers-reduced-motion:reduce){[data-el^="ac-"]{transition:none;}}
/* Fichas del equipo: al pasar el cursor la tarjeta se oscurece un punto, el retrato
crece y asoma el enlace a LinkedIn de la esquina superior derecha. El fondo lleva
!important porque la tarjeta trae su color en línea y sin él la regla no gana. */
[data-el="team-card"]{transition:background .3s ease,border-color .3s ease;}
[data-el="team-card"]:hover,[data-el="team-card"]:focus-within{background:rgba(255,255,255,0.95)!important;border-color:rgba(4,57,72,0.22)!important;}
[data-el="team-avatar"] > *{transition:transform .45s cubic-bezier(.22,1,.36,1);}
[data-el="team-card"]:hover [data-el="team-avatar"] > *,[data-el="team-card"]:focus-within [data-el="team-avatar"] > *{transform:scale(1.18);}
[data-el="team-in"]{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease,background .25s ease,color .25s ease;}
[data-el="team-card"]:hover [data-el="team-in"],[data-el="team-card"]:focus-within [data-el="team-in"]{opacity:1;transform:none;}
[data-el="team-in"]:hover{transform:scale(1.08);}
[data-el="team-in"]:focus-visible{opacity:1;transform:none;outline:2px solid #056876;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){[data-el="team-avatar"] > *,[data-el="team-in"],[data-el="team-card"]{transition:none;}}
/* Foto de la caja «Sumarse a la red»: cuadrada junto al texto en escritorio. */
@media (min-width:1000px){[data-el="sumarse-img"]{height:100%;}}
details[name="principio"] > summary,details[name="valor"] > summary,details[name="respuesta"] > summary{transform:translateZ(0);backface-visibility:hidden;transition:opacity .25s ease,padding .34s cubic-bezier(.22,1,.36,1)!important;}
details[name="principio"],details[name="valor"],details[name="respuesta"]{isolation:isolate;}
details[name="principio"] > summary:hover,details[name="valor"] > summary:hover,details[name="respuesta"] > summary:hover,details[name="principio"] > summary:focus-visible,details[name="valor"] > summary:focus-visible,details[name="respuesta"] > summary:focus-visible{padding-top:calc(clamp(22px,2.4vw,32px) + 6px)!important;padding-bottom:calc(clamp(22px,2.4vw,32px) + 6px)!important;}
/* Qué aprendemos aquí: cada icono hace su propio gesto al pasar el cursor (la celda no cambia de color). */
[data-el^="ap-"]{transform-box:view-box;transform-origin:12px 12px;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease;}
[data-el="aprende"]:hover [data-el="ap-base"]{transform:scaleY(1.16);transform-origin:12px 18.5px;}
[data-el="aprende"]:hover [data-el="ap-ind"]{transform:rotate(58deg);}
[data-el="aprende"]:hover [data-el="ap-cost"]{transform:translateY(-1.6px);}
[data-el="aprende"]:hover [data-el="ap-part"]{transform:translateX(1.8px);}
[data-el="aprende"]:hover [data-el="ap-tec"]{transform:translateY(-1.4px);opacity:.55;}
[data-el="aprende"]:hover [data-el="ap-ver"]{transform:scale(1.14);}
[data-el="aprende"]:hover [data-el="ap-esc"]{transform:translate(1.6px,-1.6px);}
[data-el="aprende"]:hover [data-el="ap-fin"]{transform:translateY(-1.8px);}
/* Hero a sangre: el componente escribe position:relative en su style inline, así que la
posición y la altura del anfitrión se imponen desde aquí. Sin altura resuelta su
resize() sale en falso y el lienzo se queda en 300×150. */
/* Hero: ventanas bajas. Un elemento sticky más alto que la ventana fija su borde superior
en 0 y su parte inferior nunca llega a verse, así que por debajo de 820px de alto se
renuncia al anclaje y el hero se desplaza con la página; el relleno superior baja al
mínimo que despeja la píldora. */
[data-el="hero-full"]{position:sticky;top:0;z-index:0;min-height:100vh;padding:clamp(150px,18vh,230px) 32px calc(clamp(52px,5.5vw,88px) + 48px);}
@media (max-height:820px){
[data-el="hero-full"]{position:relative;padding-top:112px;padding-bottom:96px;}
}
/* 2 · El espaciador que reserva el hueco de la píldora se colapsa cuando la página abre
con hero a sangre: la imagen debe arrancar en el borde superior. */
:root:has([data-el="hero-full"],[data-a-sangre]) [data-el="header-spacer"]{display:none;}
/* Con hero a sangre la banda queda sobre la imagen: el hero baja su relleno superior
para que el titular no se acerque a la píldora. */
:root:has([data-el="hero-full"]) [data-el="hero-full"]{padding-top:clamp(180px,20vh,260px);}
@media (max-height:820px){:root:has([data-el="hero-full"]) [data-el="hero-full"]{padding-top:142px;}}
/* El contenido posterior se eleva sobre el hero fijo para taparlo al desplazarse. */
[data-el="hero-full"] ~ *{position:relative;z-index:1;}
/* El zoom de entrada lo lleva la capa que se ve; el vídeo revela su opacidad al poder
reproducirse (data-ready), de modo que un archivo ausente deja la foto en su sitio. */
/* El zoom de entrada lo lleva la capa que se ve; el vídeo revela su opacidad al poder
reproducirse (data-ready), de modo que un archivo ausente deja la foto en su sitio.
El vídeo del hero va sin zoom: su póster es su primer fotograma y debe quedarse quieto. */
[data-el="hero-full"] depth-parallax,[data-el="hero-fallback"]{transform-origin:50% 50%;animation:emff-hero-in 1.5s cubic-bezier(.16,1,.3,1) both;}
[data-el="hero-video"][data-ready="1"]{opacity:1!important;}
[data-el="hero-full"] depth-parallax{position:absolute!important;inset:0;width:100%;height:100%;}
/* Entrada del hero: la escala va en el anfitrión, no en el lienzo, para no interferir con
el alejamiento por scroll que calcula el propio shader. */
/* Entrada del texto del hero: en primera pantalla el observador de reveals marca los
elementos como ya revelados, así que la aparición se hace aquí, escalonada. */
[data-el="hero-copy"] > *{animation:emff-hero-copy 1.05s cubic-bezier(.22,1,.36,1) both;}
[data-el="hero-copy"] > *:nth-child(1){animation-delay:.18s;}
[data-el="hero-copy"] > *:nth-child(2){animation-delay:.30s;}
[data-el="hero-copy"] > *:nth-child(3){animation-delay:.46s;}
[data-el="hero-copy"] > *:nth-child(4){animation-delay:.60s;}
[data-el="hero-copy"] > *:nth-child(5){animation-delay:.74s;}
@keyframes emff-hero-copy{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
/* El texto del hero espera a que la foto de fondo esté pintada y las fuentes propias
cargadas: si no, se veía el titular rebalancearse y el texto sobre el fondo vacío.
Lo suelta site.js (con tope de tiempo) marcando data-listo. */
[data-el="hero-copy"]:not([data-listo="1"]) > *{opacity:0!important;transform:translateY(16px)!important;animation-play-state:paused!important;}
/* Las animaciones de entrada del hero (zoom 1.16→1 y el zoom lento del carrusel) tampoco
arrancan hasta ese momento: si no, la foto llegaba a mitad del recorrido y se la veía
escalarse y recolocarse hasta su posición definitiva. */
[data-el="hero-full"]:not([data-listo="1"]) :is(depth-parallax,[data-el="hero-fallback"],[data-el="hero-video"],[data-el="hero-slide"]){animation-play-state:paused!important;}
@media (prefers-reduced-motion:reduce){[data-el="hero-copy"] > *{animation:none;}}
@keyframes emff-hero-in{from{transform:scale(1.16);}to{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){[data-el="hero-full"] depth-parallax,[data-el="hero-fallback"],[data-el="hero-video"]{animation:none;}}
/* Paralaje desactivable. Un solo interruptor apaga los tres efectos: el desplazamiento
del hero y el mapa de profundidad —se oculta el lienzo WebGL y queda la real, el
mismo camino que ya sigue un equipo sin WebGL—. El interscroller del NIM queda fuera:
va siempre anclado. */
:root[data-paralaje="off"] [data-el="hero-img"]{transform:scale(1.06)!important;}
:root[data-paralaje="off"] [data-el="hero-canvas"]{display:none!important;}
/* Tramos claros: montan sobre la sección oscura contigua con la esquina redondeada, de
modo que la curva se recorta sobre la imagen o el negro. El marcado lo pone site.js
leyendo el fondo real de cada sección. */
[data-claro]{position:relative;z-index:2;}
[data-claro="ini"],[data-claro="ambos"]{margin-top:-48px;border-top-left-radius:48px;border-top-right-radius:48px;}
[data-claro="fin"],[data-claro="ambos"]{margin-bottom:-48px;border-bottom-left-radius:48px;border-bottom-right-radius:48px;}
/* Menú móvil: Nuestro Trabajo y Acerca de EMFF despliegan al primer toque (la flecha gira) y navegan al segundo. */
[data-el="mob-toggle"][aria-expanded="false"]+[data-el="mob-sub"]{display:none!important;}
[data-el="mob-toggle"][aria-expanded="true"] [data-el="mob-chev"]{transform:rotate(180deg);}
[data-el="mob-toggle"][aria-expanded="true"]{border-bottom-color:transparent!important;}
/* NIM: el vídeo de cabecera va al 80% centrado en escritorio y a todo el ancho en móvil. */
@media (max-width:860px){[data-el="vfig"][data-lang]{width:100%!important;}}
@media (max-width:720px){
[data-claro="ini"],[data-claro="ambos"]{margin-top:-28px;border-top-left-radius:28px;border-top-right-radius:28px;}
[data-claro="fin"],[data-claro="ambos"]{margin-bottom:-28px;border-bottom-left-radius:28px;border-bottom-right-radius:28px;}
}
/* Cifras de impacto: banda blanca a sangre, con las esquinas de arriba y de abajo
redondeadas. Una columna en móvil (filete horizontal) y tres desde 900px (vertical). */
[data-el="stats"]{grid-template-columns:minmax(0,1fr);}
@media (min-width:900px){[data-el="stats"]{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Iconos de la tabla de cifras: cada uno tiene su propio movimiento al pasar el cursor,
y el color pasa de verde atenuado a verde profundo. */
[data-el^="st-"]{transform-box:view-box;transform-origin:12px 12px;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease;}
[data-el="st-plus"]{opacity:0;transform:scale(.6);}
[data-el="stat"]:hover svg{color:#A2C86E;}
[data-el="stat"]:hover [data-el="st-spokes"]{transform:rotate(12deg);}
[data-el="stat"]:hover [data-el="st-pinA"]{transform:translateY(-2.2px);}
[data-el="stat"]:hover [data-el="st-pinB"]{transform:translateY(2.2px);}
[data-el="stat"]:hover [data-el="st-net"]{transform:scale(1.07);}
[data-el="stat"]:hover [data-el="st-plus"]{opacity:1;transform:scale(1);}
/* Icono del boletín: al pasar el cursor por el titular la carta asoma del sobre. */
/* Icono del boletín: arcos de emisión que se expanden en cascada al pasar el cursor. */
[data-el^="nw-"]{transform-box:view-box;transform-origin:6px 18px;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;}
[data-el="nw-a2"]{transition-delay:.07s;}
[data-el="nw-a3"]{transition-delay:.14s;opacity:.65;}
[data-el="news-hdr"]:hover [data-el="nw-a1"],[data-el="news-hdr"]:hover [data-el="nw-a2"]{transform:scale(1.12);}
[data-el="news-hdr"]:hover [data-el="nw-a3"]{transform:scale(1.12);opacity:1;}
@media (prefers-reduced-motion:reduce){[data-el^="nw-"]{transition:none;}}
@media (prefers-reduced-motion:reduce){[data-el^="st-"]{transition:none;}}
/* Fotografía de Building Bridges: acercamiento leve al pasar el cursor, como el resto
de las imágenes con enlace del sitio. */
[data-el="bb-img"]{transition:transform .7s cubic-bezier(.22,1,.36,1);}
[data-el="bb-fig"]:hover [data-el="bb-img"]{transform:scale(1.035);}
@media (prefers-reduced-motion:reduce){[data-el="bb-img"]{transition:none;}[data-el="bb-fig"]:hover [data-el="bb-img"]{transform:none;}}
/* Filete de separación del pie cuando el bloque anterior también es oscuro. */
:root[data-cola="oscuro"] footer[data-cursor="light"]{border-top:1px solid rgba(242,238,227,0.14);}
/* Planta de la cita de Proyectos: el tallo se estira desde su base y cada hoja crece
desde su punto de inserción en el tallo, no desde el centro del lienzo. */
[data-el^="pl-"]{transform-box:view-box;transition:transform .55s cubic-bezier(.22,1,.36,1);}
[data-el="pl-tallo"]{transform-origin:60px 152px;}
[data-el="pl-hoja-i"]{transform-origin:60px 96px;}
[data-el="pl-hoja-d"]{transform-origin:60px 78px;}
[data-el="cita-planta"]:hover [data-el="pl-tallo"]{transform:scaleY(1.1);}
[data-el="cita-planta"]:hover [data-el="pl-hoja-i"]{transform:scale(1.18) rotate(-4deg);}
[data-el="cita-planta"]:hover [data-el="pl-hoja-d"]{transform:scale(1.18) rotate(4deg) translateY(-6px);}
@media (prefers-reduced-motion:reduce){[data-el^="pl-"]{transition:none;}[data-el="cita-planta"]:hover [data-el^="pl-"]{transform:none;}}
/* Fondo de «Quiénes somos»: el encuadre original (rama a la derecha) se mantiene y la
legibilidad la garantizan dos halos radiales blanco-rosados tras cada columna
de texto, fundidos con el bokeh de la foto. Por debajo de 1000px las columnas se
apilan y el texto ocupa todo el ancho: el encuadre pasa al borde izquierdo (la zona
clara) y la rama oscura de la derecha queda recortada fuera del lienzo. */
@media (max-width:999px){
[data-el="quienes-img"]{object-position:0% 42%;transform:scale(1.06) !important;transform-origin:left center;}
}
/* (regla del shader aurora de «El Reto» retirada: el componente vive ahora en Assets web) */
/* Anillos pulsantes de la cita de «El Reto»: sólo desde 1000px; en anchos menores
la caja la ocupa el texto entero y quedarían debajo. */
@media (max-width:999px){[data-el="cita-rings"]{display:none;}}
/* Hero cuadrado junto al titular: pasa a dos columnas antes que las rejillas generales
(a 1000px), porque a 800 el cuadrado a todo el ancho resulta desproporcionado. */
@media (min-width:800px){[data-el="hero-media"][data-r="g-56"]{grid-template-columns:5fr 7fr;}[data-el="hero-media"][data-r="g-56"] [data-el="hero-fig"]{order:0;}}
/* Hero sin paralaje: conserva el zoom de entrada compartido, pero no acompaña al scroll. */
[data-el="hero-img"][data-sin-paralaje]{transform:scale(1.06);}
:root[data-hero="in"] [data-el="hero-img"][data-sin-paralaje]{transform:scale(1);}
/* Selector de idioma del vídeo: la versión activa se marca con aria-pressed, que es a la
vez el estado accesible y el gancho visual. */
[data-el="vlang"][aria-pressed="true"]{background:#FFFFFF!important;border-color:#FFFFFF!important;color:#043948!important;}
[data-el="vlang"]:focus-visible{outline:2px solid #A2C86E;outline-offset:3px;}
[data-el="video-banda"] [data-el="vlang"][aria-pressed="true"]{background:#043948!important;border-color:#043948!important;color:#F1EEE3!important;}
/* Caja «Sumarse a la red»: su sección no lleva relleno superior porque normalmente la
precede otro bloque claro. Cuando el bloque anterior es oscuro —al ocultar la ficha con
el ajuste— site.js marca data-claro y entonces hace falta aire para que el verde no
quede pegado al negro. */
/* El relleno va en el atributo style de la sección, así que aquí hace falta !important; y
se suman los 48px que el tramo claro solapa hacia arriba para recortar su curva. */
[data-el="sec-sumarse"][data-claro="ini"],[data-el="sec-sumarse"][data-claro="ambos"]{padding-top:calc(48px + clamp(40px,5vw,80px))!important;}
[data-el="header"]{transition:transform .34s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease;}
/* Fondos vectoriales: los arcos respiran muy despacio; el hilo naranja recorre su trazo.
El paralaje de scroll viaja aparte, en `translate`, para no pisar esa respiración: la
lógica publica --fy en cada figura y cada capa lo toma con su propio factor. */
[data-drift]{transform-box:view-box;transform-origin:50% 50%;will-change:transform;}
[data-drift="1"]{translate:0 calc(var(--fy,0px) * 0.22);}
[data-drift="2"]{translate:0 calc(var(--fy,0px) * 0.44);}
[data-drift="3"]{translate:0 calc(var(--fy,0px) * 0.66);}
[data-onda]{transform-box:view-box;will-change:transform;}
[data-onda="1"]{translate:0 calc(var(--fy,0px) * 0.16);}
[data-onda="2"]{translate:0 calc(var(--fy,0px) * 0.3);}
[data-onda="3"]{translate:0 calc(var(--fy,0px) * 0.46);}
[data-onda="4"]{translate:0 calc(var(--fy,0px) * 0.6);}
[data-onda="5"]{translate:0 calc(var(--fy,0px) * 0.76);}
[data-onda="6"]{translate:0 calc(var(--fy,0px) * 0.92);}
[data-onda="7"]{translate:0 calc(var(--fy,0px) * 1.08);}
[data-onda="8"]{translate:calc(var(--fy,0px) * -0.1) calc(var(--fy,0px) * 1.3);}
[data-drift="1"]{animation:emff-drift-1 38s ease-in-out infinite;}
[data-drift="2"]{animation:emff-drift-2 46s ease-in-out infinite;}
[data-drift="3"]{animation:emff-drift-3 32s ease-in-out infinite;}
/* Hilos naranjas: nítidos (nunca heredan el desenfoque de los arcos) y con una deriva
bastante más viva que las masas de color, que respiran a 30-46s. */
[data-hilo],[data-el="hilo"],path[stroke="#FE702B"]{filter:none;animation:none!important;translate:none!important;-webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 18%,#000 44%,#000 80%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(100deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 18%,#000 44%,#000 80%,rgba(0,0,0,0) 100%);}
@keyframes emff-drift-1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-1.8%,1.4%) scale(1.035);}}
@keyframes emff-drift-2{0%,100%{transform:translate(0,0) scale(1.028);}50%{transform:translate(2.2%,-1.2%) scale(1);}}
@keyframes emff-drift-3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-1.2%,-2%) scale(1.05);}}
@media (prefers-reduced-motion:reduce){[data-drift],[data-el="hilo"],[data-hilo],[data-onda]{animation:none;translate:none;}}
@keyframes emff-marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes emff-pulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;}:root{scroll-behavior:auto;}[data-el="hero-fig"],[data-el="hero-img"]{transform:none;}}
@media print{body{background:#fff;}}
/* Móvil: las cajas ganan ancho —el margen lateral baja de 32px a 14px— y el redondeo
se reduce a 12px (secciones) y 10px (tarjetas), proporcionado al espacio disponible.
Los pastilleros —botones, chips— siguen redondos porque son /