/* =========================================================================
   ENEQUIP — hoja de estilos única
   -------------------------------------------------------------------------
   Sistema visual derivado de la marca: cuatro anillos entrelazados, uno por
   capa (persona · liderazgo · equipo · organización), del azul más claro de
   la superficie al más profundo. Los mismos cuatro colores del isotipo.

   REGLA DE COLOR que conviene no romper: el azul principal (#2ea5b5) no se
   usa nunca para texto ni lleva texto encima a tamaño de lectura. Sobre
   blanco da 2,9:1 y la norma de accesibilidad pide 4,5:1. Es el color de las
   formas: anillos, barras, bordes, puntos y números grandes. Para texto
   acentuado se usa #1880a1 (4,5:1) y para titulares y botones #185f70 (7,3:1).
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Marca: los cuatro colores del isotipo, de la superficie a la profundidad */
  --azul-cielo:#A8DAE3;   /* persona     */
  --azul:#2EA5B5;         /* liderazgo — el principal */
  --azul-medio:#1880A1;   /* equipo      */
  --azul-hondo:#185F70;   /* organización */
  --azul-claro:#7FC6D4;   /* puente entre cielo y principal, para estados */
  --tinta:#0D313A;        /* fondo profundo: sombra del azul hondo */

  /* Tierra: el acento cálido de siempre. Es lo que evita que una web de cuatro
     azules acabe pareciendo fría y corporativa, y es de lo que más se recuerda. */
  --tierra:#8A5433;
  --arcilla:#B87A4E;
  --arena:#D9C3AB;

  /* Papel y neutros: tintes del propio azul, nunca grises neutros */
  --papel:#FFFFFF;
  --papel-2:#F0F8FA;
  --linea:#D6E8EC;
  --gris:#4E6B73;
  --gris-claro:#5C7A82;

  /* Roles */
  --fondo:var(--papel);
  --fondo-alt:var(--papel-2);
  --texto:#10262C;
  --texto-suave:var(--gris);
  --borde:var(--linea);
  --acento:var(--azul-medio);        /* texto acentuado y enlaces */
  --acento-tierra:var(--tierra);     /* rótulos, etiquetas, filetes y números */
  --acento-forma:var(--tierra);      /* formas: filetes, iconos, bordes */
  --superficie:#FFFFFF;
  --sombra:0 1px 2px rgba(13,49,58,.05), 0 8px 28px -12px rgba(13,49,58,.16);

  /* Tipografía de marca. Los archivos van en assets/fonts/ (ver la guía).
     Mientras no estén, el navegador usa la alternativa del sistema y la web
     sigue funcionando: no se rompe nada, solo cambia la letra. */
  --sans:"Outfit","Century Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Righteous","Outfit","Century Gothic",Verdana,sans-serif;
  --firma:"Telma","Segoe Script","Brush Script MT",cursive;
  --serif:var(--sans);   /* heredado: ya no hay serif en la marca */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radio:6px;
  --ancho:1180px;
  --ancho-texto:68ch;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --fondo:#08222A;
    --fondo-alt:#0C2C35;
    --texto:#E8F5F8;
    --texto-suave:#A9C6CE;
    --borde:#1D4652;
    --acento:#7FC6D4;
    --acento-tierra:#C98A5C;
    --acento-forma:#C98A5C;
    --superficie:#0E2F39;
    --papel-2:#0C2C35;
    --gris-claro:#9BBCC5;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#08222A;
  --fondo-alt:#0C2C35;
  --texto:#E8F5F8;
  --texto-suave:#A9C6CE;
  --borde:#1D4652;
  --acento:#7FC6D4;
  --acento-tierra:#C98A5C;
  --acento-forma:#C98A5C;
  --superficie:#0E2F39;
  --papel-2:#0C2C35;
  --gris-claro:#9BBCC5;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.6);
}


/* ---------- 1 bis. Tipografía de marca ------------------------------------
   Righteous para titulares, Outfit para todo lo demás y Telma para las firmas
   manuscritas. Los tres archivos van en assets/fonts/ y se sirven desde
   vuestro dominio: ni una petición a Google, que es lo que mantiene la web
   rápida y sin cookies de terceros (y sin el problema de RGPD que arrastra
   cargar fuentes desde fuera).

   Si algún archivo falta, no se rompe nada: el navegador usa la alternativa
   del sistema que está declarada en cada variable.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-variable.woff2") format("woff2-variations"),
      url("../fonts/outfit-regular.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Righteous";
  src:url("../fonts/righteous-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Telma";
  src:url("../fonts/telma-variable.woff2") format("woff2-variations"),
      url("../fonts/telma-regular.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* La cabecera es pegajosa: los anclajes no deben quedar debajo */
section[id],article[id]{scroll-margin-top:84px}
@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{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Imprescindible: sin esto, cualquier clase con display propio (.btn, .entregable…)
   gana al atributo hidden y el elemento se sigue viendo. */
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:2px}
::selection{background:var(--arena);color:var(--tinta)}

/* Los titulares vuelven al tratamiento de la primera versión: palo seco, peso
   700, interlineado corto y el tracking negativo que los compacta. Cambia solo
   la letra, que ahora es Outfit —la de la marca— en lugar de la del sistema.

   Righteous ya no se usa en ningún titular, tampoco en la portada. Queda solo
   en los rótulos de sección, que son etiquetas en cuerpo pequeño. */
h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2.1rem,5.6vw,4.05rem)}
h2{font-size:clamp(1.65rem,3.9vw,2.75rem)}
h3{font-size:clamp(1.12rem,2vw,1.4rem);letter-spacing:-.012em}
h4{font-size:1rem;letter-spacing:-.005em}
p{margin:0}

.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:20px}
.seccion{padding-block:clamp(56px,8vw,112px)}
.seccion--alt{background:var(--fondo-alt)}
.medida{max-width:var(--ancho-texto)}
.pila{display:flex;flex-direction:column}
.pila-sm{gap:12px}.pila-md{gap:20px}.pila-lg{gap:32px}.pila-xl{gap:48px}

/* Eyebrow / rótulo de sección */
.rotulo{
  font-family:var(--display);
  font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);display:flex;align-items:center;gap:10px;
}
.rotulo::before{content:"";width:26px;height:3px;background:var(--acento-forma);flex:none}
.sombrero{color:var(--texto-suave);font-size:1.06rem;max-width:62ch}

/* Estratos: la firma gráfica del sistema */
.estratos{display:flex;height:5px;width:100%;overflow:hidden}
.estratos i{flex:1}
.estratos i:nth-child(1){background:var(--azul-cielo)}
.estratos i:nth-child(2){background:var(--azul)}
.estratos i:nth-child(3){background:var(--azul-medio)}
.estratos i:nth-child(4){background:var(--azul-hondo)}

/* ---------- 3. Botones --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--radio);border:1.5px solid transparent;
  font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;background:none;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn--primario{background:var(--tierra);color:#fff;border-color:var(--tierra)}
.btn--primario:hover{background:#74441F;border-color:#74441F}
.btn--azul{background:var(--azul-hondo);color:#fff;border-color:var(--azul-hondo)}
.btn--azul:hover{background:var(--tinta);border-color:var(--tinta)}
.btn--linea{border-color:var(--borde);color:var(--texto)}
.btn--linea:hover{border-color:var(--acento-forma);color:var(--acento);background:transparent}
.btn--claro{border-color:rgba(255,255,255,.34);color:#fff}
.btn--claro:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--sm{padding:9px 16px;font-size:.85rem}
.btn .flecha{transition:transform .18s}
.btn:hover .flecha{transform:translateX(3px)}

/* ---------- 4. Cabecera -------------------------------------------------- */
.cabecera{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--fondo) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s,background-color .2s;
}
.cabecera.pegada{border-bottom-color:var(--borde)}
.cabecera__in{display:flex;align-items:center;gap:18px;min-height:78px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--texto);flex:none}
.marca svg{display:block}
/* El logotipo lleva el nombre y la firma «Federic & Flor» dentro. La firma es
   manuscrita y fina: por debajo de unos 46 px de alto total se empasta, así
   que la cabecera es un poco más alta que antes. Se sirve al doble de esa
   altura para que no se vea borrosa en pantallas densas. */
.marca__logo{display:block;height:46px;width:auto}
@media (max-width:1140px){.marca__logo{height:42px}}
@media (max-width:520px){.marca__logo{height:38px}}
@media (max-width:380px){.marca__logo{height:34px}}
.marca__txt{font-family:var(--display);font-weight:400;font-size:1.16rem;letter-spacing:.08em}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.88rem;font-weight:500;line-height:1.35;color:var(--texto-suave);
  padding:8px 11px;border-radius:var(--radio);transition:color .15s,background-color .15s;
}
.nav a:hover,.nav a.activo{color:var(--texto);background:color-mix(in srgb,var(--borde) 45%,transparent)}
.cabecera__acciones{display:flex;align-items:center;gap:10px;margin-left:8px}

