/* Habilé · sistema visual original (manual de marca), tipografía unificada en Gabarito */

/* ============================================
   HABILÉ · TOKENS DEL SISTEMA
   En WordPress esto vive en los estilos globales
   del tema, no dentro de la página.
   ============================================ */
:root{
  --warm-white:#F7F4EF;
  --crema:#EDE9E1;
  --carbon:#2A2A27;
  --gris:#4A4A4A;
  --carbon-70:rgba(42,42,39,.70);
  --carbon-15:rgba(42,42,39,.15);
  --amarillo:#FFC304;
  --naranja:#FF921E;
  --verde:#39B44A;
  --azul:#0F3CC1;
  --azul-dark:#0A2E96;

  --fs-display:clamp(2.25rem,6vw,4rem);
  --fs-h2:clamp(1.5rem,3.4vw,2.25rem);
  --fs-h3:clamp(1.125rem,2vw,1.375rem);
  --fs-body:clamp(1rem,1.6vw,1.125rem);
  --fs-small:.875rem;

  --sp-section:clamp(4rem,9vw,7.5rem);
  --measure:34rem;
  --wrap:72rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--warm-white);
  color:var(--gris);
  font-family:'Aleo',Georgia,serif;
  font-size:var(--fs-body);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}

h1,h2,h3{font-family:'Gabarito',system-ui,sans-serif;color:var(--carbon);font-weight:600;line-height:1.15;letter-spacing:-.02em}
h1{font-size:var(--fs-display);font-weight:700;letter-spacing:-.03em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p+p{margin-top:1.1em}
a{color:inherit}
img,svg{display:block;max-width:100%}

.eyebrow{
  font-family:'Gabarito',system-ui,sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--carbon-70);
}

/* ---- Línea de cuatro colores del sistema ----
   Recreada en CSS: el SVG original lleva un PNG
   incrustado y se pixela al ancho completo. */
.linea-marca{
  height:6px;width:100%;
  background:linear-gradient(90deg,
    var(--amarillo) 0 25%,
    var(--naranja) 25% 50%,
    var(--verde) 50% 75%,
    var(--azul) 75% 100%);
}

/* ---- Botón de acción. Azul reservado al CTA. ---- */
.cta{
  font-family:'Gabarito',system-ui,sans-serif;
  display:inline-block;background:var(--azul);color:#fff;
  font-weight:600;font-size:1rem;text-decoration:none;
  padding:.95rem 1.75rem;border-radius:999px;
  transition:background .2s ease;
}
.cta:hover,.cta:focus-visible{background:var(--azul-dark)}
.cta-note{font-family:'Gabarito',system-ui,sans-serif;display:block;margin-top:.75rem;font-size:var(--fs-small);color:var(--carbon-70)}
a:focus-visible,button:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px}

.link-mas{font-family:'Gabarito',system-ui,sans-serif;display:inline-block;margin-top:2rem;font-weight:600;color:var(--azul);text-decoration:none}
.link-mas:hover{text-decoration:underline}


/* ============================================
   CABECERA
   ============================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--carbon-15);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.logo-svg{height:40px;width:auto}
@media(min-width:60rem){.logo-svg{height:50px}}
.nav{font-family:'Gabarito',system-ui,sans-serif;display:none;gap:1.75rem;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;color:var(--carbon-70);transition:color .18s}
.nav a:hover{color:var(--carbon)}
.header-cta{font-size:.9rem;padding:.6rem 1.2rem}
@media(min-width:64rem){.nav{display:flex}}

/* ============================================
   01 · APERTURA
   ============================================ */
.hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(4rem,9vw,7rem)}
.hero h1{max-width:20ch}
.hero-lead{margin-top:1.75rem;max-width:var(--measure);color:var(--gris);font-size:clamp(1.05rem,1.8vw,1.2rem)}
.hero-action{margin-top:2.5rem}

/* ============================================
   02 · ENTRADA POR SITUACIÓN
   ============================================ */
.situaciones{background:var(--crema);padding-block:var(--sp-section)}
.situaciones-lead{margin-top:.9rem;color:var(--gris);max-width:var(--measure)}
.grid-situaciones{margin-top:2.75rem;display:grid;gap:.875rem;grid-template-columns:1fr}
@media(min-width:38rem){.grid-situaciones{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid-situaciones{grid-template-columns:repeat(3,1fr)}}

.situacion{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;
  min-height:10rem;padding:1.6rem;
  background:var(--warm-white);border-radius:14px;text-decoration:none;
  transition:transform .2s ease;
}
.situacion::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.situacion:nth-child(4n+1)::before{background:var(--amarillo)}
.situacion:nth-child(4n+2)::before{background:var(--naranja)}
.situacion:nth-child(4n+3)::before{background:var(--verde)}
.situacion:nth-child(4n+4)::before{background:var(--azul)}
.situacion:hover,.situacion:focus-visible{transform:translateY(-3px)}
.situacion:hover::before,.situacion:focus-visible::before{transform:scaleX(1)}
.situacion span{font-family:'Gabarito',system-ui,sans-serif;color:var(--carbon);font-size:1.0625rem;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.situacion em{font-family:'Gabarito',system-ui,sans-serif;font-style:normal;font-size:var(--fs-small);color:var(--gris)}

/* ============================================
   03 · LA CONVICCIÓN
   ============================================ */
.conviccion{padding-block:var(--sp-section)}
.dos-col{display:grid;gap:1.75rem}
@media(min-width:56rem){.dos-col{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}}
.dos-col h2{max-width:18ch}
.conviccion-body{max-width:38rem}
@media(min-width:56rem){.conviccion-body,.proceso-lead,.lineas-lead,.equipo-lead,.cierre-texto{margin-top:0}}
.cita-seccion{background:var(--crema)}
.cita-seccion .wrap{padding-block:clamp(5rem,11vw,8.5rem);text-align:center}
.cita{max-width:46rem;margin-inline:auto;position:relative}
.cita-marca{
  display:block;font-family:'Aleo',Georgia,serif;
  font-size:clamp(4rem,9vw,6.5rem);line-height:.6;color:var(--amarillo);
  margin-bottom:1.25rem;
}
.cita::after{
  content:'';display:block;width:3.5rem;height:4px;border-radius:4px;
  background:var(--amarillo);margin:2rem auto 0;
}
.cita p{font-style:normal;color:var(--carbon);font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.5;letter-spacing:-.01em}
.cita footer{font-family:'Gabarito',system-ui,sans-serif;margin-top:1.5rem;font-size:var(--fs-small);color:var(--gris);letter-spacing:.02em;font-style:normal}

/* ============================================
   04 · EL PROCESO HABILÉ® · el cauce
   ============================================ */
.proceso{padding-block:var(--sp-section)}
.proceso h2{margin-top:.9rem;max-width:22ch}
.proceso-lead{margin-top:1.5rem;max-width:var(--measure);color:var(--gris)}

.cauce{position:relative;margin-top:clamp(3rem,7vw,4.5rem)}
.cauce-onda{display:none}
.cauce-track{
  position:absolute;inset-block:0;left:1.0625rem;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--verde),var(--azul),var(--naranja),var(--amarillo));
}
.momentos{display:grid;gap:2.5rem}
.momento{position:relative;padding-left:3.5rem}
.momento::before{
  content:'';position:absolute;left:.5rem;top:.45rem;
  width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--warm-white);border:3px solid var(--verde);
}
.momento:nth-child(2)::before{border-color:var(--azul)}
.momento:nth-child(3)::before{border-color:var(--naranja)}
.momento:nth-child(4)::before{border-color:var(--amarillo)}
.momento:last-child h3{font-family:'Aleo',Georgia,serif;font-style:normal;font-weight:400;letter-spacing:0}
.momento p{font-family:'Aleo',Georgia,serif;margin-top:.6rem;color:var(--gris);font-size:.95rem}

@media(min-width:64rem){
  .cauce-track{display:none}
  .cauce-onda{display:block;position:absolute;top:0;left:0;width:100%;height:4.5rem}
  .momentos{grid-template-columns:repeat(4,1fr);gap:2rem}
  .momento{padding-left:0;padding-top:5rem}
  .momento::before{left:50%;transform:translateX(-50%);top:1.625rem}
}

.statement{
  font-family:'Gabarito',system-ui,sans-serif;
  margin-top:clamp(3.5rem,7vw,5rem);max-width:46rem;
  font-size:clamp(1.25rem,2.6vw,1.65rem);line-height:1.35;
  letter-spacing:-.015em;font-weight:500;color:var(--carbon);
  padding-left:1.5rem;border-left:4px solid var(--naranja);
}
.constantes{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.75rem;
  background:var(--crema);border-radius:14px;max-width:44rem;
}
.constantes p{margin-top:.6rem;color:var(--gris)}

/* ============================================
   05 · CÓMO ACOMPAÑAMOS
   ============================================ */
.lineas{background:var(--crema);padding-block:var(--sp-section)}
.lineas-lead{margin-top:1.25rem;max-width:var(--measure);color:var(--gris)}
.grid-lineas{margin-top:2.75rem;display:grid;gap:1.75rem}
@media(min-width:48rem){.grid-lineas{grid-template-columns:repeat(3,1fr);gap:2rem}}
.linea-serv{padding-top:1.25rem;border-top:3px solid var(--carbon-15);text-decoration:none;display:block;transition:border-top-color .25s ease}
.linea-serv:nth-child(1):hover{border-top-color:var(--amarillo)}
.linea-serv:nth-child(2):hover{border-top-color:var(--naranja)}
.linea-serv:nth-child(3):hover{border-top-color:var(--verde)}
.linea-serv:nth-child(4):hover{border-top-color:var(--azul)}
.linea-serv p{margin-top:.6rem;color:var(--gris);font-size:.95rem}
.evaluaciones{
  margin-top:clamp(3.5rem,7vw,5rem);padding:clamp(1.75rem,4vw,2.75rem);
  background:var(--warm-white);border-radius:14px;border-left:4px solid var(--verde);
}
.evaluaciones h3{margin-top:.5rem}
.evaluaciones p{max-width:44rem}
.evaluaciones p+p{margin-top:1rem}
.evaluaciones .link-mas{margin-top:1.5rem}
.lineas-cierre{margin-top:2.5rem;max-width:52rem;font-size:.95rem;color:var(--gris)}

/* ============================================
   06 · VEINTE AÑOS
   ============================================ */
.trayectoria{padding-block:var(--sp-section)}
.trayectoria-texto{max-width:46rem}
.trayectoria h2{max-width:18ch}
.foto-ancha{
  margin-top:clamp(3rem,6vw,4.5rem);border-radius:14px;overflow:hidden;
  aspect-ratio:3/2;background:var(--crema);
}
@media(min-width:56rem){.foto-ancha{aspect-ratio:21/9}}
.foto-ancha img{width:100%;height:100%;object-fit:cover}
.foto-pie{margin-top:.9rem;font-size:var(--fs-small);color:var(--gris);font-style:normal}
.trayectoria p{margin-top:1.5rem;color:var(--gris)}
.etimologia{margin-top:1.5rem;font-style:normal;font-size:.95rem;color:var(--gris)}


.voz-mj{margin-top:clamp(2.5rem,5vw,3.5rem);padding-left:1.75rem;border-left:3px solid var(--naranja);max-width:40rem}
.voz-mj p{font-style:normal;font-size:clamp(1.125rem,2vw,1.3rem);line-height:1.55;color:var(--carbon);margin-top:0}
.voz-mj footer{font-family:'Gabarito',system-ui,sans-serif;font-style:normal;margin-top:.9rem;font-size:var(--fs-small);font-weight:600;color:var(--naranja)}

/* ============================================
   07 · EL EQUIPO
   ============================================ */
