/* ==========================================================================
   Fundación Carbonell — sistema de diseño
   Webo Digital · Mariana Gonzalez · en colaboración con Imaginarea
   --------------------------------------------------------------------------
   Dirección visual tomada de sparcgroup.se, con la paleta de Carbonell:
   · Poppins en 400 y 500. Nunca bold, nunca tracking negativo.
   · Escala grande y aireada: 70 / 60 / 50 / 30 / 21 / 18.
   · Tres valores de fondo: tinta, papel teñido y un celeste pálido.
   · Esquinas generosas: 8 en lo chico, 20 en imágenes, 32 en paneles,
     pastilla completa en botones.
   --------------------------------------------------------------------------
   1. Tokens          2. Base            3. Layout
   4. Tipografía      5. Cabecera        6. Pie
   7. Componentes     8. Bloques         9. Formularios
   10. Utilidades     11. Modo revisión
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   Toda la identidad vive acá. Cambiar un color acá lo cambia en las 31 páginas.
   ========================================================================== */
:root{
  /* ======================================================================
     PALETA DE MARCA — valores exactos del brandbook. No se tocan.
     ====================================================================== */
  --celeste:        #019EE2;   /* celeste original            RGB 1,158,226  */
  --azul:           #292E6A;   /* azul complementario         RGB 41,46,106  */
  --verde:          #004426;   /* verde oscuro (AgroGlobal)   RGB 0,68,38    */
  --naranja:        #EC7024;   /* naranja                     RGB 236,112,36 */
  --celeste-cl:     #CEE9F4;   /* celeste claro               RGB 206,233,244*/
  --turquesa:       #01A096;   /* turquesa                    RGB 1,160,150  */

  /* ======================================================================
     TONOS DE TRABAJO — ninguno es un color nuevo: son los seis de arriba
     aclarados u oscurecidos hasta pasar WCAG AA en el uso que se les da.
     Entre paréntesis, de dónde sale cada uno.
     ====================================================================== */
  --tinta:          #00293B;   /* celeste +74% negro — texto y fondos oscuros */
  --tinta-2:        #00364D;   /* celeste +66% negro — paneles                */
  --papel:          #ECF7FB;   /* celeste claro +62% blanco — fondo general   */
  --papel-2:        #DFF0F8;   /* celeste claro +34% blanco — secciones       */
  --blanco:         #FFFFFF;

  --celeste-osc:    #016B9A;   /* celeste oscurecido — texto: 5.6:1 en blanco */
  --menta:          #9EDAF4;   /* celeste +62% blanco — círculos de icono     */
  --menta-2:        #BDE6F7;   /* celeste +74% blanco                         */

  --turquesa-osc:   #01766F;   /* turquesa como texto: 5.5:1 en blanco        */
  --naranja-osc:    #AA511A;   /* naranja como TEXTO:  5.4:1 en blanco        */
  --naranja-btn:    #B1541B;   /* naranja como FONDO:  5.1:1 con texto blanco */
  --naranja-btn-h:  #9C4A18;
  --azul-cl:        #3F4585;   /* azul aclarado — degradados                  */
  --verde-medio:    #2C6349;   /* verde aclarado — degradados                 */

  /* neutros teñidos: la tinta diluida en el papel, para que ni las líneas
     ni el texto secundario se salgan de la familia */
  --gris:           #44606C;   /* texto secundario: pasa 4.5:1 también sobre
                                  los cinco tintes de acento (peor caso 5.2) */
  --gris-cl:        #7F98A3;   /* sólo decorativo                     */
  --linea:          #CBDAE0;
  --linea-fuerte:   #AFC1C9;
  --texto-claro:    #B3CDDB;   /* texto sobre fondos oscuros          */

  /* --- semánticos --- */
  --acento:         var(--celeste);
  --acento-osc:     var(--celeste-osc);
  --acento-cl:      var(--celeste-cl);
  --acento-pal:     var(--menta);
  --fondo:          var(--papel);
  --superficie:     var(--blanco);
  --texto:          var(--tinta);
  --texto-2:        var(--gris);

  /* --- tipografía: las dos del brandbook ------------------------------------
     Roboto Slab, la principal, en los titulares y en la tipografía de
     exhibición (cifras y citas). Montserrat, la complementaria, en el cuerpo
     y en la interfaz: menú, botones, filtros. El logotipo es vector, así que
     no depende de la webfont.
     Montserrat corre ancha y con la x alta, por eso el cuerpo va un punto más
     chico. Roboto Slab es más angosta y con serifas: ya casi no necesita el
     tracking negativo que sí pedía Montserrat en los títulos. */
  --titulo:  'Roboto Slab', Georgia, 'Times New Roman', serif;
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cuerpo:  var(--display);

  /* --- escala de espaciado (base 8) --- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 96px;  --e10:128px; --e11:160px;

  /* --- estructura --- */
  --ancho: 1320px;
  --ancho-texto: 62ch;
  --r:    8px;    /* etiquetas, campos, detalles */
  --r-m:  20px;   /* tarjetas e imágenes */
  --r-g:  32px;   /* paneles grandes */
  --r-pil: 999px; /* pastilla */
  --cabecera-h: 92px;

  --sombra-1: 0 1px 2px rgba(0,41,59,.04), 0 6px 18px rgba(0,41,59,.05);
  --sombra-2: 0 2px 6px rgba(0,41,59,.05), 0 18px 40px rgba(0,41,59,.08);

  --t: 220ms cubic-bezier(.22,.61,.36,1);
  --t-lento: 380ms cubic-bezier(.22,.61,.36,1);

  --z-nav: 100;
  --z-drawer: 200;
  --z-revision: 300;
}

/* Acentos. data-acento se puede poner en <body> (tiñe toda la página) o en
   cualquier elemento suelto (una tarjeta, un ítem de la parrilla): las
   variables heredan, así que el bloque toma ese color y nada más.
   El reparto por sección está en el LEEME. */
