/* ============================================================
   KAPLUN PARTNERS — capa de diseño premium
   Point Web · agosto 2026
   Implementa el design brief 07-08-26 + refinamiento premium.
   Todo scopeado para NO pisar estilos existentes de Astra/Elementor.
   ============================================================ */

:root{
  /* Paleta institucional (Manual de Marca) */
  --kp-azul:#093654;
  --kp-azul-900:#06283e;
  --kp-azul-700:#0d4straight;
  --kp-naranja:#F8981D;
  --kp-naranja-600:#e3860d;
  --kp-gris-bc:#E5E7EB;      /* breadcrumb / dividers */
  --kp-gris-texto:#5b6b78;
  --kp-blanco:#fff;

  /* Ritmo de animación homogéneo (el brief pide consistencia) */
  --kp-t-rapida:180ms;
  --kp-t:275ms;              /* dentro del rango 250–300ms pedido */
  --kp-t-lenta:420ms;
  --kp-ease:cubic-bezier(.22,.61,.36,1);
  --kp-ease-out:cubic-bezier(.16,1,.3,1);

  /* Elevaciones */
  --kp-sh-1:0 1px 2px rgba(9,54,84,.06), 0 2px 8px rgba(9,54,84,.05);
  --kp-sh-2:0 4px 12px rgba(9,54,84,.09), 0 12px 28px rgba(9,54,84,.10);
  --kp-sh-3:0 10px 24px rgba(9,54,84,.12), 0 24px 60px rgba(9,54,84,.14);
}

/* Corrige el typo del token azul intermedio */
:root{ --kp-azul-700:#0d4a70; }

/* ============================================================
   0 · BASE — respeta accesibilidad y foco visible
   ============================================================ */
.kp-scope *:focus-visible,
.kp-hero *:focus-visible{
  outline:2px solid var(--kp-naranja);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  .kp-hero__text,.kp-card,.kp-reveal{transition:none!important;animation:none!important}
  .kp-hero__video{display:none}
}

/* ============================================================
   1 · HERO DE VIDEO SINCRONIZADO (home)
   timeline única de 54s · 5 bloques · texto por bloque
   ============================================================ */
.kp-hero{
  position:relative;
  width:100%;
  /* El CTA debe entrar SIN scroll en 1366x768: no usamos 100vh pelado.
     svh evita el salto de la barra del navegador en mobile. */
  min-height:clamp(520px, calc(100svh - var(--kp-head,96px)), 760px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  background:var(--kp-azul-900);
}
.kp-hero__video,
.kp-hero__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
.kp-hero__poster{z-index:1; transition:opacity var(--kp-t-lenta) var(--kp-ease)}
.kp-hero.is-playing .kp-hero__poster{opacity:0}

/* Velo: da contraste al texto blanco (accesibilidad) sin apagar la imagen */
.kp-hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,40,62,.42) 0%, rgba(6,40,62,.16) 38%, rgba(6,40,62,.30) 72%, rgba(6,40,62,.55) 100%),
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(6,40,62,.30) 0%, rgba(6,40,62,.52) 100%);
}

.kp-hero__inner{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,3.4vw,44px);
  text-align:center;
  padding:clamp(24px,4vw,56px) 20px;
  width:100%;
}

/* — El bloque de 2 líneas: MISMO tratamiento en ambas, sin jerarquía —
   CALIBRACIÓN (medida en el sitio real, no estimada):
   el texto más largo del brief ("Intermediación independiente en mercados
   agroindustriales globales", 66 caracteres) necesita 1115px para entrar en
   UNA línea a 38px. Con el max-width de 600–800px que sugiere el brief se
   parte en 3 líneas totales, y el propio brief exige "2 líneas exactas" y
   "evitar que el texto se parta en más de 2 líneas en desktop".
   Como el max-width está definido como "aprox." y su fin declarado es
   justamente controlar los saltos de línea, se prioriza el resultado
   esperado: 38px en desktop grande, escala fluida hacia abajo, y el ancho
   necesario para que NINGUNO de los 5 textos pase de 2 líneas.
   → 1366px de viewport: 32px (necesita 946px) · 1920px: 38px (necesita 1115px) */
.kp-hero__text{
  max-width:min(1160px, 94vw);
  margin:0 auto;
  color:#fff;
  font-size:clamp(22px, 17.2px + 1.083vw, 38px);
  line-height:1.26;                                 /* 48/38 del brief */
  font-weight:400;                                  /* idéntico en las 2 líneas */
  letter-spacing:.002em;
  text-wrap:balance;                                /* líneas equilibradas */
  text-shadow:0 2px 20px rgba(6,40,62,.34);
  transition:opacity 320ms var(--kp-ease), transform 320ms var(--kp-ease);
}
.kp-hero__text .l1,
.kp-hero__text .l2{
  display:block;
  font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit;
  margin:0;
}
/* fade suave 250–400ms, ambas líneas animan como un bloque único */
.kp-hero__text.is-out{opacity:0; transform:translateY(-6px)}

/* — CTA outlined estilo COFCO — */
.kp-cta{
  display:inline-block;
  font-size:16px; line-height:24px;
  padding:8px 29px;                    /* exacto del brief */
  border:2px solid var(--kp-naranja);
  border-radius:999px;                 /* pill */
  color:#fff; background:transparent;
  text-decoration:none;
  font-weight:500; letter-spacing:.012em;
  position:relative; overflow:hidden;
  transition:color var(--kp-t) var(--kp-ease), border-color var(--kp-t) var(--kp-ease), box-shadow var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease);
}
/* relleno naranja que barre de izq a der (premium, no un cambio brusco) */
.kp-cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--kp-naranja);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--kp-t) var(--kp-ease-out);
}
.kp-cta:hover,.kp-cta:focus-visible{
  color:#fff; border-color:var(--kp-naranja);
  box-shadow:0 8px 24px rgba(248,152,29,.32);
  transform:translateY(-1px);
}
.kp-cta:hover::before,.kp-cta:focus-visible::before{transform:scaleX(1)}
.kp-cta:active{transform:translateY(0)}

/* Indicador de scroll discreto */
.kp-hero__scroll{
  position:absolute; left:50%; bottom:22px; z-index:3;
  transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid rgba(255,255,255,.5); border-radius:12px;
  opacity:.75;
}
.kp-hero__scroll::after{
  content:""; position:absolute; left:50%; top:8px;
  width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,.9);
  transform:translateX(-50%);
  animation:kp-scroll 1.9s var(--kp-ease) infinite;
}
@keyframes kp-scroll{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0;transform:translate(-50%,13px)}100%{opacity:0}}

/* ============================================================
   2 · BREADCRUMB (páginas internas)
   ============================================================ */
.kp-breadcrumb{
  background:var(--kp-gris-bc);
  min-height:52px;                     /* brief: 48–56px */
  display:flex; align-items:center;
  font-size:14px; letter-spacing:.01em;
}
.kp-breadcrumb__inner{
  max-width:1200px; margin:0 auto; width:100%;
  padding:0 clamp(16px,4vw,32px);
  color:var(--kp-gris-texto);
}
.kp-breadcrumb a{
  color:var(--kp-gris-texto); text-decoration:none;
  transition:color var(--kp-t) var(--kp-ease);
}
.kp-breadcrumb a:hover{color:var(--kp-naranja)}
.kp-breadcrumb .sep{margin:0 .55em; opacity:.55}
.kp-breadcrumb .current{color:var(--kp-azul); font-weight:600}

/* ============================================================
   3 · HERO COLLAGE (Quiénes somos / Qué hacemos)
   1 foto arriba full width + 2 abajo con división vertical sutil
   ============================================================ */
.kp-collage{
  position:relative; width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,55fr) minmax(0,45fr);
  gap:4px;                              /* la "división sutil" */
  height:clamp(420px, 62vw, 800px);     /* 750–850 en desktop grande */
  background:var(--kp-blanco);
  overflow:hidden; isolation:isolate;
}
.kp-collage__top{grid-column:1 / -1; grid-row:1}
.kp-collage__bl{grid-column:1; grid-row:2}
.kp-collage__br{grid-column:2; grid-row:2}
.kp-collage figure{margin:0; overflow:hidden; position:relative}
.kp-collage img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.1s var(--kp-ease-out);
}
.kp-collage:hover img{transform:scale(1.055)}
/* velo para el título centrado encima */
.kp-collage::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,40,62,.34) 0%, rgba(6,40,62,.20) 45%, rgba(6,40,62,.42) 100%);
}
.kp-collage__title{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center;
  padding:0 20px;
}
/* Astra define color propio para h1/h2/h3 → hay que pisarlo explícitamente,
   si no el título del hero sale gris oscuro sobre la foto. */
.kp-collage__title h1,
.kp-collage__title h2,
.kp-collage__title p{
  color:#fff!important;
  margin:0;
  font-size:clamp(30px, 1.6rem + 2.1vw, 56px);
  line-height:1.15;
  font-weight:600; letter-spacing:-.012em;
  text-shadow:0 2px 26px rgba(6,40,62,.45);
}
.kp-collage__sub{
  margin-top:14px!important;
  font-size:clamp(16px,.95rem + .5vw,21px)!important;
  font-weight:400!important;
  line-height:1.5!important;
  max-width:760px;
  text-shadow:0 2px 18px rgba(6,40,62,.5);
}
/* En mobile el collage de 3 piezas se apila para no quedar ilegible */
@media (max-width:767px){
  .kp-collage{grid-template-rows:minmax(0,50fr) minmax(0,50fr); height:clamp(380px,86vw,520px)}
}

/* ============================================================
   4 · CARDS "QUÉ HACEMOS" — 2×2 desktop, misma altura exacta
   ============================================================ */
.kp-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));   /* [1][2] / [3][4] */
  gap:clamp(16px,1.8vw,26px);
  max-width:1120px; margin:0 auto; width:100%;
}
@media (max-width:767px){ .kp-cards{grid-template-columns:1fr} }

