/*
Theme Name: Trade Hunter
Theme URI: https://tradehunter.com.ec
Author: Trade Hunter / Daniel
Description: Tema a medida de Trade Hunter — agencia de trade marketing y brand experience en Ecuador. Diseño fotográfico inmersivo, rápido y optimizado para SEO y motores de AI.
Version: 7.4.1.1450
Requires PHP: 8.0
License: Propietario
Text Domain: tradehunter
*/

/* ==================================================================
   TRADE HUNTER — Sistema de diseño (línea credenciales: limpio y elegante)
   Verde #57BA47 y gris #707272 extraídos del logo oficial.
   ================================================================== */
:root{
  --verde: #57BA47;          /* verde Trade Hunter */
  --verde-hondo: #3E9930;    /* verde profundo: texto/acentos sobre claro */
  --bosque: #294323;         /* verde bosque: titulares y footer */
  --panel: #EEF6EA;          /* panel verde suave (como en credenciales) */
  --fondo: #FBFBF9;          /* fondo general, blanco cálido de las credenciales */
  --blanco: #FFFFFF;
  --tinta: #30332F;          /* texto principal */
  --gris: #707272;           /* gris corporativo: etiquetas y texto grande */
  --linea: rgba(41,67,35,.14);

  --tipo: "Jost", "Century Gothic", "Avenir Next", sans-serif;
  --z-nav: 50;
  --menu-sticky: 74px;   /* altura real medida del header sticky */
  --curva: cubic-bezier(.16,1,.3,1);

  /* ===== ETAPA 2 — Sistema de tokens ===== */
  /* Color: verde accesible para texto pequeno sobre claro (AA 5.12:1).
     --verde (2.46:1) y --verde-hondo (3.62:1) quedan reservados para
     fondos, cifras grandes, iconos y frases de gran tamano. */
  --verde-texto: #2F7D32;
  --profundo: #12240E;

  /* Tipografia: el display del heroe tiene token propio y NO lo limita el
     maximo de .titulo. Su tamano definitivo se trabaja en la Etapa 4. */
  --display: clamp(2.7rem, 6.4vw, 5rem);
  --h2: clamp(2.35rem, 4vw, 3.4rem);

  /* Espacio: escala de 8 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 88px; --e-10: 112px; --e-11: 128px;

  /* Contenedor y reticula */
  --ancho: 1240px;
  --margen-lateral: 32px;
  --gap-columnas: 24px;

  /* Radios */
  --r-boton: 12px;
  --r-tarjeta: 18px;
  --r-panel: 24px;
  --r-campo: 10px;
  --r-pildora: 999px;

  /* Sombras: borde y contraste antes que sombra */
  --borde: 1px solid rgba(41,67,35,.12);
  --s-imagen: 0 20px 60px rgba(18,36,14,.10);
  --s-flotante: 0 12px 32px rgba(18,36,14,.12);

  /* Transiciones */
  --t-rapida: 180ms var(--curva);
  --t-media: 220ms var(--curva);
  --t-lenta: 420ms var(--curva);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--menu-sticky) + 16px)}
body.admin-bar [id]{scroll-margin-top:calc(var(--menu-sticky) + 48px)}   /* barra de WordPress (32px) visible con sesion iniciada */
@media (max-width:782px){body.admin-bar [id]{scroll-margin-top:calc(var(--menu-sticky) + 62px)}}
body{
  font-family:var(--tipo); color:var(--tinta); background:var(--fondo);
  font-size:17px; line-height:1.60; font-weight:400; -webkit-font-smoothing:antialiased;
}
/* ETAPA 2 — Escala tipografica. Una sola familia: Jost.
   El limite de medida se aplica solo a parrafos narrativos: nunca a tarjetas,
   columnas, pie, cifras, formularios ni componentes compactos. */
.seccion > .contenedor > p,
.articulo .contenido p,
.cabecera-pagina p,
.entrada{max-width:65ch}
.titulo + p, .rotulo + p{margin-top:var(--e-5)}
.rotulo + .titulo{margin-top:var(--e-4)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance; font-weight:600}
p{text-wrap:pretty}
.contenedor{width:min(calc(100% - (var(--margen-lateral) * 2)), var(--ancho)); margin-inline:auto; padding:0}
@media (max-width:1099px){:root{--margen-lateral:24px; --gap-columnas:20px}}
@media (max-width:767px){:root{--margen-lateral:20px; --gap-columnas:16px}}
:focus-visible{outline:3px solid var(--verde-hondo); outline-offset:3px}
.solo-lectura{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Sistema de rótulos (grammar de las credenciales) ---------- */
.rotulo{
  display:block; color:var(--verde-texto); font-weight:600;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--e-4);
}
/* Titular en dos tonos: palabra ligera + palabra en verde, como el deck */
.titulo{font-size:var(--h2); line-height:1.08; letter-spacing:-.02em;
  color:var(--bosque); font-weight:300; max-width:760px}
@media (max-width:767px){.titulo{font-size:clamp(2rem,7vw,2.4rem); line-height:1.12}}
.titulo b{font-weight:700; color:var(--verde-hondo)}
.titulo .enf{font-weight:700}


/* ETAPA 2 — Regla unica de enfasis: Jost 700 + verde. Sin serif, sin cursiva.
   Se mantiene el selector <i> por compatibilidad con marcado antiguo, pero
   el marcado nuevo usa <b class="enf">. Nunca se inclina el texto. */
.titulo i, .titulo .enf, .heroe h1 i, .heroe h1 .enf, .remate h2 i, .remate h2 .enf,
h1 .enf, h2 .enf{
  font-family:inherit; font-style:normal; font-weight:700;
  color:var(--verde-hondo); font-size:inherit; letter-spacing:inherit; line-height:inherit;
}
.heroe h1 i, .heroe h1 .enf, .remate h2 i, .remate h2 .enf{color:var(--verde)}
/* El marcado editorial nunca debe inclinarse */
.articulo .contenido em, .articulo .contenido i:not([class*="icon"]){font-style:normal; font-weight:600}

