/* =========================================================================
   KENAI — Sistema de diseño para WordPress/Elementor
   Portado del sitio original en React (tema híbrido claro + secciones oscuras).
   Colores de marca, tipografía DM Sans y clases de efecto reutilizables
   (aplicables desde el campo "CSS Classes" de Elementor).
   ========================================================================= */

:root {
  --bg:        #dfe3ea;   /* base clara (no blanca) */
  --bg-2:      #eceff4;
  --bg-3:      #e2e6ec;
  --card:      #ffffff;
  --card-2:    #eef1f6;
  --line:      rgba(28, 28, 42, 0.12);
  --line-2:    rgba(28, 28, 42, 0.18);

  --text:      #1c1c2a;
  --muted:     rgba(28, 28, 42, 0.64);
  --faint:     rgba(28, 28, 42, 0.46);

  --accent:    #67bcbe;   /* teal claro (rellenos, botones, hover) */
  --accent-2:  #2f8f93;   /* teal oscuro (texto/enlaces sobre claro) */
  --accent-lo: rgba(103, 188, 190, 0.14);

  --teal:      #3d7a7f;   /* teal del logo */
  --teal-2:    #5aa3a8;

  --success:   #4caf50;
  --warning:   #ffb74d;
  --error:     #ef5350;

  --maxw:      1240px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --font:      'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Tipografía global: DM Sans en TODO Elementor (los widgets usan estas
   variables globales; el kit las dejaba vacías → salía Sans-serif del sistema). */