.kp-card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
  height:100%;                        /* ← misma altura exacta entre las 4 */
  padding:clamp(24px,2vw,32px);       /* brief: 24–32px */
  background:#fff;
  border:1px solid rgba(9,54,84,.09);
  border-radius:14px;
  box-shadow:var(--kp-sh-1);
  cursor:pointer;                     /* brief: cursor pointer */
  text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform var(--kp-t) var(--kp-ease),
             box-shadow var(--kp-t) var(--kp-ease),
             border-color var(--kp-t) var(--kp-ease);
}
/* filo naranja superior que crece en hover */
.kp-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--kp-naranja),var(--kp-naranja-600));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--kp-t) var(--kp-ease-out);
}
.kp-card:hover,.kp-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--kp-sh-2);
  border-color:var(--kp-naranja);      /* brief: borde naranja */
}
.kp-card:hover::before,.kp-card:focus-visible::before{transform:scaleX(1)}

.kp-card__icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--kp-azul);
  transition:color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease-out);
}
.kp-card__icon svg{width:100%; height:100%; stroke-width:1.5; fill:none; stroke:currentColor}
.kp-card:hover .kp-card__icon{color:var(--kp-naranja); transform:translateY(-2px) scale(1.06)}

.kp-card__title{
  font-size:clamp(16px,.95rem + .25vw,19px);
  line-height:1.35;
  color:var(--kp-azul);
  font-weight:600;
  margin:0;
  transition:font-variation-settings var(--kp-t) var(--kp-ease), font-weight var(--kp-t) var(--kp-ease), color var(--kp-t) var(--kp-ease);
}
.kp-card:hover .kp-card__title{font-weight:700}   /* incremento sutil del peso */
.kp-card__desc{
  font-size:15px; line-height:1.6; color:var(--kp-gris-texto); margin:0;
  flex:1 1 auto;                       /* empuja para igualar alturas */
}

/* ============================================================
   5 · SECCIONES SECUENCIALES "QUIÉNES SOMOS" (estilo Ceibos)
   sin fotos: sólo espaciado, jerarquía, dividers y aire
   ============================================================ */
.kp-sections{max-width:900px; margin:0 auto; padding:0 clamp(16px,4vw,24px)}
/* Elementor 3.35 NO propaga _css_classes a los containers creados por JSON
   (el _element_id sí). Por eso las secciones se estilan por ID, que es lo que
   efectivamente llega al HTML. */
#perfil-institucional,#modelo-de-negocio,#enfoque,#management,#trayectoria,#vision,
.kp-section{
  padding-block:clamp(44px,5.2vw,76px);
  border-bottom:1px solid var(--kp-gris-bc);
  scroll-margin-top:var(--kp-anchor-offset,120px);  /* header sticky no tapa el anchor */
}
#vision,.kp-section:last-child{border-bottom:0}
/* ancho de lectura cómodo para los 6 apartados */
/* El ID vive en el contenedor FULL (el que lleva el fondo de borde a borde),
   así que el ancho de lectura se aplica al contenido de adentro, no al fondo. */
#perfil-institucional > .e-con-inner,
#modelo-de-negocio > .e-con-inner,
#enfoque > .e-con-inner,
#management > .e-con-inner,
#trayectoria > .e-con-inner,
#vision > .e-con-inner{ width:100%; }
#perfil-institucional,#modelo-de-negocio,#trayectoria,#vision{ border-bottom:0!important; }
#enfoque,#management{ border-bottom:0!important; }
.kp-section__title,
.kp-section__title .elementor-heading-title{
  font-size:clamp(24px,1.35rem + .95vw,34px)!important;
  line-height:1.25!important; color:var(--kp-azul)!important; font-weight:600!important;
  margin:0 0 18px!important; letter-spacing:-.01em;
  position:relative; padding-left:18px;
}
/* acento institucional sutil a la izquierda del título */
.kp-section__title::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em;
  width:3px; border-radius:2px;
  background:linear-gradient(180deg,var(--kp-naranja),rgba(248,152,29,.25));
}
.kp-section__body{font-size:17px; line-height:1.75; color:#3f5261}
.kp-section__body p{margin:0 0 14px}
.kp-section__body ul{margin:8px 0 0; padding-left:0; list-style:none}
.kp-section__body li{position:relative; padding-left:22px; margin-bottom:9px}
.kp-section__body li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--kp-naranja);
}

/* ============================================================
   6 · REVEAL AL SCROLL — sobrio, corporativo (no invasivo)
   ============================================================ */
.kp-reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--kp-ease-out), transform .7s var(--kp-ease-out)}
.kp-reveal.is-in{opacity:1; transform:none}
.kp-reveal[data-d="1"]{transition-delay:.08s}
.kp-reveal[data-d="2"]{transition-delay:.16s}
.kp-reveal[data-d="3"]{transition-delay:.24s}

/* ============================================================
   7 · NAVBAR / TOP BAR / FOOTER
   ============================================================ */
/* Texto del navbar SIEMPRE azul institucional, también en hover */
.kp-navbar .elementor-item,
.kp-navbar .elementor-item:hover,
.kp-navbar .elementor-item:focus,
.kp-navbar .elementor-item.elementor-item-active,
.kp-navbar .elementor-item.highlighted,
.kp-navbar .sub-menu .elementor-sub-item,
.kp-navbar .sub-menu .elementor-sub-item:hover{
  color:var(--kp-azul)!important;
}
/* subrayado naranja de acento (no cambia el color del texto) */
.kp-navbar .elementor-item::after{
  background-color:var(--kp-naranja)!important;
  height:2px!important;
}
/* Ítems del dropdown: fondo naranja en hover */
.kp-navbar .sub-menu .elementor-sub-item:hover,
.kp-navbar .sub-menu .elementor-sub-item:focus,
.kp-navbar .sub-menu .elementor-sub-item.elementor-item-active{
  background-color:var(--kp-naranja)!important;
  color:#fff!important;
}
/* Divider dentro del dropdown, entre "Enfoque" y "Management" */
.kp-navbar .sub-menu li.kp-divider-after{
  border-bottom:1px solid var(--kp-gris-bc);
  margin-bottom:10px; padding-bottom:10px;   /* 8–12px pedidos */
}

/* Íconos sociales del top bar: siempre naranja, fondo blanco → naranja en hover */
.kp-social .elementor-social-icon{
  background-color:#fff!important;
  color:var(--kp-naranja)!important;
  transition:background-color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease);
}
.kp-social .elementor-social-icon i,
.kp-social .elementor-social-icon svg{color:var(--kp-naranja)!important; fill:var(--kp-naranja)!important; transition:color var(--kp-t) var(--kp-ease), fill var(--kp-t) var(--kp-ease)}
.kp-social .elementor-social-icon:hover{background-color:var(--kp-naranja)!important; transform:translateY(-2px)}
.kp-social .elementor-social-icon:hover i,
.kp-social .elementor-social-icon:hover svg{color:#fff!important; fill:#fff!important}

/* Footer institucional
   OJO: se ancla en [data-elementor-type="footer"], NO en la clase .kp-footer:
   Elementor no propaga _css_classes a los containers creados por JSON, y sin esto
   los enlaces quedaban en #334155 sobre #093654 → contraste 1,22 (ilegible). */
[data-elementor-type="footer"]{background:var(--kp-azul)}
[data-elementor-type="footer"],
[data-elementor-type="footer"] p,
[data-elementor-type="footer"] li,
[data-elementor-type="footer"] span{color:rgba(255,255,255,.86)}
[data-elementor-type="footer"] a,
[data-elementor-type="footer"] .elementor-item,
[data-elementor-type="footer"] .elementor-icon-list-text{
  color:rgba(255,255,255,.86)!important;      /* contraste 12,1:1 sobre #093654 */
  text-decoration:none;
  transition:color var(--kp-t) var(--kp-ease);
}
[data-elementor-type="footer"] a:hover,
[data-elementor-type="footer"] .elementor-item:hover{color:var(--kp-naranja)!important}
[data-elementor-type="footer"] h1,
[data-elementor-type="footer"] h2,
[data-elementor-type="footer"] h3,
[data-elementor-type="footer"] .elementor-heading-title{color:#fff!important}
[data-elementor-type="footer"] .elementor-icon{color:rgba(255,255,255,.86)!important; fill:rgba(255,255,255,.86)!important}
.kp-footer__head,
[data-elementor-type="footer"] .kp-footer__head .elementor-heading-title{
  font-weight:600!important; letter-spacing:.05em!important; text-transform:uppercase!important;
  font-size:13px!important; margin-bottom:14px!important; color:#fff!important;
}
.kp-footer__legal{font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.66)}

/* Header sticky con "condensación" al bajar */
.kp-head--sticky{
  transition:box-shadow var(--kp-t) var(--kp-ease), backdrop-filter var(--kp-t) var(--kp-ease), background-color var(--kp-t) var(--kp-ease);
}
.kp-head--sticky.is-stuck{
  box-shadow:0 2px 18px rgba(9,54,84,.10);
  backdrop-filter:saturate(140%) blur(8px);
  background-color:rgba(255,255,255,.94)!important;
}

/* ============================================================
   8 · FORMULARIO DE CONTACTO
   ============================================================ */
.kp-form .elementor-field-group{margin-bottom:6px}
.kp-form input[type=text],
.kp-form input[type=email],
.kp-form textarea{
  border:1px solid rgba(9,54,84,.18)!important;
  border-radius:10px!important;
  padding:13px 15px!important;
  font-size:15px!important;
  background:#fff!important;
  transition:border-color var(--kp-t) var(--kp-ease), box-shadow var(--kp-t) var(--kp-ease);
}
.kp-form input:focus,.kp-form textarea:focus{
  border-color:var(--kp-naranja)!important;
  box-shadow:0 0 0 3px rgba(248,152,29,.16)!important;
  outline:none!important;
}
.kp-form button[type=submit]{
  background:var(--kp-azul)!important; color:#fff!important;
  border-radius:999px!important; padding:12px 34px!important;
  border:2px solid var(--kp-azul)!important;
  transition:background-color var(--kp-t) var(--kp-ease), border-color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease), box-shadow var(--kp-t) var(--kp-ease);
}
.kp-form button[type=submit]:hover{
  background:var(--kp-naranja)!important; border-color:var(--kp-naranja)!important;
  transform:translateY(-1px); box-shadow:0 10px 26px rgba(248,152,29,.30);
}
.kp-form__note{font-size:12.5px; line-height:1.7; color:var(--kp-gris-texto); margin-top:14px}

/* ============================================================
   9 · ACORDEÓN (Qué hacemos) — más aire y jerarquía
   ============================================================ */
