/* ============================================================
   Kapital & Talento — hoja de estilos
   Identidad tomada del Manual Corporativo Básico:
   §3.2 gama cromática · §4.1 tipografía Merriweather
   ============================================================ */

/* Merriweather variable, servida desde este mismo dominio.
   SIL Open Font License 1.1 — ver /assets/fuentes/LICENSE-Merriweather.txt */
@font-face{
  font-family:"Merriweather";
  font-style:normal;
  font-display:swap;
  font-weight:300 900;
  src:url(fuentes/merriweather-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Gama cromática corporativa — Manual §3.2 */
  --carmin:#A41728;      /* PANTONE 187 C */
  --carmin-osc:#7C111E;
  --azul:#00A2DF;        /* PANTONE 299 C */
  --azul-osc:#003FB6;    /* PANTONE 2728 C */
  --verde:#4EA929;       /* PANTONE 361 C */
  --verde-osc:#005730;   /* PANTONE 357 C */
  --amarillo:#FFEE04;    /* PANTONE 3945 C */
  --naranja:#F78404;     /* PANTONE 716 C */
  --marron:#AD6129;      /* PANTONE 7566 C */
  --gris:#707070;        /* PANTONE 424 C */

  --texto:#141414;
  --texto-70:#3F3F3F;
  --papel:#FFFFFF;
  --papel-2:#F4F4F4;
  --linea:#E1E1E1;
  --linea-osc:#2C2C2C;

  --fuente:"Merriweather",Georgia,"Times New Roman",serif;
  --ancho:1180px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--fuente);font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--azul-osc);outline-offset:3px;border-radius:2px}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}

/* salto al contenido, para lectores de pantalla y teclado */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--carmin);color:#fff;padding:12px 20px;
  font-size:13px;font-weight:700;text-decoration:none;
}
.saltar:focus{left:0}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{margin:0;font-weight:900;line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(29px,4.6vw,50px);line-height:1.12;letter-spacing:-.028em}
h2{font-size:clamp(24px,3.2vw,37px);line-height:1.17}
h3{font-size:clamp(18px,2vw,23px);letter-spacing:-.015em;line-height:1.26}
p{margin:0 0 1.05em}
.plomo{font-size:clamp(16.5px,1.7vw,19px);line-height:1.72;color:var(--texto-70)}

.rotulo{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--carmin);margin:0 0 18px;
}
.rotulo--claro{color:#D98A96}

/* ---------- barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);
}
.barra__int{
  max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);
  height:86px;display:flex;align-items:center;gap:24px;
}
.barra__logo{display:block;padding:4px 0}
.barra__logo img{height:50px;width:auto}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;padding:6px 0;position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--carmin);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--carmin)}

.boton{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;background:var(--carmin);color:#fff;
  padding:13px 22px;border:0;cursor:pointer;font-family:var(--fuente);
  transition:background .2s ease,transform .2s ease;
}
.boton:hover{background:var(--carmin-osc);transform:translateY(-1px)}
.boton--linea{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.boton--linea:hover{background:rgba(255,255,255,.12);border-color:#fff}

.menu-btn{
  display:none;margin-left:auto;background:none;border:1px solid var(--linea);
  width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;
}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--texto);position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--texto);
}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}

/* ---------- portada ---------- */
.portada{
  background:#000;color:#fff;position:relative;overflow:hidden;
  padding:clamp(64px,11vh,116px) 0 clamp(54px,9vh,88px);
}
.portada::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(164,23,40,.32), transparent 62%),
    radial-gradient(90% 70% at 4% 100%, rgba(0,162,223,.14), transparent 60%);
}
.portada::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,
    var(--azul) 0 20%,var(--verde) 20% 40%,var(--amarillo) 40% 60%,
    var(--naranja) 60% 80%,var(--carmin) 80% 100%);
}
.portada__int{position:relative;z-index:2}
.portada__logo{height:clamp(84px,10vw,124px);width:auto;margin-bottom:clamp(30px,5vw,48px)}
.portada h1{max-width:19ch}
.portada h1 em{
  font-style:normal;color:#E4707F;
  background:linear-gradient(transparent 70%, rgba(164,23,40,.45) 70%);
}
.portada__bajada{
  margin-top:24px;max-width:58ch;font-size:clamp(15.5px,1.6vw,18px);
  line-height:1.8;color:#C7C7C7;font-weight:300;
}
.portada__acciones{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.portada__pie{
  margin-top:clamp(44px,7vw,72px);padding-top:22px;border-top:1px solid var(--linea-osc);
  display:flex;flex-wrap:wrap;gap:10px 40px;
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;
}

/* cabecera compacta de las páginas interiores */
.cabecera{
  background:#000;color:#fff;position:relative;overflow:hidden;
  padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,66px);
}
.cabecera::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 90% at 92% 0%, var(--c-suave), transparent 64%);
}
.cabecera::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c,var(--carmin));
}
.cabecera__int{position:relative;z-index:2}
.cabecera h1{max-width:20ch}
.cabecera__res{
  margin-top:20px;max-width:60ch;font-size:clamp(15.5px,1.6vw,18px);
  line-height:1.8;color:#C7C7C7;font-weight:300;
}

