/* ==========================================================================
   ELEVA PROJECT — Sistema de diseño
   --------------------------------------------------------------------------
   Identidad de marca de Eleva Project:
   minimalista, profesional, tecnológica, elegante, sin excesos.
   Referencias: Apple, Notion, Linear, Stripe, Framer.
   Prohibido: neones, estética futurista, robots, cerebros digitales.

   ¿QUIERES CAMBIAR LOS COLORES O EL ESPACIADO DE TODA LA WEB?
   Toca solo el bloque :root de abajo. Nada más.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TIPOGRAFÍAS DE MARCA
   --------------------------------------------------------------------------
   Identidad tipográfica de Susana Padilla: Montserrat para titulares y
   cuerpo de texto, Cormorant Garamond para citas y frases destacadas.
   Las fuentes de marca originales (Sloop Script y Sholar) son de pago
   y no están disponibles como web font libre, así que se sustituyen por
   estas dos de Google Fonts, cargadas desde cada página HTML — por eso
   aquí no hace falta ningún @font-face ni archivo en assets/fonts/.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. TOKENS — la fuente de verdad visual
   -------------------------------------------------------------------------- */

:root {
  /* Colores de marca */
  --azul-electrico: #66754C;   /* Principal — innovación, tecnología, IA */
  --azul-electrico-osc: #4E593A;
  --azul-electrico-clr: #C5CBBB;
  --azul-noche: #523900;       /* Base — confianza, estabilidad */
  --azul-noche-2: #67511F;   /* Fondo de secciones oscuras (un tono mas claro que la base) */
  --azul-noche-3: #7C693D;   /* Un paso mas, para los degradados dentro de esas secciones */
  --blanco-roto: #E9E2DD;      /* Claro — fondos, limpieza visual */
  --gris-tec: #9C8D69;         /* Secundario — detalles, iconos, bordes */
  --arena: #CDC5AF;            /* Apoyo — detalles de cercanía */
  --blanco: #FFFFFF;

  /* Variante del azul de marca solo para TEXTO sobre fondo claro. El
     #66754C original se queda en 4,36:1 sobre las superficies translúcidas
     que dejan ver la red, por debajo del mínimo AA de 4,5:1. Este sí llega
     y a simple vista es el mismo azul. Los botones y los elementos
     gráficos siguen usando el original, que ahí no aplica ese mínimo. */
  --azul-texto: #66754C;

  /* Variante del gris de marca un punto más oscura, solo para TEXTO.
     El #9C8D69 original queda en 4.43:1 sobre el fondo gris claro y no
     llega al mínimo AA de 4.5:1. Este tono sí (5.18:1) y es indistinguible
     a simple vista. */
  --gris-tec-texto: #816E42;

  /* Semánticos */
  --bg: var(--blanco);
  --bg-alt: var(--blanco-roto);
  --bg-dark: var(--azul-noche-2);
  --texto: var(--azul-noche);
  --texto-suave: var(--gris-tec-texto);
  --texto-inv: #F1ECE9;
  --texto-inv-suave: #D7CFBF;
  --borde: #DAD1C7;
  --borde-dark: rgba(255, 255, 255, 0.10);

  /* --------------------------------------------------------------
     Tipografías
     --------------------------------------------------------------
     Montserrat compone TODOS los titulares y el cuerpo de texto de
     la web (a distinto peso: 700-800 en titulares, 400-500 en
     párrafos). Es la fuente de marca de Susana Padilla.

     --font-titulo se mantiene como alias de Montserrat: antes hacía
     falta una fuente aparte para las páginas legales numeradas
     porque la tipografía de titulares no tenía puntuación; ya no es
     el caso, pero se deja la variable para no tocar cada regla que
     la usa.

     --font-serif (Cormorant Garamond, sustituta libre de Sholar) se
     reserva a frases destacadas y citas en tamaño grande, siempre en
     cursiva. No se usa en párrafos: a tamaño de texto normal se lee
     con esfuerzo.
     -------------------------------------------------------------- */
  --font-marvin: 'Montserrat', 'Segoe UI', sans-serif;
  --font-titulo: 'Montserrat', 'Segoe UI', sans-serif;
  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --t-hero: clamp(2.35rem, 1.35rem + 4.2vw, 4.5rem);
  --t-h1: clamp(2.1rem, 1.4rem + 2.9vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  /* Espaciado */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --seccion-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* Formas */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-full: 999px;
  --ancho: 1180px;
  --ancho-txt: 760px;

  /* Gradientes de marca — suaves, nunca estridentes */
  --grad-azul: linear-gradient(135deg, #788661 0%, #4E593A 100%);
  --grad-azul-claro: linear-gradient(135deg, #A6AF97 0%, #66754C 100%);
  --grad-noche: linear-gradient(150deg, #564611 0%, #523900 60%);
  --grad-texto: linear-gradient(100deg, #523900 30%, #66754C 100%);
  --grad-texto-inv: linear-gradient(100deg, #FFFFFF 35%, #A6AF97 100%);
  --grad-borde: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(82, 57, 0, 0.05);
  --sh: 0 4px 20px rgba(82, 57, 0, 0.07);
  --sh-md: 0 12px 34px rgba(82, 57, 0, 0.10);
  --sh-azul: 0 10px 30px rgba(102, 117, 76, 0.26);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-rapido: 160ms var(--ease);
  --t-medio: 320ms var(--ease);
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--texto-inv);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  /* Montserrat compone todos los titulares. */
  font-family: var(--font-marvin);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.legal h1, .legal h2, .legal h3 {
  font-family: var(--font-titulo);
  letter-spacing: -0.02em;
}

/* Frases entrecomilladas de cliente, en Cormorant Garamond cursiva. */
.cita-cliente {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.45rem;
  line-height: 1.3;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--azul-electrico);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   4. UTILIDADES DE LAYOUT
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--alt {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}
.seccion--alt > .contenedor { position: relative; }
.seccion--compacta { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.seccion--oscura {
  background: var(--grad-noche);
  color: var(--texto);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.seccion--oscura > .contenedor { position: relative; }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: var(--azul-noche); }
.seccion--oscura p { color: var(--texto-suave); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul-electrico);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA DE SECCIÓN
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-texto);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
/* .hero se queda con el valor base (ahora es clara). Las secciones oscuras
   por defecto y las --oscura (ahora claras) invierten el color. */
.seccion:not(.seccion--oscura) .eyebrow { color: var(--azul-electrico-clr); }
.seccion--oscura .eyebrow { color: var(--azul-texto); }

.cabecera-seccion { max-width: var(--ancho-txt); margin-bottom: var(--sp-5); }
.cabecera-seccion.centrada { margin-inline: auto; text-align: center; }
.cabecera-seccion h2 { font-size: var(--t-h2); margin-bottom: var(--sp-2); }
.cabecera-seccion p { font-size: var(--t-lead); color: var(--texto-inv-suave); }
.seccion--oscura .cabecera-seccion p { color: var(--texto-suave); }

.acento { color: var(--azul-electrico); }

/* Palabra clave de un titular con degradado de marca */
.degradado {
  background: var(--grad-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.seccion--oscura .degradado, .hero .degradado, .cta-final .degradado {
  background: var(--grad-texto-inv);
  -webkit-background-clip: text;
  background-clip: text;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.lead { font-size: var(--t-lead); color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-rapido), background var(--t-rapido),
              box-shadow var(--t-rapido), border-color var(--t-rapido), color var(--t-rapido);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex-shrink: 0; }

.btn--primario {
  background: var(--grad-azul);
  color: #fff;
  box-shadow: var(--sh-azul), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primario:hover {
  background: var(--grad-azul-claro);
  box-shadow: 0 14px 34px rgba(102, 117, 76, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------
   BOTÓN DUO — el compañero del de WhatsApp.
   Misma altura, mismo radio, mismo peso visual y mismo acabado.
   Lo único que cambia es el color, para que se distingan sin que
   ninguno parezca la opción secundaria.
   -------------------------------------------------------------------- */
.btn--duo {
  background: var(--azul-noche);
  color: #fff;
  box-shadow: 0 10px 30px rgba(82, 57, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--duo:hover {
  background: #5A5220; /* tono oscuro original: el hover se queda mas oscuro que el fondo */
  box-shadow: 0 14px 34px rgba(82, 57, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* El fondo oscuro y el claro se invirtieron: ahora son las secciones
   normales (seccion sin --oscura) las que quedan oscuras, así que el
   botón que se invierte a blanco sólido es el suyo. Hero, oscura,
   cta-final y estado ya son claros: usan el botón por defecto. */
.seccion:not(.seccion--oscura) .btn--duo {
  background: var(--blanco);
  color: var(--azul-noche);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(82, 57, 0, 0.10);
}
.seccion:not(.seccion--oscura) .btn--duo:hover {
  background: var(--blanco-roto);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
}

.btn--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}
.btn--secundario:hover { border-color: var(--azul-noche); background: var(--blanco-roto); }

.seccion:not(.seccion--oscura) .btn--secundario {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.25);
}
.seccion:not(.seccion--oscura) .btn--secundario:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--claro { background: var(--blanco); color: var(--azul-noche); }
.btn--claro:hover { background: var(--blanco-roto); }

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

.grupo-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.nota-cta {
  margin-top: var(--sp-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.seccion--oscura .nota-cta, .hero .nota-cta { color: var(--texto-suave); }
/* Enlace dentro de la nota bajo los CTA */
.nota-cta a { color: var(--azul-texto); text-decoration: underline; text-underline-offset: 3px; }
.nota-cta a:hover { color: var(--azul-noche); }
.seccion:not(.seccion--oscura) .nota-cta a { color: var(--azul-electrico-clr); }
.seccion:not(.seccion--oscura) .nota-cta a:hover { color: #fff; }


.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--azul-texto);
  transition: gap var(--t-rapido);
}
.enlace-flecha:hover { gap: 0.75rem; }
.enlace-flecha::after { content: "→"; }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-medio), background var(--t-medio);
}
.header.is-scrolled {
  border-bottom-color: var(--borde);
  box-shadow: 0 1px 24px rgba(82, 57, 0, 0.06);
}
/* Filo de luz bajo la cabecera: detalle de profundidad, no decoración */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 117, 76, 0.35), transparent);
  opacity: 0;
  transition: opacity var(--t-medio);
}
.header.is-scrolled::after { opacity: 1; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity var(--t-rapido);
}
.logo:hover { opacity: 0.82; }

/* Proporciones fijadas por altura: el ancho se calcula solo y
   la imagen nunca se deforma. */
.logo img {
  display: block;
  height: 42px;
  width: auto;
}
.logo__completo { display: block; }
.logo__iso { display: none; }

/* En pantallas estrechas se queda solo el isotipo */
@media (max-width: 420px) {
  .logo__completo { display: none; }
  .logo__iso { display: block; height: 40px; }
}

.footer .logo img { height: 54px; }
@media (max-width: 420px) { .footer .logo img { height: 46px; } }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__enlace {
  position: relative;
  padding: 0.55rem 0.7rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
  border-radius: var(--r-sm);
  transition: color var(--t-rapido), background var(--t-rapido);
}
.nav__enlace:hover { color: var(--texto); background: var(--blanco-roto); }
.nav__enlace[aria-current="page"] { color: var(--azul-texto); font-weight: 600; }

/* --------------------------------------------------------------------
   DESPLEGABLE DE SERVICIOS
   Se abre al pasar el ratón en escritorio y al pulsar en cualquier
   dispositivo. El botón es un <button> de verdad, así que responde al
   teclado sin trucos.
   -------------------------------------------------------------------- */
.nav__grupo { position: relative; }

.nav__desplegable {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.nav__desplegable[aria-current="true"] { color: var(--azul-electrico); font-weight: 600; }
.nav__flecha { transition: transform var(--t-medio); }
.nav__desplegable[aria-expanded="true"] .nav__flecha { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 310px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-medio), transform var(--t-medio), visibility var(--t-medio);
  z-index: 60;
}
.submenu[hidden] { display: block; }          /* lo controla la clase, no el atributo */
.nav__grupo.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Puente invisible: evita que el menú se cierre al mover el ratón hacia él */
.submenu::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}

.submenu__caja {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(82, 57, 0, 0.16), 0 2px 6px rgba(82, 57, 0, 0.06);
}

.submenu__enlace {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  transition: background var(--t-rapido);
}
.submenu__enlace:hover, .submenu__enlace:focus-visible { background: var(--blanco-roto); }
.submenu__enlace strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 1px;
}
.submenu__enlace span {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.45;
}
.submenu__enlace:first-child strong { color: var(--azul-texto); }

/* --------------------------------------------------------------------
   BOTONES DE LA CABECERA
   WhatsApp y Email: mismo alto, mismo radio, misma sombra.
   -------------------------------------------------------------------- */
.header__acciones { display: flex; align-items: center; gap: 0.5rem; }

.btn--compacto {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  font-size: var(--t-sm);
  gap: 0.45rem;
}
.btn--compacto svg { opacity: 0.95; }

.nav__acciones-movil { display: none; }

@media (max-width: 1240px) {
  .btn--compacto span { display: none; }
  .btn--compacto { padding: 0.5rem 0.85rem; }
}

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.burger span {
  display: block; position: relative;
  width: 18px; height: 2px; background: var(--azul-noche);
  transition: background var(--t-rapido);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--azul-noche);
  transition: transform var(--t-medio), top var(--t-medio);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1120px) {
  .burger { display: inline-flex; }
  .header__acciones .btn { display: none; }
  .nav__acciones-movil { display: grid; gap: 0.6rem; margin-top: var(--sp-3); }
  .nav__acciones-movil .btn { min-height: 52px; font-size: var(--t-body); }

  .nav__grupo { width: 100%; }
  .nav__desplegable {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--borde);
    border-radius: 0;
    color: var(--texto-suave);
  }
  .submenu {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .nav__grupo.is-open .submenu { display: block; transform: none; }
  .submenu::before { display: none; }
  .submenu__caja {
    border: 0;
    box-shadow: none;
    background: var(--blanco-roto);
    border-radius: 12px;
    margin: 0.6rem 0;
    padding: 6px;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) clamp(1.25rem, 4vw, 2.5rem) var(--sp-4);
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sh-md);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t-medio), opacity var(--t-medio), visibility var(--t-medio);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__enlace {
    padding: 0.95rem 0.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--borde);
    border-radius: 0;
  }
  .nav .btn { margin-top: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--grad-noche);
  color: var(--texto);
  padding-block: clamp(4rem, 2.5rem + 8vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.hero h1, .hero h2 { color: var(--azul-noche); }

.hero > .contenedor { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.hero__titulo { font-size: var(--t-hero); margin-bottom: var(--sp-3); }
.hero__sub {
  font-size: var(--t-lead);
  color: var(--texto-suave);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
}

.hero__pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-4);
}
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-marvin);
  letter-spacing: 0.01em;
  border: 1px solid var(--borde);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--texto-suave);
  background: rgba(82, 57, 0, 0.05);
}
.pildora::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--azul-electrico-clr);
}

