/* =========================================================================
   MERCADOS ELÉCTRICOS LTDA. — Hoja de estilos compartida
   -------------------------------------------------------------------------
   Índice:
     1.  Variables de diseño (colores, tipografía, espaciados)
     2.  Reset y estilos base
     3.  Utilidades (contenedor, secciones, títulos, botones)
     4.  Encabezado y navegación sticky
     5.  Hero de la página de inicio
     6.  Hero interno (Servicios / Nosotros)
     7.  Bloques de la página de inicio (quiénes somos, servicios, cifras,
         clientes y testimonios)
     8.  Página de servicios (detalle, proceso, FAQ)
     9.  Página de nosotros (historia, MVV, equipo, sectores, mapa)
     10. Formularios y bloques CTA
     11. Pie de página
     12. Animaciones al hacer scroll y movimiento reducido
   Enfoque mobile-first: los estilos base son para móvil y se amplían
   con media queries en 768px (tablet) y 1024px (escritorio).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES DE DISEÑO
   Cambia aquí los colores o tipografías y se actualiza todo el sitio.
   ------------------------------------------------------------------------- */
:root {
  /* Paleta de marca */
  /* Colores tomados del logo MMEE */
  --c-primary: #312d81;        /* Azul índigo del logo (primario) */
  --c-primary-700: #27236a;
  --c-primary-900: #16143f;    /* Índigo casi negro para fondos oscuros */
  --c-primary-100: #dedcf2;
  --c-primary-50: #f0effa;
  --c-accent: #059848;         /* Verde del logo (acento: líneas, íconos, bordes) */
  --c-accent-600: #04843f;     /* Verde para botones con texto blanco (contraste AA) */
  --c-accent-700: #037a3a;     /* Verde para textos sobre fondo blanco */
  --c-accent-light: #2fc275;   /* Verde claro para textos sobre fondos oscuros */
  --c-accent-100: #e0f4e8;
  --c-earth: #8a6a4f;          /* Tierra del altiplano (tono de apoyo de la foto) */
  --c-bg: #ffffff;
  --c-bg-alt: #f7fafc;         /* Gris claro para fondos alternos */
  --c-text: #2d3748;           /* Gris oscuro para texto */
  --c-text-strong: #1a202c;
  --c-muted: #4a5568;
  --c-border: #e2e8f0;
  --c-success: #2f855a;
  --c-error: #c53030;

  /* Tipografía */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 3.625rem);

  /* Espaciados, bordes y sombras */
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow: 0 4px 12px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .06);
  --shadow-lg: 0 10px 24px rgba(16, 24, 40, .08), 0 24px 56px rgba(16, 24, 40, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 72px;
  --container: 1200px;
}

/* -------------------------------------------------------------------------
   2. RESET Y ESTILOS BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px); /* compensa el header fijo al saltar a anclas */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--c-text-strong);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; }

a { color: var(--c-primary); text-underline-offset: 3px; }
a:hover { color: var(--c-accent-700); }

ul { margin: 0; padding: 0; }

/* Foco visible para navegación por teclado */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace "Saltar al contenido" (accesibilidad) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1rem;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Campo trampa anti-robots: fuera de la vista de las personas */
.trampa { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Sprite de íconos oculto (los íconos se reutilizan con <use>) */
.sprite { display: none; }

/* Íconos SVG lineales: heredan el color del texto */
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
   3. UTILIDADES
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding-block: var(--space-section); }
.section--alt { background: var(--c-bg-alt); }
.section--tight { padding-block: calc(var(--space-section) * .65); }

/* Encabezado de sección: etiqueta + título + bajada */
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-lg); color: var(--c-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.eyebrow--light { color: var(--c-accent-light); }

.lead { font-size: var(--fs-lg); color: var(--c-muted); }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.5rem;
  font: 600 var(--fs-sm)/1.2 var(--font-sans);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }

.btn--accent { background: var(--c-accent-600); color: #fff; }
.btn--accent:hover { background: var(--c-accent-700); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(5, 152, 72, .35); }

.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-700); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(49, 45, 129, .3); }

