/* ==========================================================================
   Ebelin Huamani — hoja de estilos del sitio (home y páginas de servicio)
   Sistema de color y tipografía: Manual de Marca v1.0 "Autoridad Cálida".
   ========================================================================== */

:root{
  /* Paleta oficial (manual pág. 05) */
  --navy:#0B1F3A;
  --navy-rgb:11,31,58;
  --navy-deep:#071527;
  --coral:#F26A3D;
  --coral-dark:#D94E24;
  --coral-dark-rgb:217,78,36;
  --coral-lift:#FF8455;      /* hover: aclara para que el texto navy gane contraste */
  --coral-ink:#C84821;       /* coral legible: 4.8:1 en blanco, 4.6:1 en crema */
  --coral-ink-2:#AE3C1B;     /* coral legible sobre el suave #FFE3D6 (5.0:1); el anterior se queda en 3.9 */
  --amber:#F2B544;
  --amber-rgb:242,181,68;
  --cream:#FFF8F2;
  --cream-rgb:255,248,242;
  --cream-soft:#FFE3D6;
  --surface:#FFFFFF;
  --ink:#142033;
  --ink-2:#68707D;
  --border:#E6D9CF;

  /* Reglas sobre navy */
  --rule-dark:rgba(var(--cream-rgb),.16);
  --rule-dark-soft:rgba(var(--cream-rgb),.09);

  /* Los tres pilares son un código de color que se repite en toda la página.
     "Gestión" es navy por marca, así que sobre bandas navy se invierte a crema. */
  --p-gestion:var(--navy);
  --p-prevencion:var(--coral);
  --p-personas:var(--amber);

  /* Campos del diagrama. Los cruces son mezclas aclaradas: donde dos pilares
     se tocan aparece un color que no estaba en ninguno de los dos. */
  --venn-gestion:#3E5878;
  --venn-prevencion:var(--coral);
  --venn-personas:var(--amber);
  --venn-mix-gp:#F58A63;
  --venn-mix-ge:#F7C86F;
  --venn-mix-pe:#F58A3F;
  --venn-core:var(--navy);
  --venn-on-dark:var(--cream);
  --venn-on-light:var(--navy);

  --shell:1240px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.8s;

  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --display:'Montserrat', var(--sans);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.625;
  -webkit-font-smoothing:antialiased;
  /* Sin overflow-x:hidden a proposito: enmascara desbordes reales en vez de
     corregirlos, y sobre body puede romper el position:sticky de la cabecera.
     El ancho esta verificado de 360 a 1920px. */
}

/* height:auto es obligatorio: los atributos width/height del HTML entran como
   declaraciones de la hoja del navegador y, sin esto, deforman la imagen. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

/* --- superficies del navegador: nada se queda con el default -------------- */
::selection{background:var(--coral); color:var(--navy)}
body{caret-color:var(--coral-dark)}
:where(.band--navy,.band--deep) ::selection{background:var(--amber); color:var(--navy)}

*{scrollbar-width:thin; scrollbar-color:var(--coral) var(--cream-soft)}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--cream-soft)}
::-webkit-scrollbar-thumb{background:var(--coral); border-radius:99px; border:3px solid var(--cream-soft)}
::-webkit-scrollbar-thumb:hover{background:var(--coral-dark)}

:focus-visible{
  outline:3px solid var(--coral-dark);
  outline-offset:3px;
  border-radius:3px;
}
.band--navy :focus-visible,.band--deep :focus-visible,.site-head :focus-visible{
  outline-color:var(--amber);
}

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--amber); color:var(--navy);
  padding:.7rem 1.15rem; border-radius:99px;
  font-weight:600; font-size:.9rem; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

/* --- tipografía ----------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  margin:0;
  line-height:1.1;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1{font-weight:900; font-size:clamp(2.45rem,5.4vw,4.15rem)}
/* Por debajo de 380px "organizaciones" no cabe en una línea al mínimo del clamp. */
@media (max-width:379px){ h1{font-size:2.05rem} .contact-mail{font-size:.88rem} }
h2{font-weight:800; font-size:clamp(1.85rem,3.4vw,2.65rem)}
h3{font-weight:700; font-size:clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.02em}
h4{font-weight:700; font-size:1rem; letter-spacing:-.01em}
p{margin:0}

.lede{
  font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.6;
  max-width:62ch;
}
.body-copy{max-width:68ch}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* --- layout --------------------------------------------------------------- */
.shell{width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto}

.band{padding-block:clamp(4.25rem,8vw,7.5rem); position:relative}
.band--cream{background:var(--cream); color:var(--ink)}
.band--navy{background:var(--navy); color:var(--cream)}
.band--deep{background:var(--navy-deep); color:var(--cream)}
.band--coral{background:var(--coral); color:var(--navy)}

.band--navy,.band--deep{
  --p-gestion:var(--cream);          /* navy sobre navy no se lee: el rol se conserva, el valor no */
  --ink-2:rgba(var(--cream-rgb),.72);
  --border:var(--rule-dark);
}
.band--coral{
  --ink-2:var(--navy);
  --border:rgba(var(--navy-rgb),.22);
}
/* Sobre coral solo hay texto navy: el ambar y el crema no alcanzan 4.5:1 ahi. */
.band--coral .tlink{color:var(--navy)}
.band--coral .btn--ghost{color:var(--navy); border-color:rgba(var(--navy-rgb),.4)}
.band--coral .btn--ghost:hover,.band--coral .btn--ghost:focus-visible{color:var(--navy); border-color:var(--navy)}
.cell--act .tlink,.cell--act:hover .tlink{color:var(--navy)}

/* Una columna de grid implícita se dimensiona por max-content, así que un SVG o
   una imagen con ancho intrínseco revienta el ancho del móvil. minmax(0,1fr)
   fija la columna al espacio disponible; los media queries de abajo la reemplazan. */
.hero-grid,.approach,.train-wrap,.proof,.three,.contact-grid,.foot-grid,
.posts,.prog,.quote,.method-steps,.wants,.assocs,.ventures,.advisory-list,
.train-panel dl,.foot-col ul,.methodology,.cases,.creds,.field{
  grid-template-columns:minmax(0,1fr);
}

/* Encabezado de sección: más aire arriba que abajo. */
.sec-head{margin-bottom:clamp(2.5rem,4vw,3.75rem); max-width:60ch}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head p{margin-top:1rem; color:var(--ink-2); font-size:1.05rem}

/* --- iconografía ---------------------------------------------------------- */
.ico{
  width:1.5rem; height:1.5rem; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.ico--lg{width:2.1rem; height:2.1rem; stroke-width:1.35}
.ico--sm{width:1.15rem; height:1.15rem; stroke-width:1.7}

/* --- botones -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.95rem 1.6rem;
  border-radius:99px;
  border:1.5px solid transparent;
  font-family:var(--display);
  font-weight:700; font-size:.945rem; letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn .ico{width:1.05rem; height:1.05rem; stroke-width:2; transition:transform .35s var(--ease)}
.btn:hover .ico,.btn:focus-visible .ico{transform:translateX(4px)}

/* Primario: coral con texto navy — 5.43:1, y es el par que manda el manual. */
.btn--primary{background:var(--coral); color:var(--navy); border-color:var(--coral)}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--coral-lift); border-color:var(--coral-lift);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(var(--coral-dark-rgb),.85);
}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{background:transparent; color:var(--cream); border-color:rgba(var(--cream-rgb),.45)}
.btn--ghost:hover,.btn--ghost:focus-visible{
  border-color:var(--amber); color:var(--amber); transform:translateY(-2px);
}

.btn--ink{background:var(--navy); color:var(--cream); border-color:var(--navy)}
.btn--ink:hover,.btn--ink:focus-visible{
  background:var(--navy-deep); border-color:var(--navy-deep);
  transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(var(--navy-rgb),.6);
}

.btn--outline{background:transparent; color:var(--navy); border-color:rgba(var(--navy-rgb),.32)}
.btn--outline:hover,.btn--outline:focus-visible{border-color:var(--navy); transform:translateY(-2px)}

/* Enlace de texto: subrayado que crece, no sólo color. */
.tlink{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-weight:700; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--coral-ink);
  padding-bottom:2px; position:relative;
}
.band--navy .tlink,.band--deep .tlink{color:var(--amber)}
.tlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink .ico{width:.95rem; height:.95rem; stroke-width:2.2; transition:transform .35s var(--ease)}
.tlink:hover .ico{transform:translateX(3px)}

/* ==========================================================================
   Cabecera
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:1px solid var(--rule-dark);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-head.is-stuck{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
.head-in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:76px;
}
.brand{display:flex; align-items:center; gap:.9rem; text-decoration:none; flex:none}
.brand img{height:30px; width:auto}
.brand-tag{
  display:none;
  padding-left:.9rem; border-left:1px solid var(--rule-dark);
  font-size:.72rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--amber); line-height:1.5;
}
@media (min-width:1280px){ .brand-tag{display:block} }

.nav{margin-left:auto; display:none}
.nav ul{display:flex; align-items:center; gap:clamp(.9rem,1.7vw,1.6rem); list-style:none; margin:0; padding:0}
.nav a{
  position:relative; display:block; padding:.4rem 0;
  font-size:.82rem; font-weight:600; letter-spacing:.055em;
  text-transform:uppercase; text-decoration:none; color:var(--cream);
  transition:color .25s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--amber)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:var(--amber)}
@media (min-width:1100px){ .nav{display:block} }

.head-cta{display:none; flex:none}
@media (min-width:1100px){ .head-cta{display:inline-flex; padding:.72rem 1.25rem; font-size:.85rem} }

.burger{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:transparent; border:1.5px solid var(--rule-dark);
  color:var(--cream); cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.burger:hover{border-color:var(--amber); color:var(--amber)}
@media (min-width:1100px){ .burger{display:none} }
.burger .ico{width:1.35rem; height:1.35rem}
.burger .ico-close{display:none}
.burger[aria-expanded="true"] .ico-open{display:none}
.burger[aria-expanded="true"] .ico-close{display:block}

.drawer{
  display:none;
  border-top:1px solid var(--rule-dark);
  padding:1.25rem 0 2rem;
}
.drawer.is-open{display:block}
@media (min-width:1100px){ .drawer{display:none !important} }
.drawer ul{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.15rem}
.drawer a{
  display:block; padding:.75rem 0;
  border-bottom:1px solid var(--rule-dark-soft);
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  text-decoration:none; color:var(--cream);
}
.drawer a:hover{color:var(--amber)}
.drawer .btn{width:100%; justify-content:center}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--cream);
  padding-block:clamp(3rem,6vw,5rem) 0;
  --p-gestion:var(--cream);   /* el pilar navy se invierte sobre fondo navy */
  --ink-2:rgba(var(--cream-rgb),.72);
}
/* En móvil manda el orden del DOM: titular, retrato, prueba y acción — el
   mensaje entra en el primer viewport. En escritorio las áreas recolocan el
   retrato a la izquierda, ocupando las dos filas. */
.hero-grid{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  align-items:end;
  /* Movil: el mensaje primero y ella cierra la banda. El retrato tiene que ser
     el ultimo elemento porque la foto termina en un corte plano y los circulos
     se derraman por debajo de su caja: apoyados contra el borde de la banda,
     el corte queda invisible y los arcos no pisan ningun texto. */
  grid-template-areas:"head" "copy" "art";
}
.hero-head{grid-area:head}
.hero-copy{grid-area:copy}
.hero-art{grid-area:art}
@media (max-width:999px){
  .hero-copy{padding-bottom:0}
  .hero-grid{gap:clamp(1.5rem,4vw,2.25rem)}
}
@media (min-width:1000px){
  .hero-grid{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    grid-template-areas:"art head" "art copy";
    gap:0 clamp(2rem,4vw,4rem);
  }
  .hero-head{align-self:end}
  .hero-copy{align-self:start}
}

/* Arcos y círculos orgánicos del manual (pág. 07) — formas planas, sin degradados. */
.hero-art{position:relative; align-self:end; min-height:340px}
.hero-art::before,
.hero-art::after{content:''; position:absolute; border-radius:50%; pointer-events:none}
.hero-art::before{
  width:min(105%,520px); aspect-ratio:1;
  left:50%; bottom:-8%; transform:translateX(-50%);
  background:var(--coral);
}
.hero-art::after{
  width:min(126%,620px); aspect-ratio:1;
  left:50%; bottom:-16%; transform:translateX(-50%);
  border:1.5px solid rgba(var(--amber-rgb),.55);
}
/* En escritorio los arcos se quedan dentro de la columna del retrato. Sin este
   tope, el aro ambar cruzaba a la columna de texto entre 1000 y 1366px y rozaba
   "Consultoria" y "+14 anos". Va despues de la base: un media query no suma
   especificidad, asi que manda el orden en el archivo. */
@media (min-width:1000px){
  .hero-art::before{width:min(100%,500px)}
  .hero-art::after{width:min(108%,560px)}
}
.hero-photo{
  position:relative; z-index:2;
  display:block; margin:0 auto;
  width:min(100%,430px); height:auto;
}

.hero-copy{padding-bottom:clamp(2.5rem,6vw,5.5rem)}
.hero-head{margin-bottom:.25rem}
.hero h1{margin-bottom:0}
@media (min-width:1000px){ .hero-head{margin-bottom:1.5rem} }
.hero h1 .g{color:var(--p-gestion)}
.hero h1 .p{color:var(--p-prevencion)}
.hero h1 .e{color:var(--p-personas)}

.hero-disciplines{
  display:flex; flex-wrap:wrap; gap:.45rem 1.15rem;
  margin-bottom:2.25rem;
  font-size:.8rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(var(--cream-rgb),.82);
}
.hero-disciplines li{list-style:none; display:flex; align-items:center; gap:1.15rem}
.hero-disciplines li:not(:last-child)::after{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--coral);
}
.hero-disciplines{padding:0; margin-left:0}

.creds{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.5rem 1.25rem;
  margin:0 0 2.5rem; padding:1.75rem 0 0;
  list-style:none;
  border-top:1px solid var(--rule-dark);
}
@media (min-width:560px){ .creds{grid-template-columns:repeat(3,1fr)} }
/* Cinco credenciales piden cinco columnas: en cuatro, la quinta queda huérfana. */
@media (min-width:1000px){ .creds{grid-template-columns:repeat(5,1fr); gap:1.25rem .9rem} }
.creds li{display:grid; gap:.6rem; align-content:start}
.creds .ico{color:var(--amber)}
.creds b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.02rem; letter-spacing:-.01em; line-height:1.25;
}
.creds span{font-size:.82rem; line-height:1.45; color:rgba(var(--cream-rgb),.72)}

.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem}

/* ==========================================================================
   Servicios — un solo campo demarcado, no seis tarjetas sueltas
   ========================================================================== */
/* Las divisorias son el hueco del grid teñido, no bordes por celda:
   así ninguna regla se dibuja dos veces contra el borde exterior. */