/* Numeración de la lista de pasos siguientes (gracias, 404 y contacto) */
.flujo__num {
  font-family: var(--font-marvin);
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(102, 117, 76, 0.18);
  border: 1px solid rgba(102, 117, 76, 0.35);
  color: var(--azul-texto);
  font-size: var(--t-xs);
  font-weight: 700;
}
.flujo__num--icono { font-family: var(--font-body); font-weight: 400; }
/* Cabecera interior de páginas secundarias */
.hero--interior { padding-block: clamp(3.5rem, 2rem + 6vw, 6rem); }
.hero--interior .hero__titulo { font-size: var(--t-h1); }
.hero--interior .hero__sub { max-width: 62ch; }

/* --------------------------------------------------------------------------
   9. TARJETAS Y REJILLAS
   -------------------------------------------------------------------------- */

.rejilla { display: grid; gap: var(--sp-3); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--blanco);
  color: var(--azul-noche);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-medio), box-shadow var(--t-medio), border-color var(--t-medio);
}
.tarjeta h3 { font-size: var(--t-h3); }
.tarjeta p { color: var(--texto-suave); font-size: var(--t-sm); }

/* Las tarjetas se quedan siempre igual (blancas, texto oscuro), sea cual
   sea el fondo de la sección que las rodea — por eso ya no hay una
   variante «.seccion--oscura .tarjeta» distinta. */

.icono {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(102, 117, 76, 0.14), rgba(102, 117, 76, 0.05));
  border: 1px solid rgba(102, 117, 76, 0.14);
  color: var(--azul-electrico);
  margin-bottom: 0.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* El icono de la tarjeta se queda igual siempre, a juego con la tarjeta. */
.icono--arena { background: rgba(205, 197, 175, 0.16); color: #523900; }

/* Tarjeta de problema (PAS) */
.tarjeta--problema { gap: 0.5rem; }
.tarjeta--problema h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.tarjeta--problema .icono {
  width: 36px; height: 36px;
  background: rgba(205, 197, 175, 0.18);
  color: #523900;
  border-radius: 10px;
}

/* Tarjeta de servicio con lista */
.tarjeta--servicio { gap: 0.85rem; }
.lista-check { display: grid; gap: 0.55rem; margin-top: 0.25rem; }
.lista-check li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--azul-electrico);
  border-bottom: 2px solid var(--azul-electrico);
  transform: rotate(-45deg);
}
/* La lista con check dentro de la tarjeta también se queda igual siempre. */

.tarjeta__pie { margin-top: auto; padding-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. PROCESO (pasos numerados)
   -------------------------------------------------------------------------- */

.pasos { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, 1fr); counter-reset: paso; }
@media (max-width: 960px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

.paso {
  position: relative;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--borde-dark);
}
.seccion--oscura .paso { border-top-color: var(--borde); }
.paso__num {
  position: absolute;
  top: -1px;
  left: 0;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--azul-electrico);
  color: #fff;
  font-family: var(--font-marvin);
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--azul-noche);
}
.seccion--oscura .paso__num { box-shadow: 0 0 0 6px #DAD4C3; }
.seccion:not(.seccion--alt):not(.seccion--oscura) .paso__num { box-shadow: 0 0 0 6px var(--azul-noche-2); }
.paso h3 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.paso p { color: var(--texto-inv-suave); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   11. BLOQUES ALTERNOS (Z-pattern)
   -------------------------------------------------------------------------- */

.bloque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.bloque + .bloque { margin-top: clamp(3.5rem, 2rem + 5vw, 6rem); }
.bloque--invertido .bloque__media { order: -1; }
@media (max-width: 900px) {
  .bloque { grid-template-columns: 1fr; gap: var(--sp-4); }
  .bloque--invertido .bloque__media { order: 0; }
}
.bloque h2 { font-size: var(--t-h2); margin-bottom: var(--sp-2); }
/* El texto de la columna ambiente vive directo sobre el fondo de la
   sección: como .seccion/.seccion--alt son ahora oscuras y --oscura es
   ahora clara, el valor base y el de --oscura se invierten entre sí. */
.bloque > div > p { color: var(--texto-inv-suave); }
.seccion--oscura .bloque > div > p { color: var(--texto-suave); }
.bloque > div > p + p { margin-top: var(--sp-2); }

.bloque__media {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--blanco-roto);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  color: var(--azul-noche);
}
.seccion--oscura .bloque__media,
.seccion--alt .bloque__media { background: var(--blanco); }

.mini-lista { display: grid; gap: 0.9rem; }
.mini-lista li {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--borde);
}
.mini-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-lista strong { display: block; font-weight: 600; font-size: var(--t-sm); }
.mini-lista span { font-size: var(--t-sm); color: var(--texto-suave); }
.mini-lista .punto {
  flex-shrink: 0; margin-top: 0.5rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul-electrico);
}