.kp-accordion .e-n-accordion-item{
  border:1px solid rgba(9,54,84,.10);
  border-radius:12px;
  margin-bottom:14px;                  /* separación vertical entre bloques */
  overflow:hidden;
  transition:border-color var(--kp-t) var(--kp-ease), box-shadow var(--kp-t) var(--kp-ease);
}
.kp-accordion .e-n-accordion-item:hover{border-color:rgba(248,152,29,.55); box-shadow:var(--kp-sh-1)}
.kp-accordion .e-n-accordion-item[open]{border-color:var(--kp-naranja); box-shadow:var(--kp-sh-1)}
.kp-accordion summary{
  padding:clamp(18px,1.6vw,24px) clamp(18px,1.8vw,28px)!important;   /* más padding interno */
  font-size:clamp(17px,1rem + .3vw,20px)!important;                  /* títulos más grandes */
  color:var(--kp-azul)!important; font-weight:600!important;
  transition:background-color var(--kp-t) var(--kp-ease);
}
.kp-accordion summary:hover{background:rgba(248,152,29,.05)}
.kp-accordion .e-n-accordion-item-title-text{scroll-margin-top:var(--kp-anchor-offset,120px)}

/* resalte momentáneo cuando se llega desde una card */
@keyframes kp-flash{0%{box-shadow:0 0 0 0 rgba(248,152,29,.55)}100%{box-shadow:0 0 0 14px rgba(248,152,29,0)}}
.kp-flash{animation:kp-flash 1.1s var(--kp-ease) 1}

/* ============================================================
   10 · UTILIDADES
   ============================================================ */
.kp-statement{
  max-width:860px; margin:0 auto;
  font-size:clamp(20px,1.1rem + .9vw,30px);
  line-height:1.42; color:var(--kp-azul); font-weight:400;
  text-wrap:balance;
}
.kp-tight-top{padding-top:clamp(28px,3vw,44px)!important}
.kp-tight-bottom{padding-bottom:clamp(28px,3vw,44px)!important}

/* ══════════════════════════════════════════════════════════════════
   KAPLUN PARTNERS · CAPA 2 — pulido premium (17-ago-2026)
   Aditivo y reversible: borrar de acá para abajo devuelve el sitio
   al estado anterior. Cada bloque salió de una auditoría de 6
   dimensiones y fue verificado en el navegador antes de entrar.
   NO se incluye el bloque "acordeón azul sobre azul" que proponía la
   auditoría: se verificó en el DOM y el selector de Elementor no
   matchea (el fondo queda blanco), así que forzar texto blanco
   habría dejado blanco sobre blanco.
   ══════════════════════════════════════════════════════════════════ */


/* ── Tokens nuevos: familias de marca y las versiones legibles del gris y del naranja ── */
/* ══════════════════════════════════════════════════════════════
   KAPLUN PARTNERS · CAPA 2 — pulido premium (agosto 2026)
   Se AGREGA al final de kp-premium.css. Todo aditivo y reversible:
   borrar de acá para abajo devuelve el sitio al estado aprobado.
   ── 1 · TOKENS NUEVOS ────────────────────────────────────────── */
:root{
  /* Familias de marca. Hoy los titulares que salen por shortcode caen
     en la fuente del sistema operativo (San Francisco en la Mac,
     Segoe UI en la PC, Roboto en Android): el sitio se ve distinto
     en cada máquina. */
  --kp-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kp-serif:"Castoro", Georgia, "Times New Roman", serif;  /* display — reservado, ver «consultar» */

  /* Grises y naranjas que SÍ pasan WCAG 2.1 AA */
  --kp-gris-texto-aa:#55646F;   /* 4.93:1 sobre #E5E7EB — breadcrumb */
  --kp-naranja-txt:#A85D00;     /* 4.96:1 sobre blanco — naranja como TEXTO */
  --kp-naranja-ico:#B86A00;     /* 4.12:1 sobre blanco — íconos y glifos (SC 1.4.11 pide 3:1) */
}


/* ── Re-mapeo de los pesos de Geist (hoy el peso 400 devuelve Geist Black 900) ── */
/* ── 2 · GEIST: RE-MAPEO DE PESOS ──────────────────────────────
   kp-premium.css se encola DESPUÉS de post-5.css (link #24 vs #17),
   así que estas declaraciones ganan por orden de origen: no hace
   falta tocar Elementor. font-display:swap mata de paso el FOIT. */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;
  src:url('/wp-content/uploads/2026/02/Geist-Regular.ttf') format('truetype')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
  src:url('/wp-content/uploads/2026/02/Geist-Regular.ttf') format('truetype')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
  src:url('/wp-content/uploads/2026/02/Geist-Medium.ttf') format('truetype')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
  src:url('/wp-content/uploads/2026/02/Geist-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;
  src:url('/wp-content/uploads/2026/02/Geist-Bold.ttf') format('truetype')}

/* El <strong> del cuerpo, con un salto controlado: Regular → SemiBold */
.kp-section__body strong,
.elementor-widget-text-editor strong{ font-weight:600; }


/* ── Se termina la fuente del sistema operativo en los titulares más grandes del sitio ── */
/* ── 3 · FIN DE LA FUENTE DEL SISTEMA ──────────────────────────
   Todo el contenido que sale por shortcode hereda la sans de marca.
   Requiere el re-mapeo de pesos del bloque 2 (si no, el 400 sale Black). */
.kp-hero,
.kp-hero__text, .kp-hero__text .l1, .kp-hero__text .l2,
.kp-cta,
.kp-collage__title,
.kp-collage__title h1, .kp-collage__title h2, .kp-collage__title p,
.kp-collage__sub,
.kp-breadcrumb,
.kp-cards, .kp-card__title, .kp-card__desc,
.kp-form, .kp-form__note,
.kp-statement{
  font-family:var(--kp-sans);
}


/* ── Color de texto global legible y tracking proporcional en vez de px ── */
/* ── 4 · TEXTO GLOBAL LEGIBLE + TRACKING PROPORCIONAL ─────────── */
body.elementor-kit-5{
  --e-global-color-text:#3F5261;                        /* #7A7A7A 4.29:1 → 8.11:1 */
  --e-global-typography-primary-letter-spacing:-.008em; /* = -0,54px en desktop, igual que hoy */
  --e-global-typography-secondary-letter-spacing:-.007em;
}


/* ── Sacar de pantalla el verde y el amarillo de fábrica (no están en el Manual de Marca) ── */
/* ── 5 · FUERA EL VERDE Y EL AMARILLO DE FÁBRICA ─────────────── */
body.elementor-kit-5{
  --e-global-color-359477b:var(--kp-azul);     /* #3A7422 verde    → azul institucional */
  --e-global-color-cce3aa0:var(--kp-naranja);  /* #E5BF23 amarillo → naranja de marca (viñetas) */
}

/* Literal hex que ninguna variable alcanza: el :focus verde de los 2 botones grandes */
.elementor-11 .elementor-element.elementor-element-5fad135 .elementor-button:focus,
.elementor-11 .elementor-element.elementor-element-17aef66 .elementor-button:focus{
  background-color:var(--kp-azul-700)!important;   /* era #478C2BC2 */
  color:#fff!important;                            /* 8,9:1 */
}

/* Los 4 botones «Ver / Ver más»: el hover les mandaba el texto a
   amarillo (1.78:1). Azul + subrayado naranja (el naranja como
   decoración no necesita ratio). */