.equipo{padding-block:var(--sp-section);background:var(--crema)}
.equipo-lead{margin-top:1.5rem;max-width:var(--measure);color:var(--gris)}
.grid-equipo{margin-top:2.75rem;display:grid;gap:2.5rem;max-width:56rem}
.perfil{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}
@media(min-width:38rem){.perfil{gap:2rem}}
.perfil-foto{
  width:clamp(96px,18vw,150px);border-radius:12px;overflow:hidden;
  aspect-ratio:4/5;background:var(--warm-white);flex-shrink:0;
}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil h3{font-size:1.1875rem}
.perfil .rol{font-family:'Gabarito',system-ui,sans-serif;margin-top:.25rem;font-size:var(--fs-small);font-weight:600;letter-spacing:.02em;color:var(--naranja)}
.perfil:nth-child(2) .rol{color:var(--verde)}
.perfil p{margin-top:.7rem;font-size:.9375rem;line-height:1.7;color:var(--gris)}

/* ============================================
   08 · COLEGIOS Y EMPRESAS
   ============================================ */
.instituciones{background:var(--carbon);color:var(--warm-white);padding-block:var(--sp-section)}
.instituciones .eyebrow{color:rgba(255,255,255,.65)}
.instituciones h2{margin-top:.9rem;max-width:20ch;color:var(--warm-white)}
.instituciones p{margin-top:1.5rem;max-width:var(--measure);color:rgba(255,255,255,.80)}
.instituciones .link-mas{color:var(--amarillo)}

/* ============================================
   09 · CIERRE
   ============================================ */
.cierre{padding-block:var(--sp-section)}
.cierre p{margin-top:1.5rem;max-width:var(--measure);color:var(--gris)}
.cierre .cta{margin-top:2.25rem}
.sedes{margin-top:clamp(3rem,6vw,4rem);display:grid;gap:1.75rem}
@media(min-width:38rem){.sedes{grid-template-columns:repeat(2,1fr);max-width:44rem}}
.sede h3{font-size:1.0625rem}
.sede p{margin-top:.35rem;font-size:.95rem;color:var(--gris)}

.site-footer{border-top:1px solid var(--carbon-15);padding-block:2.5rem;font-size:var(--fs-small)}
.footer-inner{font-family:'Gabarito',system-ui,sans-serif;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:center;color:var(--carbon-70)}
.footer-links{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}


/* ============================================
   NAVEGACIÓN ENTRE PÁGINAS
   En WordPress cada .page es una página real.
   ============================================ */
.page{display:none}
.page.is-active{display:block}
.nav a.is-current{color:var(--carbon);font-weight:600}

/* ---- Proceso: apertura ---- */
.proc-hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,7vw,5rem)}
.proc-hero h1{max-width:22ch;font-size:clamp(1.9rem,4.6vw,3.1rem)}
.proc-hero .hero-lead{margin-top:1.75rem}

/* ---- Proceso: manifiesto ---- */
.manifiesto{background:var(--crema);padding-block:clamp(5rem,11vw,8.5rem)}
.manifiesto-texto{max-width:44rem;margin-inline:auto}
.manifiesto-texto h2{max-width:26ch;margin-bottom:2rem}
.manifiesto-texto p{font-size:1rem;line-height:1.85}
.manifiesto-texto p+p{margin-top:1.1rem}

/* ---- Proceso: el cauce completo ---- */
.cauce-full{margin-top:clamp(3rem,7vw,4.5rem)}
.cauce-svg{display:none}
.momentos-full{display:grid;gap:2.75rem}
.momento-full{position:relative;padding-left:3.5rem}
.momento-full::before{
  content:'';position:absolute;left:.5rem;top:.4rem;
  width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--warm-white);border:3px solid var(--verde);
}
.momento-full:nth-child(2)::before{border-color:var(--azul)}
.momento-full:nth-child(3)::before{border-color:var(--naranja)}
.momento-full:nth-child(4)::before{border-color:var(--amarillo)}
.momento-full h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.momento-full:last-child h3{font-family:'Aleo',Georgia,serif;font-style:normal;font-weight:400;letter-spacing:0}
.momento-full p{margin-top:.7rem;max-width:38rem;font-size:.9375rem}
.momento-full .nota{font-size:.875rem;color:var(--carbon-70);font-style:normal}
.cauce-vert{
  position:absolute;left:1.0625rem;top:1.6rem;bottom:-2.75rem;width:3px;border-radius:3px;
}
.momento-full:last-child .cauce-vert{display:none}

@media(min-width:64rem){
  .cauce-svg{display:block;width:100%;height:auto}
  .cauce-vert{display:none}
  .momentos-full{grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2.5rem}
  .momento-full{padding-left:0}
  .momento-full::before{display:none}
  .momento-full p{max-width:none;font-size:.875rem;line-height:1.75}
  .momento-full:last-child{padding-top:0}
}

/* ---- Proceso: constantes ---- */
.constantes-full{padding-block:var(--sp-section);background:var(--crema)}
.grid-constantes{margin-top:2.75rem;display:grid;gap:1.5rem}
@media(min-width:48rem){.grid-constantes{grid-template-columns:repeat(2,1fr);gap:2rem}}
.constante{
  position:relative;background:#F7F4EF;border-radius:16px;
  padding:clamp(1.75rem,3.5vw,2.5rem);overflow:hidden;
}
.constante::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:5px;
  background:var(--verde);
}
.constante:last-child::before{background:var(--azul)}
.constante h3{font-size:1.1875rem}
.constante p{margin-top:.8rem;font-size:.9375rem;line-height:1.8}

/* ---- Proceso: alternancia de superficies ----
   01 warm white · 02 crema · 03 warm white · 04 crema
   05 warm white · 06 crema · 07 warm white ---- */
#page-proceso .lineas{background:var(--warm-white)}
#page-proceso .lineas .linea-serv{border-top-color:var(--carbon-15)}
#page-proceso .significa{background:var(--crema)}
#page-proceso .cierre{background:var(--warm-white)}

/* ---- Proceso: qué significa para ti ---- */
.significa{padding-block:var(--sp-section)}
.beneficios{display:grid;gap:2rem;margin-top:2.75rem}
@media(min-width:48rem){.beneficios{grid-template-columns:repeat(2,1fr);gap:2.5rem}}
.beneficio h3{font-size:1.125rem}
.beneficio p{margin-top:.6rem;font-size:.95rem}


/* ============================================
   MENÚ DESPLEGABLE
   ============================================ */
.has-drop{position:relative}
.drop-toggle{
  display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;cursor:pointer;padding:0;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.95rem;font-weight:500;
  color:var(--carbon-70);transition:color .18s;
}
.drop-toggle:hover,.has-drop.is-open .drop-toggle{color:var(--carbon)}
.drop-toggle svg{transition:transform .2s ease}
.has-drop.is-open .drop-toggle svg{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + .9rem);left:-1rem;z-index:60;
  min-width:16rem;padding:.6rem;
  background:var(--warm-white);border:1px solid var(--carbon-15);
  border-radius:14px;box-shadow:0 12px 32px rgba(42,42,39,.10);
  display:none;
}
.has-drop.is-open .drop{display:block}
.drop a{
  display:block;padding:.7rem .9rem;border-radius:9px;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.95rem;
  color:var(--carbon);text-decoration:none;transition:background .15s;
}
.drop a:hover{background:var(--crema)}

/* ============================================
   COLOR POR PÁGINA
   Un solo acento por servicio. Azul nunca:
   está reservado al botón de acción.
   ============================================ */
#page-terapia{--acc:var(--verde)}
#page-psicopedagogia{--acc:var(--amarillo)}
#page-evaluaciones{--acc:var(--naranja)}
#page-coaching{--acc:var(--carbon)}
#page-home{--acc:var(--verde)}

/* ============================================
   FONDO DE APERTURA
   Foto desaturada + velo warm white + tinte
   del acento de la página.
   ============================================ */
.hero-foto{position:relative;overflow:hidden}
.hero-foto::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);
  background-size:cover;background-position:center var(--bg-pos,38%);
  filter:grayscale(.42) contrast(.96) brightness(1.04);
}
.hero-foto::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(255deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,.93) 56%, var(--warm-white) 74%),
    linear-gradient(0deg, color-mix(in srgb, var(--acc) 16%, transparent), color-mix(in srgb, var(--acc) 16%, transparent));
}
.hero-foto > .wrap{position:relative;z-index:2}
@media(max-width:63.99rem){
  .hero-foto::after{
    background:
      linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.72) 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--acc) 14%, transparent), color-mix(in srgb, var(--acc) 14%, transparent));
  }
}

/* ============================================
   PÁGINAS DE SERVICIO
   ============================================ */
.serv-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,5vw,3.75rem)}
.serv-hero h1{max-width:22ch;font-size:clamp(1.75rem,3.4vw,2.6rem)}
.serv-hero .hero-lead{font-size:1rem;line-height:1.75;max-width:34rem}
.serv-hero .hero-lead + .hero-lead{margin-top:.9rem}
/* Cuando la apertura lleva mucho texto, la tipografía baja un punto más */
.serv-hero.texto-largo h1{font-size:clamp(1.6rem,2.9vw,2.2rem);max-width:24ch}
.serv-hero.texto-largo .hero-lead{font-size:.9375rem;line-height:1.7;max-width:36rem}
.serv-hero .eyebrow{color:var(--acc)}
#page-coaching .serv-hero .eyebrow{color:var(--carbon)}
.serv-hero .hero-lead{margin-top:1.75rem}

.razones{background:var(--crema);padding-block:var(--sp-section)}
.lista-razones{margin-top:2.5rem;display:grid;gap:.875rem;max-width:62rem}
@media(min-width:48rem){.razon{flex:1 1 16rem}}
@media(min-width:48rem){.lista-razones{display:flex;flex-wrap:wrap;gap:1rem}}
.razon{
  background:var(--warm-white);border-radius:12px;padding:1.15rem 1.35rem;
  font-size:.9375rem;line-height:1.65;border-left:3px solid var(--carbon-15);
}
.razon{border-left-color:var(--acc)}

.trabaja{padding-block:var(--sp-section)}
.trabaja-body{max-width:38rem}