[data-acento="celeste"]{ --acento:var(--celeste);      --acento-osc:var(--celeste-osc);  --acento-cl:var(--celeste-cl); --acento-pal:var(--menta) }
[data-acento="azul"]   { --acento:var(--azul);        --acento-osc:var(--azul);         --acento-cl:#E1E2EA; --acento-pal:#AEB0C6 }
[data-acento="verde"]  { --acento:var(--verde);       --acento-osc:var(--verde);        --acento-cl:#DBE5E1; --acento-pal:#9EB8AD }
[data-acento="naranja"]{ --acento:var(--naranja-osc); --acento-osc:var(--naranja-osc);  --acento-cl:#FCEBE0; --acento-pal:#F8C9AC }
[data-acento="teal"]   { --acento:var(--turquesa);    --acento-osc:var(--turquesa-osc); --acento-cl:#DBF2F0; --acento-pal:#9EDBD7 }

/* Fondos de panel de marca, para que el oscuro no sea siempre el mismo. */
[data-panel="azul"]    { --panel:var(--azul) }
[data-panel="verde"]   { --panel:var(--verde) }
[data-panel="turquesa"]{ --panel:#02524C }

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--cabecera-h) + 24px); -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

body{
  font-family:var(--cuerpo);
  font-size:16.5px;
  font-weight:400;
  line-height:1.72;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:900px){ body{ font-size:17.5px } }

img,svg,video{ max-width:100%; display:block }
img{ height:auto }

a{ color:var(--acento-osc); text-decoration:none; text-underline-offset:4px }
a:hover{ text-decoration:underline }

:focus-visible{ outline:3px solid var(--naranja-osc); outline-offset:3px; border-radius:4px }
:focus:not(:focus-visible){ outline:none }

::selection{ background:var(--menta); color:var(--tinta) }

hr{ border:0; border-top:1px solid var(--linea); margin:var(--e8) 0 }

.saltar{
  position:absolute; left:var(--e5); top:-100px;
  background:var(--tinta); color:#fff;
  padding:var(--e3) var(--e6); border-radius:var(--r-pil);
  font-weight:500; z-index:calc(var(--z-drawer) + 10);
  transition:top var(--t);
}
.saltar:focus{ top:var(--e4); text-decoration:none }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--e5) }
@media (min-width:768px){ .contenedor{ padding-inline:var(--e7) } }

.seccion{ padding-block:var(--e9) }
@media (min-width:768px){ .seccion{ padding-block:var(--e10) } }
.seccion--corta{ padding-block:var(--e8) }
.seccion--papel{ background:var(--papel-2) }
.seccion--blanca{ background:var(--blanco) }
.seccion--acento{ background:var(--acento-cl) }

/* Sección oscura: panel redondeado embutido, no franja a sangre.
   Es lo que hace que el oscuro se lea como una pieza y no como un corte. */
.seccion--tinta{ background:transparent; padding-block:var(--e7) }
.seccion--tinta > .contenedor{
  background:var(--panel, var(--tinta-2)); color:var(--texto-claro);
  border-radius:var(--r-g);
  padding:var(--e8) var(--e6);
}
@media (min-width:768px){ .seccion--tinta > .contenedor{ padding:var(--e10) var(--e9) } }
.seccion--tinta h2,.seccion--tinta h3{ color:#fff }
.seccion--tinta .lead,.seccion--tinta p{ color:var(--texto-claro) }

.rejilla{ display:grid; gap:var(--e6) }
@media (min-width:640px){ .rejilla--2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px){
  .rejilla--3{ grid-template-columns:repeat(3,1fr) }
  .rejilla--4{ grid-template-columns:repeat(4,1fr) }
  .rejilla--2-1{ grid-template-columns:1.15fr 1fr; gap:var(--e9) }
  .rejilla--1-2{ grid-template-columns:1fr 1.15fr; gap:var(--e9) }
}
@media (min-width:640px) and (max-width:899px){
  .rejilla--3,.rejilla--4{ grid-template-columns:repeat(2,1fr) }
}

.pila{ display:flex; flex-direction:column }
.pila--2{ gap:var(--e2) } .pila--3{ gap:var(--e3) }
.pila--4{ gap:var(--e4) } .pila--5{ gap:var(--e5) } .pila--6{ gap:var(--e6) }

.fila{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4) }

/* ==========================================================================
   4. TIPOGRAFÍA
   Nada por encima de 500. El peso no es la herramienta: lo son el tamaño,
   el aire y el color.
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--titulo);
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
  color:var(--tinta);
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem, 1.5rem + 3.6vw, 4.05rem); line-height:1.16; letter-spacing:-.012em }
h2{ font-size:clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); line-height:1.22; letter-spacing:-.008em }
h3{ font-size:clamp(1.2rem, 1.08rem + .5vw, 1.33rem); font-weight:500; line-height:1.5 }
h4{ font-size:1.1rem; font-weight:500 }
h5{ font-size:1rem; font-weight:500 }

p{ max-width:var(--ancho-texto) }
p + p{ margin-top:var(--e4) }

.lead{
  font-size:clamp(1.05rem, .98rem + .4vw, 1.15rem);
  line-height:1.65;
  color:var(--texto-2);
  max-width:56ch;
}

.antetitulo{
  display:block;
  font-size:.8rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--acento-osc);
  margin-bottom:var(--e4);
}
.seccion--tinta .antetitulo{ color:var(--menta) }

.dato{
  font-family:var(--titulo);
  font-size:clamp(2.4rem, 1.7rem + 3vw, 3.5rem);
  font-weight:500; line-height:1; letter-spacing:-.01em;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.seccion--tinta .dato{ color:#fff }

.cita{
  font-family:var(--titulo);
  font-size:clamp(1.3rem, 1rem + 1.25vw, 1.85rem);
  font-weight:400; line-height:1.4; letter-spacing:-.005em;
  color:var(--tinta);
  max-width:24ch;
}

.prosa > * + *{ margin-top:var(--e5) }
.prosa h2{ margin-top:var(--e8) }
.prosa h3{ margin-top:var(--e7) }
.prosa ul,.prosa ol{ padding-left:var(--e5); max-width:var(--ancho-texto) }
.prosa li + li{ margin-top:var(--e3) }
.prosa strong{ font-weight:500; color:var(--tinta) }

.lista-marca{ list-style:none; padding:0; display:grid; gap:var(--e4) }
.lista-marca li{ position:relative; padding-left:var(--e6); max-width:var(--ancho-texto) }
.lista-marca li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:10px; border-radius:50%;
  background:var(--acento);
}

/* ==========================================================================
   5. CABECERA
   Barra clara con las esquinas inferiores redondeadas, como la referencia.
   Sobre el hero se vuelve transparente.
   ========================================================================== */
.cabecera{
  position:sticky; top:0; z-index:var(--z-nav);
  background:var(--papel);
  border-radius:0 0 var(--r-g) var(--r-g);
  transition:background-color var(--t), border-radius var(--t);
}
.cabecera__interior{
  height:var(--cabecera-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--e5);
}
.marca{ display:flex; align-items:center; color:var(--tinta); flex-shrink:0 }
.nav{ min-width:0 }
.marca:hover{ text-decoration:none }

/* Variante sobre el hero: la cabecera sigue siendo sticky, pero el hero sube
   por debajo de ella. Al salir del hero, el JS quita el atributo y la barra
   recupera su fondo. */
body[data-cabecera="hero"] .cabecera{ background:transparent; border-radius:0 }
body[data-cabecera="hero"] .hero{ margin-top:calc(-1 * var(--cabecera-h)) }
body[data-cabecera="hero"] .nav__enlace,
body[data-cabecera="hero"] .marca{ color:#fff }
body[data-cabecera="hero"] .marca img{ filter:brightness(0) invert(1) }
body[data-cabecera="hero"] .hamburguesa{ border-color:rgba(255,255,255,.45) }
body[data-cabecera="hero"] .hamburguesa span{ background:#fff }

/* --- navegación de escritorio --- */
.nav{ display:none }
@media (min-width:1240px){ .nav{ display:flex; align-items:center; gap:2px } }
.nav__enlace{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; font-weight:500;
  color:var(--tinta); padding:10px 10px;
  border-radius:var(--r); position:relative;
  transition:opacity var(--t);
  white-space:nowrap; background:none; border:0; cursor:pointer;
  font-family:var(--display);
}
.nav__enlace:hover{ opacity:.6; text-decoration:none }
.nav__enlace[aria-current="page"]::after{
  content:""; position:absolute; left:var(--e3); right:var(--e3); bottom:2px;
  height:2px; background:currentColor; border-radius:2px; opacity:.55;
}
.nav__flecha{ width:12px; height:12px; transition:transform var(--t); opacity:.55 }

/* --- submenú --- */
.nav__grupo{ position:relative }
.nav__panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:310px; background:var(--blanco);
  border-radius:var(--r-m);
  box-shadow:var(--sombra-2); padding:var(--e3);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__grupo[aria-expanded="true"] .nav__panel,
.nav__grupo:hover .nav__panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav__grupo:hover .nav__flecha{ transform:rotate(180deg) }
.nav__panel a{
  display:block; padding:12px var(--e4); border-radius:var(--r);
  color:var(--tinta); font-size:1rem; font-weight:500; line-height:1.4;
}
.nav__panel a:hover{ background:var(--papel-2); text-decoration:none }
.nav__panel small{ display:block; color:var(--gris); font-size:.85rem; font-weight:400; margin-top:2px }

.cabecera__acciones{ display:flex; align-items:center; gap:var(--e3); flex-shrink:0 }
.cabecera .boton{ white-space:nowrap }
@media (max-width:1239px){ .cabecera__acciones .boton{ display:none } }

/* --- botón hamburguesa --- */
.hamburguesa{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:52px; height:52px; padding:0 13px;
  background:none; border:1px solid var(--linea-fuerte); border-radius:var(--r-pil);
  cursor:pointer;
}
@media (min-width:1240px){ .hamburguesa{ display:none } }
.hamburguesa span{ display:block; height:1.5px; background:var(--tinta); border-radius:2px; transition:transform var(--t), opacity var(--t) }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* --- cajón móvil --- */
.cajon{
  position:fixed; inset:var(--cabecera-h) 0 0 0; z-index:var(--z-drawer);
  background:var(--papel); overflow-y:auto;
  padding:var(--e6) 0 var(--e10);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.cajon[data-abierto="true"]{ transform:none; opacity:1; visibility:visible }
@media (min-width:1240px){ .cajon{ display:none } }
.cajon a{ color:var(--tinta) }
.cajon__enlace{
  display:block; padding:var(--e4) 0;
  font-size:1.35rem; font-weight:400;
  border-bottom:1px solid var(--linea);
}
.cajon__sub{ padding:var(--e2) 0 var(--e5) var(--e4); display:grid; gap:var(--e1) }
.cajon__sub a{ display:block; padding:10px 0; font-size:1rem; color:var(--gris) }
.cajon .boton{ margin-top:var(--e7); width:100% }

/* ==========================================================================
   6. PIE
   Claro, sobre el papel teñido — como la referencia.
   ========================================================================== */
.pie{ background:var(--papel-2); color:var(--tinta); padding-block:var(--e10) var(--e7) }
.pie__titulo{ font-size:1.05rem; font-weight:500; margin-bottom:var(--e5) }
.pie a{ color:var(--tinta) }
.pie a:hover{ opacity:.6; text-decoration:none }
.pie p{ color:var(--texto-2) }
.pie__rejilla{ display:grid; gap:var(--e8); grid-template-columns:1fr }
@media (min-width:700px){ .pie__rejilla{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .pie__rejilla{ grid-template-columns:1.6fr 1fr 1fr 1fr } }
.pie__lista{ list-style:none; display:grid; gap:var(--e3) }
.pie__base{
  margin-top:var(--e9); padding-top:var(--e6);
  border-top:1px solid var(--linea);
  display:flex; flex-wrap:wrap; gap:var(--e4) var(--e7);
  justify-content:space-between; align-items:center;
  font-size:.95rem;
}
.redes{ display:flex; gap:var(--e2); list-style:none }
.redes a{
  display:grid; place-items:center; width:48px; height:48px;
  border:1px solid var(--linea-fuerte); border-radius:50%;
  transition:background-color var(--t), border-color var(--t);
}
.redes a:hover{ background:var(--menta); border-color:var(--menta) }
.redes svg{ width:18px; height:18px }

/* ==========================================================================
   7. COMPONENTES
   ========================================================================== */

/* --- botones: pastilla, 18px/500, con un círculo de color al final --- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e4);
  min-height:60px; padding:14px var(--e6);
  font-family:var(--display); font-size:1.05rem; font-weight:500; line-height:1.3;
  border:1.5px solid transparent; border-radius:var(--r-pil);
  cursor:pointer; text-align:left;
  transition:background-color var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.boton:hover{ text-decoration:none }
.boton svg{ width:18px; height:18px; flex-shrink:0 }

/* con círculo: el texto respira a la izquierda y el círculo cierra la pastilla */
.boton--circulo{ padding:8px 8px 8px var(--e6); gap:var(--e5) }
.boton__circulo{
  display:grid; place-items:center; flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  background:var(--menta); color:var(--tinta);
  transition:transform var(--t);
}
.boton--circulo:hover .boton__circulo{ transform:translateX(3px) }
.boton--circulo svg{ width:17px; height:17px }

.boton--primario{ background:var(--naranja-btn); color:#fff; border-color:var(--naranja-btn) }
.boton--primario:hover{ background:var(--naranja-btn-h); border-color:var(--naranja-btn-h); color:#fff }
.boton--primario .boton__circulo{ background:#fff; color:var(--naranja-btn) }

/* Sobre fondo oscuro el sistema se invierte: pastilla clara, círculo oscuro. */
.boton--menta{ background:var(--menta); color:var(--tinta); border-color:var(--menta) }
.boton--menta:hover{ background:var(--menta-2); border-color:var(--menta-2); color:var(--tinta) }
.boton--menta .boton__circulo{ background:var(--tinta); color:#fff }

.boton--celeste{ background:var(--tinta); color:#fff; border-color:var(--tinta) }
.boton--celeste:hover{ background:var(--tinta-2); border-color:var(--tinta-2); color:#fff }

.boton--solido{ background:var(--tinta); color:#fff; border-color:var(--tinta) }
.boton--solido:hover{ background:var(--tinta-2); border-color:var(--tinta-2); color:#fff }

.boton--linea{ background:transparent; color:var(--tinta); border-color:var(--linea-fuerte) }
.boton--linea:hover{ border-color:var(--tinta); background:transparent }
.boton--linea .boton__circulo{ background:var(--menta) }

.boton--claro{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.45) }
.boton--claro:hover{ background:#fff; color:var(--tinta); border-color:#fff }
.boton--claro .boton__circulo{ background:var(--menta); color:var(--tinta) }

.boton--bloque{ width:100%; justify-content:space-between }
.boton[disabled],.boton[aria-disabled="true"]{ opacity:.4; pointer-events:none }

/* enlace con flecha */
.enlace-flecha{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500; font-size:1rem;
  color:var(--tinta);
}
.enlace-flecha svg{ width:17px; height:17px; transition:transform var(--t) }
.enlace-flecha:hover{ text-decoration:none; opacity:.65 }
.enlace-flecha:hover svg{ transform:translateX(5px) }
.seccion--tinta .enlace-flecha{ color:#fff }

/* --- tarjetas --- */
/* Tarjeta de contenido: sin caja, separada por un filete. Es lo que hace que
   una grilla de cuatro bloques se lea como texto editorial y no como cajones. */
.tarjeta{
  background:transparent;
  padding:0 0 var(--e6);
  border-bottom:1px solid var(--linea);
  display:flex; flex-direction:column; gap:var(--e4);
  transition:box-shadow var(--t), transform var(--t), background-color var(--t);
}
.tarjeta p{ color:var(--texto-2); font-size:1rem; max-width:none }
.tarjeta h3{ text-wrap:pretty }
.seccion--tinta .tarjeta{ border-bottom-color:rgba(255,255,255,.16) }

/* Tarjeta que además es un enlace: ahí sí es una superficie. */
a.tarjeta,.tarjeta--enlace{
  position:relative; background:var(--papel); border-bottom:0;
  border-radius:var(--r-m); padding:var(--e6);
}
.seccion--papel a.tarjeta,.seccion--papel .tarjeta--enlace{ background:var(--blanco) }
a.tarjeta:hover,.tarjeta--enlace:hover{ box-shadow:var(--sombra-2); transform:translateY(-4px); text-decoration:none }
.tarjeta__pie{ margin-top:auto; padding-top:var(--e3) }

/* Sin filete de color: el acento entra por el círculo del icono. */
.tarjeta--acento{ border-top:0 }
.tarjeta__num{ font-size:.9rem; font-weight:500; letter-spacing:.1em; color:var(--gris) }

/* --- icono en círculo pálido --- */
/* El círculo lleva el color de marca a saturación y el icono va en blanco:
   con los pálidos, el azul y el verde del brandbook quedaban grises. Todas las
   combinaciones pasan 3:1 (el mínimo para gráficos). */
.icono{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--acento-osc); color:#fff;
  flex-shrink:0;
}
.icono--pal{ background:var(--acento-pal); color:var(--acento-osc) }
.icono svg{ width:26px; height:26px }
.icono--relleno{ background:var(--tinta); color:#fff }

/* --- etiquetas --- */
.etiqueta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:500;
  padding:7px 16px; border-radius:var(--r-pil);
  background:var(--acento-cl); color:var(--acento-osc);
  white-space:nowrap;
}
.etiqueta--linea{ background:transparent; border:1px solid var(--linea-fuerte); color:var(--gris) }
.etiqueta--activo{ background:#E0E9E5; color:var(--verde) }
.etiqueta--historico{ background:var(--papel-2); color:var(--gris) }

/* --- migas --- */
.migas{ font-size:.92rem; color:var(--gris); padding-block:var(--e6) 0 }
.migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center }
.migas a{ color:var(--gris) }
.migas a:hover{ color:var(--tinta) }
.migas li:not(:last-child)::after{ content:"›"; margin-left:var(--e2); color:var(--gris-cl) }
.migas [aria-current="page"]{ color:var(--tinta) }

/* --- portada de página interna --- */
.portada{ padding-block:var(--e8) var(--e9) }
.portada__interior h1{ max-width:19ch }
.portada .lead{ margin-top:var(--e5); max-width:54ch }
/* La portada toma el tinte de la sección: es lo que hace que cada unidad se
   reconozca por su color apenas se abre la página, sin bajar al contenido. */
body[data-acento] .portada,
body[data-acento] .migas{ background:var(--acento-cl) }
body[data-acento] .portada{ border-radius:0 0 var(--r-g) var(--r-g) }
.portada--acento{ background:var(--acento-cl) }

/* --- figura / foto --- */
.figura{ margin:0 }
.figura img{ width:100%; border-radius:var(--r-m); object-fit:cover }
.figura figcaption{ margin-top:var(--e4); font-size:.92rem; color:var(--gris) }

/* Espacio de fotografía. Hasta que lleguen las fotos de la Fundación cada
   hueco lleva una ilustración temática de la paleta (ver _fuente/ilustra.py),
   recortada por la caja como lo hará después la foto. La nota de qué foto va
   ahí es el data-pendiente, así que sólo aparece en modo revisión. */
.foto{
  position:relative; overflow:hidden; margin:0;
  border-radius:var(--r-m);
  background:var(--tinta);
  aspect-ratio:4/3;
}
.foto--ancha{ aspect-ratio:16/10 }
.foto--alta{ aspect-ratio:3/4 }
.foto--cuadrada{ aspect-ratio:1/1 }
.foto__img{ display:block; width:100%; height:100%; object-fit:cover;
            transition:transform var(--dur-3) var(--suave) }
a:hover .foto__img, .tarjeta:hover .foto__img, .unidad:hover .foto__img{ transform:scale(1.04) }

/* --- grilla de logos aliados: fila limpia, sin cajas --- */
.logos{
  display:grid; gap:var(--e6);
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}
@media (min-width:640px){ .logos{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:900px){ .logos{ grid-template-columns:repeat(5,1fr) } }
.logos > *{
  min-height:64px;
  display:grid; place-items:center; text-align:center;
  font-size:.92rem; font-weight:500; color:var(--gris); line-height:1.35;
  transition:color var(--t);
}
.logos a:hover{ color:var(--tinta); text-decoration:none }

/* Logos de aliados. Los PNG del sitio viejo venían en 400x250 con 70% de aire
   transparente alrededor, así que la marca se veía diminuta; están recortados
   al borde. Recortados quedan de proporciones muy distintas (de un escudo
   cuadrado a un logotipo 4:1), así que van dentro de una caja pareja con
   `contain`: cada uno crece hasta donde entra y ninguno domina la fila. */
.logos img{ display:block; width:100%; max-width:210px; height:72px;
            object-fit:contain; margin-inline:auto }


/* --- acordeón numerado (como el «Fördelar med» de la referencia) --- */
.acordeon{ border-top:1px solid var(--linea) }
.acordeon details{ border-bottom:1px solid var(--linea) }
.acordeon summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e5);
  padding:var(--e6) 0; cursor:pointer; list-style:none;
  font-size:1.15rem; font-weight:500; color:var(--tinta);
}
.acordeon summary::-webkit-details-marker{ display:none }
.acordeon summary:hover{ opacity:.65 }
.acordeon summary::after{
  content:""; flex-shrink:0; width:14px; height:14px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px); transition:transform var(--t);
}
.acordeon details[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px) }
.acordeon__num{
  font-size:1.65rem; font-weight:400; color:var(--acento-osc);
  margin-right:var(--e5); font-variant-numeric:tabular-nums;
}
.acordeon__cuerpo{ padding-bottom:var(--e6); max-width:56ch }
.acordeon__cuerpo p{ color:var(--texto-2) }

/* --- pasos numerados --- */
.pasos{ counter-reset:paso; display:grid; gap:var(--e6) }
.pasos > li{ counter-increment:paso; list-style:none; position:relative; padding-left:var(--e9) }
.pasos > li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute; left:0; top:-4px;
  font-size:1.85rem; font-weight:400;
  color:var(--acento-osc);
}

/* --- tabla --- */
.tabla-envoltorio{ overflow-x:auto; border-radius:var(--r-m); background:var(--papel) }
.seccion--papel .tabla-envoltorio{ background:var(--blanco) }
table{ width:100%; border-collapse:collapse; font-size:1rem; min-width:520px }
th,td{ text-align:left; padding:var(--e4) var(--e5); border-bottom:1px solid var(--linea); vertical-align:top }
th{ font-weight:500; font-size:.88rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gris) }
tbody tr:last-child td{ border-bottom:0 }

/* --- aviso / nota --- */
.aviso{
  display:flex; gap:var(--e4); align-items:flex-start;
  padding:var(--e6); border-radius:var(--r-m);
  background:var(--blanco);
  border-left:3px solid var(--acento);
}
.seccion--blanca .aviso,.portada .aviso{ background:var(--papel-2) }
.aviso p{ font-size:1rem; color:var(--tinta) }
.aviso svg{ width:22px; height:22px; flex-shrink:0; color:var(--acento-osc); margin-top:4px }

/* ==========================================================================
   8. BLOQUES
   ========================================================================== */

/* --- hero de portada --- */
.hero{ position:relative; color:#fff; overflow:hidden; border-radius:0 0 var(--r-g) var(--r-g);
  /* El póster va de fondo del propio hero: así el <video> puede arrancar
     invisible y fundir cuando reproduce, y en el celular —sin video— el
     póster igual se ve. */
  background:var(--tinta) url("../img/portada-video.jpg") center/cover no-repeat }
/* Las tres capas de la portada, de abajo hacia arriba: video, azul, isotipo.
   El azul lleva una base de tinta al 80% porque el video es una sala muy
   clara: sin ella el texto blanco no llega al contraste mínimo. */
.hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
  opacity:0; transition:opacity 1.4s ease;
}
.hero__video[data-listo]{ opacity:1 }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(85% 130% at 76% 6%, rgba(1,158,226,.34) 0%, transparent 60%),
    radial-gradient(70% 100% at 6% 96%, rgba(41,46,106,.55) 0%, transparent 62%),
    linear-gradient(rgba(0,41,59,.84), rgba(0,41,59,.84));
}
.hero::after{
  content:""; position:absolute; right:-6%; top:-14%; z-index:2;
  width:min(680px,62%); aspect-ratio:1;
  background:url("../img/isotipo-blanco.svg") center/contain no-repeat;
  opacity:.06; pointer-events:none;
}
.hero > .contenedor{ position:relative; z-index:3 }
.hero__interior{
  position:relative; z-index:1;
  min-height:clamp(520px, 84vh, 820px);
  padding-block:calc(var(--cabecera-h) + var(--e7)) var(--e10);
  display:flex; flex-direction:column; justify-content:center;
}
/* El titular elegido (29/10/2026) es largo: columna más ancha y cuerpo un poco
   menor que el h1 general, para que entre en tres líneas en escritorio. */
.hero h1{ color:#fff; max-width:22ch; font-size:clamp(2rem, 1.1rem + 3.5vw, 3.6rem) }
.hero .lead{ color:var(--texto-claro); margin-top:var(--e6); max-width:46ch }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:var(--e4); margin-top:var(--e8) }
/* Sobre el video, la menta se queda en 4,3:1. El celeste claro de la
   paleta pasa holgado y es el mismo tono de la familia. */
.hero__antetitulo{ color:var(--celeste-cl) }
.hero__pie{
  position:absolute; z-index:1; left:0; right:0; bottom:var(--e7);
  display:flex; flex-wrap:wrap; gap:var(--e5);
  justify-content:space-between; align-items:flex-end;
  font-size:.95rem; color:rgba(255,255,255,.85);
}
.hero__pie p{ max-width:24ch; margin:0 }
.hero__descubrir{ display:inline-flex; align-items:center; gap:10px; color:#fff }
.hero__descubrir svg{ width:16px; height:16px }
@media (max-width:767px){ .hero__pie{ position:static; margin-top:var(--e8); padding-inline:0 } }

/* --- franja de datos --- */
.datos{ display:grid; gap:var(--e8) var(--e6); grid-template-columns:repeat(2,1fr) }
/* En el celular las cifras van a una columna: «+150.000» en Roboto Slab no
   entra en media pantalla de 375px y se pasaba 8px del contenedor. */
@media (max-width:479px){ .datos{ grid-template-columns:1fr; gap:var(--e6) } }
@media (min-width:900px){ .datos{ grid-template-columns:repeat(4,1fr) } }
.datos > div{ border-left:0; padding-left:0 }
.datos p{ font-size:1rem; color:var(--texto-2); margin-top:var(--e3); max-width:22ch }
.seccion--tinta .datos p{ color:var(--texto-claro) }

/* --- llamada final: panel oscuro embutido --- */
.llamada{ background:transparent; padding-block:var(--e7) }
.llamada__interior{
  position:relative; overflow:hidden;
  background:var(--panel, var(--tinta-2)); color:#fff;
  border-radius:var(--r-g);
  padding:var(--e9) var(--e6);
  text-align:center; margin-inline:auto;
}
@media (min-width:768px){ .llamada__interior{ padding:var(--e10) var(--e9) } }
.llamada__interior::after{
  content:""; position:absolute; left:-4%; bottom:-52%;
  width:min(420px,46%); aspect-ratio:1;
  background:url("../img/isotipo-blanco.svg") center/contain no-repeat;
  opacity:.06;
}
.llamada h2,.llamada p,.llamada .fila{ position:relative; z-index:1 }
.llamada h2{ color:#fff; max-width:20ch; margin-inline:auto }
.llamada p{ color:var(--texto-claro); margin-top:var(--e5); margin-inline:auto; max-width:46ch }
.llamada .fila{ justify-content:center; margin-top:var(--e7) }

/* --- listado de novedades --- */
.nota{ display:grid; gap:var(--e4); grid-template-columns:1fr; align-content:start }
@media (min-width:640px){ .nota--horizontal{ grid-template-columns:230px 1fr; gap:var(--e6); align-items:start } }
.nota__fecha{ font-size:.92rem; color:var(--gris) }
.nota h3{ font-size:1.3rem; line-height:1.35; font-weight:500 }
.nota p{ color:var(--texto-2); font-size:1rem }
.notas{ display:grid; gap:0 }
.notas > li{ list-style:none; padding-block:var(--e7); border-bottom:1px solid var(--linea) }
.notas > li:first-child{ padding-top:0 }

/* --- filtros --- */
.filtros{ display:flex; flex-wrap:wrap; gap:var(--e3) }
.filtro{
  font-family:var(--display); font-size:.98rem; font-weight:500;
  padding:12px var(--e5); min-height:48px;
  border:1px solid var(--linea-fuerte); border-radius:var(--r-pil);
  background:transparent; color:var(--gris); cursor:pointer;
  transition:all var(--t);
}
.filtro:hover{ border-color:var(--tinta); color:var(--tinta) }
.filtro[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:#fff }

/* --- escalones de donación --- */
.escalones{ display:grid; gap:var(--e5) }
@media (min-width:820px){ .escalones{ grid-template-columns:repeat(3,1fr) } }
.escalon{
  background:var(--papel); border-radius:var(--r-m);
  padding:var(--e6); display:flex; flex-direction:column; gap:var(--e4);
  position:relative;
}
.seccion--papel .escalon{ background:var(--blanco) }
.escalon--sugerido,.seccion--papel .escalon--sugerido{ background:var(--tinta-2); color:#fff }
.escalon--sugerido::before{
  content:"Más elegido"; position:absolute; top:var(--e5); right:var(--e5);
  font-size:.78rem; font-weight:500;
  background:var(--menta); color:var(--tinta); padding:5px 14px; border-radius:var(--r-pil);
}
.escalon__monto{ font-size:2.4rem; font-weight:400; line-height:1; color:inherit }
.escalon p{ font-size:1rem; color:var(--texto-2) }
.escalon--sugerido p{ color:var(--texto-claro) }

/* Punto de color de la unidad: reemplaza al isotipo repetido cuatro veces,
   que no distinguía una marca de otra. */
.unidad-punto{
  width:38px; height:6px; border-radius:var(--r-pil);
  background:var(--acento); display:block;
}

/* --- parrilla de oferta: seis servicios, centrados, como el modelo que
       mandó la Fundación. Dos filas de tres en escritorio. --- */
.oferta{ display:grid; gap:var(--e8) var(--e7); grid-template-columns:1fr }
@media (min-width:640px){ .oferta{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .oferta{ grid-template-columns:repeat(3,1fr); gap:var(--e9) var(--e8) } }
/* Son cinco servicios: en pantalla ancha van en una sola fila. */
@media (min-width:1200px){ .oferta{ grid-template-columns:repeat(5,1fr); gap:var(--e8) var(--e6) } }
.oferta__item{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--e4) }
.oferta__item .icono{ margin-bottom:var(--e2) }
.oferta__item h3{
  font-size:1.05rem; font-weight:500; line-height:1.35;
  text-transform:uppercase; letter-spacing:.07em;
  max-width:18ch;
}
.oferta__item p{ color:var(--texto-2); font-size:1rem; max-width:34ch; margin-inline:auto }
.oferta__item .enlace-flecha{ margin-top:auto; padding-top:var(--e2) }

/* --- unidades formativas --- */
.unidad{
  display:grid; gap:var(--e6); align-items:center;
  padding-block:var(--e9);
  border-bottom:1px solid var(--linea);
}
@media (min-width:900px){ .unidad{ grid-template-columns:1fr 1fr; gap:var(--e10) } .unidad--invertida > *:first-child{ order:2 } }
.unidad:last-child{ border-bottom:0 }

/* --- ODS --- */
.ods{ display:grid; gap:var(--e5); grid-template-columns:repeat(2,1fr) }
@media (min-width:700px){ .ods{ grid-template-columns:repeat(4,1fr) } }
.ods__item{
  min-width:0; overflow-wrap:anywhere;
  border-radius:var(--r-m); padding:var(--e5) var(--e5) var(--e5) var(--e6);
  background:var(--blanco); color:var(--tinta);
  box-shadow:var(--sombra-1);
  border-left:6px solid var(--ods, var(--celeste));
  min-height:140px;
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--e4);
}
.ods__num{ font-size:2rem; font-weight:400; line-height:1; color:var(--ods, var(--celeste)) }
.ods__item strong{ font-size:1rem; font-weight:500; line-height:1.35 }

/* --- línea de tiempo --- */
.linea-tiempo{ position:relative; padding-left:var(--e7); display:grid; gap:var(--e8) }
.linea-tiempo::before{ content:""; position:absolute; left:6px; top:10px; bottom:10px; width:1.5px; background:var(--linea) }
.linea-tiempo > li{ list-style:none; position:relative }
.linea-tiempo > li::before{
  content:""; position:absolute; left:calc(-1 * var(--e7) + 1px); top:9px;
  width:13px; height:13px; border-radius:50%;
  background:var(--acento); box-shadow:0 0 0 5px var(--fondo);
}
.linea-tiempo h3{ font-size:1.3rem; font-weight:500 }
.linea-tiempo p{ color:var(--texto-2); margin-top:var(--e3) }
.linea-tiempo time{ font-size:.92rem; color:var(--gris) }

/* Detalle plegable dentro de la línea de tiempo. */
.jornadas{ margin-top:var(--e4) }
.jornadas summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; font-weight:500; color:var(--acento-osc);
  min-height:44px; padding:10px 0;   /* área táctil mínima */
}
.jornadas summary::-webkit-details-marker{ display:none }
.jornadas summary::after{
  content:""; width:9px; height:9px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t);
}
.jornadas[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px) }
.jornadas ul{ margin-top:var(--e4); gap:var(--e3) }
.jornadas li{ font-size:.98rem; color:var(--texto-2) }
.jornadas strong{ color:var(--tinta); font-weight:500 }

/* --- ficha lateral --- */
.ficha{ display:grid; gap:var(--e8) }
@media (min-width:1000px){ .ficha{ grid-template-columns:1fr 380px; gap:var(--e10); align-items:start } }
.ficha__panel{
  background:var(--papel-2); border-radius:var(--r-m);
  padding:var(--e6); display:grid; gap:var(--e5);
}
.seccion--blanca .ficha__panel{ background:var(--papel) }
/* Pegajoso el aside entero, no sólo el panel: si se pega sólo el panel, al
   desplazarse se monta encima del bloque hermano que va debajo.
   Y sólo si la ventana es lo bastante alta: el aside más largo mide 860px, y
   pegado en una pantalla baja dejaría su parte inferior fuera de alcance. */
@media (min-width:1000px) and (min-height:1000px){
  .ficha > aside{ position:sticky; top:calc(var(--cabecera-h) + var(--e5)) }
}
.ficha__panel dt{ font-size:.85rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--gris) }
.ficha__panel dd{ margin-top:5px; font-size:1rem; color:var(--tinta) }
.ficha__panel dl > div + div{ margin-top:var(--e5) }

/* ==========================================================================
   9. FORMULARIOS
   ========================================================================== */
.campo{ display:grid; gap:8px }
.campo label{ font-size:.98rem; font-weight:500; color:var(--tinta) }
.campo label .req{ color:var(--naranja-osc) }
.campo .ayuda{ font-size:.92rem; color:var(--gris) }
.campo input,.campo select,.campo textarea{
  font-family:var(--cuerpo); font-size:1rem; color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r-pil);
  padding:16px var(--e6); min-height:60px; width:100%;
  transition:border-color var(--t), box-shadow var(--t);
}
.campo textarea{ min-height:160px; resize:vertical; line-height:1.6; border-radius:var(--r-m) }
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2344606C' stroke-width='1.6'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat; background-position:right var(--e6) center; background-size:13px;
  padding-right:var(--e8);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--celeste); box-shadow:0 0 0 4px rgba(1,158,226,.16); outline:none;
}
/* Rojo de sistema: no es de la paleta de marca, pero un estado de error
   tiene que leerse como error. 5.5:1 sobre blanco. */
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"],.campo select[aria-invalid="true"]{ border-color:#B3392C }
.campo .error{ font-size:.92rem; color:#B3392C; display:none; padding-left:var(--e6) }
.campo[data-error="true"] .error{ display:block }

.formulario{ display:grid; gap:var(--e5); max-width:640px }
@media (min-width:640px){ .formulario__par{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e5) } }
.consentimiento{ display:flex; gap:var(--e4); align-items:flex-start; font-size:.95rem; color:var(--texto-2); padding-left:var(--e2) }
.consentimiento input{ width:22px; height:22px; min-height:0; margin-top:2px; flex-shrink:0; accent-color:var(--celeste) }

.suscripcion{ display:flex; flex-wrap:wrap; gap:var(--e4); max-width:560px }
.suscripcion input{ flex:1 1 260px }

/* ==========================================================================
   10. UTILIDADES
   ========================================================================== */
.centrado{ text-align:center }
/* Los títulos llevan max-width: sin margin auto, el texto se centra dentro de
   una caja que queda pegada a la izquierda. Es lo que descentraba los h2 de
   las secciones centradas del inicio. */
.centrado h1,.centrado h2,.centrado h3,.centrado h4,
.centrado p,.centrado .lead{ margin-inline:auto }
.ancho-medio{ max-width:60ch }
.ancho-angosto{ max-width:48ch }
.sin-margen{ max-width:none }
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mt-4{ margin-top:var(--e4) } .mt-5{ margin-top:var(--e5) }
.mt-6{ margin-top:var(--e6) } .mt-7{ margin-top:var(--e7) } .mt-8{ margin-top:var(--e8) }
.encabezado-seccion{ margin-bottom:var(--e8) }
.encabezado-seccion h2{ max-width:20ch }
.encabezado-seccion .lead{ margin-top:var(--e5); max-width:54ch }
.encabezado-seccion.centrado{ margin-inline:auto }
h2 + .lead,h1 + .lead,h3 + .lead{ margin-top:var(--e5) }

/* ==========================================================================
   11. MODO REVISIÓN
   Marca los bloques que dependen de material que la Fundación todavía no envió.
   Se activa desde la barra flotante. Todo esto se borra antes de publicar:
   basta con eliminar este bloque, assets/js/revision.js y su <script>.
   ========================================================================== */
.barra-revision{
  position:fixed; right:var(--e5); bottom:var(--e5); z-index:var(--z-revision);
  display:flex; align-items:center; gap:var(--e4);
  background:var(--tinta); color:#fff;
  padding:10px 10px 10px var(--e6); border-radius:var(--r-pil);
  box-shadow:0 10px 34px rgba(0,41,59,.32);
  font-size:.92rem;
}
.barra-revision__interruptor{
  display:inline-flex; align-items:center; gap:var(--e3);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font:inherit; font-family:var(--display); cursor:pointer;
  padding:10px 16px; border-radius:var(--r-pil); min-height:44px;
}
.barra-revision__interruptor:hover{ background:rgba(255,255,255,.2) }
.barra-revision__interruptor[aria-pressed="true"]{ background:var(--naranja-btn); border-color:var(--naranja-btn) }
.barra-revision__cuenta{
  display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px;
  background:var(--naranja-btn); color:#fff; border-radius:var(--r-pil);
  font-size:.78rem; font-weight:500;
}
.barra-revision__interruptor[aria-pressed="true"] .barra-revision__cuenta{ background:rgba(0,0,0,.25) }

/* Sólo en modo revisión: fuera de él, este position:relative pisaba en
   silencio el posicionamiento de los componentes marcados. */
body[data-revision="true"] [data-pendiente]{ position:relative }
body[data-revision="true"] [data-pendiente]{
  outline:2px dashed var(--naranja-btn);
  outline-offset:6px;
  background:rgba(177,84,27,.06);
  border-radius:var(--r);
}
body[data-revision="true"] [data-pendiente]::after{
  content:attr(data-pendiente);
  position:absolute; left:0; top:-14px; z-index:5;
  font-size:.7rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--naranja-btn); color:#fff;
  padding:4px 10px; border-radius:var(--r-pil);
  white-space:nowrap; pointer-events:none;
}
@media print{ .barra-revision,.saltar,.cajon{ display:none !important } }

/* A 375px la barra no entra: se apila y se pega a los dos bordes. Sin esto
   ensancha el documento y todo el sitio queda con scroll horizontal. */
@media (max-width:460px){
  .barra-revision{
    left:var(--e4); right:var(--e4); bottom:var(--e4);
    padding:8px 8px 8px var(--e5); font-size:.84rem;
    justify-content:space-between; gap:var(--e3);
  }
  .barra-revision__interruptor{ flex-shrink:0 }
}


/* ==========================================================================
   MOVIMIENTO
   Un solo lenguaje para todo el sitio: las cosas suben y aparecen, con una
   curva que frena suave (--suave). Tres duraciones: micro (hover), revelado y
   exhibición (fotos, portada). Todo se apaga con prefers-reduced-motion y no
   existe sin JavaScript: `html.js` lo pone un script inline en el <head>.

   El revelado al scroll tiene tres estados por elemento:
     (sin atributo)      oculto, esperando entrar en pantalla
     data-revela="ok"    entrando (transición corriendo, con su escalón --i)
     data-revela="fin"   terminado: vuelve a mandar la transición propia del
                         componente (el hover de la tarjeta, por ejemplo)
   La lista de qué se revela vive en --revela y en el :is() de abajo. Son la
   misma lista dos veces porque CSS no acepta variables en selectores: si se
   toca una, se toca la otra. El JS la lee de --revela.
   ========================================================================== */
:root{
  --suave: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 220ms;
  --dur-2: 680ms;
  --dur-3: 1100ms;
  --revela: ".encabezado-seccion, .tarjeta, .oferta__item, .unidad, .foto, .figura, .datos > div, .logos > *, .llamada, .cita, .nota, .aviso, .escalon";
}

/* --- revelado al scroll --- */
html.js :is(.encabezado-seccion, .tarjeta, .oferta__item, .unidad, .datos > div, .logos > *, .llamada, .cita, .nota, .aviso, .escalon):not([data-revela]){
  opacity:0; transform:translateY(22px);
}
:is(.encabezado-seccion, .tarjeta, .oferta__item, .unidad, .datos > div, .logos > *, .llamada, .cita, .nota, .aviso, .escalon):not([data-revela="fin"]){
  transition:opacity var(--dur-2) var(--suave), transform var(--dur-2) var(--suave);
  transition-delay:calc(var(--i, 0) * 70ms);
}
/* Las fotos no suben: se descubren de abajo hacia arriba mientras el zoom
   vuelve a 1. La misma transición sirve para el zoom del hover. */
/* El recorte va en la imagen, no en la figura: un elemento con clip-path
   de área cero puede no contar nunca como visible para el observador, y
   la figura es lo que se observa. */
html.js :is(.foto, .figura):not([data-revela]) > :is(img, svg){ clip-path:inset(100% 0 0 0); transform:scale(1.08) }
:is(.foto, .figura):not([data-revela="fin"]) > :is(img, svg){
  transition:clip-path var(--dur-3) var(--suave), transform var(--dur-3) var(--suave);
  transition-delay:calc(var(--i, 0) * 70ms);
}
/* Los iconos de las tarjetas acompañan el hover. */
.icono{ transition:transform var(--dur-1) var(--suave) }
.tarjeta:hover .icono, .oferta__item:hover .icono{ transform:scale(1.06) }



/* --- presencia internacional: banderas en chips --- */
.presencia{ list-style:none; margin:var(--e4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px }
.presencia li{ display:inline-flex; align-items:center; gap:9px; font-size:.95rem; font-weight:500;
  padding:7px 14px 7px 9px; border:1px solid var(--linea); border-radius:999px; background:var(--papel, #fff) }
.presencia__bandera{ display:block; width:26px; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.08) }
.presencia--tinta li{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff }


/* --- galería de fotos reales --- */
.galeria{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e4); grid-template-columns:repeat(2,1fr) }
@media (min-width:700px){ .galeria{ grid-template-columns:repeat(3,1fr) } }
/* Tres columnas también en ancho: con la 1.ª y la 6.ª a doble ancho, siete fotos cierran tres filas exactas. */
@media (min-width:1100px){ .galeria{ gap:var(--e5) } }
.galeria__item{ aspect-ratio:4/3; margin:0 }
/* la primera y la sexta foto ocupan dos columnas: ritmo, no todas iguales */
@media (min-width:700px){ .galeria li:nth-child(1) .galeria__item, .galeria li:nth-child(6) .galeria__item{ aspect-ratio:8/3 } .galeria li:nth-child(1), .galeria li:nth-child(6){ grid-column:span 2 } }

/* --- video de YouTube con fachada: nada se carga hasta el clic --- */
.video-yt{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-m, 0); background:var(--tinta); color:#fff; display:grid; place-items:center }
.video-yt__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; transition:opacity var(--dur-1, .2s) ease, transform var(--dur-3, .8s) var(--suave, ease) }
.video-yt:hover .video-yt__poster{ opacity:.9; transform:scale(1.03) }
.video-yt__boton{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px; padding:12px 22px 12px 14px; border:0; border-radius:999px; background:var(--naranja-btn, #B1541B); color:#fff; font:inherit; font-weight:600; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.video-yt__boton svg{ width:26px; height:26px }
.video-yt__boton:hover{ background:var(--naranja-btn-h, #9C4A18) }
.video-yt__boton:focus-visible{ outline:3px solid #fff; outline-offset:3px }
.video-yt__nota{ position:absolute; z-index:1; bottom:12px; left:0; right:0; margin:0; text-align:center; font-size:.8rem; color:rgba(255,255,255,.8) }
.video-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* --- video alojado en el sitio (IgualDar) --- */
.video-local{ margin:0 }
.video-local video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-m, 0); background:var(--tinta) }
.video-local figcaption{ margin-top:var(--e3); font-size:.9rem; color:var(--texto-2) }

/* --- marcas de unidad y de sección (logos rediseñados del 2/9/26) ---
   Siempre sobre fondo claro: no hay versión en blanco de las marcas. */
.portada__marca{ margin-bottom:var(--e6) }
.portada__marca img{ display:block; width:auto; max-width:min(100%, 420px); height:clamp(56px, 4.6vw, 76px) }
.unidad__marca{ display:block; width:auto; max-width:min(100%, 340px); height:52px; margin-bottom:var(--e3) }

/* --- entrada de la portada y de las cabeceras de página ---
   Es CSS puro: si el JS falla, la animación termina igual en el estado
   visible (fill-mode both). */
@keyframes subir{ from{ opacity:0; transform:translateY(26px) } }
.hero__antetitulo, .hero h1, .hero .lead, .hero__acciones, .hero__pie,
.portada__marca, .portada .antetitulo, .portada .migas, .portada h1, .portada .lead, .portada .fila{
  animation:subir var(--dur-3) var(--suave) both;
}
.portada .antetitulo{ animation-delay:70ms }
.hero h1, .portada h1{ animation-delay:140ms }
.hero .lead, .portada .lead{ animation-delay:200ms }
.hero__acciones, .portada .fila{ animation-delay:310ms }
.hero__pie{ animation-delay:460ms }

/* El isotipo de la portada respira, muy lento. */
@keyframes flotar{ to{ transform:translate3d(0,-14px,0) rotate(2.5deg) } }
.hero::after{ animation:flotar 14s ease-in-out infinite alternate }

/* La flecha de «Descubrí más» invita a bajar. */
@keyframes bajar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.hero__descubrir svg{ animation:bajar 2.2s ease-in-out infinite }

/* --- transición entre páginas (View Transitions, donde exista) --- */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation-duration:180ms }
::view-transition-new(root){ animation-duration:320ms }

/* --- acordeones: el alto lo anima el JS con WAAPI; acá sólo el contenido --- */
details > :not(summary){ transition:opacity var(--dur-1) ease }

/* --- apagado: menos movimiento, impresión, arneses --- */
@media (prefers-reduced-motion: reduce){
  html.js :is(.encabezado-seccion, .tarjeta, .oferta__item, .unidad, .foto, .figura, .datos > div, .logos > *, .llamada, .cita, .nota, .aviso, .escalon):not([data-revela]),
  html.js :is(.foto, .figura):not([data-revela]) > :is(img, svg){
    opacity:1; transform:none; clip-path:none;
  }
  .hero::after, .hero__descubrir svg{ animation:none }
  @view-transition{ navigation:none }
}
@media print{
  html.js :is(.encabezado-seccion, .tarjeta, .oferta__item, .unidad, .foto, .figura, .datos > div, .logos > *, .llamada, .cita, .nota, .aviso, .escalon):not([data-revela]),
  html.js :is(.foto, .figura):not([data-revela]) > :is(img, svg){
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}