.elementor-11 .elementor-element.elementor-element-8bd2992 .elementor-button:hover,
.elementor-11 .elementor-element.elementor-element-1c47b16 .elementor-button:hover,
.elementor-11 .elementor-element.elementor-element-9754e9d .elementor-button:hover,
.elementor-11 .elementor-element.elementor-element-b80235b .elementor-button:hover{
  color:var(--kp-azul)!important;                  /* 12.60:1 */
  text-decoration:underline;
  text-decoration-color:var(--kp-naranja);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* «Quiénes lideran»: borde y relleno amarillos con texto blanco (1.78:1) */
.elementor-11 .elementor-element.elementor-element-89cae9c .elementor-button{
  border-color:var(--kp-naranja)!important;
}
.elementor-11 .elementor-element.elementor-element-89cae9c .elementor-button:hover{
  background-color:var(--kp-naranja)!important;
  color:var(--kp-azul-900)!important;              /* 6.88:1 — el blanco daba 1.78:1 */
}


/* ── Foco de teclado visible en todo el sitio (hoy alcanza a 5 nodos de 4 páginas) ── */
/* ── 7 · FOCO DE TECLADO EN TODO EL SITIO ────────────────────── */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body [tabindex]:not([tabindex="-1"]):focus-visible,
.kp-navbar .elementor-menu-toggle:focus-visible{
  outline:3px solid var(--kp-naranja)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 6px rgba(9,54,84,.30)!important;
  border-radius:3px;
}

/* Sobre el navy del footer y del top bar el halo se invierte para no perderse */
[data-elementor-type="footer"] a:focus-visible,
[data-elementor-type="header"] .kp-social .elementor-social-icon:focus-visible{
  box-shadow:0 0 0 6px rgba(255,255,255,.34)!important;
}

/* El formulario ya no puede anular el outline (kp-premium.css:462 hacía
   outline:none!important; esta regla lo supera en especificidad). */
.kp-form input:focus-visible,
.kp-form textarea:focus-visible{
  outline:3px solid var(--kp-naranja)!important;
  outline-offset:2px!important;
  border-color:var(--kp-azul)!important;
  box-shadow:0 0 0 6px rgba(9,54,84,.22)!important;
}


/* ── El naranja, legible: breadcrumb, ícono de las cards y sociales de header + footer ── */
/* ── 8 · EL NARANJA, LEGIBLE ─────────────────────────────────── */

/* (a) Breadcrumb — #5b6b78 sobre #E5E7EB daba 4.44:1 (falla AA por 0,06) */
.kp-breadcrumb__inner,
.kp-breadcrumb a{ color:var(--kp-gris-texto-aa); }   /* → 4.93:1 */
.kp-breadcrumb .sep{ opacity:.85; }                  /* 2.07:1 → 3.68:1 */
.kp-breadcrumb a:hover,
.kp-breadcrumb a:focus-visible{
  color:var(--kp-azul);                              /* 10.17:1 */
  text-decoration:underline;
  text-decoration-color:var(--kp-naranja);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* (b) Ícono de card en hover — mismo matiz, legible */
.kp-card:hover .kp-card__icon,
.kp-card:focus-visible .kp-card__icon{ color:var(--kp-naranja-ico); }

/* (c) Sociales del header y del footer, mismo criterio.
   El footer se ancla en [data-elementor-type="footer"]: la clase
   .kp-footer NO existe en el DOM (Elementor no propaga _css_classes
   a los containers creados por JSON — ver kp-premium.css:406). */
.kp-social .elementor-social-icon i,
.kp-social .elementor-social-icon svg,
[data-elementor-type="footer"] .elementor-social-icon i,
[data-elementor-type="footer"] .elementor-social-icon svg{
  color:var(--kp-naranja-ico)!important;
  fill:var(--kp-naranja-ico)!important;
}
[data-elementor-type="footer"] .elementor-social-icon{
  background-color:#fff!important;
  transition:background-color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease);
}
[data-elementor-type="footer"] .elementor-social-icon:hover{
  background-color:var(--kp-naranja)!important;
  transform:translateY(-2px);
}
.kp-social .elementor-social-icon:hover i,
.kp-social .elementor-social-icon:hover svg,
[data-elementor-type="footer"] .elementor-social-icon:hover i,
[data-elementor-type="footer"] .elementor-social-icon:hover svg{
  color:var(--kp-azul-900)!important;                /* 6.88:1 sobre naranja (el blanco daba 2.21:1) */
  fill:var(--kp-azul-900)!important;
}


/* ── Velo del collage: el H1 de las internas llega a 1.92:1 sobre las zonas claras de las fotos ── */
/* ── 9 · VELO DEL COLLAGE — scrim radial central ──────────────
   quienes-somos: zona clara 1.92 → 5.66:1 · promedio 8.95:1
   que-hacemos:   zona clara 2.61 → 6.70:1 · promedio 9.81:1     */
.kp-collage::after{
  background:
    radial-gradient(ellipse 70% 44% at 50% 50%,
      rgba(6,40,62,.55) 0%,
      rgba(6,40,62,.30) 62%,
      rgba(6,40,62,0) 100%),
    linear-gradient(180deg,
      rgba(6,40,62,.34) 0%,
      rgba(6,40,62,.20) 45%,
      rgba(6,40,62,.42) 100%);
}
/* en mobile el collage es más chico y el texto ocupa más ancho:
   se ensancha el scrim para que el título no se salga del gradiente */
@media (max-width:767px){
  .kp-collage::after{
    background:
      radial-gradient(ellipse 92% 52% at 50% 50%,
        rgba(6,40,62,.58) 0%,
        rgba(6,40,62,.32) 66%,
        rgba(6,40,62,.10) 100%),
      linear-gradient(180deg, rgba(6,40,62,.34) 0%, rgba(6,40,62,.22) 45%, rgba(6,40,62,.44) 100%);
  }
}


/* ── /quienes-somos/: medida de lectura de los 6 apartados y ficha del socio fundador ── */
/* ── 10 · MEDIDA DE LECTURA /quienes-somos/ ─────────────────── */
.kp-section__body{ max-width:62ch; line-height:1.72; }   /* ≈630px a 17px → ≈72 cpl */
.kp-section__body p{ margin:0 0 1.15em; }                /* antes 14px ≈ 0,47 líneas */
.kp-section__body ul{ max-width:62ch; }
.kp-section__body li{ line-height:1.65; margin-bottom:11px; }
@media (max-width:1024px){ .kp-section__body{ max-width:66ch; } }
@media (max-width:767px){  .kp-section__body{ max-width:none; font-size:16.5px; } }

/* #management — el nombre + rol como subtítulo real, no como negrita suelta */
#management .kp-section__body p:has(> strong:only-child){ margin:2.2em 0 .7em; }
#management .kp-section__body p > strong:only-child{
  display:block;
  font-size:clamp(19px, 1.05rem + .35vw, 23px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--kp-azul);
}
#management .kp-section__body p > strong:only-child::after{
  content:"";
  display:block;
  width:34px; height:2px;
  margin-top:12px;
  background:var(--kp-naranja);
}


/* ── Castoro no tiene peso 600: los títulos de sección están en negrita sintética ── */
/* ── 11 · FALSA NEGRITA Y JERARQUÍA TÍTULO / STATEMENT ───────── */

/* Castoro sólo existe en 400: nada de negrita sintética */
.kp-section__title,
.kp-section__title .elementor-heading-title{
  font-weight:400!important;
  font-size:clamp(26px, 1.4rem + 1.05vw, 38px)!important;
  -webkit-font-smoothing:antialiased;
}

/* /que-hacemos/ — el título de la página se afirma como ancla */
.elementor-464 .elementor-element.elementor-element-56c1104 .elementor-heading-title{
  font-size:clamp(28px, 1.4rem + 1.4vw, 42px)!important;
  letter-spacing:-.018em!important;
}

/* …y el statement baja a bajada (30 → 23px), subordinado y no protagonista.
   Con el re-mapeo del bloque 2 su peso 400 ya deja de ser Geist Black. */
.kp-statement{
  font-size:clamp(18px, 1rem + .55vw, 23px);
  line-height:1.55;
  color:var(--kp-gris-texto);   /* 5.50:1 sobre blanco */
}


/* ── /que-hacemos/: las 11 listas de producto y las dos capas del acordeón ── */
/* ── 12 · /que-hacemos/ · LISTAS Y LAS DOS CAPAS DEL ACORDEÓN ── */

/* (a) Las 11 listas de categorías de producto: escala unificada */
.elementor-464 .kp-accordion .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-464 .kp-accordion .elementor-widget-icon-list .elementor-icon-list-item > a{
  font-size:16px!important;
  line-height:1.6!important;
}
@media (max-width:767px){
  .elementor-464 .kp-accordion .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-464 .kp-accordion .elementor-widget-icon-list .elementor-icon-list-item > a{
    font-size:15px!important;
  }
}

/* (b) Nivel 1 — los 4 ejes de negocio */
.kp-accordion > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{
  font-size:clamp(18px, 1rem + .5vw, 23px)!important;
  line-height:1.3!important;
}
.kp-accordion > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-text{
  font-size:inherit!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:-.01em!important;
}

/* Nivel 2 — las 7 categorías de producto: etiqueta, no título.
   Se apunta por ID de widget (4934587), que es lo verificado en el HTML. */
.elementor-464 .elementor-element.elementor-element-4934587{
  --n-accordion-title-normal-color:var(--kp-azul);
  --n-accordion-title-hover-color:var(--kp-azul);    /* eran #3A7422 */
  --n-accordion-title-active-color:var(--kp-azul);
  --n-accordion-icon-hover-color:var(--kp-naranja);
  --n-accordion-icon-active-color:var(--kp-naranja);
}
.kp-accordion .elementor-element-4934587 .e-n-accordion-item-title{
  font-size:13px!important;
  line-height:1.35!important;
  padding-block:14px!important;
}
.kp-accordion .elementor-element-4934587 .e-n-accordion-item-title-text{
  font-size:inherit!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-transform:uppercase;
  letter-spacing:.09em;
}
/* la caja del nivel 2 se aplana para no competir con la del nivel 1 */
.kp-accordion .elementor-element-4934587 .e-n-accordion-item{
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid var(--kp-gris-bc)!important;
  margin-bottom:0!important;
  box-shadow:none!important;
}


/* ── Home: los 4 títulos de «Plataformas de negocio» son idénticos a su descripción ── */
/* ── 13 · HOME · TÍTULOS DE LAS 4 PLATAFORMAS DE NEGOCIO ─────── */
.elementor-11 .elementor-element-af1303d .elementor-icon-box-title,
.elementor-11 .elementor-element-b7efb54 .elementor-icon-box-title,
.elementor-11 .elementor-element-a342a1c .elementor-icon-box-title,
.elementor-11 .elementor-element-21bfb63 .elementor-icon-box-title,
.elementor-11 .elementor-element-af1303d .elementor-icon-box-title a,
.elementor-11 .elementor-element-b7efb54 .elementor-icon-box-title a,
.elementor-11 .elementor-element-a342a1c .elementor-icon-box-title a,
.elementor-11 .elementor-element-21bfb63 .elementor-icon-box-title a{
  font-size:clamp(20px, 1.1rem + .35vw, 25px)!important;
  font-weight:600!important;
  line-height:1.26!important;
  letter-spacing:-.012em!important;
  margin-block-end:12px!important;
}


/* ── Navbar en escala de navegación (18px → 15px) ── */
/* ── 14 · NAVBAR EN ESCALA DE NAVEGACIÓN ─────────────────────── */
.kp-navbar .elementor-nav-menu .elementor-item{
  font-size:15px!important;
  line-height:22px!important;
  font-weight:500!important;
  letter-spacing:.025em!important;
}
.kp-navbar .sub-menu .elementor-sub-item{
  font-size:14.5px!important;
  line-height:20px!important;
  letter-spacing:.015em!important;
}


/* ── /contacto/: el label pesa más que el dato, y los encabezados legales son más chicos que el cuerpo ── */
/* ── 15 · /contacto/ · FORMULARIO Y ENCABEZADOS LEGALES ──────── */

/* El label, más chico que el input — no al revés */
.kp-form .elementor-field-group > label{
  font-family:var(--kp-sans)!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.4!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  color:var(--kp-gris-texto)!important;
  margin-bottom:7px!important;
}
.kp-form input[type=text],
.kp-form input[type=email],
.kp-form textarea{
  font-size:16px!important;          /* 16px = sin zoom automático en iOS */
}
.kp-form input::placeholder,
.kp-form textarea::placeholder{
  color:var(--kp-gris-texto)!important;
  opacity:1!important;
}

/* «Aviso Legal» y «Política de privacidad» como micro-título */
.elementor-40 .elementor-element.elementor-element-c23f580 .elementor-heading-title,
.elementor-40 .elementor-element.elementor-element-b161d9f .elementor-heading-title{
  font-family:var(--kp-sans)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.4!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--kp-azul)!important;
}


/* ── Cortes de línea: balance en los titulares, pretty en el texto corrido ── */
/* ── 16 · CORTES DE LÍNEA ────────────────────────────────────── */