.modalidades{background:var(--crema);padding-block:var(--sp-section)}
.modalidades-lead{margin-top:1.25rem;max-width:var(--measure);color:var(--gris)}
.grid-mod{margin-top:2.75rem;display:grid;gap:1.5rem}
@media(min-width:56rem){.grid-mod{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.mod{
  position:relative;background:#F7F4EF;border-radius:16px;overflow:hidden;
  padding:clamp(1.4rem,2.4vw,1.75rem);
}
.mod::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:var(--acc)}
.mod h3{font-size:1.0625rem}
.mod p{margin-top:.7rem;font-size:.875rem;line-height:1.7}
.mod .sub{margin-top:1.1rem;font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:.9375rem;color:var(--carbon)}

/* Bloques de evaluación */
.grid-eval{margin-top:2.75rem;display:grid;gap:1.25rem}
@media(min-width:48rem){.grid-eval{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.eval{background:#F7F4EF;border-radius:14px;padding:1.6rem;border-left:4px solid var(--acc)}
.eval h3{font-size:1.0625rem}
.eval p{margin-top:.55rem;font-size:.9125rem;line-height:1.7}
.eval .sesiones{margin-top:.75rem;font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem;font-weight:600;color:var(--carbon-70);letter-spacing:.02em}

/* Dónde encaja: banda común */
.encaja{padding-block:clamp(3rem,6vw,4.5rem);background:var(--carbon);color:var(--warm-white)}
.encaja h2{color:var(--warm-white);max-width:20ch}
.encaja p{margin-top:1.25rem;max-width:42rem;color:rgba(255,255,255,.80)}
.encaja .link-mas{color:var(--amarillo)}

/* Cómo funciona */
.practico{padding-block:var(--sp-section)}
.grid-practico{margin-top:2.5rem;display:grid;gap:1.75rem;max-width:56rem}
@media(min-width:48rem){.grid-practico{grid-template-columns:repeat(2,1fr);gap:2rem}}
.dato h3{font-size:1rem;font-family:'Gabarito',system-ui,sans-serif}
.dato p{margin-top:.5rem;font-size:.9375rem}
.costo{
  margin-top:2.5rem;padding:clamp(1.5rem,3vw,2rem);
  background:var(--crema);border-radius:14px;max-width:48rem;
}
.costo h3{font-size:1rem}
.costo p{margin-top:.6rem;font-size:.9375rem}
.costo p+p{margin-top:.8rem}

/* Quién lo hace */
.quien{background:var(--crema);padding-block:var(--sp-section)}

/* Recirculación */
.recirc{padding-block:var(--sp-section)}
.grid-recirc{margin-top:2rem;display:grid;gap:.75rem}
@media(min-width:38rem){.grid-recirc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid-recirc{grid-template-columns:repeat(3,1fr)}}
.recirc-item{
  background:var(--crema);border-radius:12px;padding:1rem 1.2rem;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.9375rem;
  color:var(--carbon);text-decoration:none;transition:background .18s;
}
.recirc-item:hover{background:#EAEAEA}


/* ============================================
   SOBRE HABILÉ
   Acento verde. Naranja solo en la voz de MJ.
   ============================================ */
#page-sobre{--acc:var(--verde)}

/* 02 · Voz de María Julia */
.voz-seccion{background:var(--crema);padding-block:var(--sp-section)}
.voz-flow{max-width:62rem}
.voz-flow > h2{max-width:24ch}
.voz-grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:56rem){.voz-grid{grid-template-columns:.42fr .58fr;gap:clamp(2.5rem,6vw,4.5rem)}}
/* El retrato flota dentro del texto: sin hueco bajo la imagen */
.voz-flow .voz-texto{margin-top:1.75rem;overflow:hidden}
.voz-flow .voz-retrato{
  float:right;width:clamp(11rem,26%,16rem);margin:.35rem 0 1.25rem 2.25rem;
  border-radius:16px;overflow:hidden;aspect-ratio:4/5;
}
.voz-flow .voz-retrato img{width:100%;height:100%;object-fit:cover;display:block}
.voz-flow .voz-firma{padding-left:1.75rem}
.voz-flow .voz-bio{max-width:52rem}
@media(max-width:55.99rem){
  .voz-flow .voz-retrato{float:none;width:min(16rem,62%);margin:0 0 1.5rem}
}
.voz-retrato{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--warm-white)}
.voz-retrato img{width:100%;height:100%;object-fit:cover}
.voz-texto{margin-top:1.75rem;padding-left:1.75rem;border-left:3px solid var(--naranja)}
.voz-texto p{font-style:normal;font-size:clamp(1rem,1.7vw,1.0625rem);line-height:1.85;color:var(--carbon)}
.voz-texto p+p{margin-top:1.1rem}
.voz-firma{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:var(--fs-small);
  color:var(--naranja);margin-top:1.5rem;padding-left:1.75rem;letter-spacing:.02em;
}
.voz-bio{margin-top:1.5rem;font-size:.9125rem;line-height:1.8;color:var(--gris)}

/* 03 · Creencias */
.creencias{padding-block:var(--sp-section)}
.grid-creencias{margin-top:2.75rem;display:grid;gap:1.75rem}
@media(min-width:56rem){.grid-creencias{grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}}
.creencia{position:relative;padding-top:1.5rem;border-top:4px solid var(--acc)}
.creencia h3{font-size:1.0625rem;max-width:22ch}
.creencia p{margin-top:.9rem;font-size:.9375rem;line-height:1.8}
.creencia p+p{margin-top:.9rem}

/* 04 · Equipo completo */
.equipo-full{background:var(--crema);padding-block:var(--sp-section)}
.corte{max-width:none;text-wrap:balance}
.grid-equipo-full{margin-top:2.75rem;display:grid;gap:1.5rem}
@media(min-width:64rem){.grid-equipo-full{grid-template-columns:repeat(2,1fr);gap:2rem}}
.equipo-full .perfil{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start;
  background:var(--warm-white);border-radius:16px;padding:1.5rem;
}
.equipo-full .perfil-foto{width:clamp(88px,14vw,120px);border-radius:12px;aspect-ratio:4/5;overflow:hidden;flex-shrink:0}
.equipo-full .perfil h3{font-size:1.0625rem}
.equipo-full .perfil .rol{font-family:'Gabarito',system-ui,sans-serif;margin-top:.25rem;font-size:var(--fs-small);font-weight:600;color:var(--acc);letter-spacing:.02em}
.equipo-full .perfil:first-child .rol{color:var(--verde)}
.equipo-full .perfil p{margin-top:.7rem;font-size:.875rem;line-height:1.7;color:var(--gris)}
.perfil-vacio{
  display:grid;place-items:center;background:var(--crema);
  border:1px dashed var(--carbon-15);
}
.perfil-vacio span{
  font-family:'Gabarito',system-ui,sans-serif;font-size:1.75rem;font-weight:600;
  color:var(--carbon-15);
}

/* 05 · Supervisión */
.supervision{padding-block:var(--sp-section)}

/* 06 · Dónde estamos */
.donde{background:var(--crema);padding-block:var(--sp-section)}
.grid-sedes{margin-top:2.5rem;display:grid;gap:1.5rem;max-width:52rem}
@media(min-width:48rem){.grid-sedes{grid-template-columns:repeat(2,1fr);gap:2rem}}
.sede-card{background:var(--warm-white);border-radius:16px;padding:1.75rem;border-top:5px solid var(--amarillo)}
.sede-card h3{font-size:1.125rem}
.sede-card .dir{margin-top:.6rem;font-family:'Gabarito',system-ui,sans-serif;font-size:.9375rem;font-weight:500;color:var(--carbon)}
.sede-card p{margin-top:.6rem;font-size:.9125rem;line-height:1.75}
#page-sobre .cierre{background:var(--warm-white)}


/* ============================================
   COLEGIOS Y EMPRESAS
   Interlocutor institucional: registro sobrio.
   Acento amarillo sobre carbón, azul solo en CTA.
   ============================================ */
#page-instituciones{--acc:var(--amarillo)}

/* 01 · Apertura sobre carbón */
.inst-hero{
  position:relative;overflow:hidden;background:var(--carbon);
  padding-block:clamp(4.5rem,11vw,8rem);
}
.inst-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);background-size:cover;background-position:center 45%;
  filter:grayscale(.75) contrast(.9);
}
.inst-hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(255deg, rgba(42,42,39,.60) 0%, rgba(42,42,39,.86) 34%, rgba(42,42,39,.97) 62%, var(--carbon) 80%);
}
.inst-hero > .wrap{position:relative;z-index:2}
.inst-hero .eyebrow{color:var(--amarillo)}
.inst-hero h1{
  margin-top:.9rem;color:var(--warm-white);max-width:20ch;
  font-size:clamp(1.9rem,4.4vw,3rem);
}
.inst-lead{margin-top:1.5rem;max-width:44rem;color:rgba(255,255,255,.80);font-size:1rem;line-height:1.75}
.inst-lead + .inst-lead{margin-top:.9rem}
.inst-hero h1{font-size:clamp(1.75rem,3.4vw,2.6rem);max-width:26ch}
.inst-hero{padding-block:clamp(3rem,7vw,5rem)}
@media(max-width:63.99rem){
  .inst-hero::after{background:linear-gradient(180deg, rgba(42,42,39,.88) 0%, rgba(42,42,39,.94) 50%, var(--carbon) 100%)}
}

/* 02 · Diferencial */
.inst-dif{padding-block:var(--sp-section)}

/* 03 · Dos interlocutores */
.inst-dos{background:var(--crema);padding-block:var(--sp-section)}
.grid-inst{margin-top:2.75rem;display:grid;gap:1.75rem}
@media(min-width:56rem){.grid-inst{grid-template-columns:repeat(2,1fr);gap:2rem;align-items:stretch}}
.inst-card{background:var(--warm-white);border-radius:16px;padding:clamp(1.75rem,3.5vw,2.5rem);border-top:5px solid var(--acc)}
.inst-card h3{font-size:1.1875rem}
.inst-card p{margin-top:.85rem;font-size:.9375rem;line-height:1.8}

/* 04 · Temas */
.inst-temas{padding-block:var(--sp-section)}
.grid-temas{margin-top:2.5rem;display:grid;gap:.75rem}
@media(min-width:48rem){.grid-temas{grid-template-columns:repeat(2,1fr);gap:.875rem}}
.tema{
  background:var(--crema);border-radius:12px;padding:1.1rem 1.35rem;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.9375rem;font-weight:500;
  color:var(--carbon);border-left:3px solid var(--acc);
}

/* 05 y 06 heredan .practico y .cierre */
#page-instituciones .practico{background:var(--crema)}
#page-instituciones .cierre{background:var(--warm-white)}


/* ============================================
   DIAGRAMA DE LA ESENCIA HABILÉ
   Piezas A y B, adaptadas del activo oficial.
   ============================================ */
.esencia-diagrama{display:none;margin-top:clamp(2rem,5vw,3rem)}
.esencia-diagrama-movil{display:block;max-width:22rem;margin-inline:auto;margin-top:2rem}
@media(min-width:56rem){
  .esencia-diagrama{display:block;max-width:44rem;margin-inline:auto}
  .esencia-diagrama-movil{display:none}
}
.esencia-diagrama svg,.esencia-diagrama-movil svg{width:100%;height:auto;overflow:visible}
.d-centro{font-family:'Aleo',Georgia,serif;font-style:normal;font-size:19px;fill:var(--carbon)}
.esencia-diagrama-movil .d-centro{font-size:15px}
.d-titulo{font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:20px}
.esencia-diagrama-movil .d-titulo{font-size:15px}
.d-sub{font-family:'Aleo',Georgia,serif;font-style:normal;font-size:13px;fill:var(--gris)}

.esencia-linea{margin-top:clamp(2.5rem,5vw,3.5rem);color:var(--carbon)}
.esencia-linea svg{width:100%;height:auto;overflow:visible}
.t-titulo{font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:22px;fill:currentColor}
.t-sub{font-family:'Aleo',Georgia,serif;font-size:14px;fill:var(--gris)}
.encaja .esencia-linea{color:var(--warm-white)}
.encaja .t-sub{fill:rgba(255,255,255,.75)}
.linea-movil{display:none}
@media(max-width:47.99rem){
  .esencia-linea{display:none}
  .linea-movil{display:block;margin-top:2rem}
}
.linea-movil .paso{position:relative;padding-left:2.25rem}
.linea-movil .paso::before{
  content:'';position:absolute;left:.25rem;top:.4rem;width:.85rem;height:.85rem;
  border-radius:50%;background:currentColor;
}
.linea-movil h4{font-family:'Gabarito',system-ui,sans-serif;font-size:1.0625rem;margin:0}
.linea-movil p{margin-top:.25rem;font-size:.875rem;color:var(--gris)}
.encaja .linea-movil p{color:rgba(255,255,255,.75)}

/* ---- Esencia: apertura y tagline ---- */
#page-esencia{--acc:var(--amarillo)}
.tagline{
  margin-top:2rem;font-family:'Aleo',Georgia,serif;font-style:normal;
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--carbon);
  padding-left:1.5rem;border-left:3px solid var(--amarillo);max-width:32rem;
}

/* ---- Esencia: los tres elementos ---- */
.elementos{background:var(--crema);padding-block:var(--sp-section)}
.grid-elementos{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.5rem}
@media(min-width:56rem){.grid-elementos{grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:stretch}}
.elemento{background:#F7F4EF;border-radius:16px;padding:clamp(1.6rem,3vw,2.1rem);position:relative;overflow:hidden}
.elemento::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px}
.el-verde::before{background:var(--verde)}
.el-naranja::before{background:var(--naranja)}
.el-azul::before{background:var(--azul)}
.elemento h3{font-size:1.1875rem}
.el-verde h3{color:var(--verde)}
.el-naranja h3{color:var(--naranja)}
.el-azul h3{color:var(--azul)}
.el-sub{margin-top:.3rem;font-family:'Aleo',Georgia,serif;font-style:normal;font-size:.875rem;color:var(--gris)}
.elemento p:not(.el-sub){margin-top:.9rem;font-size:.9375rem;line-height:1.8}
.elemento p:not(.el-sub) + p{margin-top:.8rem}