:root,
body.elementor-kit-4,
.elementor-widget {
  --e-global-typography-primary-font-family: 'DM Sans';
  --e-global-typography-secondary-font-family: 'DM Sans';
  --e-global-typography-text-font-family: 'DM Sans';
  --e-global-typography-accent-font-family: 'DM Sans';
}
/* Refuerzo directo por si algún widget no hereda la variable */
body, .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor,
.elementor-widget-button .elementor-button, .elementor-nav-menu a, .elementor-icon-box-title,
.elementor-icon-box-description, input, textarea, select, .elementor-field-group label {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Ancho del contenedor = 1240px (como el .container de React), con 28px de padding */
.e-con.e-con-boxed > .e-con-inner { max-width: 1240px; }
.kenai-header > .e-con-inner { max-width: 1240px; }

/* ---------- Base tipográfica ---------- */
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
a { color: var(--accent-2); }
.kenai-accent, .accent { color: var(--accent-2); }

/* Color de títulos: oscuro por defecto (Elementor los pone teal si no) */
.elementor-widget-heading .elementor-heading-title { color: var(--text); }
/* En secciones oscuras, títulos claros (mayor especificidad para ganar al default) */
.on-brand .elementor-widget-heading .elementor-heading-title,
.on-brand-rev .elementor-widget-heading .elementor-heading-title,
.on-dark .elementor-widget-heading .elementor-heading-title,
.kenai-cta .elementor-widget-heading .elementor-heading-title,
.kenai-hero .elementor-widget-heading .elementor-heading-title { color: #eef0f5; }
.on-brand .accent, .on-brand-rev .accent, .on-dark .accent, .kenai-cta .accent, .kenai-hero .accent { color: #8fd6d8; }
/* Las tarjetas blancas mantienen títulos oscuros aunque estén en sección oscura */
.kenai-card .elementor-widget-heading .elementor-heading-title { color: var(--text); }

/* ---------- Botones de Elementor (estilo de marca global) ---------- */
.elementor-button {
  border-radius: 0 !important; font-family: var(--font) !important; font-weight: 700 !important;
  font-size: 15px !important; padding: 14px 26px !important;
  background-color: var(--accent) !important; color: #10131a !important;
  border: 1px solid transparent !important;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease) !important;
}
.elementor-button:hover, .elementor-button:focus {
  transform: scale(1.07); filter: brightness(1.1); color: #10131a !important; background-color: var(--accent) !important;
}
/* Flecha al final del botón (clase .kenai-btn--arrow) */
.kenai-btn--arrow .elementor-button-text::after { content: '  →'; white-space: pre; }
/* Variante fantasma (clase .kenai-btn--ghost en el widget botón) */
.kenai-btn--ghost .elementor-button {
  background-color: transparent !important; color: var(--text) !important; border-color: var(--line-2) !important;
}
.kenai-btn--ghost .elementor-button:hover { border-color: var(--accent) !important; background-color: transparent !important; }
/* En secciones oscuras, el fantasma va en claro */
.on-brand .kenai-btn--ghost .elementor-button,
.on-brand-rev .kenai-btn--ghost .elementor-button,
.on-dark .kenai-btn--ghost .elementor-button,
.pacha-hero .kenai-btn--ghost .elementor-button,
.kenai-hero .kenai-btn--ghost .elementor-button { color: #fff !important; border-color: rgba(255,255,255,0.34) !important; }
.pacha-hero .kenai-btn--ghost .elementor-button:hover { border-color: var(--accent) !important; background: transparent !important; }
.kenai-hero .kenai-btn--ghost .elementor-button:hover { border-color: var(--accent) !important; background: transparent !important; }

/* ---------- Zoom continuo del hero (Ken Burns) ---------- */
@keyframes kenaiHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}
/* Aplica a la imagen/fondo del hero. Clase .kenai-hero en la sección de Elementor:
   anima su capa de fondo. */
.kenai-hero-zoom { animation: kenaiHeroZoom 24s ease-in-out infinite alternate; will-change: transform; }
.kenai-hero.elementor-section .elementor-background-overlay,
.kenai-hero .elementor-motion-effects-layer {
  animation: kenaiHeroZoom 24s ease-in-out infinite alternate;
}

/* ---------- Hero (imagen de fondo en cover + alto) ---------- */
.kenai-hero {
  position: relative;
  min-height: 82vh !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: flex; align-items: center;
}
/* Split: oscuro a la izquierda, imagen a la derecha */
.kenai-hero-split::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,14,24,0.96) 0%, rgba(14,14,24,0.92) 38%, rgba(14,14,24,0.66) 60%, rgba(14,14,24,0.28) 80%, rgba(14,14,24,0.06) 100%),
    linear-gradient(180deg, rgba(14,14,24,0.28), rgba(14,14,24,0.18));
}
/* Contenido por encima del overlay (contenedores flexbox de Elementor) */
.kenai-hero-split::before { z-index: 1; }
.kenai-hero > .e-con-inner,
.kenai-hero > .e-con-inner > .e-con,
.kenai-hero .elementor-widget { position: relative; z-index: 3 !important; }
.kenai-hero-title .elementor-heading-title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.06; font-weight: 700;
}
.kenai-hero .accent { color: #67bcbe; }
.kenai-hero-lead { max-width: 680px !important; }
.kenai-hero-lead p { margin: 0; }
/* Hero del Home más bajo, para que la barra de pilares asome como en React */
.kenai-hero--home { min-height: 72vh !important; }

/* ---------- Iconos SVG de línea (widget HTML) ---------- */
.kenai-ico .elementor-widget-container { line-height: 0; }
.kenai-ico svg { display: block; color: var(--accent-2); }

/* ---------- Barra de pilares (bajo el hero) — igual a React ---------- */
.kenai-pillars { align-items: stretch; }
.kenai-pillar { position: relative; padding: 34px 36px !important; border-left: 1px solid rgba(255,255,255,0.08); transition: background 0.3s var(--ease); }
.kenai-pillar:first-child { border-left: 0; }
.kenai-pillar::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: #67bcbe; transition: width 0.35s var(--ease); }
.kenai-pillar:hover::before { width: 100%; }
.kenai-pillar:hover { background: rgba(255,255,255,0.025); }
.pillar__ic svg { width: 34px; height: 34px; color: #67bcbe; }
.pillar__k .elementor-heading-title { font-size: 18px !important; font-weight: 600; color: #f2f4f8; letter-spacing: -0.01em; }
.pillar__d p { font-size: 14px; line-height: 1.55; color: rgba(224,224,240,0.62); margin: 0; }

/* ---------- Contextos de fondo por sección ----------
   Aplica como CSS Class en la sección de Elementor. */
.on-brand    { background: linear-gradient(100deg, #1e1e2e 0%, #2f5f6b 60%, #3d7a7f 100%) !important; }
.on-brand-rev{ background: linear-gradient(100deg, #3d7a7f 0%, #2f5f6b 42%, #1e1e2e 100%) !important; }
.on-dark     { background: #1e1e2e !important; }
.on-light    { background: var(--bg) !important; }
.on-light-2  { background: var(--bg-2) !important; }

/* Texto claro dentro de contextos oscuros (sin tocar tarjetas .kenai-card) */
.on-brand :is(h1,h2,h3,h4,p,li):not(.kenai-card *),
.on-brand-rev :is(h1,h2,h3,h4,p,li):not(.kenai-card *),
.on-dark :is(h1,h2,h3,h4,p,li):not(.kenai-card *) { color: #eef0f5; }
.on-brand .accent, .on-brand-rev .accent, .on-dark .accent { color: #8fd6d8; }

/* ---------- Tarjeta de soluciones (contenedor .kenai-card) ---------- */
.kenai-card {
  background: var(--card) !important; border: 1px solid var(--line);
  padding: 0 !important; overflow: hidden; align-self: stretch;
  transition: transform 0.35s var(--ease), background 0s, border-color 0.35s var(--ease);
}
.kenai-card:hover { background: var(--accent) !important; border-color: var(--accent); transform: scale(1.08); z-index: 5; }
/* Media 16:10 */
.kenai-card__media { margin: 0 !important; }
.kenai-card__media .elementor-widget-container,
.kenai-card__media figure, .kenai-card__media a { margin: 0 !important; line-height: 0; display: block; }
.kenai-card__media img {
  width: 100% !important; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 28%;
  display: block; border-radius: 0; border-bottom: 1px solid var(--line);
  transition: transform 0.7s var(--ease);
}
.kenai-card:hover .kenai-card__media img { transform: scale(1.06); }
/* Variante logo (PACHA): logo grande, centrado, sobre fondo oscuro; misma altura 16:10 */
.kenai-card__media--logo, .kenai-card__media--logo .elementor-widget-container { width: 100%; }
.kenai-card__media--logo .elementor-widget-container {
  background: #0b0b12; display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line);
}
.kenai-card__media--logo img {
  width: auto !important; max-width: 88%; max-height: 82%;
  aspect-ratio: auto; object-fit: contain; border-bottom: 0;
}
/* Cuerpo */
.kenai-card__body { align-items: flex-start; }
.kenai-card__head { margin-bottom: 2px; }
.kenai-card__icon .elementor-widget-container {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--accent-lo); border: 1px solid rgba(103,188,190,0.25);
}
.kenai-card__icon svg { width: 22px; height: 22px; color: var(--accent-2); }
.kenai-card:hover .kenai-card__icon .elementor-widget-container { background: var(--bg); border-color: var(--bg); }
.kenai-card:hover .kenai-card__icon svg { color: var(--accent); }
.kenai-card__idx .elementor-heading-title { font-size: 24px !important; font-weight: 700; letter-spacing: -0.02em; }
.kenai-card__title .elementor-heading-title { font-size: 1.15rem !important; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.kenai-card__desc, .kenai-card__desc p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.kenai-card__link, .kenai-card__link p { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--accent-2); }
/* Tarjeta de producto suelta (software): 1/3 del ancho, alineada a la izquierda */
.sw-prod { flex: 0 0 32% !important; width: 32% !important; max-width: 380px; }
/* Cabecera de tarjeta de producto (logo + nombre + versión) */
.prod-card__head { margin-bottom: 2px; }
.prod-card__logo { margin: 0 !important; width: 38px !important; flex-shrink: 0; }
.prod-card__logo img { width: 38px !important; height: 38px; object-fit: contain; background: var(--bg-3); border: 1px solid var(--line-2); padding: 5px; display: block; aspect-ratio: auto; }
.prod-card__name .elementor-heading-title { font-size: 17px !important; font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; color: var(--text); }
.prod-card__version p { font-size: 12.5px; color: var(--muted); margin: 0; }
.kenai-card:hover .prod-card__name .elementor-heading-title { color: #10131a; }
.kenai-card:hover .prod-card__version p { color: rgba(18,16,25,0.6); }
.kenai-card:hover .prod-card__logo img { background: var(--bg); border-color: var(--bg); }

/* Estados hover (tarjeta teal) */
.kenai-card:hover .kenai-card__title .elementor-heading-title,
.kenai-card:hover .kenai-card__link, .kenai-card:hover .kenai-card__link p { color: #10131a; }
.kenai-card:hover .kenai-card__desc, .kenai-card:hover .kenai-card__desc p { color: rgba(18,16,25,0.82); }
.kenai-card:hover .kenai-card__idx .elementor-heading-title { color: rgba(18,16,25,0.22) !important; }

/* ---------- Head-row: título a la izquierda + lead a la derecha ---------- */
.kenai-head-row { align-items: flex-end; }
.kenai-head-row > .elementor-widget-heading { flex: 1 1 50%; }
.kenai-headrow-lead { flex: 0 1 auto; max-width: 46ch; align-self: flex-end; }
.kenai-headrow-lead p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; margin: 0; text-align: left; }
@media (max-width: 900px) { .kenai-headrow-lead { max-width: 100%; } }

/* ---------- Títulos de sección grandes (= .h-lg de React) ---------- */
.kenai-h-lg .elementor-heading-title { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.kenai-h-lg .accent { color: var(--accent-2); }

/* ---------- Quiénes somos: media con borde teal + nota ---------- */
.kenai-about-media img,
.kenai-about-media video {
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; display: block;
  border: 2px solid var(--accent); background: var(--bg-3);
}
.kenai-about-media .elementor-widget-container { line-height: 0; }
.kenai-about-note { background: var(--accent) !important; }
.kenai-about-note .kenai-note-k .elementor-heading-title { color: #10131a; font-weight: 600; font-size: 17px; line-height: 1.15; }
.kenai-about-note .kenai-note-v p { color: rgba(18,16,25,0.8); font-size: 14px; margin: 0; }

/* ---------- Tarjeta de servicio (consultoría): icono+número, título, texto, barra ---------- */
.svc-card { align-items: flex-start; }
.svc-card__top { margin-bottom: 14px; align-self: stretch; }
.svc-card__icon .elementor-widget-container {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--accent-lo); border: 1px solid rgba(103,188,190,0.22);
}
.svc-card__icon svg { width: 24px; height: 24px; color: var(--accent-2); }
.svc-card__n .elementor-heading-title { font-size: 28px !important; font-weight: 700; color: rgba(28,28,42,0.12); }
.svc-card__title .elementor-heading-title { font-size: 1.2rem !important; font-weight: 600; color: var(--text); }
.svc-card__desc, .svc-card__desc p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.svc-card__bar { min-height: 2px !important; height: 2px; width: 40px; background: var(--accent); margin-top: 14px; flex: 0 0 auto; transition: width 0.4s var(--ease), background 0.3s; }
.svc-card:hover .svc-card__title .elementor-heading-title { color: #10131a; }
.svc-card:hover .svc-card__desc, .svc-card:hover .svc-card__desc p { color: rgba(18,16,25,0.82); }
.svc-card:hover .svc-card__icon .elementor-widget-container { background: var(--bg); border-color: var(--bg); }
.svc-card:hover .svc-card__icon svg { color: var(--accent); }
/* Tarjetas de "Nuestros valores" (Nosotros): tarjeta BLANCA sobre el degradado */
.kenai-value { background: var(--card) !important; border: 1px solid var(--line); align-items: flex-start; transition: transform 0.35s var(--ease), background 0s, border-color 0.35s var(--ease); }
.kenai-value:hover { background: var(--accent) !important; border-color: var(--accent); transform: scale(1.06); }
.value__ic { margin-bottom: 10px; }
.value__ic .elementor-widget-container { width: 50px; height: 50px; display: grid; place-items: center; background: var(--accent-lo); border: 1px solid rgba(103,188,190,0.22); }
.value__ic svg { width: 24px; height: 24px; color: var(--accent-2); }
.kenai-value .value__k .elementor-heading-title { font-size: 1.15rem !important; font-weight: 600; color: var(--text) !important; }
.kenai-value .value__d p { font-size: 14.5px; line-height: 1.55; color: var(--muted) !important; margin: 0; }
.kenai-value:hover .value__k .elementor-heading-title { color: #10131a !important; }
.kenai-value:hover .value__d p { color: rgba(18,16,25,0.82); }
.kenai-value:hover .value__ic .elementor-widget-container { background: var(--bg); border-color: var(--bg); }
.kenai-value:hover .value__ic svg { color: var(--accent); }
.svc-card:hover .svc-card__n .elementor-heading-title { color: rgba(18,16,25,0.28); }
.svc-card:hover .svc-card__bar { width: 72px; background: var(--bg); }

/* ---------- Tarjeta de blog (post-card) ---------- */
.blog-card { flex: 0 0 48% !important; width: 48% !important; max-width: 620px; }
.post-card__meta { margin-bottom: 2px; align-items: center; }
.post-card__tag .elementor-heading-title {
  font-size: 11.5px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2); background: var(--accent-lo); border: 1px solid rgba(103,188,190,0.25);
  padding: 5px 11px; display: inline-block; line-height: 1;
}
.post-card__date p { font-size: 13px; color: var(--muted); margin: 0; }
.post-card__title .elementor-heading-title { font-size: 1.4rem !important; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--text); }
.post-card__excerpt, .post-card__excerpt p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.kenai-card:hover .post-card__title .elementor-heading-title { color: #10131a; }
.kenai-card:hover .post-card__excerpt, .kenai-card:hover .post-card__excerpt p { color: rgba(18,16,25,0.82); }
.kenai-card:hover .post-card__date p { color: rgba(18,16,25,0.6); }
.kenai-card:hover .post-card__tag .elementor-heading-title { background: var(--bg); color: var(--accent); border-color: var(--bg); }

/* ---------- Contacto: tarjetas de info + panel del formulario ---------- */
.contact__card {
  background: var(--card) !important; border: 1px solid var(--line);
  flex: 0 0 47% !important; max-width: 47%;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.contact__card:hover { border-color: rgba(103,188,190,0.4); transform: translateY(-3px); }
.contact__icon { flex-shrink: 0; }
.contact__icon .elementor-widget-container {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--accent-lo); border: 1px solid rgba(103,188,190,0.22);
}
.contact__icon svg { width: 20px; height: 20px; color: var(--accent-2); }
.contact__k .elementor-heading-title { font-size: 12.5px !important; font-weight: 400; color: var(--muted); }
.contact__v .elementor-heading-title { font-size: 15.5px !important; font-weight: 500; color: var(--text); }
.contact__note { background: var(--card-2) !important; border: 1px solid var(--line); }
.contact__slogan .elementor-heading-title { font-size: 20px !important; font-weight: 500; color: var(--text); }
/* Panel blanco genérico (formulario) */
.kenai-panel { background: var(--card) !important; border: 1px solid var(--line); }
/* Campos del formulario Elementor */
.kenai-panel .elementor-field-group > label { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.kenai-panel .elementor-field-textual {
  border-radius: 0 !important; border: 1px solid var(--line-2) !important; background: var(--bg-2) !important;
  color: var(--text) !important; padding: 12px 14px !important; min-height: 46px;
}
.kenai-panel .elementor-field-textual:focus { border-color: var(--accent) !important; }
.kenai-panel .elementor-button[type="submit"] { width: 100%; justify-content: center; }

/* ---------- CTA "¿Listo para una minería más inteligente?" ---------- */
.kenai-cta { position: relative; overflow: hidden; }
/* Textura del túnel muy tenue sobre el degradado (como cta-band__bg de React) */
.kenai-cta__bgimg { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; pointer-events: none; width: 100% !important; max-width: none !important; }
.kenai-cta__bgimg .elementor-widget-container { position: absolute; inset: 0; }
.kenai-cta__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
/* Constelación de partículas (igual a ParticlesBg de React) */
.kenai-particles-wrap { position: absolute !important; inset: 0; z-index: 1; pointer-events: none; margin: 0 !important; width: 100% !important; max-width: none !important; }
.kenai-particles-wrap .elementor-widget-container, #kenai-cta-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
#kenai-cta-particles canvas { width: 100% !important; height: 100% !important; }
/* Chakana decorativa centrada, detrás del texto */
.kenai-cta-chakana { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; color: var(--teal); opacity: 0.12; pointer-events: none; margin: 0 !important; line-height: 0; }
.kenai-cta-chakana svg { width: 460px; height: 460px; display: block; }
/* Contenido por encima */
.kenai-cta__inner { position: relative; z-index: 2; margin: 0 auto; max-width: 760px !important; width: 100%; }
.kenai-cta__lead { max-width: 600px; margin-left: auto; margin-right: auto; }
.kenai-cta__lead p { color: rgba(224,224,240,0.72); margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.kenai-cta .elementor-widget-text-editor { text-align: center; }

/* ---------- Misión / Visión (Nosotros) ---------- */
.kenai-mv { margin-top: 18px; }
.kenai-mv__item { padding-top: 18px; border-top: 1px solid var(--line-2); }
.kenai-mv__k .elementor-heading-title { font-size: 13px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.kenai-mv__p p { margin: 0; font-size: 15px; color: var(--text); line-height: 1.5; }

/* ---------- Callout "¿Trabajamos juntos?" ---------- */
.kenai-callout {
  background: linear-gradient(120deg, var(--card), var(--card-2)) !important;
  border: 1px solid var(--line-2);
}
.kenai-callout__h .elementor-heading-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.kenai-callout .elementor-widget-button { flex-shrink: 0; }

/* ================= PÁGINA PACHA ================= */
.pacha-hero { position: relative; overflow: hidden; }
.pacha-badge { background: var(--card) !important; border: 1px solid var(--line-2); align-self: flex-start; }
.pacha-badge__img { flex-shrink: 0; margin: 0 !important; }
.pacha-badge__img img { width: 92px !important; height: 92px; object-fit: contain; border: 2px solid var(--accent); background: var(--bg-3); padding: 6px; display: block; }
.pacha-badge__name .elementor-heading-title { font-size: 30px !important; font-weight: 700; letter-spacing: 0.06em; line-height: 1.05; color: var(--text); }
.pacha-badge__ver p { font-size: 13px; color: var(--muted); margin: 0; }
.pacha-hero__title .elementor-heading-title { font-size: clamp(2.4rem, 5.2vw, 4.2rem) !important; letter-spacing: -0.03em; line-height: 1.05; }

/* Comparación */
.compare__col { background: var(--card) !important; }
.compare__col--old { background: var(--card-2) !important; border: 2px solid var(--error); }
.compare__col--new { border: 2px solid var(--accent); }
.compare__tag .elementor-heading-title { font-size: 13px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.compare__tag--on .elementor-heading-title { color: var(--accent-2); }
.compare__vsico svg { width: 28px; height: 28px; color: var(--accent-2); }
.klist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.klist li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text); }
.kx { color: var(--faint); font-weight: 700; flex-shrink: 0; }
.kok { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; background: rgba(76,175,80,0.13); color: var(--success); font-size: 12px; margin-top: 1px; }
.compare__col--new .kok { background: var(--accent-lo); color: var(--accent-2); }

/* Beneficios (tarjetas blancas sobre sección oscura) */
.kenai-benefit { position: relative; background: var(--card) !important; border: 1px solid var(--line); align-items: flex-start; }
.kenai-benefit--accent { border-color: rgba(103,188,190,0.45); }
.benefits__idx .elementor-heading-title { position: absolute; top: 30px; right: 34px; font-size: 15px !important; color: var(--faint) !important; font-weight: 600; }
.kenai-benefit .benefits__t .elementor-heading-title { font-size: clamp(1.4rem,2.4vw,1.9rem) !important; color: var(--text) !important; padding-right: 40px; }
.kenai-benefit .klist li { color: var(--text) !important; font-size: 15.5px; }
.kenai-benefit--accent .kok { background: var(--accent-lo); color: var(--accent-2); }

/* Capturas */
.kenai-shot { background: var(--card) !important; border: 1px solid var(--line); overflow: hidden; align-self: stretch; flex: 0 0 calc((100% - 44px) / 3) !important; max-width: calc((100% - 44px) / 3); }
@media (max-width: 900px) { .kenai-shot { flex: 0 0 calc((100% - 22px) / 2) !important; max-width: calc((100% - 22px) / 2); } }
.kenai-shot .shot__img { margin: 0 !important; }
.kenai-shot .shot__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.shot__t .elementor-heading-title { font-size: 1.05rem !important; color: var(--text) !important; }
.shot__d p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Descarga */
.pacha-download { position: relative; background: var(--bg-2) !important; }
.download__list .klist li { align-items: center; color: var(--text); }
.download__list .kok { background: transparent; color: var(--accent-2); width: auto; height: auto; }
.download__list a { color: var(--accent-2); }

/* Enlace-overlay que hace clicable toda la tarjeta */
.kenai-card { position: relative; }
/* El widget HTML del overlay no debe crear su propio contexto de posicionamiento */
.kenai-card > .e-con-inner { position: static !important; }
.kenai-card > .e-con-inner > .elementor-widget-html,
.kenai-card > .e-con-inner > .elementor-widget-html > .elementor-widget-container { position: static !important; }
.kenai-cardlink { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 6; display: block; }
/* El enlace "Ver más/Ver PACHA/Leer artículo" también clicable (por si acaso) */
.kenai-card__link a { color: inherit; text-decoration: none; position: relative; z-index: 7; }

/* ================= BLOG · DETALLE DEL ARTÍCULO ================= */
.post__head { max-width: 820px !important; align-items: flex-start; }
.post__back p { margin: 0 0 26px; }
.post__back a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent-2); text-decoration: none; }
.post__meta { margin-bottom: 18px; }
.post__date p { font-size: 13.5px; color: var(--faint); margin: 0; }
.post__title .elementor-heading-title { font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2rem, 4.2vw, 3.2rem) !important; line-height: 1.1; }
.post__lead p { margin: 16px 0 0; font-size: 1.2rem; line-height: 1.6; color: var(--muted); }
.post__cover { margin: 48px 0 0 !important; width: 100%; max-width: 1080px; }
.post__cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border: 1px solid var(--line-2); display: block; background: var(--bg-3); }
.post__body { max-width: 760px !important; width: 100%; padding-top: 44px; }
.post__body p { font-size: 17px; line-height: 1.8; color: var(--muted); margin: 0 0 22px; }
.post__body .post__h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 40px 0 16px; }
.post__body .post__quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 0 0 26px; font-size: 1.2rem; line-height: 1.5; color: var(--text); font-style: normal; }
.post__body ul.post__ul { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.post__body ul.post__ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text); }
.post__ul .pok { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 2px; background: var(--accent-lo); color: var(--accent-2); font-size: 12px; }

/* ================= RESPONSIVE (tablet / móvil) ================= */
/* Tablet */
@media (max-width: 1024px) {
  .kenai-shot { flex-basis: calc((100% - 22px) / 2) !important; max-width: calc((100% - 22px) / 2) !important; }
  .sw-prod { flex: 0 0 48% !important; width: 48% !important; max-width: 48%; }
}
/* Móvil */
@media (max-width: 767px) {
  /* Tarjetas que forcé por ancho → una sola columna */
  .sw-prod, .blog-card, .kenai-shot, .contact__card,
  .compare__col, .kenai-benefit, .kenai-value, .svc-card, .kenai-card {
    flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important;
  }
  .compare__vs { display: none !important; }
  /* Head-row (título + texto derecha) → apilar */
  .kenai-head-row > .e-con-inner { flex-wrap: wrap; }
  .kenai-headrow-lead { max-width: 100% !important; text-align: left; align-self: flex-start; }
  /* Misión / Visión → una columna */
  .kenai-mv > .e-con-inner { flex-wrap: wrap; }
  .kenai-mv__item { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  /* Callout "¿Trabajamos juntos?" → apilar texto y botón */
  .kenai-callout > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .kenai-callout .elementor-widget-button { width: 100%; }
  .kenai-callout .elementor-button { width: 100%; justify-content: center; }
  /* Pilares del home → una columna con separador arriba */
  .kenai-pillar { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.08); padding: 26px 24px !important; }
  .kenai-pillar:first-child { border-top: 0; }
  /* Hero: alto cómodo en móvil */
  .kenai-hero, .kenai-hero--home { min-height: 82vh !important; }
  /* CTA: ancho completo del contenido */
  .kenai-cta__inner { max-width: 100% !important; }
  .kenai-cta-chakana svg { width: 320px; height: 320px; }
  /* Badge PACHA: que no se desborde */
  .pacha-badge { width: auto !important; }
  .pacha-badge__img img { width: 72px !important; height: 72px; }
  /* Botones del hero en columna, ancho completo */
  .kenai-hero .kenai-btn .elementor-button,
  .pacha-hero .kenai-btn .elementor-button { width: 100%; justify-content: center; }
  .kenai-hero .e-con[class*="flex"] .elementor-widget-button,
  .pacha-hero .elementor-widget-button { width: 100%; }
}
/* --- Padding lateral de las secciones en pantallas menores a 1240 --- */
@media (max-width: 1240px) {
  [data-elementor-type="wp-page"] .e-con.e-parent > .e-con-inner { padding-left: 24px; padding-right: 24px; }
  .kenai-header > .e-con-inner { padding-left: 20px; padding-right: 20px; }
}

/* --- Header móvil/tablet: menú hamburguesa limpio --- */
@media (max-width: 1024px) {
  .kenai-header { position: relative !important; }
  .kenai-header > .e-con-inner { flex-wrap: nowrap !important; align-items: center; }
  /* Logo: ícono + "KENAI/CONSULTING" SIEMPRE en fila (no apilados) */
  .kenai-header > .e-con-inner > .e-con:first-child,
  .kenai-header > .e-con-inner > .e-con:first-child > .e-con-inner {
    flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; max-width: none !important;
  }
  .kenai-header > .e-con-inner > .e-con:last-child { flex: 0 0 auto !important; width: auto !important; justify-content: flex-end !important; align-items: center; gap: 10px; }
  /* Los contenedores intermedios estáticos → el menú desplegable se posiciona respecto al header */
  .kenai-header > .e-con-inner,
  .kenai-header > .e-con-inner > .e-con:last-child,
  .kenai-header .elementor-widget-nav-menu,
  .kenai-header .elementor-widget-nav-menu > .elementor-widget-container { position: static !important; }
  .kenai-header .elementor-menu-toggle { color: #1c1c2a !important; order: 2; }
  .kenai-header .elementor-widget-button { order: 1; }
  /* Menú desplegable: ancho completo, debajo del header, tema claro */
  .kenai-header nav.elementor-nav-menu--dropdown {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: none !important; margin: 0 !important;
    background: #dfe3ea !important; border-top: 1px solid var(--line);
    box-shadow: 0 14px 26px rgba(0,0,0,0.10); z-index: 999;
  }
  .kenai-header nav.elementor-nav-menu--dropdown .elementor-item {
    color: #1c1c2a !important; padding: 15px 24px !important;
    border-bottom: 1px solid var(--line) !important; border-left: 0 !important; white-space: normal;
  }
  .kenai-header nav.elementor-nav-menu--dropdown .elementor-item:hover,
  .kenai-header nav.elementor-nav-menu--dropdown .current-menu-item .elementor-item { color: var(--accent-2) !important; background: rgba(103,188,190,0.10); }
}
@media (max-width: 560px) {
  /* En teléfonos, el botón se oculta (se navega por el menú) */
  .kenai-header .elementor-widget-button { display: none !important; }
}

/* --- Tamaños de texto en móvil --- */
@media (max-width: 767px) {
  .kenai-hero-title .elementor-heading-title { font-size: 2rem !important; line-height: 1.12; }
  .kenai-hero-lead p, .kenai-hero-lead { font-size: 16px !important; }
  .kenai-h-lg .elementor-heading-title,
  .post__title .elementor-heading-title { font-size: 1.7rem !important; line-height: 1.15; }
  .pacha-hero__title .elementor-heading-title { font-size: 1.9rem !important; }
  .kenai-headrow-lead p { font-size: 15.5px; }
  .post__body p { font-size: 16px; }
  .post__body .post__h2 { font-size: 1.35rem; }
  .post__lead p { font-size: 1.05rem; }
  .benefits__t .elementor-heading-title, .kenai-benefit .benefits__t .elementor-heading-title { font-size: 1.3rem !important; }
  .kenai-callout__h .elementor-heading-title { font-size: 1.4rem !important; }
  /* Padding vertical de secciones compacto en móvil (menos los heroes).
     Elementor usa propiedades lógicas → sobrescribimos las variables. */
  [data-elementor-type="wp-page"] .e-con.e-parent:not(.kenai-hero):not(.pacha-hero):not(.kenai-pillars) {
    --padding-block-start: 32px !important; --padding-block-end: 32px !important;
    padding-block-start: 32px !important; padding-block-end: 32px !important;
  }
  /* Reducir separaciones internas grandes (flex-gap) en móvil */
  [data-elementor-type="wp-page"] .e-con.e-parent > .e-con-inner { row-gap: 22px !important; }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  .contact__card, .kenai-value, .kenai-benefit, .compare__col { padding: 20px !important; }
}

/* ---------- Bordes de comparación ---------- */
.kenai-border-red  { border: 2px solid var(--error) !important; }
.kenai-border-teal { border: 2px solid var(--accent) !important; }

/* ---------- Entrada al scroll (reveal) ---------- */
.kenai-reveal { opacity: 0; translate: 0 44px; transition: opacity 0.8s var(--ease), translate 0.8s var(--ease); }
.kenai-reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .kenai-hero-zoom, .kenai-hero .elementor-background-overlay,
  .kenai-hero .elementor-motion-effects-layer { animation: none; }
  .kenai-reveal { opacity: 1; translate: none; transition: none; }
}

/* ---------- Header (tema claro, sticky, igual al React) ---------- */
.kenai-header {
  position: sticky; top: 0; z-index: 999;
  background: #dfe3ea !important;
  border-bottom: 1px solid var(--line);
  min-height: 78px;
}
.kenai-header > .e-con-inner { min-height: 78px; }
/* Marca en dos líneas, apretadas */
/* Marca: "KENAI" y "CONSULTING" lo más juntas posible */
.kenai-header .e-con:has(> .e-con-inner > .kenai-brand-name) > .e-con-inner { gap: 0 !important; row-gap: 0 !important; }
.kenai-brand-name .elementor-heading-title { line-height: 0.8 !important; margin: 0 !important; }
.kenai-brand-sub { margin-top: -8px !important; }
.kenai-brand-sub .elementor-heading-title { line-height: 0.8 !important; margin: 0 !important; text-transform: uppercase; }
/* Nav + botón: cada uno a su ancho natural, sin solaparse */
.kenai-header > .e-con-inner > .e-con:last-child > .e-con-inner { flex-wrap: nowrap !important; gap: 16px; }
.kenai-header .elementor-widget-nav-menu,
.kenai-header .elementor-widget-button {
  flex-grow: 0 !important; flex-shrink: 0 !important; width: auto !important; max-width: none !important;
}
.kenai-header .elementor-widget-nav-menu .elementor-nav-menu--main { overflow: visible; }
/* Menú */
.kenai-header .elementor-nav-menu { flex-wrap: nowrap !important; }
.kenai-header .elementor-nav-menu a.elementor-item {
  color: rgba(28,28,42,0.64) !important; white-space: nowrap;
  font-weight: 500; padding: 9px 14px !important;
  border: 1px solid transparent; border-radius: 0;
  transition: color 0.2s, border-color 0.2s;
}
.kenai-header .elementor-nav-menu a.elementor-item:hover { color: #1c1c2a !important; }
.kenai-header .elementor-nav-menu .current-menu-item a.elementor-item,
.kenai-header .elementor-nav-menu a.elementor-item-active {
  color: #1c1c2a !important; border-color: var(--accent) !important;
}

/* ---------- Footer (Theme Builder) ---------- */
.kenai-footer a { color: #a3a3bd !important; text-decoration: none; transition: color 0.2s; }
.kenai-footer a:hover { color: #67bcbe !important; }
.kenai-footer h4 { margin-bottom: 6px; }