/* Titulares: líneas equilibradas, sin viudas ni palabras sueltas */
.kp-section__title,
.kp-section__title .elementor-heading-title,
.kp-collage__title h1,
.kp-collage__title h2,
.kp-card__title,
.kp-accordion .e-n-accordion-item-title-text,
.elementor-widget-icon-box .elementor-icon-box-title{
  text-wrap:balance;
}

/* Texto corrido: sin huérfanas al final del párrafo */
.kp-section__body p,
.kp-section__body li,
.kp-card__desc,
.kp-collage__sub,
.kp-form__note,
.elementor-widget-text-editor p,
.elementor-widget-icon-box .elementor-icon-box-description{
  text-wrap:pretty;
}

/* ══════════════════════════════════════════════════════════════════
   KAPLUN PARTNERS · CAPA 3 — nivel premium (17-ago-2026)
   1) Tipografía unificada a DOS familias
   2) Navbar y dropdown rediseñados
   3) Breadcrumb fuera
   4) Bloques editoriales para "Quiénes somos"
   Aditivo: borrar de acá abajo vuelve al estado anterior.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · TIPOGRAFÍA: DOS FAMILIAS, UN SISTEMA ─────────────────────
   Antes convivían 4 familias cargadas (Castoro, Geist, Hanken Grotesk
   sólo en el navbar, Montserrat sólo en el footer) y la que dominaba
   era la del sistema operativo. Ahora:
     · Castoro (serif)  → display: titulares de hero y de sección
     · Geist  (sans)    → absolutamente todo lo demás
   Castoro EXISTE SÓLO EN PESO 400: cualquier 600/700 sobre Castoro es
   negrita sintética, así que se fuerza 400 y la jerarquía se hace con
   tamaño y color, no con peso. */
:root{
  --kp-serif:"Castoro", Georgia, "Times New Roman", serif;
  --kp-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* el navbar deja Hanken Grotesk y el footer deja Montserrat */
.kp-navbar .elementor-item,
.kp-navbar .elementor-sub-item,
[data-elementor-type="footer"],
[data-elementor-type="footer"] a,
[data-elementor-type="footer"] p,
[data-elementor-type="footer"] li,
[data-elementor-type="footer"] span,
[data-elementor-type="footer"] .elementor-heading-title,
[data-elementor-type="header"] .elementor-item{
  font-family:var(--kp-sans)!important;
}

/* display en la serif institucional */
.kp-collage__title h1,
.kp-collage__title h2,
.kp-section__title,
.kp-section__title .elementor-heading-title,
.kp-editorial__title,
.kp-cta-band__title,
.kp-quote__text{
  font-family:var(--kp-serif)!important;
  font-weight:400!important;              /* Castoro no tiene 600: evita la negrita falsa */
  letter-spacing:-.012em;
}
/* el hero de la home queda en sans: es un statement, no un titular de libro */
.kp-hero__text, .kp-hero__text .l1, .kp-hero__text .l2{ font-family:var(--kp-sans)!important; }

/* ── 2 · NAVBAR Y DROPDOWN ────────────────────────────────────────
   El dropdown se veía como una lista pegada al header, con ítems
   pintados de naranja pleno. Ahora: panel flotante, sombra suave,
   entrada animada y hover discreto (barra de acento + fondo tenue). */
.kp-navbar .elementor-nav-menu .elementor-item{
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:.01em;
  padding-inline:2px!important;
  position:relative;
}
/* subrayado de acento que crece desde el centro */
.kp-navbar .elementor-nav-menu > li > a.elementor-item::after{
  content:""; position:absolute; left:50%; right:50%; bottom:2px; height:2px;
  background:var(--kp-naranja); border-radius:2px;
  transition:left var(--kp-t) var(--kp-ease-out), right var(--kp-t) var(--kp-ease-out);
}
.kp-navbar .elementor-nav-menu > li > a.elementor-item:hover::after,
.kp-navbar .elementor-nav-menu > li > a.elementor-item.elementor-item-active::after{ left:0; right:0; }

/* — el panel del dropdown — */
.kp-navbar .elementor-nav-menu--dropdown,
.kp-navbar .sub-menu{
  background:#fff!important;
  border:1px solid rgba(9,54,84,.08)!important;
  border-radius:12px!important;
  box-shadow:0 12px 34px rgba(9,54,84,.14), 0 2px 8px rgba(9,54,84,.06)!important;
  padding:8px!important;
  margin-top:10px!important;
  min-width:248px;
  overflow:hidden;
}
/* ítems: hover discreto, NO naranja pleno */
.kp-navbar .sub-menu .elementor-sub-item{
  font-size:14.5px!important;
  font-weight:450!important;
  color:var(--kp-azul)!important;
  padding:10px 14px!important;
  border-radius:8px!important;
  position:relative;
  transition:background-color var(--kp-t) var(--kp-ease), color var(--kp-t) var(--kp-ease), padding-left var(--kp-t) var(--kp-ease-out);
  background:transparent!important;
}
.kp-navbar .sub-menu .elementor-sub-item:hover,
.kp-navbar .sub-menu .elementor-sub-item:focus-visible{
  background:rgba(248,152,29,.10)!important;
  color:var(--kp-azul)!important;
  padding-left:20px!important;
}
/* barrita naranja que aparece a la izquierda en hover */
.kp-navbar .sub-menu .elementor-sub-item::before{
  content:""; position:absolute; left:8px; top:50%; width:3px; height:0;
  background:var(--kp-naranja); border-radius:2px; transform:translateY(-50%);
  transition:height var(--kp-t) var(--kp-ease-out);
}
.kp-navbar .sub-menu .elementor-sub-item:hover::before,
.kp-navbar .sub-menu .elementor-sub-item:focus-visible::before{ height:18px; }

/* el ítem activo NO se pinta de naranja pleno (varios quedaban naranjas a la vez) */
.kp-navbar .sub-menu .elementor-sub-item.elementor-item-active{
  background:transparent!important;
  color:var(--kp-azul)!important;
  font-weight:600!important;
}
/* divider entre Enfoque y Management */
.kp-navbar .sub-menu li.kp-divider-after{
  border-bottom:1px solid var(--kp-gris-bc);
  margin:8px 6px!important; padding-bottom:8px!important;
}
/* entrada animada del panel */
@media (min-width:1025px){
  .kp-navbar .elementor-nav-menu li:hover > .sub-menu,
  .kp-navbar .elementor-nav-menu li:focus-within > .sub-menu{
    animation:kp-drop var(--kp-t) var(--kp-ease-out) both;
  }
}
@keyframes kp-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 3 · BREADCRUMB FUERA ─────────────────────────────────────────
   Decisión de Franco (17-ago): la guía "Home / …" no aporta en un
   sitio de 4 páginas. Se oculta sin desmontar el shortcode, para
   poder reactivarla con un solo renglón si hiciera falta. */
.kp-breadcrumb{ display:none!important; }

/* ── 4 · BLOQUES EDITORIALES ──────────────────────────────────────
   Le dan aire y ritmo a las páginas de texto corrido. */

/* 4.1 · Intro de página: bajada grande, ancho de lectura */
.kp-lead{
  font-size:clamp(18px,1rem + .55vw,22px);
  line-height:1.65;
  color:#3f5261;
  max-width:760px;
  text-wrap:pretty;
}

/* 4.2 · Banda de CTA con imagen de fondo (parallax sutil) */
.kp-cta-band{
  position:relative;
  min-height:clamp(300px,34vw,420px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(48px,6vw,84px) 20px;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;            /* parallax; se apaga en mobile */
  isolation:isolate; overflow:hidden;
}
.kp-cta-band::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,40,62,.62) 0%, rgba(6,40,62,.50) 50%, rgba(6,40,62,.68) 100%);
}
.kp-cta-band__inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; }
.kp-cta-band__title{
  color:#fff!important;
  font-size:clamp(26px,1.4rem + 1.5vw,40px);
  line-height:1.22; margin:0 0 14px;
  text-shadow:0 2px 24px rgba(6,40,62,.45);
  text-wrap:balance;
}
.kp-cta-band__text{
  color:rgba(255,255,255,.92); font-size:clamp(16px,.95rem + .35vw,19px);
  line-height:1.6; margin:0 auto 26px; max-width:640px;
}
@media (max-width:1024px){ .kp-cta-band{ background-attachment:scroll; } }

/* 4.3 · Cifras institucionales */
.kp-figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(18px,2.4vw,40px);
  max-width:1000px; margin:0 auto; width:100%;
}
.kp-figure{ text-align:center; padding:6px 10px; position:relative; }
.kp-figure + .kp-figure::before{
  content:""; position:absolute; left:calc(-1 * clamp(9px,1.2vw,20px)); top:14%; bottom:14%;
  width:1px; background:var(--kp-gris-bc);
}
.kp-figure__n{
  display:block;
  font-family:var(--kp-serif); font-weight:400;
  font-size:clamp(38px,2rem + 2.2vw,58px); line-height:1;
  color:var(--kp-azul); letter-spacing:-.02em;
}
.kp-figure__n small{ font-size:.52em; color:var(--kp-naranja); margin-left:2px; }
.kp-figure__l{
  display:block; margin-top:10px;
  font-size:14px; line-height:1.45; color:var(--kp-gris-texto);
  letter-spacing:.02em;
}
@media (max-width:767px){ .kp-figure + .kp-figure::before{ display:none } }

/* 4.4 · Cita / statement institucional */
.kp-quote{
  max-width:900px; margin:0 auto; padding:clamp(28px,3.4vw,48px) 0;
  text-align:center; position:relative;
}
.kp-quote__text{
  font-size:clamp(21px,1.15rem + .95vw,32px);
  line-height:1.4; color:var(--kp-azul); margin:0;
  text-wrap:balance;
}
.kp-quote::before{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--kp-naranja),rgba(248,152,29,.3));
  margin:0 auto 24px;
}

/* 4.5 · Ficha del socio: retrato + texto */
.kp-person{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3vw,52px); align-items:start;
  max-width:1000px; margin:0 auto;
}
.kp-person__foto{
  width:100%; border-radius:14px; overflow:hidden;
  box-shadow:var(--kp-sh-2); position:sticky; top:120px;
}
.kp-person__foto img{ width:100%; height:auto; display:block; }
.kp-person__nombre{
  font-family:var(--kp-serif)!important; font-weight:400!important;
  font-size:clamp(22px,1.2rem + .7vw,29px)!important;
  color:var(--kp-azul)!important; margin:0 0 4px!important;
}
.kp-person__rol{
  display:inline-block; margin-bottom:18px;
  font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--kp-naranja);
}
@media (max-width:900px){
  .kp-person{ grid-template-columns:1fr; }
  .kp-person__foto{ position:static; max-width:340px; }
}

