/* CREC RAYP · homepage, propuesta 2. Tokens y razones en MANUAL-DE-MARCA.md (manda el código si discrepan, se anota en §13). */
@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fuentes/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fuentes/open-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fuentes/open-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:800;font-style:normal;font-display:swap;src:url("../fuentes/open-sans-latin-800-normal.woff2") format("woff2")}

:root{
  --azul:#0F69B4; --vivo:#1875FF; --amarillo:#FFE815;
  --tinta:#10202B; --apoyo:#4D5156;
  --fondo:#FFFFFF; --papel:#EDF3F6; --borde:#C7D6E0;
  --btn-fondo:#0F69B4; --btn-texto:#FFFFFF; --btn-hover:#0B5593;
  --est-prov:#E3EEF8;
  /* Bandas de color fijo: colores literales, no se invierten con el tema */
  --noche:#06121F; --noche-texto:#EAF1F7; --noche-azul:#7DB8F2; --noche-apoyo:#9FB3C4;
  --ease:cubic-bezier(.2,0,0,1);
  --t-rapida:160ms; --t-estandar:280ms; --t-lenta:480ms;
  --gut:clamp(16px,4vw,40px); --ritmo:clamp(3.5rem,8vw,7rem);
  --z-cab:20; --z-redondo:50; --z-menu:90; --z-intro:100; --z-tip:110;
  --r:6px;
  /* Escala tipografica: ocho peldanos, medida contra las referencias (titulos 54 a 120 px, cuerpo 16 a 22 px) */
  --f-hero:clamp(2.75rem,.9rem + 5.2vw,6.75rem); --f-gigante:clamp(2.5rem,.6rem + 5.2vw,6rem); --f-display:clamp(2.25rem,.8rem + 3.9vw,4.5rem);
  --f-seccion:clamp(2rem,.9rem + 2.9vw,3.5rem); --f-frase:clamp(1.75rem,1rem + 2.2vw,3rem); --f-h3:clamp(1.375rem,1.05rem + .9vw,2rem);
  --f-lead:clamp(1.25rem,1.1rem + .5vw,1.5rem); --f-cuerpo:1.125rem; --f-peq:1rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --azul:#7DB8F2; --vivo:#7DB8F2; --tinta:#EAF1F7; --apoyo:#9FB3C4;
    --fondo:#0B1D2F; --papel:#12293E; --borde:#2B4660;
    --btn-fondo:#FFE815; --btn-texto:#10202B; --btn-hover:#FFF07A; --est-prov:#16385A;
    color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --azul:#7DB8F2; --vivo:#7DB8F2; --tinta:#EAF1F7; --apoyo:#9FB3C4;
  --fondo:#0B1D2F; --papel:#12293E; --borde:#2B4660;
  --btn-fondo:#FFE815; --btn-texto:#10202B; --btn-hover:#FFF07A; --est-prov:#16385A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:116px}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:"Open Sans","Segoe UI",system-ui,sans-serif;font-size:1rem;line-height:1.6;
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
img,svg{display:block;max-width:100%}
a{color:var(--azul);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--vivo);outline-offset:2px;border-radius:2px}
.cont{width:min(100% - 2*var(--gut),1240px);margin-inline:auto}
.ic{width:1.25rem;height:1.25rem;flex:none;fill:currentColor}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:var(--gut);top:-100px;background:#FFE815;color:#10202B;padding:.6rem 1rem;border-radius:var(--r);font-weight:700;z-index:var(--z-tip)}
.saltar:focus{top:8px}
html.intro-on,html.intro-on body{overflow:hidden}
/* Lo que se anima al entrar está oculto desde el primer cuadro (lo marca intro-previa.js); el JavaScript lo revela y quita la marca */
html.anim-previa #inicio [data-rev],html.anim-previa .hero__logo,html.anim-previa .cab__in,html.anim-previa .cab__subs{visibility:hidden}