/* ---------- Header flotante (píldora sobre la foto) ---------- */
.cabecera{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  background:transparent; transition:background .35s, box-shadow .35s;
}
.cabecera.solida{background:rgba(24,40,18,.72); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1); box-shadow:0 4px 20px rgba(10,20,8,.14)}
.cabecera.solida .cabecera__fila{padding:9px 0}
.cabecera__fila{transition:padding .3s}
.cabecera__fila{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.logo{font-weight:700; font-size:1.3rem; letter-spacing:.04em; text-decoration:none; line-height:1; color:#fff; text-transform:uppercase}
.logo em{color:var(--verde); font-style:normal}
.logo img{height:46px; width:auto; display:block; filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
/* Reemplazar por el logo real: <img src="logo-tradehunter-blanco.svg" alt="Trade Hunter — Trade Marketing y Brand Experience" height="40"> */
.nav{
  display:flex; gap:2px; align-items:center;
  background:rgba(18,36,14,.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 8px;
}
.nav a{text-decoration:none; font-weight:500; font-size:.9rem; color:rgba(255,255,255,.9); padding:.5em .95em; border-radius:999px; transition:background .2s, color .2s; white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.14); color:#fff}
.cabecera .boton{background:#fff; border-color:#fff; color:var(--bosque); border-radius:999px; padding:.7em 1.4em; font-size:.92rem; white-space:nowrap}
.cabecera .boton:hover{background:var(--verde); border-color:var(--verde); color:var(--bosque)}
.boton{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  font-weight:600; font-size:15px; line-height:1;
  min-height:52px; padding:0 26px; gap:8px;
  background:var(--verde-texto); color:var(--blanco);
  border-radius:var(--r-boton); border:1px solid var(--verde-texto);
  transition:background var(--t-media), border-color var(--t-media), transform var(--t-media);
}
@media (max-width:767px){.boton{min-height:50px; font-size:16px}}
.boton:focus-visible{outline:3px solid var(--verde-texto); outline-offset:3px}
.boton[aria-disabled="true"], .boton:disabled{opacity:.5; pointer-events:none}
.boton:hover{background:var(--bosque); border-color:var(--bosque); transform:translateY(-1px)}
.boton--vacio{background:transparent; color:var(--verde-texto); border-color:var(--verde-texto)}
.boton--vacio:hover{background:var(--verde-texto); color:var(--blanco)}
.menu-boton{display:none; background:rgba(18,36,14,.4); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px; padding:6px 14px; font-size:1.05rem; cursor:pointer}

/* ---------- Héroe fotográfico total ---------- */
.heroe{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:150px 0 56px; min-height:100svh; display:flex; align-items:center;
}
.heroe__fondo{
  position:absolute; inset:-4%; z-index:0; transition:transform .8s var(--curva);
  background:url('/wp-content/uploads/2026/07/mercaderista-percha-trade-hunter.png') center/cover no-repeat;
  background-color:var(--bosque);
}
/* Overlay verde por encima (de la foto CSS o del canvas WebGL) */
.heroe__fondo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,35,16,.62), rgba(20,35,16,.72)),
    linear-gradient(90deg, rgba(20,35,16,.55), rgba(20,35,16,.15) 55%);
}
/* Canvas WebGL: refracción líquida (la foto viva) */
.heroe__fondo canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
.heroe__fondo.gl{background-image:none}
/* Orbe de vidrio pequeño que marca el cursor (como Cairn) */
.heroe__orbe{
  position:absolute; z-index:2; width:34px; height:34px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), rgba(255,255,255,.12) 45%, rgba(120,200,120,.15));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 4px 14px rgba(10,20,8,.35), inset 0 0 8px rgba(255,255,255,.25);
}
.heroe:hover .heroe__orbe{opacity:1}
@media (hover:none){.heroe__orbe{display:none}}
.heroe .contenedor{position:relative; z-index:2; width:100%}
.heroe h1{
  margin:0 auto; font-size:var(--display); line-height:1.04; font-weight:300;
  letter-spacing:-.012em; max-width:17ch; color:#fff;
}
.heroe h1 b{font-weight:600; color:#fff}
.heroe__bajada{margin:30px auto 0; max-width:720px; font-size:18px; font-weight:500; line-height:1.52; color:rgba(255,255,255,.91)}
.heroe__cta{margin-top:30px; display:flex; gap:15px; flex-wrap:wrap; justify-content:center}
.heroe .boton{background:#fff; border-color:#fff; color:var(--bosque); font-weight:600; font-size:16px; min-height:54px; padding:0 30px; border-radius:14px; box-shadow:none}
.heroe .boton:hover{background:rgba(255,255,255,.88); border-color:rgba(255,255,255,.88); color:var(--bosque); transform:none}
.heroe .boton--vacio{background:rgba(18,36,14,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; border-color:rgba(255,255,255,.45)}
.heroe .boton--vacio:hover{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.8); transform:none}
.heroe .boton:focus-visible{outline:3px solid #fff; outline-offset:3px}
/* Pantallas de poca altura util (~760-800px): se comprimen los espacios
   verticales antes de tocar el tamano del titular. */
@media (min-width:768px) and (max-height:820px){
  .heroe{padding:132px 0 48px}
  .heroe__bajada{margin-top:22px}
  .heroe__cta{margin-top:28px}
}
@media (min-width:768px) and (max-height:760px){
  .heroe h1{font-size:clamp(2.6rem,5.9vw,4.6rem)}   /* -8% sobre el maximo */
  .heroe__bajada{margin-top:20px}
  .heroe__cta{margin-top:24px}
}
.heroe__cifras{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  border-top:1px solid rgba(255,255,255,.2); padding:24px 0;
}
.heroe__cifras .cifra{padding:0 14px; text-align:center; position:relative}
.heroe__cifras .cifra + .cifra::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:rgba(255,255,255,.2)}
.heroe__cifras b{display:block; font-size:clamp(2.5rem,3vw,3rem); font-weight:500; color:#fff; line-height:1.1}
.heroe__cifras span{display:block; margin-top:8px; font-size:15px; line-height:1.3; color:rgba(255,255,255,.7); letter-spacing:.12em; text-transform:uppercase; font-weight:500}
@media (max-width:820px){
  .heroe{padding:150px 0 130px; min-height:auto}
  .heroe__cifras{grid-template-columns:repeat(2,1fr); gap:26px 10px}
  .heroe__cifras .cifra:nth-child(3)::before{display:none}
}
@media (hover:none){.heroe__lente{display:none}}

/* ---------- Banda fotográfica panorámica ---------- */
/* v7.1.4: fondo continuo con el hero. El solape de -20px cae sobre el padding
   inferior vacio de la banda de indicadores, nunca sobre sus textos. */
.banda-foto{background:var(--bosque); padding:0 0 clamp(32px,4vw,56px); margin-top:-28px; position:relative; z-index:2}
.panoramica{
  position:relative; overflow:hidden; z-index:3;
  /* v7.1.4: proporcion natural del archivo (1672x940). La altura la limita el
     viewport menos el menu sticky; el ancho se deduce de la proporcion, de modo
     que la pieza se muestra completa: ni mural ni equipo recortados. */
  /* v7.1.5: encuadre editorial aprobado. 2.18:1 conserva el mural completo y el
     equipo entero, recortando solo el piso sobrante (queda un 8,1% bajo los pies). */
  aspect-ratio:2.18/1; width:auto; height:auto;
  inline-size:min(1240px, calc(100vw - 64px));
  margin-inline:auto; margin-top:0; border-radius:var(--r-panel);
  box-shadow:0 14px 36px rgba(20,35,16,.26);
  background:
    linear-gradient(12deg, rgba(20,35,16,.55), rgba(41,67,35,.25) 45%, rgba(20,35,16,.35)),
    url('/wp-content/uploads/2026/07/trade-hunter-no-somos-una-agencia-mas.png') center 0%/cover no-repeat;
  background-color:var(--bosque);
  display:flex; align-items:flex-end;
}
.panoramica figcaption{
  width:100%; padding:18px 28px; color:#fff; font-size:.82rem;
  background:linear-gradient(transparent, rgba(20,35,16,.5));
}
@media (max-width:760px){
  .heroe{padding:88px 0 72px}
  .heroe__bajada{font-size:17px; line-height:1.5; margin-top:24px}
  .heroe__cta{margin-top:26px; gap:12px}
  .heroe__cta .boton{min-height:52px; width:100%; max-width:100%}
  .panoramica{aspect-ratio:16/10}
}


/* ---------- Tarjetas de vidrio sobre la fotografía (patrón Cairn) ---------- */
@media (max-width:1300px){.panoramica{margin-left:24px; margin-right:24px}}
.vidrio{
  position:absolute; color:#fff; border-radius:var(--r-tarjeta); padding:22px 24px;
  background:rgba(18,36,14,.38); backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,255,255,.28); box-shadow:0 20px 50px rgba(10,20,8,.3);
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--curva), transform .8s var(--curva);
}
.panoramica.activa .vidrio{opacity:1; transform:none; animation:flotar 7s ease-in-out infinite alternate}
/* v7.1.7: el panel se compacta para caber en la franja de muro libre que queda
   entre el final del mural (43% del modulo) y el inicio del equipo (66,5%).
   Medido sobre la fotografia: la banda libre es del 23,5% y el panel ocupa 23,2%. */
.vidrio--medidor{left:3.5%; bottom:33.5%; top:auto; transform:none; width:min(320px,26%); padding:11px 14px}
.vidrio--medidor h4{font-size:11.5px; margin-bottom:6px}
.vidrio--medidor .medidor{margin-top:8px; gap:10px}
.vidrio--medidor .medidor svg{width:46px; height:46px}
/* A 56px el trazo de 8 con extremos redondeados cerraba el hueco del 6%
   y el medidor parecia estar al 100%. Con 6 y extremos rectos, el 94% se lee. */
.vidrio--medidor .medidor .fondo{stroke-width:6}
.vidrio--medidor .medidor .arco{stroke-width:6; stroke-linecap:butt}
.vidrio--medidor .medidor b{font-size:22px}
.vidrio--medidor .medidor span{font-size:11px; line-height:1.2}
.vidrio--medidor .ciudades{flex-wrap:nowrap; gap:6px; margin-top:8px}
.vidrio--medidor .ciudad{font-size:11px; padding:3px 8px; white-space:nowrap}
.panoramica.activa .vidrio--medidor{transform:none}

.vidrio--reporte{right:4%; top:7%; bottom:auto; width:min(340px,28%); transition-delay:.35s; animation-delay:1.2s !important}
@keyframes flotar{from{margin-top:0} to{margin-top:-8px}}
.vidrio h4{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.85); display:flex; justify-content:space-between; gap:10px}
.vidrio h4 .vivo{font-size:.7rem}

/* Medidor circular */
.medidor{display:flex; align-items:center; gap:18px; margin-top:16px}
.medidor svg{width:96px; height:96px; transform:rotate(-90deg)}
.medidor .fondo{fill:none; stroke:rgba(255,255,255,.2); stroke-width:8}
.medidor .arco{fill:none; stroke:var(--verde); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:264; stroke-dashoffset:264; transition:stroke-dashoffset 3s var(--curva) .4s}
.panoramica.activa .arco{stroke-dashoffset:15.8} /* 94% de 264 */
.medidor b{font-size:2rem; font-weight:600; line-height:1}
.medidor span{display:block; font-size:.8rem; color:rgba(255,255,255,.75); margin-top:4px}
.ciudades{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.ciudad{font-size:.78rem; padding:.3em .8em; border-radius:999px; border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.9);
  opacity:0; transition:opacity .5s var(--curva)}
.ciudad::before{content:"✓ "; color:var(--verde); font-weight:700}
.panoramica.activa .ciudad{opacity:1}
.panoramica.activa .ciudad:nth-child(1){transition-delay:1s}
.panoramica.activa .ciudad:nth-child(2){transition-delay:1.25s}
.panoramica.activa .ciudad:nth-child(3){transition-delay:1.5s}
.panoramica.activa .ciudad:nth-child(4){transition-delay:1.75s}

/* Reporte generándose */
.items-reporte{list-style:none; margin-top:14px; display:grid; gap:0}
.items-reporte li{
  padding:9px 0; border-top:1px solid rgba(255,255,255,.14); font-size:.9rem;
  opacity:0; transform:translateX(-8px); transition:opacity .5s var(--curva), transform .5s var(--curva);
}
.items-reporte li::before{content:"✓"; color:var(--verde); font-weight:700; margin-right:10px}
.panoramica.activa .items-reporte li{opacity:1; transform:none}
.panoramica.activa .items-reporte li:nth-child(1){transition-delay:.9s}
.panoramica.activa .items-reporte li:nth-child(2){transition-delay:1.5s}
.panoramica.activa .items-reporte li:nth-child(3){transition-delay:2.1s}
.panoramica.activa .items-reporte li:nth-child(4){transition-delay:2.7s}
.tecleo{margin-top:12px; font-size:.82rem; color:rgba(255,255,255,.75); min-height:1.3em}
.tecleo::after{content:"▌"; color:var(--verde); animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}

@media (max-width:820px){
  .panoramica{aspect-ratio:auto; max-height:none; padding:26px 0 46px; display:block}
  .vidrio{position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
    width:min(480px, calc(100% - 56px)); margin:14px auto 0}
  .vidrio--medidor{transform:none}
  .panoramica.activa .vidrio--medidor{transform:none}
  .panoramica figcaption{position:absolute; bottom:0; left:0}
}
@media (prefers-reduced-motion: reduce){
  .vidrio, .panoramica.activa .vidrio{opacity:1; transform:none; animation:none; transition:none}
  .panoramica.activa .vidrio--medidor{transform:none}

  .arco, .panoramica.activa .arco{stroke-dashoffset:15.8; transition:none}
  .ciudad, .items-reporte li, .panoramica.activa .ciudad, .panoramica.activa .items-reporte li{opacity:1; transform:none; transition:none}
  .tecleo::after{animation:none}
}