.btn--outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn--outline:hover { background: var(--c-primary); color: #fff; }

.btn--ghost-light { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.btn--block { width: 100%; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   4. ENCABEZADO Y NAVEGACIÓN STICKY
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
/* Clase añadida por JS al hacer scroll */
.site-header.is-scrolled {
  border-bottom-color: var(--c-border);
  box-shadow: 0 4px 20px rgba(16, 24, 40, .06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1.5rem;
}

/* Logotipo MMEE (archivo vectorial en img/) */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: auto; height: 50px; }
.site-footer .brand img { height: 56px; }

/* Botón hamburguesa (solo móvil) */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-primary);
  cursor: pointer;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Menú: panel desplegable en móvil */
.nav__menu {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__menu.is-open { opacity: 1; transform: none; visibility: visible; }

.nav__links { display: flex; flex-direction: column; list-style: none; }
.nav__link {
  position: relative;
  display: block;
  padding: .875rem .25rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
}
.nav__link:hover { color: var(--c-primary); }
.nav__link[aria-current="page"] { color: var(--c-primary); }
.nav__cta { margin-top: 1rem; }

/* Selector de idioma (ES · EN · DE) */
.lang-switch {
  display: flex;
  gap: .25rem;
  margin-top: 1rem;
  padding: .25rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  align-self: flex-start;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  padding: 0 .625rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-muted);
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.lang-switch a:hover { color: var(--c-primary); }
.lang-switch a[aria-current="true"] { color: #fff; background: var(--c-primary); }
.lang-switch a:not([aria-current="true"]):hover { background: rgba(49, 45, 129, .08); }
.lang-switch__flag {
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(22, 20, 63, .18);
}
.lang-switch a[aria-current="true"] .lang-switch__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
@media (min-width: 1024px) {
  .lang-switch { margin-top: 0; align-self: center; }
}
.legal__note { margin-top: .75rem; font-size: var(--fs-sm); font-style: italic; color: var(--c-muted); }

/* -------------------------------------------------------------------------
   5. HERO DE INICIO
   Capas (de atrás hacia adelante):
     1. Fotografía de fondo  → img/hero-altiplano.jpg (siempre visible
        mientras carga el video, en celulares y si el video no existe)
     2. Video opcional       → video/hero.mp4 / video/hero.webm
     3. Velo índigo (::before) para asegurar el contraste del texto
     4. Contenido
   ► Para cambiar la foto, reemplaza img/hero-altiplano.jpg
     (ideal 2400×1350 px, JPG de calidad 75-80, menos de 500 KB).
   ► Para activar el video, basta con copiar los archivos en la carpeta
     video/ con esos nombres (ver LEEME.md).
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-h)), 820px);
  color: #fff;
  background: var(--c-primary-900) url("../img/hero-altiplano.jpg") 30% 60% / cover no-repeat;
}
/* Video de fondo (aparece suavemente cuando empieza a reproducirse) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 60%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__video.is-playing { opacity: 1; }
/* Velo índigo sobre foto/video */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22, 20, 63, .72) 0%, rgba(22, 20, 63, .55) 50%, rgba(22, 20, 63, .85) 100%);
  pointer-events: none;
}
/* Botón pausar/reproducir video (accesibilidad: todo movimiento debe poder detenerse) */
.hero__video-toggle {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: rgba(22, 20, 63, .45);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__video-toggle:hover { background: rgba(22, 20, 63, .7); }
.hero__video-toggle.is-visible { display: inline-flex; }
.hero__video-toggle .icon { width: 18px; height: 18px; }
/* Línea verde inferior, guiño a la flecha del logo */
.hero::after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0; bottom: 0;
  width: 38%;
  height: 4px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  padding-block: 4rem;
}
.hero h1 { color: #fff; max-width: 16ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--c-accent-light); }
.hero__lead { font-size: var(--fs-lg); color: rgba(255, 255, 255, .88); max-width: 54ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* Chips de temas clave */
.hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.25rem;
  list-style: none;
}
.hero__topics li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .875rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(22, 20, 63, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__topics .icon { width: 16px; height: 16px; color: var(--c-accent-light); }

/* Tarjeta "Áreas de foco" (vidrio esmerilado sobre la foto) */
.hero__card {
  align-self: end;
  max-width: 340px;
  padding: 1.5rem;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.hero__card-label { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-light); margin-bottom: .875rem; }
.hero__card ul { list-style: none; display: grid; gap: .75rem; }
.hero__card li { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-sm); font-weight: 600; }
.hero__card li .icon { width: 20px; height: 20px; color: var(--c-accent-light); }
.hero__card-link { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; margin-top: .75rem; font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: none; }
.hero__card-link:hover { color: var(--c-accent-light); }
.hero__card-link .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.hero__card-link:hover .icon { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   6. HERO INTERNO (Servicios / Nosotros)
   Usa la misma fotografía con un velo más intenso.
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 4.5rem 4rem;
  color: #fff;
  background-color: var(--c-primary-900);
  background-image:
    linear-gradient(100deg, rgba(22, 20, 63, .93) 0%, rgba(22, 20, 63, .75) 50%, rgba(22, 20, 63, .35) 100%),
    url("../img/hero-altiplano.jpg");
  background-size: cover;
  background-position: center 42%;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 38%;
  height: 4px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
}
.page-hero__lines {
  position: absolute;
  right: -40px;
  bottom: 0;
  width: 640px;
  max-width: 90%;
  opacity: .5;
  pointer-events: none;
}
.page-hero__lines path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.page-hero__lines .accent { stroke: var(--c-accent-light); stroke-width: 1.6; }
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: rgba(255, 255, 255, .85); font-size: var(--fs-lg); max-width: 60ch; margin: 0; }
.page-hero .eyebrow { font-size: var(--fs-xs); color: var(--c-accent-light); margin-bottom: 1rem; }

/* Migas de pan */
.breadcrumb { margin-bottom: 1.5rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); }
.breadcrumb li { color: rgba(255, 255, 255, .7); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: rgba(255, 255, 255, .4); }
.breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent-light); }