.idioma{display:inline-flex;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.idioma button{
  border:0;background:none;font-family:inherit;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  padding:6px 9px;color:var(--texto-suave);cursor:pointer;transition:background-color .15s,color .15s;
}
.idioma button[aria-pressed="true"]{background:var(--azul-hondo);color:#fff}

/* Un icono solo pasa desapercibido en pantallas medianas, donde todavía
   parece que hay sitio para un menú. Por eso lleva la palabra al lado. */
.hamburguesa{
  display:none;align-items:center;gap:8px;
  border:1px solid var(--borde);background:none;border-radius:var(--radio);
  padding:8px 12px;cursor:pointer;color:var(--texto);font-family:inherit;
}
.hamburguesa svg{display:block}
.hamburguesa__txt{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

@media (max-width:1140px){
  .nav{
    position:fixed;inset:calc(78px + env(safe-area-inset-top,0px)) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--fondo);border-bottom:1px solid var(--borde);
    padding:8px 20px 20px;box-shadow:var(--sombra);
  }
  .nav[hidden]{display:none}
  .nav a{padding:13px 4px;font-size:1rem;border-bottom:1px solid var(--borde)}
  .nav a:last-child{border-bottom:0}
  .hamburguesa{display:inline-flex;margin-left:auto}
  .cabecera__acciones{margin-left:0;order:2}
  .nav{order:3}
}

/* ---------- 5. Hero ------------------------------------------------------ */
.hero{position:relative;background:var(--tinta);color:#EAF6F8;overflow:hidden}
/* La foto deja de disolverse en el fondo: ahora es un panel con su borde.
   De 901 px para arriba ocupa la mitad derecha del hero y termina en un canto
   recto; a su izquierda queda el azul de la marca, liso, que es donde va el
   texto. El corte lo hace el CSS y no el archivo a propósito: así cae siempre
   en el mismo punto de la pantalla, mientras que si viniera pintado en la
   imagen el recorte de «object-fit: cover» lo movería según el monitor.

   Por debajo de 901 px no cabe esa partición: ahí la foto vuelve a ocupar
   todo el fondo, desplazada hacia ellos dos, y el velo la oscurece de arriba
   abajo para que el texto lea. */
.hero__foto{position:absolute;inset:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:46% 50%;opacity:.9}
.hero__velo{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(13,49,58,.76) 0%,
      rgba(13,49,58,.84) 18%,
      rgba(13,49,58,.87) 34%,
      rgba(13,49,58,.91) 52%,
      rgba(13,49,58,.94) 75%,
      rgba(13,49,58,.95) 100%);
}
@media (min-width:901px){
  /* La foto termina justo en la línea del pie del hero, que cruza de lado a
     lado: así el corte de abajo también es recto y no pisa el texto. Entre
     901 y 1023 px esa línea de servicios se parte en dos y el pie mide más. */
  /* El borde de la foto no cae en un porcentaje de la pantalla, sino donde
     termina la primera mitad de la caja de contenido: la misma que alinea el
     logotipo y los titulares del resto de la web. Así, por ancha que sea la
     pantalla, el texto sigue teniendo su mitad y no queda un páramo a la
     izquierda con la columna encogida en medio. */
  .hero__foto{left:calc(max(0px, (100% - var(--ancho)) / 2) + min(100%, var(--ancho)) * .47);width:auto;right:0;bottom:91px}
  .hero__foto img{object-position:50% 0%;opacity:1}
  .hero__velo{display:none}
}
@media (min-width:1024px){.hero__foto{bottom:60px}}
.hero__in{position:relative;padding-block:clamp(64px,10vw,132px) clamp(56px,8vw,104px)}
.hero__cuerpo{max-width:none}
/* La portada usa la misma letra que el resto de titulares: Outfit en negrita,
   apretado. Righteous ya no se usa en ningún titular de la web. */
.hero h1{color:#FFFFFF;font-size:clamp(1.9rem,4.1vw,3.25rem);max-width:20ch}
.hero h1 em{font-style:normal;color:var(--azul-cielo)}
.hero__sub{max-width:52ch;color:#C6E1E8;font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6}
.hero__rotulo{color:var(--azul-claro)}
.hero__rotulo::before{background:var(--azul-claro)}
.hero__acciones{display:flex;flex-wrap:wrap;gap:12px}
.hero__pie{
  position:relative;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 30px;padding-block:16px;
  font-size:.82rem;letter-spacing:.02em;color:#9FC2CC;
}
.hero__pie span{display:inline-flex;align-items:center;gap:8px}
.hero__pie span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--azul-claro);flex:none}

/* ---------- 6. Banda webinar -------------------------------------------- */
.webinar{background:var(--azul-hondo);color:#fff}
.webinar__in{
  display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:center;
  padding-block:clamp(26px,4vw,40px);
}
.webinar__etiqueta{
  display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--azul-cielo);
}
.webinar__punto{width:8px;height:8px;border-radius:50%;background:var(--azul-claro);flex:none;animation:latido 2.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.webinar h2{font-size:clamp(1.3rem,2.7vw,1.95rem);color:#fff}
.webinar p{color:#C6E1E8;font-size:.97rem;max-width:56ch}
.cuenta{display:flex;gap:10px}
.cuenta div{
  min-width:64px;text-align:center;padding:9px 6px;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radio);background:rgba(255,255,255,.05);
}
.cuenta b{display:block;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums}
.cuenta small{display:block;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:#9FC2CC;margin-top:3px}
@media (max-width:820px){.webinar__in{grid-template-columns:1fr}}

/* ---------- 7. Bloques de contenido ------------------------------------- */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.dos--desigual{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
@media (max-width:900px){.dos,.dos--desigual{grid-template-columns:1fr}}

.parrafo-grande{font-size:clamp(1.14rem,2vw,1.42rem);line-height:1.5;letter-spacing:-.012em}
.texto p+p{margin-top:1.05em}
.texto{color:var(--texto-suave);line-height:1.72}
.texto strong{color:var(--texto);font-weight:600}

/* Cita / voz del manifiesto — la otra tipografía */
.voz{
  font-family:var(--sans);font-weight:300;font-size:clamp(1.34rem,2.9vw,2rem);
  line-height:1.38;letter-spacing:-.005em;color:var(--texto);text-wrap:balance;
}
.voz--claro{color:#FFFFFF}
.cita{
  border-left:3px solid var(--azul-hondo);padding-left:clamp(18px,3vw,30px);
}
.cita__firma{font-family:var(--firma);font-size:1.5rem;letter-spacing:0;color:var(--arcilla);margin-top:12px;line-height:1.2}

/* Lista de momentos: dos columnas, con las palabras que discriminan en negrita
   para que se escanee en diagonal y cada cual se reconozca en la suya. */
.momentos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(30px,4.5vw,62px);
}
.momentos li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:19px 0;border-top:1px solid var(--borde);
  font-size:.99rem;line-height:1.55;color:var(--texto-suave);
}
/* El icono sustituye al filete: mismo papel de marcador, más información */
.momentos__icono{
  width:30px;height:30px;flex:none;margin-top:-2px;
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--azul-cielo) 45%,transparent);
  color:var(--azul-hondo);
}
.momentos__icono svg{width:17px;height:17px;display:block}
.momentos li:hover .momentos__icono{background:var(--azul-cielo)}
.momentos li::marker{content:""}
.momentos li.sin-icono::before{
  content:"";position:absolute;left:0;top:29px;
  width:15px;height:2px;background:var(--acento-forma);
  transition:width .25s cubic-bezier(.2,.7,.3,1);
}
.momentos li.sin-icono:hover::before{width:22px}
.momentos strong{color:var(--texto);font-weight:600;letter-spacing:-.006em}

.momentos__cierre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 34px;margin-top:38px;padding-top:30px;border-top:1px solid var(--borde);
}
.momentos__cierre .voz{max-width:26ch;margin:0}

@media (max-width:820px){
  .momentos{grid-template-columns:1fr}
  .momentos li{padding-block:16px}
  .momentos li::before{top:26px}
}

/* ---------- 8. Espiral síntoma → etiqueta → solución --------------------- */
.espiral{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.trampa{
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);
  padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
}
.trampa::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--azul);opacity:.7}
.trampa:nth-child(2)::after{background:var(--azul-medio)}
.trampa:nth-child(3)::after{background:var(--azul-hondo)}
.trampa:nth-child(4)::after{background:var(--tinta)}
.trampa__paso{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.trampa__txt{font-size:1.02rem;font-weight:600;line-height:1.35;letter-spacing:-.012em}
.trampa__nota{font-size:.87rem;color:var(--texto-suave);line-height:1.55}

/* ---------- 9. El modelo: corte estratigráfico interactivo -------------- */
.modelo{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:920px){.modelo{grid-template-columns:1fr}}

.corte{
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;
  background:var(--superficie);box-shadow:var(--sombra);
}
/* Cabecera y pie del corte: cada rótulo en su propia línea, sin pelearse por
   el ancho. Además «superficie» queda arriba y «profundidad» abajo, que es como
   se lee un corte de verdad. */
.corte__cabeza{
  padding:15px 20px;border-bottom:1px solid var(--borde);
  display:flex;flex-direction:column;gap:7px;
}
.corte__titulo{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-suave);font-weight:700;
}
.corte__nivel{
  display:flex;align-items:center;gap:9px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-claro);font-weight:700;
}
.corte__nivel::before{
  content:"";width:16px;height:1px;background:currentColor;flex:none;opacity:.75;
}
.corte__nivel--pie{
  padding:14px 20px;border-top:1px solid var(--borde);margin:0;
}
.capa{
  display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--borde);
  background:none;font-family:inherit;color:var(--texto);cursor:pointer;
  padding:0;position:relative;transition:background-color .2s;
}
.capa:last-of-type{border-bottom:0}
.capa__in{display:flex;align-items:center;gap:16px;padding:18px 20px}
.capa__barra{width:6px;align-self:stretch;flex:none;border-radius:3px;transition:width .2s}
.capa[data-capa="persona"] .capa__barra{background:var(--azul-cielo)}
.capa[data-capa="liderazgo"] .capa__barra{background:var(--azul)}
.capa[data-capa="equipo"] .capa__barra{background:var(--azul-medio)}
.capa[data-capa="organizacion"] .capa__barra{background:var(--azul-hondo)}
.capa__nombre{display:block;font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.capa__preg{display:block;font-size:.88rem;color:var(--texto-suave);margin-top:2px}
.capa__num{
  margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--gris-claro);
  font-variant-numeric:tabular-nums;
}
.capa:hover{background:color-mix(in srgb,var(--borde) 26%,transparent)}
.capa[aria-selected="true"]{background:color-mix(in srgb,var(--borde) 40%,transparent)}
.capa[aria-selected="true"] .capa__barra{width:11px}

.panel{
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:22px;box-shadow:var(--sombra);
}
.panel[hidden]{display:none!important}
.panel__preg{font-family:var(--sans);font-weight:300;font-size:clamp(1.25rem,2.4vw,1.72rem);line-height:1.36;color:var(--texto)}
.panel__grupo h4,.panel__grupo .panel__et{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:9px;
}
.panel__grupo p{font-size:.98rem;color:var(--texto-suave);line-height:1.62}
.fichas{display:flex;flex-wrap:wrap;gap:7px}
.ficha{
  font-size:.78rem;padding:5px 11px;border:1px solid var(--borde);border-radius:100px;
  color:var(--texto-suave);background:var(--fondo);
}
.panel__nota{
  font-size:.88rem;color:var(--texto-suave);border-top:1px solid var(--borde);padding-top:16px;line-height:1.6;
}

/* ---------- 10. Autodiagnóstico ----------------------------------------- */
.diag{
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);
  box-shadow:var(--sombra);overflow:hidden;
}
.diag__cabeza{padding:clamp(22px,3vw,32px);border-bottom:1px solid var(--borde);display:flex;flex-direction:column;gap:10px}
.diag__cuerpo{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:26px}
.preg{display:flex;flex-direction:column;gap:12px}
.preg__txt{font-weight:600;font-size:1.02rem;line-height:1.4;letter-spacing:-.01em}
.preg__capa{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.escala{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.escala label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--borde);border-radius:var(--radio);padding:11px 8px;
  font-size:.84rem;line-height:1.25;cursor:pointer;color:var(--texto-suave);
  transition:border-color .15s,background-color .15s,color .15s;min-height:56px;
}
.escala input{position:absolute;opacity:0;width:1px;height:1px}
.escala label:hover{border-color:var(--gris-claro)}
.escala label:has(input:checked),.escala label.marcada{
  border-color:var(--azul-hondo);background:var(--azul-hondo);color:#fff;font-weight:600;
}
.escala label:has(input:focus-visible){outline:2.5px solid var(--azul);outline-offset:3px}
@media (max-width:620px){.escala{grid-template-columns:repeat(2,1fr)}}

.diag__pie{padding:clamp(20px,3vw,28px);border-top:1px solid var(--borde);background:var(--fondo-alt);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.diag__aviso{font-size:.84rem;color:var(--texto-suave);max-width:46ch}

.resultado{padding:clamp(22px,3vw,32px);border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:22px}
.resultado[hidden]{display:none!important}
.barras{display:flex;flex-direction:column;gap:13px}
.barra{display:grid;grid-template-columns:118px 1fr 42px;gap:12px;align-items:center;font-size:.88rem}
.barra__nombre{font-weight:600;letter-spacing:-.005em}
.barra__riel{height:9px;border-radius:5px;background:var(--fondo-alt);overflow:hidden;border:1px solid var(--borde)}
.barra__valor{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.2,.7,.3,1)}
.barra__pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto-suave);font-size:.82rem}
.barra[data-capa="persona"] .barra__valor{background:var(--azul)}
.barra[data-capa="liderazgo"] .barra__valor{background:var(--azul-medio)}
.barra[data-capa="equipo"] .barra__valor{background:var(--azul-hondo)}
.barra[data-capa="organizacion"] .barra__valor{background:var(--azul-hondo)}
@media (max-width:560px){.barra{grid-template-columns:96px 1fr 38px;font-size:.82rem}}
.lectura{
  border-left:3px solid var(--azul-hondo);padding:4px 0 4px 18px;font-size:1.02rem;line-height:1.55;
}
.lectura b{font-weight:700}