.field{
  background:var(--border);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  display:grid; gap:1px;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .field{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){
  .field{grid-template-columns:repeat(4,1fr)}
  .cell--lead{grid-column:span 2}
}

.cell{
  position:relative;
  display:flex; flex-direction:column;
  gap:.85rem;
  padding:clamp(1.6rem,2.4vw,2.15rem);
  text-decoration:none; color:inherit;
  background:var(--surface);
  transition:background-color .3s var(--ease);
}
.cell:hover,.cell:focus-visible{background:var(--cream)}
.cell .ico{color:var(--coral-dark); transition:transform .35s var(--ease)}
.cell:hover .ico{transform:translateY(-3px)}
.cell h3{
  font-size:1.06rem; text-transform:uppercase; letter-spacing:.02em;
  font-weight:800; line-height:1.25;
}
.cell p{font-size:.925rem; line-height:1.6; color:var(--ink-2); flex:1}
.cell .tlink{margin-top:.35rem; align-self:flex-start; font-size:.78rem}
.cell--lead h3{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.cell--lead p{font-size:1rem; max-width:44ch}

/* La celda de acción: en un campo demarcado, la zona de acción se pinta. */
.cell--act{
  background:var(--coral); color:var(--navy);
  justify-content:center; gap:.7rem;
}
.cell--act:hover,.cell--act:focus-visible{background:var(--coral-lift)}
.cell--act h3{font-size:1.06rem; text-transform:none; letter-spacing:-.015em}
.cell--act p{color:var(--navy); font-size:.9rem}
.cell--act .tlink{color:var(--navy)}

/* ==========================================================================
   Enfoque — el momento firmado de la página
   ========================================================================== */
.approach{
  display:grid; gap:clamp(2.75rem,5vw,4rem);
  align-items:center;
}
@media (min-width:1100px){
  .approach{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,.92fr)}
}
.approach h2 .g{color:var(--p-gestion)}
.approach h2 .p{color:var(--p-prevencion)}
.approach h2 .e{color:var(--p-personas)}
.approach h2 .op{color:rgba(var(--cream-rgb),.4); font-weight:700}
.approach-copy p{margin:1.5rem 0 2rem; color:rgba(var(--cream-rgb),.78); max-width:44ch}

.venn{width:100%; max-width:460px; margin-inline:auto; display:block; overflow:visible}
/* Los cruces se pintan como regiones recortadas, no con mix-blend-mode:
   el modo de fusión sobre grupos SVG no es fiable y, cuando falla, los tres
   campos se ensucian en vez de iluminarse. Esto siempre da el mismo resultado. */
.venn text{font-family:var(--display)}
.venn .v-title{font-weight:800; font-size:16px; letter-spacing:.04em}
.venn .v-item{font-family:var(--sans); font-size:12.5px; font-weight:400}
.venn .on-dark{fill:var(--venn-on-dark)}
.venn .on-light{fill:var(--venn-on-light)}
.venn .v-core{font-weight:800; font-size:13.5px; letter-spacing:.06em; fill:var(--venn-on-dark)}
.venn .lobe--g circle{fill:var(--venn-gestion); stroke:var(--venn-on-dark)}
.venn .lobe--p circle{fill:var(--venn-prevencion)}
.venn .lobe--e circle{fill:var(--venn-personas)}
.venn .mix-gp circle{fill:var(--venn-mix-gp)}
.venn .mix-ge circle{fill:var(--venn-mix-ge)}
.venn .mix-pe circle{fill:var(--venn-mix-pe)}
.venn .core circle{fill:var(--venn-core); stroke:var(--venn-on-dark)}
.venn .method-line,.method-line{stroke:var(--coral)}

.method{display:grid; gap:0; align-content:start}
.method h3{
  font-size:clamp(1.75rem,2.7vw,2.3rem); font-weight:900;
  line-height:1.08; margin-bottom:1.75rem;
}
.method h3 span{display:block}
.method h3 .arrow{color:var(--coral)}
.method-steps{list-style:none; margin:0; padding:0; display:grid; gap:1.35rem; position:relative}
.method-steps li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.method-steps .ico{color:var(--amber); margin-top:.15rem}
.method-steps b{font-family:var(--display); font-weight:800; letter-spacing:.02em}
.method-steps p{font-size:.925rem; color:rgba(var(--cream-rgb),.75); line-height:1.55}

/* ==========================================================================
   Capacitaciones
   ========================================================================== */
.train-wrap{display:grid; gap:clamp(1.5rem,2.5vw,2rem)}
@media (min-width:1080px){ .train-wrap{grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start} }

.train-grid{display:grid; gap:clamp(1.25rem,2vw,1.75rem); grid-template-columns:1fr}
@media (min-width:620px){ .train-grid{grid-template-columns:repeat(2,1fr)} }

.prog{display:grid; gap:1rem}
.prog-shot{
  position:relative; overflow:hidden; border-radius:5px;
  background:var(--navy); aspect-ratio:3/2;
}
.prog-shot img{
  width:100%; height:100%; object-fit:cover;
  /* Tratamiento del manual: estética natural, sin filtros pesados. */
  filter:saturate(.92) contrast(1.04);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.prog-shot::after{
  content:''; position:absolute; inset:0;
  background:var(--navy); opacity:.2;
  transition:opacity .5s var(--ease);
}
.prog:hover .prog-shot img{transform:scale(1.045); filter:saturate(1) contrast(1.02)}
.prog:hover .prog-shot::after{opacity:.06}
.prog h3{
  font-size:1rem; text-transform:uppercase; letter-spacing:.03em; font-weight:800;
}
.prog p{font-size:.92rem; color:var(--ink-2); line-height:1.6; max-width:40ch}

.train-panel{
  background:var(--navy); color:var(--cream);
  border-radius:6px;
  padding:clamp(1.75rem,3vw,2.5rem);
  display:grid; gap:1.35rem; align-content:start;
}
/* El panel acompaña la altura de las cuatro fichas; el CTA cierra abajo. */
@media (min-width:1080px){
  .train-panel{height:100%; align-content:space-between}
  .train-panel .btn{align-self:end}
}
.train-panel .ico{color:var(--amber)}
.train-panel h3{font-size:1.28rem; line-height:1.25; font-weight:800}
.train-panel dl{margin:0; display:grid; gap:1rem}
.train-panel dt{
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:.2rem;
}
.train-panel dd{margin:0; font-size:.95rem; color:rgba(var(--cream-rgb),.82)}
.train-panel .btn{justify-content:center; margin-top:.35rem}

.methodology{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.5rem 1.25rem;
  list-style:none; margin:clamp(2.5rem,4vw,3.5rem) 0 0; padding:2rem 0 0;
  border-top:1px solid var(--border);
}
.methodology li{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:center}
.methodology .ico{color:var(--coral-dark)}
.methodology b{font-family:var(--display); font-weight:700; font-size:.92rem; line-height:1.35}

/* ==========================================================================
   Experiencia — casos, testimonio, marquesina
   ========================================================================== */
.proof{display:grid; gap:clamp(2.5rem,4vw,3.5rem)}
@media (min-width:980px){ .proof{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }

.cases{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 1.75rem;
  grid-template-columns:1fr;
}
@media (min-width:520px){ .cases{grid-template-columns:repeat(2,1fr)} }
.cases li{
  display:grid; gap:.7rem; align-content:start;
  padding:1.4rem 0;
  border-top:1px solid var(--rule-dark);
}
.cases .ico{color:var(--amber)}
.cases b{font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.35}

.quote{
  background:rgba(var(--cream-rgb),.05);
  border:1px solid var(--rule-dark);
  border-radius:6px;
  padding:clamp(1.75rem,3vw,2.5rem);
  display:grid; gap:1.5rem; align-content:start;
}
.quote .mark{color:var(--coral); width:2.4rem; height:2.4rem; stroke-width:1.2}
.quote blockquote{
  margin:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.08rem,1.7vw,1.32rem); line-height:1.45;
  letter-spacing:-.015em;
}
.quote figcaption{
  display:grid; gap:.15rem;
  padding-top:1.25rem; border-top:1px solid var(--rule-dark);
  font-size:.88rem;
}
.quote figcaption b{font-weight:600; font-family:var(--display)}
.quote figcaption span{color:rgba(var(--cream-rgb),.62)}

/* Marquesina de organizaciones */
.orgs{margin-top:clamp(3rem,5vw,4.5rem); padding-top:clamp(2.5rem,4vw,3.25rem); border-top:1px solid var(--rule-dark)}
.orgs h3{text-align:center; font-size:1.05rem; font-weight:700; margin-bottom:.5rem}
.orgs .orgs-note{
  text-align:center; font-size:.82rem; color:rgba(var(--cream-rgb),.6);
  margin-bottom:2.25rem;
}
.rail{position:relative; overflow:hidden; margin-bottom:1.5rem}
.rail::before,.rail::after{
  content:''; position:absolute; top:0; bottom:0; width:9rem; z-index:2; pointer-events:none;
}
.rail::before{left:0; background:linear-gradient(90deg,var(--navy),rgba(var(--navy-rgb),0))}
.rail::after{right:0; background:linear-gradient(270deg,var(--navy),rgba(var(--navy-rgb),0))}
.rail-label{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); text-align:center; margin-bottom:.85rem;
}
.rail-track{display:flex; width:max-content; animation:slide 38s linear infinite}
.rail--rev .rail-track{animation-duration:46s; animation-direction:reverse}
.rail:hover .rail-track,.rail:focus-within .rail-track{animation-play-state:paused}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.wordmark{
  flex:none;
  padding:.65rem clamp(1.4rem,3vw,2.6rem);
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,1.9vw,1.45rem);
  letter-spacing:.035em; text-transform:uppercase;
  color:rgba(var(--cream-rgb),.72);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.wordmark:hover{color:var(--cream)}
.wordmark--allied{font-size:clamp(.92rem,1.5vw,1.15rem); letter-spacing:.06em; font-weight:700}

@media (prefers-reduced-motion:reduce){
  .rail{overflow:visible}
  .rail::before,.rail::after{display:none}
  .rail-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .rail-track [data-dupe]{display:none}
}

/* ==========================================================================
   Empresaria / asociaciones / advisory
   ========================================================================== */
.three{display:grid; gap:clamp(2rem,3.5vw,3rem)}
@media (min-width:980px){ .three{grid-template-columns:repeat(3,1fr); align-items:start} }

.col-head{margin-bottom:1.5rem}
.col-head h3{margin-bottom:.65rem}
.col-head p{font-size:.94rem; color:var(--ink-2); line-height:1.6}

.ventures{
  list-style:none; margin:0 0 1.5rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:5px; overflow:hidden;
}
.ventures li{background:var(--surface); padding:1.1rem .9rem; display:grid; gap:.2rem; align-content:center}
.ventures b{
  font-family:var(--display); font-weight:800; font-size:.98rem;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.2;
}
.ventures span{font-size:.72rem; color:var(--ink-2); letter-spacing:.03em}

.assocs{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:1.35rem}
.assocs li{
  display:grid; gap:.4rem;
  padding-bottom:1.35rem; border-bottom:1px solid var(--border);
}
.assocs li:last-child{border-bottom:0; padding-bottom:0}
.assocs b{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:.03em; text-transform:uppercase;
}
.assocs p{font-size:.9rem; color:var(--ink-2); line-height:1.6}

.advisory{
  background:var(--coral); color:var(--navy);
  border-radius:6px; padding:clamp(1.75rem,3vw,2.35rem);
  display:grid; gap:1.5rem; align-content:start;
}
.advisory .col-head p{color:var(--navy)}
.advisory-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1.1rem .85rem;
}
.advisory-list li{display:grid; gap:.5rem; font-size:.8rem; font-weight:600; line-height:1.35}
.advisory-list .ico{color:var(--navy)}
.advisory .btn{justify-content:center}

/* ==========================================================================
   Insights — tipográficos: existen los titulares, no los artículos
   ========================================================================== */
.posts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--rule-dark);
  border:1px solid var(--rule-dark); border-radius:6px; overflow:hidden;
}
@media (min-width:700px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .posts{grid-template-columns:repeat(4,1fr)} }
.posts li{background:var(--navy)}
.posts a{
  display:grid; gap:1rem; align-content:start;
  height:100%; padding:clamp(1.5rem,2.4vw,2rem);
  text-decoration:none;
  transition:background-color .3s var(--ease);
}
.posts a:hover,.posts a:focus-visible{background:rgba(var(--cream-rgb),.05)}
.posts .ico{color:var(--coral); transition:transform .35s var(--ease)}
.posts a:hover .ico{transform:translateY(-3px)}
.tag{
  justify-self:start;
  padding:.3rem .72rem; border-radius:99px;
  border:1px solid rgba(var(--amber-rgb),.5);
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber);
}
.posts h3{font-size:1.05rem; line-height:1.3; font-weight:700}

/* ==========================================================================
   Contacto — el cierre, coral a sangre
   ========================================================================== */
.contact{position:relative; overflow:hidden}
.contact-grid{display:grid; gap:clamp(2.5rem,4vw,3.5rem); align-items:end}
@media (min-width:980px){ .contact-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.contact h2{max-width:16ch; margin-bottom:2rem}

.wants{list-style:none; margin:0 0 2.25rem; padding:0; display:grid; gap:0; max-width:34rem}
.wants li{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid rgba(var(--navy-rgb),.18);
  font-family:var(--display); font-weight:600; font-size:1rem;
}
.wants .ico{color:var(--navy); width:1.3rem; height:1.3rem}

.contact-photo{position:relative; align-self:end}
.contact-photo::before{
  content:''; position:absolute; inset:auto 0 0 0;
  height:74%; border-radius:6px 6px 0 0;
  background:var(--navy);
}
.contact-photo img{position:relative; z-index:2; margin:0 auto; width:min(100%,380px)}
.contact-mail{
  display:inline-flex; align-items:center; gap:.65rem;
  margin-top:1.5rem;
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--navy); text-decoration:none;
  text-underline-offset:5px; text-decoration-thickness:1.5px;
}
.contact-mail:hover{text-decoration:underline}

/* ==========================================================================
   Pie
   ========================================================================== */
.site-foot{background:var(--navy-deep); color:var(--cream); padding-block:clamp(3.25rem,5vw,4.5rem) 2rem}
.foot-grid{display:grid; gap:clamp(2rem,3.5vw,3rem)}
@media (min-width:760px){ .foot-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr} }

.foot-brand img{height:34px; width:auto; margin-bottom:1.15rem}
.foot-brand p{font-size:.9rem; color:rgba(var(--cream-rgb),.66); line-height:1.65; max-width:32ch}
.foot-tag{
  margin-top:1.15rem; font-size:.72rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--amber);
}
.foot-col h3{
  font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.15rem;
}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.foot-col a,.foot-col li{font-size:.9rem; color:rgba(var(--cream-rgb),.72); text-decoration:none}
.foot-col a{transition:color .25s var(--ease)}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--amber)}
.foot-contact li{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start}
.foot-contact .ico{color:var(--coral); margin-top:.15rem}
.foot-contact a{color:var(--cream)}

.foot-base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.75rem;
  border-top:1px solid var(--rule-dark-soft);
  font-size:.8rem; color:rgba(var(--cream-rgb),.55);
}
.foot-base p{margin:0}

/* ==========================================================================
   Movimiento — una gramática, una sola vez, y apagable
   ========================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 85ms);
}
.js [data-reveal].is-in{opacity:1; transform:none}

/* Entrada del hero: el disco se abre, el aro lo sigue y ella aterriza encima.
   El retrato es lo único del hero que antes no se movía. */
.js .hero-art::before{
  transform:translateX(-50%) scale(.34); opacity:0;
  transition:transform 1s var(--ease), opacity .55s var(--ease);
}
.js .hero-art::after{
  transform:translateX(-50%) scale(.6); opacity:0;
  transition:transform 1.15s var(--ease) .12s, opacity .7s var(--ease) .12s;
}
.js .hero-art.is-in::before,
.js .hero-art.is-in::after{transform:translateX(-50%) scale(1); opacity:1}

.js .hero-photo{
  opacity:0; transform:translateY(48px) scale(.985);
  transition:opacity .85s var(--ease) .2s, transform 1.05s var(--ease) .2s;
}
.js .hero-art.is-in .hero-photo{opacity:1; transform:none}

/* Parallax: ella queda por detrás del ritmo del scroll y el hero gana capas.
   Se mueve hacia ABAJO a propósito — hacia arriba destaparía el corte plano
   de la foto, que hoy vive escondido contra el borde de la banda. */
.hero-photo-wrap{transform:translateY(var(--par,0px))}

/* El momento firmado: los tres campos entran separados y convergen. */
.js .venn .lobe{
  opacity:0;
  transform-box:view-box; transform-origin:200px 200px;
  transition:opacity 1s var(--ease), transform 1.15s var(--ease);
  transition-delay:calc(var(--i,0) * 150ms);
}
.js .venn .lobe--g{transform:translate(0,-58px) scale(.82)}
.js .venn .lobe--p{transform:translate(-58px,42px) scale(.82)}
.js .venn .lobe--e{transform:translate(58px,42px) scale(.82)}
.js .venn.is-in .lobe{opacity:1; transform:none}

/* Los cruces llegan después de la convergencia: primero se tocan, luego mezclan. */
.js .venn .mixes{opacity:0; transition:opacity .65s var(--ease) .78s}
.js .venn.is-in .mixes{opacity:1}

.js .venn .core{
  opacity:0; transform-box:view-box; transform-origin:200px 214px; transform:scale(.4);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
  transition-delay:.62s;
}
.js .venn.is-in .core{opacity:1; transform:none}

.js .venn .v-title,.js .venn .v-item{
  opacity:0; transition:opacity .7s var(--ease);
  transition-delay:calc(.72s + var(--i,0) * 90ms);
}
.js .venn.is-in .v-title,.js .venn.is-in .v-item{opacity:1}

/* La línea del método se dibuja. */
.js .method-line{
  stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.4s var(--ease) .2s;
}
.js .method-line.is-in{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal],.js .venn .lobe,.js .venn .core,.js .venn .mixes,
  .js .venn .v-title,.js .venn .v-item,.js .hero-photo{opacity:1 !important; transform:none !important}
  .js .hero-art::before,.js .hero-art::after{opacity:1 !important; transform:translateX(-50%) !important}
  .hero-photo-wrap{transform:none !important}
  .js .method-line{stroke-dashoffset:0 !important}
}

/* ==========================================================================
   Paleta Marfil — aplicación web del Manual de Marca (pág. 09).
   El marfil manda la página, el navy queda para títulos y pie, el coral
   para los llamados a la acción. Las bandas que el sistema base pinta
   oscuras se voltean a claro aquí, por eso este bloque va al final: manda
   el orden en el archivo, no la especificidad.
   ========================================================================== */

/* Las bandas claras alternan marfil y el suave del manual. Sin eso, hero y
   servicios comparten fondo, el borde donde ella se apoya desaparece y su
   recorte queda flotando en mitad de un vacío. */