/* ---- Esencia: el recorrido ---- */
.recorrido{padding-block:var(--sp-section)}
.momentos-esencia{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:2rem}
@media(min-width:64rem){.momentos-esencia{grid-template-columns:repeat(3,1fr);gap:2.25rem;align-items:start}}
.momento-e{padding-top:1.25rem;border-top:3px solid var(--carbon-15)}
.momento-e:nth-child(1){border-top-color:var(--verde)}
.momento-e:nth-child(2){border-top-color:var(--naranja)}
.momento-e:nth-child(3){border-top-color:var(--azul)}
.momento-e h3{font-size:1.1875rem}
.m-sub{margin-top:.3rem;font-family:'Aleo',Georgia,serif;font-style:normal;font-size:.875rem;color:var(--gris)}
.momento-e p:not(.m-sub){margin-top:.9rem;font-size:.9375rem;line-height:1.8}

/* ---- Esencia: de dónde viene ---- */
.origen{background:var(--crema);padding-block:var(--sp-section)}
#page-esencia .cierre{background:var(--warm-white)}

/* ---- Recuadros de modalidades: tres columnas ---- */
@media(min-width:56rem){.grid-mod.tres{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}}
@media(min-width:48rem){.grid-lineas.cuatro{grid-template-columns:repeat(2,1fr)}}

/* ---- Bloque destacado dentro de modalidades ---- */
.destacado{
  margin-top:clamp(2rem,4vw,2.75rem);padding:clamp(1.6rem,3.5vw,2.25rem);
  background:var(--warm-white);border-radius:16px;border-left:4px solid var(--acc);max-width:52rem;
}
.trayectoria-grid{display:grid;gap:2.5rem}
@media(min-width:56rem){.trayectoria-grid{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}}
.trayectoria-grid .voz-mj{margin-top:0}
.pasos-coaching{background:var(--crema);padding-block:var(--sp-section)}
.grid-pasos{margin-top:2.5rem;display:grid;gap:1rem}
@media(min-width:48rem){.grid-pasos{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media(min-width:64rem){.grid-pasos{grid-template-columns:repeat(3,1fr)}}
.paso-c{
  background:var(--warm-white);border-radius:14px;padding:1.35rem 1.5rem;
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
}
.paso-c span{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:1.0625rem;
  color:var(--acc);line-height:1.4;
}
.paso-c p{font-size:.9375rem;line-height:1.7;margin:0}
.grid-formatos{margin-top:2rem;display:grid;gap:1.25rem;max-width:52rem}
@media(min-width:48rem){.grid-formatos{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.formato{background:var(--crema);border-radius:14px;padding:1.5rem;border-left:4px solid var(--acc)}
.formato h3{font-size:1.0625rem}
.formato p{margin-top:.6rem;font-size:.9375rem}
.lista-simple{margin-top:.8rem;padding-left:1.15rem}
.lista-simple li{font-size:.9375rem;line-height:1.8;margin-bottom:.35rem}
.destacado h3{font-size:1.125rem}
.destacado p{margin-top:.8rem;font-size:.9375rem;line-height:1.8}

/* ---- Bloque de la Esencia en la home ---- */
.esencia-home{padding-block:var(--sp-section)}
.grid-esencia-home{margin-top:2.5rem;display:grid;gap:1.5rem}
@media(min-width:56rem){.grid-esencia-home{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.eh-item{padding-top:1.1rem;border-top:3px solid var(--carbon-15)}
.eh-item:nth-child(1){border-top-color:var(--naranja)}
.eh-item:nth-child(2){border-top-color:var(--verde)}
.eh-item:nth-child(3){border-top-color:var(--azul)}
.eh-item h3{font-size:1.0625rem}
.eh-item p{margin-top:.6rem;font-size:.9375rem;line-height:1.75}


/* ============================================
   RITMO VISUAL DE LAS PÁGINAS DE SERVICIO
   A partir de la banda de la Esencia, las
   superficies alternan y el acento de la página
   aparece en los elementos estructurales.
   ============================================ */
.sup-blanco{background:var(--warm-white)}
.sup-crema{background:var(--crema)}

/* Cómo funciona · cada dato con filete del acento */
.practico .dato{padding-top:1rem;border-top:3px solid var(--acc)}
.practico .dato h3{font-size:1rem}
.practico .grid-practico{gap:2rem}
@media(min-width:48rem){.practico .grid-practico{gap:2.25rem}}

/* Bloque de costo · destacado con el acento */
.practico .costo{
  background:#F7F4EF;border-left:5px solid var(--acc);
  border-radius:0 16px 16px 0;
}
.sup-crema .costo{background:var(--warm-white)}
.practico .costo h3{color:var(--acc)}
#page-coaching .practico .costo h3{color:var(--carbon)}

/* Cierre · filete superior del acento sobre el titular */
#page-terapia .cierre h2::before,
#page-psicopedagogia .cierre h2::before,
#page-evaluaciones .cierre h2::before,
#page-coaching .cierre h2::before{
  content:'';display:block;width:3rem;height:4px;border-radius:4px;
  background:var(--acc);margin-bottom:1.25rem;
}

/* Recirculación · items con filete del acento */
.recirc-item{border-left:3px solid transparent;transition:border-color .18s,background .18s}
.recirc-item:hover{border-left-color:var(--acc)}
.sup-crema .recirc-item{background:var(--warm-white)}
.sup-crema .recirc-item:hover{background:#EDEDED}


/* ---- Esencia · hero horizontal, sin fotografía ---- */
.esencia-hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,7vw,5rem)}
.esencia-hero h1{max-width:14ch}
.esencia-hero .hero-lead{margin-top:0}
.esencia-hero .hero-lead + .hero-lead{margin-top:1.25rem}
.esencia-hero .tagline{margin-top:clamp(2.5rem,5vw,3.5rem)}
.franja-elementos{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid var(--carbon-15);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;
}
.fe{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;
  font-size:.9375rem;letter-spacing:.02em;position:relative;padding-left:1.15rem;
}
.fe::before{
  content:'';position:absolute;left:0;top:.45rem;width:.6rem;height:.6rem;
  border-radius:50%;background:currentColor;
}
.fe-verde{color:var(--verde)}
.fe-naranja{color:var(--naranja)}
.fe-azul{color:var(--azul)}


/* ---- Tarjetas de intervención con color permanente ---- */
.linea-serv{border-top-width:4px !important;transition:transform .2s,box-shadow .2s,background .2s}
.ls-verde{border-top-color:var(--verde) !important}
.ls-amarillo{border-top-color:var(--amarillo) !important}
.ls-naranja{border-top-color:var(--naranja) !important}
.ls-carbon{border-top-color:var(--carbon) !important}
.linea-serv h3{transition:color .2s}
.ls-verde h3{color:var(--verde)}
.ls-amarillo h3{color:#C79600}
.ls-naranja h3{color:var(--naranja)}
.ls-carbon h3{color:var(--carbon)}
.linea-serv:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(42,42,39,.09)}
.linea-serv::after{
  content:'→';display:inline-block;margin-top:.9rem;
  font-family:'Gabarito',system-ui,sans-serif;font-size:1.05rem;
  color:var(--azul);opacity:0;transform:translateX(-.35rem);
  transition:opacity .2s,transform .2s;
}
.linea-serv:hover::after,.linea-serv:focus-visible::after{opacity:1;transform:translateX(0)}

/* ---- Instituciones en la home, con imagen ---- */
.inst-home-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:64rem){.inst-home-grid{grid-template-columns:1fr .9fr;gap:clamp(2.5rem,5vw,4rem)}}
.inst-home-foto{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.08)}
.inst-home-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}

/* ---- Psicopedagogía · las dos áreas ---- */
.grid-areas{margin-top:2.75rem;display:grid;gap:1.75rem}
@media(min-width:56rem){.grid-areas{grid-template-columns:repeat(2,1fr);gap:2rem;align-items:stretch}}
.area{background:#F7F4EF;border-radius:16px;padding:clamp(1.75rem,3.5vw,2.5rem);border-top:5px solid var(--acc)}
.area-num{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:1.75rem;
  color:var(--acc);line-height:1;margin:0 0 .75rem;
}
.area h3{font-size:1.125rem;max-width:26ch}
.area p:not(.area-num){margin-top:.85rem;font-size:.9375rem;line-height:1.8}
.areas-cierre{margin-top:2.5rem;max-width:52rem;font-size:.9375rem;color:var(--gris)}
@media(min-width:56rem){
#page-evaluaciones .modalidades .dos-col{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
}
#page-evaluaciones .modalidades .dos-col h2{max-width:none}

/* ---- Terapia · grupos de modalidad ---- */
.grupo-titulo{
  margin-top:clamp(2.5rem,5vw,3.5rem);margin-bottom:1.25rem;
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:.8125rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--acc);
  padding-bottom:.6rem;border-bottom:1px solid var(--carbon-15);
}

/* ---- Convicciones con color ---- */
.cr-verde{border-top-color:var(--verde) !important}
.cr-naranja{border-top-color:var(--naranja) !important}
.cr-azul{border-top-color:var(--azul) !important}
.cr-verde h3{color:var(--verde)}
.cr-naranja h3{color:var(--naranja)}
.cr-azul h3{color:var(--azul)}


/* ============================================================
   PIE DE PÁGINA
   Fondo carbón. La paleta se usa por función: amarillo para
   los rótulos, los colores de cada servicio como identificador
   y azul solo en la acción.
   ============================================================ */
.pie{background:var(--carbon);color:rgba(255,255,255,.75);position:relative}
.pie-linea{display:flex;height:5px}
.pie-linea::before,.pie-linea::after{content:'';flex:1}
.pie-linea{
  background:linear-gradient(90deg,
    var(--amarillo) 0 25%, var(--naranja) 25% 50%,
    var(--verde) 50% 75%, var(--azul) 75% 100%);
}
.pie-alto{
  display:grid;gap:clamp(2.5rem,5vw,3.5rem);
  padding-block:clamp(3rem,6vw,4.5rem) clamp(2.5rem,4vw,3.5rem);
}
.pie-marca-h{
  display:grid;gap:2rem;align-items:end;
  padding-bottom:clamp(2rem,4vw,2.75rem);
  border-bottom:1px solid rgba(255,255,255,.14);
}
@media(min-width:56rem){
  .pie-marca-h{grid-template-columns:minmax(0,1fr) auto;gap:3rem}
  .pie-marca-cta{justify-self:end}
}
.pie-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--crema);color:var(--carbon);
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:.9375rem;
  padding:.85rem 1.75rem;border-radius:999px;text-decoration:none;white-space:nowrap;
  transition:background .18s,transform .18s;
}
.pie-cta:hover{background:var(--warm-white);transform:translateY(-1px)}

/* ---- Bloque de marca ---- */
.pie-logo{display:inline-block}
.pie-logo svg{height:2.4rem;width:auto}
.pie-logo .logo-texto{fill:var(--warm-white)}
.pie-frase{margin-top:1.1rem;font-size:.9375rem;line-height:1.75;max-width:46ch}
.pie-tagline{
  margin-top:1.1rem;font-family:'Aleo',Georgia,serif;font-style:normal;
  font-size:1.0625rem;color:var(--warm-white);
}
.pie-cta{margin-top:1.75rem;display:inline-flex}