/* --------------------------------------------------------------------------
   12. FUNDADOR
   -------------------------------------------------------------------------- */

.fundador {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .fundador { grid-template-columns: 1fr; } }

.fundador__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul-noche-2), var(--azul-noche));
  border: 1px solid var(--borde-dark);
}
.fundador__foto img { width: 100%; height: 100%; object-fit: cover; }
.fundador__cita {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--texto);
  margin-bottom: var(--sp-3);
}
.seccion--oscura .fundador__cita { color: var(--blanco); }
.fundador__firma {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: var(--sp-3);
  font-size: var(--t-sm);
}
.fundador__firma strong { font-weight: 700; }
.fundador__firma span { color: var(--texto-suave); }


/* --------------------------------------------------------------------------
   12 bis. LA PERSONA AL FRENTE (ficha)
   -------------------------------------------------------------------------- */

.socios__union {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  color: var(--azul-noche);
  margin-bottom: var(--sp-2);
}

.socios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (max-width: 820px) { .socios { grid-template-columns: 1fr; } }

.socio {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
  align-items: start;
  padding: clamp(1.3rem, 3vw, 1.85rem);
  background: linear-gradient(160deg, rgba(82, 57, 0, 0.05), rgba(82, 57, 0, 0.018));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color var(--t-medio), transform var(--t-medio);
}
.socio:hover { border-color: rgba(82, 57, 0, 0.18); transform: translateY(-3px); }

@media (max-width: 560px) {
  .socio { grid-template-columns: 92px 1fr; gap: 1rem; }
}

.socio__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul-noche-3), var(--azul-noche));
  border: 1px solid var(--borde-dark);
}
.socio__foto img { width: 100%; height: 100%; object-fit: cover; }

.socio__texto h3 { font-size: 1.4rem; color: var(--azul-noche); margin-bottom: 0.2rem; }

.socio__rol {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-texto);
  margin-bottom: var(--sp-2);
}

.socio__texto > p { font-size: var(--t-sm); }

.socio__etiqueta {
  margin-top: var(--sp-3);
  margin-bottom: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.socio__pie { margin-top: var(--sp-3); }
.socio__pie .btn { gap: 0.5rem; }
.socio__perfil {
  margin-top: 0.6rem;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* En la home, sin el bloque de Instagram, las tarjetas son más compactas */
.socios .socio__pie:empty { display: none; }

/* --------------------------------------------------------------------------
   13. VALORES / DIFERENCIACIÓN
   -------------------------------------------------------------------------- */

.comparativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 720px) { .comparativa { grid-template-columns: 1fr; } }

.columna-comp {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--borde);
}
.columna-comp h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.columna-comp--no { background: var(--blanco-roto); }
.columna-comp--no h3 { color: var(--gris-tec); }
.columna-comp--si { background: var(--blanco); border-color: rgba(102, 117, 76, 0.3); box-shadow: var(--sh); }
.columna-comp--si h3 { color: var(--azul-texto); }
.lista-simple { display: grid; gap: 0.7rem; font-size: var(--t-sm); }
.lista-simple li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--texto-suave); }
.lista-simple li::before { content: "—"; color: var(--gris-tec); flex-shrink: 0; }
.columna-comp--si .lista-simple li::before { content: "✓"; color: var(--azul-electrico); font-weight: 700; }
.columna-comp--si .lista-simple li { color: var(--texto); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: var(--ancho-txt); margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t-rapido);
}
.faq details[open] { border-color: #DDD8CF; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  color: var(--azul-noche);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--azul-electrico);
  transition: transform var(--t-medio);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__cuerpo { padding: 0 1.35rem 1.35rem; color: var(--texto-suave); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   15. CTA FINAL
   -------------------------------------------------------------------------- */

.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--azul-noche-2);
  color: var(--texto);
  text-align: center;
  padding-block: clamp(4rem, 2.5rem + 7vw, 7rem);
}
.cta-final h2 { font-size: var(--t-h2); color: var(--azul-noche); margin-bottom: var(--sp-2); }
.cta-final p { max-width: 58ch; margin-inline: auto; color: var(--texto-suave); font-size: var(--t-lead); }
.cta-final .grupo-btn { justify-content: center; margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   16. FORMULARIO
   -------------------------------------------------------------------------- */

.form-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }

.form {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
}
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 600px) { .form__fila { grid-template-columns: 1fr; } }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; color: var(--azul-noche); }
.campo label .opc { font-weight: 400; color: var(--gris-tec); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--blanco);
  color: var(--azul-noche);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
  min-height: 50px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2364748B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-electrico);
  box-shadow: 0 0 0 3px rgba(102, 117, 76, 0.14);
}
.campo input::placeholder, .campo textarea::placeholder { color: #BEB5A5; }
.campo__error { font-size: var(--t-xs); color: #DC2626; min-height: 1em; }
.campo.is-error input, .campo.is-error select, .campo.is-error textarea { border-color: #DC2626; }

.consentimiento {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.consentimiento input {
  width: 20px; height: 20px; min-height: 20px;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--azul-electrico);
}
.consentimiento a { color: var(--azul-texto); text-decoration: underline; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.panel-lateral {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--capa-clara-grad);
  color: var(--texto);
  border-radius: var(--r-lg);
}
.panel-lateral h3 { color: var(--azul-noche); font-size: var(--t-h3); }
.panel-lateral p { color: var(--texto-suave); font-size: var(--t-sm); }
.panel-lateral hr { border: 0; border-top: 1px solid var(--borde); }
.dato-contacto {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-sm); color: var(--texto);
  transition: color var(--t-rapido);
}
.dato-contacto:hover { color: var(--azul-texto); }
.dato-contacto svg { flex-shrink: 0; color: var(--azul-texto); }

/* --------------------------------------------------------------------------
   17. PÁGINAS DE ESTADO (gracias / 404)
   -------------------------------------------------------------------------- */

.estado {
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-6);
  background: var(--capa-clara-grad);
  color: var(--texto);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.estado::after {
  content: "";
  position: absolute; top: -20%; left: 50%;
  width: min(900px, 130%); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(102, 117, 76, 0.26) 0%, rgba(102, 117, 76, 0) 62%);
  z-index: -1;
}
.estado__inner { max-width: 640px; }
.estado h1 { color: var(--azul-noche); font-size: var(--t-h1); margin-bottom: var(--sp-2); }
.estado p { color: var(--texto-suave); font-size: var(--t-lead); }
.estado .grupo-btn { justify-content: center; margin-top: var(--sp-4); }
.estado__codigo {
  font-family: var(--font-marvin);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 12vw, 9rem);
  line-height: 1;
  color: var(--azul-electrico);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.04em;
}
.marca-check {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: rgba(102, 117, 76, 0.16);
  border: 1px solid rgba(102, 117, 76, 0.4);
  color: var(--azul-texto);
}
.pasos-siguientes {
  display: grid; gap: 0.75rem;
  margin-top: var(--sp-5);
  text-align: left;
  padding: var(--sp-3);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: rgba(82, 57, 0, 0.04);
}
.pasos-siguientes li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: var(--t-sm); color: var(--texto-suave);
}
.pasos-siguientes li b { color: var(--azul-noche); font-weight: 600; }
.pasos-siguientes .flujo__num { width: 26px; height: 26px; font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   18. CONTENIDO LEGAL
   -------------------------------------------------------------------------- */

.legal { max-width: var(--ancho-txt); margin-inline: auto; }
.legal h2 { font-size: 1.4rem; margin: var(--sp-5) 0 var(--sp-2); }
.legal h3 { font-size: 1.1rem; margin: var(--sp-3) 0 var(--sp-1); }
.legal p, .legal li { color: var(--texto-inv-suave); font-size: var(--t-sm); }
.legal p + p { margin-top: var(--sp-2); }
.legal ul { display: grid; gap: 0.5rem; margin: var(--sp-2) 0; }
.legal ul li { padding-left: 1.2rem; position: relative; }
.legal ul li::before { content: "·"; position: absolute; left: 0.3rem; color: var(--azul-electrico-clr); font-weight: 700; }
.legal a { color: var(--azul-electrico-clr); text-decoration: underline; }
.aviso-editable {
  padding: var(--sp-3);
  border-left: 3px solid var(--arena);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-sm);
  color: var(--texto-inv);
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--azul-noche-2);
  color: var(--texto-suave);
  padding-block: var(--sp-6) var(--sp-4);
  font-size: var(--t-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--borde);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer .logo { color: var(--azul-noche); margin-bottom: var(--sp-2); }