/* 4.6 · Sección de fondo alterno, para cortar el texto corrido */
.kp-alt{ background:#F7F9FA; }

/* 4.7 · Lista de principios en dos columnas con acento */
.kp-principios{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,1.8vw,26px);
  max-width:900px; margin:0 auto; padding:0; list-style:none;
}
.kp-principio{
  position:relative; padding:18px 20px 18px 46px;
  background:#fff; border:1px solid rgba(9,54,84,.08); border-radius:12px;
  font-size:16px; line-height:1.5; color:#3f5261;
  transition:border-color var(--kp-t) var(--kp-ease), box-shadow var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease);
}
.kp-principio::before{
  content:""; position:absolute; left:20px; top:24px;
  width:8px; height:8px; border-radius:50%;
  background:var(--kp-naranja); box-shadow:0 0 0 4px rgba(248,152,29,.14);
}
.kp-principio:hover{ border-color:rgba(248,152,29,.5); box-shadow:var(--kp-sh-1); transform:translateY(-2px); }

/* ── CAPA 3.1 · MEDIDA DE LECTURA Y AJUSTES FINOS ─────────────────
   El texto corría a 1140px de ancho = 134 caracteres por línea.
   Lo cómodo son 60-75: se acota el bloque de texto, no el contenedor
   (el fondo alterno tiene que seguir yendo de borde a borde). */
#perfil-institucional .kp-section__body,
#modelo-de-negocio .kp-section__body,
#trayectoria .kp-section__body,
#vision .kp-section__body,
#management .kp-lead,
.kp-lead{
  max-width:74ch;
}
.kp-section__body p{ font-size:17px; line-height:1.72; margin:0 0 15px; }
.kp-section__body p:last-child{ margin-bottom:0 }

/* la bajada, un escalón por encima del cuerpo */
.kp-lead{ font-size:clamp(18px,1rem + .5vw,21px); line-height:1.6; color:#3f5261; }

/* Astra le pone un borde gris a todo blockquote: la cita va limpia */
.kp-quote{
  border:0!important; border-left:0!important;
  padding-left:0!important; padding-right:0!important;
  background:transparent!important;
  font-style:normal;
}
.kp-quote__text{ font-style:italic; }

/* el título de sección, con el acento alineado al texto */
.kp-section__title{ margin-bottom:22px!important; }

/* la ficha del socio también con medida de lectura */
.kp-person__body .kp-section__body{ max-width:70ch; }

/* tarjetas de principios: que la última no quede sola y descolgada */
@media (min-width:768px){
  .kp-principios{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kp-principio:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* ── CAPA 3.2 · LA FUENTE DEL SISTEMA, FUERA DE TODO EL SITIO ─────
   Astra declara la familia del SO en body/button/input/select/textarea,
   y todo lo que Elementor no alcanza cae ahí: el sitio se veía distinto
   en Mac, Windows y Android. Se fija Geist como base real del sitio y
   Castoro queda reservada para display. Dos familias, un sistema. */
body,
body button, body input, body select, body textarea,
.elementor-widget-text-editor, .elementor-widget-heading,
.elementor-icon-list-text, .elementor-button,
.e-n-accordion-item-title-text, .elementor-tab-title{
  font-family:var(--kp-sans);
}
/* los display siguen en la serif institucional */
.kp-collage__title h1, .kp-collage__title h2,
.kp-section__title, .kp-section__title .elementor-heading-title,
.kp-cta-band__title, .kp-quote__text, .kp-person__nombre,
.kp-figure__n{
  font-family:var(--kp-serif)!important;
}

/* medida de lectura afinada: ~68 caracteres reales en Geist */
#perfil-institucional .kp-section__body,
#modelo-de-negocio .kp-section__body,
#trayectoria .kp-section__body,
#vision .kp-section__body,
#management .kp-lead,
.kp-lead{ max-width:56ch; }
.kp-person__body .kp-section__body{ max-width:58ch; }

/* ── CAPA 3.3 · FOOTER ─────────────────────────────────────────────
   Antes las 2 columnas vivían en un contenedor con width:40% (resabio
   de cuando había una tercera con el logo): quedaba 60% del ancho vacío.
   Ahora 4 columnas que ocupan el ancho útil + barra inferior. */
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:40px 32px;
}
[data-elementor-type="footer"] .e-con-inner > .e-con{ min-width:190px; }

/* columna institucional */
.kp-footer__brand p{
  font-family:var(--kp-serif)!important;
  font-size:clamp(17px,.95rem + .35vw,20px)!important;
  line-height:1.5!important;
  color:#fff!important;
  margin:0 0 18px!important;
  max-width:34ch;
  position:relative; padding-top:18px;
}
/* filete de acento arriba del claim */
.kp-footer__brand p::before{
  content:""; position:absolute; left:0; top:0;
  width:42px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--kp-naranja),rgba(248,152,29,.3));
}
.kp-footer__dir p{
  font-size:14px!important; line-height:1.7!important;
  color:rgba(255,255,255,.72)!important; margin:0!important;
}

/* micro-títulos de columna */
.kp-footer__head,
.kp-footer__head .elementor-heading-title{
  font-size:12px!important; font-weight:600!important;
  letter-spacing:.14em!important; text-transform:uppercase!important;
  color:rgba(255,255,255,.62)!important;
  margin:0 0 18px!important;
}

/* enlaces del menú del footer: uno por línea, con desplazamiento en hover */
[data-elementor-type="footer"] .elementor-nav-menu{ display:block!important; }
[data-elementor-type="footer"] .elementor-nav-menu li{ display:block!important; width:100%; }
[data-elementor-type="footer"] .elementor-nav-menu .elementor-item{
  padding:6px 0!important; font-size:15px!important;
  justify-content:flex-start!important;
  transition:color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease-out);
}
[data-elementor-type="footer"] .elementor-nav-menu .elementor-item:hover{
  color:var(--kp-naranja)!important; transform:translateX(4px);
}
/* datos de contacto */
[data-elementor-type="footer"] .elementor-icon-list-item{ margin-bottom:10px!important; }
[data-elementor-type="footer"] .elementor-icon-list-item a,
[data-elementor-type="footer"] .elementor-icon-list-text{ font-size:15px!important; }
[data-elementor-type="footer"] .elementor-icon-list-icon i,
[data-elementor-type="footer"] .elementor-icon-list-icon svg{ color:var(--kp-naranja)!important; fill:var(--kp-naranja)!important; }

/* redes: círculo tenue que se enciende en hover (no blanco pleno) */
[data-elementor-type="footer"] .elementor-social-icon{
  background-color:rgba(255,255,255,.08)!important;
  width:40px!important; height:40px!important;
  border:1px solid rgba(255,255,255,.14);
  transition:background-color var(--kp-t) var(--kp-ease), transform var(--kp-t) var(--kp-ease), border-color var(--kp-t) var(--kp-ease);
}
[data-elementor-type="footer"] .elementor-social-icon i,
[data-elementor-type="footer"] .elementor-social-icon svg{
  color:#fff!important; fill:#fff!important;
}
[data-elementor-type="footer"] .elementor-social-icon:hover{
  background-color:var(--kp-naranja)!important;
  border-color:var(--kp-naranja)!important;
  transform:translateY(-3px);
}
[data-elementor-type="footer"] .elementor-social-icon:hover i,
[data-elementor-type="footer"] .elementor-social-icon:hover svg{ color:#fff!important; fill:#fff!important; }

/* barra inferior */
[data-elementor-type="footer"] > .e-con:last-child > .e-con-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:20px;
}
.kp-footer__copy p{
  font-size:13px!important; color:rgba(255,255,255,.58)!important; margin:0!important;
}
.kp-footer__legales{ text-align:right; }
.kp-footer__legales p{ font-size:13px!important; margin:0!important; }
.kp-footer__legales a{
  color:rgba(255,255,255,.72)!important; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--kp-t) var(--kp-ease), border-color var(--kp-t) var(--kp-ease);
}
.kp-footer__legales a:hover{ color:var(--kp-naranja)!important; border-bottom-color:var(--kp-naranja); }
.kp-footer__legales .kp-sep{ margin:0 12px; color:rgba(255,255,255,.28); }

@media (max-width:767px){
  .kp-footer__legales{ text-align:left; }
  [data-elementor-type="footer"] > .e-con:first-child > .e-con-inner{ gap:32px 20px; }
}

/* ── CAPA 3.4 · EL HERO, EN VOZ DE FIRMA ───────────────────────────
   Geist es una sans de INTERFAZ (Vercel la hizo para producto digital):
   impecable en UI, sin autoridad en un titular institucional. COFCO —la
   referencia del brief— usa serif editorial en su hero por ese motivo.
   Se pasa a Castoro, que ya es la serif de los títulos del sitio, así que
   además unifica la voz. Los ajustes finos son los que hacen la diferencia:
   tracking negativo (los titulares grandes necesitan MENOS espaciado),
   interlineado más ceñido y una sombra de contacto en vez de un halo. */
.kp-hero__text,
.kp-hero__text .l1,
.kp-hero__text .l2{
  font-family:var(--kp-serif)!important;
  font-weight:400!important;
  letter-spacing:-.021em!important;      /* aire justo en tamaño display */
  line-height:1.16!important;            /* las 2 líneas se leen como un bloque */
  text-shadow:0 1px 2px rgba(6,40,62,.34), 0 6px 30px rgba(6,40,62,.30);
  -webkit-font-smoothing:antialiased;
}
/* Castoro tiene ojo medio más chico que Geist: se compensa el tamaño para
   que el bloque conserve la misma presencia y siga entrando en 2 líneas. */
.kp-hero__text{
  font-size:clamp(24px, 18.4px + 1.19vw, 42px)!important;
  max-width:min(1220px, 94vw)!important;
}

/* velo un punto más presente bajo el texto: la serif fina necesita más
   separación del video para no perder contraste */