/* ---- Columnas ---- */
.pie-navs{display:grid;gap:2.25rem 2rem}
@media(min-width:36rem){.pie-navs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.pie-navs{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 2.5rem}}
.pie-col h3{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:700;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarillo);margin-bottom:1rem;
}
.pie-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pie-col a{
  font-family:'Gabarito',system-ui,sans-serif;font-size:.9375rem;
  color:rgba(255,255,255,.78);text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem;transition:color .18s;
}
.pie-col a:hover{color:var(--warm-white)}
.pt{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.pt-verde{background:var(--verde)}
.pt-amarillo{background:var(--amarillo)}
.pt-naranja{background:var(--naranja)}
.pt-claro{background:rgba(255,255,255,.6)}

/* ---- Contacto y sedes ---- */
.pie-contacto li,.pie-sedes li{display:grid;gap:.15rem}
.pie-contacto span,.pie-sedes span{
  font-family:'Aleo',Georgia,serif;font-size:.8125rem;
  color:rgba(255,255,255,.5);line-height:1.6;
}
.pie-sedes strong{
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:.9375rem;
  color:var(--warm-white);
}
.pie-redes{display:flex;gap:.6rem;margin-top:1.25rem}
.pie-redes a{
  width:2.25rem;height:2.25rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);
  transition:border-color .18s,color .18s,background .18s;
}
.pie-redes a:hover{border-color:var(--amarillo);color:var(--amarillo);background:rgba(255,195,4,.08)}

/* ---- Barra inferior ---- */
.pie-bajo{border-top:1px solid rgba(255,255,255,.14)}
.pie-bajo-in{
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;
  align-items:center;justify-content:space-between;
  padding-block:1.35rem;
}
.pie-bajo p{
  margin:0;font-family:'Gabarito',system-ui,sans-serif;
  font-size:.8125rem;color:rgba(255,255,255,.5);
}
.pie-bajo nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.pie-bajo nav a{
  font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .18s;
}
.pie-bajo nav a:hover{color:var(--amarillo)}
@media(max-width:47.99rem){
  body.cta-activo .pie-bajo{padding-bottom:1rem}
}


/* ============================================================
   NAVEGACIÓN AMPLIADA + MENÚ MÓVIL
   ============================================================ */
.header-inner{gap:1.25rem}
.header .logo{flex-shrink:0}
.nav .drop-toggle svg{flex-shrink:0;width:11px;height:7px}
.header > .wrap.header-inner{max-width:84rem}
.nav{gap:clamp(.85rem,1.3vw,1.4rem)}
.nav > a,.nav .drop-toggle{font-size:.875rem;white-space:nowrap}
.header-cta{flex-shrink:0;padding-inline:1.35rem}
.nav-cta-movil{display:none}
.menu-toggle{
  display:none;appearance:none;background:none;border:0;cursor:pointer;
  width:2.5rem;height:2.5rem;padding:.55rem;margin-left:.25rem;
  flex-direction:column;justify-content:center;gap:5px;
}
.menu-toggle span{display:block;height:2px;border-radius:2px;background:var(--carbon);transition:transform .22s,opacity .22s}
.menu-abierto .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-abierto .menu-toggle span:nth-child(2){opacity:0}
.menu-abierto .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:74.99rem){
  .menu-toggle{display:flex}
  .header-cta{display:none}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--warm-white);border-top:1px solid var(--carbon-15);
    box-shadow:0 14px 30px rgba(42,42,39,.10);
    padding:.5rem clamp(1.25rem,4vw,3rem) 1.5rem;max-height:calc(100vh - 5rem);overflow:auto;
  }
  .menu-abierto .nav{display:flex}
  .nav > a,.nav .drop-toggle{
    font-size:1rem;padding:.95rem 0;border-bottom:1px solid var(--carbon-15);
    text-align:left;width:100%;
  }
  .nav .has-drop{display:block}
  .nav .drop-toggle{display:flex;justify-content:space-between;align-items:center}
  .nav .drop{position:static;box-shadow:none;border:0;padding:0 0 .5rem 1rem;background:none;min-width:0}
  .nav .drop a{padding:.7rem 0}
  .nav > a.nav-cta-movil{display:inline-flex;justify-content:center;margin-top:1.25rem;border-bottom:0;color:var(--warm-white);padding:.95rem 1rem}
  body:has(.menu-abierto) .cta-movil{transform:translateY(105%)}
}


/* ---- Diagrama de la Esencia · versión equilibrada ---- */
.esencia-diagrama{max-width:48rem}
.esencia-diagrama .d-titulo{font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:21px}
.esencia-diagrama .d-sub{font-family:'Aleo',Georgia,serif;font-style:normal;font-size:15px;fill:#4A4A4A}
.esencia-diagrama .d-centro{font-family:'Aleo',Georgia,serif;font-style:normal;font-size:19px;fill:#2A2A27}
.esencia-diagrama-movil .d-titulo{font-family:'Gabarito',system-ui,sans-serif;font-weight:700;font-size:17px}
.esencia-diagrama-movil .d-centro{font-family:'Aleo',Georgia,serif;font-style:normal;font-size:15.5px;fill:#2A2A27}



@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


.razones + .modalidades{padding-top:0}
.modalidades .grupo-titulo:first-of-type{margin-top:2.25rem}

/* ---- Cita destacada ---- */
.cita-seccion{background:var(--crema);padding-block:clamp(2.75rem,5vw,4rem)}
.cita-seccion > .wrap{padding-block:0}
.cita{position:relative;max-width:46rem;margin-inline:auto;text-align:center;padding:0 1.5rem}
.cita-marca{
  display:block;font-family:'Aleo',Georgia,serif;
  font-size:clamp(3rem,6vw,4.5rem);line-height:.55;color:var(--amarillo);
  margin-bottom:.15rem;
}
.cita p{
  font-family:'Aleo',Georgia,serif;font-style:normal;
  line-height:1.4;color:var(--carbon);
}
.cita footer{
  margin-top:1.25rem;font-family:'Gabarito',system-ui,sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);
}
.cita::after{
  content:'';display:block;width:3rem;height:3px;border-radius:3px;
  background:var(--amarillo);margin:1.25rem auto 0;
}

/* ---- Etiquetas de modalidad y títulos de grupo ---- */
.mod .mod-tag{
  font-family:'Gabarito',system-ui,sans-serif;font-size:.6875rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  margin-bottom:.45rem;
}
.mod{display:flex;flex-direction:column}
.grid-mod{align-items:stretch}
.grupo-titulo{
  display:flex;align-items:baseline;gap:.75rem;
  border-bottom:0;padding-bottom:0;margin-bottom:1.1rem;
}
.grupo-titulo::after{content:'';flex:1;height:1px;background:var(--carbon-15)}

/* ---- Tarjetas plegables: resumen + leer más ---- */
.mas{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s ease;
}
.mas > .mas-in{overflow:hidden}
.abierta > .mas{grid-template-rows:1fr}
.mod-total .mas-in p{margin-top:.7rem}
.mod-total .leer-mas{margin-top:.75rem}
.leer-mas{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  margin-top:.9rem;align-self:flex-start;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.02em;color:var(--acc);
  display:inline-flex;align-items:center;gap:.35rem;
}
.leer-mas::after{
  content:'';width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .22s ease;
}
.abierta .leer-mas::after{transform:rotate(-135deg) translateY(-1px)}
.leer-mas:hover{text-decoration:underline;text-underline-offset:3px}
.eval{display:flex;flex-direction:column}
.grid-eval{align-items:stretch}
#page-coaching .leer-mas{color:var(--carbon)}

/* ---- Trastornos · retícula editorial ---- */
.trastornos{padding-block:var(--sp-section)}
.grid-trastornos{margin-top:2.75rem;display:grid;gap:1.75rem 2.5rem}
@media(min-width:48rem){.grid-trastornos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:72rem){.grid-trastornos{grid-template-columns:repeat(4,1fr)}}
.trastorno{padding-top:1.1rem;border-top:3px solid var(--acc)}
.trastorno h3{font-size:1.0625rem;max-width:20ch}
.trastorno p{margin-top:.7rem;font-size:.875rem;line-height:1.75;color:var(--gris)}

/* ---- Ficha de «Cómo funciona» ---- */
.ficha{
  margin-top:2.5rem;background:#F7F4EF;border-radius:18px;overflow:hidden;
  max-width:58rem;box-shadow:0 1px 0 var(--carbon-15);
}
.ficha-fila{
  display:grid;gap:.4rem 2.5rem;
  padding:1.5rem clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--carbon-15);
}
.ficha-fila:first-child{border-top:0}
@media(min-width:48rem){
  .ficha-fila{grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);align-items:baseline}
}
.ficha-fila dt{font-size:.9375rem;color:var(--carbon);position:relative;padding-left:1.1rem;margin:0}
.ficha-fila dt::before{
  content:'';position:absolute;left:0;top:.55rem;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--acc);
}
.ficha-fila dd{margin:0;font-size:.9375rem;line-height:1.8;color:var(--gris)}
.sup-crema .ficha{background:var(--warm-white)}

/* ---- Tres formatos en Colegios ---- */
@media(min-width:56rem){.grid-formatos.tres-f{grid-template-columns:repeat(3,1fr);max-width:none}}

/* ---- Sedes en la home ---- */
.sedes-home{padding-block:clamp(2.5rem,5vw,3.5rem)}
.sedes-home .grid-sedes{margin-top:0;max-width:56rem}

/* ---- Barra fija de acción en móvil ---- */
.cta-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(105%);transition:transform .28s ease;
  background:var(--warm-white);border-top:1px solid var(--carbon-15);
  padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  display:none;box-shadow:0 -6px 22px rgba(42,42,39,.07);
}
.cta-movil a{
  display:block;text-align:center;background:var(--azul);color:var(--warm-white);
  font-family:'Gabarito',system-ui,sans-serif;font-weight:600;font-size:.9375rem;
  padding:.9rem 1rem;border-radius:999px;text-decoration:none;
}
.cta-movil span{
  display:block;text-align:center;margin-top:.4rem;
  font-family:'Gabarito',system-ui,sans-serif;font-size:.75rem;color:var(--gris);
}
@media(max-width:47.99rem){
  .cta-movil{display:block}
  .cta-movil.visible{transform:translateY(0)}
  body.cta-activo{padding-bottom:6.5rem}
}


/* ============================================================
   SISTEMA TIPOGRÁFICO · REVISIÓN DE CONTRASTE
   Gabarito para estructura: titulares de sección, navegación,
   etiquetas y acción. Libre Baskerville para todo lo editorial:
   cuerpo, entradillas y titulares secundarios.
   ============================================================ */

/* ---- Escala más contrastada ---- */
h1{font-size:clamp(2rem,4.2vw,3.15rem);letter-spacing:-.025em;line-height:1.08}
h2{font-size:clamp(1.65rem,3.3vw,2.5rem);letter-spacing:-.022em;line-height:1.14}
body{font-size:1.0625rem;line-height:1.8}

/* ---- Eyebrows con más presencia ---- */
.eyebrow{font-size:.6875rem;letter-spacing:.16em;font-weight:700}

/* ---- Titulares secundarios en Baskerville ----
   Cambia el registro: la estructura la marca Gabarito y el
   contenido lo marca la serif. */
h3,
.mod h3,.eval h3,.elemento h3,.creencia h3,.inst-card h3,
.perfil h3,.area h3,.formato h3,.dato h3,.costo h3,.momento-e h3,
.constante h3,.beneficio h3,.destacado h3,.situaciones-clinicas h3{
  font-family:'Aleo',Georgia,serif;
  font-weight:400;letter-spacing:-.005em;line-height:1.35;
}
.mod h3,.eval h3,.inst-card h3,.elemento h3,.formato h3{font-size:1.1875rem}
.perfil h3{font-size:1.125rem}
.dato h3{font-size:1.0625rem}
h4{font-family:'Aleo',Georgia,serif;font-weight:400}

/* ---- Entradillas de sección en itálica ----
   Un registro intermedio entre el titular y el cuerpo. */
.proceso-lead,.lineas-lead,.modalidades-lead,.equipo-lead,
.hero-lead,.inst-lead,.cierre-texto,.situaciones-lead{
  font-family:'Aleo',Georgia,serif;
  font-style:normal;font-size:clamp(1.05rem,1.8vw,1.1875rem);
  line-height:1.7;color:var(--gris);
}
.inst-lead{color:rgba(255,255,255,.82)}
.encaja p{font-family:'Aleo',Georgia,serif}