.footer .logo__texto span { color: var(--texto-suave); }
.footer__desc { max-width: 34ch; }
.footer h4 {
  font-family: var(--font-marvin);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--azul-noche);
  margin-bottom: var(--sp-2);
}
.footer__lista { display: grid; gap: 0.6rem; }
.footer__lista a { transition: color var(--t-rapido); }
.footer__lista a:hover { color: var(--azul-noche); }

.redes { display: flex; gap: 0.6rem; margin-top: var(--sp-3); }
.red {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--texto);
  transition: background var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido);
}
.red:hover { background: rgba(82, 57, 0, 0.06); border-color: rgba(82, 57, 0, 0.3); transform: translateY(-2px); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  font-size: var(--t-xs);
}
.footer__legales { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.footer__legales a:hover { color: var(--azul-noche); }

/* --------------------------------------------------------------------------
   20. BOTONES FLOTANTES
   -------------------------------------------------------------------------- */

.flotantes {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-end;
}
.flotante {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 8px 24px rgba(82, 57, 0, 0.28);
  transition: transform var(--t-rapido), box-shadow var(--t-rapido);
}
.flotante:hover { transform: translateY(-3px) scale(1.05); }
/* Verdes y naranjas un punto por debajo del oficial de cada marca:
   con el icono en blanco, los tonos originales no llegan al mínimo de
   3:1 que pide la WCAG para elementos gráficos. Siguen siendo
   inconfundibles y ahora sí se ven bien a plena luz del día. */
.flotante--wa { background: #159B49; }
.flotante--ig { background: linear-gradient(45deg, #D96A20, #C4212F 45%, #A3157A); width: 48px; height: 48px; }
.flotante__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--azul-noche-2);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-rapido);
}
.flotante:hover .flotante__tip { opacity: 1; }
@media (max-width: 620px) {
  .flotante__tip { display: none; }
  .flotantes { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   23. AMBIENTE — la capa viva que hay detrás de todo
   --------------------------------------------------------------------------
   Una sola capa fija, fuera del flujo, sin eventos de puntero y sin texto.
   El contenido nunca compite con ella: se pinta por debajo de todo y solo
   anima transform y opacity, que el navegador resuelve en la GPU sin
   recalcular maquetación.

   Tres estratos, de atrás hacia delante:
     1. campos de luz  — dos elipses azules enormes que derivan muy despacio
     2. malla          — nodos y conexiones, irregulares, casi imperceptibles
     3. grano          — textura fina que quita el plano digital del degradado

   Se apaga entero con prefers-reduced-motion y se aligera en móvil.
   ========================================================================== */

:root {
  /* Superficies translúcidas. La opacidad deja ver la red sin bajar el
     contraste del texto por debajo de AA; el color es un marrón claro de
     la paleta de Susana (mezcla de --arena con blanco) en vez de blanco
     puro, para que las tarjetas —blancas— se noten por encima del fondo
     en lugar de fundirse con él. --capa-alt venía con un azul grisáceo
     sobrante de la paleta antigua (nunca se había migrado); ahora es un
     paso más oscuro dentro de la misma familia marrón. */
  --capa-clara: rgba(218, 212, 195, 0.97);
  --capa-alt: rgba(212, 206, 187, 0.97);
  --capa-noche: linear-gradient(150deg, rgba(124, 105, 61, 0.45) 0%, rgba(103, 81, 31, 0.49) 60%);
  --capa-clara-grad: linear-gradient(150deg, var(--capa-clara) 0%, var(--capa-alt) 60%);  /* version clara en gradiente, para hero/oscura, ahora invertidos */
  --capa-noche-alt: rgba(86, 66, 24, 0.94);  /* oscura alterna, para seccion--alt, ahora oscura */

  /* Avance de la página, de 0 a 1. Lo escribe el módulo 7 del script.
     Si el script no arranca se queda en 0 y el ambiente sigue estando ahí,
     solo que quieto. */
  --avance: 0;

  /* Posición del puntero normalizada de -0.5 a 0.5, escrita por el módulo 8.
     Mueve los campos de luz unas decenas de píxeles: la influencia se nota
     como profundidad, no como que la web persiga al ratón. En pantallas
     táctiles el módulo ni se registra y estas dos se quedan en 0. */
  --raton-x: 0;
  --raton-y: 0;

  --t-lento: 1200ms var(--ease);
}

.ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}

/* Todo lo que es contenido va por encima de la capa */
main, .footer { position: relative; z-index: 1; }
/* .header (sticky, z-index 100), .flotantes (fixed, z-index 90) y .skip-link
   (absolute, z-index 999) ya están por encima del ambiente. Tocarles la
   propiedad position les rompería el comportamiento. */

/* --------------------------------------------------------------------------
   23.1 CAMPOS DE LUZ
   --------------------------------------------------------------------------
   Dos elipses, no doce. Recorridos largos y desincronizados (58 s y 74 s)
   para que nunca se repita la misma composición a la vista. El parallax
   es un desplazamiento de unas decenas de píxeles ligado al scroll: se
   nota como profundidad, no como movimiento.
   -------------------------------------------------------------------------- */

.ambiente__luz {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  will-change: transform;
}

.ambiente__luz--a {
  top: -22vh; left: 4vw;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(102, 117, 76, 0.10) 0%, rgba(102, 117, 76, 0) 66%);
  animation: deriva-a 58s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--raton-x) * 46px), calc(var(--avance) * -70px + var(--raton-y) * 30px), 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  /* La energía del hero se apaga a medida que bajas: el fondo no es el
     mismo al principio que al final, pero el cambio es continuo. */
  opacity: calc(1 - var(--avance) * 0.45);
}

.ambiente__luz--b {
  top: 38vh; right: -8vw;
  width: 54vw; height: 54vw;
  max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgba(166, 175, 151, 0.085) 0%, rgba(166, 175, 151, 0) 68%);
  animation: deriva-b 74s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--raton-x) * -34px), calc(var(--avance) * 90px + var(--raton-y) * -22px), 0);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* El toque de arena de la marca, una sola vez y muy abajo: impide que
   toda la página tenga la misma temperatura azul. */
.ambiente__luz--c {
  bottom: -18vh; left: 22vw;
  width: 46vw; height: 46vw;
  max-width: 650px; max-height: 650px;
  background: radial-gradient(circle, rgba(205, 197, 175, 0.07) 0%, rgba(205, 197, 175, 0) 68%);
  animation: deriva-a 92s ease-in-out infinite alternate-reverse;
}

/* Luz de cierre: crece de forma cuadrática, así que durante los dos
   primeros tercios de la página es prácticamente invisible y solo se nota
   al llegar al final del recorrido. */
.ambiente__cierre {
  position: absolute;
  bottom: -30vh; left: 50%;
  width: 90vw; height: 70vh;
  max-width: 1200px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(102, 117, 76, 0.16) 0%, rgba(102, 117, 76, 0) 65%);
  opacity: calc(var(--avance) * var(--avance));
  pointer-events: none;
}

@keyframes deriva-a {
  from { translate: 0 0; scale: 1; }
  to   { translate: 7vw 5vh; scale: 1.14; }
}
@keyframes deriva-b {
  from { translate: 0 0; scale: 1.08; }
  to   { translate: -6vw -7vh; scale: 1; }
}

/* --------------------------------------------------------------------------
   23.2 LA RED
   --------------------------------------------------------------------------
   Aquí solo está la caja. Lo que se dibuja dentro lo monta el módulo 9 del
   script: nodos, cables y pulsos.

   Va por debajo de los campos de luz en intensidad pero por encima en el
   orden, para que la luz se vea a través de la red y no al revés. El
   contenido de la página siempre queda por encima de las dos cosas.

   Si el script no llegara a ejecutarse, el canvas se queda vacío y
   transparente: la web se ve exactamente igual, sin el fondo.
   -------------------------------------------------------------------------- */