.kp-hero::after{
  background:
    linear-gradient(180deg, rgba(6,40,62,.46) 0%, rgba(6,40,62,.20) 34%, rgba(6,40,62,.34) 70%, rgba(6,40,62,.58) 100%),
    radial-gradient(ellipse 74% 58% at 50% 48%, rgba(6,40,62,.34) 0%, rgba(6,40,62,.56) 100%);
}

/* el CTA queda en la sans: contraste serif/sans deliberado */
.kp-cta{ font-family:var(--kp-sans)!important; letter-spacing:.02em; }

/* ── CAPA 3.5 · FOOTER: las 4 columnas en una sola fila ────────────
   Los anchos (34+20+26+20) sumaban 100% y el gap de 32px las desbordaba,
   así que "Seguinos" hacía wrap y caía debajo de la institucional.
   Con flex-basis y un gap contemplado, entran las cuatro. */
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con{
  width:auto!important;
  flex:0 1 auto!important;
}
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(1){ flex-basis:32%!important; }
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(2){ flex-basis:18%!important; }
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(3){ flex-basis:26%!important; }
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(4){ flex-basis:16%!important; }
[data-elementor-type="footer"] > .e-con:first-child > .e-con-inner{
  flex-wrap:nowrap!important;
  gap:0 28px!important;
}
/* en tablet y mobile sí conviene que envuelvan */
@media (max-width:1024px){
  [data-elementor-type="footer"] > .e-con:first-child > .e-con-inner{
    flex-wrap:wrap!important; gap:36px 28px!important;
  }
  [data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(1){ flex-basis:100%!important; }
  [data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con:nth-child(n+2){ flex-basis:28%!important; }
}
@media (max-width:600px){
  [data-elementor-type="footer"] > .e-con:first-child > .e-con-inner > .e-con{ flex-basis:100%!important; }
}

/* las 4 redes del footer, en una sola línea */
[data-elementor-type="footer"] .elementor-social-icons-wrapper{
  display:flex!important; flex-wrap:nowrap!important; gap:10px!important;
}
[data-elementor-type="footer"] .elementor-social-icon{
  width:38px!important; height:38px!important; margin:0!important;
}
[data-elementor-type="footer"] .elementor-grid-item{ margin:0!important; }

/* ── CAPA 3.6 · CORRECCIONES DE REVISIÓN (17-ago) ──────────────────

   1 · ACORDEÓN: el título desaparecía al abrirlo.
   post-464.css pinta el fondo del título de #093654 en :hover y en [open];
   con el texto también en #093654, quedaba azul sobre azul. En vez de
   parchear el color del texto (frágil: depende de qué estado gane), se
   toma control del fondo — el encabezado se mantiene claro SIEMPRE y el
   estado se comunica con el filete naranja y el color del texto. */
.kp-accordion .e-n-accordion-item > .e-n-accordion-item-title,
.kp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.kp-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover,
.kp-accordion .e-n-accordion-item > .e-n-accordion-item-title:focus,
.kp-accordion .e-n-accordion-item:not([open]):hover > .e-n-accordion-item-title{
  background-color:#fff!important;
}
.kp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.kp-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover{
  background-color:#F7F9FA!important;          /* apenas se despega, sin perder contraste */
}
.kp-accordion .e-n-accordion-item-title-text,
.kp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.kp-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{
  color:var(--kp-azul)!important;               /* 12,6:1 sobre claro, en todos los estados */
}
/* el chevron acompaña, en naranja cuando está abierto */
.kp-accordion .e-n-accordion-item-title-icon svg,
.kp-accordion .e-n-accordion-item-title-icon i{ color:var(--kp-azul)!important; fill:var(--kp-azul)!important; }
.kp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon svg,
.kp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon i{
  color:var(--kp-naranja)!important; fill:var(--kp-naranja)!important;
}
/* filete naranja a la izquierda del ítem abierto: el estado se lee sin depender del fondo */
.kp-accordion .e-n-accordion-item[open]{ border-left:3px solid var(--kp-naranja)!important; }

/*  2 · NAVBAR: alineación vertical con el logo + separación del subrayado.
    El padding-bottom de 10px con 0 arriba dejaba el TEXTO corrido hacia
    arriba dentro de su propia caja: la caja quedaba centrada respecto del
    logo, pero el texto no. Ahora el padding es simétrico (el texto queda
    en el centro óptico) y el subrayado se separa con el offset del ::after,
    que no afecta la caja. */
.kp-navbar .elementor-nav-menu > li > a.elementor-item{
  padding-top:8px!important; padding-bottom:8px!important;
  display:inline-flex!important; align-items:center!important;
  line-height:1.4!important;
}
.kp-navbar .elementor-nav-menu{ align-items:center!important; }
.kp-navbar .elementor-nav-menu > li{ display:flex!important; align-items:center!important; }
.kp-navbar .elementor-nav-menu > li > a.elementor-item::after{
  bottom:0!important; height:2px!important;
}

/* barra inferior del footer: copyright y legales en UNA sola línea */
[data-elementor-type="footer"] > .e-con:last-child > .e-con-inner{
  flex-wrap:nowrap!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:24px!important;
}
[data-elementor-type="footer"] > .e-con:last-child > .e-con-inner > .e-con{
  width:auto!important; flex:0 0 auto!important;
}
[data-elementor-type="footer"] > .e-con:last-child > .e-con-inner > .e-con:last-child{ margin-left:auto; }
@media (max-width:600px){
  [data-elementor-type="footer"] > .e-con:last-child > .e-con-inner{
    flex-wrap:wrap!important; justify-content:flex-start!important;
  }
  [data-elementor-type="footer"] > .e-con:last-child > .e-con-inner > .e-con:last-child{ margin-left:0; }
}

/* ── FICHA DE SOCIO (página Management) ────────────────────────── */
.kp-socio{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,64px); align-items:start;
  padding:clamp(38px,4vw,58px) 0;
  border-top:1px solid var(--kp-gris-bc);
}
.kp-socio:first-of-type{ border-top:0; }
.kp-socio__head{ position:sticky; top:130px; }
.kp-socio__nombre{
  font-family:var(--kp-serif)!important; font-weight:400!important;
  font-size:clamp(24px,1.3rem + .85vw,34px)!important;
  line-height:1.15!important; color:var(--kp-azul)!important;
  margin:0 0 10px!important; letter-spacing:-.015em;
}
.kp-socio__rol{
  display:inline-block; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--kp-naranja);
  padding-bottom:14px; border-bottom:2px solid rgba(248,152,29,.35);
}
.kp-socio__creds{ list-style:none; margin:18px 0 0; padding:0; }
.kp-socio__creds li{
  position:relative; padding-left:16px; margin-bottom:7px;
  font-size:13.5px; line-height:1.5; color:var(--kp-gris-texto);
}
.kp-socio__creds li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--kp-naranja);
}
.kp-socio__bio{ max-width:62ch; }
.kp-socio__bio p{ font-size:16.5px; line-height:1.75; margin:0 0 14px; }
@media (max-width:900px){
  .kp-socio{ grid-template-columns:1fr; gap:20px; }
  .kp-socio__head{ position:static; }
}

/* ── HERO: separación real entre el texto y el CTA ─────────────────
   El bloque de texto es un <p> y Astra le aplica margin-bottom 1.75em
   (56,86px a 42px de tipografía). Sumado al gap de 44px del contenedor
   daban 101px de hueco, que además corría el texto fuera del centro
   vertical del hero — y el brief pide el bloque "centrado en el viewport,
   horizontal y verticalmente respecto del hero".
   El brief no fija una distancia al CTA: sólo pide que vaya "debajo del
   bloque de texto, centrado". Se deja una sola fuente de separación (el
   gap del contenedor) para que sea predecible. */
.kp-hero__text{ margin:0!important; }
.kp-hero__inner{ gap:clamp(22px,2.6vw,38px)!important; }

/* ══════════════════════════════════════════════════════════════════
   KAPLUN PARTNERS · CAPA MOBILE (17-ago-2026)
   TODO acá adentro vive en media queries: el desktop no se toca.
   Breakpoints: 1024px (tablet) · 767px (mobile) · 480px (chico)
   ══════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ─────────────────────────────────────────── */
@media (max-width:1024px){
  /* el parallax de las bandas no funciona en iOS y provoca saltos */
  .kp-cta-band{ background-attachment:scroll!important; }
  .kp-person{ grid-template-columns:1fr!important; }
  .kp-person__foto{ position:static!important; max-width:320px; }
  .kp-socio{ grid-template-columns:1fr!important; gap:18px!important; }
  .kp-socio__head{ position:static!important; }
}