/* ---------- Secciones ---------- */
.seccion{padding:80px 0}
.seccion--panel{
  background:linear-gradient(160deg, #EFF7EB, #DEEFD6);
  max-width:1240px; margin:0 auto; border-radius:var(--r-panel);
}
@media (max-width:1300px){.seccion--panel{margin-left:24px; margin-right:24px}}
.seccion--blanca{background:linear-gradient(180deg, var(--fondo), var(--blanco) 16%, var(--blanco) 84%, var(--fondo))}
.entrada{max-width:64ch; margin-top:16px; color:var(--tinta); font-size:1.06rem}

/* ---------- Los 3 pilares de servicio (fotografía + duotono verde) ---------- */
.pilares{margin-top:60px; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:30px}
.pilar{
  background:var(--blanco); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--linea);
  transition:transform .3s var(--curva), box-shadow .3s var(--curva);
}
.pilar:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(41,67,35,.12)}
.pilar__foto{
  /* Overlay unificado para los 3 pilares (v4.2: igualado al nivel BTL, antes Promotoría y
     Logística tenían .4/.28 y se veían demasiado verdes). Ajustar SOLO aquí. */
  --pilar-overlay: linear-gradient(15deg, rgba(20,35,16,.3), rgba(87,186,71,.15));
  aspect-ratio:16/11; position:relative; overflow:hidden;
  background-color:var(--bosque);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.pilar__foto--promo{background-image:var(--pilar-overlay), url('/wp-content/uploads/2026/07/mercaderista-supermercado-trade-hunter.png')}
.pilar__foto--btl{background-image:var(--pilar-overlay), url('/wp-content/uploads/2026/07/activacion-btl-trade-hunter.png')}
.pilar__foto--logis{background-image:var(--pilar-overlay), url('/wp-content/uploads/2026/07/flota-logistica-trade-hunter.png')}

.pilar__foto figcaption{padding:12px 18px; font-size:.78rem; color:#fff; background:linear-gradient(transparent, rgba(20,35,16,.55)); width:100%}
.pilar__cuerpo{padding:26px 28px 30px; display:flex; flex-direction:column; gap:10px; flex:1}
.pilar__cuerpo h3{font-size:1.45rem; color:var(--bosque); font-weight:600}
.pilar__sub{color:var(--verde-hondo); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.pilar__cuerpo > p:not(.pilar__sub){color:var(--tinta); font-size:.98rem; flex:1}
.pilar__cuerpo a{color:var(--verde-hondo); font-weight:600; text-decoration:none; font-size:.95rem}
.pilar__cuerpo a:hover{text-decoration:underline}


/* ---------- Proceso: línea de tiempo (5 etapas) ---------- */
.linea-tiempo{margin-top:64px; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.linea-tiempo::before{content:""; position:absolute; top:26px; left:6%; right:6%; height:2px; background:var(--linea)}
.etapa{padding:0 18px; position:relative}
.etapa__num{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--blanco); border:2px solid var(--verde); color:var(--verde-hondo);
  font-weight:700; font-size:1.15rem; position:relative; z-index:1; margin-bottom:20px;
  transition:background .25s, color .25s, transform .25s var(--curva);
}
.etapa:hover .etapa__num{background:var(--verde-hondo); border-color:var(--verde-hondo); color:#fff; transform:scale(1.08)}
.etapa h3{font-size:1.02rem; color:var(--bosque); font-weight:600; line-height:1.25}
.etapa p{margin-top:8px; font-size:.9rem; color:var(--tinta)}
@media (max-width:900px){
  .linea-tiempo{grid-template-columns:1fr; gap:34px}
  .linea-tiempo::before{top:0; bottom:0; left:25px; right:auto; width:2px; height:auto}
  .etapa{padding-left:78px}
  .etapa__num{position:absolute; left:0; top:0; margin:0}
}

/* ---------- Tecnología / control ---------- */
.control{margin-top:32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start}
.pasos{display:grid; gap:0}
.paso{padding:15px 0; border-top:1px solid var(--linea)}
.paso:last-child{border-bottom:1px solid var(--linea)}
.paso h3{font-size:1.05rem; color:var(--bosque); font-weight:600; letter-spacing:.02em}
.paso h3 i, .paso h3 .enf{font-style:normal; color:var(--verde-hondo); font-weight:700; margin-right:12px}
.paso p{margin-top:4px; color:var(--tinta); font-size:.95rem; max-width:56ch}
.control__visual{
  border-radius:12px; background:var(--blanco); border:1px solid var(--linea);
  padding:26px; box-shadow:0 12px 30px rgba(41,67,35,.07);
}
/* Reemplazar por captura real del dashboard (PICOS / PowerBI), difuminando datos de clientes */
.control__visual .kpi{display:flex; justify-content:space-between; align-items:baseline; padding:14px 4px; border-bottom:1px dashed var(--linea); font-size:.95rem}
.control__visual .kpi:last-child{border-bottom:none}
.control__visual .kpi b{color:var(--verde-hondo); font-size:1.35rem; font-weight:600}
.control__visual figcaption{margin-top:14px; font-size:.8rem; color:var(--gris); letter-spacing:.08em; text-transform:uppercase}
@media (max-width:900px){.control{grid-template-columns:1fr; gap:36px}}


/* ---------- Widget: visita en vivo ---------- */
.visita{
  border-radius:14px; background:var(--bosque); color:#fff; padding:30px 30px 24px;
  box-shadow:0 18px 44px rgba(41,67,35,.18); position:relative; overflow:hidden;
}
.visita::before{content:""; position:absolute; inset:0; background:radial-gradient(400px 200px at 90% -10%, rgba(87,186,71,.25), transparent 60%); pointer-events:none}
.visita__cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.visita__cab strong{font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.85)}
.vivo{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verde)}
.vivo::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--verde); animation:pulso 1.6s infinite}
@keyframes pulso{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.75)}}
.evento{
  display:grid; grid-template-columns:64px 1fr; gap:16px; padding:13px 0;
  border-top:1px solid rgba(255,255,255,.12); align-items:baseline;
  opacity:0; transform:translateY(8px); transition:opacity .6s var(--curva), transform .6s var(--curva);
}
.visita.activa .evento{opacity:1; transform:none}
.visita.activa .evento:nth-child(2){transition-delay:.15s}
.visita.activa .evento:nth-child(3){transition-delay:.9s}
.visita.activa .evento:nth-child(4){transition-delay:1.65s}
.visita.activa .evento:nth-child(5){transition-delay:2.4s}
.evento time{font-variant-numeric:tabular-nums; color:var(--verde); font-weight:600; font-size:.92rem}
.evento b{display:block; font-weight:600; font-size:.98rem}
.evento span{color:rgba(255,255,255,.7); font-size:.88rem}
.visita figcaption{margin-top:16px; font-size:.75rem; color:rgba(255,255,255,.5); letter-spacing:.08em; text-transform:uppercase}
@media (prefers-reduced-motion: reduce){
  .evento{opacity:1; transform:none; transition:none}
  .vivo::before{animation:none}
}


/* Modo monitoreo: los ítems del reporte se revisan en ciclo (mecanismo Cairn) */
@keyframes reglaciclo{0%,100%{opacity:.5} 4%,22%{opacity:1} 30%{opacity:.5}}
.panoramica.activa .items-reporte li{animation:reglaciclo 8s ease-in-out infinite}
.panoramica.activa .items-reporte li:nth-child(1){animation-delay:3.6s}
.panoramica.activa .items-reporte li:nth-child(2){animation-delay:5.6s}
.panoramica.activa .items-reporte li:nth-child(3){animation-delay:7.6s}
.panoramica.activa .items-reporte li:nth-child(4){animation-delay:9.6s}
/* Vida sutil del anillo: respiración lenta permanente */
@keyframes anillovivo{0%,100%{transform:rotate(-90deg) scale(1)} 50%{transform:rotate(-90deg) scale(1.015)}}
.panoramica.activa .medidor svg{animation:anillovivo 7s ease-in-out 2.4s infinite; transform-origin:center}
@media (prefers-reduced-motion: reduce){
  .panoramica.activa .items-reporte li{animation:none; opacity:1}
  .panoramica.activa .medidor svg{animation:none}
}