/* miga de pan */
.miga{font-size:12px;color:#9A9A9A;margin:0 0 18px;letter-spacing:.02em}
.miga ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.miga li:not(:last-child)::after{content:"›";margin-left:8px;color:#5E5E5E}
.miga a{color:#C7C7C7;text-decoration:none}
.miga a:hover{color:#fff;text-decoration:underline}

/* ---------- franja de sectores: fija al pie de la ventana ----------
   El alto se declara en --barra-sectores y el body reserva ese espacio
   abajo, para que la franja nunca tape el contenido. */
:root{--barra-sectores:52px}

.sectores{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--papel-2);border-top:1px solid var(--linea);
  box-shadow:0 -2px 14px rgba(0,0,0,.07);
  padding:0;
}
/* margen lateral propio: esta franja no necesita el del contenido */
.sectores .envoltura{padding:0 clamp(16px,2.4vw,30px)}
/* aviso de que la lista sigue hacia la derecha */
.sectores::after{
  content:"";position:absolute;right:0;top:1px;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,244,244,0),var(--papel-2) 78%);
}
body{padding-bottom:calc(var(--barra-sectores) + 13px)}

.sectores__int{
  display:flex;align-items:center;gap:10px 16px;
  height:var(--barra-sectores);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.sectores__eti{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--carmin);white-space:nowrap;flex:none;
}
.sectores__lista{
  list-style:none;margin:0;padding:0 34px 0 0;display:flex;gap:0;
  font-size:12.5px;color:var(--texto-70);white-space:nowrap;flex:none;
}
.sectores__lista li{position:relative;flex:none;padding-right:15px}
.sectores__lista li:last-child{padding-right:0}
.sectores__lista li:not(:last-child)::after{
  content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:#C4C4C4;
}

@media (max-width:1240px){
  .sectores__eti{display:none}
}
@media (max-width:1080px){
  :root{--barra-sectores:46px}
  .sectores__int{gap:0 12px}
  .sectores__lista{font-size:11.5px}
  .sectores__lista li{padding-right:12px}
}
@media print{
  .sectores{position:static}
  body{padding-bottom:0}
}

/* ---------- secciones ---------- */
.seccion{padding:clamp(56px,8vw,100px) 0}
.seccion--gris{background:var(--papel-2)}
.seccion--negra{background:#000;color:#EDEDED}
.dos-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(34px,6vw,76px);align-items:start}

.datos{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.datos li{padding:16px 0;border-bottom:1px solid var(--linea)}
.datos__k{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);display:block;margin-bottom:5px;
}
.datos__v{
  font-size:clamp(17px,1.9vw,21px);font-weight:900;letter-spacing:-.015em;
  line-height:1.3;display:block;
}
.datos__v small{
  display:block;font-size:13px;font-weight:400;letter-spacing:0;
  color:var(--gris);margin-top:5px;
}

/* ---------- tarjetas de división (portada) ---------- */
.divisiones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:44px;
}
.tarjeta{
  display:flex;flex-direction:column;background:var(--papel);
  border:1px solid var(--linea);border-top:4px solid var(--c,var(--carmin));
  padding:clamp(22px,3vw,30px);text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.tarjeta__cod{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:var(--ct,#fff);background:var(--c,var(--carmin));padding:5px 10px;margin-bottom:16px;
}
.tarjeta h3{margin-bottom:10px}
.tarjeta p{font-size:15px;line-height:1.72;color:var(--texto-70);margin:0}
.tarjeta__n{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.tarjeta:hover .tarjeta__n{color:var(--c,var(--carmin))}

/* división anunciada pero todavía sin página propia */
.tarjeta--pronto{cursor:default;background:var(--papel-2)}
.tarjeta--pronto:hover{transform:none;box-shadow:none}
.tarjeta--pronto h3,.tarjeta--pronto p{opacity:.72}
.tarjeta__n--pronto{color:var(--carmin)}
.pie__pronto em{font-style:normal;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#909090;margin-left:6px}

/* ---------- fichas de servicio (páginas interiores) ---------- */
.ficha{
  display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:10px clamp(20px,3vw,48px);padding:26px 0;border-top:1px solid var(--linea);
}
.ficha:first-of-type{border-top:2px solid var(--c,var(--texto))}
.ficha h2{font-size:clamp(17px,1.8vw,20px);font-weight:900;line-height:1.4;letter-spacing:-.01em}
.ficha h2::before{content:"";display:block;width:22px;height:2px;background:var(--c,var(--carmin));margin-bottom:11px}
.ficha p{font-size:15.5px;line-height:1.78;color:var(--texto-70);margin:0}
.ficha p + p{margin-top:.8em}

/* ---------- otras divisiones ---------- */
.otras{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea)}
.otras a{
  display:block;background:var(--papel);padding:18px 20px;text-decoration:none;
  font-size:14.5px;font-weight:700;line-height:1.4;transition:background .2s ease;
}
.otras a:hover{background:var(--papel-2);color:var(--carmin)}
.otras span{
  display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--gris);margin-bottom:6px;
}

/* ---------- clientes ---------- */
.clientes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:40px;
}
.clientes figure{
  margin:0;background:var(--papel);min-height:150px;
  display:flex;align-items:center;justify-content:center;padding:26px;
}
.clientes img{
  max-height:76px;width:auto;object-fit:contain;opacity:.9;
  transition:opacity .3s ease,transform .3s ease;
}
.clientes figure:hover img{opacity:1;transform:scale(1.03)}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,6vw,68px);align-items:start}
.vias{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--linea-osc)}
.vias li{padding:18px 0;border-bottom:1px solid var(--linea-osc)}
.vias__k{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#9A9A9A;display:block;margin-bottom:6px;
}
.vias a,.vias__v{
  font-size:clamp(15px,1.6vw,18px);font-weight:700;letter-spacing:-.005em;
  text-decoration:none;color:#fff;display:inline-block;line-height:1.5;padding:3px 0;
  font-style:normal;
}
.vias a:hover{color:var(--azul)}