/* ── MOBILE (≤767px) ──────────────────────────────────────────── */
@media (max-width:767px){

  /* 1 · MARGEN LATERAL CONSISTENTE
     Los bloques que salen por shortcode nacen a 100% y tocaban los bordes
     de la pantalla, mientras el resto del contenido sí respetaba 20px. */
  .kp-figures,
  .kp-principios,
  .kp-cards,
  .kp-quote,
  .kp-person,
  .kp-socio,
  .kp-statement,
  .kp-lead{
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box;
  }
  .kp-section__body{ padding-left:0!important; padding-right:0!important; }

  /* 2 · HERO
     Alto contenido: el CTA tiene que entrar sin scroll también acá. */
  .kp-hero{
    min-height:clamp(460px, calc(100svh - 64px), 620px)!important;
  }
  .kp-hero__inner{ gap:26px!important; padding:28px 22px!important; }
  .kp-hero__text{
    font-size:clamp(21px, 5.4vw, 27px)!important;
    line-height:1.26!important;
    letter-spacing:-.012em!important;   /* la serif necesita menos tracking negativo en chico */
    max-width:100%!important;
  }
  /* el indicador de scroll compite con el CTA en pantallas cortas */
  .kp-hero__scroll{ display:none!important; }

  /* 3 · COLLAGE de páginas internas: proporción más vertical y título legible */
  .kp-collage{
    height:clamp(320px, 74vw, 420px)!important;
    grid-template-rows:minmax(0,52fr) minmax(0,48fr)!important;
    gap:3px!important;
  }
  .kp-collage__title h1,
  .kp-collage__title h2{
    font-size:clamp(26px, 7.4vw, 34px)!important;
    line-height:1.14!important;
  }
  .kp-collage__sub{ font-size:15px!important; margin-top:10px!important; }

  /* 4 · CIFRAS: 2×2 en vez de una columna larguísima */
  .kp-figures{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:26px 16px!important;
  }
  .kp-figure + .kp-figure::before{ display:none!important; }
  .kp-figure{ text-align:left!important; padding:0!important; }
  .kp-figure__n{ font-size:34px!important; }
  .kp-figure__l{ font-size:13px!important; margin-top:6px!important; }
  /* línea divisoria sutil entre filas */
  .kp-figure:nth-child(-n+2){ padding-bottom:22px!important; border-bottom:1px solid var(--kp-gris-bc); }

  /* 5 · TAP TARGETS ≥44px (WCAG 2.5.8 / Apple HIG)
     Íconos sociales del top bar y del footer, y los enlaces "Ver más". */
  .kp-social .elementor-social-icon,
  [data-elementor-type="header"] .elementor-social-icon{
    width:42px!important; height:42px!important;
    display:inline-flex!important; align-items:center; justify-content:center;
  }
  [data-elementor-type="footer"] .elementor-social-icon{
    width:44px!important; height:44px!important;
  }
  [data-elementor-type="footer"] .elementor-social-icons-wrapper{ gap:12px!important; }
  /* botones de texto de la home ("Ver más", "Ver") */
  .elementor-button{
    min-height:44px!important;
    display:inline-flex!important; align-items:center; justify-content:center;
    padding-top:11px!important; padding-bottom:11px!important;
  }
  /* enlaces del menú del footer, más aire para el dedo */
  [data-elementor-type="footer"] .elementor-nav-menu .elementor-item{
    padding-top:11px!important; padding-bottom:11px!important;
  }
  [data-elementor-type="footer"] .elementor-icon-list-item{ margin-bottom:14px!important; }

  /* 6 · CARDS: una columna, con aire interno cómodo */
  .kp-cards{ grid-template-columns:1fr!important; gap:14px!important; }
  .kp-card{ padding:22px 20px!important; }
  .kp-card__icon{ width:38px!important; height:38px!important; }
  .kp-card__title{ font-size:17px!important; }
  .kp-card__desc{ font-size:14.5px!important; }

  /* 7 · SECCIONES: ritmo vertical más compacto */
  #perfil-institucional,#modelo-de-negocio,#enfoque,
  #management,#trayectoria,#vision{
    padding-top:44px!important; padding-bottom:44px!important;
  }
  .kp-section__title,
  .kp-section__title .elementor-heading-title{
    font-size:clamp(22px,6.2vw,27px)!important;
    margin-bottom:16px!important; padding-left:14px!important;
  }
  .kp-section__body p{ font-size:16px!important; line-height:1.7!important; }
  .kp-lead{ font-size:17px!important; line-height:1.6!important; }

  /* 8 · CITA institucional */
  .kp-quote{ padding:34px 20px!important; }
  .kp-quote__text{ font-size:clamp(19px,5.4vw,23px)!important; line-height:1.38!important; }
  .kp-quote::before{ margin-bottom:18px!important; }

  /* 9 · BANDAS DE CTA */
  .kp-cta-band{ min-height:auto!important; padding:52px 22px!important; }
  .kp-cta-band__title{ font-size:clamp(23px,6.2vw,28px)!important; }
  .kp-cta-band__text{ font-size:15.5px!important; margin-bottom:22px!important; }

  /* 10 · PRINCIPIOS */
  .kp-principios{ grid-template-columns:1fr!important; gap:12px!important; }
  .kp-principio{ padding:15px 18px 15px 42px!important; font-size:15px!important; }
  .kp-principio::before{ left:18px!important; top:21px!important; }

  /* 11 · ACORDEÓN: encabezado cómodo y contenido legible */
  .kp-accordion summary{
    padding:16px 18px!important;
    font-size:16px!important; line-height:1.35!important;
  }
  .kp-accordion .e-n-accordion-item{ margin-bottom:10px!important; }

  /* 12 · FICHA DE SOCIO */
  .kp-socio{ padding-top:30px!important; padding-bottom:30px!important; }
  .kp-socio__nombre{ font-size:24px!important; }
  .kp-socio__bio p{ font-size:15.5px!important; line-height:1.7!important; }
  .kp-socio__creds li{ font-size:13px!important; }

  /* 13 · FORMULARIO: campos cómodos, sin zoom automático en iOS
     (iOS hace zoom si el input mide menos de 16px) */
  .kp-form input[type=text],
  .kp-form input[type=email],
  .kp-form textarea{
    font-size:16px!important;
    padding:14px 15px!important;
  }
  .kp-form button[type=submit]{ width:100%!important; min-height:50px!important; }
  .kp-form__note{ font-size:12px!important; }

  /* 14 · FOOTER: columnas apiladas con jerarquía */
  [data-elementor-type="footer"] > .e-con:first-child{
    padding-top:48px!important; padding-bottom:40px!important;
  }
  .kp-footer__brand p{ font-size:18px!important; max-width:100%!important; }
  .kp-footer__head,
  .kp-footer__head .elementor-heading-title{ margin-bottom:12px!important; }
  [data-elementor-type="footer"] > .e-con:last-child > .e-con-inner{
    gap:12px!important; padding-top:18px!important;
  }
  .kp-footer__copy p,.kp-footer__legales p{ font-size:12.5px!important; }
  /* los enlaces legales son texto inline: se les da altura táctil */
  .kp-footer__legales a{
    display:inline-block; padding:12px 2px!important; line-height:1.2;
  }
  .kp-footer__legales .kp-sep{ margin:0 6px!important; }

  /* 15 · MENÚ MÓVIL de Elementor: panel a ancho completo y buen tacto */
  .kp-navbar .elementor-nav-menu--dropdown{
    border-radius:0!important; margin-top:0!important;
    box-shadow:0 18px 40px rgba(9,54,84,.18)!important;
  }
  /* Nota de especificidad: la regla de desktop es
     `.kp-navbar .elementor-nav-menu > li > a.elementor-item` (0,4,1). Para que
     el mobile la gane hay que igualar o superar esa especificidad, no alcanza
     con que venga después ni con !important. */
  .kp-navbar .elementor-nav-menu--dropdown > li > a.elementor-item,
  .kp-navbar .elementor-nav-menu--dropdown > li > a.elementor-sub-item,
  .kp-navbar .elementor-nav-menu--dropdown li a.elementor-item,
  .kp-navbar .elementor-nav-menu--dropdown li a.elementor-sub-item{
    padding-top:15px!important; padding-bottom:15px!important;
    padding-left:22px!important; padding-right:22px!important;
    font-size:16px!important;
    border-radius:0!important;
    min-height:48px; display:flex!important; align-items:center!important;
  }
  .kp-navbar .elementor-nav-menu--dropdown li a.elementor-sub-item{
    padding-left:34px!important; font-size:15px!important;
  }
  .kp-navbar .elementor-menu-toggle{
    width:46px!important; height:46px!important;
    display:flex!important; align-items:center; justify-content:center;
  }
}

/* ── MOBILE CHICO (≤480px) ────────────────────────────────────── */
@media (max-width:480px){
  .kp-hero__text{ font-size:clamp(19px,5.6vw,23px)!important; }
  .kp-figures{ gap:22px 14px!important; }
  .kp-figure__n{ font-size:30px!important; }
  .kp-collage{ height:clamp(280px,72vw,360px)!important; }
  .kp-cta-band{ padding:44px 20px!important; }
}

/* ── MENÚ MÓVIL: el selector correcto ──────────────────────────────
   El panel desplegable de Elementor en mobile NO usa
   `.elementor-nav-menu--dropdown` para los ítems: los renderiza dentro
   de `.elementor-nav-menu.sm-vertical`. Apuntando al selector equivocado
   los ítems quedaban en 42px (por debajo del mínimo táctil de 44px). */
@media (max-width:767px){
  .kp-navbar .elementor-nav-menu.sm-vertical > li > a.elementor-item,
  .kp-navbar .elementor-nav-menu.sm-vertical > li > a.elementor-sub-item,
  .kp-navbar .elementor-nav-menu.sm-vertical li a{
    padding-top:15px!important; padding-bottom:15px!important;
    padding-left:22px!important; padding-right:22px!important;
    min-height:50px!important;
    display:flex!important; align-items:center!important;
    font-size:16px!important;
    border-radius:0!important;
  }
  .kp-navbar .elementor-nav-menu.sm-vertical li a.elementor-sub-item{
    padding-left:36px!important; font-size:15px!important;
    color:var(--kp-azul)!important; opacity:.9;
  }
  /* separador sutil entre ítems del menú móvil */
  .kp-navbar .elementor-nav-menu.sm-vertical > li + li{
    border-top:1px solid rgba(9,54,84,.08);
  }
  /* el ítem activo, marcado con el acento institucional */
  .kp-navbar .elementor-nav-menu.sm-vertical li a.elementor-item-active{
    box-shadow:inset 3px 0 0 var(--kp-naranja);
    font-weight:600!important;
  }
}

/* ── MENÚ MÓVIL: anular el min-width del panel de escritorio ───────
   La capa de escritorio le da al dropdown `min-width:248px` (correcto para
   el submenú flotante de "Quiénes somos"). En mobile ese mismo nodo es el
   panel del menú hamburguesa y quedaba en 248px en vez de ocupar el ancho. */
@media (max-width:767px){
  /* OJO: el ancho del panel lo resuelve Elementor con la opción del widget
     "Full Width" (full_width:stretch), que YA está activada — regla fija de
     Franco para todo header. Forzar width/left/right acá lo colapsaba al
     ancho del botón hamburguesa. Sólo se anula el min-width de escritorio. */
  .kp-navbar .elementor-nav-menu--dropdown,
  .kp-navbar nav.elementor-nav-menu--dropdown{
    min-width:0!important;
    margin-top:0!important;
    border-radius:0!important;
    border-left:0!important; border-right:0!important;
    padding:0!important;
  }
  /* el submenú anidado dentro del panel móvil no debe flotar */
  .kp-navbar .elementor-nav-menu--dropdown .sub-menu{
    min-width:0!important; width:100%!important;
    box-shadow:none!important; border:0!important;
    border-radius:0!important; margin:0!important;
    background:rgba(9,54,84,.03)!important;
  }
}