/* ═══════════════════════════════════════════════════════════════════════
   HC Inteligencia en Personal — acabado de institución financiera
   Marino institucional + verde de acción sobre blanco. Sin elementos que
   sugieran captación de ahorro, crédito o inversión.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --marino:#0B2A4A; --marino-2:#123A63; --marino-3:#1B4F84; --noche:#071D34;
  --verde:#12915A; --verde-2:#0E7A4B; --verde-3:#20B573; --verde-pal:#E7F5EE; --verde-borde:#BFE5D1;
  --gris:#F3F6F9; --gris-2:#E9EEF3; --linea:#DDE4EB; --linea-2:#EBF0F4;
  --blanco:#FFFFFF;
  --tinta:#152233; --tinta-2:#4A596B; --tinta-3:#7D8B9B;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(1rem,4vw,2.5rem); --max:1240px;
  --r:20px; --r-s:12px;
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.16,1,.3,1);
  --sombra:0 18px 44px -22px rgba(11,42,74,.28);
  --sombra-s:0 4px 14px -6px rgba(11,42,74,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 clamp(.96rem,.93rem + .15vw,1.02rem)/1.62 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit} button{font:inherit;color:inherit}
::selection{background:var(--verde-pal);color:var(--marino)}
:focus-visible{outline:3px solid var(--verde-3);outline-offset:2px;border-radius:8px}
.saltar{position:absolute;left:-9999px;z-index:999;background:var(--marino);color:#fff;padding:.8rem 1.2rem;border-radius:8px}
.saltar:focus{left:1rem;top:1rem}
.env{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
h1,h2,h3{font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0;color:var(--marino);text-wrap:balance}
h1{font-size:clamp(2.2rem,1.3rem + 3.8vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,1.15rem + 1.8vw,2.45rem)}
h3{font-size:clamp(1rem,.96rem + .3vw,1.15rem);font-weight:700}
p{margin:0 0 1em;text-wrap:pretty} p:last-child{margin-bottom:0}

/* Botones tipo banca */
.b{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.4rem;border-radius:999px;border:2px solid var(--verde);background:var(--verde);color:#fff;text-decoration:none;cursor:pointer;font:700 .92rem/1 var(--sans);letter-spacing:.005em;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--out),box-shadow .25s}
.b:hover{background:var(--verde-2);border-color:var(--verde-2);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(18,145,90,.8)}
.b--claro{background:#fff;border-color:#fff;color:var(--marino)}
.b--claro:hover{background:var(--verde-pal);border-color:var(--verde-pal);color:var(--marino)}
.b--linea-claro{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.b--linea-claro:hover{background:rgba(255,255,255,.12);border-color:#fff;box-shadow:none}

.progreso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(0);background:var(--verde)}

/* Franja superior */
.util{background:var(--noche);color:#C3CFDC;font:500 .78rem/1 var(--sans)}
.util__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.55rem}
.util__grupo{display:flex;align-items:center;gap:clamp(.8rem,2.5vw,1.8rem)}
.util a{text-decoration:none;transition:color .2s}
.util a:hover{color:#fff}
@media (max-width:720px){.util .util__oculto{display:none}}

/* Cabecera */
.cab{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--linea);transition:box-shadow .3s}
.cab.solida{box-shadow:0 8px 24px -18px rgba(11,42,74,.45)}
.cab__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.cab__marca img{height:clamp(40px,4vw,50px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(.1rem,1vw,.6rem);align-self:stretch}
.nav a{position:relative;display:flex;align-items:center;padding:0 .8rem;text-decoration:none;font:600 .92rem/1 var(--sans);color:var(--tinta);transition:color .2s}
.nav a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--verde);transform:scaleX(0);transition:transform .3s var(--out)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--verde-2)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav .b{display:none}
.nav .b::after{display:none}
.cab__acc{display:flex;align-items:center;gap:.6rem}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--linea);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:2px;border-radius:2px;background:var(--marino);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:flex}.cab__acc .b{display:none}
  .nav{position:fixed;inset:0;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:6rem var(--gut) 2rem;transform:translateX(100%);transition:transform .4s var(--out)}
  .nav.on{transform:none}
  .nav a{padding:1.1rem .2rem;border-bottom:1px solid var(--linea);font-size:1.15rem}
  .nav a::after{display:none}
  .nav .b{display:inline-flex;margin-top:1.4rem;border-bottom:0}
}