/* ---------- Proceso: dos tarjetas independientes (composición Cairn) ---------- */
.contenedor-ancho{max-width:1240px; margin:0 auto}
@media (max-width:1300px){.contenedor-ancho{margin-left:24px; margin-right:24px}}
.proceso-panel{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:stretch}
.proc-tarjeta{
  background:
    radial-gradient(560px 320px at 88% -12%, rgba(87,186,71,.2), transparent 60%),
    var(--bosque);
  border-radius:24px; padding:42px 40px; color:#fff;
  box-shadow:0 24px 60px rgba(20,35,16,.2);
}
.proc-tarjeta--curva{
  padding:34px 32px; display:flex; flex-direction:column; justify-content:center;
  /* v4.2: foto vertical de impulso en retail + gradiente direccional:
     arriba ligero (la foto respira), denso hacia abajo (contraste para la nota).
     La legibilidad del gráfico la garantiza su propio panel de vidrio con blur. */
  background:
    linear-gradient(180deg, rgba(18,32,14,.34), rgba(18,32,14,.5) 48%, rgba(18,32,14,.72)),
    url('/wp-content/uploads/2026/07/impulsadora-retail.png') center 30%/cover no-repeat;
  background-color:var(--bosque);
}
/* El gráfico flota en un panel de vidrio sobre la foto (arquitectura Cairn) */
.proc-tarjeta--curva .curva{
  background:rgba(12,24,10,.58); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-tarjeta); padding:22px 22px 16px;
}
.proc-tarjeta--curva .proc-nota{text-shadow:0 1px 8px rgba(10,20,8,.6)}
.proc-nota{margin-top:18px; font-size:.92rem; color:rgba(255,255,255,.7); line-height:1.6}
.rotulo--claro{color:var(--verde)}
.titulo--claro{color:#fff}
.titulo--claro i{color:var(--verde)}
.entrada--clara{color:rgba(255,255,255,.8)}
.etapas{list-style:none; margin-top:30px; position:relative; counter-reset:etapa}
.etapas::before{content:""; position:absolute; left:17px; top:14px; bottom:14px; width:1px; background:rgba(255,255,255,.18)}
.etapa{position:relative; padding:0 0 14px 54px; counter-increment:etapa; opacity:.55; transition:opacity .4s}
.etapa:last-child{padding-bottom:0}
.etapa::before{
  content:counter(etapa); position:absolute; left:0; top:0;
  width:35px; height:35px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); font-size:.9rem; font-weight:600; color:#fff;
  background:var(--bosque);
}
.etapa b{display:block; font-weight:600; font-size:1.02rem}
.etapa span{display:block; margin-top:4px; font-size:.9rem; color:rgba(255,255,255,.72); line-height:1.55}
@keyframes etapaciclo{0%,100%{opacity:.55} 4%,17%{opacity:1} 24%{opacity:.55}}
.proceso-panel.activa .etapa{animation:etapaciclo 12.5s ease-in-out infinite}
.proceso-panel.activa .etapa:nth-child(1){animation-delay:.5s}
.proceso-panel.activa .etapa:nth-child(2){animation-delay:3s}
.proceso-panel.activa .etapa:nth-child(3){animation-delay:5.5s}
.proceso-panel.activa .etapa:nth-child(4){animation-delay:8s}
.proceso-panel.activa .etapa:nth-child(5){animation-delay:10.5s}

/* Gráfico de curva */
.curva{position:relative}
.curva__cab{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}
.curva__cab strong{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.85)}
.curva svg{width:100%; height:auto; display:block}
.curva__pct, .curva__sem{fill:rgba(255,255,255,.5); font-size:11px; text-anchor:end}
.curva__sem{text-anchor:middle}
.curva__metatxt{fill:rgba(255,255,255,.55); font-size:10px; letter-spacing:.12em}
.curva__linea{
  stroke-dasharray:760; stroke-dashoffset:760; transition:stroke-dashoffset 2.4s var(--curva) .4s;
}
.curva.visible .curva__linea{stroke-dashoffset:0}
.curva__area{opacity:0; transition:opacity 1.2s ease 1.6s}
.curva.visible .curva__area{opacity:1}
.curva__punto{opacity:0; transition:opacity .5s ease 1.9s}
.curva.visible .curva__punto{opacity:1}
.curva__chip{
  position:absolute; left:44%; top:26%;
  background:rgba(18,36,14,.85); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:.45em 1em; font-size:.78rem; color:#fff; white-space:nowrap;
  opacity:0; transform:translateY(8px); transition:opacity .6s ease 2.1s, transform .6s ease 2.1s;
}
.curva__chip b{color:var(--verde)}
.curva.visible .curva__chip{opacity:1; transform:none}
.curva figcaption{margin-top:12px; font-size:.72rem; color:rgba(255,255,255,.45); letter-spacing:.08em; text-transform:uppercase}
@media (max-width:980px){
  .proceso-panel{grid-template-columns:1fr; gap:22px}
  .proc-tarjeta{padding:38px 26px}
  .proc-tarjeta--curva{position:static}
  .curva__chip{left:36%}
}
@media (prefers-reduced-motion: reduce){
  .proceso-panel.activa .etapa{animation:none; opacity:1}
  .curva__linea, .curva.visible .curva__linea{stroke-dashoffset:0; transition:none}
  .curva__area, .curva__punto, .curva__chip, .curva.visible .curva__area, .curva.visible .curva__punto, .curva.visible .curva__chip{opacity:1; transform:none; transition:none}
}


/* Compactación: las dos tarjetas del proceso caben en una pantalla */
.proc-tarjeta{padding:36px 36px}
.proc-tarjeta .titulo{font-size:clamp(1.5rem,2.3vw,2rem); margin-top:10px}
.proc-tarjeta .entrada{font-size:.98rem; margin-top:10px}
.proc-tarjeta .etapas{margin-top:22px}
.etapas::before{left:15px}
.etapa{padding:0 0 11px 46px}
.etapa::before{width:30px; height:30px; font-size:.82rem}
.etapa b{font-size:.98rem}
.etapa span{font-size:.88rem; line-height:1.5; margin-top:3px}
.proc-tarjeta--curva{padding:28px 28px}
.proc-nota{font-size:.88rem; margin-top:14px}


/* ---------- Radar de supervisión sobre fotografía (patrón Cairn) ---------- */
.radar{
  position:relative; border-radius:var(--r-tarjeta); overflow:hidden; aspect-ratio:4/4.1; max-height:490px;
  /* v4.5: overlay aligerado al nivel de los pilares de Servicios (.3/.15).
     Se conserva una viñeta sutil solo en bordes para dar profundidad al radar;
     la legibilidad de widgets la garantiza su propio vidrio con blur. */
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 48%, rgba(20,35,16,.38)),
    linear-gradient(15deg, rgba(20,35,16,.3), rgba(87,186,71,.15)),
    url('/wp-content/uploads/2026/07/equipo-impulso-trade-hunter.png') center 35%/cover no-repeat,
    var(--bosque);
  box-shadow:0 18px 44px rgba(41,67,35,.18);
}
.radar__centro{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  background:rgba(18,36,14,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.3rem; letter-spacing:.05em; z-index:3;
}
.radar__centro i{font-style:normal; color:var(--verde)}
.onda{
  position:absolute; left:50%; top:44%; width:340px; height:340px; margin:-170px 0 0 -170px;
  border-radius:50%; border:1px solid rgba(255,255,255,.5); opacity:0; z-index:1;
}
.radar.activa .onda{animation:onda 3.6s var(--curva) infinite}
.radar.activa .onda:nth-of-type(2){animation-delay:1.2s}
.radar.activa .onda:nth-of-type(3){animation-delay:2.4s}
@keyframes onda{0%{transform:scale(.28); opacity:.75} 100%{transform:scale(1.25); opacity:0}}
.nodo{
  position:absolute; width:56px; height:56px; border-radius:50%; z-index:2;
  background:rgba(18,36,14,.38); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.6); transition:opacity .6s var(--curva), transform .6s var(--curva);
}
.nodo svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.radar.activa .nodo{opacity:1; transform:scale(1); animation:flotar 6s ease-in-out infinite alternate}
.nodo--1{left:14%; top:16%} .radar.activa .nodo--1{transition-delay:.5s; animation-delay:.3s}
.nodo--2{right:12%; top:22%} .radar.activa .nodo--2{transition-delay:.9s; animation-delay:1.1s}
.nodo--3{left:10%; top:58%} .radar.activa .nodo--3{transition-delay:1.3s; animation-delay:.7s}
.nodo--4{right:16%; top:60%} .radar.activa .nodo--4{transition-delay:1.7s; animation-delay:1.5s}
.radar__aviso{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:4;
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px;
  background:rgba(18,36,14,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  opacity:0; transform:translateY(16px); transition:opacity .7s var(--curva) 2.2s, transform .7s var(--curva) 2.2s;
}
.radar.activa .radar__aviso{opacity:1; transform:none}
.radar__aviso b{display:block; font-size:.95rem; font-weight:600}
.radar__aviso span{font-size:.82rem; color:rgba(255,255,255,.75)}
.radar__aviso .estado{
  margin-left:auto; background:var(--verde); color:var(--bosque); font-weight:700; font-size:.78rem;
  padding:.45em 1em; border-radius:999px; white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){
  .onda, .radar.activa .onda{animation:none; opacity:.35; transform:scale(.75)}
  .nodo, .radar.activa .nodo{opacity:1; transform:none; animation:none; transition:none}
  .radar__aviso, .radar.activa .radar__aviso{opacity:1; transform:none; transition:none}
}

/* ---------- Diferenciales ---------- */
.diferenciales{margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2px; background:var(--linea); border:1px solid var(--linea); border-radius:12px; overflow:hidden}
.dif{background:var(--blanco); padding:34px 30px}
.dif b{display:block; font-size:2rem; font-weight:600; color:var(--verde-hondo); line-height:1.1}
.dif h3{margin-top:4px; font-size:1.05rem; color:var(--bosque); font-weight:600}
.dif p{margin-top:8px; color:var(--tinta); font-size:.95rem}

/* ---------- Diagnóstico ---------- */
.sintomas{margin-top:48px; max-width:720px}
.sintoma{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--linea); align-items:baseline}
.sintoma:last-of-type{border-bottom:1px solid var(--linea)}
.sintoma .marca{color:var(--verde-hondo); font-weight:700}
.sintoma p{color:var(--tinta)}
.sintoma p b{color:var(--bosque); font-weight:600}
.sintomas__cierre{margin-top:26px; font-size:1.1rem; color:var(--bosque); font-weight:600}

/* ---------- Sectores ---------- */
.sectores{margin-top:44px; display:flex; flex-wrap:wrap; gap:12px}
.sector{
  padding:.55em 1.2em; border:1px solid var(--linea); border-radius:999px;
  background:var(--blanco); color:var(--tinta); font-size:.92rem; font-weight:500;
}