/* ---- Etiquetas y datos siguen en Gabarito ---- */
.mod-tag,.rol,.grupo-titulo,.ficha-fila dt,.area-num,.sesiones,
.tema,.razon,.recirc-item,.cta,.cta-note,.link-mas,.nav a,.drop a{
  font-family:'Gabarito',system-ui,sans-serif;
}
.ficha-fila dt{font-family:'Gabarito',system-ui,sans-serif;font-weight:600}

/* ---- Subtítulos descriptivos, más marcados ---- */
.el-sub,.m-sub{
  font-family:'Gabarito',system-ui,sans-serif;font-style:normal;
  font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris);
}

/* ---- Citas, más peso editorial ---- */
.cita p{font-size:clamp(1.45rem,3.4vw,2.15rem)}
.voz-mj p{font-size:clamp(1.15rem,2.1vw,1.35rem)}
.tagline{font-size:clamp(1.1rem,2.1vw,1.3rem)}


/* ============================================================
   CURSIVA SOLO PARA CITAS, FRASES DEL DIAGRAMA Y TAGLINE
   Entradillas y cierres pasan a redonda, conservando el tamaño
   algo mayor que el cuerpo para mantener la jerarquía.
   ============================================================ */
.hero-lead,.inst-lead,.proceso-lead,.lineas-lead,.modalidades-lead,
.equipo-lead,.cierre-texto,.situaciones-lead{font-style:normal}
.etimologia,.foto-pie{
  font-family:'Gabarito',system-ui,sans-serif;font-style:normal;
  font-size:.8125rem;letter-spacing:.01em;color:var(--gris);
}



/* ============================================================
   RAZONES DE CONSULTA · LISTA EDITORIAL SIN CAJAS
   Se lee como frases que la persona reconoce, no como tarjetas,
   y se distingue de las tarjetas de servicios de más abajo.
   ============================================================ */
