/* ==========================================================================
   EFFICIENZA — Hoja de estilos única
   --------------------------------------------------------------------------
   Este archivo controla TODO el aspecto visual del sitio.
   Si no sabés CSS, no hace falta que lo toques: los textos se editan en los
   archivos .html y en /js/i18n.js.

   Índice:
    01. Variables de marca (colores, tipografías, medidas)
    02. Reset y base
    03. Utilidades y contenedores
    04. Fondo decorativo (grano, resplandores, motivo de chip)
    05. Barra de progreso de scroll
    06. Navegación y menú móvil
    07. Botones
    08. Isotipo SVG (el microchip) y su animación
    09. Hero
    10. Franja de valor
    11. Servicios
    12. Cómo trabajamos (sección pineada)
    13. Sectores
    14. Casos
    15. Por qué elegirnos
    16. Nosotros
    17. Contacto
    18. Footer
    19. Botón flotante de WhatsApp
    20. Páginas legales y 404
    21. Animaciones de aparición (scroll reveal)
    22. Responsive
    23. Accesibilidad y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   01. VARIABLES DE MARCA
   Los colores fueron muestreados directamente de los archivos del logo.
   ========================================================================== */
:root {
  /* --- Fondos --- */
  --bg-base: #0B0C0E;        /* negro exacto del logo, neutro, sin tinte azul */
  --bg-elevated: #141519;    /* superficies elevadas (cards) */
  --bg-card: #16171C;
  --bg-card-alto: #1B1C22;

  /* --- Violetas de marca --- */
  --violeta: #6C5CE7;        /* violeta medio, para degradados */
  --violeta-marca: #634CD4;  /* hex exacto del logo sobre fondo claro */
  --violeta-claro: #8F81FF;  /* hex exacto del logo sobre fondo oscuro */
  --indigo: #4338CA;
  --lavanda: #AFACFF;        /* hex exacto de las patas del ícono violeta */
  --acento-sutil: #D946EF;   /* magenta: SOLO como tercer punto de degradado */

  /* --- Texto --- */
  --texto: #F5F5F4;          /* blanco cálido exacto del logo */
  --texto-suave: #A1A1AA;    /* gris del logo — contraste 7.6:1 sobre el fondo */
  --texto-tenue: #8A8A93;    /* detalles secundarios — contraste 5.7:1, cumple AA */
  --gris-pata: #52525B;      /* gris de las patas del chip sobre fondo oscuro */

  /* --- Líneas y vidrio --- */
  --borde: rgba(255, 255, 255, 0.08);
  --borde-fuerte: rgba(255, 255, 255, 0.14);
  --vidrio: rgba(255, 255, 255, 0.04);
  --vidrio-fuerte: rgba(255, 255, 255, 0.06);

  /* --- Degradados --- */
  --grad-marca: linear-gradient(100deg, var(--indigo) 0%, var(--violeta) 42%, var(--violeta-claro) 72%, var(--lavanda) 100%);
  /* El magenta aparece solo como último punto y muy diluido: es un guiño, no un color de marca */
  --grad-texto: linear-gradient(96deg, #C6C1FF 0%, #8F81FF 42%, #A99CFF 74%, #C6AEEF 100%);
  --grad-linea: linear-gradient(90deg, transparent, var(--violeta-claro), var(--lavanda), transparent);

  /* --- Tipografías --- */
  /* NOTA DE DISEÑO: el logotipo "Efficienza" está hecho en una neo-grotesca
     neutra. Space Grotesk (la primera opción del encargo) tiene letras con
     mucha personalidad propia y al ponerlo al lado del logo el contraste
     resultaba discordante. Por eso se usa Inter Tight, que sí acompaña. */
  --font-titulo: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Escala tipográfica fluida --- */
  --fs-eyebrow: clamp(0.66rem, 0.61rem + 0.2vw, 0.78rem);
  --fs-h1: clamp(2.3rem, 1.25rem + 4.4vw, 5rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.5vw, 3.2rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --fs-h4: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  --fs-mini: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
  --fs-numero: clamp(2.4rem, 1.6rem + 2.8vw, 4rem);

  /* --- Medidas --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --gutter: clamp(20px, 5vw, 48px);
  --ancho: 1180px;
  --sec-y: clamp(80px, 10vw, 160px);
  --nav-h: 76px;

  /* --- Curvas de animación --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

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

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Compensa el nav fijo cuando se salta a un ancla */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Cuando Lenis está activo desactivamos el scroll nativo suave */
html.lenis { scroll-behavior: auto; }
html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg-base);
  color: var(--texto);
  font-family: var(--font-texto);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol { list-style: none; }

/* Foco visible y consistente en todo el sitio (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--violeta-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(143, 129, 255, 0.32);
  color: #fff;
}

/* Salto al contenido para lectores de pantalla y teclado */
.saltar-contenido {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--violeta-marca);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  transition: top 0.2s var(--ease);
}
.saltar-contenido:focus { top: 16px; }

/* Clase para texto que solo leen los lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. UTILIDADES Y CONTENEDORES
   ========================================================================== */
.contenedor {
  width: min(var(--ancho), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.seccion {
  position: relative;
  padding-block: var(--sec-y);
}

.seccion--angosta { --ancho: 900px; }

/* Encabezado estándar de sección */
.seccion__cabecera {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

/* "Eyebrow": la etiqueta monoespaciada de cada sección.
   Replica el tratamiento de la bajada del logo. Es el guiño de marca. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violeta-claro);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.seccion__cabecera--centrada .eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

.texto-degradado {
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Respaldo por si el navegador no soporta background-clip */
  -webkit-text-fill-color: transparent;
}

.bajada {
  font-size: var(--fs-lead);
  color: var(--texto-suave);
  line-height: 1.65;
  margin-top: 22px;
  text-wrap: pretty;
}

.texto-suave { color: var(--texto-suave); }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
}

/* Superficie de vidrio reutilizable */
.vidrio {
  background: var(--vidrio);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Línea divisoria muy tenue */
.divisor {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--borde-fuerte), transparent);
}

/* ==========================================================================
   04. FONDO DECORATIVO
   Tres capas: resplandores violetas, motivo de chip repetido y grano.
   Todas son decorativas y están fuera del flujo (aria-hidden en el HTML).
   ========================================================================== */
.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Resplandores difusos */
.fondo__resplandor {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.fondo__resplandor--1 {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle, rgba(99, 76, 212, 0.42), transparent 68%);
}
.fondo__resplandor--2 {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  top: 46%; right: -14vw;
  background: radial-gradient(circle, rgba(67, 56, 202, 0.34), transparent 68%);
}
.fondo__resplandor--3 {
  width: 34vw; height: 34vw;
  min-width: 240px; min-height: 240px;
  bottom: -8vw; left: 22%;
  background: radial-gradient(circle, rgba(175, 172, 255, 0.16), transparent 68%);
}

/* Motivo del chip repetido, rotado y muy tenue.
   La imagen es un SVG embebido (no hay pedido extra al servidor). */
.fondo__motivo {
  position: absolute;
  inset: -20% -20% -20% -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' viewBox='0 0 144 144'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Crect x='22' y='22' width='100' height='100' rx='10'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='46' y='47' width='52' height='10'/%3E%3Crect x='46' y='87' width='52' height='10'/%3E%3Crect x='44' y='0' width='8' height='20'/%3E%3Crect x='92' y='0' width='8' height='20'/%3E%3Crect x='44' y='124' width='8' height='20'/%3E%3Crect x='92' y='124' width='8' height='20'/%3E%3Crect x='0' y='44' width='20' height='8'/%3E%3Crect x='0' y='92' width='20' height='8'/%3E%3Crect x='124' y='44' width='20' height='8'/%3E%3Crect x='124' y='92' width='20' height='8'/%3E%3C/g%3E%3Crect x='46' y='67' width='34' height='10' fill='%238F81FF'/%3E%3C/svg%3E");
  background-size: 210px 210px;
  opacity: 0.013;
  transform: rotate(-12deg) scale(1.4);
  will-change: transform;
  /* Se desvanece hacia el centro para no competir con el texto */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, transparent 0%, #000 78%);
  mask-image: radial-gradient(120% 90% at 50% 40%, transparent 0%, #000 78%);
}

/* Capa de grano/ruido muy leve */
.fondo__grano {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* Todo el contenido va por encima del fondo */
.envoltorio { position: relative; z-index: 1; }

/* Transición suave al cambiar de idioma */
.envoltorio { transition: opacity 0.28s var(--ease-suave); }
body.cambiando-idioma .envoltorio { opacity: 0.35; }

/* ==========================================================================
   05. BARRA DE PROGRESO DE SCROLL
   ========================================================================== */
.progreso {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.progreso__barra {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-marca);
  box-shadow: 0 0 12px rgba(143, 129, 255, 0.6);
  will-change: transform;
}

/* ==========================================================================
   06. NAVEGACIÓN
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height 0.35s var(--ease), background-color 0.35s var(--ease),
              border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.esta-compacto {
  height: 62px;
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--borde);
}

.nav__interior {
  width: min(var(--ancho), 100% - (var(--gutter) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Marca del nav: isotipo + nombre */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.marca__nombre {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}
.marca .isotipo { width: 26px; height: 26px; }
.nav.esta-compacto .marca .isotipo { width: 24px; height: 24px; }

/* Menú */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__enlace {
  position: relative;
  padding: 8px 13px;
  font-size: 0.925rem;
  color: var(--texto-suave);
  border-radius: var(--r-sm);
  transition: color 0.25s var(--ease-suave), background-color 0.25s var(--ease-suave);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 1px;
  background: var(--violeta-claro);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease);
}
.nav__enlace:hover { color: var(--texto); }
.nav__enlace:hover::after { transform: scaleX(1); }
.nav__enlace.esta-activo { color: var(--texto); }
.nav__enlace.esta-activo::after { transform: scaleX(1); opacity: 0.7; }

/* Acciones de la derecha */
.nav__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Selector de idioma */
.idioma {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--borde);
  background: var(--vidrio);
  border-radius: var(--r-full);
}
.idioma__boton {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  border-radius: var(--r-full);
  color: var(--texto-suave);
  transition: color 0.25s var(--ease-suave), background-color 0.25s var(--ease-suave);
}
.idioma__boton:hover { color: var(--texto); }
.idioma__boton[aria-pressed="true"] {
  background: rgba(143, 129, 255, 0.16);
  color: var(--texto);
  box-shadow: inset 0 0 0 1px rgba(143, 129, 255, 0.32);
}

/* Botón hamburguesa (solo móvil) */
.hamburguesa {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--borde);
  background: var(--vidrio);
  border-radius: var(--r-sm);
  position: relative;
  flex-shrink: 0;
}
.hamburguesa span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1.5px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.hamburguesa span:nth-child(1) { top: 15px; }
.hamburguesa span:nth-child(2) { top: 20.5px; }
.hamburguesa span:nth-child(3) { top: 26px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 109;
  background: rgba(11, 12, 14, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.menu-movil.esta-abierto { opacity: 1; visibility: visible; }

.menu-movil__lista { display: flex; flex-direction: column; gap: 4px; }
.menu-movil__enlace {
  display: block;
  font-family: var(--font-titulo);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu-movil.esta-abierto .menu-movil__enlace {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.06s * var(--i, 0) + 0.1s);
}
.menu-movil__pie {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.menu-movil__pie .mono { color: var(--texto-tenue); }

/* ==========================================================================
   07. BOTONES
   ========================================================================== */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-family: var(--font-texto);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
  will-change: transform;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Botón principal: degradado de marca */
.boton--primario {
  color: #fff;
  background: linear-gradient(100deg, var(--indigo), var(--violeta) 55%, var(--violeta-claro));
  box-shadow: 0 6px 24px -8px rgba(108, 92, 231, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.boton--primario:hover {
  box-shadow: 0 12px 34px -8px rgba(108, 92, 231, 0.85),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Botón secundario: vidrio */
.boton--secundario {
  color: var(--texto);
  background: var(--vidrio);
  border: 1px solid var(--borde-fuerte);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.boton--secundario:hover {
  background: var(--vidrio-fuerte);
  border-color: rgba(143, 129, 255, 0.42);
}

/* Botón chico del nav */
.boton--chico { padding: 9px 18px; font-size: 0.9rem; }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--violeta-claro);
  font-weight: 500;
  font-size: 0.95rem;
}
.enlace-flecha svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* ==========================================================================
   08. ISOTIPO SVG (EL MICROCHIP)
   Reconstruido en vector a partir de los PNG de marca, con fondo transparente.
   Geometría medida del original: cuerpo de 100x100 con radio 10 y trazo 4,
   tres barras de 10 de alto (la del medio, violeta, mide 34 en vez de 52) y
   ocho patas de 8 de ancho por 20 de largo.
   ========================================================================== */
.isotipo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
}
.isotipo__cuerpo { stroke: var(--texto); }
.isotipo__barra { fill: var(--texto); }
.isotipo__barra--violeta { fill: var(--violeta-claro); }
.isotipo__pata { fill: var(--gris-pata); }

/* Variante para fondos donde queremos el chip en violeta */
.isotipo--acento .isotipo__cuerpo { stroke: var(--violeta-claro); }
.isotipo--acento .isotipo__pata { fill: rgba(143, 129, 255, 0.5); }

/* --- Animación de entrada --- */
/* Las patas aparecen escalonadas y la barra violeta se "dibuja" al final.
   transform-box: fill-box hace que cada figura se transforme respecto de sí
   misma y no de todo el lienzo del SVG. */
.isotipo--animado .isotipo__pata,
.isotipo--animado .isotipo__cuerpo,
.isotipo--animado .isotipo__barra {
  transform-box: fill-box;
}
.isotipo--animado .isotipo__pata {
  transform: scale(0);
  opacity: 0;
}
/* Cada pata crece desde el borde del chip hacia afuera */
.isotipo--animado .isotipo__pata--arriba { transform-origin: 50% 100%; }
.isotipo--animado .isotipo__pata--abajo  { transform-origin: 50% 0%; }
.isotipo--animado .isotipo__pata--izq    { transform-origin: 100% 50%; }
.isotipo--animado .isotipo__pata--der    { transform-origin: 0% 50%; }

.isotipo--animado .isotipo__cuerpo {
  transform: scale(0.7);
  transform-origin: 50% 50%;
  opacity: 0;
}
.isotipo--animado .isotipo__barra {
  transform: scaleX(0);
  transform-origin: 0% 50%;
  opacity: 0;
}
.isotipo--animado.esta-visible .isotipo__cuerpo {
  animation: chip-cuerpo 0.7s var(--ease) 0.05s forwards;
}
.isotipo--animado.esta-visible .isotipo__pata {
  animation: chip-pata 0.5s var(--ease) forwards;
}
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(1) { animation-delay: 0.30s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(2) { animation-delay: 0.36s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(3) { animation-delay: 0.42s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(4) { animation-delay: 0.48s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(5) { animation-delay: 0.54s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(6) { animation-delay: 0.60s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(7) { animation-delay: 0.66s; }
.isotipo--animado.esta-visible .isotipo__pata:nth-of-type(8) { animation-delay: 0.72s; }
.isotipo--animado.esta-visible .isotipo__barra {
  animation: chip-barra 0.55s var(--ease) forwards;
}
.isotipo--animado.esta-visible .isotipo__barra--sup { animation-delay: 0.55s; }
.isotipo--animado.esta-visible .isotipo__barra--inf { animation-delay: 0.66s; }
.isotipo--animado.esta-visible .isotipo__barra--violeta { animation-delay: 0.86s; }

@keyframes chip-cuerpo {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes chip-pata {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes chip-barra {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Pulso suave permanente de la barra violeta (solo en el isotipo grande).
   Arranca después de que terminó la animación de entrada. */
.isotipo--pulso.esta-visible .isotipo__barra--violeta {
  animation: chip-barra 0.55s var(--ease) 0.86s forwards,
             chip-pulso 3.6s var(--ease-suave) 2.4s infinite;
  transform-box: fill-box;
  transform-origin: 0% 50%;
}
@keyframes chip-pulso {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  45%      { transform: scaleX(1.34); opacity: 0.85; }
}

/* ==========================================================================
   09. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 90px));
  padding-bottom: clamp(60px, 9vw, 120px);
  overflow: hidden;
}

/* Lienzo con el degradado animado (mesh de blobs) */
.hero__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Suave a propósito: el negro neutro del logo tiene que seguir mandando */
  opacity: 0.42;
  filter: blur(38px);
  transform: scale(1.12);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(85% 75% at 62% 45%, #000 0%, transparent 82%);
  mask-image: radial-gradient(85% 75% at 62% 45%, #000 0%, transparent 82%);
}

/* Desvanecido inferior para fundir el hero con el resto */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
}

.hero__interior {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__titulo {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 700;
}
/* Cada línea del título ocupa un renglón propio */
.hero__titulo > [data-palabras] { display: block; }

.hero__tagline {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.66rem + 0.28vw, 0.92rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.hero__parrafo {
  max-width: 54ch;
  margin-top: 22px;
  font-size: var(--fs-lead);
  color: var(--texto-suave);
  text-wrap: pretty;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
}
.hero__pie-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--texto-tenue);
}
.hero__pie-punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violeta-claro);
  box-shadow: 0 0 10px rgba(143, 129, 255, 0.9);
  flex-shrink: 0;
}

/* Isotipo grande de la derecha */
.hero__isotipo {
  display: grid;
  place-items: center;
  position: relative;
}
.hero__isotipo .isotipo {
  width: min(320px, 62vw);
  height: auto;
}
.hero__isotipo::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.35), transparent 66%);
  filter: blur(46px);
}
/* Anillos concéntricos decorativos */
.hero__anillo {
  position: absolute;
  border: 1px solid var(--borde);
  border-radius: 50%;
  aspect-ratio: 1;
}
.hero__anillo--1 { width: 82%; }
.hero__anillo--2 { width: 104%; border-color: rgba(255, 255, 255, 0.05); }

/* ==========================================================================
   10. FRANJA DE VALOR
   ========================================================================== */
.valor {
  padding-block: clamp(20px, 3vw, 40px) 0;
}
.valor__grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.valor__item {
  padding: 22px 22px 24px;
  border-radius: var(--r-md);
  background: var(--vidrio);
  border: 1px solid var(--borde);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.valor__item:hover {
  border-color: rgba(143, 129, 255, 0.32);
  background: var(--vidrio-fuerte);
  transform: translateY(-3px);
}
.valor__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--violeta-claro);
  display: block;
  margin-bottom: 12px;
}
.valor__titulo {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.valor__texto {
  font-size: 0.9rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

/* ==========================================================================
   11. SERVICIOS
   ========================================================================== */
.servicios__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Tarjeta genérica con brillo que sigue al cursor y tilt 3D */
.tarjeta {
  position: relative;
  padding: 30px 28px 32px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--borde);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
}
/* Resplandor interno que sigue al puntero */
.tarjeta__brillo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s var(--ease-suave);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(143, 129, 255, 0.13), transparent 62%);
}
/* Borde luminoso que sigue al puntero (truco de máscara) */
.tarjeta__borde {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-suave);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(175, 172, 255, 0.7), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.tarjeta:hover .tarjeta__brillo,
.tarjeta:hover .tarjeta__borde,
.tarjeta:focus-within .tarjeta__brillo,
.tarjeta:focus-within .tarjeta__borde { opacity: 1; }

.tarjeta__icono {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(143, 129, 255, 0.09);
  border: 1px solid rgba(143, 129, 255, 0.18);
  margin-bottom: 20px;
}
.tarjeta__icono svg { width: 24px; height: 24px; }
.tarjeta__titulo { margin-bottom: 10px; }
.tarjeta__texto {
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Iconos: mismo lenguaje que el isotipo (trazo geométrico, 1.6 de grosor,
   esquinas redondeadas y un acento violeta puntual). */
.ico {
  fill: none;
  stroke: var(--texto);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico__acento { stroke: var(--violeta-claro); }
.ico__acento-relleno { fill: var(--violeta-claro); stroke: none; }
/* Variante que toma el color del contenedor (la usan los íconos de Sectores) */
.ico--hereda { stroke: currentColor; }

/* ==========================================================================
   12. CÓMO TRABAJAMOS (SECCIÓN PINEADA)
   En desktop la sección se "pega" y los pasos avanzan al scrollear.
   En móvil y con movimiento reducido se convierte en una lista apilada normal.
   ========================================================================== */
.proceso { position: relative; }

.proceso__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.proceso__izquierda { position: relative; }

/* Barra de progreso vertical que se dibuja */
.proceso__riel {
  position: relative;
  margin-top: 34px;
  padding-left: 26px;
}
.proceso__riel::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--borde);
  border-radius: 2px;
}
.proceso__riel-relleno {
  position: absolute;
  left: 4px; top: 6px;
  width: 2px;
  height: calc(100% - 12px);
  background: linear-gradient(180deg, var(--indigo), var(--violeta-claro), var(--lavanda));
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}
.proceso__indice { display: flex; flex-direction: column; gap: 2px; }
.proceso__indice-item {
  position: relative;
  padding: 9px 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color 0.35s var(--ease);
  cursor: default;
}
.proceso__indice-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--gris-pata);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.proceso__indice-item.esta-activo { color: var(--texto); }
.proceso__indice-item.esta-activo::before {
  transform: translateY(-50%) scale(1);
  border-color: var(--violeta-claro);
  box-shadow: 0 0 0 4px rgba(143, 129, 255, 0.14);
}

/* Panel derecho con los pasos */
.proceso__pasos { position: relative; }

.paso {
  border-radius: var(--r-lg);
  border: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  padding: clamp(26px, 3vw, 38px);
}
.paso__cabecera {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.paso__num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.paso__titulo { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); }
.paso__texto {
  color: var(--texto-suave);
  font-size: var(--fs-body);
  max-width: 58ch;
}
.paso__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lavanda);
  background: rgba(143, 129, 255, 0.1);
  border: 1px solid rgba(143, 129, 255, 0.26);
}

/* El paso 5 es el diferencial: se destaca */
.paso--destacado {
  border-color: rgba(143, 129, 255, 0.38);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(108, 92, 231, 0.2), transparent 58%),
    linear-gradient(180deg, var(--bg-card-alto), var(--bg-elevated));
  box-shadow: 0 20px 60px -30px rgba(108, 92, 231, 0.8);
}

/* Modo pineado (se activa desde JS solo en desktop) */
.proceso.esta-pineado .proceso__layout {
  /* Mientras la sección está "pegada", el contenido se centra en la pantalla
     para que no quede un hueco enorme debajo */
  min-height: calc(100vh - 190px);
  align-items: center;
}
.proceso.esta-pineado .proceso__pasos {
  position: relative;
  min-height: 300px;
}
.proceso.esta-pineado .paso {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.proceso.esta-pineado .paso.esta-activo {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Modo apilado (móvil / movimiento reducido): lista normal */
.proceso__pasos { display: flex; flex-direction: column; gap: 16px; }
.proceso.esta-pineado .proceso__pasos { display: block; }

/* ==========================================================================
   13. SECTORES
   ========================================================================== */
.sectores__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.sector {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--r-lg);
  background: var(--vidrio);
  border: 1px solid var(--borde);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.sector::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--grad-marca);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
.sector:hover {
  transform: translateY(-4px);
  border-color: rgba(143, 129, 255, 0.28);
  background: var(--vidrio-fuerte);
}
.sector:hover::before { transform: scaleX(1); }
.sector__icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  color: var(--violeta-claro);
}
.sector__icono svg { width: 28px; height: 28px; }
.sector__titulo { margin-bottom: 8px; font-size: 1.05rem; }
.sector__texto { font-size: 0.9rem; color: var(--texto-suave); line-height: 1.55; }

/* ==========================================================================
   14. CASOS
   ========================================================================== */
.casos__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.caso {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px 32px;
}
.caso__sector {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violeta-claro);
}
.caso__bloque { position: relative; padding-left: 18px; }
.caso__bloque::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--borde-fuerte);
}
.caso__bloque--resultado::before { background: var(--grad-marca); }
.caso__etiqueta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 5px;
}
.caso__texto { font-size: 0.94rem; color: var(--texto-suave); line-height: 1.6; }
.caso__bloque--resultado .caso__texto { color: var(--texto); }