/* -------------------------------------------------------------------------
   7. BLOQUES DE INICIO
   ------------------------------------------------------------------------- */

/* --- Quiénes somos (resumen) --- */
.about-preview { display: grid; gap: 3rem; align-items: center; }
.about-preview__text p { font-size: var(--fs-lg); color: var(--c-muted); }
.about-preview__text .btn { margin-top: .75rem; }

.pillars {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  list-style: none;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.pillar {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pillar h3 { font-size: var(--fs-base); margin-bottom: .25rem; }
.pillar p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Contenedor de ícono reutilizable */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--c-primary);
  background: var(--c-primary-50);
  border-radius: var(--radius-sm);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.icon-badge--lg { width: 56px; height: 56px; }
.icon-badge--lg .icon { width: 28px; height: 28px; }

/* --- Tarjetas de servicio --- */
.card-grid { display: grid; gap: 1.5rem; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Línea de acento superior que aparece en hover */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 2rem; right: 2rem;
  height: 3px;
  background: var(--c-accent);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card:hover .icon-badge { background: var(--c-primary); color: var(--c-accent-light); }
.card h3 { margin-top: 1.5rem; }
.card p { color: var(--c-muted); }
.card .link-arrow { margin-top: auto; padding-top: .5rem; }

.section-foot { margin-top: 2.5rem; text-align: center; }

/* --- Cifras / estadísticas --- */
.stats {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-900) 100%);
}
.stats::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 380px; height: 380px;
  border: 1px solid rgba(5, 152, 72, .25);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(5, 152, 72, .04), 0 0 0 120px rgba(5, 152, 72, .03);
}
.stats__grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; list-style: none; }
.stat { padding-left: 1.25rem; border-left: 2px solid var(--c-accent); }
.stat__value {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: .5rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); }

/* --- Logos de clientes (placeholders) --- */
.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 4rem;
  list-style: none;
}
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 1rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #718096;
  background: #fff;
  border: 1px dashed #cbd5e0;
  border-radius: var(--radius-sm);
  filter: grayscale(1);
  transition: filter .3s, border-color .3s;
}
.logo-slot:hover { filter: none; border-color: var(--c-accent); }
.logo-slot img { max-height: 44px; width: auto; }

/* --- Clientes (logos reales) --- */
.clients {
  --gap: .75rem;
  --cols: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  list-style: none;
}
.client {
  flex: 0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: .75rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
/* Cada logo trae su ancho ideal en --w; en pantallas chicas se reduce */
.client img {
  width: calc(var(--w, 140px) * var(--logo-scale, .8));
  max-width: 92%;
  height: auto;
  transition: transform .3s var(--ease);
}
.client:hover { border-color: var(--c-accent); box-shadow: var(--shadow); transform: translateY(-3px); }
.client:hover img { transform: scale(1.05); }
@media (min-width: 768px) { .clients { --cols: 4; --gap: 1rem; } .client { height: 112px; } .client img { --logo-scale: .9; } }
@media (min-width: 1024px) { .clients { --cols: 5; --gap: 1.25rem; } .client { height: 124px; } .client img { --logo-scale: 1; } }

/* --- Testimonios --- */
.testimonials { display: grid; gap: 1.5rem; }
.quote {
  position: relative;
  margin: 0;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.quote__mark { width: 36px; height: 36px; color: var(--c-accent); margin-bottom: 1rem; }
.quote blockquote { margin: 0 0 1.5rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--c-text-strong); }
.quote figcaption { display: flex; align-items: center; gap: .875rem; }
.quote__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--c-primary); background: var(--c-primary-50);
  border-radius: 50%;
}
.quote__name { display: block; font-weight: 700; color: var(--c-text-strong); font-size: var(--fs-sm); }
.quote__role { display: block; font-size: var(--fs-xs); color: var(--c-muted); }