.ambiente__red {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   23.3 GRANO
   --------------------------------------------------------------------------
   Sin animar. Un grano que parpadea es caro de repintar y se nota como
   ruido de vídeo. Quieto, solo rompe la limpieza plástica del degradado.
   -------------------------------------------------------------------------- */

.ambiente__grano {
  position: absolute;
  inset: 0;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* --------------------------------------------------------------------------
   23.4 CÓMO SE ASOMA EL AMBIENTE EN CADA SECCIÓN
   --------------------------------------------------------------------------
   Las secciones claras dejan de ser blancas opacas y pasan a translúcidas:
   por eso se ve la luz. Las oscuras siguen siendo opacas —un azul noche
   translúcido sobre fondo claro se ensuciaría— y llevan su propia versión
   del mismo lenguaje, más marcada, dentro de sí mismas.
   -------------------------------------------------------------------------- */

/* La base de todo. Es lo que hay detrás de la red y de los campos de luz. */
body { background: var(--azul-noche-2); }

.seccion:not(.seccion--oscura) { background: var(--capa-noche); }
.seccion--alt:not(.seccion--oscura) { background: var(--capa-noche-alt); }

/* La veladura antigua de seccion--alt la sustituye ahora el ambiente global */
.seccion--alt::before { content: none; }

/* --------------------------------------------------------------------------
   23.5 SECCIONES OSCURAS — el mismo lenguaje, subido de intensidad
   -------------------------------------------------------------------------- */

.hero, .cta-final, .seccion--oscura { position: relative; isolation: isolate; overflow: hidden; }

/* Halo propio, que respira muy despacio y desfasado respecto al global */
.hero::after,
.cta-final::after,
.seccion--oscura::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(1000px, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(102, 117, 76, 0.28) 0%, rgba(102, 117, 76, 0) 62%);
  z-index: -1;
  pointer-events: none;
  animation: respira 26s ease-in-out infinite alternate;
}
.hero::after { top: -30%; }
.cta-final::after { bottom: -55%; background: radial-gradient(circle, rgba(102, 117, 76, 0.3) 0%, rgba(102, 117, 76, 0) 62%); }
.seccion--oscura::after { top: -40%; opacity: 0.55; }

@keyframes respira {
  from { scale: 1; opacity: 0.85; }
  to   { scale: 1.16; opacity: 1; }
}

/* La malla técnica de las secciones oscuras se alinea con la malla global:
   mismo azul, misma lógica de máscara, distinta densidad. */
.hero::before,
.seccion--oscura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(82, 57, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 57, 0, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  z-index: -2;
  pointer-events: none;
}
.hero::before {
  mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 20%, transparent 78%);
}
.seccion--oscura::before {
  mask-image: radial-gradient(ellipse 70% 90% at 80% 10%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 10%, #000 10%, transparent 70%);
}

/* Filo de luz en la costura entre una sección oscura y la siguiente clara:
   es lo que hace que el cambio se lea como una capa y no como un corte. */
.hero, .seccion--oscura, .cta-final { border-bottom: 1px solid rgba(102, 117, 76, 0.16); }

/* Sobre los fondos oscuros la red se ve a través de la sección, que es
   translúcida solo para eso. Sobre los claros no: el azul noche por
   detrás de un blanco al 72% ensuciaría el texto. */
.hero, .seccion--oscura { background: var(--capa-clara-grad); }
.cta-final { background: linear-gradient(150deg, rgba(218, 212, 195, 0.85) 0%, rgba(212, 206, 187, 0.90) 100%); }
.footer { background: rgba(218, 212, 195, 0.92); }

/* --------------------------------------------------------------------------
   23.6 MENOS TRABAJO CUANDO NO HACE FALTA
   -------------------------------------------------------------------------- */

/* En móvil: fuera el grano y la tercera luz, y las derivas se paran.
   Un teléfono no debería estar componiendo tres capas a pantalla completa
   para pintar un fondo. La identidad se queda: luz, malla y profundidad. */
@media (max-width: 720px) {
  .ambiente__grano, .ambiente__luz--c { display: none; }
  .ambiente__luz { transition: none; }
  .ambiente__luz--a, .ambiente__luz--b { animation: none; }
  .ambiente__red { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .ambiente__luz, .hero::after, .cta-final::after, .seccion--oscura::after { animation: none; }
  .ambiente__luz { transform: none; transition: none; }
  .ambiente__luz--a { opacity: 1; }
  .ambiente__cierre { opacity: 0.4; }
}

/* ==========================================================================
   24. PROFUNDIDAD — los recursos que usan todos los componentes
   --------------------------------------------------------------------------
   Tres herramientas y ninguna más. Que se repitan es lo que hace que la
   página parezca decidida en vez de decorada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   24.1 BORDE CON DEGRADADO
   --------------------------------------------------------------------------
   Un anillo de un píxel con luz en una esquina. La técnica: se pinta un
   degradado en toda la caja y una máscara recorta el interior, así que
   solo queda el filo. Aparece al pasar por encima, no está siempre.
   -------------------------------------------------------------------------- */

.filo-degradado {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(102, 117, 76, 0.55), rgba(102, 117, 76, 0) 46%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   24.2 LUZ QUE SIGUE AL CURSOR
   --------------------------------------------------------------------------
   El módulo 8 del script escribe --px y --py con la posición del puntero
   dentro de la tarjeta. Solo se activa en dispositivos con ratón: en una
   pantalla táctil no hay cursor que seguir y sería trabajo tirado.
   -------------------------------------------------------------------------- */

.tarjeta, .escenario, .cta-contextual, .socio { --px: 50%; --py: -20%; }

/* --------------------------------------------------------------------------
   24.3 PULSO QUE RECORRE UN CABLE
   --------------------------------------------------------------------------
   Una banda clara que baja por dentro de una línea. Se anima translate y
   nada más: ni top, ni height, ni background-position. El navegador lo
   resuelve en la GPU sin recalcular la maquetación en ningún fotograma.
   -------------------------------------------------------------------------- */

.pulso { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.pulso i {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%, transparent 40%,
    rgba(166, 175, 151, 0.95) 50%,
    transparent 60%, transparent 100%);
  animation: pulso-baja 13s linear infinite;
  will-change: transform;
}
@keyframes pulso-baja {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pulso i { animation: none; opacity: 0.5; transform: none; }
  .mapa--unido .mapa__nodo::after, .mapa--unido .mapa__nodo::before { animation: none; }
}

/* ==========================================================================
   25. COMPONENTES DE LA HOME
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1 CONSOLA DEL HERO
   --------------------------------------------------------------------------
   Un registro de ejecución, no una infografía. Cada línea es un evento con
   su estado.

   NO LLEVA TIEMPOS, PORCENTAJES NI VELOCIDADES, y no debe llevarlos nunca
   mientras no salgan de un sistema real y medido. Un «0,4 s» inventado es
   un dato falso por mucho que al lado ponga «ejemplo».
   -------------------------------------------------------------------------- */

.consola {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.55));
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 40px 90px rgba(82, 57, 0, 0.22),
    0 0 0 1px rgba(102, 117, 76, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
/* Reflejo del filo superior: es lo que lo separa de «una caja con opacidad» */
.consola::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
/* Halo propio por detrás, para que no flote sobre el fondo sin apoyarse */
.consola::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 0%, rgba(102, 117, 76, 0.20), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.consola__barra {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--borde);
  background: rgba(82, 57, 0, 0.035);
}
.consola__estado {
  position: relative;
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34D07F;
  box-shadow: 0 0 10px rgba(52, 208, 127, 0.8);
}
/* Anillo que se abre y se desvanece: la única señal «viva» de la barra */
.consola__estado::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(52, 208, 127, 0.55);
  animation: late 3.4s ease-out infinite;
}
@keyframes late {
  0%   { transform: scale(0.75); opacity: 0.9; }
  70%  { transform: scale(1.9);  opacity: 0; }
  100% { transform: scale(1.9);  opacity: 0; }
}
.consola__titulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto);
}
.consola__marca {
  margin-left: auto;
  font-family: var(--font-marvin);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--texto-suave);
}

/* El cable por el que van los eventos, con el pulso dentro */
.consola__lista {
  position: relative;
  padding: 0.4rem clamp(0.8rem, 2vw, 1.1rem);
}
.consola__eventos { display: grid; }
.consola__cable {
  position: absolute;
  left: calc(clamp(0.8rem, 2vw, 1.1rem) + 0.6rem + 13px);
  top: 1.6rem; bottom: 1.6rem;
  width: 2px;
  background: rgba(102, 117, 76, 0.28);
  border-radius: 2px;
}

.consola__evento {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.78rem 0.6rem;
  opacity: 0;
  animation: consola-entra 560ms var(--ease) forwards;
}
.consola__evento:nth-child(1) { animation-delay: 300ms; }
.consola__evento:nth-child(2) { animation-delay: 540ms; }
.consola__evento:nth-child(3) { animation-delay: 780ms; }
.consola__evento:nth-child(4) { animation-delay: 1020ms; }
.consola__evento:nth-child(5) { animation-delay: 1260ms; }
@keyframes consola-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.consola__icono {
  position: relative;
  z-index: 1;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--azul-noche-2);
  border: 1px solid rgba(102, 117, 76, 0.45);
  color: var(--azul-electrico-clr);
  box-shadow: 0 0 0 4px rgba(233, 226, 221, 0.92), 0 0 14px rgba(102, 117, 76, 0.25);
}
.consola__icono svg { width: 14px; height: 14px; }

.consola__evento b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  line-height: 1.35;
}
.consola__evento small {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.4;
}

/* El estado: una etiqueta, no una medida */
.consola__marca-estado {
  font-family: var(--font-body);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul-electrico-osc);
  padding: 0.24rem 0.55rem;
  border: 1px solid rgba(102, 117, 76, 0.4);
  border-radius: var(--r-full);
  background: rgba(102, 117, 76, 0.12);
  white-space: nowrap;
}

.consola__pie {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.4rem);
  border-top: 1px solid var(--borde);
  background: rgba(102, 117, 76, 0.08);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.5;
}
.consola__pie strong { color: var(--azul-noche); font-weight: 600; }