:root{--ink-2:#54606E}          /* legible en marfil (6.1) y en suave (5.3) */
.band--cream{background:#FFE3D6}

/* Cabecera de marfil: el logo pasa a la versión navy en el HTML. */
.site-head{background:var(--cream); border-bottom:1px solid var(--border)}
.site-head.is-stuck{box-shadow:0 10px 26px -20px rgba(11,31,58,.5)}
.nav a{color:var(--navy)}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="true"]{color:var(--coral-ink)}
.nav a::after{background:var(--coral)}
.brand-tag{color:var(--coral-ink); border-left-color:var(--border)}
.burger{color:var(--navy); border-color:var(--border)}
.burger:hover{border-color:var(--coral); color:var(--coral-ink)}
.drawer{border-top-color:var(--border)}
.drawer a{color:var(--navy); border-bottom-color:var(--border)}
.drawer a:hover{color:var(--coral-ink)}
.site-head :focus-visible{outline-color:var(--coral-dark)}

/* Las cuatro bandas oscuras pasan a claro. El fondo va con valor literal:
   la regla redefine --cream en su propio bloque, así que var(--cream) aquí
   ya resolvería al navy nuevo y pintaría la banda de oscuro. */
.hero{background:#FFF8F2;
    --cream:#0B1F3A;
    --cream-rgb:11,31,58;
    --amber:#A8341C;
    --rule-dark:rgba(11,31,58,.14);
    --rule-dark-soft:rgba(11,31,58,.08);
    /* Titulares en navy con una sola palabra de acento. El ámbar del código de
       pilares no puede ser texto sobre claro (1.74) y su sustituto accesible
       es un ocre que ensucia el titular; el código sobrevive en el diagrama. */
    --p-gestion:#0B1F3A;
    --p-prevencion:#C84821;
    --p-personas:#0B1F3A;
    --border:rgba(11,31,58,.14);
    color:var(--ink);
}
#enfoque,#experiencia{background:#FFF8F2;
    --cream:#0B1F3A;
    --cream-rgb:11,31,58;
    --amber:#A8341C;
    --rule-dark:rgba(11,31,58,.14);
    --rule-dark-soft:rgba(11,31,58,.08);
    /* Titulares en navy con una sola palabra de acento. El ámbar del código de
       pilares no puede ser texto sobre claro (1.74) y su sustituto accesible
       es un ocre que ensucia el titular; el código sobrevive en el diagrama. */
    --p-gestion:#0B1F3A;
    --p-prevencion:#C84821;
    --p-personas:#0B1F3A;
    --border:rgba(11,31,58,.14);
    color:var(--ink);
 --ink-2:#54606E; --border:rgba(11,31,58,.16)}
#insights{background:#FFF8F2;
    --cream:#0B1F3A;
    --cream-rgb:11,31,58;
    --amber:#A8341C;
    --rule-dark:rgba(11,31,58,.14);
    --rule-dark-soft:rgba(11,31,58,.08);
    /* Titulares en navy con una sola palabra de acento. El ámbar del código de
       pilares no puede ser texto sobre claro (1.74) y su sustituto accesible
       es un ocre que ensucia el titular; el código sobrevive en el diagrama. */
    --p-gestion:#0B1F3A;
    --p-prevencion:#C84821;
    --p-personas:#0B1F3A;
    --border:rgba(11,31,58,.14);
    color:var(--ink);
}

/* Hero: ella se apoya en el disco coral, que es lo que la separa del marfil. */
.hero h1{color:var(--navy)}
.hero-art::after{border-color:rgba(242,106,61,.5)}
.hero .btn--ghost{color:var(--navy); border-color:rgba(11,31,58,.3)}
.hero .btn--ghost:hover,.hero .btn--ghost:focus-visible{color:var(--navy); border-color:var(--navy)}
.hero .creds .ico{color:var(--coral-dark)}
.hero .creds b{color:var(--navy)}
.hero .hero-disciplines{color:var(--ink-2)}
.hero .hero-disciplines li:not(:last-child)::after{background:var(--coral)}

/* Enfoque: el diagrama sobre fondo claro, con núcleo blanco. */
#enfoque h2{color:var(--navy)}
#enfoque h2 .op{color:rgba(11,31,58,.5)}
#enfoque .method h3{color:var(--navy)}
#enfoque .method-steps b{color:var(--navy)}
#enfoque .method-steps .ico{color:var(--coral-dark)}
#enfoque .venn .core circle{fill:#FFFFFF; stroke:var(--navy)}
#enfoque .venn .v-core{fill:var(--navy)}
#enfoque .venn .on-dark{fill:#FFF8F2}
#enfoque .venn .on-light{fill:var(--navy)}

/* Experiencia e insights: superficies que eran navy pasan a blanco. */
#experiencia h2,#experiencia .orgs h3,#experiencia .cases b,#experiencia .quote blockquote,
#experiencia .quote figcaption b,#insights h2,#insights h3{color:var(--navy)}
#experiencia .cases .ico,#insights .posts .ico{color:var(--coral-dark)}
#experiencia .quote{background:#FFFFFF; border-color:var(--border)}
#experiencia .quote .mark{color:var(--coral)}
#experiencia .rail::before{background:linear-gradient(90deg,#FFE3D6,rgba(255,227,214,0))}
#experiencia .rail::after{background:linear-gradient(270deg,#FFE3D6,rgba(255,227,214,0))}
#experiencia .orgs-note,#experiencia .quote figcaption span{color:#54606E}
#experiencia .wordmark{color:rgba(11,31,58,.72)}
#experiencia .wordmark:hover{color:var(--navy)}
#insights .posts{background:var(--border)}
#insights .posts li{background:#FFFFFF}
#insights .posts a:hover,#insights .posts a:focus-visible{background:#FFF4EA}
#insights .tag{color:var(--coral-ink); border-color:rgba(200,72,33,.45)}

/* El cierre coral y el pie navy se quedan: son "algunas cosas de otro color". */


/* ==========================================================================
   Menú de servicios — el campo de servicios en miniatura, colgando de la
   cabecera. Escritorio: el :hover lo abre al instante y el script lo deja
   abierto (is-open) hasta que se cierre a propósito. Móvil: acordeón.
   ========================================================================== */