/* Banner principal */
.hero{background:linear-gradient(180deg,var(--gris) 0%,#fff 100%);padding-block:clamp(1.2rem,3vw,2rem) clamp(2.2rem,5vw,3.4rem)}
.banner{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;border-radius:32px;padding:clamp(1.6rem,4.5vw,3.6rem);background:linear-gradient(120deg,var(--marino) 0%,var(--marino-2) 55%,var(--marino-3) 100%);color:#fff;box-shadow:var(--sombra)}
.banner::before{content:"";position:absolute;width:560px;height:560px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(32,181,115,.35),transparent 65%);z-index:-1}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,30%) var(--my,40%),rgba(255,255,255,.07),transparent 65%)}
@media (max-width:900px){.banner{grid-template-columns:1fr;border-radius:24px}}
.banner h1{color:#fff;margin-bottom:1.1rem}
.h1-acento{color:var(--verde-3)}
.hero__sub{color:#C9D6E4;font-size:clamp(1rem,.95rem + .25vw,1.12rem);max-width:56ch}
.banner__acc{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.banner__media{position:relative;padding-bottom:3.2rem}
.banner__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:22px;border:4px solid rgba(255,255,255,.14)}
.ficha{position:absolute;left:-1.4rem;right:1.4rem;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.2rem;padding:.55rem;border-radius:18px;background:#fff;color:var(--tinta);box-shadow:0 22px 44px -18px rgba(3,15,30,.55)}
@media (max-width:900px){.ficha{position:relative;left:0;right:0;margin-top:-2.4rem;grid-template-columns:1fr}.banner__media{padding-bottom:0}}
.ficha__ren{display:flex;align-items:center;gap:.6rem;padding:.6rem .65rem;border-radius:12px;transition:background .2s}
.ficha__ren:hover{background:var(--gris)}
.ficha__ic{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--verde-pal);color:var(--verde-2)}
.ficha__ic svg{width:18px;height:18px}
.ficha__k{display:block;font:600 .66rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.28rem}
.ficha__v{display:block;font:700 .86rem/1.25 var(--sans);color:var(--marino);text-decoration:none}
a.ficha__v:hover{color:var(--verde-2)}

/* Barra de confianza */
.confianza{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(1.4rem,3vw,2rem);border:1px solid var(--linea);border-radius:var(--r);background:#fff;box-shadow:var(--sombra-s);overflow:hidden}
@media (max-width:900px){.confianza{grid-template-columns:1fr 1fr}}
.conf{display:flex;align-items:center;gap:.9rem;padding:1.15rem 1.3rem;border-right:1px solid var(--linea-2)}
.conf:last-child{border-right:0}
@media (max-width:900px){.conf:nth-child(2){border-right:0}.conf:nth-child(-n+2){border-bottom:1px solid var(--linea-2)}}
@media (max-width:480px){.confianza{grid-template-columns:1fr}.conf{border-right:0;border-bottom:1px solid var(--linea-2)}.conf:last-child{border-bottom:0}}
.conf__n{font:800 clamp(1.9rem,1.5rem + 1.4vw,2.5rem)/1 var(--sans);letter-spacing:-.04em;color:var(--verde-2);min-width:3.6ch}
.conf__ic{flex-shrink:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--marino);color:#fff}
.conf__ic svg{width:22px;height:22px}
.conf__k{font:600 .9rem/1.3 var(--sans);color:var(--tinta)}

/* Secciones */
.sec{padding-block:clamp(3.2rem,7vw,5.5rem);position:relative}
.sec__nota{color:var(--tinta-2);max-width:64ch}
.sec__cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,3vw,3rem);align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
@media (max-width:860px){.sec__cab{grid-template-columns:1fr;align-items:start}}

/* Cuadrícula de servicios tipo "productos" */
.productos{padding-top:clamp(1rem,3vw,2rem)}
.productos h2{margin-bottom:clamp(1.3rem,3vw,2rem)}
.ruta__rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1000px){.ruta__rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ruta__rejilla{grid-template-columns:1fr}}
.caso{display:flex;flex-direction:column;gap:.8rem;min-height:178px;padding:1.4rem;border-radius:var(--r);background:#fff;border:1px solid var(--linea);text-decoration:none;box-shadow:var(--sombra-s);transition:transform .35s var(--out),box-shadow .35s,border-color .25s}
.caso:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--verde-borde)}
.caso__ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--verde-pal);color:var(--verde-2);transition:background .3s,color .3s}
.caso:hover .caso__ic{background:var(--verde);color:#fff}
.caso__q{font:700 1.05rem/1.25 var(--sans);color:var(--marino)}
.caso__ir{margin-top:auto;font:700 .85rem/1 var(--sans);color:var(--verde-2);display:flex;align-items:center;gap:.35rem}
.caso__ir span{transition:transform .3s var(--out)}
.caso:hover .caso__ir span{transform:translateX(4px)}

/* Detalle de cada servicio */
.detalle{background:var(--gris)}
.fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.5rem,3.5vw,2.6rem);margin-bottom:1.2rem;border-radius:28px;background:#fff;border:1px solid var(--linea);scroll-margin-top:110px}
.fila:last-child{margin-bottom:0}
@media (max-width:860px){.fila{grid-template-columns:1fr}}
.ico-serv{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--marino);color:#fff;margin-bottom:1.1rem;box-shadow:0 12px 24px -12px rgba(11,42,74,.6)}
.fila h2{margin-bottom:.8rem}
.fila__h{font-size:1.02rem;color:var(--verde-2);margin:1.2rem 0 .45rem}
.fila__izq p{color:var(--tinta-2);font-size:.96rem}
.fila__cita{margin:1.2rem 0;padding:1rem 1.15rem;border-left:4px solid var(--verde);border-radius:0 12px 12px 0;background:var(--gris);font:500 .98rem/1.55 var(--sans);font-style:italic;color:var(--marino)}
.fila__k{display:block;font:700 .74rem/1 var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)!important;margin:1.4rem 0 .75rem!important}
.fila__der .fila__k:first-child{margin-top:0!important}
.fila__sub{font:700 .9rem/1 var(--sans);color:var(--marino);margin:1.1rem 0 .4rem;padding-bottom:.4rem;border-bottom:2px solid var(--verde-pal)}
.fila__der{background:var(--gris);border-radius:20px;padding:clamp(1.1rem,2.4vw,1.6rem);align-self:start}
.lis{list-style:none;margin:0 0 .3rem;padding:0;display:grid;gap:.45rem}
.lis li{display:grid;grid-template-columns:26px 1fr;gap:.65rem;align-items:start;padding:.65rem .8rem;border-radius:12px;background:#fff;border:1px solid var(--linea-2);font-size:.92rem;line-height:1.45;transition:border-color .2s,box-shadow .2s}
.lis li:hover{border-color:var(--verde-borde);box-shadow:var(--sombra-s)}
.lis li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:.05rem;background-color:var(--gris-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");background-size:11px;background-position:center;background-repeat:no-repeat}
.lis--ok li::before{background-color:var(--verde);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.fila__izq .lis li{background:var(--gris)}
.fila__izq p a.b{margin-top:.6rem}

/* ¿Quiénes somos? */
.sec--pal{background:#fff}
.dos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.dos{grid-template-columns:1fr}}
.dos h2+.sec__nota{margin-top:1rem}
.dos__img{margin:0;position:relative}
.dos__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:28px;box-shadow:var(--sombra)}
.dos__img::after{content:"";position:absolute;left:-16px;bottom:-16px;width:45%;height:45%;border-radius:24px;background:var(--verde-pal);z-index:-1}

/* 150 empresas, casos y partners: sección clara institucional */
.sec--tinta{background:var(--gris);color:var(--tinta)}
.sec--tinta .sec__nota{color:var(--tinta-2)}
.razones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){.razones{grid-template-columns:repeat(2,minmax(0,1fr))}.razon:last-child{grid-column:1/-1}}
@media (max-width:560px){.razones{grid-template-columns:1fr}}
.razon{position:relative;padding:1.3rem 1.2rem 1.3rem 1.2rem;border-radius:var(--r);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra-s);transition:transform .35s var(--out),box-shadow .35s}
.razon::before{content:"";display:block;width:40px;height:40px;border-radius:12px;margin-bottom:.95rem;background:var(--verde-pal) center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A4B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.razon:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.razon h3{font-size:.98rem;line-height:1.35}
.sec--tinta > .env > p[style*="font-family"]{color:var(--marino)!important}
.dichos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
@media (max-width:980px){.dichos{grid-template-columns:1fr}}
.dicho{margin:0;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.3rem,2.6vw,1.7rem);border-radius:var(--r);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra-s);transition:box-shadow .35s,transform .35s var(--out)}
.dicho:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.dicho::before{content:"";width:38px;height:38px;border-radius:50%;background:var(--marino) center/18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10 7H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v2l3-3V9a2 2 0 0 0-1-2zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v2l3-3V9a2 2 0 0 0-1-2z'/%3E%3C/svg%3E")}
.dicho blockquote{margin:0;font-size:.95rem;line-height:1.65;color:var(--tinta-2)}
.dicho figcaption{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--linea-2)}
.dicho__q{font-weight:700;color:var(--marino);margin:0}
.dicho__r{font-size:.82rem;color:var(--verde-2);margin:.15rem 0 0;font-weight:600}
.aliados{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem}
.aliados img{height:68px;width:auto;padding:.85rem 1.5rem;background:#fff;border:1px solid var(--linea);border-radius:14px;filter:grayscale(.2);transition:filter .3s,box-shadow .3s}
.aliados img:hover{filter:none;box-shadow:var(--sombra-s)}

/* Contacto: centro de atención */
.cta{background:#fff;padding-block:clamp(3.2rem,7vw,5.5rem)}
.cta__rej{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;border-radius:28px;overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra)}
@media (max-width:900px){.cta__rej{grid-template-columns:1fr}}
.cta__rej>div:first-child{position:relative;overflow:hidden;isolation:isolate;padding:clamp(1.6rem,4vw,2.8rem);background:linear-gradient(150deg,var(--marino) 0%,var(--marino-3) 100%);color:#fff}
.cta__rej>div:first-child::before{content:"";position:absolute;width:360px;height:360px;right:-140px;bottom:-160px;border-radius:50%;background:radial-gradient(circle,rgba(32,181,115,.35),transparent 65%);z-index:-1}
.cta h2{color:#fff}
.cta__nota{color:#C9D6E4;margin-top:.9rem;max-width:42ch}
.datos{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.5rem}
.datos li{display:grid;gap:.25rem;padding:.8rem 1rem;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .25s}
.datos li:hover{background:rgba(255,255,255,.14)}
.datos .k{font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#8EE0B8}
.datos .v{font-size:.96rem;font-weight:600;color:#fff;text-decoration:none}
.datos a.v:hover{text-decoration:underline}
.form{padding:clamp(1.6rem,4vw,2.8rem);display:grid;gap:1rem;align-content:start;background:#fff}
.form__t{font:800 1.45rem/1.1 var(--sans);letter-spacing:-.025em;color:var(--marino);margin:0 0 .2rem}
.c{display:grid;gap:.4rem}
.c2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:540px){.c2{grid-template-columns:1fr}}
.c label{font:600 .84rem/1 var(--sans);color:var(--tinta)}
.c label i{color:#C0392B;font-style:normal}
.c input,.c select,.c textarea{width:100%;min-height:50px;padding:.8rem .95rem;border-radius:12px;border:1.5px solid var(--linea);background:#fff;font:500 .96rem/1.4 var(--sans);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.c textarea{min-height:120px;resize:vertical}
.c input:hover,.c select:hover,.c textarea:hover{border-color:#C4CFDA}
.c input:focus,.c select:focus,.c textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(18,145,90,.16)}
.c select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:16px}
.trampa{position:absolute;left:-9999px}
.form .b{width:100%}
.edo{display:none;padding:.75rem .9rem;border-radius:10px;font-weight:600;font-size:.88rem}
.edo.on{display:block}.edo.bien{background:var(--verde-pal);color:var(--verde-2)}.edo.mal{background:#FDECEA;color:#B03A2E}

/* Pie institucional */
.pie{background:var(--noche);color:#9AABBD;padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem}
.pie__rej{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:2rem;padding-bottom:2rem}
@media (max-width:860px){.pie__rej{grid-template-columns:1fr 1fr}}
.pie img{height:62px;width:auto}
.pie h4{font:700 .78rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie a{text-decoration:none;font-size:.9rem;transition:color .2s}
.pie a:hover{color:#8EE0B8}
.pie li{font-size:.9rem}
.pie__base{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;font-size:.82rem}

/* Móvil */
.movil{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linea);box-shadow:0 -8px 24px -16px rgba(11,42,74,.4)}
.movil a{display:flex;justify-content:center;align-items:center;min-height:50px;border-radius:999px;background:var(--verde);color:#fff;text-decoration:none;font:700 .95rem/1 var(--sans)}
@media (max-width:760px){.movil{display:block}body{padding-bottom:74px}}
.subir{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);cursor:pointer;background:#fff;color:var(--marino);font-size:1.1rem;box-shadow:var(--sombra);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .35s var(--out),visibility .3s}
.subir.on{opacity:1;visibility:visible;transform:none}
.subir:hover{background:var(--verde);color:#fff;border-color:var(--verde)}
@media (max-width:760px){.subir{display:none}}

/* Aparición suave */
.js .rev{opacity:0;transform:translateY(18px)}
.js .rev.on{opacity:1;transform:none;transition:opacity .6s var(--out),transform .6s var(--out)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Tarjeta flotante del banner: teléfonos arriba en dos columnas, horario abajo a lo ancho */
.ficha{grid-template-columns:1fr 1fr}
.ficha__ren:last-child{grid-column:1/-1}
a.ficha__v{white-space:nowrap}
@media (max-width:900px){.ficha{grid-template-columns:1fr}.ficha__ren:last-child{grid-column:auto}}

/* ═══════════════════ Mejoras de diseño + WhatsApp ═══════════════════ */
:root{--wa:#25D366;--wa-2:#1EBE5A}

/* Cabecera: logo más legible */
.cab__marca img{height:clamp(46px,4.6vw,58px)}
.util__wa{display:inline-flex;align-items:center;gap:.4rem;color:#7FE3A6}
.util__wa::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.25)}

/* Ceja de sección */
.ceja{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font:700 .76rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--verde-2)}
.ceja::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--verde)}

/* Cuadrícula: 8 tarjetas, sello STPS y tarjeta de contacto */
.caso__sello{align-self:flex-start;margin-top:-.2rem;padding:.32rem .6rem;border-radius:999px;background:var(--marino);color:#fff;font:600 .68rem/1.2 var(--sans)}
.caso--cta{background:linear-gradient(140deg,var(--marino) 0%,var(--marino-3) 100%);border-color:transparent}
.caso--cta .caso__ic{background:rgba(255,255,255,.12);color:#fff}
.caso--cta .caso__q{color:#fff;font-size:.95rem;font-weight:600;line-height:1.35}
.caso--cta .caso__ir{color:#8EE0B8}
.caso--cta:hover{border-color:transparent}
.caso--cta:hover .caso__ic{background:var(--verde);color:#fff}

/* Píldoras fijas del detalle de servicios */
.pildoras{position:sticky;top:78px;z-index:20;display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;margin:0 0 1.4rem;padding:.5rem;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--linea);box-shadow:var(--sombra-s);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pildoras::-webkit-scrollbar{display:none}
.pildoras a{flex-shrink:0;padding:.6rem 1rem;border-radius:999px;text-decoration:none;font:600 .86rem/1 var(--sans);color:var(--tinta-2);white-space:nowrap;transition:background .25s,color .25s}
.pildoras a:hover{background:var(--gris);color:var(--marino)}
.pildoras a.on{background:var(--marino);color:#fff}
.fila{scroll-margin-top:160px}
@media (max-width:980px){.pildoras{top:76px;border-radius:14px}}

/* Testimonios con iniciales */
.dicho figcaption{display:flex;align-items:center;gap:.8rem}
.avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--verde-pal);color:var(--verde-2);font:800 .9rem/1 var(--sans);border:2px solid #fff;box-shadow:0 0 0 1px var(--verde-borde)}
.dicho::before{display:none}
.dicho{border-top:4px solid var(--verde)}

/* Contacto: "Cómo llegar" */
.mapa{justify-self:start;margin-top:.55rem;padding:.5rem .85rem;border-radius:999px;background:#fff;color:var(--marino);text-decoration:none;font:700 .8rem/1 var(--sans);transition:background .25s,transform .25s var(--out)}
.mapa:hover{background:var(--verde-pal);transform:translateX(3px)}

/* Botón flotante de WhatsApp */
.wa{position:fixed;right:1.4rem;bottom:1.4rem;z-index:96;display:flex;align-items:center;gap:0;height:58px;padding:0 16px;border-radius:999px;background:var(--wa);color:#fff;text-decoration:none;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:gap .35s var(--out),padding .35s var(--out),background .25s,transform .25s var(--out)}
.wa svg{width:26px;height:26px;flex-shrink:0}
.wa__txt{max-width:0;overflow:hidden;white-space:nowrap;font:700 .95rem/1 var(--sans);transition:max-width .4s var(--out)}
.wa:hover{background:var(--wa-2);gap:.55rem;padding:0 20px 0 16px;transform:translateY(-2px)}
.wa:hover .wa__txt{max-width:120px}
.wa::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);animation:pulso 2.6s var(--ease) infinite;pointer-events:none}
@keyframes pulso{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.subir{bottom:5.6rem}
@media (max-width:760px){.wa{display:none}}

/* Barra móvil: Teléfono | WhatsApp */
.movil{display:none;grid-template-columns:1fr 1fr;gap:.55rem}
@media (max-width:760px){.movil{display:grid}}
.movil a{gap:.5rem;background:var(--marino)}
.movil a svg{width:20px;height:20px}
.movil .m-wa{background:var(--wa)}
.movil .m-wa svg{width:21px;height:21px}

/* Contraste AA en botones con texto de WhatsApp (el verde de marca #25D366 se reserva al ícono flotante) */
.movil .m-wa{background:#0F8A43}
.movil .m-wa:hover{background:#0C7338}

/* ═════════ Servicios en carrusel horizontal ═════════ */

/* Barra fija: pestañas + flechas */
.barra-serv{position:sticky;top:78px;z-index:20;display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem}
@media (max-width:980px){.barra-serv{top:76px}}
.barra-serv .pildoras{position:static;flex:1;min-width:0;margin:0}
.flechas-serv{display:flex;gap:.4rem;flex-shrink:0}
.flechas-serv button{width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--marino);font-size:1.05rem;cursor:pointer;box-shadow:var(--sombra-s);transition:background .25s,color .25s,border-color .25s,transform .25s var(--out),opacity .25s}
.flechas-serv button:hover:not(:disabled){background:var(--marino);color:#fff;border-color:var(--marino);transform:translateY(-2px)}
.flechas-serv button:disabled{opacity:.35;cursor:default}
@media (max-width:620px){.flechas-serv{display:none}}

/* Pista: un servicio por pantalla, se desliza de lado */
.pista{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.pista::-webkit-scrollbar{display:none}
.js .pista{transition:height .45s var(--out)}
.pista > .fila{flex:0 0 100%;scroll-snap-align:start;align-self:flex-start;margin-bottom:0;scroll-margin-top:170px}

/* Sin JavaScript la pista simplemente se desplaza con el dedo o la barra */
html:not(.js) .pista{scroll-snap-type:none}

/* Pestaña activa */
.pildoras a[aria-selected="true"]{background:var(--marino);color:#fff}

/* Aviso de deslizamiento en celular */
.pista-ayuda{display:none;margin:.2rem 0 0;font:600 .78rem/1.3 var(--sans);color:var(--tinta-3);text-align:center}
@media (max-width:620px){.pista-ayuda{display:block}}

/* ═══════════ Ajuste de ritmo: aire parejo y textos respirados ═══════════ */

/* Lectura */
body{line-height:1.68}
p{margin-bottom:1.15em}
h2,h3{line-height:1.22;letter-spacing:-.02em}
h1{line-height:1.08}

/* Secciones: menos vacío entre bloques, sin apretar */
.sec{padding-block:clamp(2.6rem,5.2vw,4.2rem)}
.hero{padding-block:clamp(1rem,2.4vw,1.6rem) clamp(1.6rem,3.2vw,2.4rem)}
.productos{padding-top:clamp(1.8rem,3.6vw,2.6rem)}
.detalle{padding-top:clamp(1.8rem,3.6vw,2.6rem)}
.cta{padding-block:clamp(2.6rem,5.2vw,4.2rem)}
.sec__cab{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.productos h2{margin-bottom:clamp(1.1rem,2.2vw,1.6rem)}

/* Barra de confianza */
.conf{padding:1.25rem 1.35rem;gap:1rem}
.conf__k{font-size:.92rem;line-height:1.45}

/* Tarjetas de servicio */
.caso{min-height:0;padding:1.5rem 1.4rem;gap:.9rem}
.caso__q{line-height:1.3}
.caso--cta .caso__q{line-height:1.45}
.caso__sello{margin-top:0;line-height:1.35}

/* Detalle del servicio */
.fila{padding:clamp(1.5rem,3vw,2.4rem);gap:clamp(1.6rem,3.2vw,3rem)}
.fila__izq p{max-width:62ch}
.fila__h{line-height:1.35;margin:1.4rem 0 .5rem}
.fila__sub{line-height:1.35;margin:1.3rem 0 .5rem}
.fila__k{line-height:1.35!important;white-space:normal}
.fila__cita{line-height:1.6;padding:1.1rem 1.25rem}
.lis{gap:.5rem}
.lis li{padding:.7rem .9rem;line-height:1.5;gap:.7rem}

/* Diferenciadores: columnas con ancho suficiente para 2–3 líneas */
.razones{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.1rem}
@media (max-width:1320px){.razones{grid-template-columns:repeat(3,minmax(0,1fr))}.razon:last-child{grid-column:auto}}
@media (max-width:900px){.razones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.razones{grid-template-columns:1fr}}
.razon{padding:1.5rem 1.4rem}
.razon h3{font-size:1rem;line-height:1.45}

/* Testimonios */
.dichos{gap:1.2rem;margin-top:1.8rem}
@media (max-width:1100px){.dichos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dichos{grid-template-columns:1fr}}
.dicho{padding:clamp(1.4rem,2.8vw,1.9rem);gap:1.1rem}
.dicho blockquote{line-height:1.7}

/* Quiénes somos */
.dos{gap:clamp(2.2rem,4.5vw,4rem)}
.dos .sec__nota{max-width:60ch}

/* Contacto */
.datos li{padding:.9rem 1.05rem}
.datos .v{line-height:1.5}
.form{gap:1.15rem}
.c label{margin-bottom:.1rem}

/* Pie: tres columnas y enlaces con más aire */
.pie__rej{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3rem);padding-bottom:2.2rem}
@media (max-width:860px){.pie__rej{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__rej{grid-template-columns:1fr}}
.pie__servicios{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.2rem}
@media (max-width:560px){.pie__servicios{grid-template-columns:1fr}}
.pie ul{gap:.6rem}
.pie li{line-height:1.55}

/* Títulos de servicio en celular: menos partidos */
@media (max-width:620px){
  .fila h2{font-size:clamp(1.45rem,1.1rem + 2.2vw,1.9rem)}
  .banner{padding:clamp(1.4rem,5vw,2rem)}
}

/* Ajuste fino tras medir el aire de cada sección */
.cta__rej>div:first-child{padding:clamp(1.5rem,3.2vw,2.3rem)}
.form{padding:clamp(1.5rem,3.2vw,2.3rem)}
.cta__nota{margin-top:.8rem}
.datos{margin-top:1.3rem}
.aliados{margin-top:1rem}
.sec--tinta .frase,.sec--tinta>.env>p[style]{margin-top:1.6rem}
/* La pista nunca desplaza verticalmente: la altura siempre es la del servicio abierto */
.pista{overflow-y:hidden}

/* En celular las tarjetas de servicio se vuelven filas compactas */
@media (max-width:620px){
  .ruta__rejilla{gap:.6rem}
  .caso{flex-direction:row;align-items:center;gap:.85rem;padding:.95rem 1rem;min-height:0}
  .caso__ic{width:44px;height:44px;border-radius:13px}
  .caso__ic svg{width:21px;height:21px}
  .caso__q{flex:1;font-size:.98rem}
  .caso__ir{margin:0;font-size:0}
  .caso__ir span{font-size:1rem}
  /* Capacitación (lleva el sello STPS) y la tarjeta de contacto conservan el formato de bloque */
  .ruta__rejilla a[href="#a-capacitacion"],.caso--cta{flex-direction:column;align-items:flex-start;padding:1.3rem 1.2rem;gap:.8rem}
  .ruta__rejilla a[href="#a-capacitacion"] .caso__ir{font-size:.85rem}
  .caso--cta .caso__q{font-size:.95rem}
  .caso--cta .caso__ir{font-size:.85rem}
}

/* ═══════════ Carrusel de servicios: se nota que hay más al lado ═══════════ */
.carrusel{position:relative}
.pista{gap:1.25rem}
/* El panel no ocupa todo: asoma el siguiente */
.pista > .fila{flex:0 0 min(88%,1040px)}
@media (max-width:1100px){.pista > .fila{flex:0 0 92%}}
@media (max-width:620px){.pista > .fila{flex:0 0 94%}}

/* Flechas grandes a los lados */
.flecha-lat{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra);color:var(--marino);font-size:1.25rem;cursor:pointer;display:none;place-items:center;transition:background .25s,color .25s,border-color .25s,opacity .25s}
@media (min-width:1100px){.flecha-lat{display:grid}}
.flecha-lat--izq{left:-22px}
.flecha-lat--der{right:-22px}
.flecha-lat:hover:not(:disabled){background:var(--marino);color:#fff;border-color:var(--marino)}
.flecha-lat:disabled{opacity:0;pointer-events:none}

/* Puntos y contador */
.nav-carrusel{display:flex;align-items:center;gap:1rem;margin-top:1.2rem}
.puntos{display:flex;align-items:center;gap:.4rem;flex:1;flex-wrap:wrap}
.punto{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--linea);cursor:pointer;transition:width .35s var(--out),background .25s}
.punto:hover{background:var(--tinta-3)}
.punto.on{width:28px;background:var(--verde)}
.contador{flex-shrink:0;font:700 .84rem/1 var(--sans);color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* Capacitación: el catálogo en dos columnas para no quedar altísimo */
@media (min-width:860px){
  #a-capacitacion .fila__der .lis{columns:2;column-gap:1rem}
  #a-capacitacion .fila__der .lis li{break-inside:avoid;margin-bottom:.5rem}
}

/* Cuando el panel es de una sola columna, las listas van en dos para no alargarlo */
@media (min-width:600px) and (max-width:860px){
  .fila__der .lis{columns:2;column-gap:1rem}
  .fila__der .lis li{break-inside:avoid;margin-bottom:.5rem}
}

/* Las listas en dos columnas necesitan display:block (columns no aplica sobre grid) */
@media (min-width:600px) and (max-width:860px){
  .fila__der .lis{display:block;columns:2;column-gap:1rem}
  .fila__der .lis li{display:flex;align-items:flex-start;break-inside:avoid;margin-bottom:.5rem}
}
@media (min-width:860px){
  #a-capacitacion .fila__der .lis{display:block;columns:2;column-gap:1rem}
  #a-capacitacion .fila__der .lis li{display:flex;align-items:flex-start;break-inside:avoid;margin-bottom:.5rem}
}
/* Renglones un poco más compactos dentro del carrusel */
.pista .lis{gap:.4rem}
.pista .lis li{padding:.6rem .8rem;line-height:1.45}
.pista .fila__cita{padding:.95rem 1.1rem;margin:1.1rem 0}
.pista .fila__h{margin:1.2rem 0 .45rem}

/* ═════ Asomo de borde (sin texto cortado) y flechas discretas ═════ */
/* El panel deja ver sólo el canto de la tarjeta siguiente */
.pista > .fila{flex:0 0 calc(100% - 46px)}
@media (max-width:620px){.pista > .fila{flex:0 0 calc(100% - 34px)}}

/* Degradado que desvanece ese canto: se insinúa el movimiento, no se lee texto partido */
.carrusel::before,.carrusel::after{content:"";position:absolute;top:0;bottom:0;width:70px;pointer-events:none;z-index:4;opacity:0;transition:opacity .35s var(--ease)}
.carrusel::before{left:0;background:linear-gradient(90deg,var(--gris) 35%,rgba(243,246,249,0))}
.carrusel::after{right:0;background:linear-gradient(270deg,var(--gris) 35%,rgba(243,246,249,0))}
.carrusel.hay-antes::before{opacity:1}
.carrusel.hay-despues::after{opacity:1}

/* Flechas presentes pero calladas: gris en reposo, marino al acercarse */
.flecha-lat{background:#fff;border-color:var(--linea);color:var(--tinta-3);box-shadow:var(--sombra-s)}
.flecha-lat:hover:not(:disabled){background:var(--marino);color:#fff;border-color:var(--marino);box-shadow:var(--sombra)}

/* Sólo se desvanece el canto derecho: por la izquierda el panel abierto va al ras y
   el degradado se montaba encima del texto */
.carrusel::before{display:none}

/* ═══════ «¿Por qué elegir a HC…?» como bloque propio ═══════ */
.porque{background:#fff;padding-block:clamp(2.2rem,4.4vw,3.4rem)}
.porque__caja{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.6rem,3.5vw,3.2rem);
  padding:clamp(1.6rem,3.4vw,2.6rem);border-radius:28px;background:var(--gris);border:1px solid var(--linea)}
@media (max-width:860px){.porque__caja{grid-template-columns:1fr;gap:1.4rem}}
.porque__izq{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.porque__izq h2{max-width:14ch}
.porque__der{display:grid;gap:.9rem}
.porque__der .sec__nota{max-width:none;color:var(--tinta-2)}
/* El primer párrafo pesa un poco más, como entrada del bloque */
.porque__der .sec__nota:first-child{font-size:1.05rem;color:var(--tinta)}
/* La sección de «¿Quiénes somos?» ya no lleva el texto largo: se centra con la foto */
#nosotros .dos{align-items:center}

/* Tarjeta del inicio con un solo teléfono: teléfono y horario lado a lado */
.ficha{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.ficha__ren:last-child{grid-column:auto}
@media (max-width:900px){.ficha{grid-template-columns:1fr}}