/* ---------- 11. Itinerario ---------------------------------------------- */
.itinerario{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.itinerario{grid-template-columns:1fr}}
.paso{
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);
  padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;
}
.paso--foco{border-color:var(--azul-hondo);box-shadow:0 0 0 1px var(--azul-hondo),var(--sombra)}
.paso__orden{
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--texto-suave);
  display:flex;align-items:center;gap:9px;
}
.paso__orden b{
  width:22px;height:22px;border-radius:50%;background:var(--azul-hondo);color:#fff;
  display:grid;place-items:center;font-size:.7rem;flex:none;
}
.paso--foco .paso__orden b{background:var(--azul-hondo)}
.paso h3{letter-spacing:-.018em}
.paso__meta{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);font-weight:600}
.paso__desc{font-size:.94rem;color:var(--texto-suave);line-height:1.6}
.paso__salida{
  font-family:var(--sans);font-weight:300;font-size:1.06rem;line-height:1.48;color:var(--texto);
  border-top:1px solid var(--borde);padding-top:14px;margin-top:auto;
}

/* ---------- 12. Rejillas de servicios y principios ---------------------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.rejilla > *{background:var(--fondo);padding:26px 24px;display:flex;flex-direction:column;gap:11px}
.seccion--alt .rejilla > *{background:var(--fondo-alt)}
.rejilla h3{font-size:1.08rem}
.rejilla p{font-size:.93rem;color:var(--texto-suave);line-height:1.6}
.rejilla__idx{font-size:.68rem;font-weight:700;letter-spacing:.14em;color:var(--acento-tierra);font-variant-numeric:tabular-nums}

/* ---------- 13. Quiénes somos ------------------------------------------- */
.perfiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.5vw,44px)}
@media (max-width:760px){.perfiles{grid-template-columns:1fr}}
.perfil{display:flex;flex-direction:column;gap:18px}
.perfil__foto{
  aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:var(--radio);
  background:var(--fondo-alt);position:relative;
}
.perfil__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.perfil__foto::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;display:block}
.perfil--f .perfil__foto::after{background:var(--azul-hondo)}
.perfil--fl .perfil__foto::after{background:var(--azul-medio)}
.perfil h3{font-size:1.28rem}
.perfil__rol{font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acento);font-weight:600;margin-top:4px}
.perfil__bio{font-size:.95rem;color:var(--texto-suave);line-height:1.65}
.perfil__preg{
  font-family:var(--sans);font-weight:300;font-size:1.12rem;line-height:1.48;
  border-left:3px solid var(--borde);padding-left:16px;color:var(--texto);
}
.perfil__mira{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:6px}
/* Redes: discretas, con la misma flecha que el resto de la web */
.perfil__redes{display:flex;flex-wrap:wrap;gap:8px 22px}
.perfil__redes a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--acento);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.perfil__redes a:hover,.perfil__redes a:focus-visible{border-bottom-color:currentColor}
.entrada__autor a{color:inherit;text-decoration:none;border-bottom:1px solid var(--borde)}
.entrada__autor a:hover,.entrada__autor a:focus-visible{border-bottom-color:currentColor}