/* Introducción de carga (solo primera visita; se salta con cualquier tecla o clic). Arriba el logotipo, debajo las organizadoras, debajo los subsectores que cambian. */
.intro{display:none;position:fixed;inset:0 0 auto 0;height:100svh;z-index:var(--z-intro);background:var(--noche);color:var(--noche-texto);flex-direction:column;align-items:center;justify-content:center;padding:var(--gut)}
html.intro-on .intro{display:flex}
/* Desde el primer cuadro todo lo de la introducción está apagado; GSAP lo enciende por etapas con estilos en línea (sin esto se veía el conjunto armado un instante antes de empezar) */
html.intro-on .intro__marca path,html.intro-on .intro__org,html.intro-on .intro__subs li{opacity:0}
.intro__cuerpo{display:grid;justify-items:center;gap:clamp(1.25rem,4vh,2.5rem);width:min(100%,56rem);text-align:center}
.intro__logo{width:min(78vw,34rem);height:auto;fill:currentColor}
.intro__org{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2.25rem;margin:0;padding:0;list-style:none}
.intro__inst-svg{height:clamp(28px,5vh,42px);width:auto;fill:currentColor}
.inst__mincap .intro__inst-svg{height:clamp(36px,7vh,56px)}
.intro__pal{margin:0;max-width:none;min-height:3.25rem;font-size:clamp(1.25rem,1rem + 1.8vw,2.25rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#FFE815;text-align:center}
/* Los 14 subsectores: todos a la vista, apagados al 30 %, y se iluminan de uno en uno (idea del cargador del ICCA) */
.intro__subs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.4rem;max-width:56rem}
.intro__subs li{display:flex;align-items:center;gap:.4rem;font-size:clamp(.72rem,.6rem + .45vw,.9rem);font-weight:700;line-height:1.2;white-space:nowrap}
.intro__subs svg{width:1.5em;height:1.5em;flex:none;fill:currentColor}
.intro__subs li.on{color:#FFE815}
.intro__curva{position:absolute;left:0;right:0;top:100%;height:10vh;background:var(--noche);border-radius:0 0 50% 50%/0 0 100% 100%}

/* Cabecera fija: sobre el hero es transparente con velo; al pasar el hero toma el fondo de la página y el logotipo cambia al azul de marca */
.cab{position:fixed;inset:0 0 auto 0;z-index:var(--z-cab);color:#fff;background:linear-gradient(180deg,rgba(6,18,31,.72),rgba(6,18,31,0))}
.cab::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--fondo);box-shadow:0 1px 0 var(--borde);opacity:0;transition:opacity var(--t-estandar) var(--ease)}
html.bajo-hero .cab{background:none}
html.bajo-hero .cab::before{opacity:1}
.cab__in{display:flex;align-items:center;gap:.5rem;min-height:72px}
.logo{display:flex;align-items:center;flex:none;margin-right:auto;min-height:44px;color:#fff;border-radius:var(--r);transition:color var(--t-estandar) var(--ease)}
.logo__h{height:clamp(40px,5vw,52px);width:auto;fill:currentColor}
html.bajo-hero .logo{color:var(--tinta)}
.nav{display:none;gap:.25rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;font-weight:600;font-size:var(--f-peq);color:#fff;text-decoration:none;border-radius:var(--r);transition:background-color var(--t-rapida) var(--ease),color var(--t-estandar) var(--ease)}
.nav a:hover{background:rgba(255,255,255,.14)}
html.bajo-hero .nav a{color:var(--tinta)}
html.bajo-hero .nav a:hover{background:var(--papel)}
.ibtn{position:relative;display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r);background:transparent;color:var(--tinta);cursor:pointer;transition:background-color var(--t-rapida) var(--ease),color var(--t-estandar) var(--ease)}
.ibtn--cab{color:#fff}
.ibtn--cab:hover{background:rgba(255,255,255,.14)}
html.bajo-hero .ibtn--cab{color:var(--tinta)}
html.bajo-hero .ibtn--cab:hover{background:var(--papel)}
.ibtn--menu{display:inline-flex}
.ibtn .ic{width:1.5rem;height:1.5rem}
.ic-luna{display:none}
:root[data-tema="oscuro"] .ic-sol{display:none}
:root[data-tema="oscuro"] .ic-luna{display:block}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .ic-sol{display:none}:root:not([data-tema="claro"]) .ic-luna{display:block}}
@media (min-width:900px){.nav{display:flex}.ibtn--cab{display:inline-flex}.ibtn--menu{display:none}}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;white-space:nowrap;background:#10202B;color:#fff;font-size:.875rem;font-weight:600;line-height:1;padding:.5rem .65rem;border-radius:4px;opacity:0;pointer-events:none;transition:opacity 120ms var(--ease);z-index:var(--z-tip)}
[data-tip]:hover::after{opacity:1;transition-delay:350ms}
[data-tip]:focus-visible::after{opacity:1}
html.intro-on .cab{visibility:hidden}

.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--noche);color:var(--noche-texto);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--t-estandar) var(--ease),visibility 0s linear var(--t-estandar)}
.menu.abierto{opacity:1;visibility:visible;transition:opacity var(--t-estandar) var(--ease)}
.menu__in{width:min(100% - 2*var(--gut),1240px);margin-inline:auto;padding-block:96px 2rem;min-height:100%;display:flex;flex-direction:column;gap:1.5rem}
.menu__cerrar{display:flex;position:fixed;top:14px;right:max(var(--gut),env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;background:#FFE815;color:#10202B;z-index:1}
.menu__cerrar:hover{background:#fff}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:flex;align-items:center;min-height:56px;color:var(--noche-texto);font-weight:800;font-size:clamp(1.75rem,1rem+3vw,3.5rem);line-height:1.15;text-decoration:none;transition:color var(--t-rapida) var(--ease)}
.menu nav a:hover{color:#FFE815}
.menu__sub{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;padding-left:1.25rem;margin:-.25rem 0 .5rem;border-left:3px solid #FFE815}
.menu nav .menu__sub a{min-height:48px;font-size:clamp(1.25rem,1rem+1.5vw,1.75rem);font-weight:700}
.menu__tema{display:inline-flex;align-items:center;gap:.75rem;align-self:flex-start;min-height:48px;padding:0 1rem;border:1.5px solid rgba(234,241,247,.5);border-radius:999px;background:transparent;color:var(--noche-texto);font:inherit;font-weight:600;cursor:pointer;margin-top:auto}
.menu__tema:hover{background:rgba(234,241,247,.12)}

/* Tipografía: ocho peldaños (ver --f-*). Los títulos pesan 800 y se aprietan; el cuerpo y la entrada pesan 400, para que el orden se lea a simple vista. */
h1,h2,h3{margin:0;font-weight:800;line-height:1.1;text-wrap:balance}
h3{font-size:var(--f-h3);font-weight:700;line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1rem;max-width:68ch;font-size:var(--f-cuerpo)}
.display{font-size:var(--f-display);line-height:1.08;letter-spacing:-.03em;max-width:16ch;color:var(--tinta)}
.gigante{font-size:var(--f-gigante);line-height:1.06;letter-spacing:-.035em;max-width:14ch}
.gigante--m{font-size:var(--f-seccion);line-height:1.1;letter-spacing:-.03em;max-width:18ch}
.gigante--claro{color:var(--tinta)}
.gigante,.gigante--m{margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.lead{font-size:var(--f-lead);font-weight:400;line-height:1.45;max-width:52ch}
.raya{width:56px;height:4px;margin:1rem 0 1.75rem;overflow:visible}
.raya path{stroke:#FFE815;stroke-width:4;fill:none}
.nota{font-size:var(--f-peq);color:var(--apoyo)}
.chip{display:inline-block;padding:.1rem .65rem;border:1.5px dashed var(--apoyo);border-radius:999px;font-size:.875rem;font-weight:600;line-height:1.5;color:var(--apoyo);white-space:nowrap;vertical-align:baseline}
.chip--banda{border-color:#fff;color:#fff}

/* Botones redondos con relleno que entra desde abajo */
.circ{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:clamp(108px,11vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;text-decoration:none;font-weight:700;text-align:center;line-height:1.15;border:0;cursor:pointer;transition:color var(--t-estandar) var(--ease)}
.circ::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--relleno);transform:translateY(101%);transition:transform 360ms var(--ease)}
.circ:hover::before,.circ:focus-visible::before{transform:translateY(0)}
.circ__t{padding:.5rem;font-size:1rem}
.circ--amarillo{background:#FFE815;color:#10202B;--relleno:#FFFFFF}
.circ--azul{background:var(--btn-fondo);color:var(--btn-texto);--relleno:var(--btn-hover)}
.circ--grande{width:clamp(136px,15vw,200px)}
.circ--grande .circ__t{font-size:1.125rem}
.circ--pie{width:clamp(96px,9vw,120px)}
.circ:active{transform:scale(.97)}
.enlace-abajo{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.enlace-abajo:hover{text-decoration-thickness:2px}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--noche);color:#fff;overflow:hidden;isolation:isolate}
.hero__capas{position:absolute;inset:0;z-index:-2}
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__foto + .hero__foto{opacity:0;visibility:hidden}
.hero__velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,18,31,.8) 0%,rgba(6,18,31,.72) 50%,rgba(6,18,31,.9) 82%,#06121F 100%)}
.hero__in{display:grid;gap:2rem;align-items:end;padding-top:120px;padding-bottom:calc(64px + 2.5rem)}
.hero h1{color:#fff;font-size:var(--f-hero);line-height:1.06;letter-spacing:-.04em;max-width:14ch}
.hero__txt p{font-size:var(--f-lead);color:#fff;margin-top:1.25rem;max-width:36rem}
.hero__txt .hero__lugar{display:inline-flex;align-items:center;gap:.5rem;margin:.25rem 0 0;padding:.5rem 1rem;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;font-size:1rem;font-weight:600}
.hero__acc{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
@media (min-width:900px){.hero__in{grid-template-columns:minmax(0,1fr) auto}.hero__acc{flex-direction:column;align-items:flex-end;gap:1rem}}
.hero__pie{display:flex;align-items:center;gap:.9rem;padding-block:1.25rem clamp(2rem,5vw,3.5rem)}
.hero__pie p{margin:0;max-width:64ch;font-size:var(--f-peq);color:#fff}
.hero__pie b{font-weight:800}
.ibtn--pie{display:inline-flex;flex:none;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:50%}
.ibtn--pie:hover{background:rgba(255,255,255,.16)}
.ibtn--pie::after{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.ibtn--pie .ic{width:1.25rem;height:1.25rem}
.ic-play{display:none}
.ibtn--pie[aria-pressed="true"] .ic-pausa{display:none}
.ibtn--pie[aria-pressed="true"] .ic-play{display:block}
.hero__logo{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hero__logo-svg{width:min(100%,clamp(18rem,36vw,34rem));height:auto;fill:currentColor;color:#fff}

/* El corte que sigue al hero sube sobre el borde de las fotos (el velo termina en el mismo color): así no queda una franja de foto sin cubrir ni se ve dónde terminan las imágenes */
.hero + .corte{margin-top:-64px;position:relative;z-index:1}
/* Cortes entre secciones (cada forma tiene un ancho mínimo de 1440 px a 64 px de alto: en pantallas angostas se recorta por los lados y NO se aplasta, así conserva su proporción): formas geométricas básicas (las del friso de la RNTC) que cambian de una sección a otra. El color de arriba (--desde) cuelga sobre el de abajo (--hacia). */
.corte{height:64px;display:flex;justify-content:center;line-height:0;overflow:hidden;background:var(--hacia)}
.corte svg{display:block;flex:none;max-width:none;width:max(100%,1440px);height:100%;fill:var(--desde)}
.corte[data-efecto="desliza"] svg,.corte[data-efecto="ondula"] svg{width:max(120%,1728px)}
.d-noche{--desde:var(--noche)}.d-fondo{--desde:var(--fondo)}.d-papel{--desde:var(--papel)}.d-amarillo{--desde:#FFE815}.d-azul{--desde:#0F69B4}
.h-noche{--hacia:var(--noche)}.h-fondo{--hacia:var(--fondo)}.h-papel{--hacia:var(--papel)}.h-amarillo{--hacia:#FFE815}.h-azul{--hacia:#0F69B4}

/* Secciones */
.sec{padding-block:var(--ritmo);scroll-margin-top:0}
.sec--papel{background:var(--papel)}
.presenta{display:grid;gap:2rem 4rem;align-items:end}
.frase{margin:0;max-width:22em;font-size:var(--f-frase);line-height:1.18;font-weight:600;letter-spacing:-.02em}
.frase .pal{display:inline}
.presenta__lado{display:grid;gap:1.5rem;justify-items:start}
@media (min-width:900px){.presenta{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}}
.organizan{margin-top:clamp(2.5rem,5vw,4rem)}
.organizan__t{margin:0 0 1rem;font-size:1.0625rem;font-weight:700;line-height:1.3;letter-spacing:0}
.inst{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.25rem}
.inst a{display:flex;align-items:center;min-height:44px;color:var(--tinta);border-radius:var(--r);transition:color var(--t-rapida) var(--ease)}
.inst a:hover{color:var(--azul)}
.inst__svg{width:auto;fill:currentColor}
.inst__prochile .inst__svg{height:52px}
.inst__mincap .inst__svg{height:68px}
.inst__rntc .inst__svg{height:56px}

/* La mesa */
.leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:1.5rem 0 2.25rem;padding:0;list-style:none;font-size:1rem}
.leyenda li{display:inline-flex;align-items:center;gap:.5rem}
.leyenda li:nth-child(1) .ic{color:var(--azul)}
.leyenda li:nth-child(n+2) .ic{color:var(--apoyo)}
.asientos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));align-items:start;gap:.75rem;margin:0;padding:0;list-style:none}
.asiento{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start;padding:.8rem 1rem;border-radius:var(--r);border:1.5px solid var(--borde);background:var(--fondo)}
.asiento__ico{width:3.25rem;height:3.25rem;fill:currentColor;color:var(--apoyo);transition:transform var(--t-lenta) var(--ease)}
.asiento:hover .asiento__ico{transform:rotate(-8deg) scale(1.1)}
.asiento[data-estado="provisional"] .asiento__ico{color:var(--azul)}
.asiento span .ic{width:1rem;height:1rem;display:inline-block;vertical-align:-.15em;margin-right:.4rem}
.asiento b{display:block;font-weight:700;line-height:1.3}
.asiento span{display:block;font-size:1rem;line-height:1.35}
.asiento small.sector{display:block;font-size:.875rem;color:var(--apoyo);line-height:1.3;margin-bottom:.1rem}
.asiento em{display:block;font-style:normal;font-size:.9375rem;line-height:1.35;color:var(--apoyo);margin-top:.2rem}
.asiento[data-estado="provisional"]{background:var(--est-prov);border-color:var(--azul)}
.asiento[data-estado="provisional"] .ic{color:var(--azul)}
.asiento[data-estado="busca"]{border-style:dashed;border-color:var(--apoyo)}
.asiento[data-estado="busca"] .ic{color:var(--apoyo)}
.asiento[data-estado="define"]{background:var(--papel)}
.asiento[data-estado="define"] .ic{color:var(--apoyo)}
.sec--papel .asiento[data-estado="busca"]{background:var(--fondo)}
.nota--mesa{margin-top:2rem}

/* Bandas de segundo nivel */
.banda{padding-block:clamp(3.5rem,8vw,7rem)}
.banda--amarilla{background:#FFE815;color:#10202B}
.banda--azul{background:#0F69B4;color:#FFFFFF}
.banda--noche{background:var(--noche);color:var(--noche-texto)}
.banda h2{color:inherit}
.banda p{max-width:52ch;font-size:var(--f-lead);line-height:1.45}
.banda__in--dos{display:grid;gap:2.5rem 4rem}
@media (min-width:900px){.banda__in--dos{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start}}
.banda__acc{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.75rem}
.banda__acc .banda__nota,.banda__acc .nota{margin:0;max-width:34ch;font-size:1rem}
.banda__nota{color:inherit}
.aliados{display:grid;gap:2.5rem 4rem}
@media (min-width:900px){.aliados{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start}}
.banda__acc--claro .nota{color:var(--apoyo)}

/* Cómo funciona */
.funciona{display:grid;gap:3rem 4rem;margin-top:2.5rem}
@media (min-width:900px){.funciona{grid-template-columns:1fr 1fr}.funciona__bloque--ancho{grid-column:1/-1}}
.funciona__bloque>h3{margin-bottom:1rem}
.roles{margin:0}
.roles dt{font-weight:800;font-size:1.25rem;margin-top:1.1rem;color:var(--tinta)}
.roles dt:first-child{margin-top:0}
.roles dd{margin:.2rem 0 0;max-width:52ch}
.roles--chico dt{font-size:1.0625rem}
.niveles{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.niveles li{padding:.75rem 1rem;border:1.5px solid var(--borde);border-radius:var(--r);background:var(--fondo)}
.niveles b{display:inline-block;margin-right:.6rem;color:var(--azul)}
.pasos-elige{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2rem}
.pasos-elige li{padding-top:1rem;border-top:2px solid var(--azul)}
.pasos-elige b{display:block;margin-bottom:.25rem}

/* Acordeones (comisiones y preguntas): details nativo */
.comis,.faq__lista{margin:0;padding:0;list-style:none}
details>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;padding:.75rem 0;cursor:pointer;list-style:none;font-weight:700;font-size:1.25rem;line-height:1.3}
details>summary::-webkit-details-marker{display:none}
details .ic-menos{display:none}
details[open] .ic-menos{display:block}
details[open] .ic-mas{display:none}
details p{margin:0 0 1.25rem;max-width:56ch}
.comis li{border-bottom:1px solid rgba(255,255,255,.4)}
.comis li:first-child{border-top:1px solid rgba(255,255,255,.4)}
.comis summary:hover{color:#FFE815}
.comis :focus-visible{outline-color:#FFE815}
.faq{display:grid;gap:2rem 4rem}
@media (min-width:900px){.faq{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}}
.faq__lista li{border-bottom:1px solid var(--borde)}
.faq__lista li:first-child{border-top:1px solid var(--borde)}
.faq__lista summary:hover{color:var(--azul)}

/* Sesiones y resultados */
.sesiones{display:grid;gap:2.5rem 4rem;margin-top:2rem}
@media (min-width:900px){.sesiones{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.ses-lista{margin:0;padding:0;list-style:none;display:grid;gap:1.75rem}
.ses-lista b{display:block;color:var(--azul);font-weight:800}
.ses-lista time{display:block;font-size:1.5rem;font-weight:800;line-height:1.2}
.ses-lista span{display:block;max-width:34ch}
.res h3{margin-bottom:1rem;color:var(--tinta)}
.res dl{margin:0}
.res dt{font-weight:700;margin-top:1.1rem}
.res dt:first-child{margin-top:0}
.res dd{margin:.2rem 0 0;max-width:54ch}

/* Próximos pasos */
.pasos{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:1.4rem}
.pasos li{display:grid;gap:.25rem 2rem;align-items:baseline}
@media (min-width:760px){.pasos li{grid-template-columns:16rem minmax(0,1fr) auto}}
.pasos time{font-weight:800;font-size:1.0625rem;color:var(--azul)}
.pasos time::first-letter{text-transform:uppercase}
.pasos .chip{justify-self:start}
.pasos p{margin:0}

/* Participa */
.part-filas{margin:0;padding:0;list-style:none;display:grid;gap:1rem;align-content:start}
.part-filas a{display:grid;gap:.2rem;padding:1.1rem 1.4rem;border:1.5px solid rgba(234,241,247,.4);border-radius:var(--r);color:var(--noche-texto);text-decoration:none;transition:border-color var(--t-rapida) var(--ease),background-color var(--t-rapida) var(--ease)}
.part-filas a:hover{border-color:#FFE815;background:rgba(234,241,247,.08)}
.part-filas b{display:inline-flex;align-items:center;gap:.5rem;color:var(--noche-azul);font-size:1.125rem}

/* Pie: centrado y discreto. La tipografía baja un peldaño respecto del resto para no pedir atención. */
.pie{background:var(--noche);color:var(--noche-texto);overflow:hidden;text-align:center}
.pie__curva{height:clamp(48px,9vw,140px);margin-bottom:clamp(1.5rem,3vw,2.5rem);background:var(--fondo);border-radius:0 0 50% 50%/0 0 100% 100%}
.pie__in{display:grid;justify-items:center;gap:1rem}
.pie__gigante{font-size:var(--f-seccion);line-height:1.05;letter-spacing:-.03em;color:var(--noche-texto)}
.pie__fila{display:flex;justify-content:center;margin-top:.5rem}
.pie__linea{display:none}
.pie__pildoras{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.pie__pildoras a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.1rem;border:1.5px solid rgba(234,241,247,.5);border-radius:999px;color:var(--noche-texto);font-size:.9375rem;font-weight:600;text-decoration:none;transition:background-color var(--t-rapida) var(--ease)}
.pie__pildoras a:hover{background:rgba(234,241,247,.12)}
.pie__nota{margin:.25rem 0 0;font-size:.875rem;color:var(--noche-apoyo)}
.pie__datos{display:grid;justify-items:center;gap:.75rem 2.5rem;margin:clamp(1.5rem,3vw,2rem) 0 0;padding:0}
@media (min-width:760px){.pie__datos{grid-template-columns:repeat(4,auto);justify-content:center}}
.pie__datos dt{font-size:.8125rem;color:var(--noche-apoyo)}
.pie__datos dd{margin:.1rem 0 0;font-size:.875rem;font-weight:600}
.pie__datos a{color:var(--noche-texto)}
.pie__marcas-bloque{margin-top:clamp(1.25rem,2.5vw,2rem);display:flex;justify-content:center}
.pie__marcas{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 2rem}
.pie__marcas a{display:flex;align-items:center;min-height:44px;color:var(--noche-texto);border-radius:var(--r);transition:color var(--t-rapida) var(--ease)}
.pie__marcas a:hover{color:#FFE815}
.marca__svg{width:auto;fill:currentColor}
.marca__founder-hub .marca__svg{height:46px}
.marca__qiri .marca__svg{height:60px}
.friso{height:44px;margin-top:clamp(1.25rem,2.5vw,2rem);background:url("../rntc/franja-pie.png") repeat-x left center;background-size:auto 100%}

/* Franja Popupsty: credencial al final de la página, a la mitad de alto que antes (módulo 04-franja-popupsty, traducido a esta paleta; sin animación) */
.popupsty{background:#0D2236;color:var(--noche-apoyo);border-top:1px solid rgba(234,241,247,.18)}
.popupsty__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem 1rem;padding-block:.35rem}   /* el margen de seguridad inferior pasó a .subfriso, que ahora cierra la página */
.popupsty__logo{display:flex;align-items:center;min-height:44px;color:var(--noche-texto)}
.popupsty__svg{height:14px;width:auto;fill:currentColor}
.popupsty__txt{margin:0;max-width:none;text-align:center;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;font-size:.8125rem;line-height:1.4}
.popupsty__txt a{color:var(--noche-azul)}

/* Seguidor del puntero: solo con ratón; crece sobre lo que se puede pulsar y dice qué es en los elementos con data-cursor */
.cursor{display:none;position:fixed;left:0;top:0;z-index:var(--z-tip);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FFE815;pointer-events:none;align-items:center;justify-content:center;opacity:0;transition:width var(--t-estandar) var(--ease),height var(--t-estandar) var(--ease),margin var(--t-estandar) var(--ease),opacity var(--t-estandar) var(--ease)}
html.cursor-on .cursor{display:flex;opacity:1}
.cursor.grande{width:80px;height:80px;margin:-40px 0 0 -40px}
.cursor__t{font-size:.875rem;font-weight:800;line-height:1;color:#10202B;opacity:0;transition:opacity var(--t-rapida) var(--ease)}
.cursor.grande .cursor__t{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none!important}}

/* Lenis (desplazamiento fluido): reglas del propio paquete */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

@media (prefers-reduced-motion:reduce){.cursor{display:none!important}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Franja de los 14 subsectores bajo la credencial de Popupsty: cuadros de color plano con la paleta del friso de la RNTC (amarillo, azul, verde, rosa, celeste, rojo, blanco).
   Cada combinación de fondo e ícono se midió y da al menos 3:1. El nombre aparece con el mismo tooltip de [data-tip], pero hacia arriba, porque debajo no hay nada. */
.subfriso{background:#0D2236;padding-bottom:env(safe-area-inset-bottom)}
.subfriso__fila{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr)}
.subfriso__fila li{margin:0}
.sf{position:relative;display:grid;place-items:center;aspect-ratio:1/1;width:100%;cursor:default}
.sf__ic{width:64%;height:64%;fill:currentColor;transition:transform 160ms var(--ease)}
.sf:hover .sf__ic,.sf:focus .sf__ic{transform:scale(1.08)}
.sf:focus-visible{outline:3px solid #FFE815;outline-offset:-3px}
.sf--a{background:#FFE815;color:#1776FF}.sf--b{background:#1776FF;color:#FFE815}.sf--c{background:#61DB61;color:#06121F}
.sf--d{background:#FFBDE0;color:#06121F}.sf--e{background:#00B1FF;color:#06121F}.sf--f{background:#FF4A53;color:#FFFFFF}.sf--g{background:#FFFFFF;color:#1776FF}
.sf::after{top:auto;bottom:calc(100% + 6px);right:auto;left:50%;transform:translateX(-50%);white-space:normal;width:max-content;max-width:min(220px,70vw);text-align:center;line-height:1.25}
.sf:hover::after,.sf:focus::after{opacity:1}
.sf:hover::after{transition-delay:350ms}
@media (max-width:899.98px){
  .subfriso__fila li:nth-child(7n+1) .sf::after,.subfriso__fila li:nth-child(7n+2) .sf::after,.subfriso__fila li:nth-child(7n+3) .sf::after{left:0;transform:none;text-align:left}
  .subfriso__fila li:nth-child(7n+5) .sf::after,.subfriso__fila li:nth-child(7n+6) .sf::after,.subfriso__fila li:nth-child(7n) .sf::after{left:auto;right:0;transform:none;text-align:right}
}
@media (min-width:900px){
  .subfriso__fila{grid-template-columns:repeat(14,1fr)}
  .subfriso__fila li:nth-child(-n+2) .sf::after{left:0;transform:none;text-align:left}
  .subfriso__fila li:nth-child(n+13) .sf::after{left:auto;right:0;transform:none;text-align:right}
}

/* Línea de subsectores sobre el menú (prueba): rectángulos de 28 px (18 px en pantallas angostas), más bajos que el friso de 44 px. Mismos colores del pie. */
.cab__subs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(14,1fr)}
.cab__subs li{margin:0}
.cab__subs .sf{aspect-ratio:auto;height:18px}
.cab__subs .sf__ic{width:auto;height:70%;aspect-ratio:1/1}
.cab__subs .sf::after{top:calc(100% + 6px);bottom:auto}
.cab__subs li:nth-child(-n+2) .sf::after{left:0;transform:none;text-align:left}
.cab__subs li:nth-child(n+13) .sf::after{left:auto;right:0;transform:none;text-align:right}
@media (min-width:600px){.cab__subs .sf{height:28px}}

/* Bloques nuevos de la propuesta 6 */
.sec--linea{border-top:1px solid var(--borde)}
.sec--arriba{padding-top:calc(116px + 3rem)}
.organizan .nota{margin:1rem 0 0;max-width:60ch}

/* Beneficios de participar (portada) */
.part-benef{margin:0;padding:0;list-style:none;display:grid;gap:1rem;align-content:start}
.part-benef li{display:grid;gap:.25rem;padding:1.1rem 1.4rem;border:1.5px solid rgba(234,241,247,.4);border-radius:var(--r);color:var(--noche-texto)}
.part-benef b{color:var(--noche-azul);font-size:1.125rem}
/* Mapa de instancias del Comité (página «Espacio de trabajo»): colores del mapa de la metodología, texto oscuro sobre cada recuadro */
.mapa-inst{display:grid;gap:1rem;margin-top:2rem}
.mapa-inst__banda{padding:1rem 1.1rem 1.2rem;border-radius:var(--r);border:1.5px solid var(--borde)}
.mapa-inst__banda h3{margin:0 0 .75rem;font-size:.9375rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta)}
.mapa-inst__banda ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.mapa-inst__banda li{padding:.55rem .9rem;border:2px solid #10202B;border-radius:10px;font-weight:700;font-size:.9375rem;line-height:1.25;color:#06121F}
.mapa-inst__banda--p li{background:#0F69B4;color:#fff}
.mapa-inst__banda--q li{background:#00B1FF}
.mapa-inst__banda--d li{background:#61DB61}
.mapa-inst__banda--f li{background:#FFE815}
.mapa-inst__banda--r li{background:#FFBDE0}

/* Chip de fecha confirmada */
.chip--ok{border-style:solid;border-color:var(--tinta);color:var(--tinta);font-weight:800}
/* Mesa redonda interactiva: 17 asientos alrededor de la mesa. Los colores de los asientos son literales: no cambian con el tema */
.mr__tit{margin:2.5rem 0 .5rem;font-size:1.375rem}
.mr{position:relative;width:min(100%,640px);aspect-ratio:1/1;margin:1.5rem auto 0}
.mr__lista{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.mr__a{position:absolute;width:max(13%,44px);aspect-ratio:1/1;transform:translate(-50%,-50%);margin:0}
.mr__b{all:unset;box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;cursor:pointer}
.mr__b:focus-visible{outline:3px solid #0F69B4;outline-offset:3px}
.mr__ic{width:58%;height:58%;fill:currentColor}
.mr__logo{width:70%;height:70%;fill:currentColor}
.mr__a--prov .mr__b{background:#FFE815;color:#1776FF}
.mr__a--sin .mr__b{background:transparent;color:var(--apoyo);border:2px dashed var(--apoyo)}
.mr__a--inst .mr__b{background:#0F69B4;color:#fff}
.mr__mesa{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--borde);background:var(--fondo);display:grid;place-content:center;gap:.35rem;text-align:center;padding:1rem}
.mr__nombre{font-size:clamp(.9375rem,.7rem + 1.2vw,1.375rem);line-height:1.15;font-weight:800;color:var(--tinta)}
.mr__estado{font-size:clamp(.75rem,.65rem + .5vw,.9375rem);line-height:1.3;color:var(--apoyo)}
.mr__ley{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;font-size:.875rem}
.mr__ley li{display:flex;align-items:center;gap:.5rem;margin:0}
.mr__sw{width:1rem;height:1rem;border-radius:50%;flex:none}
.mr__sw--prov{background:#FFE815}
.mr__sw--sin{border:2px dashed var(--apoyo)}
.mr__sw--inst{background:#0F69B4}
.mr__a:nth-child(1){left:50.00%;top:11.00%}
.mr__a:nth-child(2){left:64.09%;top:13.63%}
.mr__a:nth-child(3){left:76.27%;top:21.18%}
.mr__a:nth-child(4){left:84.91%;top:32.62%}
.mr__a:nth-child(5){left:88.83%;top:46.40%}
.mr__a:nth-child(6){left:87.51%;top:60.67%}
.mr__a:nth-child(7){left:81.12%;top:73.50%}
.mr__a:nth-child(8){left:70.53%;top:83.16%}
.mr__a:nth-child(9){left:57.17%;top:88.34%}
.mr__a:nth-child(10){left:42.83%;top:88.34%}
.mr__a:nth-child(11){left:29.47%;top:83.16%}
.mr__a:nth-child(12){left:18.88%;top:73.50%}
.mr__a:nth-child(13){left:12.49%;top:60.67%}
.mr__a:nth-child(14){left:11.17%;top:46.40%}
.mr__a:nth-child(15){left:15.09%;top:32.62%}
.mr__a:nth-child(16){left:23.73%;top:21.18%}
.mr__a:nth-child(17){left:35.91%;top:13.63%}

/* Páginas de sesión (sesion-01, sesion-02, sesion-03): reporte, diapositivas, material y registro de asistentes */
.ses-ruta{margin:0 0 .5rem}
.ses-ruta a{display:inline-flex;align-items:center;min-height:44px}
.ses-meta{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin:1.25rem 0 0;font-size:1.125rem}
.ses-meta time{font-weight:800;color:var(--azul)}
.ses-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin-top:1.75rem}
.ses-nav a{display:inline-flex;align-items:center;min-height:48px;font-weight:600}
.ses-bloque{margin-top:3rem}
.ses-bloque:first-of-type{margin-top:2.5rem}
.ses-bloque>h3{margin-bottom:1rem}
.ses-bloque>p{max-width:60ch}
.ses-lista-simple{margin:0;padding-left:1.4rem;max-width:62ch}
.ses-lista-simple li{margin:.6rem 0}
.roles--sesion dd{max-width:64ch}
.roles .nota{display:block;margin-top:.35rem}
.ses-det{margin-top:2.5rem;border-block:1px solid var(--borde)}
.ses-det__in{padding:.25rem 0 1.5rem}
.ses-det__in h4{margin:1.25rem 0 .4rem;font-size:1.125rem;font-weight:800;color:var(--tinta)}
.ses-det__in ul{margin:0;padding-left:1.4rem;max-width:62ch}
.ses-det__in li{margin:.4rem 0}
.pasos .cuando{font-weight:800;font-size:1.0625rem;color:var(--azul)}
.pasos .cuando::first-letter{text-transform:uppercase}
.pasos li p{margin:0;max-width:62ch}
.pasos li p+p{margin-top:.25rem}
.galeria{margin:2rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));gap:1.25rem}
.galeria a{display:block;border:1.5px solid var(--borde);border-radius:var(--r);overflow:hidden;background:#FFFFFF}
.galeria a:hover{border-color:var(--azul)}
.galeria img{width:100%;height:auto}
.galeria--grande{grid-template-columns:repeat(auto-fill,minmax(min(100%,32rem),1fr))}
.descargas{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.75rem;max-width:44rem}
.descargas a{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:.75rem 1rem;border:1.5px solid var(--borde);border-radius:var(--r);text-decoration:none;color:var(--tinta);font-weight:700}
.descargas a:hover,.descargas a:focus-visible{border-color:var(--azul)}
.descargas .ic{width:1.5rem;height:1.5rem;color:var(--azul)}
.descargas small{display:block;font-weight:400;color:var(--apoyo);font-size:.9375rem}
.asist{margin-top:1.5rem;border-block:1px solid var(--borde)}
.asist__cuerpo{padding:0 0 1.25rem}
.asist__cuerpo>.nota{margin:0 0 .5rem}
.asist__tabla{width:100%;border-collapse:collapse;font-size:1rem}
.asist__tabla th,.asist__tabla td{padding:.65rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--borde)}
.asist__tabla thead th{font-weight:800;border-bottom:2px solid var(--azul)}
.asist__tabla th:first-child,.asist__tabla td:first-child{width:3.75rem;padding-left:0;font-variant-numeric:tabular-nums;color:var(--apoyo)}
.ses-lista a{display:inline-flex;align-items:center;min-height:48px;margin-top:.5rem;font-weight:600}
/* Puerta de clave: colores literales, como todo lo que flota sobre la interfaz. Visible por defecto: si el script no corre, la página queda cerrada. */
.puerta{position:fixed;inset:0;z-index:var(--z-intro);display:flex;align-items:center;justify-content:center;padding:var(--gut);background:#06121F;color:#EAF1F7;overflow:auto}
.puerta[hidden]{display:none}
.puerta__tarjeta{width:min(100%,28rem)}
.puerta__titulo{margin:0 0 .5rem;font-size:var(--f-h3);font-weight:800;line-height:1.2}
.puerta__tarjeta p{margin:0 0 1.25rem}
.puerta__campo{display:block;width:100%;min-height:52px;padding:.5rem 1rem;border:2px solid #7DB8F2;border-radius:var(--r);background:#FFFFFF;color:#10202B;font:inherit}
.puerta__error{min-height:1.5rem;margin:.75rem 0 1rem;font-weight:700;color:#FFE815}
.puerta__acc{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.puerta a{display:inline-flex;align-items:center;min-height:44px;color:#7DB8F2}

/* Hero de la página «Espacio de trabajo»: más bajo que el de la portada */
.hero.hero--pag{min-height:62svh}
.hero--pag .hero__in{padding-top:150px}
/* Línea viva del hero: cuántos subsectores ya tienen representación */
.hero__viva{margin:0;font-size:1.0625rem;font-weight:600;color:#fff}
.hero__viva a{color:#FFE815;text-underline-offset:.2em}
.ses-meta+.lead{margin-top:1.25rem}

/* Botón destacado del menú: entrada al espacio de trabajo (página «espacio-de-trabajo.html») */
html .nav a.nav__esp,html.bajo-hero .nav a.nav__esp{background:#FFE815;color:#06121F;margin-left:.5rem}
html .nav a.nav__esp:hover,html.bajo-hero .nav a.nav__esp:hover{background:#FFF27A}
.banda__acc--claro .enlace-abajo{color:var(--tinta)}

/* Sistema de pestañas de la página de sesión: íconos de trazo, un panel por pestaña, material en vivo (visor de documentos, mapa, QR) */
.tabs__guia{margin-top:1.5rem}
.tabs__barra{position:sticky;top:var(--alto-cab,100px);z-index:calc(var(--z-cab) - 1);padding-top:.5rem;background:var(--fondo)}
.tabs__lista{display:flex;gap:.25rem;overflow-x:auto;overflow-y:hidden;border-bottom:2px solid var(--borde);scrollbar-width:thin}
.tab{all:unset;box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-width:88px;min-height:76px;padding:.6rem .75rem;margin-bottom:-2px;border-bottom:4px solid transparent;cursor:pointer;color:var(--apoyo);font-weight:600;font-size:.9375rem;line-height:1.2;text-align:center}
.tab:hover{color:var(--tinta)}
.tab[aria-selected="true"]{color:var(--azul);border-bottom-color:#FFE815}
.tab:focus-visible{outline:3px solid var(--vivo);outline-offset:-3px}
.tab__ic{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel[hidden]{display:none}
.panel:focus-visible{outline-offset:-3px}
.visor{display:block;width:100%;height:min(80vh,56rem);min-height:24rem;border:0;border-radius:var(--r);background:#FFFFFF}
.visor--mapa{height:min(88vh,62rem);min-height:32rem}
.banda .visor__nota{margin:.75rem 0 0;max-width:none;font-size:var(--f-peq);color:var(--noche-apoyo)}
.descargas--ancho{max-width:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.qrs{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.qr{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;border:1.5px solid var(--borde);border-radius:var(--r);background:var(--fondo)}
.qr__img{width:min(100%,12rem);aspect-ratio:1;padding:.6rem;background:#FFFFFF;color:#10202B;border:1px solid #C7D6E0;border-radius:var(--r)}
.qr__svg{width:100%;height:100%}
.qr h3{margin:.5rem 0 0;font-size:1.25rem}
.qr p{margin:0;max-width:none}
.qr a{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-weight:600}
.icca__lead{max-width:52ch;margin:0 0 2rem;font-size:var(--f-lead);line-height:1.45}
.icca__datos{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem;max-width:52rem;margin:0}
.icca__datos dt{font-weight:800}
.icca__datos dd{margin:0}
@media (max-width:600px){.icca__datos{grid-template-columns:1fr}.icca__datos dd{margin-bottom:.75rem}}
.icca__fila{display:grid;gap:2.5rem 4rem}
@media (min-width:900px){.icca__fila{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.formatos{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.5rem;padding:0}
.formatos li{padding:.45rem 1rem;border:1.5px solid var(--borde);border-radius:999px;background:var(--fondo);font-weight:600}
.icca__lat img{width:min(100%,290px);height:auto;border-radius:var(--r)}
.icca__lat p{max-width:34ch;margin:1rem 0 0}

/* Botones bajo el visor, modal de documento y texto sobre bandas de color fijo */
.ic-trazo{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btns-doc{list-style:none;display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0;padding:0}
.btn-doc{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.6rem 1.25rem;border:2px solid #EAF1F7;border-radius:999px;background:transparent;color:#EAF1F7;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn-doc:hover,.btn-doc:focus-visible{background:#FFE815;border-color:#FFE815;color:#10202B}
.btn-doc__peso{font-weight:400}
html.modal-abierto{overflow:hidden}
.modal{position:fixed;inset:0;z-index:var(--z-intro);display:flex;flex-direction:column;background:#06121F;color:#EAF1F7}
.modal[hidden]{display:none}
.modal__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.6rem 1rem;border-bottom:1px solid #2B4660}
.modal__titulo{margin:0;font-weight:800;font-size:1.125rem}
.modal__acc{display:flex;flex-wrap:wrap;gap:.5rem}
.modal .btn-doc{min-height:44px;padding:.4rem 1rem}
.modal__visor{flex:1;width:100%;min-height:0;border:0;background:#FFFFFF}
@media (max-width:600px){.modal .btn-doc span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.modal .btn-doc{padding:.4rem .75rem}}
.banda .roles dt,.banda .roles dd,.banda .roles .nota,.banda .ses-lista-simple,.banda .pasos .cuando,.banda .pasos .nota{color:inherit}