/* --- Caso destacado: A Fuego --- */
.destacado {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(143, 129, 255, 0.24);
  background:
    radial-gradient(100% 120% at 0% 0%, rgba(67, 56, 202, 0.22), transparent 58%),
    linear-gradient(180deg, var(--bg-card-alto), var(--bg-elevated));
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
}
.destacado__grilla {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.destacado__nombre {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.destacado__cliente {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 20px;
}
.destacado__texto { color: var(--texto-suave); margin-bottom: 22px; max-width: 56ch; }
.destacado__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavanda);
  background: rgba(143, 129, 255, 0.09);
  border: 1px solid rgba(143, 129, 255, 0.22);
}

/* Capturas de pantalla (con marco elegante) */
.destacado__capturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.captura {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--borde-fuerte);
  background: linear-gradient(160deg, rgba(67, 56, 202, 0.16), rgba(11, 12, 14, 0.6));
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
}
.captura img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.captura--ancha { aspect-ratio: 4 / 3; }

/* Estado "todavía no hay imagen": esqueleto elegante, nunca un cuadro gris */
.marcador {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(108, 92, 231, 0.18), transparent 62%),
    var(--bg-elevated);
}
.marcador::after {
  /* Brillo tipo "skeleton" que barre muy despacio */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.05) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: barrido 3.2s ease-in-out infinite;
}
@keyframes barrido {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.marcador .isotipo { width: 34px; height: 34px; opacity: 0.5; }
.marcador__texto {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1.7;
}
/* Cuando la imagen sí carga, el marcador desaparece */
.captura.tiene-imagen .marcador,
.retrato.tiene-imagen .retrato__marcador { display: none; }

/* ==========================================================================
   15. POR QUÉ ELEGIRNOS
   ========================================================================== */
.porque__grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.diferencial {
  padding: 32px 26px 34px;
  border-radius: var(--r-lg);
  background: var(--vidrio);
  border: 1px solid var(--borde);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.diferencial:hover {
  border-color: rgba(143, 129, 255, 0.28);
  background: var(--vidrio-fuerte);
}
.diferencial__numero {
  font-family: var(--font-titulo);
  font-size: var(--fs-numero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  display: block;
}
/* El símbolo ∞ dibuja mucho más chico que los números: lo compensamos */
.diferencial__numero--simbolo {
  font-size: calc(var(--fs-numero) * 1.35);
  line-height: 0.78;
  margin-bottom: 12px;
}
.diferencial__titulo { margin-bottom: 8px; font-size: 1.05rem; }
.diferencial__texto { font-size: 0.92rem; color: var(--texto-suave); line-height: 1.6; }

/* ==========================================================================
   16. NOSOTROS
   ========================================================================== */
.nosotros__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.nosotros__texto p + p { margin-top: 18px; }
.nosotros__texto p { color: var(--texto-suave); }
.nosotros__destacar { color: var(--texto); font-weight: 500; }

.nosotros__cita {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--vidrio);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--texto-suave);
}
.nosotros__cita strong { color: var(--lavanda); font-weight: 500; }

/* Equipo */
.equipo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.persona {
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--borde);
  text-align: center;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.persona:hover { border-color: rgba(143, 129, 255, 0.3); transform: translateY(-3px); }

/* Marco de la foto: anillo con el degradado de marca */
.retrato {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  padding: 2px;
  background: var(--grad-marca);
}
.retrato__interior {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated);
  display: grid;
  place-items: center;
}
.retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Placeholder con iniciales, mientras no haya foto */
.retrato__marcador {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 80% at 50% 20%, rgba(108, 92, 231, 0.28), transparent 70%),
    var(--bg-elevated);
}
.retrato__iniciales {
  font-family: var(--font-titulo);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.persona__nombre { font-size: 1.08rem; margin-bottom: 4px; }
.persona__rol {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ==========================================================================
   17. CONTACTO
   ========================================================================== */
.contacto {
  position: relative;
}
.contacto__panel {
  position: relative;
  border-radius: clamp(var(--r-lg), 3vw, 32px);
  border: 1px solid var(--borde-fuerte);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(108, 92, 231, 0.2), transparent 62%),
    linear-gradient(180deg, var(--bg-card-alto), var(--bg-elevated));
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
}
.contacto__panel::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 0;
  height: 1px;
  background: var(--grad-linea);
}
.contacto__tarjetas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: clamp(30px, 4vw, 48px);
}
.contacto-tarjeta {
  padding: 28px 26px 30px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.contacto-tarjeta:hover {
  border-color: rgba(143, 129, 255, 0.34);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}
.contacto-tarjeta__nombre { font-size: 1.2rem; margin-bottom: 4px; }
.contacto-tarjeta__rol {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 22px;
  display: block;
}
.contacto-tarjeta__enlaces { display: flex; flex-direction: column; gap: 10px; }
.contacto-enlace {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--vidrio);
  font-size: 0.92rem;
  color: var(--texto);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
  word-break: break-word;
}
.contacto-enlace svg { width: 18px; height: 18px; flex-shrink: 0; }
.contacto-enlace:hover {
  border-color: rgba(143, 129, 255, 0.4);
  background: rgba(143, 129, 255, 0.08);
  transform: translateX(3px);
}
.contacto-enlace--wa svg { color: #25D366; }
.contacto-enlace--mail svg { color: var(--violeta-claro); }

.contacto__nota {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 24px;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contacto__nota .isotipo { width: 20px; height: 20px; margin-top: 3px; opacity: 0.7; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.pie {
  position: relative;
  border-top: 1px solid var(--borde);
  padding-block: clamp(48px, 6vw, 80px) 32px;
  margin-top: clamp(60px, 8vw, 120px);
}
.pie__superior {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr));
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: 40px;
}
.pie__marca .marca { margin-bottom: 14px; }
.pie__tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.pie__descripcion {
  font-size: 0.9rem;
  color: var(--texto-tenue);
  max-width: 34ch;
  line-height: 1.6;
}
.pie__titulo {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 16px;
}
.pie__lista { display: flex; flex-direction: column; gap: 9px; }
.pie__lista a {
  font-size: 0.92rem;
  color: var(--texto-suave);
  transition: color 0.25s var(--ease-suave);
  width: fit-content;
}
.pie__lista a:hover { color: var(--texto); }

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
  font-size: 0.84rem;
  color: var(--texto-tenue);
}
.pie__lugar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==========================================================================
   19. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.wa-flotante {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 100;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1FAD52;
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(31, 173, 82, 0.9);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
}
.wa-flotante.esta-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.wa-flotante:hover { transform: translateY(-3px) scale(1.04); }
.wa-flotante svg { width: 27px; height: 27px; }
/* Pulso discreto */
.wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: wa-pulso 2.6s var(--ease-suave) infinite;
}
@keyframes wa-pulso {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ==========================================================================
   20. PÁGINAS LEGALES Y 404
   ========================================================================== */
.legal {
  padding-top: calc(var(--nav-h) + clamp(50px, 8vw, 96px));
  padding-bottom: clamp(50px, 7vw, 100px);
}
.legal__cabecera { margin-bottom: clamp(32px, 4vw, 56px); }
.legal__titulo { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.legal__fecha {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 16px;
}
.legal__contenido { max-width: 74ch; }
.legal__contenido h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  margin-top: 44px;
  margin-bottom: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
}
.legal__contenido h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal__contenido p { color: var(--texto-suave); margin-bottom: 14px; }
.legal__contenido ul {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal__contenido li {
  position: relative;
  padding-left: 20px;
  color: var(--texto-suave);
}
.legal__contenido li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 7px; height: 2px;
  background: var(--violeta-claro);
  border-radius: 2px;
}
.legal__contenido a {
  color: var(--violeta-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__contenido strong { color: var(--texto); font-weight: 500; }

.legal__aviso {
  margin-top: 40px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(143, 129, 255, 0.24);
  background: rgba(143, 129, 255, 0.06);
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* 404 */
.error404 {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 60px;
}
.error404__codigo {
  font-family: var(--font-titulo);
  font-size: clamp(5rem, 3rem + 12vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.error404 .isotipo { width: 64px; height: 64px; margin: 0 auto 28px; }
.error404__titulo { margin-top: 18px; }
.error404__texto { margin-top: 16px; color: var(--texto-suave); max-width: 46ch; margin-inline: auto; }
.error404__acciones { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   21. ANIMACIONES DE APARICIÓN (SCROLL REVEAL)
   Se activan con IntersectionObserver desde main.js.
   Solo se animan transform y opacity (barato para el navegador).
   ========================================================================== */
[data-revelar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.08s);
  will-change: transform, opacity;
}
[data-revelar].esta-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
[data-revelar="izquierda"] { transform: translateX(-26px); }
[data-revelar="derecha"] { transform: translateX(26px); }
[data-revelar="escala"] { transform: scale(0.96); }

/* Revelado del título del hero, palabra por palabra */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
/* Degradado de marca repartido palabra por palabra (lo recoloca main.js
   para que se lea como una sola rampa continua) */
.palabra__grad {
  background-image: var(--grad-texto);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.palabra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.055s + 0.15s);
}
.esta-visible .palabra > span,
.palabra.esta-visible > span { transform: translateY(0); }

/* Capas con parallax (el desplazamiento lo aplica JS con transform) */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   22. RESPONSIVE
   Diseñado mobile-first; estos son los ajustes por tamaño.
   Puntos verificados: 360px, 768px, 1280px y 1920px.
   ========================================================================== */

/* --- Hasta 1100px --- */
@media (max-width: 1100px) {
  .valor__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicios__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .porque__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__superior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Entre 981 y 1120px: el menú se aprieta un poco para entrar en una línea --- */
@media (min-width: 981px) and (max-width: 1120px) {
  .nav__enlace { font-size: 0.86rem; padding: 8px 9px; }
  .nav__enlace::after { left: 9px; right: 9px; }
  .nav__acciones .boton--cta { display: none; }
  .nav__interior { gap: 16px; }
}

/* --- Hasta 980px: el nav pasa a menú móvil --- */
@media (max-width: 980px) {
  .nav__menu { display: none; }
  .nav__acciones .boton--cta { display: none; }
  .hamburguesa { display: block; }

  .hero__interior { grid-template-columns: 1fr; }
  .hero__isotipo { order: -1; margin-bottom: 8px; }
  .hero__isotipo .isotipo { width: min(180px, 45vw); }
  .hero__anillo { display: none; }

  .proceso__layout { grid-template-columns: 1fr; }
  .proceso__riel { margin-top: 26px; }
  .destacado__grilla { grid-template-columns: 1fr; }
  .nosotros__layout { grid-template-columns: 1fr; }
}

/* --- Hasta 768px: se apagan los efectos pesados (regla de oro) --- */
@media (max-width: 768px) {
  :root { --nav-h: 66px; }

  .casos__grilla { grid-template-columns: 1fr; }
  .contacto__tarjetas { grid-template-columns: 1fr; }
  .hero__lienzo { display: none; } /* el canvas no corre en móvil */
  .fondo__motivo { opacity: 0.016; }

  /* El sticky scroll nunca se activa por debajo de 768px, pero por las dudas
     dejamos escrita también la versión apilada. */
  .proceso.esta-pineado .proceso__pasos { display: flex; min-height: 0; }
  .proceso.esta-pineado .paso {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Los reveals se reducen a un fade corto */
  [data-revelar] { transform: translateY(14px); transition-duration: 0.5s; }
  [data-revelar="izquierda"], [data-revelar="derecha"] { transform: translateY(14px); }
}

/* --- Hasta 620px --- */
@media (max-width: 620px) {
  .valor__grilla { grid-template-columns: 1fr; }
  .servicios__grilla { grid-template-columns: 1fr; }
  .porque__grilla { grid-template-columns: 1fr; }
  .equipo { grid-template-columns: 1fr; }
  .pie__superior { grid-template-columns: 1fr; }
  .destacado__capturas { grid-template-columns: 1fr; }
  .captura { aspect-ratio: 16 / 10; }
  .hero__acciones .boton { width: 100%; }
  .pie__inferior { flex-direction: column; align-items: flex-start; }
}

/* --- Pantallas muy grandes (1920px+) --- */
@media (min-width: 1600px) {
  :root { --ancho: 1320px; }
}

/* ==========================================================================
   23. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   Si el sistema del visitante pide menos movimiento, apagamos parallax,
   partículas, sticky scroll y cualquier animación decorativa.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }

  [data-revelar] { transform: none; }
  [data-revelar="izquierda"],
  [data-revelar="derecha"],
  [data-revelar="escala"] { transform: none; }

  .palabra > span { transform: none; }

  .hero__lienzo { display: none; }
  .fondo__motivo { display: none; }
  .marcador::after { display: none; }
  .wa-flotante::before { display: none; }

  .isotipo--animado .isotipo__pata,
  .isotipo--animado .isotipo__cuerpo,
  .isotipo--animado .isotipo__barra {
    transform: none;
    opacity: 1;
    animation: none !important;
  }

  .proceso.esta-pineado .proceso__pasos { display: flex; min-height: 0; }
  .proceso.esta-pineado .paso {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Modo alto contraste del sistema */
@media (forced-colors: active) {
  .boton--primario { border: 1px solid; }
  .tarjeta, .sector, .diferencial, .persona { border: 1px solid; }
}

/* Impresión: versión limpia en blanco y negro */
@media print {
  .nav, .menu-movil, .wa-flotante, .progreso, .fondo, .hero__lienzo { display: none !important; }
  body { background: #fff; color: #000; }
  .texto-degradado, .paso__num, .diferencial__numero, .error404__codigo {
    -webkit-text-fill-color: currentColor;
    color: #000;
    background: none;
  }
}