@media (max-width: 460px) {
  .consola__evento { grid-template-columns: 26px minmax(0, 1fr); row-gap: 0.4rem; }
  .consola__marca-estado { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .consola__evento { opacity: 1; animation: none; }
  .consola__estado::after { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   25.2 EL SISTEMA ELEVA — recorrido vertical conectado
   --------------------------------------------------------------------------
   Antes esto eran pestañas: enseñaban una etapa de seis y el raíl que las
   unía desaparecía por debajo de 900 px, justo donde más tráfico hay.
   Ahora es un solo recorrido vertical. El cable que une las seis etapas
   está en desktop, en tablet y en móvil, porque la relación entre ellas es
   la mitad del argumento.

   El retorno de DATOS a CAPTACIÓN se dibuja de verdad: la línea discontinua
   de la izquierda sube por todo el diagrama y cierra el ciclo.
   -------------------------------------------------------------------------- */

.sistema { position: relative; }

.sistema__etapa {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, 5vw, 64px) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0 clamp(1.1rem, 3vw, 2.2rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.sistema__etapa:last-of-type { padding-bottom: clamp(1.5rem, 3vw, 2.2rem); }

/* La columna del eje: nodo + cable continuo hasta la etapa siguiente */
.sistema__eje {
  position: relative;
  display: flex;
  justify-content: center;
}
.sistema__eje::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(102, 117, 76, 0.45), rgba(102, 117, 76, 0.18));
  border-radius: 2px;
  /* El cable se traza hacia abajo al entrar la etapa, con un pequeño
     retraso: primero aparece el nodo, después sale el cable hacia el
     siguiente. Es el diagrama construyéndose a medida que bajas. */
  transform-origin: top center;
  transition: transform 820ms var(--ease) 240ms;
}
:where(html.js) .sistema__etapa .sistema__eje::before { transform: scaleY(0); }
.sistema__etapa.is-visible .sistema__eje::before { transform: scaleY(1); }


.sistema__nodo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: clamp(42px, 4.4vw, 54px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 15px;
  background: linear-gradient(155deg, var(--azul-noche-3), var(--azul-noche-2));
  border: 1px solid rgba(102, 117, 76, 0.34);
  color: var(--azul-electrico-clr);
  box-shadow: 0 0 0 6px #DAD4C3, 0 10px 24px rgba(82, 57, 0, 0.28);
  transition: border-color var(--t-medio), box-shadow var(--t-medio), color var(--t-medio);
}
.sistema__etapa:hover .sistema__nodo,
.sistema__etapa:focus-within .sistema__nodo {
  border-color: rgba(166, 175, 151, 0.85);
  color: #fff;
  box-shadow: 0 0 0 6px #DAD4C3, 0 0 26px rgba(102, 117, 76, 0.5);
}
.sistema__nodo svg { width: 21px; height: 21px; }

/* El pulso: uno para todo el diagrama, no uno por etapa */
.sistema__flujo {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(clamp(46px, 5vw, 64px) / 2 - 1px);
  width: 2px;
  overflow: hidden;
  pointer-events: none;
}

.sistema__cuerpo { padding-top: 0.35rem; }
.sistema__orden {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-texto);
  margin-bottom: 0.3rem;
}
.sistema__cuerpo h3 { font-size: var(--t-h3); color: var(--azul-noche); margin-bottom: 0.5rem; }
.sistema__cuerpo p { font-size: var(--t-sm); }

.sistema__caja {
  align-self: start;
  padding: clamp(1rem, 2.2vw, 1.3rem);
  background: rgba(82, 57, 0, 0.04);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  transition: background var(--t-medio), border-color var(--t-medio);
}
.sistema__etapa:hover .sistema__caja { background: rgba(82, 57, 0, 0.06); border-color: rgba(82, 57, 0, 0.16); }
.sistema__caja > p:first-child {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.7rem;
}
.sistema__caja .lista-check li { font-size: var(--t-xs); padding-left: 1.5rem; }
.sistema__caja .lista-check li::before { width: 12px; height: 7px; top: 0.4em; }

/* Cierre del ciclo: una fila más, con el eje discontinuo y la flecha
   hacia arriba. Al ir dentro del flujo no hay nada que descuadrar. */
.sistema__etapa--bucle .sistema__eje::before {
  content: none;
}
.sistema__etapa--bucle .sistema__nodo {
  background: rgba(102, 117, 76, 0.10);
  border-style: dashed;
  box-shadow: 0 0 0 6px #DAD4C3;
}
.sistema .sistema__etapa--bucle { padding-bottom: 0; }
.sistema__etapa--bucle .sistema__cuerpo p { font-size: var(--t-sm); }

.sistema__nota {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  margin-top: var(--sp-2);
  padding: 0.5rem 1.05rem;
  border: 1px dashed rgba(102, 117, 76, 0.45);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.sistema__nota svg { color: var(--azul-texto); flex-shrink: 0; }
.sistema__nota b { color: var(--azul-noche); font-weight: 600; }

/* Tablet: la caja baja debajo del texto. El eje y el cable no se tocan. */
@media (max-width: 900px) {
  .sistema__etapa {
    grid-template-columns: clamp(46px, 7vw, 60px) minmax(0, 1fr);
    row-gap: var(--sp-2);
  }
  .sistema__caja { grid-column: 2; }
}
/* Móvil: mismo recorrido, todo más estrecho. Sigue habiendo cable. */
@media (max-width: 560px) {
  .sistema__etapa { grid-template-columns: 40px minmax(0, 1fr); gap: 0 0.9rem; }
  .sistema__nodo { width: 38px; border-radius: 12px; box-shadow: 0 0 0 5px #DAD4C3; }
  .sistema__nodo svg { width: 17px; height: 17px; }
  .sistema__flujo { left: 19px; }
}

/* --------------------------------------------------------------------------
   25.3 TARJETAS CON CAPAS
   --------------------------------------------------------------------------
   El halo fijo de la esquina pasa a seguir al cursor, y se le suma un filo
   de degradado. Dos capas, no cinco.
   -------------------------------------------------------------------------- */

.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--px) var(--py),
              rgba(102, 117, 76, 0.14), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-medio);
  z-index: -1;
  pointer-events: none;
}
.tarjeta:hover::before { opacity: 1; }
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: #C5CBBB; }
.tarjeta:hover .filo-degradado { opacity: 1; }

.socio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}
.socio:hover::before { opacity: 1; }
.socio { position: relative; isolation: isolate; }

.seccion--oscura .tarjeta::before,
.socio::before {
  background: radial-gradient(340px circle at var(--px) var(--py),
              rgba(166, 175, 151, 0.16), transparent 68%);
}

/* --------------------------------------------------------------------------
   25.4 TARJETAS DE PROBLEMA
   -------------------------------------------------------------------------- */

.tarjeta--problema { gap: 0.55rem; }
.tarjeta--problema h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.tarjeta--problema p { line-height: 1.55; }

.etapa-rota {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-full);
  background: rgba(205, 197, 175, 0.16);
  border: 1px solid rgba(205, 197, 175, 0.34);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8A5A2B;
}
.etapa-rota::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.coste {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texto);
}
.coste span { color: var(--texto-suave); font-weight: 400; }

/* --------------------------------------------------------------------------
   25.5 TARJETAS DE SERVICIO
   -------------------------------------------------------------------------- */

.tarjeta--servicio { gap: 0.9rem; }
.servicio__cabecera { display: flex; align-items: flex-start; gap: 0.9rem; }
.servicio__cabecera .icono { margin-bottom: 0; flex-shrink: 0; }
.servicio__cabecera h3 { margin-bottom: 0.15rem; }
.servicio__cabecera p { font-size: var(--t-sm); }

.bloque-etiqueta {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}

.servicio__problema {
  padding-left: 0.95rem;
  border-left: 2px solid var(--arena);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.servicio__resultado {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: auto;
  padding: 0.85rem 1rem;
  background: rgba(102, 117, 76, 0.06);
  border: 1px solid rgba(102, 117, 76, 0.18);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  line-height: 1.5;
}
.servicio__resultado svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--azul-electrico); }

.tarjeta--servicio .tarjeta__pie {
  margin-top: 0;
  padding-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   25.6 ANTES / DESPUÉS
   --------------------------------------------------------------------------
   La versión anterior fiaba el contraste a una inclinación de 1,5 grados,
   que no se veía. Ahora la diferencia es de bulto y se lee de un vistazo:

     ANTES    piezas torcidas y descolocadas de verdad (hasta 7 grados y
              14 px), borde discontinuo, sin color, y cables que salen de
              una pieza y se disuelven sin llegar a ninguna parte.
     DESPUÉS  las mismas piezas cuadradas al píxel, con color, con halo,
              unidas por cables continuos y con luz recorriendo la fila.

   Las dos rejillas son idénticas en estructura, así que el contraste no
   depende de ningún cálculo de posiciones y aguanta cualquier ancho.
   -------------------------------------------------------------------------- */

.transformacion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.9rem, 2.5vw, 1.8rem);
  align-items: stretch;
}
@media (max-width: 900px) { .transformacion { grid-template-columns: 1fr; } }

.escenario {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  transition: transform var(--t-medio), box-shadow var(--t-medio);
}
.escenario--antes {
  background: linear-gradient(165deg, #F4F3F0, #EFEDEA);
  border: 1px solid #E5E2DC;
}
.escenario--despues {
  isolation: isolate;
  background: var(--blanco);
  border: 1px solid rgba(102, 117, 76, 0.3);
  box-shadow: 0 18px 50px rgba(102, 117, 76, 0.13), var(--sh);
}
.escenario--despues::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--px) var(--py),
              rgba(102, 117, 76, 0.10), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}
.escenario--despues:hover::before { opacity: 1; }

.escenario__titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-marvin);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.escenario--antes .escenario__titulo { color: #83775F; }
.escenario--despues .escenario__titulo { color: var(--azul-texto); }
.escenario__sub { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--sp-3); }

.mapa {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  padding: var(--sp-3) 0 var(--sp-4);
  margin-bottom: var(--sp-2);
}
.mapa__nodo {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.4rem;
  border-radius: var(--r);
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}
.mapa__nodo svg { width: 18px; height: 18px; }