/* ---------- 14. Banda oscura -------------------------------------------- */
.oscuro{background:var(--tinta);color:#EAF6F8}
.oscuro .rotulo{color:var(--azul-cielo)}
.oscuro .rotulo::before{background:var(--arcilla)}
.oscuro h2{color:#FFFFFF}
.oscuro .texto{color:#C6E1E8}
.oscuro .texto strong{color:#FFFFFF}
.oscuro .sombrero{color:#C6E1E8}

.afirmaciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.afirmaciones > div{background:var(--tinta);padding:24px;display:flex;flex-direction:column;gap:9px}
.afirmaciones b{color:var(--azul-claro);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.afirmaciones p{font-size:1rem;line-height:1.45;color:#DCEFF3;letter-spacing:-.008em}

/* ---------- 15. Blog ----------------------------------------------------- */
.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(18px,2.6vw,28px)}
.entrada{
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);
  padding:24px;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.entrada:hover{border-color:var(--gris-claro);transform:translateY(-2px);box-shadow:var(--sombra)}
.entrada__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.79rem;letter-spacing:.06em;color:var(--texto-suave)}
.entrada__tema{
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento-tierra);
}
.entrada__autor{font-weight:600;color:var(--texto)}

/* Manifiesto de apertura del blog: es una voz, no una sección más,
   de ahí el filete lateral y la serif. */
.manifiesto{
  display:flex;flex-direction:column;gap:14px;margin-top:clamp(12px,2vw,20px);
  padding-left:clamp(18px,2.5vw,28px);border-left:2px solid var(--acento-forma);
}
.manifiesto > p:not(.rotulo){
  font-family:var(--sans);font-size:1.04rem;line-height:1.62;
  color:var(--texto);letter-spacing:-.005em;text-wrap:pretty;
}
/* Misma especificidad que la regla de arriba y declarada después: gana sin !important */
.manifiesto > p.manifiesto__firma{
  margin-top:6px;
  font-family:var(--firma);font-size:1.45rem;font-weight:400;line-height:1.25;
  letter-spacing:0;text-transform:none;color:var(--acento);
}
.entrada h3{font-size:1.16rem;line-height:1.24}
.entrada p{font-size:.93rem;color:var(--texto-suave);line-height:1.6}
.entrada__leer{margin-top:auto;padding-top:6px;font-size:.85rem;font-weight:600;color:var(--acento);display:inline-flex;align-items:center;gap:7px}

/* Artículo */
.articulo{padding-block:clamp(40px,6vw,72px)}
.articulo__cabeza{max-width:var(--ancho-texto);display:flex;flex-direction:column;gap:18px}
.articulo__cuerpo{max-width:var(--ancho-texto);margin-top:clamp(30px,4vw,46px)}
.articulo__cuerpo h2{font-size:clamp(1.3rem,2.6vw,1.72rem);margin-top:1.9em;margin-bottom:.5em}
.articulo__cuerpo h3{margin-top:1.6em;margin-bottom:.4em}
.articulo__cuerpo p{margin-bottom:1.15em;color:var(--texto-suave);line-height:1.76;font-size:1.04rem}
.articulo__cuerpo p:first-child{font-size:1.16rem;color:var(--texto);line-height:1.62}
.articulo__cuerpo ul{margin:0 0 1.3em;padding-left:1.15em;color:var(--texto-suave);line-height:1.72}
.articulo__cuerpo li{margin-bottom:.45em}
.articulo__cuerpo blockquote{
  margin:1.8em 0;padding-left:clamp(16px,3vw,26px);border-left:3px solid var(--azul-hondo);
  font-family:var(--sans);font-weight:300;font-size:clamp(1.14rem,2.2vw,1.42rem);
  line-height:1.38;color:var(--texto);
}
.articulo__cuerpo blockquote p{font-size:inherit;color:inherit;line-height:inherit;margin:0}
.articulo__cuerpo strong{color:var(--texto);font-weight:600}
.articulo__cuerpo hr{border:0;border-top:1px solid var(--borde);margin:2.4em 0}
.volver{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--acento);text-decoration:none}
.volver:hover{text-decoration:underline}

/* ---------- 16. Contacto ------------------------------------------------ */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(30px,5vw,64px);align-items:start}
@media (max-width:880px){.contacto{grid-template-columns:1fr}}
.datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.datos li{background:var(--tinta);padding:17px 20px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.datos dt,.datos b{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#8FB6C1;min-width:88px;font-weight:700}
.datos a,.datos span{color:#EAF6F8;text-decoration:none;font-size:.98rem}
.datos a:hover{color:var(--azul-claro);text-decoration:underline}

/* ---------- 17. Pie ------------------------------------------------------ */
.pie{background:var(--tinta);color:#9FC2CC;padding-block:44px 32px;font-size:.88rem}
.pie__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media (max-width:760px){.pie__in{grid-template-columns:1fr}}
.pie h4{color:#EAF6F8;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pie a{color:#9FC2CC;text-decoration:none}
.pie a:hover{color:#EAF6F8;text-decoration:underline}
.pie__legal{
  border-top:1px solid rgba(255,255,255,.13);margin-top:32px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.82rem;color:#9FC2CC;
}
.pie .marca__txt{color:#EAF6F8}
.pie__fundae{font-size:.84rem;color:#8FB6C1;line-height:1.6;max-width:44ch;margin-top:12px}

/* ---------- 18. Aparición suave ----------------------------------------- */
.aparece{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .js .aparece{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .js .aparece.visible{opacity:1;transform:none}
}

/* ---------- 19. Utilidades ---------------------------------------------- */
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:12px 18px;z-index:200;
}
.saltar:focus{left:12px;top:12px}

/* ---------- 20. Clases de apoyo ------------------------------------------
   La política de seguridad del sitio (CSP: style-src 'self') prohíbe los
   atributos style="..." en el HTML. Todo estilo puntual vive aquí.
   ------------------------------------------------------------------------ */
.mt-sm{margin-top:6px}
.der{justify-content:flex-end}
.ancho-26{max-width:26ch}
.ancho-30{max-width:30ch}
.ancho-56{max-width:56ch}
.ancho-62{max-width:62ch}
.parrafo-grande--tinta{color:var(--texto)}
.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.acciones--art{margin-top:28px}
.rejilla--1{grid-template-columns:1fr}
.figura{margin:0}
.redondo{border-radius:var(--radio)}
.pie-figura{font-size:.88rem;line-height:1.5;color:var(--texto-suave)}
.cita--azul{border-color:var(--azul-medio)}
.dos--abajo{align-items:end}
.estratos--pie{margin-bottom:34px}
.estratos--art{margin-top:34px}
.seccion--sin-pie{padding-bottom:0}
.nav--der{margin-left:auto}
.marca--pie{color:#EAF6F8;margin-bottom:16px}
.marca__logo--pie{height:44px}
.pie__legal--solo{border:0;margin:0;padding:0}
.lectura__pie{display:block;margin-top:12px;font-size:.88rem;color:var(--texto-suave)}
.preg{border:0;margin:0;padding:0;min-inline-size:0}
.preg legend{padding:0;display:contents}

/* Afirmaciones sobre fondo claro (sección del modelo) */
.afirmaciones--claro{background:var(--borde);border-color:var(--borde)}
.afirmaciones--claro > div{background:var(--fondo-alt)}
.afirmaciones--claro b{color:var(--acento-tierra)}
.afirmaciones--claro p{color:var(--texto)}

/* Pasos del itinerario sobre banda oscura */
.paso--oscuro{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#EAF6F8}
.paso--oscuro.paso--foco{background:rgba(255,255,255,.055);border-color:var(--azul-hondo)}
.paso--oscuro .paso__orden{color:#9FC2CC}
.paso--oscuro h3{color:#FFFFFF}
.paso--oscuro .paso__desc{color:#C6E1E8}
.paso--oscuro .paso__salida{color:#EAF6F8;border-color:rgba(255,255,255,.16)}
.paso__meta--cielo{color:var(--azul-cielo)}
.paso__meta--tierra{color:var(--azul-claro)}

/* ---------- 21. Foto de apoyo dentro de una columna de texto -------------
   Misma proporción que los retratos de "Quiénes somos" (4:5) y rematada con
   la franja de estratos, para que pertenezca al sistema en lugar de flotar.
   La columna reparte el espacio para acabar a la altura del texto vecino.
   ------------------------------------------------------------------------ */
.dos--alineado{align-items:stretch}
.dos--alineado > .columna-foto{justify-content:space-between;gap:36px}

.apoyo{margin:0;max-width:330px}
.apoyo picture{display:block}
.apoyo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.apoyo .estratos{height:4px}
.apoyo figcaption{
  margin-top:14px;font-size:.88rem;line-height:1.5;color:var(--texto-suave);max-width:36ch;
}
@media (max-width:900px){
  .dos--alineado{align-items:start}
  .dos--alineado > .columna-foto{gap:24px}
  .apoyo{max-width:260px}
}
/* La cita vive dentro de la columna de texto: cierra el bloque y evita que
   quede un hueco vacío al lado de la foto. */
.cita--en-columna{margin-top:14px}
.cita--en-columna .voz{font-size:clamp(1.18rem,2.1vw,1.55rem)}

/* ---------- 22. Autodiagnóstico: una pregunta cada vez --------------------
   Ocho preguntas en el hueco de una. La caja mantiene una altura mínima para
   que no salte al cambiar de pregunta.
   ------------------------------------------------------------------------ */
.progreso{display:flex;flex-direction:column;gap:9px}
.progreso__riel{height:4px;border-radius:3px;background:var(--fondo-alt);border:1px solid var(--borde);overflow:hidden}
.progreso__valor{
  display:block;height:100%;width:12.5%;background:var(--azul-hondo);
  transition:width .38s cubic-bezier(.2,.7,.3,1);
}
.progreso__txt{
  display:flex;gap:14px;align-items:center;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-claro);font-variant-numeric:tabular-nums;
}
.progreso__capa{color:var(--acento)}

#preguntas{min-height:172px;display:flex;align-items:center}
#preguntas .preg{width:100%;gap:18px}
#preguntas .preg__txt{font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.4;font-weight:600}
@media (prefers-reduced-motion: no-preference){
  #preguntas .preg{animation:entra-preg .3s ease both}
}
@keyframes entra-preg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.diag__nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#btn-atras[disabled]{opacity:.35;cursor:default;transform:none}
#btn-atras[disabled]:hover{transform:none;border-color:var(--borde)}
.btn .flecha-izq{transition:transform .18s}
.btn:hover .flecha-izq{transform:translateX(-3px)}
.diag__pie{justify-content:space-between}
@media (max-width:620px){
  #preguntas{min-height:210px}
  .diag__nav > .btn{flex:1 1 auto}
}

/* ---------- 23. El entregable (20 preguntas a cambio del correo) ---------- */
.entregable{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;
  background:var(--superficie);box-shadow:var(--sombra);
}
.entregable[hidden]{display:none!important}
.entregable__texto{padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:16px}
.entregable__texto h3{font-size:clamp(1.14rem,2.1vw,1.46rem)}
.entregable__lista{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.entregable__lista li{
  position:relative;padding-left:24px;font-size:.92rem;line-height:1.5;color:var(--texto-suave);
}
.entregable__lista li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--acento-forma);
}

.entregable__caja{
  background:var(--tinta);color:#EAF6F8;
  padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:18px;
}
.entregable__titulo{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-claro);
}
.campos{display:flex;flex-direction:column;gap:15px}
.campos[hidden]{display:none!important}
.campo{display:flex;flex-direction:column;gap:6px;margin:0}
.campo label{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FB6C1;
}
.campo input[type="text"],.campo input[type="email"]{
  font-family:inherit;font-size:.96rem;padding:11px 13px;width:100%;
  border-radius:var(--radio);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#EAF6F8;
}
.campo input::placeholder{color:#7D93A1}
.campo input[type="text"]:focus,.campo input[type="email"]:focus{
  outline:none;border-color:var(--azul-cielo);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(156,197,216,.22);
}
.campo--check{flex-direction:row;gap:11px;align-items:flex-start}
.campo--check input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--azul-claro)}
.campo--check label{
  text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:400;
  line-height:1.5;color:#C6E1E8;
}
.campo__error{font-size:.86rem;color:#F0A87E;margin:0}
.campo__error[hidden]{display:none!important}
.entregable__nota{font-size:.82rem;line-height:1.55;color:#8FB6C1;margin:0}
.entregable__ok{display:flex;flex-direction:column;gap:14px}
.entregable__ok[hidden]{display:none!important}
.entregable__ok .texto{color:#C6E1E8;font-size:.95rem}

@media (max-width:860px){
  .entregable{grid-template-columns:1fr}
}

/* Variante apaisada de la foto de apoyo (sección de servicios) */
.apoyo--ancha{max-width:100%;margin-top:6px}
.apoyo--ancha img{aspect-ratio:4/3}
.apoyo--ancha figcaption{max-width:52ch}

/* ---------- 24. Foto dentro de la rejilla de servicios -------------------
   Seis tarjetas en cuatro columnas dejan dos celdas libres en la segunda
   fila: ahí va la foto, ocupándolas. Las columnas se fijan por tramos para
   que el hueco sea siempre el mismo y la foto encaje.
   ------------------------------------------------------------------------ */
.rejilla--servicios{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla > .rejilla__foto{
  grid-column:span 2;
  padding:0;margin:0;display:block;position:relative;overflow:hidden;
  min-height:210px;background:var(--tinta);
}
.rejilla__foto picture{display:block;position:absolute;inset:0}
.rejilla__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.rejilla__foto figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;
  padding:40px 22px 20px;
  background:linear-gradient(0deg,rgba(13,49,58,.93) 0%,rgba(13,49,58,.7) 55%,rgba(13,49,58,0) 100%);
  color:#EAF6F8;font-size:.89rem;line-height:1.5;text-wrap:pretty;
}
.rejilla__foto .estratos{position:absolute;inset:auto 0 0 0;z-index:2;height:4px}

@media (max-width:1040px){
  .rejilla--servicios{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rejilla > .rejilla__foto{grid-column:span 3;min-height:230px}
}
@media (max-width:800px){
  .rejilla--servicios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla > .rejilla__foto{grid-column:span 2}
}
@media (max-width:540px){
  .rejilla--servicios{grid-template-columns:1fr}
  .rejilla > .rejilla__foto{grid-column:span 1;min-height:240px}
}

/* ---------- 25. Lo que ayudamos a conseguir ------------------------------
   Sin filetes ni cajas, a diferencia de las otras listas: son resultados,
   no un inventario. Lo que los separa es el aire.
   ------------------------------------------------------------------------ */
.logros{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,44px);
}
.logros li{
  position:relative;padding-left:32px;
  font-size:1.05rem;line-height:1.5;color:var(--texto-suave);
}
.logros li::before{
  content:"→";position:absolute;left:0;top:0;
  color:var(--acento-tierra);font-size:1.05rem;line-height:1.5;
}
.logros strong{color:var(--texto);font-weight:600;letter-spacing:-.006em}
@media (max-width:900px){.logros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.logros{grid-template-columns:1fr;gap:20px}}

/* ---------- 26. Jerarquía de botones -------------------------------------
   primario (marrón) → la acción principal: «Hablemos de vuestro proceso»
   claro / línea      → la acción secundaria: «Hacer el autodiagnóstico»
   azul               → sólo dentro de formularios (enviar, descargar)
   ------------------------------------------------------------------------ */

/* ---------- 27. Los principios del modelo --------------------------------
   Cuatro máximas, no cuatro tarjetas. Cada una con su propio rótulo (antes
   las cuatro decían «Principio») y compuestas en la serif del sitio, para
   que se lean como voz y no como inventario.
   ------------------------------------------------------------------------ */
.principios{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
}
/* Filete del mismo color en los cuatro: usar los colores de las capas aquí
   sugeriría que cada principio pertenece a una capa, y no es así. */
.principios > div{
  display:flex;flex-direction:column;gap:12px;
  padding-top:16px;border-top:2px solid var(--acento-forma);
}
.principios b{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);
}
.principios p{
  font-family:var(--sans);font-size:1.06rem;line-height:1.45;
  color:var(--texto);letter-spacing:-.005em;text-wrap:pretty;
}
@media (max-width:1000px){.principios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.principios{grid-template-columns:1fr;gap:22px}}

/* ---------- 28. Podcast ---------------------------------------------------
   La lista de episodios es deliberadamente distinta de la del blog: allí son
   fichas encajonadas, aquí una columna con el número grande. Dos listados
   seguidos con el mismo tratamiento se leen como «más de lo mismo».
   ------------------------------------------------------------------------- */
.plataformas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.plataformas--art{margin-top:clamp(18px,2.5vw,26px)}
.plataformas__rotulo{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave);
}
.plataforma{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border:1px solid var(--borde);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--texto);text-decoration:none;
  transition:border-color .15s,color .15s;
}
.plataforma:hover,.plataforma:focus-visible{border-color:var(--acento);color:var(--acento)}
.plataformas__aviso{font-size:.9rem;color:var(--texto-suave);font-weight:300}

.episodios{display:flex;flex-direction:column}
.episodio{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  align-items:start;padding:clamp(22px,3vw,30px) 0;
  border-top:1px solid var(--borde);text-decoration:none;color:inherit;
}
.episodio:last-child{border-bottom:1px solid var(--borde)}
.episodio__num{
  font-family:var(--display);font-size:clamp(2.2rem,5vw,3.1rem);line-height:.9;
  color:var(--acento-forma);opacity:.5;transition:opacity .15s;
}
.episodio:hover .episodio__num,.episodio:focus-visible .episodio__num{opacity:1}
.episodio__cuerpo{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.episodio__cuerpo h3{font-size:clamp(1.12rem,2.2vw,1.32rem);line-height:1.25}
.episodio__cuerpo > p{font-size:.94rem;color:var(--texto-suave);line-height:1.6}
.episodio__marca{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento);border:1px solid var(--acento-forma);
  border-radius:4px;padding:2px 7px;
}

/* Fachada del vídeo: miniatura propia; el iframe se crea al pulsar */
.video{
  margin:clamp(26px,4vw,40px) 0 0;max-width:var(--ancho-texto);
  display:grid;grid-template-rows:auto auto;
}
.video__foto,.video__marco,.video__play{grid-row:1;grid-column:1}
.video__foto,.video__marco{
  width:100%;aspect-ratio:16/9;display:block;border:0;
  border-radius:var(--radio);background:var(--tinta);object-fit:cover;
}
.video__play{
  justify-self:center;align-self:center;z-index:1;
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 24px;border:0;border-radius:999px;cursor:pointer;
  background:var(--papel);color:var(--tinta);font-family:inherit;
  font-size:.92rem;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--sombra);transition:transform .15s;
}
.video__play:hover,.video__play:focus-visible{transform:scale(1.04)}
.video__icono{font-size:.8rem;color:var(--acento-forma)}
.video__play[disabled]{cursor:default;opacity:.85;box-shadow:none;transform:none}
.video__nota{
  grid-row:2;grid-column:1;margin-top:10px;
  font-size:.8rem;color:var(--texto-suave);line-height:1.5;
}
@media (max-width:560px){
  .episodio{grid-template-columns:1fr;gap:10px}
  .episodio__num{font-size:1.6rem}
}
/* La fila de plataformas va pegada al texto de arriba, no a media pantalla */
.seccion--ajustada{padding-top:clamp(18px,2.5vw,28px)}

/* ---------- 29. v2 · Las dos puertas --------------------------------------
   El comprador tiene que reconocerse en menos de cinco segundos. Por eso
   las frases son citas literales y no descripciones de servicio.
   ------------------------------------------------------------------------- */
.puertas{display:flex;flex-direction:column;gap:clamp(22px,3vw,32px)}
.puertas__selector{display:flex;flex-wrap:wrap;gap:12px}
.puerta{
  flex:1 1 260px;display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:16px 20px;border:1px solid var(--borde);border-radius:var(--radio);
  background:none;cursor:pointer;font-family:inherit;color:var(--texto-suave);
  transition:border-color .15s,color .15s,background-color .15s;
}
.puerta__rol{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.puerta__sub{font-size:.8rem;letter-spacing:.04em}
.puerta[aria-selected="true"]{
  border-color:var(--azul-hondo);background:var(--azul-hondo);color:#EAF6F8;
}
.puerta[aria-selected="true"] .puerta__sub{color:#B9D2E0}
.puerta:hover:not([aria-selected="true"]){border-color:var(--acento);color:var(--texto)}

.dolores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.dolores li{
  font-family:var(--sans);font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.45;
  color:var(--texto);padding-left:18px;border-left:3px solid var(--acento-forma);
  text-wrap:pretty;
}
.puerta__cierre{
  margin-top:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:14px;
  padding-top:clamp(20px,3vw,26px);border-top:1px solid var(--borde);
}
.puerta__juego,.puerta__paso{font-size:.97rem;line-height:1.65;color:var(--texto);max-width:74ch}
.puerta__juego b,.puerta__paso b{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:4px;
}
@media (max-width:700px){.dolores{grid-template-columns:1fr}}

/* ---------- 30. v2 · La oferta -------------------------------------------- */
.oferta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,26px);align-items:start}
.producto{
  display:flex;flex-direction:column;gap:14px;height:100%;
  padding:clamp(22px,3vw,30px);border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--papel);
}
.producto--foco{border-color:var(--acento-forma);box-shadow:var(--sombra)}
.producto__etiqueta{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento-tierra);
}
.producto h3{font-size:clamp(1.14rem,2vw,1.3rem);line-height:1.22}
.producto__pitch{font-size:.96rem;line-height:1.6;color:var(--texto)}
.producto__datos{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.producto__datos > div{display:flex;flex-direction:column;gap:3px}
.producto__datos dt{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);
}
.producto__datos dd{margin:0;font-size:.9rem;line-height:1.55;color:var(--texto-suave)}
.producto .btn{margin-top:auto;align-self:flex-start}
.oferta__nota{
  margin-top:clamp(20px,3vw,28px);max-width:74ch;
  font-family:var(--sans);font-size:1.06rem;line-height:1.5;color:var(--texto);
}
@media (max-width:980px){.oferta{grid-template-columns:1fr}}

/* ---------- 31. v2 · Pruebas y credenciales ------------------------------- */
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,26px)}
.testimonio{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.6vw,28px);border:1px solid var(--borde);border-radius:var(--radio)}
.testimonio__txt{font-family:var(--sans);font-size:1.06rem;line-height:1.5;color:var(--texto);text-wrap:pretty}
.testimonio__quien{margin-top:auto;font-size:.84rem;line-height:1.45;color:var(--texto-suave)}
.testimonio__quien b{display:block;color:var(--texto);font-size:.9rem}
.testimonio__origen{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-claro)}
.clientes{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding-top:10px}
.clientes__rotulo{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.clientes span:not(.clientes__rotulo){font-size:1rem;font-weight:600;color:var(--texto)}

.credenciales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,32px)}
.credenciales li{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:2px solid var(--azul-hondo)}
.credenciales b{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.credenciales span{font-size:.94rem;line-height:1.6;color:var(--texto)}
@media (max-width:1000px){.credenciales{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.credenciales{grid-template-columns:1fr}}

/* ---------- 32. v2 · Objeciones ------------------------------------------- */
.faq{max-width:82ch;border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-size:clamp(1rem,1.8vw,1.12rem);font-weight:600;line-height:1.35;color:var(--texto);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:400;color:var(--acento-forma);
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--acento)}
.faq details > div{padding:0 40px 22px 0;display:flex;flex-direction:column;gap:12px}
.faq details p{font-size:.97rem;line-height:1.7;color:var(--texto-suave)}

/* ---------- 33. v2 · Formulario de cualificación -------------------------- */
.formulario{display:flex;flex-direction:column;gap:16px;max-width:760px}
.formulario__fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.formulario .campo{display:flex;flex-direction:column;gap:6px}
.formulario label{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#C6E1E8}
.formulario input[type="text"],.formulario input[type="email"],
.formulario select,.formulario textarea{
  font-family:inherit;font-size:.95rem;color:#EAF6F8;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radio);padding:11px 13px;width:100%;
}
.formulario textarea{resize:vertical;min-height:96px;line-height:1.55}
.formulario select option{color:#0D313A;background:#FAF7F2}
.formulario input:focus-visible,.formulario select:focus-visible,.formulario textarea:focus-visible{
  outline:2px solid var(--azul-cielo);outline-offset:1px;border-color:transparent;
}
.campo__ayuda{font-size:.79rem;line-height:1.5;color:#8FB6C1}
.formulario .campo--check{flex-direction:row;align-items:flex-start;gap:10px}
.formulario .campo--check label{font-size:.82rem;font-weight:400;line-height:1.5;color:#C6E1E8}
.formulario__ok{padding:clamp(22px,3vw,30px);border:1px solid rgba(255,255,255,.22);border-radius:var(--radio)}
@media (max-width:700px){.formulario__fila{grid-template-columns:1fr}}

/* ---------- 34. v2 · Cabecera que vende ----------------------------------
   Un botón permanente arriba: en una página comercial, el visitante que se
   decide a la mitad no debería tener que buscar por dónde escribir.
   ------------------------------------------------------------------------- */
/* En escritorio la acción principal va a la derecha del todo, después del
   menú: es donde termina la lectura. En móvil, el orden lo fija el bloque
   de la cabecera plegada (más abajo), y ahí el botón se oculta. */
.cabecera__in{justify-content:space-between}
.nav{order:2;margin-left:auto}
.cabecera__acciones{order:3}
.nav a{white-space:nowrap}
/* Con la página de servicios el menú tiene nueve entradas. Entre 1141 y 1400
   caben en una línea, pero justas: se aprietan antes que partirse en dos
   líneas o desbordar la cabecera. Por debajo de 1141 se pliega en el panel de
   la hamburguesa, que es lo que de verdad resuelve el problema. */
@media (min-width:1141px) and (max-width:1400px){
  .cabecera__in{gap:10px}
  .nav{gap:0}
  .nav a{font-size:.79rem;padding:8px 7px}
  .cabecera__acciones{gap:8px;margin-left:4px}
  .cabecera__cta{padding:8px 12px;font-size:.77rem}
}
.cabecera__cta{padding:9px 16px;font-size:.82rem;white-space:nowrap}
.nav__cta{font-weight:700;color:var(--acento)}
@media (max-width:1140px){
  .cabecera__cta{display:none}          /* en el menú desplegado ya está Contacto */
}

/* ---------- 35. La marca como argumento -----------------------------------
   El isotipo son las cuatro capas. Ponerlo junto al modelo hace que el
   logotipo explique algo en lugar de decorar.
   ------------------------------------------------------------------------- */
.marca-modelo{
  margin:clamp(6px,1.2vw,12px) 0 0;display:flex;align-items:center;
  gap:clamp(16px,2.4vw,24px);
}
.marca-modelo img{height:clamp(62px,7vw,82px);width:auto;flex:none}
.marca-modelo figcaption{
  font-size:.92rem;line-height:1.55;color:var(--texto-suave);max-width:42ch;
}
@media (max-width:520px){
  .marca-modelo{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- 36. El logotipo en modo oscuro --------------------------------
   El anillo más profundo del logotipo es casi del color del fondo oscuro, así
   que ahí se sirve la versión en negativo.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cabecera .marca__logo{
    content:url("../logo/enequip-lockup-blanco.png");
  }
}
:root[data-theme="dark"] .cabecera .marca__logo{
  content:url("../logo/enequip-lockup-blanco.png");
}

/* ---------- 37. La llamada principal sobre fondo oscuro -------------------
   Sobre el azul profundo, el botón tierra tiene contraste de sobra y además
   es el único color cálido de la pantalla: se va el ojo solo.
   ------------------------------------------------------------------------- */
.hero .btn--primario:hover,
.webinar .btn--primario:hover,
.oscuro .btn--primario:hover{background:#9C6139;border-color:#9C6139}

/* ---------- 38. Accesibilidad: arreglos de la auditoría --------------------
   Se revisó con una auditoría propia (contraste real compuesto, nombres
   accesibles, etiquetas de formulario, jerarquía de titulares y tamaño de
   los objetivos táctiles). Esto es lo que salió.
   ------------------------------------------------------------------------- */

/* Titulares que existen para los lectores de pantalla pero no se ven */
.oculto-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Los h4 del pie pasaron a h2 para no saltarse niveles: mismo aspecto */
.pie .pie__titulo{
  color:#EAF6F8;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;line-height:1.3;
}

/* Las etiquetas del panel del modelo eran h4 y son etiquetas de campo */
.panel__et{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);margin-bottom:6px;
}

/* Contraste: el rótulo de sección sobre el fondo alterno daba 4,2:1 y la
   norma pide 4,5:1 para texto pequeño. Con el azul profundo son 6,8:1. */
.rotulo{color:var(--azul-hondo)}
.oscuro .rotulo{color:var(--azul-cielo)}
/* Los números de la cuenta atrás y el gris claro, por lo mismo */
.cuenta small{color:#C6E1E8}
:root{--gris-claro:#4E6B73}

/* WCAG 2.2: los objetivos que se pulsan, 24x24 como mínimo */
.nav a{padding-block:6px}
.volver{padding-block:4px}
.campo--check input[type="checkbox"],
.formulario .campo--check input[type="checkbox"]{
  width:24px;height:24px;flex:none;accent-color:var(--tierra);margin-top:-2px;
}

/* ---------- 39. Página legal ----------------------------------------------
   Un documento legal que no se puede leer no protege de nada: medida de
   línea corta, jerarquía clara y tablas que se pueden recorrer en el móvil.
   ------------------------------------------------------------------------- */
.indice-legal{display:flex;flex-wrap:wrap;gap:10px 18px}
.indice-legal a{
  font-size:.86rem;font-weight:600;color:var(--acento);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:4px;
}
.indice-legal a:hover,.indice-legal a:focus-visible{border-bottom-color:currentColor}

.legal{max-width:76ch;padding-block:clamp(30px,4vw,48px) clamp(50px,7vw,90px)}
.legal section + section{margin-top:clamp(44px,6vw,72px);padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--borde)}
.legal h2{font-size:clamp(1.4rem,2.8vw,1.95rem);margin-bottom:.7em;scroll-margin-top:90px}
.legal h3{font-size:1.05rem;margin:1.9em 0 .55em}
.legal p,.legal li{font-size:.99rem;line-height:1.75;color:var(--texto-suave)}
.legal p + p{margin-top:.9em}
.legal strong{color:var(--texto);font-weight:600}
.legal ul,.legal ol{margin:.6em 0 0;padding-left:1.25em;display:flex;flex-direction:column;gap:.5em}
.legal code{
  font-family:var(--mono);font-size:.86em;background:var(--fondo-alt);
  padding:1px 6px;border-radius:4px;color:var(--texto);
}
.legal__nota{
  font-size:.88rem!important;border-left:2px solid var(--borde);
  padding-left:14px;color:var(--gris-claro);
}
.legal__destacado{
  margin:1.2em 0 .6em;padding:clamp(16px,2.4vw,22px);
  border:1px solid var(--borde);border-left:3px solid var(--acento-tierra);
  border-radius:var(--radio);background:var(--fondo-alt);
}
.legal__destacado p{color:var(--texto)}

.tabla-envoltura{overflow-x:auto;margin:1em 0 .4em;-webkit-overflow-scrolling:touch}
.tabla-legal{border-collapse:collapse;width:100%;min-width:620px;font-size:.88rem}
.tabla-legal th,.tabla-legal td{
  text-align:left;vertical-align:top;padding:11px 14px;
  border-bottom:1px solid var(--borde);line-height:1.5;
}
.tabla-legal thead th{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto);border-bottom:2px solid var(--acento-tierra);white-space:nowrap;
}
.tabla-legal tbody th{color:var(--texto);font-weight:600;width:22%}
.tabla-legal td{color:var(--texto-suave)}

/* El aviso corto de privacidad que va junto a cada formulario */
.aviso-datos{
  font-size:.82rem;line-height:1.6;color:var(--texto-suave);
  border-left:2px solid var(--borde);padding-left:14px;max-width:70ch;
}
.oscuro .aviso-datos{color:#9FC2CC;border-left-color:rgba(255,255,255,.22)}
.aviso-datos a{color:inherit;text-decoration:underline}
.oscuro .aviso-datos a{color:#C6E1E8}

/* Auditoría, segunda vuelta */
/* El rótulo sobre la portada oscura: el azul profundo daba 1,9:1 */
.hero .rotulo,.webinar .rotulo{color:var(--azul-cielo)}
/* Los enlaces en lista del pie no son «texto en una frase»: necesitan 24 px */
.pie li a{display:inline-block;padding-block:4px}

/* ---------- 40. La secuencia del recorrido --------------------------------
   Antes era un titular con flechas dentro y se partía por donde no debía.
   Ahora cada paso es una pieza que no se rompe: si no cabe, salta entera.
   ------------------------------------------------------------------------- */
.secuencia{display:flex;flex-wrap:wrap;align-items:baseline;gap:.12em .55em}
.secuencia span{display:inline-flex;align-items:baseline;white-space:nowrap}
.secuencia span + span::before{
  content:"→";margin-right:.5em;color:var(--azul-cielo);font-size:.72em;
  transform:translateY(-.08em);
}
.oscuro .secuencia span + span::before{color:var(--azul-cielo);opacity:.8}

/* ---------- 41. v3 · Las otras casas --------------------------------------
   Los dos proyectos propios con web aparte. Son tarjetas, no botones: el
   enlace sale fuera del dominio y eso se avisa con la flecha ↗ del texto.
   El filete superior en tierra las separa de las tarjetas de producto, que
   sí son oferta de EnEquip.
   ------------------------------------------------------------------------- */
.casas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,28px);align-items:start;
}
.casa{
  display:flex;flex-direction:column;gap:12px;height:100%;
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--borde);border-top:3px solid var(--acento-forma);
  border-radius:var(--radio);background:var(--superficie);
}
.casa__quien{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento-tierra);
}
.casa h3{
  font-size:clamp(1.12rem,2vw,1.34rem);
  line-height:1.16;letter-spacing:-.014em;word-break:break-word;
}
.casa p{font-size:.96rem;line-height:1.68;color:var(--texto-suave)}
.casa strong{color:var(--texto);font-weight:600}
.casa .btn{margin-top:auto;align-self:flex-start}
@media (max-width:760px){.casas{grid-template-columns:1fr}}

/* Enlace de continuar dentro de una tarjeta de rejilla. Hereda el color del
   texto a propósito: así cumple el contraste en fondo claro, en fondo alterno
   y en modo oscuro sin tener que declarar tres colores distintos. El subrayado
   en tierra es lo que lo señala como enlace. */
.ir{
  margin-top:auto;align-self:flex-start;font-size:.86rem;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--acento-tierra);
  text-underline-offset:4px;padding-block:4px;
}
.ir:hover{text-decoration-thickness:2px}
.ir .flecha{margin-left:.28em}

/* ---------- 42. Corrección de contraste en modo oscuro --------------------
   El rótulo de sección se fijó en azul profundo (#185f70) para cumplir sobre
   el fondo claro alterno. En modo oscuro ese mismo azul daba 2,3:1 contra el
   fondo, muy por debajo del 4,5:1 que pide la norma. Ahí va el azul cielo,
   igual que en las secciones oscuras, y el filete en arcilla.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rotulo{color:var(--azul-cielo)}
  :root:not([data-theme="light"]) .rotulo::before{background:var(--arcilla)}
}
:root[data-theme="dark"] .rotulo{color:var(--azul-cielo)}
:root[data-theme="dark"] .rotulo::before{background:var(--arcilla)}

/* Las tarjetas de producto estaban fijadas en blanco (--papel), que no cambia
   en modo oscuro: quedaban blancas con el texto claro encima, 1,1:1. Usan la
   superficie, que sí se remapea. */
.producto{background:var(--superficie)}

/* El itinerario de la home tiene tres pasos; el de la mediación, cuatro. Con
   la rejilla de tres, el cuarto quedaba solo en una fila. */
.itinerario--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.itinerario--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.itinerario--4{grid-template-columns:1fr}}

/* Las seis piezas son seis: en tres columnas quedan 3+3, sin huecos sueltos. */
.rejilla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rejilla--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rejilla--3{grid-template-columns:1fr}}


/* ---------- 44. v4 · El menú desplegable de «Más servicios» ---------------
   Un solo botón que abre y cierra, sin apertura por hover: en una pantalla
   táctil el hover no existe, y en escritorio un menú que se abre solo al pasar
   por encima se abre cuando nadie lo ha pedido. Se cierra con Escape, al
   pinchar fuera y al salir el foco del grupo.
   ------------------------------------------------------------------------- */
.nav__grupo{position:relative;display:flex;align-items:center}
.nav__padre{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:500;line-height:1.35;
  color:var(--texto-suave);
  /* 6 px arriba y abajo, como los enlaces de al lado: así el botón tiene
     exactamente la misma caja y el menú queda alineado. */
  padding:6px 11px;border-radius:var(--radio);white-space:nowrap;
  transition:color .15s,background-color .15s;
}
.nav__padre:hover,.nav__padre[aria-expanded="true"],.nav__padre--activo{
  color:var(--texto);background:color-mix(in srgb,var(--borde) 45%,transparent);
}
.nav__chevron{display:block;flex:none;transition:transform .18s}
.nav__padre[aria-expanded="true"] .nav__chevron{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:250px;margin:0;padding:6px;list-style:none;
  display:flex;flex-direction:column;gap:1px;
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);box-shadow:var(--sombra);
}
.submenu[hidden]{display:none}
.submenu a{
  display:block;padding:9px 12px;border-radius:4px;
  font-size:.86rem;font-weight:500;color:var(--texto-suave);text-decoration:none;
  white-space:nowrap;transition:color .15s,background-color .15s;
}
.submenu a:hover,.submenu a:focus-visible{
  color:var(--texto);background:var(--fondo-alt);
}
.submenu__pie{margin-top:5px;padding-top:6px;border-top:1px solid var(--borde)}
.submenu__pie a{font-weight:700;color:var(--acento)}

/* Dentro del panel plegado el submenú no flota: se despliega en la lista. */
@media (max-width:1140px){
  .nav__grupo{display:block}
  .nav__padre{
    width:100%;justify-content:space-between;
    padding:13px 4px;font-size:1rem;border-bottom:1px solid var(--borde);
    border-radius:0;
  }
  .nav__padre:hover,.nav__padre[aria-expanded="true"],.nav__padre--activo{background:none}
  .submenu{
    position:static;min-width:0;border:0;box-shadow:none;background:none;
    padding:0 0 10px 14px;margin:0;border-left:2px solid var(--borde);
    border-radius:0;
  }
  .submenu a{padding:11px 8px;font-size:.95rem}
}

/* Entre 1141 y 1400 el menú se aprieta: el botón se aprieta con él. */
@media (min-width:1141px) and (max-width:1400px){
  .nav__padre{font-size:.79rem;padding:6px 7px;gap:5px}
}

/* El enlace a la web de quien firma el testimonio. Hereda el color del texto
   para que cumpla el contraste en cualquier fondo, y el subrayado en tierra es
   lo que lo señala como enlace. 24 px de alto para la norma de objetivos. */
.testimonio__web{
  align-self:flex-start;font-size:.8rem;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--acento-tierra);
  text-underline-offset:4px;padding-block:4px;
}
.testimonio__web:hover{text-decoration-thickness:2px}
.testimonio__web .flecha{margin-left:.3em;font-size:.9em}

/* ---------- 45. v4 · El camino de los tres formatos ----------------------
   «Los tres son el mismo camino» es de los mensajes que más venden y estaba
   en letra pequeña de nota al pie. Ahora es un bloque con cuerpo, con la
   misma gramática visual que el resto de recuadros destacados de la web:
   filete en tierra a la izquierda, fondo alterno y nada de colorines.
   ------------------------------------------------------------------------- */
.camino{
  margin:0;padding:clamp(24px,3.4vw,40px);
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);
  border:1px solid var(--borde);border-left:3px solid var(--acento-forma);
  border-radius:var(--radio);background:var(--fondo-alt);
}
.seccion--alt .camino{background:var(--superficie)}
.camino__pasos{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.02rem,1.9vw,1.34rem);letter-spacing:-.018em;
  color:var(--texto);
}
.camino__pasos span + span::before{color:var(--acento-tierra);font-size:.78em}
.camino__txt{
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.62;
  color:var(--texto-suave);max-width:76ch;
}
.camino__txt strong{color:var(--texto);font-weight:600}


/* ---------- 46. v4 · La inscripción al webinar ---------------------------
   El bloque del webinar tiene fondo azul hondo, así que los campos usan los
   estilos claros que ya existen para el formulario del entregable y el de
   contacto (apartado 22): letra clara sobre fondo translúcido. Lo único
   propio de aquí es la caja, la rejilla de cuatro campos y el campo trampa.
   ------------------------------------------------------------------------ */
.inscripcion{
  margin-bottom:clamp(26px,4vw,40px);
  padding:clamp(20px,3vw,28px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radio);
  background:rgba(255,255,255,.06);
  max-width:760px;
}
.inscripcion[hidden]{display:none!important}

.inscripcion__titulo{
  margin:0 0 18px;font-size:1.05rem;font-weight:700;color:#fff;line-height:1.3;
}
.inscripcion__campos{
  display:grid;gap:15px 20px;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:15px;
}
@media (max-width:620px){
  .inscripcion__campos{grid-template-columns:1fr}
}
.inscripcion .campo{margin:0}
.campo__opcional{
  text-transform:none;letter-spacing:0;font-weight:400;font-size:.74rem;
}

/* Los grises claros del formulario del entregable se pensaron para el fondo
   casi negro de aquel bloque. Aquí el fondo es el azul hondo, bastante más
   claro, y esos mismos tonos se quedaban en 2,9:1. Estos llegan a 4,8:1 o
   más, que es lo que pide la norma para texto pequeño. */
.inscripcion .campo label,
.inscripcion .campo__opcional{color:#D9EDF2}
.inscripcion .aviso-datos{color:#D4E9EF}
.inscripcion__nota{color:#CFE6EC}
.inscripcion .campo input::placeholder{color:#B7D3DC}

/* El teléfono es un campo más: el CSS del apartado 22 no lo conocía. */
.campo input[type="tel"]{
  font-family:inherit;font-size:.96rem;padding:11px 13px;width:100%;
  border-radius:var(--radio);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);color:#EAF6F8;
}
.campo input[type="tel"]:focus{
  outline:none;border-color:var(--azul-cielo);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(156,197,216,.22);
}

.inscripcion .campo--check{margin:15px 0 0}
.inscripcion .aviso-datos{margin-top:14px;color:#D4E9EF;border-left-color:rgba(255,255,255,.3)}
.inscripcion .aviso-datos a{color:#C6E1E8}

.inscripcion__pie{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px;
}
.inscripcion__nota{margin:0;font-size:.82rem;line-height:1.5;max-width:34ch}

.inscripcion__ok{display:flex;flex-direction:column;gap:10px}
.inscripcion__ok[hidden]{display:none!important}
.inscripcion__okp{margin:0;color:#C6E1E8;font-size:.95rem;line-height:1.6;max-width:62ch}

/* El campo trampa. No se usa display:none a propósito: hay programas que
   saltan lo que está oculto así, y entonces no picarían. */
.cebo{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  left:-9999px;top:auto;margin:0;
}
.cebo input,.cebo label{width:1px;height:1px;padding:0;border:0;font-size:1px}


/* ---------- 47. v4 · Cabecera de cinco entradas --------------------------
   Con tres desplegables en vez de uno, el elemento destacado del menú de
   «Cómo trabajamos» necesita distinguirse: es la única acción del menú, y
   la que más convierte. Va con el marrón de la marca, que aquí no compite
   con ningún otro acento.
   ------------------------------------------------------------------------ */
.submenu__destacado{margin-top:5px;padding-top:6px;border-top:1px solid var(--borde)}
.submenu__destacado a{
  font-weight:700;color:var(--acento-tierra);
  display:flex;align-items:center;gap:8px;
}
.submenu__destacado a::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--acento-tierra);
}
.submenu__pie + .submenu__destacado,
.submenu__destacado + .submenu__pie{margin-top:0;padding-top:6px}

/* Tres paneles abiertos y cerrados piden que el ancho no baile */
.submenu{min-width:262px}
@media (max-width:1140px){.submenu{min-width:0}}


/* ---------- 48. v4 · Las tres rutas de la portada ------------------------
   Tarjetas enteras que son un enlace. Se usan los colores de las variables,
   nunca valores fijos, para que el modo oscuro salga solo. El tiempo de
   lectura no es un adorno: a quien tiene veinte minutos entre dos reuniones
   le cambia la decisión de «¿me meto en esto?» por «¿tengo cuatro minutos?».
   ------------------------------------------------------------------------ */
.rutas{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rutas{grid-template-columns:1fr}}

.ruta{
  display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 18px;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s;
}
.ruta:hover{
  transform:translateY(-3px);
  box-shadow:var(--sombra);
  border-color:var(--azul-cielo);
}
.ruta:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

.ruta__num{
  font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--azul-cielo);font-variant-numeric:tabular-nums;
}
.ruta__cuerpo{display:flex;flex-direction:column;gap:7px;flex:1}
.ruta__titulo{
  font-size:1.12rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;
  color:var(--azul-hondo);
}
.ruta__txt{font-size:.92rem;line-height:1.6;color:var(--texto-suave)}

.ruta__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;padding-top:12px;border-top:1px solid var(--borde);
}
.ruta__min{
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acento-tierra);
}
.ruta .flecha{color:var(--acento);transition:transform .2s}
.ruta:hover .flecha{transform:translateX(4px)}

/* La tercera es la que convierte: el marrón de la marca la separa sin
   gritar, que es como el resto de la web usa ese color. */
.ruta--destacada{border-color:var(--arena);border-width:2px;padding:21px 21px 17px}
.ruta--destacada .ruta__num{color:var(--arcilla)}
.ruta--destacada:hover{border-color:var(--arcilla)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ruta__titulo{color:var(--azul-cielo)}
  :root:not([data-theme="light"]) .ruta__num{color:#2A6B7C}
  :root:not([data-theme="light"]) .ruta--destacada{border-color:#6B4A30}
  :root:not([data-theme="light"]) .ruta--destacada .ruta__num{color:#8A5C3C}
}
:root[data-theme="dark"] .ruta__titulo{color:var(--azul-cielo)}
:root[data-theme="dark"] .ruta__num{color:#2A6B7C}
:root[data-theme="dark"] .ruta--destacada{border-color:#6B4A30}
:root[data-theme="dark"] .ruta--destacada .ruta__num{color:#8A5C3C}

@media (prefers-reduced-motion: reduce){
  .ruta,.ruta .flecha{transition:none}
  .ruta:hover{transform:none}
  .ruta:hover .flecha{transform:none}
}


/* ---------- 49. v4 · La ventana de «Quiénes somos» en la portada ---------
   Las dos caras pequeñas y al lado quién es quién. Lo que antes ocupaba casi
   dos pantallas aquí cabe en media, y las biografías enteras están a un clic.
   Las personas venden, así que las fotos siguen estando: lo que se va es el
   texto largo, no la cara.
   ------------------------------------------------------------------------ */
.quienes{display:grid;gap:26px 34px;align-items:center}
@media (min-width:860px){
  .quienes{grid-template-columns:auto 1fr;gap:26px 44px}
}
.quienes__fotos{display:flex;gap:14px}
.quienes__fotos img{
  display:block;width:148px;height:185px;object-fit:cover;
  border-radius:var(--radio);
}
.quienes__fotos picture:last-child img{margin-top:22px}
@media (max-width:520px){
  .quienes__fotos img{width:120px;height:150px}
  .quienes__fotos picture:last-child img{margin-top:16px}
}
.quienes__nombres{font-size:1.02rem;line-height:1.62;color:var(--texto)}
.quienes__txt{max-width:var(--ancho-texto)}
.quienes .acciones{margin-top:2px}


/* ---------- 50. v4 · Retoques pedidos sobre la portada -------------------
   1. La ruta 02 con su propio azul del logo.
   2. El sello de FUNDAE, que estaba en letra corrida.
   3. La señal gráfica del apartado de ideas.
   4. «¿En qué momentos?», que era una lista larga en gris y ahora son
      tarjetas con el color de la marca.
   ------------------------------------------------------------------------ */

/* ---- 1. La segunda ruta --------------------------------------------------
   Los cuatro azules del isotipo sirven justamente para esto: distinguir sin
   salirse de la marca. 01 el claro, 02 el medio, 03 el marrón. */
.ruta--dos .ruta__num{color:var(--azul-medio)}
.ruta--dos:hover{border-color:var(--azul)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ruta--dos .ruta__num{color:var(--azul)}
}
:root[data-theme="dark"] .ruta--dos .ruta__num{color:var(--azul)}

/* ---- 2. El sello de FUNDAE ----------------------------------------------
   «Bonificable» es de las tres cosas que más desatascan un presupuesto y
   estaba dicho de pasada. Ahora tiene marco. */
.sello{
  display:flex;align-items:center;gap:16px;margin:0;
  padding:14px 18px;border-radius:var(--radio);
  background:var(--fondo-alt);border-left:3px solid var(--arena);
}
.sello__marca{
  flex:none;display:grid;place-items:center;
  min-width:86px;height:40px;padding:0 12px;
  border:2px solid var(--acento-tierra);border-radius:4px;
  font-size:.82rem;font-weight:700;letter-spacing:.11em;
  color:var(--acento-tierra);
}
.sello__txt{font-size:.93rem;line-height:1.6;color:var(--texto-suave);margin:0}
.sello__txt strong{color:var(--texto)}
/* Cuando llegue el logotipo oficial, basta con poner la imagen dentro de
   .sello__marca y quitarle el borde: el hueco ya está reservado. */
.sello__marca img{display:block;max-width:120px;height:auto}
@media (max-width:520px){
  .sello{flex-direction:column;align-items:flex-start;gap:11px}
}

/* ---- 3. La señal gráfica de «Ideas» ------------------------------------- */
.ideas__lado{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
@media (min-width:860px){
  /* Alineado al borde derecho del bloque: así el dibujo y el botón forman
     una columna y no quedan flotando en mitad de la composición. */
  .ideas__lado{align-items:flex-end}
}
.ideas__motivo{
  display:block;width:200px;height:auto;
  filter:drop-shadow(0 6px 18px rgba(13,49,58,.14));
}
@media (max-width:860px){
  .ideas__motivo{width:160px}
}

/* ---- 4. «¿En qué momentos?» ---------------------------------------------
   Eran ocho filas separadas por un filete, todo del mismo gris y del mismo
   tamaño: el ojo no sabía dónde pararse. Ahora cada momento es una tarjeta,
   el texto sube a color pleno, la parte en negrita se tiñe del azul de la
   marca —que es lo que de verdad se lee— y los iconos van rotando por los
   cuatro colores del isotipo para que la rejilla tenga ritmo. */
.momentos{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;column-gap:14px;
}
@media (max-width:760px){
  .momentos{grid-template-columns:1fr}
}
.momentos li{
  padding:18px 20px;border-top:0;
  background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--radio);
  color:var(--texto);font-size:.97rem;line-height:1.58;
  gap:15px;align-items:start;
  transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.momentos li:hover{
  border-color:var(--azul-cielo);
  box-shadow:var(--sombra);
  transform:translateY(-2px);
}
.momentos li strong{color:var(--azul-hondo);font-weight:700}
.momentos__icono{
  width:38px;height:38px;margin-top:0;
  background:color-mix(in srgb,var(--azul-cielo) 42%,transparent);
  color:var(--azul-hondo);
}
.momentos__icono svg{width:20px;height:20px}

/* El ritmo de color: los cuatro del isotipo, en orden, y vuelta a empezar. */
.momentos li:nth-child(4n+2) .momentos__icono{
  background:color-mix(in srgb,var(--azul) 34%,transparent);
}
.momentos li:nth-child(4n+3) .momentos__icono{
  background:color-mix(in srgb,var(--azul-medio) 28%,transparent);
}
.momentos li:nth-child(4n+4) .momentos__icono{
  background:color-mix(in srgb,var(--arena) 55%,transparent);
  color:var(--tierra);
}
.momentos li:hover .momentos__icono{background:var(--azul-cielo)}
.momentos li:nth-child(4n+4):hover .momentos__icono{background:var(--arena)}

/* El titular del apartado dejaba de verse entre tanta tarjeta */
.momentos__cierre .voz{color:var(--azul-hondo)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .momentos li strong{color:var(--azul-cielo)}
  :root:not([data-theme="light"]) .momentos__icono{color:#DCEFF3}
  :root:not([data-theme="light"]) .momentos li:nth-child(4n+4) .momentos__icono{color:var(--arena)}
  :root:not([data-theme="light"]) .momentos li:hover .momentos__icono{color:var(--tinta)}
  :root:not([data-theme="light"]) .momentos__cierre .voz{color:var(--azul-cielo)}
  :root:not([data-theme="light"]) .sello__marca{border-color:var(--arcilla);color:var(--arcilla)}
}
:root[data-theme="dark"] .momentos li strong{color:var(--azul-cielo)}
:root[data-theme="dark"] .momentos__icono{color:#DCEFF3}
:root[data-theme="dark"] .momentos li:nth-child(4n+4) .momentos__icono{color:var(--arena)}
:root[data-theme="dark"] .momentos li:hover .momentos__icono{color:var(--tinta)}
:root[data-theme="dark"] .momentos__cierre .voz{color:var(--azul-cielo)}
:root[data-theme="dark"] .sello__marca{border-color:var(--arcilla);color:var(--arcilla)}

@media (prefers-reduced-motion: reduce){
  .momentos li{transition:none}
  .momentos li:hover{transform:none}
}


/* ---------- 51. v4 · El logotipo de FUNDAE en su sello -------------------
   Va sobre una placa blanca en los dos modos, claro y oscuro. No es un
   capricho: el azul del texto «Fundación Estatal» desaparecería sobre el
   fondo oscuro, y repintar una marca ajena no se hace. Placa blanca, logo
   con sus colores, manual de marca respetado.

   La imagen es decorativa —el texto de al lado ya dice «mediante FUNDAE»—,
   así que lleva alt vacío y no se anuncia dos veces a quien usa lector de
   pantalla.
   ------------------------------------------------------------------------ */
.sello__marca{
  background:#FFFFFF;border:1px solid var(--linea);
  min-width:0;height:auto;padding:10px 14px;border-radius:6px;
}
.sello__marca picture,.sello__marca img{display:block}
.sello__marca img{width:112px;height:auto}
@media (max-width:520px){
  .sello__marca img{width:96px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sello__marca{background:#FFFFFF;border-color:rgba(255,255,255,.3)}
}
:root[data-theme="dark"] .sello__marca{background:#FFFFFF;border-color:rgba(255,255,255,.3)}


/* ---------- 52. v4 · La banda de fotos ----------------------------------
   Una franja ancha y baja: aporta respiro y textura sin comerse una pantalla.
   El recorte se hace con la proporción de la propia imagen, no con alturas
   fijas, para que no se deforme en ningún tamaño.
   ------------------------------------------------------------------------ */
.banda{margin:0}
.banda img{width:100%;height:auto;display:block}
.banda .pie-figura{max-width:68ch}


/* ---------- 53. v4 · Pies de foto sobre fondo oscuro ---------------------
   El gris de los pies de foto está pensado para papel blanco. En las
   secciones oscuras se queda en 2,4:1, así que ahí se aclara. Mismo papel,
   mismo tamaño, solo cambia el tono.
   ------------------------------------------------------------------------ */
.oscuro .pie-figura{color:#C6E1E8}
.hero .pie-figura{color:#C6E1E8}


/* ---------- 54. v4 · El enlace de segunda fila ---------------------------
   Debajo de un botón, un enlace que no compite con él: mismo sitio, mucho
   menos peso. La clase .ir ya existía desde la primera versión; aquí solo
   se le da el párrafo que la sostiene y el aire que la separa del botón.
   ------------------------------------------------------------------------ */
.apunte{margin:-6px 0 0}
.apunte .ir{margin-top:0}


/* ---------- 55. v4 · Dos apartados oscuros a media página ---------------
   La portada se había quedado toda clara: hero, blanco, blanco, blanco y el
   contacto oscuro al final. El caso real y los testimonios pasan al azul
   oscuro de la marca —el mismo del contacto y el webinar— y parten en dos esa
   zona clara.

   Se probó un azul eléctrico y se descartó: no es un color del isotipo, que
   es todo cian y petróleo, y al lado del logotipo cantaba.

   Las fichas de testimonio estaban escritas para fondo claro, así que aquí
   se les cambia lo que hace falta y nada más.
   ------------------------------------------------------------------------ */
.oscuro .testimonio{border-color:rgba(255,255,255,.2)}
.oscuro .testimonio__txt{color:#EAF6F8}
.oscuro .testimonio__quien{color:#B4D2DC}
.oscuro .testimonio__quien b{color:#FFFFFF}
.oscuro .testimonio__origen{color:#9FC2CC}
.oscuro .testimonio__web{color:#EAF6F8;text-decoration-color:var(--arcilla)}
.oscuro .clientes__rotulo{color:#9FC2CC}
.oscuro .clientes span:not(.clientes__rotulo){color:#EAF6F8}

/* El hero en móvil lo resuelve ya la regla de 900 px: el recorte se lleva a
   la derecha, donde están ellos, y el velo cubre todo el ancho. */


/* ---------- 56. v4 · El titular, dentro de su zona ----------------------
   La foto de portada viene compuesta en dos mitades: la izquierda es fondo
   extendido y oscurecido, y la derecha son ellos dos. El texto solo puede
   vivir en la primera.

   Por eso la columna de texto se limita por ancho de pantalla y no por
   número de caracteres: lo que manda no es cuánto texto cabe, es dónde
   empieza la cara de Flor. El tope en rem evita que en pantallas muy anchas
   la línea se estire más de lo que se lee cómodo.

   Por debajo de 900 px el recorte de la foto cambia y el velo cubre todo el
   ancho, así que ahí no hace falta ninguna limitación.
   ------------------------------------------------------------------------ */
@media (min-width:901px){
  /* La columna llega hasta medio palmo antes de la foto, sea cual sea el
     ancho: 47 % de la caja menos el aire de separación. Antes tenía un tope
     fijo de 29 rem y en pantallas grandes se quedaba corta, con un hueco
     entre el final de la línea y el canto de la foto. */
  .hero__in > .pila{max-width:calc(47% - 52px)}
  .hero h1{max-width:none}
  .hero__sub{max-width:none}
}


/* ---------- 57. v4 · Dos apartados oscuros seguidos ---------------------
   «Un caso real» y «No os fiéis de nuestra palabra» comparten fondo desde
   que los dos pasaron al azul oscuro. Antes el cambio de color disimulaba
   que cada apartado trae su propio respiro arriba y abajo; ahora que no hay
   cambio, los dos respiros se suman y queda un claro de más de doscientos
   píxeles en medio de nada.

   Cuando un apartado oscuro sigue a otro, el de abajo renuncia a su respiro
   superior: basta con el inferior del de arriba, que es la misma distancia
   que separa cualquier otro par de apartados de la web.
   ------------------------------------------------------------------------ */
.oscuro + .oscuro{padding-block-start:0}


/* ---------- 58. v4 · Dos fotos a la par --------------------------------
   «Conferencias y charlas» pasa de una foto a dos, y entre las dos dicen lo
   que el texto afirma: que las dan los dos y que la sala cambia de una vez a
   otra. Van emparejadas, cada una con su pie, y se parten en vertical antes
   de que las caras se hagan ilegibles.
   ------------------------------------------------------------------------ */
.par-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,34px);align-items:start}
.par-fotos img{width:100%;height:auto;display:block}
@media (max-width:760px){.par-fotos{grid-template-columns:1fr}}


/* ---------- 59. v4 · El par pequeño ------------------------------------
   En coaching las dos fotos acompañan, no presiden: el apartado va de un
   trabajo discreto y a puerta cerrada, y dos imágenes a todo lo ancho le
   daban un protagonismo que no le toca. Se quedan a un tamaño de cortesía,
   alineadas a la izquierda bajo las fichas.
   ------------------------------------------------------------------------ */
.par-fotos--chico{max-width:520px;gap:clamp(14px,2vw,20px)}
@media (max-width:760px){
  .par-fotos--chico{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
}


/* ---------- 60. v4 · La foto de Escena Consciente ----------------------
   El apartado es el único que habla de algo que todavía no existe, y hasta
   ahora era todo texto. Una foto de ellos dos en el plató, pequeña y bajo la
   frase, le pone cara sin prometer nada que no haya.
   ------------------------------------------------------------------------ */
.esc__foto{max-width:290px}
.esc__foto img{width:100%;height:auto;display:block}


/* ---------- 61. v4 · Las dos columnas, a la misma altura ---------------
   En Escena Consciente la columna de la izquierda creció al entrar la foto y
   el texto de la derecha se quedaba colgando arriba, como si le faltara el
   suelo. Centrándolo contra la otra columna, las dos respiran igual.
   ------------------------------------------------------------------------ */
.dos--medio{align-items:center}
@media (max-width:900px){.dos--medio{align-items:start}}


/* ---------- 62. v4 · El panel del modelo, del color de su capa ----------
   Al cambiar de capa cambia el panel entero —la pregunta, lo que observamos,
   lo que os lleváis, la nota del pie—, pero el cambio se veía poco: cuatro
   bloques de texto blanco con la misma caja alrededor. La única pista estaba
   en la barrita de la izquierda, al otro lado de la pantalla.

   Ahora el panel se enmarca en el color de la capa elegida y lleva una pleca
   maciza arriba. Es lo que se ve con el rabillo del ojo al pulsar: no hace
   falta volver a leer para saber que todo lo de la derecha es otra cosa.

   El color viene de `aria-labelledby`, que es el atributo que main.js ya
   actualiza al pintar cada capa. Sin JavaScript el panel se queda en la
   primera, que es la que trae el HTML, y el marco acompaña igual.
   ------------------------------------------------------------------------ */
#panel-capa{--capa-color:var(--azul-cielo)}
#panel-capa[aria-labelledby="tab-liderazgo"]{--capa-color:var(--azul)}
#panel-capa[aria-labelledby="tab-equipo"]{--capa-color:var(--azul-medio)}
#panel-capa[aria-labelledby="tab-organizacion"]{--capa-color:var(--azul-hondo)}

#panel-capa{
  position:relative;
  border:2px solid var(--capa-color);
  padding-top:calc(clamp(22px,3vw,34px) + 10px);
  transition:border-color .22s;
}
#panel-capa::before{
  content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:9px;
  background:var(--capa-color);
  border-radius:calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
  transition:background-color .22s;
}
@media (prefers-reduced-motion: reduce){
  #panel-capa,#panel-capa::before{transition:none}
}


/* ---------- 63. v4 · Los dos retratos, a la misma altura ----------------
   Iban escalonados —el segundo caía 22 px por debajo— y ese desnivel, que
   pretendía dar movimiento, lo que hacía era parecer un descuadre.
   ------------------------------------------------------------------------ */
.quienes__fotos picture:last-child img{margin-top:0}
@media (max-width:520px){.quienes__fotos picture:last-child img{margin-top:0}}