.razones .lista-razones{
  display:grid !important;grid-template-columns:1fr;gap:0 clamp(2rem,5vw,4.5rem);
  max-width:none;margin-top:clamp(2rem,4vw,2.75rem);
  border-bottom:1px solid var(--carbon-15);
}
@media(min-width:48rem){.razones .lista-razones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.razones .razon{
  flex:none;background:none !important;border:0 !important;border-radius:0;
  border-top:1px solid var(--carbon-15) !important;
  min-height:0;display:block;position:relative;
  padding:1.15rem 0 1.15rem 1.9rem;
  font-family:'Aleo',Georgia,serif;font-size:clamp(1rem,1.5vw,1.0625rem);
  line-height:1.6;color:var(--carbon);
}
.razones .razon::before{
  content:'';position:absolute;left:.15rem;top:1.72rem;
  width:.55rem;height:.55rem;border-radius:50%;background:var(--acc);
}
#page-coaching .razones .razon::before{background:var(--carbon)}


/* ============================================================
   HABILÉ v2 · CAPA DE MEJORAS DE CONVERSIÓN (auditoría 28-09-2026)
   Se apoya en los tokens del manual. No cambia la paleta ni las
   tipografías: agrega versiones oscuras de cada color SOLO para
   texto (WCAG AA 4,5:1) y los componentes nuevos.
   ============================================================ */
:root{
  color-scheme:light;
  --verde-t:#1E7430;     /* 5,3:1 sobre warm white */
  --naranja-t:#9E4E00;   /* 5,4:1 */
  --amarillo-t:#7A5C00;  /* 5,7:1 */
  --carbon-70:rgba(42,42,39,.76);
}
#page-home,#page-terapia,#page-sobre{--acc-t:var(--verde-t)}
#page-psicopedagogia,#page-esencia,#page-instituciones{--acc-t:var(--amarillo-t)}
#page-evaluaciones{--acc-t:var(--naranja-t)}
#page-coaching{--acc-t:var(--carbon)}

/* ---- Hallazgo 7 · contraste: el tono vivo queda en líneas y puntos, el texto usa la versión oscura ---- */
.serv-hero .eyebrow,.mod .mod-tag,.grupo-titulo,.leer-mas,.paso-c span,.area-num,
.practico .costo h3,.equipo-full .perfil .rol{color:var(--acc-t)}
.ls-verde h3,.el-verde h3,.cr-verde h3,.fe-verde,.equipo-full .perfil:first-child .rol,.perfil:nth-child(2) .rol{color:var(--verde-t)}
.ls-amarillo h3{color:var(--amarillo-t)}
.ls-naranja h3,.el-naranja h3,.cr-naranja h3,.fe-naranja,.perfil .rol,.voz-firma,.voz-mj footer{color:var(--naranja-t)}
.equipo-full .perfil .rol{color:var(--acc-t)}
.equipo-full .perfil:first-child .rol{color:var(--verde-t)}
#page-home .perfil:nth-child(2) .rol{color:var(--verde-t)}
.fe-verde::before{background:var(--verde)}.fe-naranja::before{background:var(--naranja)}

/* ---- Accesibilidad básica ---- */
.skip{position:absolute;left:-999px;top:0;z-index:100}
.skip:focus{left:1rem;top:1rem;background:var(--warm-white);padding:.6rem 1rem;border-radius:8px;font-family:'Gabarito',system-ui,sans-serif}
.site-header{top:env(safe-area-inset-top,0px)}
.nav a.is-current{color:var(--carbon);font-weight:600;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:.45rem}

/* ---- Datos por completar (se retiran al publicar) ---- */
.ph{font-style:normal;background:#FFF1C2;color:var(--carbon);border:1px dashed #C79600;border-radius:4px;padding:0 .3em;white-space:nowrap}
.pie .ph,.inst-hero .ph{background:rgba(255,195,4,.18);color:var(--warm-white)}

/* ---- Hallazgo 4 · antetítulo ---- */
.antetitulo{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-bottom:1.25rem;color:var(--carbon)}
.antetitulo span{color:var(--carbon-70);font-weight:600}
.antetitulo span::before{content:'';display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--verde);margin-right:.6rem;vertical-align:.1em}

/* ---- Hallazgo 3 · reductores de ansiedad junto al CTA ---- */
.reductores{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;
  font-family:'Gabarito',system-ui,sans-serif;font-size:var(--fs-small);color:var(--carbon-70);line-height:1.5}
.reductores li{position:relative;padding-left:.95rem}
.reductores li::before{content:'';position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;background:var(--verde)}
.reductores li:nth-child(2)::before{background:var(--naranja)}
.reductores li:nth-child(3)::before{background:var(--amarillo)}
.reductores li:nth-child(4)::before{background:var(--azul)}
.hero .reductores,.serv-hero .reductores{max-width:36rem}
.reductores.claro{color:rgba(255,255,255,.82)}
.cierre .reductores{margin-top:1rem}

/* ---- Hallazgo 1 · ruta por segmento (usa la tarjeta .situacion del sistema) ---- */
.ruta{padding-block:clamp(3rem,6vw,4.5rem)}
.ruta h2{max-width:none}
.grid-situaciones.cuatro{margin-top:2rem}
@media(min-width:64rem){.grid-situaciones.cuatro{grid-template-columns:repeat(4,1fr)}}
.ruta .situacion{min-height:8.5rem}
.ruta .situacion span{font-size:1.1875rem;font-weight:600}
.ruta .situacion em{color:var(--carbon-70)}
.ruta .situacion::before{transform:scaleX(1);height:4px}

/* ---- Hallazgo 5 · prueba social ---- */
.confianza{padding-block:clamp(2rem,4vw,2.75rem);border-bottom:1px solid var(--carbon-15)}
.confianza-in{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:56rem){.confianza-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dato-c{display:grid;gap:.2rem;padding-left:1rem;border-left:3px solid var(--carbon-15)}
.dato-c:nth-child(1){border-left-color:var(--amarillo)}
.dato-c:nth-child(2){border-left-color:var(--naranja)}
.dato-c:nth-child(3){border-left-color:var(--verde)}
.dato-c:nth-child(4){border-left-color:var(--azul)}
.dato-c b{font-family:'Gabarito',system-ui,sans-serif;font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;color:var(--carbon);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dato-c span{font-family:'Gabarito',system-ui,sans-serif;font-size:var(--fs-small);color:var(--gris);line-height:1.45}
.logos-c{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1.75rem}
.logos-t{font-family:'Gabarito',system-ui,sans-serif;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-70);margin-right:.5rem}
.logo-slot{font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem;color:var(--gris);border:1px dashed var(--carbon-15);border-radius:10px;padding:.55rem 1rem;background:var(--warm-white)}
.logos-inst{padding-block:1.75rem;border-bottom:1px solid var(--carbon-15)}
.logos-inst .logos-c{margin-top:0}
.perfil .colegiatura{margin-top:.15rem !important;font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem !important;color:var(--carbon-70) !important;line-height:1.4 !important}

/* ---- Hallazgo 8 · ¿Te suena? con pestañas ---- */
.te-suena{background:var(--crema)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.tab{appearance:none;cursor:pointer;font-family:'Gabarito',system-ui,sans-serif;font-size:.9375rem;font-weight:600;
  padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid var(--carbon-15);background:var(--warm-white);color:var(--carbon);transition:background .18s,border-color .18s}
.tab:hover{border-color:var(--carbon)}
.tab[aria-selected="true"]{background:var(--carbon);border-color:var(--carbon);color:var(--warm-white)}
.te-suena .razon{text-decoration:none;transition:color .18s}
.te-suena .razon::after{content:'→';position:absolute;right:.25rem;top:1.15rem;font-family:'Gabarito',system-ui,sans-serif;color:var(--azul);opacity:.55;transition:opacity .18s,transform .18s}
.te-suena .razon{padding-right:2rem !important}
.te-suena a.razon:hover::after{opacity:1;transform:translateX(3px)}
.seg-hijo .razon::before{background:var(--amarillo) !important}
.seg-yo .razon::before{background:var(--verde) !important}
.seg-pareja .razon::before{background:var(--naranja) !important}
.seg-institucion .razon::before{background:var(--azul) !important}
.te-suena .hero-action{margin-top:2rem}

/* ---- Pasos: qué pasa cuando escribes ---- */
.como-empieza{padding-block:var(--sp-section)}
.pasos-3 .eh-item:nth-child(1){border-top-color:var(--verde)}
.pasos-3 .eh-item:nth-child(2){border-top-color:var(--naranja)}
.pasos-3 .eh-item:nth-child(3){border-top-color:var(--azul)}
.paso-n{font-family:'Gabarito',system-ui,sans-serif;font-size:.6875rem !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-70);margin:0 0 .4rem !important}

/* ---- Hallazgo 9 · tarjetas de servicio que se ven clicables ---- */
.linea-serv::after{content:'Ver más →';opacity:1;transform:none;font-size:.9375rem;font-weight:600}

/* ---- Instituciones · camino B2B propio ---- */
.inst-acciones{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2.25rem}
.inst-acciones .reductores{flex-basis:100%}
.cta-sec{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:var(--warm-white)}
.cta-sec:hover,.cta-sec:focus-visible{background:rgba(255,255,255,.1)}
.caso{padding-block:var(--sp-section)}
.caso .voz-mj{margin-top:1.75rem}

/* ---- Pie ---- */
.pie-virtual{margin-top:1rem;font-family:'Gabarito',system-ui,sans-serif;font-size:.8125rem;color:rgba(255,255,255,.6)}
.pie-bajo nav a.libro{border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.2rem .55rem}

/* ---- Anclas bajo cabecera fija ---- */
[id]{scroll-margin-top:6rem}

/* ============================================================
   v3 · TIPOGRAFÍA DE UNA SOLA FAMILIA (Gabarito 400 / 700)
   La jerarquía se construye con tamaño, peso, caja y color,
   no con el cambio de familia. Sin cursivas (Gabarito no las tiene).
   ============================================================ */
body{font-family:'Gabarito',system-ui,sans-serif;font-size:1.0625rem;line-height:1.7;letter-spacing:.003em}
h1{font-weight:700;letter-spacing:-.03em;line-height:1.05}
h2{font-weight:700;letter-spacing:-.025em;line-height:1.1}
h3,.mod h3,.eval h3,.elemento h3,.creencia h3,.inst-card h3,.perfil h3,.area h3,.formato h3,.dato h3,.costo h3,
.momento-e h3,.constante h3,.beneficio h3,.destacado h3{font-weight:700;letter-spacing:-.01em;line-height:1.3}
.hero-lead,.inst-lead,.proceso-lead,.lineas-lead,.modalidades-lead,.equipo-lead,.cierre-texto,.situaciones-lead{
  font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.6;color:var(--carbon)}
.inst-lead{color:rgba(255,255,255,.86)}
/* Las citas se distinguen por escala, peso y filete (ya no por cursiva) */
.cita p{font-weight:700;letter-spacing:-.02em;line-height:1.25;font-size:clamp(1.5rem,3.4vw,2.3rem)}
.voz-mj p,.voz-texto p{font-weight:400;color:var(--carbon)}
.voz-mj p{font-size:clamp(1.2rem,2.1vw,1.4rem);line-height:1.5}
.tagline{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.9375rem !important;line-height:1.5}
.razones .razon{font-size:1.0625rem;line-height:1.5}
.d-centro,.esencia-diagrama .d-centro,.esencia-diagrama-movil .d-centro{font-family:'Gabarito',system-ui,sans-serif;font-style:normal;font-weight:700}
.d-sub,.esencia-diagrama .d-sub{font-family:'Gabarito',system-ui,sans-serif;font-style:normal}
.momento:last-child h3,.momento-full:last-child h3{font-family:'Gabarito',system-ui,sans-serif;font-style:normal;font-weight:700}

/* ============================================================
   v3 · SUPERFICIES: cada sección cambia de fondo respecto a la
   anterior. Seis superficies del manual, con acentos por página.
   ============================================================ */
#contenido section.s-crema{background:var(--crema)}
#contenido section.s-blanco{background:#F7F4EF}
#contenido section.s-tinte{background:color-mix(in srgb,var(--acc) 13%,var(--warm-white))}
#page-coaching section.s-tinte{background:color-mix(in srgb,var(--carbon) 8%,var(--warm-white))}
#contenido section.s-carbon{background:var(--carbon);color:rgba(255,255,255,.84)}
#contenido section.s-amarillo{background:var(--amarillo);color:var(--carbon)}
/* filete de 4 colores al inicio de cada banda oscura o amarilla: marca el cambio de capítulo */
#contenido section.s-carbon,#contenido section.s-amarillo{position:relative}
#contenido section.s-carbon::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--amarillo) 0 25%,var(--naranja) 25% 50%,var(--verde) 50% 75%,var(--azul) 75% 100%)}
/* texto sobre carbón */
.s-carbon h2,.s-carbon h3{color:var(--warm-white)}
.s-carbon p,.s-carbon .proceso-lead,.s-carbon .lineas-lead{color:rgba(255,255,255,.84)}
.s-carbon .eyebrow,.s-carbon .paso-n,.s-carbon .link-mas{color:var(--amarillo)}
.s-carbon .eh-item{border-top-color:rgba(255,255,255,.25)}
.s-carbon .ficha{background:var(--warm-white)}
.s-carbon .ficha-fila dd{color:var(--gris)}
.s-carbon .ph{background:rgba(255,195,4,.2);color:var(--warm-white)}
/* texto sobre amarillo */
.s-amarillo h2,.s-amarillo h3,.s-amarillo p,.s-amarillo .cita p{color:var(--carbon)}
.s-amarillo .cita-marca{color:var(--carbon)}
.s-amarillo .cita::after{background:var(--carbon)}
.s-amarillo .cita footer{color:var(--carbon)}
/* tarjetas: siempre en contraste con la superficie que las contiene */
.s-blanco .mod,.s-blanco .eval,.s-blanco .elemento,.s-blanco .area,.s-blanco .inst-card,.s-blanco .sede-card,
.s-blanco .situacion,.s-blanco .formato,.s-blanco .tema,.s-blanco .paso-c,.s-blanco .recirc-item,
.s-blanco .constantes,.s-blanco .destacado,.s-blanco .costo,.s-blanco .ficha,.s-blanco .perfil{background:var(--crema)}
.s-crema .mod,.s-crema .eval,.s-crema .elemento,.s-crema .area,.s-crema .inst-card,.s-crema .sede-card,
.s-crema .situacion,.s-crema .paso-c,.s-crema .recirc-item,.s-crema .destacado,.s-crema .ficha,
.s-crema .equipo-full .perfil,.s-crema .perfil{background:#F7F4EF}
.s-tinte .recirc-item,.s-tinte .paso-c,.s-tinte .destacado{background:#F7F4EF}
.s-crema .tema,.s-crema .formato{background:#F7F4EF}
.s-blanco .logo-slot{background:var(--warm-white)}

/* ============================================================
   v3 · VALORES (Sobre Habilé)
   ============================================================ */
.valores{padding-block:var(--sp-section)}
.grid-valores{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:2rem 2.5rem;grid-template-columns:1fr}
@media(min-width:40rem){.grid-valores{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid-valores{grid-template-columns:repeat(3,1fr)}}
.valor{padding-top:1.25rem;border-top:4px solid var(--c)}
.v-verde{--c:var(--verde)}.v-naranja{--c:var(--naranja)}.v-amarillo{--c:var(--amarillo)}.v-azul{--c:#6F8CF0}
.valor-n{font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--c);margin:0}
.valor h3{margin-top:.5rem;font-size:clamp(1.25rem,2.2vw,1.5rem);text-transform:uppercase;letter-spacing:.04em;color:var(--warm-white)}
.valor p:not(.valor-n){margin-top:.75rem;font-size:.9875rem;line-height:1.65}

/* ============================================================
   v3 · MENÚ con «Otros servicios»
   ============================================================ */
.drop-toggle.is-current{color:var(--carbon);font-weight:700;text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:.45rem}
.drop a[aria-current="page"]{background:var(--crema);font-weight:700}


/* ============================================================
   v4 · ALINEACIÓN AL MANUAL DE MARCA (Identidad de Marca, marzo)
   Paleta: Amarillo #FFC304 · Naranja #FF921E · Verde #39B44A ·
           Azul #0F3CC1 · Negro #2A2A27 (+ blanco y gris claro de soporte)
   Tipografía principal: Gabarito (titulares y textos destacados)
   Tipografía secundaria: Aleo (cuerpos de texto; reemplaza a Libre Baskerville)
   ============================================================ */
:root{
  --warm-white:#FFFFFF;
  --crema:#F2F2F2;
  --carbon:#2A2A27;
  --gris:#4A4A4A;
  --carbon-70:rgba(42,42,39,.70);
  --carbon-15:rgba(42,42,39,.12);
  --amarillo:#FFC304;--naranja:#FF921E;--verde:#39B44A;--azul:#0F3CC1;--azul-dark:#0A2E96;
  /* versiones para texto pequeño (AA). Los colores puros se usan en bloques, líneas y titulares grandes */
  --verde-t:#1E7430;--naranja-t:#9E4E00;--amarillo-t:#7A5C00;
  --verde-display:#2E9A3E; /* verde de marca ajustado para titulares grandes (≥3:1) */
  --f-titulo:'Gabarito',system-ui,sans-serif;
  --f-texto:'Aleo',Georgia,serif;
}
body{background:#F7F4EF;color:var(--gris);font-family:var(--f-texto);font-weight:400;font-size:1.0625rem;line-height:1.7;letter-spacing:0}
.site-header{background:rgba(247,244,239,.96)}

/* Titulares: Gabarito */
h1,h2,h3,h4,.eyebrow,.cta,.cta-note,.link-mas,.nav a,.drop a,.drop-toggle,.mod-tag,.rol,.grupo-titulo,.ficha-fila dt,
.area-num,.tema,.recirc-item,.situacion span,.situacion em,.tab,.dato-c b,.dato-c span,.logos-t,.valor-m h3,.paso-n,
.reductores,.cta-movil a,.cta-movil span,.pie-col h3,.pie-col a,.pie-sedes strong,.pie-bajo p,.pie-bajo nav a,.pie-cta{font-family:var(--f-titulo)}
h1{font-weight:600;letter-spacing:-.035em;line-height:1.05}
h2{font-weight:600;letter-spacing:-.03em;line-height:1.1}
h3,.mod h3,.eval h3,.elemento h3,.creencia h3,.inst-card h3,.perfil h3,.area h3,.formato h3,.dato h3,.costo h3,
.momento-e h3,.constante h3,.beneficio h3,.destacado h3{font-family:var(--f-titulo);font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--carbon)}
.eyebrow{font-weight:700;letter-spacing:.16em}
.cta{font-weight:600}

/* Cuerpos: Aleo */
p,li,dd,.razon,.razones .razon,.voz-texto p,.voz-bio,.foto-pie,.etimologia,.situaciones-lead,.d-sub{font-family:var(--f-texto)}
.hero-lead,.inst-lead,.proceso-lead,.lineas-lead,.modalidades-lead,.equipo-lead,.cierre-texto,.situaciones-lead{
  font-family:var(--f-texto);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.25rem);line-height:1.6;color:var(--carbon)}
.inst-lead{color:rgba(255,255,255,.88)}
.razones .razon{font-weight:400;color:var(--carbon)}
.voz-texto p{font-weight:300;font-size:clamp(1.05rem,1.7vw,1.15rem);color:var(--carbon)}
.voz-texto p strong{font-weight:600}

/* Citas y frases de marca: Gabarito, escala grande (el manual no usa cursivas) */
.cita p{font-family:var(--f-titulo);font-weight:500;letter-spacing:-.02em;line-height:1.25;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--carbon)}
.voz-mj p{font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.45;color:var(--carbon)}
.tagline{font-family:var(--f-titulo);font-weight:600;text-transform:none;letter-spacing:-.01em;font-size:clamp(1.15rem,2vw,1.35rem) !important;color:var(--carbon)}
.d-centro,.esencia-diagrama .d-centro,.esencia-diagrama-movil .d-centro{font-family:var(--f-titulo);font-weight:600;fill:#2A2A27}
.d-titulo{font-family:var(--f-titulo)}
.d-sub,.esencia-diagrama .d-sub{font-family:var(--f-texto);fill:#4A4A4A}
.momento:last-child h3,.momento-full:last-child h3{font-family:var(--f-titulo);font-weight:600}

/* Titular display (Propósito, Misión, Visión, Valores): como en el manual, grande y de trazo medio */
.display{font-family:var(--f-titulo);font-weight:500;font-size:clamp(3rem,7vw,5.25rem);letter-spacing:-.05em;line-height:.95}

/* ---- Superficies en la paleta del manual ---- */
#contenido section.s-crema{background:var(--crema)}
#contenido section.s-blanco{background:#F7F4EF}
#contenido section.s-carbon{background:#2A2A27}
#contenido section.s-amarillo{background:var(--amarillo)}
#contenido section.s-verde{background:var(--verde)}
.s-crema .mod,.s-crema .eval,.s-crema .elemento,.s-crema .area,.s-crema .inst-card,.s-crema .sede-card,.s-crema .situacion,
.s-crema .paso-c,.s-crema .recirc-item,.s-crema .destacado,.s-crema .ficha,.s-crema .perfil,.s-crema .tema,.s-crema .formato{background:#F7F4EF}
.s-blanco .mod,.s-blanco .eval,.s-blanco .elemento,.s-blanco .area,.s-blanco .inst-card,.s-blanco .sede-card,.s-blanco .situacion,
.s-blanco .formato,.s-blanco .tema,.s-blanco .paso-c,.s-blanco .recirc-item,.s-blanco .destacado,.s-blanco .costo,.s-blanco .ficha,.s-blanco .perfil{background:var(--crema)}
.s-carbon .ficha{background:#F7F4EF}
.logo-slot{background:#F7F4EF}
.ph{background:#FFF3C4;border-color:#C79600}

/* Hero con foto: velo blanco (antes cálido) */
.hero-foto::after{background:
  linear-gradient(255deg, rgba(247,244,239,.12) 0%, rgba(247,244,239,.55) 28%, rgba(247,244,239,.93) 56%, #F7F4EF 74%),
  linear-gradient(0deg, color-mix(in srgb, var(--acc) 12%, transparent), color-mix(in srgb, var(--acc) 12%, transparent))}
@media(max-width:63.99rem){.hero-foto::after{background:
  linear-gradient(180deg, rgba(247,244,239,.92) 0%, rgba(247,244,239,.88) 45%, rgba(247,244,239,.74) 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--acc) 12%, transparent), color-mix(in srgb, var(--acc) 12%, transparent))}}
.inst-hero::after{background:linear-gradient(255deg, rgba(42,42,39,.55) 0%, rgba(42,42,39,.84) 34%, rgba(42,42,39,.96) 62%, #2A2A27 80%)}

/* ============================================================
   NOSOTROS · Propósito, Misión y Visión, Valores (contenido del manual)
   ============================================================ */
.proposito{padding-block:var(--sp-section);overflow:hidden}
.proposito-grid{display:grid;gap:2.5rem;align-items:center;position:relative}
@media(min-width:56rem){.proposito-grid{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,6vw,5rem)}}
.proposito .display{margin-top:.5rem;color:var(--carbon)}
.proposito .display::after{content:'';display:block;width:4.5rem;height:6px;border-radius:6px;background:var(--amarillo);margin-top:1.25rem}
.proposito-texto{margin-top:1.75rem;font-family:var(--f-texto);font-weight:300;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.55;color:var(--carbon);max-width:34rem}
.proposito-foto{position:relative;margin:0;border-radius:4px;overflow:hidden;aspect-ratio:4/5;max-width:28rem;justify-self:end;
  box-shadow:1.6rem 1.6rem 0 var(--amarillo)}
.proposito-foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:55.99rem){.proposito-foto{justify-self:start;aspect-ratio:4/3;box-shadow:1rem 1rem 0 var(--amarillo)}}
.ondas{position:absolute;right:-2%;bottom:-3.5rem;width:min(38rem,70%);height:auto;opacity:.9;pointer-events:none;z-index:0}
.proposito-foto{z-index:1}
@media(max-width:55.99rem){.ondas{display:none}}

.mision-vision{padding-block:var(--sp-section);position:relative}
.mv-grid{display:grid;gap:3rem}
@media(min-width:56rem){.mv-grid{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem)}}
.mv .display{color:var(--verde-display)}
.mv p{margin-top:1.5rem;font-family:var(--f-texto);font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.6;color:var(--carbon);max-width:32rem}
@media(min-width:56rem){.mision-vision::after{content:'';position:absolute;top:0;right:0;bottom:0;width:clamp(2.5rem,6vw,6rem);background:var(--verde)}}

.valores-marca{padding-block:var(--sp-section)}
.valores-marca .display{color:var(--verde-display)}
.grid-valores-m{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:40rem){.grid-valores-m{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.grid-valores-m{grid-template-columns:repeat(6,1fr)}
  .valor-m{grid-column:span 2}
  .valor-m:nth-child(4){grid-column:2 / span 2}
  .valor-m:nth-child(5){grid-column:4 / span 2}}
.valor-m{background:color-mix(in srgb,var(--verde) 16%,#FFFFFF);border-radius:18px;padding:clamp(1.5rem,3vw,2.1rem);border-top:5px solid var(--verde)}
.valor-m h3{font-family:var(--f-titulo);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.2;color:#0F3D17}
.valor-m p{margin-top:.8rem;font-family:var(--f-texto);font-size:.9875rem;line-height:1.65;color:#1F2A20}

/* texto sobre carbón y amarillo con el negro del manual */
.s-carbon h2,.s-carbon h3,.s-carbon .tagline{color:#FFFFFF}
.s-carbon .tagline{border-left-color:var(--amarillo)}
.s-carbon .trabaja-body p{color:rgba(255,255,255,.86)}
.s-amarillo h2,.s-amarillo h3,.s-amarillo p{color:#2A2A27}


/* ============================================================
   v5 · CAMBIOS APROBADOS (reunión 29.09.26 + revisión con EC)
   Solo se modifica lo acordado. Los fondos se mantienen como en la v4.
   ============================================================ */

/* Tipografía secundaria: Aleo (reemplaza a Libre Baskerville / Figtree) */
:root{--f-texto:'Aleo',Georgia,serif}

/* Sin negro: carbón #2A2A27 para texto y fondos oscuros; gris cálido #4E4E49 (el negro queda solo en el logo) */
:root{--carbon:#2A2A27;--gris:#4E4E49;--carbon-70:rgba(42,42,39,.70);--carbon-15:rgba(42,42,39,.12)}
#contenido section.s-carbon{background:#2A2A27}
.pie{background:#2A2A27}
.inst-hero{background:#2A2A27}
.d-centro,.esencia-diagrama .d-centro,.esencia-diagrama-movil .d-centro{fill:var(--carbon)}
.d-sub,.esencia-diagrama .d-sub{fill:var(--gris)}
.s-amarillo h2,.s-amarillo h3,.s-amarillo p,.s-amarillo .cita p,.s-amarillo .cita footer,.s-amarillo .cita-marca{color:var(--carbon)}

/* Antetítulo de la portada del inicio, más grande */
.antetitulo{font-size:.9375rem;letter-spacing:.06em;gap:.4rem 1.25rem}
.antetitulo span{font-size:.9375rem}

/* Menú: letra más grande, opciones juntas y efecto de botón al pasar el mouse */
.nav > a,.nav .drop-toggle{font-size:clamp(.9375rem,1.15vw,1.0625rem);color:var(--carbon)}
@media(min-width:75rem){
  .nav{margin-left:auto;gap:.2rem;align-items:center}
  .header-cta{margin-left:.75rem}
  .nav .has-drop{display:inline-flex;align-items:center;position:relative}
  .nav > a,.nav .drop-toggle{display:inline-flex;align-items:center;gap:.4rem;line-height:1.25;
    padding:.5rem .8rem;border-radius:999px;transition:background .18s,color .18s,box-shadow .18s}
  .nav > a.nav-cta-movil{display:none}
  .nav > a:hover,.nav .drop-toggle:hover,.nav > a:focus-visible,.nav .drop-toggle:focus-visible,.has-drop.is-open .drop-toggle{
    background:var(--crema);color:var(--carbon);box-shadow:inset 0 -2px 0 var(--amarillo)}
  .nav a.is-current,.drop-toggle.is-current{background:var(--crema);font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--amarillo)}
}
.drop a:hover,.drop a:focus-visible{background:var(--crema);color:var(--carbon)}

/* Inicio · Quiénes somos (texto del brochure) */
.sobre-habile{padding-block:var(--sp-section)}
.sobre-body > p{font-size:clamp(1.05rem,1.6vw,1.15rem);line-height:1.75;color:var(--carbon)}
.sobre-prop-t{margin-top:2rem;font-family:var(--f-titulo);font-weight:600;font-size:.75rem !important;letter-spacing:.16em;text-transform:uppercase;color:var(--carbon-70) !important}
.sobre-prop{margin:.75rem 0 0;padding-left:1.25rem;border-left:4px solid var(--amarillo)}
.sobre-prop p{font-family:var(--f-texto);font-style:italic;font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.55;color:var(--carbon)}

/* Han confiado en nosotros (frase en lugar de logos) */
.confian{padding-block:clamp(2.5rem,5vw,3.5rem)}
.confian-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.5rem}
.confian-t{font-family:var(--f-titulo);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:-.02em;color:var(--carbon);line-height:1.25}
.dato-c b{line-height:1.15}

/* Blanco de fondo -> warm white #F7F4EF (el resto de fondos como en la v4) */
:root{--warm-white:#F7F4EF}
body{background:#F7F4EF}

/* Sin verde agua de fondo: las secciones con tinte verde pasan al gris de la página de Coaching */
#page-home section.s-tinte,#page-terapia section.s-tinte,#page-sobre section.s-tinte,#page-home .te-suena{
  background:color-mix(in srgb,var(--carbon) 8%,var(--warm-white))}

/* Gris claro #F2F2F2 -> crema del manual #EDE9E1 */
:root{--crema:#EDE9E1}
.menu-toggle{color:var(--carbon)}

/* Cierres y secciones con tinte: todos en crema #EDE9E1 (sin gris ni tintes por página) */
#contenido section.s-tinte,#page-home section.s-tinte,#page-terapia section.s-tinte,#page-sobre section.s-tinte,
#page-coaching section.s-tinte,#page-evaluaciones section.s-tinte,#page-psicopedagogia section.s-tinte,
#page-instituciones section.s-tinte,#page-home .te-suena{background:var(--crema)}

/* Colegios y empresas · "Cómo funciona": fondo del mismo color que la tabla */
#page-instituciones section.practico.s-carbon{background:var(--warm-white);color:var(--gris)}
#page-instituciones section.practico.s-carbon h2,#page-instituciones section.practico.s-carbon h3{color:var(--carbon)}
#page-instituciones section.practico.s-carbon p{color:var(--gris)}

/* Nosotros · "El criterio se sostiene en equipo": de amarillo a crema */
#page-sobre section.supervision.s-amarillo{background:var(--crema)}

/* Nosotros · Nuestras convicciones */
.convicciones{padding-block:var(--sp-section)}
.conv-lead{margin-top:1.25rem;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--gris);max-width:44rem}
.conv-lista{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;gap:1rem}
.conv{display:grid;grid-template-columns:2.5rem 1fr;gap:.5rem 1.25rem;align-items:center;background:var(--crema);border-radius:10px;padding:1.5rem clamp(1.25rem,3vw,2.25rem)}
.conv-n{font-family:var(--f-titulo);font-weight:700;font-size:1.75rem;color:var(--amarillo);line-height:1}
.conv h3{font-family:var(--f-titulo);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--carbon);letter-spacing:-.01em;line-height:1.3;margin:0}
.conv p{grid-column:2;font-size:.9875rem;line-height:1.6;color:var(--gris);margin:0}
@media(min-width:56rem){
  .conv{grid-template-columns:2.5rem minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
  .conv p{grid-column:3}
}
@media(max-width:55.99rem){.conv{align-items:start}.conv-n{padding-top:.1rem}}
.s-crema .conv{background:var(--warm-white)}

/* Inicio · "Elige un camino…": mismo grosor que el resto de textos en Aleo */
.situaciones-lead{font-weight:400}

/* Nosotros · Nuestro propósito */
.proposito-n{padding-block:clamp(3.5rem,7vw,5.5rem)}
.prop-n{margin-top:1.25rem;max-width:52rem}
.prop-n p{font-size:clamp(1.3rem,2.6vw,1.75rem) !important;line-height:1.5}

/* Nosotros · Nuestros valores (mismo formato que las convicciones) */
.valores-n{padding-block:var(--sp-section)}

/* Blog · espacio para foto arriba del título de cada entrada */
.blog-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;margin:0 0 1.1rem;border-radius:10px;
  background:var(--crema);font-family:var(--f-titulo);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-70)}

/* Nosotros · espacios de equipo por completar */
.perfil-ph .perfil-foto{background:var(--warm-white)}

/* Nosotros · Sedes: espacio para foto del local y mapa de Google */
.sede-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;margin:0 0 1.1rem;border-radius:10px;
  background:var(--crema);font-family:var(--f-titulo);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-70)}
.s-blanco .sede-card .sede-foto{background:var(--warm-white)}
.sede-mapa{margin-top:1.1rem;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--warm-white)}
.sede-mapa iframe{display:block;width:100%;height:100%;border:0}

/* v5.20 · Coaching: espacio para 2 perfiles de coaches (pendiente de datos) */
.coach-equipo{margin-top:2rem;gap:1.75rem}
.coach-equipo .perfil-foto{width:clamp(88px,14vw,120px);background:var(--warm-white)}

/* v5.21 · Inicio: "Quiénes somos" fusionado con la trayectoria */
.sobre-voz .voz-mj{margin-top:clamp(3rem,6vw,4.5rem)}
.sobre-voz .foto-ancha{margin-top:clamp(2rem,4vw,3rem)}