/* ---------- WhatsApp ---------- */
/* Verde oficial de WhatsApp (#25D366) sobre texto negro: 8.6:1, muy por encima de AA. */
.wa{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#000;text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:15px 26px;transition:background .2s ease,transform .2s ease;
}
.wa:hover{background:#1FB855;transform:translateY(-1px)}
.wa__icono{width:22px;height:22px;flex:none}

.panel-wa{background:#111;border:1px solid var(--linea-osc);padding:clamp(26px,4vw,40px)}
.panel-wa__eti{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#25D366;margin-bottom:12px;
}
.panel-wa h2{font-size:clamp(21px,2.4vw,28px);margin-bottom:14px;color:#fff}
.panel-wa__intro{font-size:15.5px;line-height:1.75;color:#B4B4B4;margin-bottom:24px}
.panel-wa .wa{margin:6px 0 14px;width:100%;justify-content:center}
.panel-wa .campo label{color:#A8A8A8}
.panel-wa .campo input,.panel-wa .campo select,.panel-wa .campo textarea{background:#000}
.panel-wa .campo input:focus,.panel-wa .campo select:focus,.panel-wa .campo textarea:focus{border-color:#25D366}

.campo{margin-bottom:18px}
.campo label{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#A8A8A8;display:block;margin-bottom:7px;
}
.campo input,.campo select,.campo textarea{
  width:100%;background:#000;border:1px solid var(--linea-osc);color:#fff;
  font-family:var(--fuente);font-size:16px;padding:12px 13px;border-radius:0;
}
.campo textarea{resize:vertical;min-height:88px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none}
.nota{font-size:13px;color:#A8A8A8;margin:0;line-height:1.55}
.nota--aviso{color:#FFD24D}

.cierre__acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.boton--oscuro{background:transparent;color:var(--texto);border:1px solid var(--texto)}
.boton--oscuro:hover{background:var(--texto);color:#fff}

/* ---------- llamada final ---------- */
.cierre{
  background:var(--papel-2);border-top:1px solid var(--linea);
  padding:clamp(44px,6vw,72px) 0;text-align:center;
}
.cierre h2{max-width:20ch;margin:0 auto 14px}
.cierre p{max-width:52ch;margin:0 auto 26px;color:var(--texto-70)}

/* ---------- pie ---------- */
.pie{background:#0A0A0A;color:#8E8E8E;padding:44px 0 30px;border-top:1px solid var(--linea-osc)}
.pie__cols{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap:30px clamp(24px,4vw,52px);
}
.pie img{height:46px;width:auto;opacity:.9;margin-bottom:14px}
.pie h2{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:8px;font-size:13.5px;line-height:1.55}
.pie a{text-decoration:none;display:inline-block;padding:2px 0}
.pie a:hover{color:#fff;text-decoration:underline}
.pie address{font-style:normal;font-size:13.5px;line-height:1.65}
.pie__legal{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--linea-osc);
  font-size:12px;color:#909090;
}

/* ---------- animación de entrada ---------- */
.aparece{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.aparece.visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .dos-col,.contacto{grid-template-columns:1fr}
  .pie__cols{grid-template-columns:1fr 1fr}
  .pie__cols > :first-child{grid-column:1 / -1}
}
@media (max-width:560px){
  .pie__cols{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .nav,.barra .boton{display:none}
  .menu-btn{display:flex}
  .barra.abierta .nav{
    display:flex;flex-direction:column;gap:0;position:absolute;top:86px;left:0;right:0;
    background:var(--papel);border-bottom:1px solid var(--linea);
    padding:8px var(--gutter) 18px;max-height:calc(100vh - 86px);overflow-y:auto;
  }
  .barra.abierta .nav a{padding:14px 0;border-bottom:1px solid var(--linea);width:100%}
  .ficha{grid-template-columns:1fr;gap:10px}
  .ficha h2{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .aparece{opacity:1;transform:none}
}
@media print{
  .barra,.menu-btn,.portada__acciones,.formulario,.cierre{display:none}
  body{font-size:11pt}
  .portada,.cabecera,.seccion--negra{background:#fff !important;color:#000 !important}
}