/* ---------- FAQ ---------- */
.faq{margin-top:48px; max-width:820px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 4px; font-weight:600; font-size:1.06rem; color:var(--bosque);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; font-weight:300; color:var(--verde-hondo); transition:transform .25s var(--curva)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq__cuerpo{padding:0 4px 24px; max-width:72ch; color:var(--tinta)}

/* ---------- Cobertura ---------- */
.sedes{margin-top:52px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px}
.sede{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-campo); padding:28px}
.sede h3{font-size:1.35rem; color:var(--verde-hondo); font-weight:600}
.sede p{margin-top:8px; color:var(--tinta); font-size:.95rem}
.sede small{display:block; margin-top:14px; color:var(--gris); text-transform:uppercase; letter-spacing:.12em; font-weight:500; font-size:.72rem}

/* ---------- Cierre ---------- */
.remate{
  /* v4.3: foto de equipo en activación como fondo. Overlay denso porque aquí el texto
     y el CTA mandan; la foto es ambiente. El glow radial verde se conserva encima
     para mantener la identidad de la tarjeta (arquitectura Cairn). */
  background:
    radial-gradient(700px 380px at 80% -10%, rgba(87,186,71,.3), transparent 60%),
    linear-gradient(180deg, rgba(18,32,14,.62), rgba(18,32,14,.74) 55%, rgba(18,32,14,.8)),
    url('/wp-content/uploads/2026/07/remate.png') center 30%/cover no-repeat,
    var(--bosque);
  color:var(--blanco); text-align:center; padding:96px 28px;
  max-width:1240px; margin:0 auto 100px; border-radius:var(--r-panel);
  box-shadow:0 30px 70px rgba(20,35,16,.22);
}
@media (max-width:1300px){.remate{margin-left:24px; margin-right:24px}}
.remate h2{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:300; max-width:24ch; margin:0 auto}
.remate h2 b{font-weight:700; color:var(--verde)}
.remate p{max-width:52ch; margin:18px auto 0; color:rgba(255,255,255,.85)}
.remate .boton{margin-top:34px; background:var(--verde); border-color:var(--verde); color:var(--bosque); font-weight:700}
.remate .boton:hover{background:#6BCB5B; border-color:#6BCB5B; transform:translateY(-1px)}

/* ---------- Footer ---------- */
.pie{background:var(--bosque); color:rgba(255,255,255,.8); padding:72px 0 44px; font-size:.95rem; border-radius:var(--r-panel) 34px 0 0}
.pie__fila{display:flex; flex-wrap:wrap; gap:44px; justify-content:space-between; align-items:flex-start}
.pie a{color:var(--blanco); text-decoration:none}
.pie a:hover{color:var(--verde)}
.pie ul{list-style:none; display:grid; gap:8px}
.pie h4{color:var(--verde); letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-weight:600; font-size:.8rem}
.pie .logo{color:rgba(255,255,255,.85)}
.pie .logo em{color:var(--verde)}
.pie__legal{margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:rgba(255,255,255,.55)}

/* ---------- Revelado sutil ---------- */
/* ETAPA 2 — El contenido SIEMPRE es visible sin JS. La clase .anima la pone
   main.js solo cuando hay IntersectionObserver, y un temporizador de seguridad
   revela todo si algo falla. Desplazamiento de 16px, 460ms. */
.revela{opacity:1; transform:none}
.anima .revela{opacity:0; transform:translateY(16px); transition:opacity 460ms var(--curva), transform 460ms var(--curva)}
.anima .revela.visible{opacity:1; transform:none}

/* ---------- Responsive nav ---------- */
@media (max-width:880px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:rgba(24,40,18,.96); flex-direction:column; align-items:flex-start;
    padding:22px 28px 28px; gap:6px; border-radius:0 0 18px 18px; border:none;
  }
  .nav.abierto{display:flex}
  .menu-boton{display:block}
  .cabecera .boton{display:none}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .anima .revela{opacity:1; transform:none; transition:none}
  .boton, .boton:hover, .servicio:hover{transform:none}
}

/* ---------- Página de noticias ---------- */
.cabecera-pagina{margin-top:-1px; background:
    radial-gradient(700px 380px at 85% -20%, rgba(87,186,71,.25), transparent 60%),
    var(--bosque);
  color:var(--blanco); padding:80px 0 64px}
.cabecera-pagina .rotulo{color:var(--verde)}

/* v4.7: cabecera con foto (solo si el artículo tiene imagen destacada).
   Capas, de arriba hacia abajo:
   1. degradado vertical que oscurece la zona del titular (legibilidad)
   2. tinte verde al mismo nivel que los pilares de Servicios (.3/.15)
   3. la foto
   Si no hay imagen destacada, esta clase no se aplica y queda el verde sólido. */
.cabecera-pagina--foto{
  background:
    linear-gradient(180deg, rgba(18,32,14,.55), rgba(18,32,14,.68) 60%, rgba(18,32,14,.82)),
    linear-gradient(15deg, rgba(20,35,16,.3), rgba(87,186,71,.15)),
    var(--foto-cabecera) center 40%/cover no-repeat,
    var(--bosque);
  padding:110px 0 84px;
}
@media (max-width:760px){
  .cabecera-pagina--foto{padding:72px 0 56px}
}
.cabecera-pagina h1{font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:300; line-height:1.06; max-width:20ch}
.cabecera-pagina h1 b{font-weight:700; color:var(--verde)}
.cabecera-pagina p{margin-top:18px; max-width:56ch; color:rgba(255,255,255,.82)}