/* Aviso visible para contenido de ejemplo (eliminar al publicar contenido real) */
.placeholder-note {
  display: inline-block;
  margin-top: .75rem;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  color: #035c2c;
  background: var(--c-accent-100);
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   8. PÁGINA DE SERVICIOS
   ------------------------------------------------------------------------- */

/* Índice rápido de servicios */
.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin-bottom: 3rem;
}
.service-index a {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary);
  text-decoration: none;
  background: var(--c-primary-50);
  border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.service-index a:hover { background: var(--c-primary); color: #fff; }

/* Tarjeta de servicio detallada */
.service {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service:hover .icon-badge { background: var(--c-primary); color: var(--c-accent-light); }
.service__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.service__num { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: #a0aec0; letter-spacing: .1em; }
.service h3 { margin-bottom: .75rem; }
.service > p { color: var(--c-muted); }
.service__label {
  margin: .5rem 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.checklist { display: grid; gap: .5rem; list-style: none; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.service__label + .checklist { padding-top: 0; border-top: 0; }
.checklist li { display: flex; gap: .625rem; font-size: var(--fs-sm); color: var(--c-text); }
.checklist .icon { width: 18px; height: 18px; margin-top: .2rem; color: var(--c-accent-700); stroke-width: 2.25; }
.service__divider { height: 1px; margin: .5rem 0 0; background: var(--c-border); border: 0; }

/* Proceso de trabajo */
.process { display: grid; gap: 1.5rem; list-style: none; counter-reset: paso; }
.process__step { position: relative; padding: 1.75rem 1.5rem 1.5rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--c-border); }
.process__step::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  margin-bottom: .75rem;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-accent-700);
  letter-spacing: .06em;
}
.process__step h3 { font-size: var(--fs-lg); }
.process__step p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* FAQ — acordeón */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--c-border); }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__q { margin: 0; font-size: var(--fs-base); }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem .25rem;
  font: 600 var(--fs-lg)/1.4 var(--font-sans);
  color: var(--c-text-strong);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.faq__btn:hover { color: var(--c-primary); }
.faq__sign {
  position: relative;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-primary-50);
  transition: background-color .3s, transform .3s var(--ease);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), background-color .3s;
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__sign { background: var(--c-primary); transform: rotate(180deg); }
.faq__btn[aria-expanded="true"] .faq__sign::before,
.faq__btn[aria-expanded="true"] .faq__sign::after { background: var(--c-accent); }
.faq__btn[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Panel con animación de altura (grid 0fr → 1fr) */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding: 0 3rem 1.5rem .25rem; margin: 0; color: var(--c-muted); }

/* -------------------------------------------------------------------------
   9. PÁGINA NOSOTROS
   ------------------------------------------------------------------------- */
.story { display: grid; gap: 3rem; align-items: start; }
.story__text p { font-size: var(--fs-lg); color: var(--c-muted); }

/* Línea de tiempo resumida */
.timeline { list-style: none; position: relative; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--c-border); }
.timeline li { position: relative; padding-bottom: 1.5rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -1.75rem; top: .3rem;
  width: 14px; height: 14px;
  background: #fff;
  border: 3px solid var(--c-accent);
  border-radius: 50%;
}
.timeline strong { display: block; color: var(--c-text-strong); }
.timeline span { font-size: var(--fs-sm); color: var(--c-muted); }

/* Misión / visión */
.mv-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
.mv {
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
.mv--dark { background: var(--c-primary); border-color: var(--c-primary); color: rgba(255, 255, 255, .85); }
.mv--dark h3 { color: #fff; }
.mv--dark .icon-badge { background: rgba(255, 255, 255, .1); color: var(--c-accent-light); }
.mv h3 { margin-top: 1.25rem; font-size: 1.5rem; }
.mv p { margin: 0; font-size: var(--fs-lg); }

/* Valores */
.values { display: grid; gap: 1rem; list-style: none; }
.value { display: flex; gap: 1rem; padding: 1.5rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--c-border); }
.value h4 { margin-bottom: .25rem; font-size: var(--fs-base); }
.value p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Equipo */
.team { display: grid; gap: 1.5rem; list-style: none; }
.member {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.member:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.member__photo { aspect-ratio: 4 / 4.2; background: var(--c-primary-50); overflow: hidden; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.member:hover .member__photo img { transform: scale(1.04); }
.member__body { padding: 1.25rem 1.5rem 1.5rem; }
.member__body h3 { margin-bottom: .125rem; font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .01em; }
.member__role { margin-bottom: .875rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-accent-700); }
.tags { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; }
.tags li { padding: .2rem .625rem; font-size: .75rem; font-weight: 600; color: var(--c-primary); background: var(--c-primary-50); border-radius: 999px; }
.member__bio { margin-bottom: 1rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-muted); }
.team--home .member__bio { margin-bottom: 0; }
.member__link { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.member__link .icon { width: 18px; height: 18px; }

/* Equipo profesional (segunda fila) */
.team-subtitle {
  display: flex; align-items: center; gap: 1rem;
  margin: 3.5rem 0 1.5rem;
  font-size: var(--fs-xl);
}
.team-subtitle::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.member__photo--initials {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 70% 20%, rgba(5, 152, 72, .25), transparent 55%),
    linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-900) 100%);
}
.member__photo--initials span {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
}
.member__photo--initials span::after {
  content: ""; display: block; width: 40%; height: 3px; margin: .5rem auto 0;
  background: var(--c-accent-light); border-radius: 3px;
}
@media (min-width: 1024px) {
  .team.team--staff { grid-template-columns: repeat(3, 1fr); }
  .team.team--staff .member__photo { aspect-ratio: 4 / 3.4; }
  .team.team--staff .member__photo img { object-position: center 12%; }
  .team--staff .member__body h3 { font-size: var(--fs-base); }
}