.head-in{position:relative}
.nav .has-sub{display:flex; align-items:center; gap:.2rem}
.sub-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--navy); cursor:pointer;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.sub-toggle .ico{width:.95rem; height:.95rem; stroke-width:2.2; transition:transform .3s var(--ease)}
.has-sub:hover .sub-toggle,.sub-toggle:hover,.sub-toggle[aria-expanded="true"]{color:var(--coral-ink); background:#FFE3D6}
.sub-toggle[aria-expanded="true"] .ico{transform:rotate(180deg)}

/* El panel cuelga del ancho completo de la cabecera. Anclado a .head-in, no
   al <li>: así nunca se sale del viewport y el puente invisible de arriba
   (::before) cubre el trayecto del cursor entre el enlace y el panel. */
.sub{
  position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:110;
  background:#FFFFFF; color:var(--ink);
  border:1px solid var(--border); border-radius:6px;
  box-shadow:0 18px 30px -24px rgba(11,31,58,.5);   /* la misma elevación que la cabecera al pegarse */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .4s var(--ease), visibility 0s linear .25s;
}
.sub::before{content:''; position:absolute; left:0; right:0; top:-12px; height:12px}
.has-sub:hover .sub,.sub:focus-within,.sub.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s;
}
/* .nav ul es flex con más especificidad: el grid del panel se declara con .nav delante. */
.nav .sub-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; align-items:stretch;
  background:var(--border);
  border-radius:6px 6px 0 0; overflow:hidden;
}
.sub-grid > li{display:grid; background:#FFFFFF}
/* Los enlaces del panel no son enlaces del nav: se les quita la regla base
   (bloque, versalitas, subrayado) con especificidad, no con !important. */
.sub a{display:block; padding:0; font-size:inherit; letter-spacing:0; text-transform:none; color:inherit}
.sub a::after{content:none}
.nav .sub-item{
  display:grid; grid-template-columns:auto 1fr; gap:.3rem .95rem; align-items:start;
  padding:1.15rem 1.35rem;
  background:#FFFFFF; text-decoration:none; color:var(--ink);
  transition:background-color .3s var(--ease);
}
.nav .sub-item:hover,.nav .sub-item:focus-visible,.nav .sub-item[aria-current="page"]{background:#FFF4EA; color:var(--ink)}
.nav .sub-item:focus-visible{outline-offset:-3px}
.sub-item .ico{grid-row:span 2; color:var(--coral-dark); width:1.65rem; height:1.65rem; stroke-width:1.4; margin-top:.05rem; transition:transform .35s var(--ease)}
.sub-item:hover .ico{transform:translateY(-3px)}
.sub-item b{
  display:block; font-family:var(--display); font-weight:800; font-size:.86rem;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.3; color:var(--navy);
  transition:color .25s var(--ease);
}
.sub-item[aria-current="page"] b{color:var(--coral-ink)}
.sub-item span{display:block; font-size:.84rem; line-height:1.5; color:var(--ink-2)}
.sub-foot{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; align-items:center;
  padding:.95rem 1.35rem; background:#FFF8F2;
  border-top:1px solid var(--border); border-radius:0 0 6px 6px;
}
.nav .sub-foot .tlink{
  display:inline-flex; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--coral-ink); padding-bottom:2px;
}
.nav .sub-foot .tlink:hover,.nav .sub-foot .tlink:focus-visible{color:var(--coral-ink)}
.nav .sub-foot .tlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav .sub-foot .tlink:hover::after,.nav .sub-foot .tlink:focus-visible::after{transform:scaleX(1)}

/* Cajón móvil: la fila de Servicios lleva su botón y la lista se pliega. */
.drawer{max-height:calc(100dvh - 76px); overflow-y:auto}
.drawer-row{display:flex; align-items:center; border-bottom:1px solid var(--border)}
.drawer-row a{flex:1; border-bottom:0}
.drawer-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--navy); cursor:pointer;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.drawer-toggle:hover,.drawer-toggle[aria-expanded="true"]{color:var(--coral-ink); background:#FFE3D6}
.drawer-toggle .ico{width:1.1rem; height:1.1rem; stroke-width:2.2; transition:transform .3s var(--ease)}
.drawer-toggle[aria-expanded="true"] .ico{transform:rotate(180deg)}
.drawer-list{padding-left:1.1rem !important; margin-bottom:0 !important; border-bottom:1px solid var(--border)}
.drawer-list a{font-size:.94rem; font-weight:600; padding:.6rem 0; border-bottom-color:rgba(11,31,58,.08)}
.drawer-list a[aria-current="page"]{color:var(--coral-ink)}
.drawer-list li:last-child a{border-bottom:0}

/* ==========================================================================
   Páginas de servicio — heredan el mundo de la home: bandas que alternan
   marfil y suave, el campo demarcado, el método Audito → Asesoro → Activo
   y el cierre coral. Los fondos van con valor literal a propósito.
   ========================================================================== */
.band--marfil{background:#FFF8F2; color:var(--ink)}
.band--suave{background:#FFE3D6; color:var(--ink)}

/* --- portada del servicio ------------------------------------------------- */
.svc-hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3.5rem,7vw,6rem); overflow:hidden}
.svc-grid{display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .svc-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }

/* Enlace de vuelta, no etiqueta: caja baja, navy, subrayado que crece. */
.svc-back{
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  text-transform:none; letter-spacing:0; font-size:.92rem; font-weight:600; color:var(--navy);
}
.svc-back:hover,.svc-back:focus-visible{color:var(--coral-ink)}
.svc-back .ico{transform:rotate(180deg)}
.svc-back:hover .ico{transform:rotate(180deg) translateX(3px)}
.svc-hero h1{color:var(--navy); font-size:clamp(2.25rem,4.8vw,3.6rem); margin-bottom:1.25rem}
.svc-hero h1 .amp{color:var(--coral-ink); font-weight:800}
.svc-hero .lede{color:var(--ink); margin-bottom:2rem}
.svc-hero .hero-actions{margin-bottom:2.25rem}

/* Tres datos fijos bajo la portada: modalidad, alcance y qué pilares carga. */
.svc-facts{
  list-style:none; margin:0; padding:1.5rem 0 0;
  border-top:1px solid var(--border);
  display:grid; gap:1.25rem 1.5rem; grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){ .svc-facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
.svc-facts li{display:grid; gap:.35rem; align-content:start}
.svc-facts .ico{color:var(--coral-dark)}
.svc-facts b{font-family:var(--display); font-weight:800; font-size:.95rem; letter-spacing:-.01em; color:var(--navy); line-height:1.3}
.svc-facts span{font-size:.84rem; line-height:1.45; color:var(--ink-2)}
.pilares{display:flex; flex-wrap:wrap; gap:.35rem .8rem; margin:0; padding:0; list-style:none}
.pilares li{display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; color:var(--ink-2)}
.pilares li::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--dot)}
.pilares .g{--dot:#0B1F3A}
.pilares .p{--dot:#F26A3D}
.pilares .e{--dot:#F2B544}

/* La foto de portada se apoya en el disco coral y el aro, como ella en la home. */
.svc-art{position:relative; max-width:560px; margin-inline:auto; width:100%}
.svc-art::before,.svc-art::after{content:''; position:absolute; border-radius:50%; pointer-events:none}
.svc-art::before{width:52%; aspect-ratio:1; left:-9%; bottom:-10%; background:var(--coral)}
.svc-art::after{width:38%; aspect-ratio:1; right:-7%; top:-9%; border:1.5px solid rgba(242,106,61,.5)}
.svc-art img{
  position:relative; z-index:2;
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:6px;
  filter:saturate(.92) contrast(1.04);
}
.js .svc-art::before{transform:scale(.34); opacity:0; transition:transform 1s var(--ease), opacity .55s var(--ease)}
.js .svc-art::after{transform:scale(.6); opacity:0; transition:transform 1.15s var(--ease) .12s, opacity .7s var(--ease) .12s}
.js .svc-art.is-in::before,.js .svc-art.is-in::after{transform:none; opacity:1}
.js .svc-art img{opacity:0; transform:translateY(40px) scale(.985); transition:opacity .85s var(--ease) .2s, transform 1.05s var(--ease) .2s}
.js .svc-art.is-in img{opacity:1; transform:none}

/* --- cuándo tiene sentido ------------------------------------------------- */
.svc-two{display:grid; gap:clamp(2.25rem,4vw,3.5rem); align-items:center; grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){ .svc-two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.svc-two .sec-head{margin-bottom:1.75rem}
.signals{list-style:none; margin:0; padding:0; display:grid; gap:0}
.signals li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:1.05rem 0; border-top:1px solid var(--border);
  font-size:1rem; line-height:1.55;
}
.signals li:last-child{border-bottom:1px solid var(--border)}
.signals .ico{color:var(--coral-dark); margin-top:.2rem}
.signals b{font-family:var(--display); font-weight:700; letter-spacing:-.01em; color:var(--navy); display:block; margin-bottom:.15rem}
.svc-shot{position:relative; overflow:hidden; border-radius:6px; background:var(--navy)}
.svc-shot img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; filter:saturate(.92) contrast(1.04)}
.svc-shot--wide img{aspect-ratio:21/9}
@media (max-width:620px){ .svc-shot--wide img{aspect-ratio:3/2} }

/* --- qué incluye: el mismo campo demarcado de la home, en tres columnas ---- */
.field--3{grid-template-columns:1fr}
@media (min-width:620px){ .field--3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .field--3{grid-template-columns:repeat(3,1fr)} }
.cell--static{cursor:default}
.cell--static:hover,.cell--static:focus-visible{background:var(--surface)}
.cell--static:hover .ico{transform:none}
.cell--static h3{text-transform:none; letter-spacing:-.015em; font-size:1.08rem}

/* --- bloque propio de cada servicio: filas con regla, no tarjetas ---------- */
.spec{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 clamp(1.5rem,3vw,3rem)}
@media (min-width:760px){ .spec{grid-template-columns:repeat(2,minmax(0,1fr))} }
.spec li{
  display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem; align-items:start;
  padding:1.2rem 0; border-top:1px solid var(--border);
}
.spec .ico{grid-row:span 3; color:var(--coral-dark); margin-top:.15rem}
.spec h3{font-size:1.05rem; letter-spacing:-.015em; color:var(--navy)}
.spec p{font-size:.94rem; line-height:1.6; color:var(--ink-2)}
.spec .norma{font-family:var(--display); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink-2); margin-bottom:.1rem}

/* --- cómo trabajo: Audito → Asesoro → Activo, la línea se dibuja ----------- */
.como{position:relative}
/* La línea del método cruza los tres pasos y se dibuja al entrar en pantalla;
   cada paso lleva su punto sobre ella. En una columna, línea y puntos sobran. */
.como-steps{position:relative}
.como-steps::before{
  content:''; position:absolute; left:0; right:0; top:5px; height:1.5px;
  background:var(--coral); transform-origin:left;
}
.como-steps li{position:relative}
.como-steps li::before{
  content:''; position:absolute; left:0; top:calc(-1.6rem - 1px);
  width:11px; height:11px; border-radius:50%;
  background:#FFF8F2; border:1.5px solid var(--coral);
}
.js .como-steps::before{transform:scaleX(0); transition:transform 1.4s var(--ease) .25s}
.js .como-steps.is-in::before{transform:none}
@media (max-width:759px){
  .como-steps{padding-top:0}
  .como-steps::before,.como-steps li::before{display:none}
}
.como-steps{list-style:none; margin:0; padding:1.6rem 0 0; display:grid; gap:2rem 2.5rem; grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .como-steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
.como-steps h3{
  font-family:var(--display); font-weight:900; font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.025em; color:var(--navy); margin-bottom:.75rem;
}
.como-steps h3 .arrow{color:var(--coral-ink); font-weight:700; margin-left:.35rem}
.como-steps p{font-size:.98rem; line-height:1.6; color:var(--ink-2); max-width:38ch}
.como .svc-shot{margin-top:clamp(2.5rem,5vw,4rem)}

/* --- lo que te llevas + se conecta con ------------------------------------ */
.svc-out{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:minmax(0,1fr); align-items:start}
@media (min-width:980px){ .svc-out{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.svc-out h2{font-size:clamp(1.6rem,2.6vw,2.15rem); margin-bottom:1.5rem; color:var(--navy)}
.entregables{list-style:none; margin:0; padding:0; display:grid; gap:0}
.entregables li{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center;
  padding:.85rem 0; border-top:1px solid var(--border);
  font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--navy);
}
.entregables li:last-child{border-bottom:1px solid var(--border)}
.entregables .ico{color:var(--coral-dark); width:1.3rem; height:1.3rem}
.related{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; grid-template-columns:minmax(0,1fr)}
.related .cell{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem; align-items:start;
  padding:1.1rem 1.35rem;
}
.related .cell .ico--lg{grid-row:span 3; width:1.75rem; height:1.75rem; margin-top:.1rem}
.related .cell h3{font-size:.9rem}
.related .cell p{font-size:.88rem; flex:none}
.related .cell .tlink{margin-top:.1rem; font-size:.74rem}
.svc-out .body-copy{color:var(--ink-2); margin-bottom:1.5rem; max-width:48ch}

/* --- cierre coral: como la home, sin la lista larga ------------------------ */
.svc-close .contact-grid{align-items:end}
.svc-close h2{max-width:18ch}
.svc-close .lede{color:var(--navy); margin-bottom:2rem; max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .js .svc-art::before,.js .svc-art::after,.js .svc-art img{opacity:1 !important; transform:none !important}
  .js .como-steps::before{transform:none !important}
  .sub{transition:none}
}

/* --- utilidades ----------------------------------------------------------- */
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ==========================================================================
   Paleta pastel — el marino sale de la web (decisión de la clienta).
   Lo que era TEXTO marino pasa a la tinta del manual (#142033), que se lee
   negra. Lo que era RELLENO marino (panel de capacitación, botón tinta, pie,
   lóbulo de Gestión, plano tras la foto de contacto) pasa a un azul empolvado,
   un tinte muy claro del propio marino del manual. Este bloque va el último
   por la misma razón que el de Marfil: manda el orden, no la especificidad.
   ========================================================================== */
:root{
  --navy:#142033;   --navy-rgb:20,32,51;
  --pastel:#DCE4EF; --pastel-rgb:220,228,239;
  --pastel-deep:#C9D5E6;
  --navy-deep:#C9D5E6;
  --rule-dark:rgba(20,32,51,.14);
  --rule-dark-soft:rgba(20,32,51,.08);
  --p-gestion:#142033;
  --venn-gestion:#B7C8DF;
  --venn-mix-gp:#F0A78E;
  --venn-mix-ge:#F3D6A0;
  --venn-core:#142033;
  --venn-on-dark:#142033;
  --venn-on-light:#142033;
}
/* Las bandas volteadas redefinían --cream al marino para sus rgba(): ahora a tinta. */
.hero,#enfoque,#experiencia,#insights{
  --cream:#142033; --cream-rgb:20,32,51;
  --p-gestion:#142033; --p-personas:#142033;
  --border:rgba(20,32,51,.14);
}
#enfoque h2 .op{color:rgba(20,32,51,.45)}
.hero .btn--ghost{border-color:rgba(20,32,51,.3)}
.site-head.is-stuck{box-shadow:0 10px 26px -20px rgba(20,32,51,.45)}
.sub{box-shadow:0 18px 30px -24px rgba(20,32,51,.4)}
#experiencia .wordmark{color:rgba(20,32,51,.72)}
.wants li{border-bottom-color:rgba(20,32,51,.18)}

/* Sobre azul empolvado el coral pequeño necesita su tono legible (4.7:1). */
.btn--ink,.train-panel,.site-foot,.band--navy,.band--deep{--coral-ink:#AE3C1B}

.btn--ink{background:var(--pastel); color:var(--ink); border-color:var(--pastel)}
.btn--ink:hover,.btn--ink:focus-visible{background:var(--pastel-deep); border-color:var(--pastel-deep); color:var(--ink)}
.band--navy,.band--deep{background:var(--pastel); color:var(--ink)}

.train-panel{background:var(--pastel); color:var(--ink)}
.train-panel .ico{color:var(--coral-dark)}
.train-panel dt{color:var(--coral-ink)}
.train-panel dd{color:var(--ink-2)}
.prog-shot,.svc-shot{background:var(--pastel)}
.prog-shot::after{background:var(--pastel)}
.contact-photo::before{background:var(--pastel)}

/* Pie: azul empolvado hondo, texto en tinta. El logo pasa a la versión navy en el HTML. */
.site-foot{background:var(--pastel-deep); color:var(--ink); border-top:1px solid rgba(20,32,51,.12)}
.foot-brand img{height:38px}
.foot-brand p{color:var(--ink-2)}
.foot-tag,.foot-col h3{color:var(--coral-ink)}
.foot-col a,.foot-col li{color:var(--ink-2)}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--coral-ink)}
.foot-contact a{color:var(--ink)}
.foot-contact .ico{color:var(--coral-dark)}
.foot-base{color:var(--ink-2); border-top-color:rgba(20,32,51,.14)}
.site-foot :focus-visible{outline-color:var(--coral-dark)}
.site-foot ::selection{background:var(--coral); color:var(--ink)}

/* Diagrama: el lóbulo de Gestión es pastel, así que su texto va en tinta. */
#enfoque .venn .on-dark{fill:#142033}
#enfoque .venn .lobe--g circle{stroke:rgba(20,32,51,.35)}

/* ==========================================================================
   Cabecera: estructura de la referencia — menú en versalitas (ya lo era) e
   iconos de redes a la derecha — con el aspecto de la cabecera anterior.
   ========================================================================== */
.redes{display:none; align-items:center; gap:.35rem; padding-left:1rem; margin-left:.25rem; border-left:1px solid var(--border)}
.redes a{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:var(--ink); transition:background-color .25s var(--ease), color .25s var(--ease);
}
.redes a:hover,.redes a:focus-visible{background:#FFE3D6; color:var(--coral-ink)}
.redes svg{width:15px; height:15px; fill:currentColor}
@media (min-width:1280px){ .redes{display:flex} }
.drawer-redes{display:flex; gap:.6rem; margin-top:1.25rem}
.drawer-redes a{
  display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--border);
  border-radius:50%; background:#FFFFFF; color:var(--ink);
}
.drawer-redes svg{width:17px; height:17px; fill:currentColor}
.nav ul{gap:clamp(.8rem,1.4vw,1.5rem)}

/* ==========================================================================
   Logos reales de cliente en el riel (antes eran nombres tipeados).
   ========================================================================== */
.rail-track img{height:34px; width:auto; max-width:140px; object-fit:contain; margin-inline:clamp(1.25rem,2.4vw,2.25rem); flex:none}
@media (min-width:900px){ .rail-track img{height:40px} }
.logos-grid{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,3.5vw,3rem)}
.logos-grid img{height:clamp(26px,3.2vw,40px); width:auto; max-width:150px; object-fit:contain}

/* ==========================================================================
   Piezas nuevas para las páginas que antes no existían, en el vocabulario
   de la hoja: radio 6px, bordes de 1px, foco coral, sin sombras nuevas.
   ========================================================================== */
/* dudas frecuentes */
.faq{max-width:78ch; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; cursor:pointer; list-style:none;
  padding:1.15rem .15rem; font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mas{flex:none; position:relative; width:26px; height:26px; border:1px solid var(--border); border-radius:50%; transition:background-color .25s var(--ease), border-color .25s var(--ease)}
.faq summary .mas::before,.faq summary .mas::after{content:''; position:absolute; left:50%; top:50%; background:var(--ink); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .2s}
.faq summary .mas::before{width:11px; height:1.6px}
.faq summary .mas::after{width:1.6px; height:11px}
.faq details[open] summary .mas{background:var(--coral); border-color:var(--coral)}
.faq details[open] summary .mas::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.faq summary:hover .mas{border-color:var(--coral)}
.faq-body{padding:0 .15rem 1.3rem; color:var(--ink-2); max-width:66ch; line-height:1.65}

/* formulario de contacto */
.form{display:grid; gap:1rem; max-width:34rem; grid-template-columns:minmax(0,1fr)}
.form-field{display:grid; gap:.4rem; grid-template-columns:minmax(0,1fr)}
.form-field label{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.form-field label .opc{text-transform:none; letter-spacing:0; font-weight:400}
.form-field input,.form-field select,.form-field textarea{
  font:inherit; width:100%; color:var(--ink); background:#FFFFFF;
  border:1px solid var(--border); border-radius:6px; padding:.75rem .9rem;
  transition:border-color .25s var(--ease);
}
.form-field textarea{min-height:132px; resize:vertical; line-height:1.55}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#D8C6B8}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--coral)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-2); opacity:1}
.form-field select{
  appearance:none; padding-right:2.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C84821' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:17px;
}
.form-note{font-size:.86rem; color:var(--ink-2); max-width:40ch}
.form-aviso{display:none; align-items:flex-start; gap:.65rem; padding:.85rem 1rem; border:1px solid #4F8A63; border-radius:6px; background:#FFFFFF; font-size:.92rem}
.form-aviso.visible{display:flex}
.form-aviso .ico{color:#4F8A63; margin-top:.1rem}

/* datos de contacto en filas */
.datos{list-style:none; margin:0; padding:0; border-top:1px solid var(--border)}
.datos li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .9rem; padding:1rem 0; border-bottom:1px solid var(--border)}
.datos .ico{grid-row:1/3; color:var(--coral-dark)}
.datos b{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.datos span{grid-column:2; font-family:var(--display); font-weight:700; font-size:1rem}
.datos a{color:var(--ink); text-decoration:none}
.datos a:hover{color:var(--coral-ink)}

/* recuadro de dato pendiente: lo que falta se dibuja, no se omite */
.falta{display:grid; place-content:center; gap:.25rem; text-align:center; min-height:72px; padding:.85rem 1rem; border:1.5px dashed var(--border); border-radius:6px; background:#FFF8F2}
.falta b{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-ink)}
.falta span{font-size:.84rem; color:var(--ink-2); line-height:1.4}
.falta-fila{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* dos columnas genéricas para las páginas nuevas */
.two{display:grid; gap:clamp(1.75rem,4vw,3rem); grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .two{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.6; color:var(--ink-2); max-width:60ch}

/* Banda de clientes sobre azul empolvado: sin la regla ni el margen que
   .orgs traía de cuando colgaba debajo de los casos, y los fundidos del riel
   en el mismo pastel de la banda. */
#clientes{--cream:#142033; --cream-rgb:20,32,51; --rule-dark:rgba(20,32,51,.14)}
#clientes .orgs{margin-top:0; padding-top:0; border-top:0}
#clientes .orgs h3{font-size:1.35rem; color:var(--ink)}
#clientes .orgs-note{color:var(--ink-2)}
#clientes .rail-label{color:#AE3C1B}
#clientes .rail::before{background:linear-gradient(90deg,#DCE4EF,rgba(220,228,239,0))}
#clientes .rail::after{background:linear-gradient(270deg,#DCE4EF,rgba(220,228,239,0))}
#clientes .rail-track img{height:40px}
@media (min-width:900px){ #clientes .rail-track img{height:48px} }
#clientes .falta{background:#FFFFFF; border-color:rgba(20,32,51,.22)}

/* Toda banda pastel redefine --cream a tinta, como hacen las bandas volteadas
   de Marfil: así los rgba(var(--cream-rgb)) heredados pintan texto oscuro. */
.band--navy,.band--deep,.train-panel,.site-foot{--cream:#142033; --cream-rgb:20,32,51; --amber:#AE3C1B}
.band--navy .col-head p,.band--navy .sec-head p{color:var(--ink-2)}
.band--navy .btn--ghost{color:var(--ink); border-color:rgba(20,32,51,.3)}

/* Contraste medido en navegador sobre el pastel hondo del pie (#C9D5E6):
   el gris secundario se quedaba en 4.3:1 y el coral legible en 4.1:1.
   Estos dos valores dan 5.1:1 y 4.9:1. Los «+» del diagrama, 3.8:1. */
.site-foot{--ink-2:#4A5563}
.foot-brand p,.foot-col a,.foot-col li,.foot-base{color:#4A5563}
.foot-tag,.foot-col h3{color:#9A3316}
#enfoque h2 .op{color:rgba(20,32,51,.55)}

/* El aro del disco cruzaba por encima del saco. La foto tiene z-index:2, pero
   vive dentro de .hero-photo-wrap, cuyo transform (parallax) abre un contexto
   de apilamiento propio: hacia fuera vale 0, como el aro (::after), y el aro
   va después en el árbol. El orden se decide en el envoltorio, no en la foto. */
.hero-photo-wrap{position:relative; z-index:2}

/* ==========================================================================
   Menú de servicios, minimalista (pedido de la clienta): un panel corto que
   cuelga del propio ítem «Servicios», solo con los seis títulos. Nada de
   iconos, glosas ni pie. Mismo comportamiento de apertura que antes.
   ========================================================================== */
.nav .has-sub{position:relative}
.sub{
  left:0; right:auto; top:calc(100% + 10px); width:max-content; min-width:15.5rem; max-width:20rem;
  padding:.45rem; border-radius:6px;
}
/* .nav ul es flex con más especificidad: la lista se declara con .nav delante */
.nav .sub-lista{list-style:none; margin:0; padding:0; display:grid; gap:2px; align-items:stretch}
.nav .sub-lista a{
  display:block; padding:.62rem .85rem; border-radius:4px;
  font-family:var(--display); font-size:.86rem; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav .sub-lista a::after{content:none}
.nav .sub-lista a:hover,.nav .sub-lista a:focus-visible{background:#FFC627; color:#1A1A1A; font-weight:600}
.nav .sub-lista a[aria-current="page"]{color:var(--coral-ink); font-weight:600}

/* ==========================================================================
   Coral pastel y tinta suave (pedido de la clienta, 2026-09-17).
   El coral #F26A3D de los rellenos pasa a un salmón pastel #F6AF97; la tinta
   #142033 pasa a un pizarra suave #384456. Contrastes medidos: tinta sobre
   crema 9.1:1, sobre salmón 5.2:1; acento de texto #B9542F sobre crema 4.6:1
   y #A64A2A sobre durazno 4.7:1. El anillo de foco se queda oscuro a propósito:
   un foco pastel no se ve.
   ========================================================================== */
:root{
  --coral:#F6AF97;
  --coral-dark:#D97A57;
  --coral-dark-rgb:217,122,87;
  --coral-lift:#F9C3AF;
  --coral-ink:#B9542F;
  --coral-ink-2:#A64A2A;
  --ink:#384456;
  --navy:#384456; --navy-rgb:56,68,86;
  --p-gestion:#384456; --p-prevencion:#B9542F;
  --venn-prevencion:#F6AF97;
  --venn-mix-gp:#F0C6B7;
  --venn-mix-pe:#F6C79B;
  --venn-core:#384456; --venn-on-dark:#384456; --venn-on-light:#384456;
  --rule-dark:rgba(56,68,86,.14); --rule-dark-soft:rgba(56,68,86,.08);
}
.hero,#enfoque,#experiencia,#insights,#clientes,.band--navy,.band--deep,.train-panel,.site-foot{
  --cream:#384456; --cream-rgb:56,68,86; --p-gestion:#384456; --p-prevencion:#B9542F; --p-personas:#384456;
}
.band--navy,.band--deep,.train-panel,.site-foot{--amber:#A64A2A}
.btn--ink,.train-panel,.site-foot,.band--navy,.band--deep{--coral-ink:#A64A2A}
#enfoque .venn .on-dark,#enfoque .venn .v-core{fill:#384456}
#enfoque .venn .core circle{stroke:#384456}
#enfoque h2 .op{color:rgba(56,68,86,.55)}
.hero .btn--ghost{border-color:rgba(56,68,86,.3)}
.hero-art::after{border-color:rgba(246,175,151,.75)}
.wants li{border-bottom-color:rgba(56,68,86,.2)}
#experiencia .wordmark{color:rgba(56,68,86,.72)}
:focus-visible{outline-color:#A64A2A}
.site-head :focus-visible,.site-foot :focus-visible{outline-color:#A64A2A}
::selection{background:var(--coral); color:var(--ink)}
.foot-tag,.foot-col h3{color:#9A3316}

/* Texto secundario en valor sólido, no en tinta con alfa: al aclarar la tinta,
   sus rgba() bajaban de AA. Medido: #54606E sobre crema 6.1:1, #4A5563 sobre
   azul empolvado 5.1:1. */
.hero{--ink-2:#54606E}
.hero .hero-disciplines{color:#54606E}
#enfoque h2 .op{color:rgba(56,68,86,.7)}
.falta span,#clientes .falta span{color:#54606E}
.band--navy,.band--deep{--ink-2:#4A5563}
.band--navy .col-head p,.band--navy .sec-head p,.band--navy .wants li{color:#4A5563}
.train-panel dd{color:#4A5563}
/* La cifra animada es un <span> dentro del <b>: hereda el gris de las
   etiquetas de al lado. Va en la tinta del propio número. */
.hero .creds span{color:#54606E}
.hero .creds b span{color:inherit}

/* ==========================================================================
   Fondo blanco (pedido de la clienta): el marfil #FFF8F2 pasa a #FFFFFF en
   todas las superficies claras. Las bandas durazno y las pastel se quedan.
   ========================================================================== */
:root{--cream:#FFFFFF; --cream-rgb:255,255,255}
html,body{background:#FFFFFF}
.hero,#enfoque,#experiencia,#insights,#clientes.band--marfil,.band--marfil,.site-head,.sub-foot,.falta,.drawer{background:#FFFFFF}
.site-head{border-bottom-color:var(--border)}
.quote,#experiencia .quote{background:#FFFFFF; border:1px solid var(--border)}
::-webkit-scrollbar-track{background:#FFFFFF}
*{scrollbar-color:var(--coral) #FFFFFF}

/* ==========================================================================
   Blanco total y tipografía fina (pedido de la clienta, 2026-09-17 tarde).
   1) Ningún pastel de fondo: las bandas durazno pasan a blanco; la
      alternancia la marca ahora una regla de 1px entre bandas.
   2) Titulares en Montserrat 300 en versalitas espaciadas; la palabra de
      acento en Cormorant Garamond (serif) en caja baja, en el terracota.
      Cuerpo en Inter 400; las negritas bajan a 600.
   ========================================================================== */
:root{--cream-soft:#FFFFFF; --serif:'Cormorant Garamond', Georgia, serif}
.band--cream,.band--suave,#servicios,#capacitacion,#empresas,#porque,#contacto.band--cream,.band--cream.band{background:#FFFFFF}
.band + .band{border-top:1px solid var(--border)}
.hero + .band{border-top:1px solid var(--border)}
.sub-toggle:hover,.has-sub:hover .sub-toggle,.sub-toggle[aria-expanded="true"],.drawer-toggle:hover,.drawer-toggle[aria-expanded="true"],.redes a:hover,.redes a:focus-visible,#insights .posts a:hover{background:#F3F4F6}

/* --- titulares --- */
h1,h2,h3,h4,.hero h1,.sec-head h2,.approach-copy h2,.method h3,.col-head h3,.cell h3,.prog h3,.train-panel h3,
.svc-hero h1,.svc-out h2,.svc-close h2,.contact h2,.orgs h3,.spec h3,.faq summary{
  font-family:var(--display); font-weight:300; letter-spacing:.06em; text-transform:uppercase;
}
h1,.hero h1,.svc-hero h1{font-weight:300; letter-spacing:.04em; line-height:1.12}
h2,.sec-head h2,.approach-copy h2,.contact h2,.svc-out h2,.svc-close h2{font-weight:300; letter-spacing:.05em; line-height:1.16}
h3,.col-head h3,.cell h3,.prog h3,.train-panel h3,.orgs h3,.spec h3,.method h3{font-weight:500; letter-spacing:.06em}
.faq summary{font-weight:500; letter-spacing:.04em; font-size:.98rem}
.cell h3{font-size:.98rem}
.sub-item b,.nav .sub-lista a{font-weight:500}
.nav a{font-weight:500; letter-spacing:.09em}
.brand-tag{font-weight:500}

/* la palabra de acento: serif, caja baja, terracota */
.hero h1 .p,.hero h1 .g,.hero h1 .e,.approach-copy h2 .p,.svc-hero h1 .amp{
  font-family:var(--serif); font-weight:500; font-style:normal; text-transform:none; letter-spacing:0;
  font-size:1.14em; line-height:1;
}
.hero h1 .p,.approach-copy h2 .p{color:#B9542F}
.hero h1 .g,.hero h1 .e,.approach-copy h2 .g,.approach-copy h2 .e{color:inherit}
.approach-copy h2 .g,.approach-copy h2 .e{font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.05em; font-size:1em}

/* --- pesos del cuerpo --- */
body{font-weight:400}
strong,b,.creds b,.cases b,.ventures b,.assocs b,.datos span,.contact-mail,.foot-brand p,.wants li{font-weight:600}
.hero .creds b{font-family:var(--display); font-weight:600; letter-spacing:.01em}
.btn{font-weight:600; letter-spacing:.02em}
.tlink,.rail-label,.foot-col h3,.foot-tag,.form-field label,.datos b,.train-panel dt,.falta b,.hero-disciplines{font-weight:500}
.quote blockquote{font-family:var(--serif); font-weight:500; font-size:1.35rem; line-height:1.4}
/* Un solo acento serif por titular: «prevención». Gestión y personas vuelven
   a la versalita fina, como el resto de la frase. */
.hero h1 .g,.hero h1 .e{font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size:1em; line-height:inherit}

/* ==========================================================================
   Titulares en serif fina (referencia: letigrijo.com, «Me presento»).
   h1/h2 en Cormorant Garamond 400, versalitas, grandes y con aire; los
   subtítulos pequeños siguen en Montserrat 500. Rótulo breve en negrita
   sobre el titular donde la clienta lo pide (Conóceme).
   ========================================================================== */
h1,h2,.hero h1,.sec-head h2,.approach-copy h2,.contact h2,.svc-hero h1,.svc-out h2,.svc-close h2{
  font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.035em; line-height:1.04;
}
h1,.hero h1,.svc-hero h1{font-size:clamp(2.6rem,6vw,4.9rem)}
h2,.sec-head h2,.approach-copy h2,.contact h2,.svc-out h2,.svc-close h2{font-size:clamp(2rem,3.8vw,3rem); line-height:1.08}
/* el acento dentro de un titular serif: cursiva y terracota, misma caja */
.hero h1 .p,.approach-copy h2 .p{font-family:var(--serif); font-style:italic; font-weight:500; text-transform:uppercase; letter-spacing:.035em; font-size:1em; line-height:inherit; color:#B9542F}
.hero h1 .g,.hero h1 .e,.approach-copy h2 .g,.approach-copy h2 .e{font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.035em; font-size:1em}
.approach-copy h2 .op{font-family:var(--serif)}
.method h3{font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.6rem,2.6vw,2.1rem)}

/* rótulo sobre el titular + párrafo de entrada marcado */
.kicker{display:block; margin-bottom:.9rem; font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.lede-fuerte{font-family:var(--sans); font-weight:500; font-size:clamp(1.08rem,1.6vw,1.3rem); line-height:1.45; color:var(--ink); max-width:44ch; margin:1.1rem 0 1.25rem}
.hero .lede-fuerte + .hero-disciplines{margin-top:.25rem}
/* La frase de la home es larga: un punto menos de cuerpo para que entre en
   cuatro o cinco líneas y los botones se queden en el primer viewport. */
.hero h1{font-size:clamp(2.4rem,4.9vw,3.9rem); letter-spacing:.025em}

/* ==========================================================================
   Página de Servicios (referencia: letigrijo.com/servicios). Portada en azul
   empolvado con su retrato, franja de logos, y las seis tarjetas: una
   destacada en salmón («Empieza por aquí»), el resto blancas con número,
   chips, «Tú logras», lista y botón. Sombra muy suave solo en estas tarjetas,
   porque la referencia la lleva.
   ========================================================================== */
.svc-portada{background:var(--pastel); overflow:hidden; padding-top:clamp(2.5rem,5vw,4rem)}
.svc-portada .shell{display:grid; gap:2rem; align-items:end}
@media (min-width:900px){ .svc-portada .shell{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4rem)} }
.svc-portada-copy{padding-bottom:clamp(2.5rem,5vw,4.5rem); align-self:center}
.svc-portada h1{font-size:clamp(2.2rem,4.2vw,3.3rem); max-width:22ch}
.svc-portada h1 .p{font-family:var(--serif); font-style:italic; font-weight:500; text-transform:uppercase; color:#B9542F}
.svc-portada p{max-width:52ch; color:#4A5563; font-size:1.05rem; margin:1.1rem 0 1.5rem}
.svc-portada-foto{position:relative; justify-self:center; align-self:end; width:min(100%,400px)}
.svc-portada-foto::before{content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:112%; aspect-ratio:1; border-radius:50%; background:#FFFFFF}
.svc-portada-foto img{position:relative; z-index:2; display:block; width:100%; height:auto}

.logos-franja{background:#FFFFFF; padding-block:2rem 2.25rem; border-bottom:1px solid var(--border)}
.logos-franja h2{font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center; margin-bottom:1.5rem; color:var(--ink)}
.logos-franja .logos-grid img{height:clamp(28px,3.4vw,42px); max-width:160px}

.tarjetas{display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:700px){ .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tarjeta{
  position:relative; display:grid; gap:.85rem; align-content:start;
  background:#FFFFFF; border:1px solid var(--border); border-radius:14px;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:0 14px 34px -26px rgba(56,68,86,.35);
}
.tarjeta .num{position:absolute; top:1.1rem; right:1.3rem; font-family:var(--display); font-weight:600; font-size:1.7rem; color:rgba(56,68,86,.14); letter-spacing:-.02em}
.tarjeta .icono{display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:#F3F4F6; color:#B9542F}
.tarjeta .icono .ico{width:1.35rem; height:1.35rem}
.tarjeta .chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{display:inline-block; padding:.28rem .6rem; border-radius:99px; background:#F3F4F6; font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.tarjeta h3{font-family:var(--sans); font-weight:700; font-size:1.18rem; letter-spacing:-.01em; text-transform:none; line-height:1.25; margin-top:.15rem}
.tarjeta p{font-size:.93rem; line-height:1.6; color:#4A5563; margin:0}
.logras{background:#FFF1EA; border-left:3px solid var(--coral); border-radius:6px; padding:.8rem .95rem; font-size:.9rem; line-height:1.5; color:var(--ink)}
.logras b{color:#B9542F; font-weight:700}
.tarjeta .checks{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.tarjeta .checks li{display:grid; grid-template-columns:auto 1fr; gap:.55rem; align-items:start; font-size:.88rem; color:var(--ink)}
.tarjeta .checks .ico{width:1.05rem; height:1.05rem; margin-top:.15rem; color:#4F8A63; stroke-width:2}
.tarjeta .btn{justify-self:start; margin-top:.35rem; font-size:.88rem; padding:.7rem 1.15rem}
.tarjeta .btn--outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.tarjeta .btn--outline:hover,.tarjeta .btn--outline:focus-visible{background:var(--ink); color:#FFFFFF}

.tarjeta--destacada{background:var(--coral); border-color:var(--coral)}
.tarjeta--destacada .num{color:rgba(56,68,86,.22)}
.tarjeta--destacada .icono{background:#FFFFFF}
.tarjeta--destacada .chip{background:rgba(255,255,255,.7)}
.tarjeta--destacada p{color:#3A3F4B}
.tarjeta--destacada .logras{background:rgba(255,255,255,.75); border-left-color:var(--ink)}
.tarjeta--destacada .btn--primary{background:var(--ink); color:#FFFFFF; border-color:var(--ink)}
.tarjeta--destacada .btn--primary:hover,.tarjeta--destacada .btn--primary:focus-visible{background:#1F2937; border-color:#1F2937; color:#FFFFFF}
.tarjeta .badge{position:absolute; top:-.7rem; left:1.25rem; padding:.3rem .7rem; border-radius:99px; background:var(--ink); color:#FFFFFF; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.tarjeta--destacada .checks{gap:.4rem}
/* Sobre la portada azul empolvado, los botones van en tinta */
.svc-portada .btn--ink{background:var(--ink); color:#FFFFFF; border-color:var(--ink)}
.svc-portada .btn--ink:hover,.svc-portada .btn--ink:focus-visible{background:#1F2937; border-color:#1F2937; color:#FFFFFF}
.svc-portada .btn--ghost{color:var(--ink); border-color:rgba(56,68,86,.4)}
.svc-portada .btn--ghost:hover,.svc-portada .btn--ghost:focus-visible{background:rgba(255,255,255,.6)}
.svc-portada .kicker{color:#B9542F}
#ayudarte h2 .p{font-style:italic; font-weight:500; color:#B9542F; text-transform:none}
#ayudarte .sec-head{max-width:46rem}
#ayudarte .sec-head .lede-fuerte{margin-top:1rem}
/* Contraste AA en las tarjetas: kicker más oscuro sobre azul empolvado, número
   de tarjeta como gris sólido (3:1 en texto grande), «Tú logras» en terracota
   profunda y caja sólida en la destacada. */
.svc-portada .kicker{color:#9A3316}
.tarjeta .num{color:#8A94A3}
.tarjeta--destacada .num{color:#5A6474}
.logras b{color:#A64A2A}
.tarjeta--destacada .logras{background:#FFF3EE}
/* Sondas: el disco de la portada no debe medir más que su caja, y a 1280px la
   cabecera con redes sobraba 3px → los iconos entran desde 1300px. */
.svc-portada-foto::before{width:100%}
.svc-portada-foto img{width:92%; margin-inline:auto}
@media (min-width:1280px) and (max-width:1299px){ .redes{display:none} }
/* La foto apoya en el borde inferior de la portada, sin aire debajo */
.svc-portada{padding-bottom:0}
.svc-portada-foto{margin-top:auto}

/* ==========================================================================
   Servicios «juguetón»: la ingeniera pidió que la página sea dinámica y no
   una retícula uniforme. Tarjetas de distinto tamaño y color, columnas
   desfasadas, números serif enormes, etiquetas giradas, formas de color
   detrás y chips flotando en la portada. Todo el movimiento se apaga con
   prefers-reduced-motion.
   ========================================================================== */

/* — Portada: chips flotantes alrededor del retrato — */
.svc-portada-foto{overflow:visible}
.flot{position:absolute; z-index:3; padding:.5rem .85rem; border-radius:99px; background:#FFFFFF; border:1px solid var(--border); font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--ink); box-shadow:0 10px 24px -16px rgba(56,68,86,.5); white-space:nowrap; animation:flotar 6s ease-in-out infinite}
.flot--a{top:12%; left:-6%; transform:rotate(-6deg); background:var(--coral)}
.flot--b{top:38%; right:-10%; animation-delay:-2s; transform:rotate(4deg)}
.flot--c{bottom:22%; left:-12%; animation-delay:-4s; transform:rotate(3deg); background:#FFFFFF}
@keyframes flotar{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:899px){ .flot--a{left:0} .flot--b{right:0} .flot--c{left:0} }

/* — Cabecera de sección con píldora — */
.pildora{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:99px; background:#FFFFFF; border:1px solid var(--border); font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); transform:rotate(-2deg)}
.pildora::before{content:''; width:8px; height:8px; border-radius:50%; background:#B9542F}
#ayudarte h2 .p{position:relative; display:inline-block}
#ayudarte h2 .p::after{content:''; position:absolute; left:0; right:0; bottom:-.08em; height:.42em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16c40-10 90-12 194-6' fill='none' stroke='%23F6AF97' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; z-index:-1}

/* — Fondo de la sección: formas de color — */
#ayudarte{position:relative; overflow:hidden}
#ayudarte::before,#ayudarte::after{content:''; position:absolute; border-radius:50%; pointer-events:none; z-index:0}
#ayudarte::before{width:38vw; height:38vw; max-width:560px; max-height:560px; right:-12vw; top:18%; background:var(--pastel)}
#ayudarte::after{width:26vw; height:26vw; max-width:380px; max-height:380px; left:-9vw; bottom:6%; background:#FFE3D6}
#ayudarte .shell{position:relative; z-index:1}

/* — La retícula rota — */
.tarjetas{gap:1.4rem; align-items:start}
.tarjeta{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.tarjeta:hover{transform:translateY(-8px) rotate(-.8deg); box-shadow:0 26px 44px -28px rgba(56,68,86,.45)}
.tarjeta:nth-child(even):hover{transform:translateY(-8px) rotate(.8deg)}
.tarjeta .num{top:.6rem; right:1.1rem; font-family:var(--serif); font-style:italic; font-weight:500; font-size:4.6rem; line-height:1; letter-spacing:-.04em; color:rgba(56,68,86,.10)}
.tarjeta .badge{transform:rotate(-4deg); left:1rem}
.tarjeta--azul{background:var(--pastel); border-color:var(--pastel)}
.tarjeta--azul .icono,.tarjeta--azul .chip{background:#FFFFFF}
.tarjeta--azul .logras{background:#FFFFFF}
.tarjeta--tinte{background:#FFF1EA; border-color:#FFE3D6}
.tarjeta--tinte .icono,.tarjeta--tinte .chip,.tarjeta--tinte .logras{background:#FFFFFF}
.tarjeta--borde{border:2px solid var(--ink)}
.tarjeta--borde .badge{background:var(--coral); color:var(--ink)}
.tarjeta .num{color:#8A94A3}
.tarjeta--destacada .num{color:#5A6474}

@media (min-width:1080px){
  .tarjetas{grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto auto}
  .t-01{grid-column:1; grid-row:1 / span 2}
  .t-02{grid-column:2; grid-row:1; margin-top:2.75rem}
  .t-03{grid-column:2; grid-row:2; margin-top:2.75rem}
  .t-04{grid-column:3; grid-row:1 / span 2; margin-top:5.5rem}
  .t-05{grid-column:1 / span 2; grid-row:3; margin-top:1rem}
  .t-06{grid-column:3; grid-row:3; margin-top:3.5rem; transform:rotate(1.2deg)}
  .t-06:hover{transform:translateY(-8px) rotate(2deg)}
  /* la ancha se lee en horizontal */
  .t-05{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:2rem}
  .t-05 .checks{grid-column:2; grid-row:2 / span 4; align-self:center; padding-left:2rem; border-left:1px dashed var(--border)}
  .t-05 .num{font-size:6rem}
}
@media (min-width:700px) and (max-width:1079px){
  .t-02,.t-04,.t-06{margin-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  .flot{animation:none}
  .tarjeta,.tarjeta:hover,.t-06,.t-06:hover{transition:none; transform:none}
}
@media (min-width:1080px){
  .t-01,.t-04{align-self:stretch}
  .t-01 .btn,.t-04 .btn{margin-top:auto}
  .t-05 > *{grid-column:1}
  .t-05 .num{grid-column:auto}
  .t-05 .checks{grid-column:2; grid-row:1 / span 6}
}
.flot--c{bottom:6%; left:-14%}
@media (min-width:1080px){
  /* las tarjetas altas: la lista absorbe el espacio y el botón cae al fondo */
  .t-01,.t-04{align-content:stretch; grid-template-rows:repeat(5,auto) 1fr auto}
  .t-01 .checks,.t-04 .checks{align-self:start}
}
/* Sondas: las formas de fondo pasan a gradientes radiales (no ensanchan la
   caja) y el chip flotante inferior entra en pantalla por debajo de 900px. */
#ayudarte::before,#ayudarte::after{content:none}
#ayudarte{background:
  radial-gradient(circle at 104% 32%, var(--pastel) 0 clamp(160px,19vw,280px), transparent calc(clamp(160px,19vw,280px) + 1px)),
  radial-gradient(circle at -4% 86%, #FFE3D6 0 clamp(110px,13vw,190px), transparent calc(clamp(110px,13vw,190px) + 1px)),
  #FFFFFF}
@media (max-width:899px){ .flot--c{left:0; bottom:4%} .flot--a{left:0} .flot--b{right:0} }
.tarjeta--tinte .num{color:#7A8494}
.tarjeta--azul .num{color:#6B7585}

/* ==========================================================================
   PRUEBA DE PALETA «amarillo / negro / blanco» (referencia Ameli Nimbus).
   Bloque autocontenido al final: si la ingeniera no lo aprueba, se borra
   este bloque y vuelve la paleta salmón / azul empolvado. Contrastes:
   #1F1F1F sobre amarillo 10.5:1, #8A6500 sobre blanco 5.3:1 (acento de texto
   pequeño), #B8860B sobre blanco 3.3:1 (solo titulares grandes), amarillo
   sobre negro 11:1.
   ========================================================================== */
:root{
  --coral:#FFC627; --coral-dark:#E5AC00; --coral-lift:#FFD45C;
  --coral-ink:#8A6500; --coral-ink-2:#8A6500; --amber:#8A6500; --amber-rgb:138,101,0;
  --ink:#1F1F1F; --navy:#1F1F1F; --navy-rgb:31,31,31; --ink-2:#4A4A4A;
  --pastel:#F6F6F3; --pastel-deep:#1A1A1A; --navy-deep:#1A1A1A;
  --cream-soft:#FFF6D6;
  --p-gestion:#1F1F1F; --p-prevencion:#8A6500; --p-personas:#1F1F1F;
  --venn-prevencion:#FFC627;
  --border:#E4E4E0;
}
.hero{--ink-2:#4A4A4A}
.band--navy,.band--deep,.train-panel{--cream:#1F1F1F; --cream-rgb:31,31,31; --ink-2:#4A4A4A; --amber:#8A6500; --p-prevencion:#8A6500; background:var(--pastel)}
.band--navy .btn--ghost{color:#1F1F1F; border-color:rgba(31,31,31,.35)}
.btn--ink{background:#1F1F1F; color:#FFFFFF; border-color:#1F1F1F}
.btn--ink:hover,.btn--ink:focus-visible{background:#000; border-color:#000; color:#FFFFFF}
:focus-visible{outline-color:#1F1F1F}

/* Pie: negro como los blobs de la referencia, amarillo de acento */
.site-foot{background:#1A1A1A; color:#FFFFFF; --cream:#FFFFFF; --cream-rgb:255,255,255; --ink:#FFFFFF; --ink-2:#CFCFCF; border-top:0}
.site-foot a{color:#FFFFFF}
.foot-tag,.foot-col h3{color:#FFC627}
.site-foot :focus-visible{outline-color:#FFC627}
.sub-foot{background:#1A1A1A; color:#CFCFCF; border-top:1px solid rgba(255,255,255,.12)}
.sub-foot a{color:#FFFFFF}

/* Acentos de texto: terracota → ámbar oscuro (o dorado en titulares grandes) */
.hero h1 .p,.approach-copy h2 .p,.svc-portada h1 .p,#ayudarte h2 .p,#enfoque h2 .op{color:#B8860B}
.kicker,.svc-portada .kicker,.pildora::before{color:#8A6500; background-color:transparent}
.pildora::before{background:#FFC627}
.logras{background:#FFF6D6; border-left-color:#FFC627}
.logras b{color:#8A6500}
.tarjeta .icono{color:#8A6500; background:#F3F3F0}
.chip{background:#F3F3F0}
.tarjeta--destacada .logras{background:#FFFFFF}
.tarjeta--destacada .num{color:#5A4A10}
.tarjeta--destacada p{color:#3A3A3A}
.tarjeta--destacada .btn--primary{background:#1F1F1F; border-color:#1F1F1F; color:#FFFFFF}
.tarjeta--tinte{background:#FFF6D6; border-color:#FFE99A}
.tarjeta--tinte .num{color:#7A6A2A}
.tarjeta .badge{background:#1F1F1F; color:#FFFFFF}
.tarjeta--borde{border-color:#1F1F1F}
.tarjeta--borde .badge{background:#FFC627; color:#1F1F1F}
.hero-art::after{border-color:rgba(31,31,31,.35)}
.rail-track img{filter:none}
#experiencia .rail::before,#experiencia .rail::after{background:linear-gradient(90deg,#F6F6F3,transparent)}
#experiencia .rail::after{background:linear-gradient(270deg,#F6F6F3,transparent)}
.sub-toggle:hover,.has-sub:hover .sub-toggle,.sub-toggle[aria-expanded="true"],.drawer-toggle:hover,.drawer-toggle[aria-expanded="true"],.redes a:hover,.redes a:focus-visible,#insights .posts a:hover{background:#FFF6D6; color:#1F1F1F}
.nav .sub-lista a:hover,.nav .sub-lista a:focus-visible{background:#FFC627; color:#1A1A1A; font-weight:600}
#ayudarte h2 .p::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16c40-10 90-12 194-6' fill='none' stroke='%23FFC627' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Tarjeta 04 en negro (la referencia juega con blobs negros), texto claro */
.tarjeta--azul{background:#1A1A1A; border-color:#1A1A1A; color:#FFFFFF}
.tarjeta--azul h3,.tarjeta--azul .checks li{color:#FFFFFF}
.tarjeta--azul p{color:#D6D6D6}
.tarjeta--azul .num{color:#8C8C8C}
.tarjeta--azul .icono{background:#FFC627; color:#1F1F1F}
.tarjeta--azul .chip{background:rgba(255,255,255,.12); color:#FFFFFF}
.tarjeta--azul .logras{background:rgba(255,255,255,.08); border-left-color:#FFC627; color:#FFFFFF}
.tarjeta--azul .logras b{color:#FFC627}
.tarjeta--azul .checks .ico{color:#FFC627}
.tarjeta--azul .btn--outline{color:#FFFFFF; border-color:rgba(255,255,255,.6)}
.tarjeta--azul .btn--outline:hover,.tarjeta--azul .btn--outline:focus-visible{background:#FFC627; border-color:#FFC627; color:#1F1F1F}

/* Formas orgánicas (blobs) en vez de discos perfectos */
.hero-art::before{border-radius:58% 42% 45% 55% / 55% 48% 52% 45%}
.svc-portada{background:#FFFFFF}
.svc-portada-foto::before{background:#FFC627; border-radius:60% 40% 35% 65% / 55% 45% 55% 45%; width:112%}
.svc-portada::after{content:''; position:absolute; left:-6%; bottom:-14%; width:22vw; height:14vw; max-width:300px; max-height:190px; background:#1A1A1A; border-radius:62% 38% 48% 52% / 50% 62% 38% 50%; pointer-events:none; z-index:0}
.svc-portada{position:relative}
.svc-portada .shell{position:relative; z-index:1}
.flot--a{background:#FFC627}
#ayudarte{background:#FFFFFF}
#ayudarte::before,#ayudarte::after{content:''; position:absolute; pointer-events:none; z-index:0}
#ayudarte::before{right:0; top:14%; width:clamp(160px,22vw,340px); height:clamp(120px,16vw,260px); background:#FFC627; border-radius:63% 37% 54% 46% / 55% 48% 52% 45%; opacity:.9}
#ayudarte::after{left:0; bottom:8%; width:clamp(90px,12vw,190px); height:clamp(90px,10vw,150px); background:#1A1A1A; border-radius:42% 58% 50% 50% / 60% 40% 60% 40%}
.logos-franja{border-bottom-color:#E4E4E0}
.band + .band{border-top-color:#E4E4E0}
/* Venn y franja de clientes en la paleta amarillo/negro */
:root{--venn-gestion:#E9E9E4; --venn-prevencion:#FFC627; --venn-personas:#1F1F1F; --venn-mix-gp:#FFE28A; --venn-mix-ge:#8C8C88; --venn-mix-pe:#7A6000; --venn-core:#FFFFFF; --venn-on-dark:#1F1F1F; --venn-on-light:#1F1F1F}
.venn .lobe--e text,.venn .lobe--e .on-dark{fill:#FFFFFF}
.venn .lobe--e circle{stroke:#FFFFFF}
#clientes{--cream:#1F1F1F; --cream-rgb:31,31,31; --rule-dark:rgba(31,31,31,.14)}
#clientes .rail-label{color:#8A6500}
#clientes .rail::before{background:linear-gradient(90deg,#F6F6F3,rgba(246,246,243,0))}
#clientes .rail::after{background:linear-gradient(270deg,#F6F6F3,rgba(246,246,243,0))}
#clientes .falta{border-color:rgba(31,31,31,.22)}
/* Pie negro: textos claros y logo blanco (el archivo cambia por CSS para no
   tocar el HTML mientras la paleta esté a prueba) */
.foot-brand p,.foot-col a,.foot-col li,.foot-base,.site-foot p,.site-foot li{color:#CFCFCF}
.foot-col a:hover,.foot-col a:focus-visible{color:#FFC627}
.foot-brand img{content:url("../img/logo-blanco.png")}
.site-foot .ico{color:#FFC627}
.skip{background:#FFC627; color:#1F1F1F}
@media (max-width:899px){ .svc-portada-foto::before{width:100%} }
.svc-art::after{border-color:rgba(31,31,31,.35)}
.svc-art::before{border-radius:58% 42% 45% 55% / 55% 48% 52% 45%}
.pilares .p{--dot:#FFC627}
.pilares .g{--dot:#1F1F1F}
.pilares .e{--dot:#8C8C88}
/* Venn: el lóbulo Personas es negro → sus etiquetas van en blanco; los rótulos
   laterales entran 12px hacia el centro y el título baja a 14.5px para que no
   toquen el borde del círculo. */
.venn .on-black{fill:#FFFFFF}
.venn .v-title{font-size:14.5px; letter-spacing:.03em}
.venn .v-item{font-size:12px}
/* Venn más grande: radios 104 → 118 en el SVG y la caja crece a 520px */
.venn{max-width:520px}
/* La columna del diagrama gana ancho para que el Venn se vea grande de verdad */
@media (min-width:1000px){ .approach{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr) minmax(0,.8fr); gap:clamp(2rem,4vw,3.5rem)} }
.venn{max-width:600px}
.venn .v-title{font-size:13.5px}
/* Titular «Gestión + Prevención + Personas»: el «+» va pegado a su palabra
   (nbsp) y el cuerpo baja un punto para que cada línea quepa en la columna. */
.approach-copy h2{font-size:clamp(1.8rem,2.6vw,2.45rem); letter-spacing:.03em}
.approach h2 .op{font-style:normal}

/* Iconos más grandes en credenciales, celdas de servicio y método; cifras de
   las credenciales grandes, en serif itálica, con conteo desde 0 (el JS ya
   anima [data-conteo]; el número reserva su ancho con tabular-nums). */
.creds .ico{width:2.3rem; height:2.3rem; stroke-width:1.3}
.cell .ico{width:2.4rem; height:2.4rem; stroke-width:1.3}
.method-steps .ico{width:2rem; height:2rem; stroke-width:1.4}
.creds b{font-size:1rem; line-height:1.2}
.creds .cifra{display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap}
.creds .cifra-n{font-family:var(--serif); font-style:italic; font-weight:500; font-size:2.3rem; line-height:.9; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}
.creds .cifra-n [data-conteo]{display:inline-block; min-width:1.15em}
.creds .cifra-n span{font-size:inherit; line-height:inherit; color:inherit; font-family:inherit; font-style:inherit}

/* Texto blanco con sombra sobre los rellenos amarillos (pedido de la clienta:
   el texto oscuro «no se nota»). Nota: blanco sobre #FFC627 mide 1.6:1, por
   debajo de AA; la sombra doble recupera legibilidad visual pero no el
   contraste normativo. Decisión de la clienta, registrada en DESIGN.md. */
:root{--sombra-txt:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.22)}
.cell--act,.cell--act h3,.cell--act p,.cell--act .tlink,.cell--act .ico,
.band--coral,.band--coral h2,.band--coral p,.band--coral li,.band--coral .wants li,.band--coral a:not(.btn),.band--coral .contact-mail,.band--coral .ico,
.tarjeta--destacada,.tarjeta--destacada h3,.tarjeta--destacada p,.tarjeta--destacada .checks li,.tarjeta--destacada .icono,
.btn--primary,.head-cta,.tarjeta--destacada .btn--primary{color:#FFFFFF; text-shadow:var(--sombra-txt)}
.cell--act .ico,.band--coral .ico,.btn--primary .ico,.head-cta .ico{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.band--coral .wants li{border-color:rgba(255,255,255,.45)}
.band--coral .btn--ink{text-shadow:none}
.tarjeta--destacada .btn--primary{background:#1F1F1F; border-color:#1F1F1F; text-shadow:none}
.tarjeta--destacada .logras,.tarjeta--destacada .logras b,.tarjeta--destacada .chip{text-shadow:none}
.tarjeta--destacada .logras{color:#1F1F1F}
.tarjeta--destacada .logras b{color:#8A6500}
.tarjeta--destacada .chip{color:#1F1F1F}
.tarjeta--destacada .icono{background:rgba(255,255,255,.28); color:#FFFFFF}
.tarjeta--destacada .num{color:rgba(255,255,255,.75); text-shadow:var(--sombra-txt)}
.tarjeta--destacada .checks .ico{color:#FFFFFF; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.cell--act:hover .ico{color:#FFFFFF}
/* Venn: lóbulo Prevención (amarillo) con etiquetas blancas y sombra */
.venn .on-light{fill:#FFFFFF; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
/* Prevención: la sombra dura ensuciaba el blanco y se leía gris; sombra
   blanda y algo más de peso para que el texto se vea blanco de verdad. */
.venn .on-light{fill:#FFFFFF; filter:drop-shadow(0 1px 2.5px rgba(0,0,0,.38))}
.venn .v-item.on-light{font-weight:600}
/* Ganaba «#enfoque .venn .on-light{fill:var(--navy)}» por especificidad. */
#enfoque .venn .on-light{fill:#FFFFFF}

/* ==========================================================================
   Acordeón horizontal de servicios (Home). Seis paneles en fila; el abierto
   crece (flex) y se pinta de amarillo, los cerrados muestran número, icono y
   título en vertical. Se abre con ratón, toque o teclado (JS pone is-open y
   aria-expanded). En móvil se apila y abre en vertical. Sin movimiento con
   prefers-reduced-motion.
   ========================================================================== */
.sec-head--linea h2{max-width:none; white-space:nowrap}
@media (max-width:640px){ .sec-head--linea h2{white-space:normal} }

.acordeon{display:flex; gap:.7rem; height:clamp(440px,52vw,540px); margin-top:clamp(2rem,4vw,3rem)}
.panel{
  position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  background:#F6F6F3; border-radius:18px; overflow:hidden; cursor:pointer;
  transition:flex-grow .6s cubic-bezier(.2,.8,.2,1), background-color .4s, transform .4s;
}
.panel:hover{transform:translateY(-4px)}
.panel.is-open{flex-grow:3.4; background:#FFC627; cursor:default; transform:none}
.panel-cab{
  appearance:none; border:0; background:transparent; font:inherit; color:inherit; text-align:left;
  display:grid; grid-template-rows:auto auto 1fr; justify-items:start; gap:1rem;
  padding:1.3rem 1.1rem; width:100%; height:100%; cursor:inherit;
}
.panel.is-open .panel-cab{height:auto; grid-template-rows:auto; grid-template-columns:auto auto 1fr; align-items:center; gap:.85rem; padding-bottom:0}
.panel-num{font-family:var(--serif); font-style:italic; font-weight:500; font-size:2.4rem; line-height:1; color:#8A8A85; transition:color .3s}
.panel.is-open .panel-num{color:#FFFFFF; text-shadow:var(--sombra-txt)}
.panel-cab .ico{width:1.9rem; height:1.9rem; stroke-width:1.4; color:#8A6500; transition:transform .5s cubic-bezier(.2,.8,.2,1), color .3s}
.panel.is-open .panel-cab .ico{color:#FFFFFF; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); transform:rotate(-8deg) scale(1.15)}
.panel-tit{
  font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  writing-mode:vertical-rl; transform:rotate(180deg); align-self:end; white-space:nowrap;
}
.panel.is-open .panel-tit{writing-mode:horizontal-tb; transform:none; align-self:center; color:#FFFFFF; text-shadow:var(--sombra-txt); letter-spacing:.12em}
.panel-cuerpo{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1), opacity .35s}
.panel.is-open .panel-cuerpo{grid-template-rows:1fr; opacity:1; transition-delay:.15s}
.panel-in{min-height:0; overflow:hidden; padding:.6rem 1.35rem 1.5rem; display:grid; gap:.9rem; align-content:start}
.panel-in h3{font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,1.6vw,1.45rem); text-transform:none; letter-spacing:0; color:#FFFFFF; text-shadow:var(--sombra-txt); line-height:1.2}
.panel-in p{color:#FFFFFF; text-shadow:var(--sombra-txt); font-size:.98rem; line-height:1.6; max-width:44ch; margin:0}
.panel-in .chips{display:flex; flex-wrap:wrap; gap:.4rem}
.panel-in .chip{background:rgba(255,255,255,.85); color:#1F1F1F}
.panel-in .btn{justify-self:start; margin-top:.3rem}
.panel-in > *{transform:translateY(10px); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s}
.panel.is-open .panel-in > *{transform:none; opacity:1}
.panel.is-open .panel-in > :nth-child(1){transition-delay:.2s}
.panel.is-open .panel-in > :nth-child(2){transition-delay:.28s}
.panel.is-open .panel-in > :nth-child(3){transition-delay:.36s}
.panel.is-open .panel-in > :nth-child(4){transition-delay:.44s}
.panel-cab:focus-visible{outline:2px solid #1F1F1F; outline-offset:-6px; border-radius:14px}
.acordeon-pie{text-align:center; margin-top:1.75rem; color:#4A4A4A}
.acordeon-pie .tlink{color:#8A6500}

@media (max-width:819px){
  .acordeon{flex-direction:column; height:auto; gap:.6rem}
  .panel{flex:none}
  .panel.is-open{flex-grow:0}
  .panel-cab{grid-template-rows:auto; grid-template-columns:auto auto 1fr; align-items:center; gap:.8rem; padding:1rem 1.1rem; height:auto}
  .panel-tit{writing-mode:horizontal-tb; transform:none; align-self:center}
  .panel-num{font-size:1.9rem}
  .panel:hover{transform:none}
  .panel-in{padding:.2rem 1.1rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .panel,.panel-cab .ico,.panel-cuerpo,.panel-in > *{transition:none}
  .panel:hover{transform:none}
}
/* Panel abierto: el título pequeño sobra (ya está el h3); número grande de
   marca de agua abajo a la derecha; altura algo más contenida. */
@media (min-width:820px){ .acordeon{height:clamp(400px,44vw,470px)} }
.panel.is-open .panel-tit{display:none}
.panel.is-open::after{content:attr(data-num); position:absolute; right:1rem; bottom:-.35em; font-family:var(--serif); font-style:italic; font-weight:500; font-size:11rem; line-height:1; color:rgba(255,255,255,.28); pointer-events:none}
@media (max-width:819px){ .panel.is-open::after{font-size:6rem} }
/* Cifras del hero: en pantallas muy estrechas bajan de tamaño para no
   desbordar la columna (sonda: 367px en caja de 310 a 320px de ancho). */
@media (max-width:379px){ .creds .cifra-n{font-size:1.8rem} .creds{gap:1.25rem .75rem} }
/* «ORGANIZACIONES» no cabe en 320-360px con el h1 a 2.4rem: baja a 2.05rem. */
@media (max-width:399px){ .hero h1{font-size:2rem; letter-spacing:.01em} }
@media (max-width:339px){ .hero h1{font-size:1.85rem} }

/* ==========================================================================
   Mismo lenguaje en todas las páginas (17-sep-2026): píldora en los kickers,
   chips flotantes sobre los retratos y fotos de servicio, celdas «vivas»
   que se levantan al pasar, panel Advisory de Conóceme en blanco sobre
   amarillo, portada de ¿Hablamos? con retrato.
   ========================================================================== */
/* Kicker = píldora con punto amarillo (Conóceme, Formación, Servicios, ¿Hablamos?) */
.kicker,.svc-portada .kicker{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:99px;
  background:#FFFFFF; border:1px solid var(--border); font-family:var(--display); font-weight:700;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#1F1F1F; transform:rotate(-2deg); margin-bottom:1rem;
}
.kicker::before{content:''; width:8px; height:8px; border-radius:50%; background:#FFC627}

/* Chips flotantes en el hero de Conóceme y en la foto de las páginas de servicio */
.hero-art{overflow:visible}
.hero-art .flot--a{top:16%; left:-4%}
.hero-art .flot--b{top:44%; right:-6%}
.hero-art .flot--c{bottom:18%; left:-8%}
.svc-art .flot{z-index:3}
.svc-art .flot--a{top:-.9rem; left:-.9rem}
.svc-art .flot--b{bottom:1.2rem; right:-.9rem; top:auto}
.train-grid{position:relative}
.train-grid .flot--a{top:-.9rem; left:-.9rem; z-index:3}
.train-grid .flot--b{top:auto; bottom:-.9rem; right:-.9rem; z-index:3}
@media (max-width:899px){
  .hero-art .flot--a,.hero-art .flot--c{left:0} .hero-art .flot--b{right:0}
  .svc-art .flot--a,.train-grid .flot--a{left:.6rem} .svc-art .flot--b,.train-grid .flot--b{right:.6rem}
}

/* Celdas vivas: se levantan y giran un poco al pasar (mismo gesto que las tarjetas) */
.prog,.cell--static,.ventures li,.assocs li,.cases li,.methodology li,.datos li,.wants li,.advisory-list li{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.prog:hover,.cell--static:hover,.ventures li:hover,.assocs li:hover,.cases li:hover,.methodology li:hover{
  transform:translateY(-5px) rotate(-.6deg); box-shadow:0 22px 40px -28px rgba(31,31,31,.45);
}
.prog:nth-child(even):hover,.cell--static:nth-child(even):hover,.ventures li:nth-child(even):hover,.cases li:nth-child(even):hover{transform:translateY(-5px) rotate(.6deg)}
.ventures li,.assocs li,.cases li,.methodology li{border-radius:10px}

/* Conóceme: panel Advisory amarillo → blanco con sombra, como el resto */
.advisory,.advisory h3,.advisory p,.advisory li,.advisory .col-head p,.advisory .ico{color:#FFFFFF; text-shadow:var(--sombra-txt)}
.advisory .ico{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.advisory .btn--ink{text-shadow:none}

/* ¿Hablamos?: portada con retrato (reutiliza .svc-portada) y formulario más vivo */
.svc-portada h1 .p{text-transform:uppercase}
.form input,.form select,.form textarea{border-radius:12px; transition:border-color .25s, box-shadow .25s, transform .25s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#FFC627; box-shadow:0 0 0 4px rgba(255,198,39,.35); outline:none}
.form .btn--primary{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.form .btn--primary:hover{transform:translateY(-3px) rotate(-1deg); box-shadow:0 16px 30px -18px rgba(31,31,31,.5)}

@media (prefers-reduced-motion:reduce){
  .prog:hover,.cell--static:hover,.ventures li:hover,.assocs li:hover,.cases li:hover,.methodology li:hover,.form .btn--primary:hover{transform:none}
}
.train-grid .flot--b{top:-.9rem; bottom:auto; right:-.9rem}
.train-panel dt,.train-panel .foot-tag{color:#8A6500}
/* Conóceme: entre 900 y 1099px el hero ya va a dos columnas pero estrechas;
   los chips se quedan dentro de la columna del retrato. */
@media (min-width:900px) and (max-width:1099px){ .hero-art .flot--a,.hero-art .flot--c{left:0} .hero-art .flot--b{right:0} }
/* Títulos largos de servicio («CAPACITACIÓN», «FACILITACIÓN») en 320px */
@media (max-width:359px){ .svc-hero h1{font-size:2rem; letter-spacing:.01em} }
@media (max-width:339px){ .svc-hero h1{font-size:1.8rem} }
/* «Audito → / Asesoro →» en 320px: el h3 no cabía; baja de tamaño y puede partir. */
@media (max-width:359px){ .como-steps h3{font-size:1.35rem; overflow-wrap:anywhere} }
.spec li{min-width:0}
.spec h3,.spec p{overflow-wrap:anywhere; min-width:0}
/* Palabras largas en titulares («ACOMPAÑAMIENTO», «ORGANIZACIONES») pueden
   partirse en pantallas muy estrechas en vez de desbordar. */
@media (max-width:399px){ h1,h2{overflow-wrap:anywhere; hyphens:auto} }
/* Credenciales del hero: iconos a 3rem y cifras más grandes y con más peso
   para que se noten (Cormorant 600 itálica, negro). */
.creds .ico{width:3rem; height:3rem; stroke-width:1.25}
.creds .cifra-n{font-size:3rem; font-weight:600; color:#111111; line-height:.85}
.creds .cifra{gap:.4rem}
.creds b{font-size:1.05rem}
@media (max-width:379px){ .creds .cifra-n{font-size:2.2rem} .creds .ico{width:2.4rem; height:2.4rem} }

/* Conóceme: las seis empresas con su logo (assets/img/LOGOS). Tres columnas,
   logo contenido en una caja de altura fija, «Gerente General» debajo. */
.ventures--logos{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
@media (min-width:560px){ .ventures--logos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ventures--logos li{background:#FFFFFF; border:1px solid var(--border); border-radius:12px; padding:1rem .9rem .85rem; gap:.6rem; justify-items:center; text-align:center}
.ventures--logos img{display:block; width:100%; max-width:150px; height:56px; object-fit:contain}
.ventures--logos span{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#4A4A4A}
.ventures--logos{background:transparent; border:0; border-radius:0; overflow:visible}
/* La columna es estrecha: dos por fila y logos más grandes */
@media (min-width:560px){ .ventures--logos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ventures--logos img{max-width:none; height:64px}
.ventures--logos li{padding:1.1rem 1rem .9rem}

/* Iconos más grandes en todas las listas con icono (pedido de la clienta):
   Advisory, resultados, asociaciones, metodología, specs, datos de contacto,
   «¿No sabes por dónde empezar?», panel de formación, tarjetas y acordeón. */
.advisory-list .ico,.cases .ico,.methodology .ico,.spec .ico,.datos .ico,.wants .ico,.train-panel .ico,.posts .ico,.cuando-list .ico,.svc-out .ico,.svc-list .ico{
  width:2.4rem; height:2.4rem; stroke-width:1.3;
}
.ico--lg{width:3rem; height:3rem; stroke-width:1.2}
.tarjeta .icono{width:56px; height:56px; border-radius:12px}
.tarjeta .icono .ico{width:1.9rem; height:1.9rem; stroke-width:1.4}
.panel-cab .ico{width:2.4rem; height:2.4rem; stroke-width:1.3}
.tarjeta .checks .ico,.panel-in .checks .ico{width:1.3rem; height:1.3rem}
.cases li{grid-template-columns:auto 1fr; column-gap:1rem}
.advisory-list li{gap:.6rem}
.cases li{align-items:center}
.cases b{font-size:1.02rem}

/* Logos nuevos (17-sep-2026): MISUR, SNI, Cámara de Comercio de Arequipa y
   AMEP. MISUR y AMEP vienen con fondo blanco: multiply lo funde con la banda
   gris. En Conóceme cada asociación lleva su logo a la izquierda. */
.logos-grid img,.rail-track img{mix-blend-mode:multiply}
.logos-grid img{height:clamp(34px,4vw,52px); max-width:180px}
.assocs .assoc--logo{grid-template-columns:72px 1fr; column-gap:1rem; align-items:center}
.assocs .assoc--logo img{grid-row:1 / span 2; width:72px; height:56px; object-fit:contain; mix-blend-mode:multiply}
.assocs .assoc--logo b{grid-column:2}
.assocs .assoc--logo p{grid-column:2}
/* Los logos cuadrados (MISUR, AMEP) quedaban chicos con altura fija: un poco más de alto */
.logos-grid img{height:clamp(40px,4.8vw,66px)}
.assocs .assoc--logo{grid-template-columns:84px 1fr}
.assocs .assoc--logo img{width:84px; height:68px}
/* Equilibrio óptico en «Aliados y redes»: BNI baja (su archivo es muy ancho y
   denso), MISUR y AMEP suben (son logos cuadrados con mucho aire). */
.logos-grid img[alt="BNI"]{height:clamp(30px,3.2vw,44px)}
.logos-grid img[alt="MISUR Perú"],.logos-grid img[alt^="AMEP"]{height:clamp(64px,7.6vw,104px); max-width:none}
.logos-grid img[alt="Dessau"]{height:clamp(30px,3.4vw,46px)}
.logos-grid{align-items:center; gap:clamp(1.5rem,3.5vw,3.25rem)}
.logos-grid img[alt^="AMEP"]{height:clamp(74px,8.6vw,120px)}
/* El acordeón en móvil crece con su contenido: cualquier altura fija debe ir
   siempre dentro de una consulta min-width (una regla suelta posterior anula
   el bloque móvil y el contenido se derrama sobre la sección siguiente). */
@media (max-width:819px){ .acordeon{height:auto} .panel.is-open .panel-tit{display:inline} .panel.is-open::after{display:none} }

/* «Aliados y redes» pasa de rejilla a carrusel (como Clientes), en sentido
   contrario para que las dos filas no se muevan iguales. Los tamaños por logo
   que estaban en .logos-grid se trasladan aquí; el duplicado exacto de los
   seis logos es lo que hace que el bucle no dé saltos. */
.rail--aliados .rail-track{animation-duration:52s}
.rail--aliados .rail-track img{height:clamp(30px,3.4vw,46px); max-width:200px; margin-inline:clamp(1.5rem,3vw,2.75rem)}
.rail--aliados .rail-track img[alt="BNI"],.rail--aliados .rail-track img[alt=""][src*="BNI"]{height:clamp(26px,3vw,40px)}
.rail--aliados .rail-track img[src*="MISUR"]{height:clamp(52px,6.2vw,84px)}
.rail--aliados .rail-track img[src*="AMEP"]{height:clamp(58px,7vw,96px)}
.rail--aliados{display:flex; flex-direction:column}
.rail--aliados .rail-track{align-items:center; min-height:100px}
/* El carrusel se anima con transform, así que crea contexto de apilado y
   mix-blend-mode deja de fundir el blanco: MISUR y AMEP (que traen fondo
   blanco) van sobre tarjeta blanca, que además los iguala ópticamente. */
.rail--aliados .rail-track img{mix-blend-mode:normal}
.rail--aliados .lg-chip{background:#FFFFFF; border-radius:10px; padding:.45rem .6rem; box-shadow:0 8px 20px -18px rgba(31,31,31,.5)}
.rail--aliados .lg-misur{height:clamp(56px,6.4vw,84px); max-width:none}
.rail--aliados .lg-amep{height:clamp(56px,6.4vw,84px); max-width:none}
.rail--aliados .lg-bni{height:clamp(26px,3vw,40px)}
.rail--aliados .lg-dessau{height:clamp(28px,3.2vw,42px)}
.rail--aliados .lg-sni{height:clamp(38px,4.4vw,58px)}
.rail--aliados .lg-camara{height:clamp(36px,4.2vw,54px); max-width:230px}
/* «#clientes .rail-track img{height:48px}» (selector de id) ganaba a las
   clases: las alturas por logo del carrusel de aliados se escriben con el
   mismo alcance. */
#clientes .rail--aliados .rail-track img{height:clamp(30px,3.4vw,46px); max-width:210px}
#clientes .rail--aliados .lg-misur,#clientes .rail--aliados .lg-amep{height:clamp(58px,6.6vw,88px); max-width:none}
#clientes .rail--aliados .lg-bni{height:clamp(26px,3vw,40px)}
#clientes .rail--aliados .lg-dessau{height:clamp(28px,3.2vw,42px)}
#clientes .rail--aliados .lg-sni{height:clamp(38px,4.4vw,58px)}
#clientes .rail--aliados .lg-camara{height:clamp(36px,4.2vw,54px); max-width:240px}
/* La regla genérica («… .rail-track img») pesaba más que las de clase suelta:
   cada logo se escribe con la misma estructura para que gane la más concreta. */
#clientes .rail--aliados .rail-track img.lg-misur,
#clientes .rail--aliados .rail-track img.lg-amep{height:clamp(58px,6.6vw,88px); max-width:none}
#clientes .rail--aliados .rail-track img.lg-bni{height:clamp(26px,3vw,40px)}
#clientes .rail--aliados .rail-track img.lg-dessau{height:clamp(28px,3.2vw,42px)}
#clientes .rail--aliados .rail-track img.lg-sni{height:clamp(38px,4.4vw,58px)}
#clientes .rail--aliados .rail-track img.lg-camara{height:clamp(36px,4.2vw,54px); max-width:240px}
/* MISUR y AMEP llegaron con transparencia (y AMEP en versión horizontal): ya
   no necesitan tarjeta blanca y AMEP se mide como los demás logotipos largos. */
#clientes .rail--aliados .rail-track img.lg-amep{height:clamp(30px,3.6vw,48px); max-width:240px}
/* La caja del logo en «Asociaciones» se ensancha: con AMEP en horizontal, una
   caja cuadrada lo dejaba diminuto. */
.assocs .assoc--logo{grid-template-columns:112px 1fr; column-gap:1.1rem}
.assocs .assoc--logo img{width:112px; height:66px}

/* ==========================================================================
   PRUEBA (18-sep-2026): hero con foto de conferencia al fondo, al estilo de la
   referencia de letigrijo. La foto va oscurecida con un degradado para que el
   texto blanco se lea; el retrato recortado se mantiene encima y pierde el
   disco amarillo y el aro, que en la referencia no existen. Bloque aislado:
   borrarlo devuelve el hero blanco anterior (copia en
   _copia-2026-09-18-antes-hero-foto/).
   ========================================================================== */
.hero--foto{
  position:relative; isolation:isolate;
  background:#0E1116;
  color:#FFFFFF;
  padding-block:clamp(3rem,6vw,5.5rem) 0;
  min-height:min(88vh,860px);
  display:grid; align-items:center;
}
.hero--foto::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('../img/conferencia-hero.jpg') center 30%/cover no-repeat;
}
.hero--foto::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,13,18,.94) 0%, rgba(10,13,18,.88) 42%, rgba(10,13,18,.55) 72%, rgba(10,13,18,.62) 100%),
    linear-gradient(180deg, rgba(10,13,18,.55) 0%, rgba(10,13,18,.25) 45%, rgba(10,13,18,.75) 100%);
}
/* En escritorio el texto va a la izquierda y el retrato a la derecha, como la
   referencia; en móvil manda el orden del DOM y no cambia nada. */
@media (min-width:1000px){
  .hero--foto .hero-grid{grid-template-areas:"head art" "copy art"; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}
.hero--foto .hero-art::before,.hero--foto .hero-art::after{display:none}
.hero--foto .hero-photo{filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}

/* Texto en blanco; los acentos del titular, en amarillo */
.hero--foto h1{color:#FFFFFF}
.hero--foto h1 .g,.hero--foto h1 .e{color:#FFFFFF}
.hero--foto h1 .p{color:#FFC627}
.hero--foto .hero-disciplines{color:rgba(255,255,255,.82)}
.hero--foto .hero-disciplines li{color:rgba(255,255,255,.82)}
.hero--foto .hero-disciplines li::after,.hero--foto .hero-disciplines .dot{color:#FFC627}
.hero--foto .creds{border-top-color:rgba(255,255,255,.22)}
.hero--foto .creds .ico{color:#FFC627}
.hero--foto .creds b,.hero--foto .creds .cifra-n{color:#FFFFFF}
.hero--foto .creds span{color:rgba(255,255,255,.72)}
.hero--foto{--ink:#FFFFFF; --ink-2:rgba(255,255,255,.72)}

/* Botones: amarillo con tinta (se lee mejor sobre foto) y contorno blanco */
.hero--foto .btn--primary{background:#FFC627; border-color:#FFC627; color:#1A1A1A; text-shadow:none}
.hero--foto .btn--primary .ico{filter:none}
.hero--foto .btn--primary:hover,.hero--foto .btn--primary:focus-visible{background:#FFD45C; border-color:#FFD45C; color:#1A1A1A}
.hero--foto .btn--ghost{color:#FFFFFF; border-color:rgba(255,255,255,.55)}
.hero--foto .btn--ghost:hover,.hero--foto .btn--ghost:focus-visible{background:rgba(255,255,255,.12); border-color:#FFFFFF}
.hero--foto :focus-visible{outline-color:#FFC627}
@media (max-width:999px){
  .hero--foto{min-height:0; padding-bottom:clamp(2rem,6vw,3rem)}
  .hero--foto::before{background-position:center 25%}
}
/* La columna de texto es más estrecha que antes: las credenciales pasan a
   tres columnas para que «+14 años» no se parta. */
@media (min-width:1000px){ .hero--foto .creds{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem 1rem} }
/* Cabecera transparente sobre la foto mientras no se hace scroll (solo en la
   página que lleva el hero con foto). Al desplazarse vuelve la barra blanca. */
body:has(.hero--foto) .site-head:not(.is-stuck){background:transparent; border-bottom-color:transparent}
body:has(.hero--foto) .site-head:not(.is-stuck) .brand img{content:url('../img/logo-blanco.png')}
body:has(.hero--foto) .site-head:not(.is-stuck) .brand-tag,
body:has(.hero--foto) .site-head:not(.is-stuck) .nav a,
body:has(.hero--foto) .site-head:not(.is-stuck) .sub-toggle,
body:has(.hero--foto) .site-head:not(.is-stuck) .redes a,
body:has(.hero--foto) .site-head:not(.is-stuck) .burger{color:#FFFFFF}
body:has(.hero--foto) .site-head:not(.is-stuck) .nav a:hover,
body:has(.hero--foto) .site-head:not(.is-stuck) .nav a:focus-visible,
body:has(.hero--foto) .site-head:not(.is-stuck) .redes a:hover{background:rgba(255,255,255,.14); color:#FFFFFF}
body:has(.hero--foto) .site-head:not(.is-stuck) .burger{border-color:rgba(255,255,255,.5)}
body:has(.hero--foto) .site-head:not(.is-stuck) .head-cta{background:#FFC627; border-color:#FFC627; color:#1A1A1A; text-shadow:none}
/* Panel de servicios y cajón móvil: fondo blanco; no heredar el blanco del nav sobre el hero */
body:has(.hero--foto) .site-head:not(.is-stuck) .nav .sub-lista a,
body:has(.hero--foto) .site-head:not(.is-stuck) .drawer a{color:var(--ink)}
body:has(.hero--foto) .site-head:not(.is-stuck) .nav .sub-lista a:hover,
body:has(.hero--foto) .site-head:not(.is-stuck) .nav .sub-lista a:focus-visible{background:#FFC627; color:#1A1A1A; font-weight:600}
body:has(.hero--foto) .site-head:not(.is-stuck) .drawer a:hover,
body:has(.hero--foto) .site-head:not(.is-stuck) .drawer a:focus-visible{background:#FFF6D6; color:var(--coral-ink)}
body:has(.hero--foto) .hero--foto{padding-top:0; margin-top:calc(-1 * var(--alto-cabecera, 78px))}
body:has(.hero--foto) .hero--foto .hero-grid{padding-top:clamp(5rem,9vw,7.5rem)}
/* Velo oscuro bajo la cabecera transparente: asegura la lectura del menú sobre
   cualquier zona clara de la foto (y si la foto no cargara, debajo sigue el
   fondo oscuro del hero). */
body:has(.hero--foto) .site-head:not(.is-stuck){background:linear-gradient(180deg,rgba(10,13,18,.65),rgba(10,13,18,0))}

/* ==========================================================================
   «También soy empresaria»: cada tarjeta lleva a la web de la empresa (enlace
   extendido con ::after, por eso el <li> es el contexto posicionado) y sus
   redes van encima con z-index, para que no queden anidadas dentro del enlace.
   Al pasar, la tarjeta se levanta, el logo crece y aparece la fila de redes.
   ========================================================================== */
.empresas{gap:.9rem}
.empresas .emp{
  position:relative; overflow:hidden; text-align:center;
  display:grid; gap:.55rem; justify-items:center; align-content:start;
  padding:1.2rem 1rem 1rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s;
}
.empresas .emp:hover,.empresas .emp:focus-within{transform:translateY(-6px); border-color:#FFC627; box-shadow:0 26px 44px -30px rgba(31,31,31,.55)}
.empresas .emp-web{display:grid; gap:.55rem; justify-items:center; text-decoration:none; color:inherit; width:100%}
.empresas .emp-web::after{content:''; position:absolute; inset:0; z-index:1}
.empresas img{height:64px; width:100%; max-width:170px; object-fit:contain; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.empresas .emp:hover img{transform:scale(1.06)}
.empresas .emp-rol{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#4A4A4A; display:grid; gap:.15rem; justify-items:center}
.empresas .emp-ir{
  display:inline-flex; align-items:center; gap:.3rem; color:#8A6500; letter-spacing:.02em; text-transform:none; font-size:.76rem;
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s;
}
.empresas .emp-ir .ico{width:.95rem; height:.95rem; stroke-width:2}
.empresas .emp:hover .emp-ir,.empresas .emp:focus-within .emp-ir{opacity:1; transform:none}
.empresas .emp-redes{
  position:relative; z-index:2; display:flex; gap:.15rem; flex-wrap:wrap; justify-content:center;
  margin-top:.15rem; opacity:.55; transition:opacity .3s;
}
.empresas .emp:hover .emp-redes,.empresas .emp:focus-within .emp-redes{opacity:1}
.empresas .emp-redes a{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:#4A4A4A; transition:background-color .25s, color .25s, transform .25s;
}
.empresas .emp-redes .ico{width:1.05rem; height:1.05rem; fill:currentColor}
.empresas .emp-redes a:hover,.empresas .emp-redes a:focus-visible{background:#FFC627; color:#1A1A1A; transform:translateY(-2px)}
.empresas .emp-web:focus-visible{outline:none}
.empresas .emp:has(.emp-web:focus-visible){outline:2px solid #1F1F1F; outline-offset:3px}
.empresas .emp--sin-enlace{opacity:.92}
.falta--mini{margin-top:.2rem; padding:.4rem .6rem; font-size:.64rem; text-align:center; display:grid; gap:.1rem; border-radius:8px}
.falta--mini b{font-size:.6rem; letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){
  .empresas .emp,.empresas img,.empresas .emp-ir,.empresas .emp-redes a{transition:none}
  .empresas .emp:hover{transform:none}
  .empresas .emp:hover img{transform:none}
  .empresas .emp-ir{opacity:1; transform:none}
}
/* La columna es estrecha: los cinco iconos deben caber en una sola fila. */
.empresas .emp{padding:1.1rem .75rem .85rem}
.empresas .emp-redes{gap:0; flex-wrap:nowrap}
.empresas .emp-redes a{width:26px; height:26px}
.empresas .emp-redes .ico{width:.92rem; height:.92rem}
/* En pantallas estrechas las tarjetas van a una columna: con dos, la fila de
   cinco iconos no cabía (la sonda marcaba recorte a 320 y 360px). */
@media (max-width:479px){
  .ventures--logos.empresas{grid-template-columns:minmax(0,1fr)}
  .empresas .emp{padding:1.2rem 1rem 1rem}
}
.empresas .emp-redes{flex-wrap:wrap}
@media (min-width:480px){ .empresas .emp-redes{flex-wrap:nowrap} }
/* Entre 1000 y 1180px la columna de empresas se estrecha (tres columnas en la
   sección): los iconos bajan de tamaño para seguir en una sola fila. */
@media (min-width:1000px) and (max-width:1179px){
  .empresas .emp{padding:1rem .5rem .8rem}
  .empresas .emp-redes a{width:23px; height:23px}
  .empresas .emp-redes .ico{width:.85rem; height:.85rem}
}

/* ==========================================================================
   Mosaico de empresas (sustituye a la rejilla de seis cuadrados iguales).
   Fichas de dos anchos, giradas un poco y desfasadas; al pasar se enderezan
   y se levantan. Los tonos alternan blanco, crema y amarillo muy claro para
   que ninguna compita con el logo que lleva dentro.
   ========================================================================== */
.empresas{list-style:none; margin:0 0 1.5rem; padding:6px 4px 10px; display:grid; gap:.85rem; grid-template-columns:repeat(2,minmax(0,1fr)); background:transparent; border:0}
.empresas .emp{
  position:relative; overflow:visible;
  display:grid; gap:.5rem; justify-items:center; align-content:start; text-align:center;
  padding:1.15rem .8rem 1rem;
  background:#FFFFFF; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 26px -24px rgba(31,31,31,.55);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s, background-color .3s;
}
.empresas .emp--ancha{grid-column:1 / -1; grid-template-columns:auto 1fr; justify-items:start; text-align:left; padding:1.1rem 1.15rem; gap:.35rem 1.1rem; align-items:center}
.empresas .emp--ancha .emp-web{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1.1rem; justify-items:start; text-align:left}
.empresas .emp--ancha img{max-width:130px}
.empresas .emp--ancha .emp-redes{grid-column:1 / -1; justify-content:flex-start; margin-top:.35rem}
/* giros y desfases: cada ficha con el suyo, ninguno mayor de 2 grados */
.empresas .emp--1{transform:rotate(-1.4deg)}
.empresas .emp--2{transform:rotate(2deg)}
.empresas .emp--3{transform:rotate(-2.2deg); margin-top:1.1rem; background:#FFFBF0}
.empresas .emp--4{transform:rotate(.9deg); background:#FFF8E3; border-color:#FFE99A}
.empresas .emp--5{transform:rotate(-2deg)}
.empresas .emp--6{transform:rotate(2.3deg); margin-top:.9rem; background:#FAFAF7}
.empresas .emp:hover,.empresas .emp:focus-within{
  transform:rotate(0) translateY(-6px) scale(1.02);
  border-color:#FFC627; box-shadow:0 28px 48px -28px rgba(31,31,31,.5); z-index:3;
}
.empresas .emp-web{display:grid; gap:.5rem; justify-items:center; text-decoration:none; color:inherit; width:100%}
.empresas .emp-web::after{content:''; position:absolute; inset:0; z-index:1; border-radius:14px}
.empresas img{height:58px; width:100%; max-width:165px; object-fit:contain; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.empresas .emp:hover img{transform:scale(1.07) rotate(-1deg)}
.empresas .emp-txt{display:grid; gap:.12rem; justify-items:inherit}
.empresas .emp-sector{font-size:.7rem; line-height:1.3; color:#8A6500; font-weight:600}
.empresas .emp-rol{font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:#6B6B6B}
.empresas .emp-ir{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.15rem;
  font-size:.75rem; font-weight:600; color:#1A1A1A;
  opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s;
}
.empresas .emp-ir .ico{width:.95rem; height:.95rem; stroke-width:2}
.empresas .emp:hover .emp-ir,.empresas .emp:focus-within .emp-ir{opacity:1; transform:none}
.empresas .emp-redes{position:relative; z-index:2; display:flex; gap:0; justify-content:center; opacity:.5; transition:opacity .3s}
.empresas .emp:hover .emp-redes,.empresas .emp:focus-within .emp-redes{opacity:1}
.empresas .emp-redes a{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#4A4A4A; transition:background-color .25s, color .25s, transform .25s}
.empresas .emp-redes .ico{width:.92rem; height:.92rem; fill:currentColor}
.empresas .emp-redes a:hover,.empresas .emp-redes a:focus-visible{background:#FFC627; color:#1A1A1A; transform:translateY(-2px) scale(1.08)}
.empresas .emp:has(.emp-web:focus-visible){outline:2px solid #1F1F1F; outline-offset:3px}
.empresas .emp-pendiente{font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#8A8A85; border-top:1px dashed var(--border); padding-top:.5rem; width:100%}
@media (max-width:479px){
  .empresas{grid-template-columns:minmax(0,1fr)}
  .empresas .emp{transform:none; margin-top:0}
}
@media (min-width:1000px) and (max-width:1179px){
  .empresas .emp{padding:1rem .5rem .8rem}
  .empresas .emp-redes a{width:23px; height:23px}
  .empresas .emp-redes .ico{width:.85rem; height:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .empresas .emp,.empresas img,.empresas .emp-ir,.empresas .emp-redes a{transition:none}
  .empresas .emp:hover,.empresas .emp:focus-within{transform:none}
  .empresas .emp:hover img{transform:none}
  .empresas .emp-ir{opacity:1; transform:none}
}

/* ==========================================================================
   Fotos de fondo en las pastillas del acordeón, con el mismo recurso del hero:
   la imagen debajo y un filtro de color encima con opacidad. Cerrada, el velo
   es casi blanco (la foto se intuye); abierta, el velo es amarillo y la foto
   se ve a través. Cada pastilla trae su foto en la variable --foto.
   ========================================================================== */
.panel{background-image:var(--foto); background-size:cover; background-position:center; isolation:isolate}
.panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(246,246,243,.92), rgba(246,246,243,.86));
  transition:background .45s ease;
}
.panel > *{position:relative; z-index:1}
.panel:hover::before{background:linear-gradient(180deg, rgba(246,246,243,.84), rgba(246,246,243,.74))}
.panel.is-open::before{
  background:
    linear-gradient(180deg, rgba(255,198,39,.72) 0%, rgba(255,198,39,.86) 55%, rgba(255,198,39,.94) 100%),
    linear-gradient(90deg, rgba(26,26,26,.28), rgba(26,26,26,0) 60%);
}
/* El número de marca de agua va sobre el velo, no debajo */
.panel.is-open::after{z-index:1}
@media (max-width:819px){
  .panel.is-open::before{background:linear-gradient(180deg, rgba(255,198,39,.8), rgba(255,198,39,.92))}
}
/* «.panel.is-open{background:#FFC627}» (atajo, más específico) borraba la
   imagen: hay que repetirla con la misma especificidad. Y los velos bajan de
   opacidad para que la foto se note de verdad. */
.panel.is-open{background-image:var(--foto); background-size:cover; background-position:center}
.panel::before{background:linear-gradient(180deg, rgba(246,246,243,.86), rgba(246,246,243,.78))}
.panel:hover::before{background:linear-gradient(180deg, rgba(246,246,243,.72), rgba(246,246,243,.6))}
.panel.is-open::before{
  background:
    linear-gradient(180deg, rgba(255,198,39,.62) 0%, rgba(255,198,39,.8) 55%, rgba(255,198,39,.9) 100%),
    linear-gradient(90deg, rgba(26,26,26,.3), rgba(26,26,26,0) 65%);
}
/* Una url() dentro de una variable se resuelve contra la hoja de estilos, no
   contra la página: la ruta inline apuntaba a assets/css/assets/… y no cargaba.
   Las fotos se declaran aquí, con rutas relativas a este archivo. */
.panel[data-num="01"]{background-image:url('../img/servicios/capacitacion-portada.jpg')}
.panel[data-num="02"]{background-image:url('../img/servicios/auditoria-portada.jpg')}
.panel[data-num="03"]{background-image:url('../img/servicios/asesoria-portada.jpg')}
.panel[data-num="04"]{background-image:url('../img/servicios/iso-portada.jpg')}
.panel[data-num="05"]{background-image:url('../img/servicios/mentorias-portada.jpg')}
.panel[data-num="06"]{background-image:url('../img/servicios/advisory-portada.jpg')}
.panel[data-num]{background-size:cover; background-position:center}
/* El velo de la pastilla cerrada se cierra hacia abajo: arriba se ve la foto,
   y en la zona del título vertical vuelve casi opaco para que se lea. */
.panel::before{background:linear-gradient(180deg, rgba(246,246,243,.68) 0%, rgba(246,246,243,.88) 45%, rgba(246,246,243,.95) 100%)}
.panel:hover::before{background:linear-gradient(180deg, rgba(246,246,243,.5) 0%, rgba(246,246,243,.8) 45%, rgba(246,246,243,.92) 100%)}
/* Al pasar el ratón el velo tira a amarillo, no a blanco. Y la pastilla
   abierta mantiene su velo amarillo aunque esté bajo el cursor: la regla de
   hover tenía la misma especificidad y, por ir después, le ganaba. */
.panel:hover::before{
  background:linear-gradient(180deg, rgba(255,198,39,.42) 0%, rgba(255,198,39,.68) 50%, rgba(255,198,39,.82) 100%);
}
.panel.is-open::before,
.panel.is-open:hover::before{
  background:
    linear-gradient(180deg, rgba(255,198,39,.62) 0%, rgba(255,198,39,.8) 55%, rgba(255,198,39,.9) 100%),
    linear-gradient(90deg, rgba(26,26,26,.3), rgba(26,26,26,0) 65%);
}