/* --- ANTES: descolocado, apagado y con los cables cortados --- */
.mapa--roto .mapa__nodo {
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed #CDC6B9;
  color: #897D64;
  box-shadow: 0 2px 6px rgba(82, 57, 0, 0.05);
}
.mapa--roto .mapa__nodo:nth-child(1) { transform: translate(-9px, 11px) rotate(-6.5deg); }
.mapa--roto .mapa__nodo:nth-child(2) { transform: translate(7px, -8px) rotate(5deg); }
.mapa--roto .mapa__nodo:nth-child(3) { transform: translate(11px, 9px) rotate(-3.5deg); }
.mapa--roto .mapa__nodo:nth-child(4) { transform: translate(-6px, -10px) rotate(6.5deg); }
.mapa--roto .mapa__nodo:nth-child(5) { transform: translate(10px, 12px) rotate(-5deg); }
.mapa--roto .mapa__nodo:nth-child(6) { transform: translate(-12px, -6px) rotate(3deg); }

/* Cables que salen de una pieza y se disuelven: la conexión que no llega */
.mapa--roto .mapa__nodo:nth-child(1)::after,
.mapa--roto .mapa__nodo:nth-child(4)::after,
.mapa--roto .mapa__nodo:nth-child(5)::after {
  content: "";
  position: absolute;
  left: 100%; top: 52%;
  width: 1.5rem; height: 2px;
  background: linear-gradient(90deg, #C6BFB1 0%, rgba(198, 191, 177, 0) 100%);
}

/* --- DESPUÉS: alineado, encendido y unido --- */
.mapa--unido .mapa__nodo {
  background: var(--blanco);
  border: 1px solid rgba(102, 117, 76, 0.32);
  color: var(--texto);
  box-shadow: 0 4px 14px rgba(102, 117, 76, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 1;
}
.mapa--unido .mapa__nodo svg { color: var(--azul-electrico); }

/* Cada pieza dibuja su tramo: a la derecha si no cierra fila, hacia arriba
   si está en la segunda. Anclado a la propia pieza, así que no se
   descuadra aunque un texto pase a dos líneas. */
.mapa--unido .mapa__nodo::after {
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  width: 0.7rem; height: 2px;
  background-color: rgba(102, 117, 76, 0.5);
}
.mapa--unido .mapa__nodo:nth-child(3n)::after { content: none; }
.mapa--unido .mapa__nodo:nth-child(n+4)::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  width: 2px; height: 0.7rem;
  transform: translateX(-50%);
  background-color: rgba(102, 117, 76, 0.5);
}

/* La señal recorriendo los cables: cada tramo se enciende un poco después
   que el anterior, en el orden del recorrido. Es la misma idea que la banda
   de luz pero anclada a las piezas, así que no depende de calcular la
   altura de una fila y no se descuadra nunca. */
.mapa--unido .mapa__nodo::after,
.mapa--unido .mapa__nodo::before {
  animation: cable-vivo 4.4s ease-in-out infinite;
}
.mapa--unido .mapa__nodo:nth-child(2)::after { animation-delay: 0.5s; }
.mapa--unido .mapa__nodo:nth-child(4)::before { animation-delay: 1s; }
.mapa--unido .mapa__nodo:nth-child(4)::after { animation-delay: 1.5s; }
.mapa--unido .mapa__nodo:nth-child(5)::after { animation-delay: 2s; }
.mapa--unido .mapa__nodo:nth-child(5)::before { animation-delay: 1.2s; }
.mapa--unido .mapa__nodo:nth-child(6)::before { animation-delay: 1.4s; }
@keyframes cable-vivo {
  0%, 100% { background-color: rgba(102, 117, 76, 0.42); }
  50%      { background-color: rgba(166, 175, 151, 1); }
}

.escenario__lista { display: grid; gap: 0.55rem; margin-top: auto; }
.escenario__lista li {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.escenario--antes .escenario__lista li { color: #83775F; }
.escenario--antes .escenario__lista li::before { content: "✕"; flex-shrink: 0; color: #BEB6A6; font-weight: 700; }
.escenario--despues .escenario__lista li { color: var(--texto); }
.escenario--despues .escenario__lista li::before { content: "✓"; flex-shrink: 0; color: var(--azul-electrico); font-weight: 700; }

.transformacion__flecha {
  display: grid;
  place-items: center;
  align-self: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-azul);
  color: #fff;
  box-shadow: var(--sh-azul), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (max-width: 900px) {
  .transformacion__flecha { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 420px) {
  .mapa { gap: 0.5rem; }
  .mapa__nodo { font-size: 0.62rem; padding: 0.6rem 0.3rem; }
}

/* --------------------------------------------------------------------------
   25.7 ENTREGABLES
   --------------------------------------------------------------------------
   Nueve piezas en 3 o en 1 columna: nunca queda una celda vacía enseñando
   el fondo del contenedor, que es el que hace de línea divisoria.
   -------------------------------------------------------------------------- */

.entregables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 860px) { .entregables { grid-template-columns: 1fr; } }

.entregable {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: clamp(1.05rem, 2.5vw, 1.4rem);
  background: rgba(218, 212, 195, 0.94);
  transition: background var(--t-medio);
}
.entregable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(102, 117, 76, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-medio);
}
.entregable:hover::before { opacity: 1; }
.entregable > * { position: relative; }
.entregable svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--azul-texto); width: 19px; height: 19px; }
.entregable b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azul-noche);
  margin-bottom: 0.15rem;
}
.entregable span span {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   25.8 PROCESO DE CINCO PASOS
   -------------------------------------------------------------------------- */

.pasos--cinco { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1050px) { .pasos--cinco { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .pasos--cinco { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pasos--cinco { grid-template-columns: 1fr; } }

.paso { transition: border-color var(--t-medio); }
.paso:hover { border-top-color: var(--azul-electrico); }
.pasos--cinco .paso__num {
  width: 46px; height: 46px;
  border-radius: 13px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: box-shadow var(--t-medio), transform var(--t-medio);
}
.paso:hover .paso__num { transform: translateY(-50%) scale(1.06); }
.paso__entrega {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--borde-dark);
  font-size: var(--t-xs);
  color: var(--texto-inv-suave);
}
.paso__entrega b { color: var(--texto-inv); font-weight: 600; }
.pasos > .reveal:nth-child(5) { transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   25.9 SOCIOS
   -------------------------------------------------------------------------- */

.socios--destacados { grid-template-columns: repeat(2, 1fr); }
.socios--destacados .socio {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.socios--destacados .socio__foto {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--borde-dark);
}
.socios--destacados .socio__foto img {
  object-position: center 22%;
  transition: transform 900ms var(--ease);
}
.socios--destacados .socio:hover .socio__foto img { transform: scale(1.035); }
/* Degradado sobre la foto: liga la imagen con el fondo de la tarjeta */
.socios--destacados .socio__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(82, 57, 0, 0) 45%, rgba(82, 57, 0, 0.55) 100%);
  pointer-events: none;
}
.socios--destacados .socio__texto { padding: clamp(1.3rem, 3vw, 1.85rem); }

@media (max-width: 820px) {
  .socios--destacados { grid-template-columns: 1fr; }
  .socios--destacados .socio { grid-template-columns: 150px 1fr; }
  .socios--destacados .socio__foto { aspect-ratio: 3 / 4; border-bottom: 0; border-right: 1px solid var(--borde-dark); }
}
@media (max-width: 560px) {
  .socios--destacados .socio { grid-template-columns: 1fr; }
  .socios--destacados .socio__foto { aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--borde-dark); }
}

.socio__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--azul-texto);
  transition: gap var(--t-rapido), color var(--t-rapido);
}
.socio__enlace:hover { gap: 0.7rem; color: var(--azul-noche); }
.socio__enlace svg { flex-shrink: 0; }

/* Una sola ficha (Susana): tarjeta horizontal centrada, foto a la izquierda.
   Va después de .socios--destacados para ganar la cascada en la home. */
.socios--uno { grid-template-columns: minmax(0, 920px); justify-content: center; }
.socios--uno .socio {
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.socios--uno .socio__foto {
  aspect-ratio: auto;
  min-height: 320px;
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--borde-dark);
}
.socios--uno .socio__foto img {
  position: absolute;
  inset: 0;
  object-position: center 22%;
}
.socios--uno .socio__foto::after { display: none; }
.socios--uno .socio__texto { padding: clamp(1.3rem, 3vw, 2rem); align-self: center; }
@media (max-width: 720px) {
  .socios--uno .socio { grid-template-columns: 1fr; }
  .socios--uno .socio__foto { aspect-ratio: 16 / 11; min-height: 0; border-right: 0; border-bottom: 1px solid var(--borde-dark); }
}

/* --------------------------------------------------------------------------
   25.10 FORMULARIO
   -------------------------------------------------------------------------- */

.form__progreso {
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.form__progreso.is-visible { display: flex; }
.form__barra {
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--borde);
  overflow: hidden;
}
.form__barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-azul);
  transition: width var(--t-medio);
}

.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (max-width: 620px) { .opciones { grid-template-columns: repeat(2, 1fr); } }

.opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
  transition: border-color var(--t-rapido), background var(--t-rapido),
              color var(--t-rapido), box-shadow var(--t-rapido);
}
.opcion:hover { border-color: #C5CBBB; color: var(--texto); }
.opcion.is-activa {
  border-color: var(--azul-electrico);
  background: rgba(102, 117, 76, 0.07);
  color: var(--azul-electrico-osc);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(102, 117, 76, 0.10);
}

.campo__ayuda { font-size: var(--t-xs); color: var(--texto-suave); }

.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  justify-content: center;
  margin-top: var(--sp-2);
}
.garantia { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-xs); color: var(--texto-suave); }
.garantia svg { color: var(--azul-electrico); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   25.11 CTA CONTEXTUAL
   -------------------------------------------------------------------------- */

.cta-contextual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: var(--sp-5);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.9rem);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--blanco);
  overflow: hidden;
}
/* El cta-contextual es una tarjeta como .tarjeta: se queda blanca siempre,
   sea cual sea el fondo de la sección que la rodea. */