.destacado{
  margin-top:-40px; position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-tarjeta); overflow:hidden;
  box-shadow:0 20px 50px rgba(41,67,35,.10);
}
.destacado__foto{min-height:300px; background:
    linear-gradient(15deg, rgba(41,67,35,.5), rgba(87,186,71,.45)),
    linear-gradient(150deg, #9CD48C, #4FA843 60%, #2E5D26);}
.destacado__cuerpo{padding:40px 42px; display:flex; flex-direction:column; gap:16px; justify-content:center}
/* v4.8: el titular se movio sobre la foto; el cuerpo queda con extracto y enlace */
.destacado__cuerpo p{font-size:1.02rem; line-height:1.6}
.destacado__foto{position:relative; display:flex; align-items:flex-end; overflow:hidden; min-height:340px}
.destacado__cuerpo p{color:var(--tinta)}
.destacado__cuerpo a.leer{color:var(--verde-texto); font-weight:600; text-decoration:none}
.destacado__cuerpo a.leer:hover{text-decoration:underline}
@media (max-width:860px){.destacado{grid-template-columns:1fr} .destacado__foto{min-height:200px}}

.chip{display:inline-block; padding:.3em .9em; border-radius:999px; background:var(--panel); color:var(--verde-hondo); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase}

.entradas{margin-top:56px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px}
.entrada-card{
  background:var(--blanco); border:1px solid var(--linea); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s var(--curva), box-shadow .3s var(--curva);
}
.entrada-card:hover{transform:translateY(-5px); box-shadow:0 16px 36px rgba(41,67,35,.10)}
.entrada-card__foto{aspect-ratio:16/10; position:relative; display:flex; align-items:flex-end; overflow:hidden; background:
    linear-gradient(15deg, rgba(41,67,35,.5), rgba(87,186,71,.45)),
    linear-gradient(150deg, #9CD48C, #4FA843 60%, #2E5D26);}

/* ---------- v4.8: título y categoría sobre la foto ---------- */
/* La foto pasa a ser el lienzo: overlay verde al nivel de los pilares (.3/.15)
   más un degradado que oscurece hacia abajo para que el titular blanco se lea.
   Aplica a las tarjetas del índice, a los relacionados y al destacado. */
.entrada-card__foto--img img,
.destacado__foto--img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.entrada-card__foto--img,
.destacado__foto--img{background:none}
.entrada-card__foto--img::after,
.destacado__foto--img::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,32,14,.05) 0%, rgba(18,32,14,.45) 55%, rgba(18,32,14,.85) 100%),
    linear-gradient(15deg, rgba(20,35,16,.3), rgba(87,186,71,.15));
}
.sobre-foto{position:relative; z-index:2; padding:20px 22px; width:100%}
.sobre-foto--dest{padding:28px 30px}
.chip--claro{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); display:inline-block; margin-bottom:10px}
.sobre-foto h2, .sobre-foto h3{color:#fff; line-height:1.28}
.sobre-foto h3{font-size:1.18rem}
.sobre-foto h2{font-size:1.7rem; font-weight:600}
.entrada-card .sobre-foto h3 a, .destacado .sobre-foto h2 a, .sobre-foto h2 a, .sobre-foto h3 a{color:#fff !important; text-decoration:none; text-shadow:0 2px 12px rgba(12,22,9,.75)}
.sobre-foto h2 a:hover, .sobre-foto h3 a:hover{text-decoration:underline}
.entrada-card__cuerpo{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1}
.entrada-card h3{font-size:1.15rem; line-height:1.3; font-weight:600}
.entrada-card h3 a{color:var(--bosque); text-decoration:none}
.entrada-card h3 a:hover{color:var(--verde-hondo)}
.entrada-card p{color:var(--tinta); font-size:.94rem; flex:1}
.entrada-card .leer{color:var(--verde-texto); font-weight:600; font-size:.92rem; text-decoration:none}
.entrada-card .leer:hover{text-decoration:underline}


/* ---------- Trabaja con nosotros ---------- */
.beneficios{margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
.beneficio{background:var(--blanco); border:1px solid var(--linea); border-top:6px solid var(--verde); border-radius:var(--r-campo); padding:28px}
.beneficio h3{color:var(--bosque); font-size:1.1rem; font-weight:600}
.beneficio p{margin-top:8px; font-size:.95rem}

.doble{margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:30px}
.via{background:var(--blanco); border:1px solid var(--linea); border-radius:14px; padding:38px 36px}
.via--oscura{background:var(--bosque); color:#fff; border-color:var(--bosque)}
.via h3{font-size:1.4rem; font-weight:600; color:var(--bosque)}
.via--oscura h3{color:#fff}
.via--oscura h3 b{color:var(--verde)}
.via p{margin-top:10px; font-size:.98rem}
.via--oscura p{color:rgba(255,255,255,.85)}
.via .boton{margin-top:22px}
.via--oscura .boton{background:var(--verde); border-color:var(--verde); color:var(--bosque); font-weight:700}
@media (max-width:820px){.doble{grid-template-columns:1fr}}


/* ---------- Páginas sin héroe fotográfico: header sólido desde el inicio ---------- */
body.no-heroe .cabecera{position:sticky; background:rgba(24,40,18,.92)}
body.no-heroe .cabecera .cabecera__fila{padding:10px 0}
body.no-heroe .cabecera-pagina{margin-top:-1px}
/* v5.3: en interiores la cabecera nunca cambia de alto ni de fondo al hacer
   scroll. Evita el bucle de reflujo (parpadeo) y el coste del blur repetido. */
body.no-heroe .cabecera.solida{background:rgba(24,40,18,.92); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 4px 20px rgba(10,20,8,.14)}
body.no-heroe .cabecera.solida .cabecera__fila{padding:10px 0}
body.no-heroe .cabecera__fila{transition:none}

/* ---------- Artículo individual ---------- */
.articulo{max-width:760px; margin:0 auto; padding:72px 28px 96px}
.articulo__meta{display:flex; gap:14px; align-items:center; color:var(--gris); font-size:.9rem; margin-top:18px}
.articulo .contenido > *{margin-bottom:1.2em}
.articulo .contenido h2{font-size:1.6rem; color:var(--bosque); font-weight:600; margin-top:1.8em}
.articulo .contenido h3{font-size:1.25rem; color:var(--bosque); font-weight:600; margin-top:1.4em}
.articulo .contenido a{color:var(--verde-hondo)}
.articulo .contenido ul, .articulo .contenido ol{padding-left:1.4em}
.articulo .contenido img{border-radius:12px}
.articulo .contenido blockquote{border-left:3px solid var(--verde); padding-left:1.2em; color:var(--gris)}
.articulo__imagen img{width:100%; border-radius:14px; margin:26px 0 8px}
.paginacion-articulo{display:flex; justify-content:space-between; gap:20px; margin-top:56px; padding-top:26px; border-top:1px solid var(--linea)}
.paginacion-articulo a{color:var(--verde-texto); text-decoration:none; font-weight:600; font-size:.95rem}
.paginacion-articulo a:hover{text-decoration:underline}

/* ---------- v4.6: piezas AI-SEO del blog ---------- */
/* Migas de pan (con schema BreadcrumbList en single.php) */
.migas{display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:.82rem; letter-spacing:.04em}
.migas a{color:rgba(255,255,255,.7); text-decoration:none}
.migas a:hover{color:#fff; text-decoration:underline}
.migas span{color:rgba(255,255,255,.4)}
.meta-actualizado{color:var(--verde)}
.entrada-card__meta{font-size:.8rem; color:var(--gris)}

/* Bloque de respuesta directa (usar en artículos: <div class="resumen">…</div>).
   Patrón de extractabilidad: respuesta de 40-60 palabras al inicio del artículo,
   pensada para ser citada por motores de AI. */
.articulo .contenido .resumen{
  padding:22px 26px; border-radius:14px; margin:0 0 1.6em;
  background:var(--panel); border-left:3px solid var(--verde);
  font-size:1.05rem; line-height:1.55; color:var(--bosque);
}

/* CTA editorial hacia los pilares (interlinking comercial, tono discreto) */
.articulo-cta{
  margin-top:48px; padding:26px 28px; border-radius:var(--r-tarjeta);
  background:var(--panel); border:1px solid var(--linea);
}
.articulo-cta__texto{color:var(--tinta); margin-bottom:14px}
.articulo-cta__texto b{color:var(--bosque)}
.articulo-cta__enlaces{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.articulo-cta__enlaces a{color:var(--verde-texto); font-weight:600; font-size:.92rem; text-decoration:none}
.articulo-cta__enlaces a:hover{text-decoration:underline}
.articulo-cta__principal{margin-left:auto}
@media (max-width:600px){.articulo-cta__principal{margin-left:0}}

/* ---------- 404 ---------- */
.pagina-404{text-align:center; padding:140px 28px 120px}
.pagina-404 h1{font-size:5rem; color:var(--verde); font-weight:300}
.pagina-404 .boton{margin-top:30px}


/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; box-shadow:0 8px 24px rgba(20,35,16,.28);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--curva), box-shadow .25s;
}
.wa-flotante:hover{transform:scale(1.08); box-shadow:0 12px 30px rgba(20,35,16,.36)}
.wa-flotante svg{width:34px; height:34px; fill:#fff}
.wa-flotante::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:wa-pulso 2.4s infinite;
}
@keyframes wa-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media (max-width:600px){.wa-flotante{width:54px; height:54px; right:16px; bottom:16px} .wa-flotante svg{width:30px; height:30px}}
@media (prefers-reduced-motion: reduce){.wa-flotante::after{animation:none}}


/* ---------- Redes en segunda fila del header ---------- */
.social-fila{display:flex; justify-content:flex-end; padding:0 0 8px}
.social-header{display:flex; align-items:center; gap:2px}
.social-header a{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); transition:background .2s, color .2s, transform .2s var(--curva);
}
.social-header a:hover{background:rgba(255,255,255,.16); color:#fff; transform:translateY(-1px)}
.social-header svg{width:16px; height:16px; fill:currentColor}
.cabecera.solida .social-fila{display:none !important}
@media (max-width:880px){.social-fila{display:none}}


/* Centrado absoluto de la píldora del menú (solo en pantallas anchas donde cabe) */
@media (min-width:1280px){
  .cabecera__fila{position:relative}
  .cabecera__fila .nav{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
}


/* ---------- Compatibilidad con la barra de administración de WordPress ---------- */
/* Solo aplica cuando el administrador navega logueado: baja el header la altura de la barra */
body.admin-bar .cabecera{top:32px}
@media (max-width:782px){body.admin-bar .cabecera{top:46px}}

/* ---------- v4.9: páginas de servicio (page-servicio.php) ---------- */
.servicio .cabecera-pagina p{color:rgba(255,255,255,.88); font-size:1.08rem}
.servicio__acciones{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap}
.servicio .cabecera-pagina .boton--vacio{background:rgba(18,36,14,.3); backdrop-filter:blur(8px); color:#fff; border-color:rgba(255,255,255,.4)}
/* Bloque de respuesta directa reutilizado fuera del artículo */
.resumen--servicio{
  padding:26px 30px; border-radius:14px; max-width:860px;
  background:var(--panel); border-left:3px solid var(--verde);
  font-size:1.12rem; line-height:1.6; color:var(--bosque);
}
.servicio__kpis{list-style:none; margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px}
.servicio__kpis li{padding:12px 14px 12px 38px; position:relative; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-campo); font-weight:600; color:var(--bosque); font-size:.95rem}
.servicio__kpis li::before{content:''; position:absolute; left:14px; top:50%; width:12px; height:12px; border-radius:50%; background:var(--verde); transform:translateY(-50%)}
.servicio__otros{margin-top:18px; display:flex; gap:14px; flex-wrap:wrap}
.servicio__otro{display:inline-block; padding:14px 22px; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-campo); color:var(--bosque); font-weight:600; text-decoration:none; transition:transform .25s var(--curva), box-shadow .25s var(--curva)}
.servicio__otro:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(41,67,35,.10); color:var(--verde-hondo)}
@media (max-width:600px){.servicio__kpis{grid-template-columns:1fr}}

/* v5.0: contacto y carreras */
.sede__tipo{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--verde-hondo); font-weight:600; margin:6px 0 10px}
.etapas--simple{counter-reset:none; margin-top:20px}
.etapas--simple .etapa{opacity:1; padding-left:0; padding-bottom:18px; color:var(--tinta)}
.etapas--simple .etapa::before{display:none}
.etapas--simple .etapa b{color:var(--bosque)}

/* Etapa 1 corregida: aviso de gráfico ilustrativo */
.proc-nota__aviso{display:block; margin-top:10px; font-size:.82rem; color:rgba(255,255,255,.62); line-height:1.5}

/* ==================================================================
   ETAPA 2B — RITMO VERTICAL DEL HOME (PL-024)
   Alcance: SOLO el home, mediante body.home. Las paginas internas
   conservan su espaciado. Sin margenes negativos nuevos, sin alturas
   artificiales, sin !important y sin valores fuera de la escala de 8.

   Diagnostico: la franja muerta nacia de sumar el padding-bottom de una
   seccion (80px) con el padding-top de la siguiente (80px) = 160px, mas
   el margin-top del primer bloque interno (44-64px). Total real: 204-224px.
   Correccion: una sola regla controla cada transicion.
   ================================================================== */

/* Transicion entre secciones: 96px totales (48 + 48) en vez de 160px. */
body.home .seccion{padding:48px 0}

/* Ritmo interno: rotulo -> titulo -> parrafo -> contenido */
body.home .rotulo{margin-bottom:16px}
body.home .seccion > .contenedor > .titulo + p{margin-top:24px}
body.home .pilares{margin-top:48px}
body.home .diferenciales{margin-top:56px}
body.home .sintomas{margin-top:48px}
body.home .sectores{margin-top:40px}
body.home .faq{margin-top:48px}
body.home .sedes{margin-top:48px}
body.home .linea-tiempo{margin-top:48px}
body.home .control{margin-top:40px}

/* A. Servicios: el panel anterior es la banda panoramica.
   Sombra reducida ~40% en extension y desenfoque (30/70 -> 18/42). */
body.home .panoramica{box-shadow:0 18px 42px rgba(20,35,16,.24)}
body.home #servicios{padding-top:72px}
body.home #proceso{padding-top:20px}   /* la seccion previa cierra pegada: 108px totales */
body.home #control{padding-top:64px}   /* medido: 112px totales */

/* B. Tecnologia y reporteria: la columna derecha arrancaba muy abajo
   por align-items:start sobre una rejilla de alturas desiguales. */
body.home .control{align-items:start}
body.home .control__visual{margin-top:0}

/* C. Diferenciales clave: la seccion anterior cierra y esta abre sin sumar. */
body.home #nosotros{padding-top:56px}

/* D. Los problemas que resolvemos: panel verde con padding propio. */
body.home .seccion--panel{padding:72px 0; margin-top:32px; margin-bottom:32px}  /* exterior 80px + interior 72px */

/* E-F. Marcas lideres -> FAQ: una sola regla gobierna la transicion. */
body.home #faq{padding-top:48px}
body.home .faq summary{padding:26px 4px}   /* fila cerrada ~80px, area tactil holgada */

/* G. Cobertura nacional */
body.home #cobertura{padding-top:56px}

/* H. CTA fotografico final */
body.home .remate{margin-top:32px}   /* exterior 80px hasta el CTA fotografico */

/* ---- 1024px ---- */
@media (max-width:1099px){
  body.home .seccion{padding:40px 0}
  body.home #servicios, body.home #cobertura, body.home #nosotros{padding-top:48px}
  body.home .seccion--panel{padding:64px 0; margin-top:48px; margin-bottom:48px}
  body.home .pilares, body.home .faq, body.home .sedes, body.home .diferenciales{margin-top:40px}
  body.home .seccion > .contenedor > .titulo + p{margin-top:24px}
  body.home .remate{margin-top:64px}
}

/* ---- 390px ---- */
@media (max-width:767px){
  body.home .seccion{padding:32px 0}
  body.home #servicios, body.home #cobertura, body.home #nosotros, body.home #faq{padding-top:32px}
  body.home .seccion--panel{padding:48px 0; margin-top:32px; margin-bottom:32px}
  body.home .rotulo{margin-bottom:12px}
  body.home .seccion > .contenedor > .titulo + p{margin-top:20px}
  body.home .pilares, body.home .faq, body.home .sedes, body.home .diferenciales,
  body.home .sintomas, body.home .sectores, body.home .control{margin-top:32px}
  body.home .faq summary{padding:22px 4px}
  body.home .remate{margin-top:48px}
}

/* ==================================================================
   SERVICIOS — Sistema de tres productos (v7.2.0)
   Escritorio aprobado y congelado. Movil implementado en codigo y
   pendiente de verificacion en dispositivo real.
   ================================================================== */

/* Encabezado en dos columnas */
.serv-head{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:end; margin-bottom:40px}
.serv-head > *{min-width:0}
.serv-head .titulo{margin:0; max-width:none}
.serv-head p{margin:0; font-size:17px; max-width:46ch}

/* Rejilla de productos: tres iguales */
body.home .pilares{margin-top:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch}
.pilar{
  background:#FBFDFA; border:1px solid rgba(41,67,35,.16); border-radius:22px;
  overflow:hidden; box-shadow:none; display:flex; flex-direction:column; min-width:0;
  transition:border-color var(--t-media), box-shadow var(--t-media), transform var(--t-media);
}
.pilar:hover{transform:translateY(-3px); border-color:rgba(47,125,50,.38); box-shadow:0 10px 24px rgba(41,67,35,.09)}
.pilar:focus-within{border-color:var(--verde-texto); box-shadow:0 0 0 3px rgba(47,125,50,.18)}

.prod-cab{padding:26px 28px 16px; min-width:0}
.prod-num{display:block; font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--verde-texto); margin-bottom:10px}
.prod-cab h3{font-size:30px; line-height:1.05; color:var(--bosque); font-weight:600; letter-spacing:-.02em}
.prod-promesa{margin-top:8px; font-size:16.5px; line-height:1.4; color:var(--tinta); max-width:30ch}

/* Fotografia: misma altura y tratamiento en los tres */
.pilar .pilar__foto{
  aspect-ratio:auto; height:200px; margin:0 28px; border-radius:14px;
  position:relative; overflow:hidden; flex:0 0 auto; background-size:cover; background-position:center;
}
.pilar .pilar__foto::after{content:''; position:absolute; inset:0; transform:none; background:linear-gradient(15deg, rgba(20,35,16,.26), rgba(87,186,71,.13))}
.pilar .pilar__foto img{width:100%; height:100%; object-fit:cover; display:block}

/* Capacidades y CTA, alineados abajo */
.prod-pie{padding:16px 28px 22px; margin-top:auto; display:flex; flex-direction:column; min-width:0}
.prod-caps{list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px; padding:0; min-height:22px}
.prod-caps li{font-size:14px; color:var(--gris); font-weight:500}
.prod-caps li + li::before{content:'\00B7'; margin-right:10px; color:var(--linea)}
.prod-cta{
  font-size:15px; font-weight:600; color:var(--verde-texto); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; min-height:44px;   /* area tactil */
}
.prod-cta:hover{text-decoration:underline}
.prod-cta:focus-visible{outline:3px solid var(--verde-texto); outline-offset:3px; border-radius:4px}

/* ---- Tablet y movil: una sola columna, orden natural del marcado ---- */
@media (max-width:900px){
  .serv-head{grid-template-columns:1fr; gap:20px; margin-bottom:32px; align-items:start}
  .serv-head p{max-width:60ch}
  body.home .pilares{grid-template-columns:1fr; gap:22px}
  .pilar{width:100%; height:auto}
  .pilar .pilar__foto{height:auto; aspect-ratio:16/10; margin:0 20px}
  .prod-cab{padding:22px 20px 14px}
  .prod-cab h3{font-size:26px}
  .prod-promesa{max-width:none}
  .prod-pie{padding:14px 20px 20px}
  .prod-caps{margin-bottom:10px}
}
@media (max-width:767px){
  .prod-caps li{font-size:14px}
  .prod-cab h3{font-size:24px}
}

/* ---------- PL-030: controles flotantes y acceso a cookies ----------
   El icono de reapertura de CookieAdmin se desactivo en los ajustes del
   plugin: en movil se montaba sobre el texto de las tarjetas. El acceso a
   preferencias vive ahora en el pie, siempre visible y sin tapar nada. */
.pie__cookies{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:rgba(255,255,255,.55);
  text-decoration:underline; text-underline-offset:3px;
}
.pie__cookies:hover{color:#fff}
.pie__cookies:focus-visible{outline:2px solid var(--verde); outline-offset:3px; border-radius:3px}

/* Si el icono del plugin volviera a activarse, queda acotado y sin colisiones */
.cookieadmin_re_consent{
  width:44px !important; height:44px !important;
  background:var(--bosque) !important; color:#fff !important;
  left:16px !important; bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  box-shadow:0 2px 8px rgba(10,20,8,.18) !important;
}
.cookieadmin_re_consent:focus-visible{outline:3px solid #fff !important; outline-offset:2px}

/* WhatsApp: a la derecha, funcion intacta */
.wa-flotante{width:52px; height:52px; right:18px; bottom:18px; box-shadow:0 6px 16px rgba(10,20,8,.22)}
@media (max-width:767px){
  .wa-flotante{width:48px; height:48px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ==================================================================
   DE LA PLANIFICACION AL CONTROL EN VIVO (v7.3.0)
   Fusiona "Como trabajamos" y "Tecnologia y reporteria" en un modulo:
   cinco etapas a la izquierda y un unico panel operativo que se transforma.
   ================================================================== */
#proceso{padding:20px 0; position:relative}
.fx-ancla{position:absolute; top:0}
.fx-head{display:grid; grid-template-columns:auto minmax(0,40ch); column-gap:48px; align-items:end; max-width:none; margin-bottom:12px}
.fx-head .rotulo{grid-column:1; grid-row:1}
.fx-head .titulo{grid-column:1; grid-row:2}
.fx-head p{grid-column:2; grid-row:1 / span 2; align-self:end}
.fx-head .titulo{margin:4px 0 0; font-size:clamp(1.85rem,2.6vw,2.3rem); line-height:1.1; max-width:none}
.fx-head p{margin:0; font-size:15px; line-height:1.45; max-width:40ch}
.fx-modulo{display:grid; grid-template-columns:34fr 66fr; gap:28px; align-items:stretch; height:clamp(320px, calc(100vh - 210px), 412px); height:clamp(320px, calc(100svh - 210px), 412px)}
.fx-modulo > *{min-width:0}

/* Etapas */
.fx-etapas{display:flex; flex-direction:column}
.fx-lista{list-style:none; margin:0; padding:0}
.fx-fila{display:flex; align-items:center; flex-wrap:wrap; gap:0 14px; min-height:42px; padding:0 4px; border-top:1px solid var(--linea); cursor:pointer; color:var(--gris); transition:color var(--t-media)}
.fx-fila:last-child{border-bottom:1px solid var(--linea)}
.fx-num{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--linea); min-width:22px}
.fx-tit{font-size:16px; font-weight:600}
.fx-fila.activa{color:var(--bosque); box-shadow:inset 3px 0 0 var(--verde)}
.fx-fila.activa .fx-num{color:var(--verde-texto)}
.fx-fila:hover{color:var(--bosque)}
.fx-fila:focus-visible{outline:3px solid var(--verde-texto); outline-offset:-3px}
.fx-acord{display:none}                                     /* solo se usa en movil */
.fx-desc{flex:1; min-height:0; margin-top:12px; overflow:hidden}   /* espacio fijo: no cambia la altura */
.fx-desc p{font-size:14.5px; line-height:1.48; color:var(--tinta); margin:0}

/* Panel operativo */
.fx-panel{border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#1B3315,#12240E 70%); color:#fff; display:flex; flex-direction:column; position:relative}
.fx-cab{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.fx-estado{color:rgba(255,255,255,.5)}
.fx-titulo-panel{color:var(--verde); font-weight:700; text-align:right}
.fx-lienzo{position:relative; flex:1; margin:12px 20px 18px; border-radius:14px; background:rgba(255,255,255,.04); overflow:hidden}
.fx-mapa{position:absolute; inset:0; width:100%; height:100%; transition:opacity .5s var(--curva)}
.fx-pdv{stroke:var(--verde); stroke-width:9px; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .4s var(--curva) var(--d,0ms)}
.fx-ruta{fill:none; stroke:rgba(87,186,71,.75); stroke-width:.5; stroke-dasharray:300; stroke-dashoffset:300; opacity:0}
.fx-capa{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s var(--curva), visibility 0s .5s; pointer-events:none}
.fx-capa-1{display:flex; gap:10px; align-items:flex-end; padding:20px; flex-wrap:wrap}
.fx-chip{background:rgba(12,24,10,.75); border:1px solid rgba(87,186,71,.35); border-radius:999px; padding:6px 12px; font-size:13px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--curva), transform .4s var(--curva)}
.fx-capa-2{display:flex; align-items:flex-end; padding:20px}
.fx-crono{display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; width:60%; font-size:12px; color:rgba(255,255,255,.7)}
.fx-crono i{display:block; height:6px; border-radius:3px; background:var(--verde); width:0; transition:width 1.2s var(--curva) .3s}
.fx-capa-3{display:flex; align-items:center; justify-content:center}
.fx-check{list-style:none; margin:0; padding:0; width:70%}
.fx-check li{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px; display:flex; justify-content:space-between; opacity:0; transform:translateX(-8px); transition:opacity .35s var(--curva), transform .35s var(--curva)}
.fx-check li::before{content:'\2713  '; color:var(--verde); margin-right:8px}
.fx-check b{color:var(--verde)}
.fx-foto{position:absolute; inset:0; background:url('/wp-content/uploads/2026/09/suntea.jpg') center 42%/cover no-repeat}
.fx-foto::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,32,14,.15),rgba(18,32,14,.75))}
.fx-pin{position:absolute; left:58%; top:36%; width:14px; height:14px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 4px rgba(87,186,71,.35)}
.fx-pin i{position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--verde); animation:fxpulso 1.6s ease-out infinite}
@keyframes fxpulso{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.8); opacity:0}}
.fx-evid{position:absolute; left:20px; bottom:18px; display:flex; gap:8px; flex-wrap:wrap}
.fx-evid span{background:rgba(12,24,10,.78); border-radius:999px; padding:6px 12px; font-size:13px; border:1px solid rgba(255,255,255,.15)}
.fx-capa-5{padding:14px 18px 16px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(160deg,#1B3315,#12240E 70%)}
.fx-curva{flex:1; min-height:0; margin:0}
.fx-curva svg{width:100%; height:100%; max-height:175px; display:block}
.fx-kpis{display:flex; gap:12px}
.fx-kpis div{flex:1; background:rgba(255,255,255,.06); border-radius:10px; padding:8px 10px; opacity:0; transform:translateY(6px); transition:opacity .4s var(--curva), transform .4s var(--curva)}
.fx-kpis b{display:block; font-size:20px; color:var(--verde); line-height:1}
.fx-kpis span{font-size:12px; color:rgba(255,255,255,.7)}
.fx-reporte{font-size:12.5px; color:var(--verde); letter-spacing:.04em; opacity:0; transition:opacity .4s var(--curva) 1.2s}

/* Estados del panel */
.fx-panel[data-etapa="1"] .fx-capa-1, .fx-panel[data-etapa="2"] .fx-capa-2, .fx-panel[data-etapa="3"] .fx-capa-3,
.fx-panel[data-etapa="4"] .fx-capa-4, .fx-panel[data-etapa="5"] .fx-capa-5{opacity:1; visibility:visible; transition:opacity .5s var(--curva), visibility 0s}
.fx-panel[data-etapa="1"] .fx-pdv, .fx-panel[data-etapa="2"] .fx-pdv, .fx-panel[data-etapa="3"] .fx-pdv{opacity:1}
.fx-panel[data-etapa="1"] .fx-chip{opacity:1; transform:none}
.fx-panel[data-etapa="1"] .fx-chip:nth-child(2){transition-delay:.15s}
.fx-panel[data-etapa="1"] .fx-chip:nth-child(3){transition-delay:.3s}
.fx-panel[data-etapa="2"] .fx-ruta, .fx-panel[data-etapa="3"] .fx-ruta{opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--curva), opacity .3s}
.fx-panel[data-etapa="2"] .fx-ruta--b{transition-delay:.4s}
.fx-panel[data-etapa="2"] .fx-crono i{width:var(--w)}
.fx-panel[data-etapa="3"] .fx-mapa{opacity:.35}
.fx-panel[data-etapa="3"] .fx-check li{opacity:1; transform:none}
.fx-panel[data-etapa="3"] .fx-check li:nth-child(2){transition-delay:.15s}
.fx-panel[data-etapa="3"] .fx-check li:nth-child(3){transition-delay:.3s}
.fx-panel[data-etapa="3"] .fx-check li:nth-child(4){transition-delay:.45s}
.fx-panel[data-etapa="4"] .fx-mapa, .fx-panel[data-etapa="5"] .fx-mapa{opacity:0}
.fx-panel[data-etapa="5"] .fx-kpis div{opacity:1; transform:none}
.fx-panel[data-etapa="5"] .fx-kpis div:nth-child(2){transition-delay:.15s}
.fx-panel[data-etapa="5"] .fx-kpis div:nth-child(3){transition-delay:.3s}
.fx-panel[data-etapa="5"] .fx-reporte{opacity:1}

@media (prefers-reduced-motion: reduce){
  .fx-pin i{animation:none}
  .fx-capa, .fx-chip, .fx-check li, .fx-kpis div, .fx-reporte, .fx-crono i, .fx-ruta, .fx-pdv, .fx-mapa{transition:none}
}

/* Movil y tablet: sin panel, etapas en acordeon */
@media (max-width:900px){
  #proceso{padding:32px 0}
  .fx-head{display:block; margin-bottom:20px}
  .fx-head p{margin-top:8px; max-width:none}
  .fx-head .titulo{font-size:clamp(1.75rem,6vw,2rem); line-height:1.12}
  .fx-modulo{display:block; height:auto}
  .fx-panel{display:none}
  .fx-desc{display:none}
  .fx-fila{min-height:52px; padding:0 4px}
  .fx-tit{font-size:15.5px}
  .fx-fila .fx-acord{display:none; flex-basis:100%; margin:0; padding:2px 4px 14px 36px; font-size:15px; line-height:1.5; color:var(--tinta); cursor:default}
  .fx-fila.activa .fx-acord{display:block}
}

/* ==================================================================
   DIAGNOSTICO v7.3.3 — cuatro senales en una fila, sin tarjetas
   ================================================================== */
body.home #diagnostico{padding:48px 0; scroll-margin-top:calc(var(--menu-sticky) + 24px)}
body.home.admin-bar #diagnostico{scroll-margin-top:calc(var(--menu-sticky) + 56px)}
#diagnostico .dg-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px}
#diagnostico .rotulo{margin-bottom:10px}
#diagnostico .titulo{font-size:clamp(1.9rem,2.8vw,2.5rem); line-height:1.1; max-width:none}
#diagnostico .dg-cierre{margin:0; flex-shrink:0; font-size:1rem; color:var(--tinta); padding-bottom:6px}
#diagnostico .dg-cierre a{color:var(--verde-texto); font-weight:600; text-decoration:none; margin-left:6px; border-bottom:1px solid currentColor}
#diagnostico .dg-cierre a:hover{color:var(--bosque)}
#diagnostico .dg-cierre a:focus-visible{outline:3px solid var(--verde-texto); outline-offset:3px}
.dg-senales{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--linea)}
.dg-senal{padding:24px 28px 12px; border-left:1px solid var(--linea)}
.dg-senal:first-child{border-left:0; padding-left:0}
.dg-senal:last-child{padding-right:0}
.dg-num{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--verde-texto)}
.dg-senal h3{margin:8px 0 0; font-size:1.08rem; line-height:1.25; font-weight:600; color:var(--bosque)}
.dg-senal p{margin:10px 0 0; font-size:1rem; line-height:1.45; color:var(--tinta)}
.dg-senal p b{display:block; margin-bottom:4px; font-size:1.08rem; line-height:1.25; font-weight:600; color:var(--bosque)}
/* Tablet: 2x2 */
@media (max-width:1099px){
  body.home #diagnostico{padding:40px 0}
  #diagnostico .dg-head{flex-direction:column; align-items:flex-start; gap:12px}
  .dg-senales{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px}
  .dg-senal{padding:20px 24px 20px; border-left:1px solid var(--linea); border-bottom:1px solid var(--linea)}
  .dg-senal:nth-child(odd){border-left:0; padding-left:0}
  .dg-senal:nth-child(even){padding-right:0}
  .dg-senal:nth-child(n+3){border-bottom:0; padding-bottom:4px}
  .dg-senal:last-child{padding-right:0}
}
/* Movil: una columna compacta */
@media (max-width:767px){
  body.home #diagnostico{padding:32px 0}
  #diagnostico .titulo{font-size:clamp(1.7rem,6.4vw,2rem)}
  .dg-senales{grid-template-columns:1fr; margin-top:20px}
  .dg-senal, .dg-senal:nth-child(odd), .dg-senal:nth-child(even), .dg-senal:nth-child(n+3){border-left:0; padding:14px 0; border-bottom:1px solid var(--linea)}
  .dg-senal:last-child{border-bottom:0; padding-bottom:0}
  .dg-senal h3{margin-top:4px; font-size:1.02rem}
  .dg-senal p{margin-top:4px; font-size:.93rem}
}