/* Sectores */
.sectors { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; list-style: none; }
.sector {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sector:hover { border-color: var(--c-accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.sector:hover .icon-badge { background: var(--c-primary); color: var(--c-accent-light); }
.sector h3 { margin: .5rem 0 0; font-size: var(--fs-lg); }
.sector p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* Contacto */
.contact { display: grid; gap: 2.5rem; grid-template-areas: "info" "form" "map"; }
.contact__info { grid-area: info; }
.contact .form-card { grid-area: form; }
.contact__map { grid-area: map; }
.contact-info { display: grid; gap: 1rem; list-style: none; margin-bottom: 2rem; }
.contact-info li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info .icon-badge { width: 44px; height: 44px; }
.contact-info .icon-badge .icon { width: 20px; height: 20px; }
.contact-info strong { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.contact-info a, .contact-info span { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text-strong); text-decoration: none; }
.contact-info a:hover { color: var(--c-primary); text-decoration: underline; }

.map {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  background: var(--c-bg-alt);
}
.map iframe { width: 100%; height: 320px; border: 0; }

/* -------------------------------------------------------------------------
   POLÍTICA DE PRIVACIDAD (privacidad.html)
   ------------------------------------------------------------------------- */
.page-hero--compact { padding-block: 3.5rem 3rem; }
.legal { display: grid; gap: 2.5rem; align-items: start; }
.legal__toc {
  padding: 1.25rem 1.5rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.legal__toc-title { margin: 0 0 .75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.legal__toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .375rem; font-size: var(--fs-sm); }
.legal__toc a { text-decoration: none; color: var(--c-text); }
.legal__toc a:hover { color: var(--c-primary); text-decoration: underline; }
.legal__body { max-width: 760px; }
.legal__body h2 { margin: 2.5rem 0 .875rem; font-size: 1.375rem; scroll-margin-top: calc(var(--header-h) + 16px); }
.legal__body p, .legal__body li { color: var(--c-text); }
.legal__body ul { padding-left: 1.25rem; margin: 0 0 1rem; display: grid; gap: .5rem; }
.legal__meta { display: inline-block; padding: .25rem .75rem; font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary); background: var(--c-primary-50); border-radius: 999px; }
.legal__data { list-style: none; padding: 1rem 1.25rem !important; background: var(--c-bg-alt); border-radius: var(--radius-sm); }
.legal__contact { margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--c-primary-50); border-left: 4px solid var(--c-accent); border-radius: var(--radius-sm); }
.legal__contact p { margin: 0; }
.form__consent a { color: var(--c-primary); font-weight: 600; }
@media (min-width: 1024px) {
  .legal { grid-template-columns: 260px 1fr; gap: 4rem; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* -------------------------------------------------------------------------
   10. FORMULARIOS Y BLOQUES CTA
   ------------------------------------------------------------------------- */
.form-card {
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}
.form-card h3 { font-size: 1.375rem; }
.form-card > p { color: var(--c-muted); font-size: var(--fs-sm); }

.form { display: grid; gap: 1.125rem; }
.form__row { display: grid; gap: 1.125rem; }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-strong); }
.field .req { color: var(--c-error); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  font: 400 var(--fs-base)/1.4 var(--font-sans);
  color: var(--c-text-strong);
  background: var(--c-bg-alt);
  border: 1px solid #cbd5e0;
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #8a94a6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(49, 45, 129, .12);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--c-error); background: #fff5f5; }
.field__error { min-height: 0; font-size: var(--fs-xs); color: var(--c-error); }
.form__consent { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--c-muted); }
.form__consent input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--c-primary); }
.form__status { display: none; padding: .875rem 1rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.form__status.is-success { display: block; color: #22543d; background: #f0fff4; border: 1px solid #c6f6d5; }
.form__status.is-error { display: block; color: #742a2a; background: #fff5f5; border: 1px solid #fed7d7; }

/* Bloque "Agenda una consultoría" (inicio) */
.cta-split { display: grid; gap: 2.5rem; align-items: center; }
.cta-split__text h2 { max-width: 16ch; }
.cta-split__text .lead { margin-bottom: 2rem; }
.cta-points { display: grid; gap: .875rem; list-style: none; margin-bottom: 2rem; }
.cta-points li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 500; }
.cta-points .icon { width: 22px; height: 22px; color: var(--c-accent-700); stroke-width: 2.25; }
.cta-phone { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; font-size: var(--fs-lg); text-decoration: none; color: var(--c-primary); }

/* Banda CTA oscura */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 3rem 1.5rem;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(5, 152, 72, .28), transparent 70%),
    linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-900) 100%);
  border-radius: var(--radius-lg);
}
.cta-band h2 { color: #fff; margin-bottom: .75rem; }
.cta-band p { max-width: 56ch; margin: 0 auto 2rem; color: rgba(255, 255, 255, .82); font-size: var(--fs-lg); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

/* -------------------------------------------------------------------------
   11. PIE DE PÁGINA
   ------------------------------------------------------------------------- */
.site-footer { padding-top: 4rem; color: rgba(255, 255, 255, .72); background: var(--c-primary-900); font-size: var(--fs-sm); }
.footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.footer__about { max-width: 34ch; margin-top: 1.25rem; }
.footer__title { margin-bottom: 1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.footer__list { display: grid; gap: .625rem; list-style: none; }
.footer__list a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer__list a:hover { color: var(--c-accent-light); }
.footer__contact li { display: flex; gap: .625rem; align-items: flex-start; }
.footer__contact .icon { width: 18px; height: 18px; margin-top: .2rem; color: var(--c-accent-light); }
.social { display: flex; gap: .625rem; margin-top: 1.5rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm);
  transition: background-color .25s, border-color .25s, color .25s;
}
.social a:hover { background: var(--c-accent-600); border-color: var(--c-accent-600); color: #fff; }
.social .icon { width: 20px; height: 20px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.5rem;
  font-size: var(--fs-xs);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__bottom a { color: rgba(255, 255, 255, .72); }

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  height: 56px;
  padding: 0 1.25rem 0 1rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
  text-decoration: none;
  background: var(--c-accent-600);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(4, 132, 63, .35);
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s;
}
.wa-float[hidden] { display: none; }
.wa-float:hover { color: #fff; background: var(--c-accent-700); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(4, 132, 63, .45); }
.wa-float__icon { width: 28px; height: 28px; flex-shrink: 0; }
/* En celular solo el ícono, para no tapar contenido */
@media (max-width: 767px) {
  .wa-float { width: 56px; padding: 0; justify-content: center; }
  .wa-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Si hay botón de WhatsApp, "volver arriba" se ubica sobre él */
.has-wa .to-top { bottom: 5.5rem; }

/* -------------------------------------------------------------------------
   ASISTENTE VIRTUAL (js/asistente.js)
   ------------------------------------------------------------------------- */
.bot { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 120; font-size: var(--fs-sm); }
.has-bot .to-top { bottom: 5.5rem; }

/* Botón que abre el asistente */
.bot__launcher {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 56px; padding: 0 1.25rem 0 1rem;
  font: 700 var(--fs-sm)/1 var(--font-sans);
  color: #fff; background: var(--c-primary);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(49, 45, 129, .35);
  transition: transform .25s var(--ease), background-color .25s;
}
.bot__launcher:hover { background: var(--c-primary-700); transform: translateY(-2px); }
.bot__launcher-icon { position: relative; display: inline-flex; width: 26px; height: 26px; }
.bot__launcher-icon svg { width: 100%; height: 100%; }
/* Punto verde de "en línea" */
.bot__launcher-icon::after {
  content: ""; position: absolute; right: -2px; top: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-accent-light); box-shadow: 0 0 0 2px var(--c-primary);
}
.bot.is-open .bot__launcher-icon::after { display: none; }

/* Burbuja de invitación */
.bot__invite {
  position: absolute; right: 0; bottom: 70px;
  width: 260px; padding: 1rem 2.25rem 1rem 1rem;
  color: var(--c-text); background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius) var(--radius) 4px var(--radius);
  box-shadow: var(--shadow-lg); cursor: pointer;
  animation: bot-in .4s var(--ease);
}
.bot__invite p { margin: 0; line-height: 1.5; }
.bot__invite strong { color: var(--c-primary); }
.bot__invite-close {
  position: absolute; top: .375rem; right: .375rem;
  width: 28px; height: 28px; padding: 5px;
  color: var(--c-muted); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.bot__invite-close:hover { background: var(--c-bg-alt); }

/* Ventana del chat */
.bot__panel {
  position: absolute; right: 0; bottom: 70px;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 2.5rem));
  height: min(600px, calc(100vh - 7rem));
  height: min(600px, calc(100dvh - 7rem));
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(22, 20, 63, .28);
  animation: bot-in .3s var(--ease);
}
.bot__panel[hidden] { display: none; }
@keyframes bot-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.bot__head {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-900) 100%);
}
.bot__avatar { display: inline-flex; width: 40px; height: 40px; padding: 2px; background: #fff; border-radius: 10px; flex-shrink: 0; }
.bot__avatar img { width: 100%; height: 100%; }
.bot__title { flex: 1; min-width: 0; }
.bot__title h2 { margin: 0; font-size: 1rem; color: #fff; letter-spacing: 0; }
.bot__status { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .8); }
.bot__status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .375rem; border-radius: 50%; background: var(--c-accent-light); vertical-align: 1px; }
.bot__status.is-off::before { background: #f6ad55; }
.bot__icon-btn {
  display: inline-flex; width: 34px; height: 34px; padding: 7px;
  color: #fff; background: rgba(255, 255, 255, .08);
  border: 0; border-radius: 8px; cursor: pointer;
}
.bot__icon-btn:hover { background: rgba(255, 255, 255, .2); }
.bot__icon-btn svg, .bot__invite-close svg { width: 100%; height: 100%; }

/* Conversación */
.bot__log { flex: 1; overflow-y: auto; padding: 1rem; background: var(--c-bg-alt); display: flex; flex-direction: column; gap: .625rem; overscroll-behavior: contain; }
.bot__msg { max-width: 88%; padding: .625rem .875rem; line-height: 1.5; border-radius: 14px; word-wrap: break-word; animation: bot-in .25s var(--ease); }
.bot__msg--bot { align-self: flex-start; color: var(--c-text-strong); background: #fff; border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.bot__msg--user { align-self: flex-end; color: #fff; background: var(--c-primary); border-bottom-right-radius: 4px; }
.bot__msg a { color: var(--c-accent-700); font-weight: 600; }
.bot__summary { display: block; margin: .5rem 0; padding: .5rem .75rem; background: var(--c-bg-alt); border-left: 3px solid var(--c-accent); border-radius: 6px; font-size: .8125rem; }

/* Indicador "escribiendo…" */
.bot__typing { display: inline-flex; gap: 4px; padding: .75rem .875rem; }
.bot__typing span { width: 7px; height: 7px; border-radius: 50%; background: #a0aec0; animation: bot-dot 1s infinite ease-in-out; }
.bot__typing span:nth-child(2) { animation-delay: .15s; }
.bot__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bot-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Respuestas rápidas */
.bot__options { display: flex; flex-wrap: wrap; gap: .375rem; padding: .625rem 1rem 0; background: var(--c-bg-alt); max-height: 168px; overflow-y: auto; }
.bot__options:empty { display: none; }
.bot__chip {
  display: inline-flex; align-items: center;
  padding: .45rem .8rem; margin-bottom: .375rem;
  font: 600 .8125rem/1.3 var(--font-sans); text-align: left;
  color: var(--c-primary); background: #fff;
  border: 1px solid var(--c-primary-100); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bot__chip:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.bot__chip--primary { color: #fff; background: var(--c-accent-600); border-color: var(--c-accent-600); }
.bot__chip--primary:hover { background: var(--c-accent-700); border-color: var(--c-accent-700); color: #fff; }

/* Campo de texto */
.bot__form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--c-border); background: #fff; }
.bot__form input {
  flex: 1; min-width: 0; height: 42px; padding: 0 .875rem;
  font: 400 var(--fs-sm)/1 var(--font-sans); color: var(--c-text-strong);
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 999px;
}
.bot__form input:focus { outline: none; border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 3px rgba(49, 45, 129, .12); }
.bot__send { display: inline-flex; width: 42px; height: 42px; padding: 10px; flex-shrink: 0; color: #fff; background: var(--c-accent-600); border: 0; border-radius: 50%; cursor: pointer; }
.bot__send:hover { background: var(--c-accent-700); }
.bot__send svg { width: 100%; height: 100%; }
.bot__foot { margin: 0; padding: 0 .75rem .625rem; font-size: .6875rem; text-align: center; color: #718096; background: #fff; }

/* Celular: ventana a pantalla casi completa y botón solo con ícono */
@media (max-width: 767px) {
  .bot { right: 1rem; bottom: 1rem; }
  .bot__launcher { width: 56px; padding: 0; justify-content: center; }
  .bot__launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bot__panel { position: fixed; inset: auto .5rem 5rem .5rem; width: auto; height: calc(100dvh - 6.5rem); }
  .bot__invite { width: 230px; }
}

/* Botón "volver arriba" */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: #fff;
  background: var(--c-accent-600);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top .icon { width: 20px; height: 20px; stroke-width: 2.25; }

/* -------------------------------------------------------------------------
   12. ANIMACIONES AL HACER SCROLL
   Los elementos con [data-reveal] aparecen al entrar en pantalla.
   La clase .js en <html> asegura que sin JavaScript el contenido sea visible.
   ------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Respeta la preferencia de movimiento reducido del sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   AJUSTES PARA CELULAR (menos de 768px)
   ========================================================================= */
@media (max-width: 767px) {
  /* Portada más compacta: la tarjeta "Áreas de foco" se oculta */
  .hero { min-height: 0; }
  .hero__card { display: none; }
  .hero__inner { padding-block: 3rem 3.5rem; }

  /* Cifras: texto corto */
  .stat__detail { display: none; }
  .stat { padding-left: .875rem; }

  /* Equipo en la portada: tarjetas horizontales con foto pequeña */
  .team--home .member { display: grid; grid-template-columns: 112px 1fr; }
  .team--home .member__photo { aspect-ratio: auto; height: 100%; min-height: 140px; }
  .team--home .member__photo img { object-position: center 20%; }
  .team--home .member__body { padding: 1rem 1.125rem; }
  .team--home .member__body h3 { font-size: var(--fs-base); }
  .team--home .member__role { margin-bottom: .375rem; }

  /* Equipo en Quiénes somos: fotos menos altas */
  .team:not(.team--home) .member__photo { aspect-ratio: 4 / 3; }
  .team:not(.team--home) .member__photo img { object-position: center 18%; }

  /* Sectores en 2 columnas, más compactos */
  .sector { padding: 1.25rem 1rem; }
  .sector p { font-size: var(--fs-xs); }
  .sector .icon-badge--lg { width: 44px; height: 44px; }

  /* Secciones con menos aire */
  .section-head { margin-bottom: 2rem; }
  .card, .service, .mv { padding: 1.5rem; }
  .cta-band { padding: 2.5rem 1.25rem; }
  .map iframe { height: 260px; }
}

/* Celulares angostos: botones principales a todo el ancho */
@media (max-width: 479px) {
  .hero__actions .btn, .cta-band__actions .btn { width: 100%; }
}

/* =========================================================================
   BREAKPOINT TABLET — 768px
   ========================================================================= */
@media (min-width: 768px) {
  .container { padding-inline: 2rem; }

  .hero__inner { padding-block: 5rem; }
  .hero::before { background:
    linear-gradient(90deg, rgba(22, 20, 63, .86) 0%, rgba(22, 20, 63, .55) 45%, rgba(22, 20, 63, .12) 100%),
    linear-gradient(0deg, rgba(22, 20, 63, .55) 0%, transparent 35%); }

  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .sectors { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: 2.5rem; }
  .cta-band { padding: 4rem 3rem; }
  .map iframe { height: 380px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* =========================================================================
   AJUSTES PARA TABLET (768px a 1023px)
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Equipo en la portada: los 3 socios en una fila */
  .team.team--home { grid-template-columns: repeat(3, 1fr); }
  .team--home .member__body { padding: 1rem 1.125rem 1.25rem; }
  .team--home .member__body h3 { font-size: var(--fs-base); }

  /* Equipo en Quiénes somos: tarjetas horizontales (foto + biografía) */
  .team:not(.team--home) { grid-template-columns: 1fr; }
  .team:not(.team--home) .member { display: grid; grid-template-columns: 240px 1fr; }
  .team:not(.team--home) .member__photo { aspect-ratio: auto; height: 100%; }
  .team:not(.team--home) .member__photo img { object-position: center 20%; }

  /* Cifras: texto corto */
  .stat__detail { display: none; }
}

/* =========================================================================
   BREAKPOINT ESCRITORIO — 1024px
   ========================================================================= */
@media (min-width: 1024px) {
  :root { --header-h: 80px; }

  /* Navegación horizontal: se oculta la hamburguesa */
  .nav__toggle { display: none; }
  .nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__links { flex-direction: row; gap: 2rem; }
  .nav__link { padding: .5rem 0; border: 0; }
  /* Subrayado animado dorado */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--c-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .3s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__cta { margin-top: 0; }

  .hero__inner { grid-template-columns: 1fr auto; align-items: end; gap: 4rem; padding-block: 6rem 5rem; }
  .hero__card { width: 320px; }

  .page-hero { padding-block: 6rem 5.5rem; }

  .about-preview { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .logos { grid-template-columns: repeat(6, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .process { grid-template-columns: repeat(4, 1fr); }
  .story { grid-template-columns: 1.3fr 1fr; gap: 5rem; }
  .values { grid-template-columns: repeat(4, 1fr); }
  .value { flex-direction: column; }
  .team { grid-template-columns: repeat(3, 1fr); }
  .sectors { grid-template-columns: repeat(5, 1fr); }
  .contact { grid-template-columns: 1fr 1.15fr; grid-template-areas: "info form" "map form"; gap: 2rem 4rem; align-items: start; }
  .cta-split { grid-template-columns: 1fr 1.1fr; gap: 5rem; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .footer__grid > :first-child { grid-column: auto; }
}