.cta-contextual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(380px circle at var(--px) var(--py),
              rgba(102, 117, 76, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}
.cta-contextual:hover::before { opacity: 1; }
.seccion--oscura .cta-contextual::before {
  background: radial-gradient(380px circle at var(--px) var(--py),
              rgba(166, 175, 151, 0.16), transparent 70%);
}
.cta-contextual > * { position: relative; }
.cta-contextual p { flex: 1 1 320px; font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.cta-contextual p b { color: var(--texto); font-weight: 600; }

/* --------------------------------------------------------------------------
   25.12 BOTONES CON LUZ
   --------------------------------------------------------------------------
   Descartado el botón magnético: mover el botón cuando te acercas cambia
   el destino del clic mientras apuntas y castiga a quien tiene poca
   precisión de puntero. La misma sensación se consigue con una luz que
   recorre el botón sin que el objetivo se mueva ni un píxel.
   -------------------------------------------------------------------------- */

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--primario::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(160px circle at var(--px) var(--py),
              rgba(255, 255, 255, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-rapido);
  z-index: -1;
}
.btn--primario:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   25.13 ENTRADA AL SCROLL
   -------------------------------------------------------------------------- */

.reveal { transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
:where(html.js) .reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.995);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* Variante con desenfoque, solo para las cabeceras: son elementos pequeños,
   así que el coste de animar el filtro es asumible. En bloques grandes
   provoca repintados caros y no se usa. */
.reveal--nitidez { transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 620ms var(--ease); }
:where(html.js) .reveal--nitidez { filter: blur(7px); }
.reveal--nitidez.is-visible { filter: blur(0); }

.rejilla > .reveal:nth-child(2) { transition-delay: 80ms; }
.rejilla > .reveal:nth-child(3) { transition-delay: 160ms; }
.rejilla > .reveal:nth-child(4) { transition-delay: 240ms; }
.pasos > .reveal:nth-child(2) { transition-delay: 80ms; }
.pasos > .reveal:nth-child(3) { transition-delay: 160ms; }
.pasos > .reveal:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--nitidez { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   25.14 IMPRESIÓN
   -------------------------------------------------------------------------- */

@media print {
  .header, .footer, .flotantes, .cta-final, .ambiente { display: none; }
  body { color: #000; background: #fff; }
  .seccion, .seccion--alt { background: #fff; }
}

/* ==========================================================================
   26. SEGUNDA PASADA — el sistema roto, las piezas y el cierre
   ========================================================================== */

/* --------------------------------------------------------------------------
   26.1 LA SECCIÓN DE PROBLEMAS SE VE ROTA
   --------------------------------------------------------------------------
   Cada tarjeta recibe una señal que entra por el borde izquierdo y se corta
   antes de llegar al contenido. Es la misma línea que en el sistema Eleva
   conecta las etapas, pero aquí no llega: la sección anterior al sistema
   enseña el sistema estropeado.

   Estas tarjetas no se levantan al pasar por encima como las de servicio.
   Algo roto no debería sentirse atractivo al tocarlo: solo se enciende el
   filo de la señal, que sigue sin llegar.
   -------------------------------------------------------------------------- */

.tarjeta--problema {
  gap: 0.55rem;
  border-left: 2px solid #DAD1C7;
  transition: border-left-color var(--t-medio), box-shadow var(--t-medio);
}
.tarjeta--problema::after {
  content: "";
  position: absolute;
  left: 0; top: clamp(1.4rem, 3vw, 2rem);
  width: 26px; height: 2px;
  background: linear-gradient(90deg, rgba(205, 197, 175, 0.85), rgba(205, 197, 175, 0));
  transition: width var(--t-medio);
}
.tarjeta--problema:hover {
  transform: none;
  border-left-color: var(--arena);
  box-shadow: var(--sh);
}
.tarjeta--problema:hover::after { width: 38px; }
.tarjeta--problema:hover::before { opacity: 0; }
.tarjeta--problema .filo-degradado { display: none; }

/* --------------------------------------------------------------------------
   26.2 CADA SERVICIO, UNA PIEZA DEL SISTEMA
   --------------------------------------------------------------------------
   Seis puntos, los mismos seis de la sección anterior, con encendidos los
   que toca ese servicio. Es lo que evita que se lean como cuatro productos
   sin relación entre ellos.
   -------------------------------------------------------------------------- */

.cubre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.2rem;
}
.cubre__rail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
/* El hilo que une los seis puntos, por detrás */
.cubre__rail::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 50%;
  height: 1px;
  background: var(--borde);
}
.cubre__rail i {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E9E6E0;
  transition: background var(--t-medio), box-shadow var(--t-medio), transform var(--t-medio);
}
.cubre__rail i.is-on {
  background: var(--azul-electrico);
  box-shadow: 0 0 0 3px rgba(102, 117, 76, 0.14);
}
.tarjeta--servicio:hover .cubre__rail i.is-on { transform: scale(1.28); }
.cubre__txt {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: 0.01em;
}
.cubre__txt b {
  font-family: var(--font-marvin);
  font-weight: 400;
  color: var(--azul-texto);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   26.3 CIERRE DEL RECORRIDO
   --------------------------------------------------------------------------
   Los cuatro momentos de la página, con el último encendido. Reutiliza el
   lenguaje del sistema para decir que la conversación es la última etapa
   de lo que acabas de leer, no otra caja de contacto.
   -------------------------------------------------------------------------- */

.cierre {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0;
  margin-bottom: var(--sp-4);
}
.cierre li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.cierre li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(82, 57, 0, 0.3);
}
/* El tramo de cable hasta el momento siguiente */
.cierre li:not(:last-child)::after {
  content: "";
  width: 1.4rem; height: 1px;
  position: absolute;
  right: 0; top: 50%;
  background: rgba(82, 57, 0, 0.2);
}
.cierre .is-actual {
  color: var(--azul-noche);
  font-weight: 600;
  padding-right: 0;
}
.cierre .is-actual::before {
  background: var(--azul-electrico-clr);
  box-shadow: 0 0 0 4px rgba(102, 117, 76, 0.22), 0 0 14px rgba(166, 175, 151, 0.7);
}
@media (max-width: 560px) {
  .cierre li { padding-right: 0.9rem; font-size: 0.68rem; }
  .cierre li:not(:last-child)::after { width: 0.9rem; }
}

/* --------------------------------------------------------------------------
   26.4 ENTRADAS AL SCROLL CON CRITERIO
   --------------------------------------------------------------------------
   El mismo fundido repetido veinte veces no es una decisión, es un ajuste
   por defecto. Cada variante hace lo que hace la pieza:

     nitidez   las cabeceras se enfocan
     enciende  la consola y las fichas de los socios se encienden
     dibuja    el sistema se traza de arriba abajo, en el sentido del flujo
     izq/der   las dos mitades de antes y después convergen
   -------------------------------------------------------------------------- */

.reveal--enciende { transition: opacity 760ms var(--ease), transform 760ms var(--ease); }
:where(html.js) .reveal--enciende { transform: translateY(18px) scale(0.982); }

:where(html.js) .reveal--izq { transform: translateX(-34px); }
:where(html.js) .reveal--der { transform: translateX(34px); }
.reveal--der { transition-delay: 110ms; }
.reveal--izq.is-visible, .reveal--der.is-visible { transform: none; }

@media (max-width: 900px) {
  /* Apiladas ya no convergen: entrarían de lado sin significar nada */
  :where(html.js) .reveal--izq, :where(html.js) .reveal--der { transform: translateY(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal--enciende, .reveal--izq, .reveal--der { transform: none; }
  .sistema__eje::before { transform: scaleY(1); transition: none; }
}

/* --------------------------------------------------------------------------
   26.5 AJUSTES TIPOGRÁFICOS
   --------------------------------------------------------------------------
   A tamaño de titular, el espaciado que funciona en un párrafo sobra. Estos
   dos valores negativos son la diferencia entre un titular compuesto y uno
   simplemente grande.
   -------------------------------------------------------------------------- */

.hero__titulo { letter-spacing: -0.028em; line-height: 1.05; }
.cabecera-seccion h2 { letter-spacing: -0.018em; line-height: 1.11; }
.cta-final h2 { letter-spacing: -0.02em; line-height: 1.08; }
/* Los titulares largos no deberían pasar de unos 22 caracteres por línea a
   tamaño display: por encima de eso la vista pierde el renglón. */
.cabecera-seccion h2 { max-width: 18ch; }
.cabecera-seccion h2:only-child { max-width: none; }
@media (max-width: 700px) { .cabecera-seccion h2 { max-width: none; } }

/* --------------------------------------------------------------------------
   26.6 BOTONES
   --------------------------------------------------------------------------
   Un barrido de luz que cruza el botón una vez al pasar por encima. Sin
   brillos permanentes: el CTA destaca por su peso en la composición.
   -------------------------------------------------------------------------- */

.btn--primario::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transform: skewX(-18deg);
  transition: left 620ms var(--ease);
  z-index: -1;
}
.btn--primario:hover::before { left: 120%; }
.btn:active { transform: translateY(0) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .btn--primario::before { display: none; }
}