/* ============================================================================
   VERTEX STUDIO — landing
   ----------------------------------------------------------------------------
   TIPOGRAFÍA — autoalojada y toda SIL OFL

   Antes venía de tres CDN: Google Fonts (Inter), onlinewebfonts.com (la familia
   de display) y cdnjs (Font Awesome). Tres conexiones a terceros antes de
   pintar nada, y en el caso de onlinewebfonts además una tipografía COMERCIAL
   reetiquetada con una licencia que su autor nunca concedió — en la web de una
   empresa eso no es un tecnicismo, es un riesgo.

   La de display es Jersey 15, elegida comparando ocho candidatas libres
   renderizando el texto real del sitio. Sustituye a DotGothic16, cuyo espaciado
   bailaba y cuya "j" quedaba rota a tamaño de titular. Se descartaron Silkscreen
   (sin minúsculas: convertía el titular en versales), Pixelify Sans (ligadura
   "ft" defectuosa), Micro 5 (se deshace a 58px) y Nova Square (ya no es matriz
   de puntos).

   `unicode-range` hace que `latin-ext` sólo se descargue si aparece un carácter
   que lo necesite; para castellano corriente basta `latin`.
   ========================================================================== */

/* Inter VARIABLE. Un único fichero cubre de 400 a 600: antes eran tres estáticos
   de 47 KB cada uno, 141 KB y tres peticiones, para lo mismo. `font-weight` con
   rango es lo que le dice al navegador que puede interpolar cualquier peso
   intermedio en vez de buscar un fichero por peso. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-var-latin.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-var-latin-ext.woff2') format('woff2-variations');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jersey15';
  src: url('/fonts/Jersey15-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jersey15';
  src: url('/fonts/Jersey15-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   PALETA — extraída del vídeo, no inventada

   Se muestrearon los 10 s del bucle a 1 fps y se agruparon los píxeles con
   saturación real (el 26,6% del total; el resto son grises). Reparto por
   familias: malva/rosa 54%, rust cálido 30%, lavanda 16%.

   El negro también sale de ahí: el del vídeo es #0C0C0C, cálido, no el #000
   puro que usaban las secciones. Buena parte de la sensación de "todo negro y
   feo" venía de ese salto entre un hero en color y unas secciones en negro
   absoluto sin una sola nota cromática.
   -------------------------------------------------------------------------- */
:root {
  --bg: #0B0A0C;              /* negro cálido del vídeo */
  --bg-alt: #141016;          /* banda alterna, con una gota de malva */
  --superficie: #17131A;      /* tarjetas */
  --text: #ffffff;
  --muted: #9a93a3;           /* gris con sesgo lavanda, no neutro */

  /* Acentos. El rosa es el dominante del vídeo; la lavanda, el secundario. */
  --rosa: #E2B4CC;
  --rosa-fuerte: #EFC9DC;
  --lavanda: #A9A2CB;
  --rust: #6B4340;

  /* Resplandores por sección: mismo recurso que el hero, llevado abajo. */
  --luz-rosa: rgba(226, 180, 204, 0.16);
  --luz-lavanda: rgba(169, 162, 203, 0.14);
  --luz-rust: rgba(107, 67, 64, 0.30);

  --borde: rgba(226, 180, 204, 0.14);
  --borde-fuerte: rgba(226, 180, 204, 0.34);

  --nav-text: #2e2e2e;
  --pill-dark: #241E29;
  --sign-in-text: #E4DCE6;
  --nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  --trust-bg: #241E29;
  --trust-border: rgba(226, 180, 204, 0.45);
  --trust-text: #DCD2E0;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Jersey15", ui-monospace, "Courier New", monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* El encargo pedía `overflow: hidden` y una sola pantalla. La página lleva
     ahora Servicios, Sectores y Contacto, así que tiene que poder desplazarse:
     lo que se conserva es que la PORTADA ocupa exactamente un viewport. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ====================== PORTADA: exactamente un viewport ================== */
.viewport { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }

.bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px);
}

/* ------------------------------- CABECERA -------------------------------- */
.header {
  flex-shrink: 0;
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.8vw, 28px);
  animation: slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------- MARCA ---------------------------------
   El encargo pedía sólo un botón circular. Ahora lleva además el nombre, y eso
   obliga a resolver la legibilidad: el símbolo es un disco crema opaco que se
   ve sobre cualquier fotograma, pero un texto suelto encima del vídeo no —el
   fondo cambia de claro a oscuro cada segundo—. Por eso el conjunto va sobre
   una píldora oscura: la misma de "Hablemos", que además deja la cabecera
   simétrica (píldora oscura · píldora blanca de navegación · píldora oscura).

   El disco NO lleva fondo blanco propio: el círculo forma parte del logotipo
   —crema #F4F2EF, no blanco—, así que ponerle uno detrás dibujaría un halo. */
.marca {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: clamp(44px, 5.2vw, 48px);
  padding: 3px 16px 3px 3px;
  background: var(--pill-dark);
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  transition: transform 0.25s ease, background 0.2s ease;
}
.marca:hover { transform: scale(1.04); background: #323234; }

.marca-simbolo {
  width: clamp(38px, 4.4vw, 42px);
  height: clamp(38px, 4.4vw, 42px);
  border-radius: 50%;
  object-fit: contain;
}

.marca-nombre {
  color: #f4f2ef;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.nav {
  flex: 1;
  max-width: 430px;
  height: clamp(44px, 5.2vw, 48px);
  padding: 4px 8px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.nav-link {
  position: relative;
  color: var(--nav-text);
  font-weight: 500;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: -0.01em;
  opacity: 0.5;
  padding: 6px 4px 10px;
  transition: opacity 0.2s ease;
}
.nav-link:hover { opacity: 0.75; }
.nav-link.is-active { opacity: 1; }

/* Tres puntos de 3px bajo el enlace activo. Se dibuja UNO y los otros dos son
   sombras desplazadas: así el indicador es un solo nodo y no tres. */
.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #000;
  transform: translateX(-50%);
  box-shadow: -5px 0 0 #000, 5px 0 0 #000;
}

.signin {
  flex-shrink: 0;
  height: clamp(44px, 5.2vw, 48px);
  display: inline-flex; align-items: center;
  padding: 0 clamp(16px, 2vw, 22px);
  background: var(--pill-dark);
  color: var(--sign-in-text);
  border-radius: 999px;
  box-shadow: var(--nav-shadow);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.signin:hover { background: #323234; color: #fff; transform: translateY(-1px); }

.burger { display: none; }

/* --------------------------------- HERO ---------------------------------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 900px;
  width: 100%;
}

/* Wordmark del hero. Único texto oscuro de toda la portada, y no es un capricho
   de estilo: se apoya sobre la franja superior del vídeo, que es la parte clara
   —el resto del hero cae sobre el degradado oscuro, donde manda el blanco—.
   Medido contra esa banda da del orden de 12:1, y ~7:1 en su momento más gris.

   El tono es el del propio chevron del logotipo (#0E0D10), un punto levantado
   para que no compita en negrura con el símbolo que está justo encima. */
.marca-hero {
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 96px);
  line-height: 1;
  color: #16151b;
  /* Tracking POSITIVO, al contrario que el titular: en una matriz de puntos las
     letras se tocan y a este cuerpo la palabra se leería como una mancha. */
  letter-spacing: 0.06em;
  margin-bottom: clamp(14px, 3.2vh, 34px);
}

/* Fila de confianza: anillos oscuros solapados con un círculo blanco dentro. */
.trust {
  --trust-size: clamp(36px, 4.5vw, 42px);
  display: inline-flex;
  align-items: center;
  margin-bottom: clamp(16px, 2.5vh, 26px);
}

.avatar {
  width: var(--trust-size);
  height: var(--trust-size);
  border-radius: 50%;
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  /* El padding es lo que convierte el disco en ANILLO: el círculo blanco de
     dentro sólo ocupa el hueco que deja, y entre ambos queda el borde oscuro. */
  padding: 5px;
  transition: transform 0.35s ease;
}
.avatar-in {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
}
/* El icono era un <i> de Font Awesome dimensionado con font-size; ahora es un
   <svg>, así que se mide en ancho y alto. El color lo hereda por currentColor. */
.avatar-in svg {
  width: calc(var(--trust-size) * 0.42);
  height: calc(var(--trust-size) * 0.42);
  color: #111;
}

.a1 { z-index: 1; }
.a2 { z-index: 2; margin-left: calc(var(--trust-size) * -0.42); }
.a3 { z-index: 4; margin-left: calc(var(--trust-size) * -0.42); }

.trust:hover .a1 { transform: translateY(-2px); }
.trust:hover .a2 { transform: translateY(-4px); }
.trust:hover .a3 { transform: translateY(-2px); }

.trust-pill {
  height: var(--trust-size);
  display: inline-flex; align-items: center;
  background: var(--trust-bg);
  border: 1px solid var(--trust-border);
  border-radius: 999px;
  color: var(--trust-text);
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 13.5px);
  /* Se mete bajo el último anillo y compensa el solape con padding izquierdo,
     para que el texto no quede debajo del círculo. */
  margin-left: calc(var(--trust-size) * -0.42);
  padding-left: calc(var(--trust-size) * 0.58);
  padding-right: clamp(14px, 1.8vw, 18px);
}

.headline {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
  font-size: clamp(28px, 6.2vw, 80px);
  letter-spacing: -0.04em;
  line-height: 1.12;
  overflow: hidden;
}
.headline .line { display: block; white-space: nowrap; }
.headline .line { opacity: 0; transform: translateY(14px); animation: headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.headline .l1 { animation-delay: 0.12s; }
.headline .l2 { animation-delay: 0.3s; }

.subhead {
  max-width: min(500px, 92%);
  margin-top: clamp(12px, 1.8vh, 18px);
  /* El encargo pide la escala base más 2 puntos tipográficos. */
  font-size: clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt));
  line-height: 1.55;
  font-weight: 400;
  color: #d0d0d0;
  opacity: 0.8;
}

.cta {
  display: inline-block;
  margin-top: clamp(16px, 2.4vh, 26px);
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: clamp(13.5px, 1.5vw, 14.5px);
  padding: clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 22px rgba(255, 255, 255, 0.32),
    0 0 44px rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 30px rgba(255, 255, 255, 0.45),
    0 0 60px rgba(255, 255, 255, 0.2);
}

/* ------------------------------- MÉTRICAS -------------------------------- */
.stats {
  flex-shrink: 0;
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-icon { font-family: var(--font-display); color: #fff; font-size: clamp(22px, 3vw, 33px); line-height: 1; }
.stat-value {
  color: #fff;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.025em;
  /* Cifras de ancho fijo: sin esto el número baila de ancho mientras cuenta y
     las cuatro columnas se mueven a la vez. */
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--muted); font-size: clamp(11px, 1.2vw, 12.5px); text-align: center; }

/* ========================= ANIMACIONES DE ENTRADA ======================== */
.anim {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  filter: blur(6px);
  animation: reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
.pulse {
  opacity: 0;
  animation: revealPulse 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes reveal { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes revealPulse {
  0%   { opacity: 0; transform: translateY(22px) scale(0.96); filter: blur(6px); }
  70%  { opacity: 1; transform: translateY(0) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes headlineFade { to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes linkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========================================================================== */
/* SECCIONES INFERIORES                                                        */
/* Mismo idioma visual que la portada —negro, píldoras, glifos de matriz de     */
/* puntos— pero sobre fondo sólido: aquí ya no hay vídeo detrás, y el texto     */
/* largo necesita un fondo estable para leerse.                                */
/* ========================================================================== */

/* Las secciones dejan de ser negro plano. `position: relative` e `isolation`
   preparan el terreno para el resplandor de color que va en ::before. */
.seccion {
  position: relative;
  isolation: isolate;
  padding: clamp(72px, 12vh, 130px) clamp(18px, 4vw, 32px);
  background: var(--bg);
  overflow: hidden;
}
.seccion-alt { background: var(--bg-alt); }

/* RESPLANDOR DE SECCIÓN.
   Una elipse de color muy difusa detrás del contenido. Es el mismo recurso que
   sostiene el hero, traído a las secciones: da color sin meter una sola imagen,
   no pesa nada y se adapta al ancho. `z-index: -1` con `isolation: isolate` en
   el padre lo mantiene detrás del contenido de SU sección y no de la de al lado. */
.seccion::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 120%;
  height: 70%;
  left: -10%;
  top: -15%;
  background: radial-gradient(50% 50% at 50% 50%, var(--luz-rosa) 0%, transparent 70%);
}
/* Alternando el color y el lado, el scroll no se siente como una repetición. */
#problemas::before { background: radial-gradient(50% 50% at 70% 40%, var(--luz-rust) 0%, transparent 70%); }
#servicios::before { background: radial-gradient(50% 50% at 25% 30%, var(--luz-lavanda) 0%, transparent 70%); }
#sectores::before  { background: radial-gradient(50% 50% at 75% 60%, var(--luz-rosa) 0%, transparent 70%); }
#proceso::before   { background: radial-gradient(50% 50% at 30% 45%, var(--luz-rust) 0%, transparent 70%); }
#casos::before     { background: radial-gradient(50% 50% at 65% 35%, var(--luz-lavanda) 0%, transparent 70%); }
#faq::before       { background: radial-gradient(50% 50% at 40% 30%, var(--luz-rosa) 0%, transparent 70%); }
#contacto::before  { background: radial-gradient(60% 60% at 50% 40%, var(--luz-lavanda) 0%, transparent 70%); }

.contenedor { max-width: 1120px; margin: 0 auto; }
.contenedor-estrecho { max-width: 640px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.7vw, 17px);
  /* El rótulo es lo que más se repite en la página: pasarlo a rosa tiñe el
     recorrido entero sin tocar el texto que hay que leer. */
  color: var(--rosa);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
/* ----------------------------------------------------------------------------
   CABECERA EDITORIAL A DOS COLUMNAS

   Antes el rótulo, el título y la entradilla iban apilados contra el margen
   izquierdo con el título limitado a 20 caracteres de ancho. En un monitor de
   1450px eso dejaba media pantalla vacía a la derecha, que no se lee como aire
   intencionado sino como página sin terminar. Y además chocaba con el hero, que
   sí está centrado.

   Ahora el contenedor es una rejilla de dos columnas: el título ocupa la
   izquierda y la entradilla se sienta a su derecha, alineada abajo para que las
   dos compartan línea de base óptica. Todo lo demás —rótulo y rejillas de
   contenido— sigue ocupando el ancho completo.

   Se resuelve sin tocar el HTML: cada hijo directo ocupa las dos columnas por
   defecto y sólo el título y la entradilla se reubican.
   -------------------------------------------------------------------------- */
.contenedor {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: clamp(30px, 5vw, 80px);
}
.contenedor > * { grid-column: 1 / -1; }

.titulo {
  grid-column: 1;
  font-size: clamp(28px, 4.2vw, 50px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: clamp(36px, 6vh, 58px);
  text-wrap: balance;
}
.entradilla {
  grid-column: 2;
  /* Alineada abajo: así el bloque de texto pequeño acompaña al pie del titular
     en vez de flotar a media altura junto a su primera línea. */
  align-self: end;
  color: var(--muted);
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: clamp(36px, 6vh, 58px);
}
/* El contenedor estrecho del contacto y del FAQ sigue en una sola columna: ahí
   el texto está centrado y partirlo en dos rompería la simetría. */
.contenedor-estrecho, .contenedor-medio { grid-template-columns: 1fr; }
.contenedor-estrecho > *, .contenedor-medio > * { grid-column: 1; }

/* --------------------------------- Tarjetas ------------------------------- */
/* Tres columnas fijas, no `auto-fit`. Con auto-fit salían cuatro y, siendo
   seis tarjetas, la segunda fila quedaba a medias con dos huecos vacíos. Tres
   por fila reparte 6 en dos filas completas. */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* Truco de rejilla: el fondo asoma por el `gap` de 1px y hace de separador,
     así que las tarjetas no necesitan borde propio y no se duplican las líneas
     donde dos tarjetas se tocan. */
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
}
.tarjeta {
  background: var(--bg);
  padding: clamp(24px, 3vw, 34px);
  transition: background 0.25s ease;
}
.seccion-alt .tarjeta { background: var(--bg-alt); }
.tarjeta:hover { background: var(--superficie); }
.tarjeta-glifo {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--rosa);
  line-height: 1;
  margin-bottom: 18px;
}
.tarjeta h3 { font-size: clamp(16px, 1.8vw, 18.5px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.tarjeta p { color: var(--muted); font-size: clamp(13.5px, 1.4vw, 14.5px); line-height: 1.65; }

/* --------------------------------- Sectores ------------------------------- */
/* Mismo motivo que en servicios: seis sectores, tres por fila. */
.rejilla-sectores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
.sector {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 28px);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sector:hover { border-color: var(--borde-fuerte); transform: translateY(-2px); box-shadow: 0 10px 40px -20px var(--luz-rosa); }
.sector-num {
  position: absolute;
  top: 18px; right: 20px;
  font-family: var(--font-display);
  font-size: 26px;
  /* Marca de agua sobre fondo oscuro: blanco muy bajo. En negro traslúcido
     desaparecería del todo en vez de quedar sutil. */
  color: rgba(226, 180, 204, 0.30);
}
.sector h3 { font-size: clamp(16px, 1.8vw, 18.5px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; padding-right: 40px; }
.sector p { color: var(--muted); font-size: clamp(13.5px, 1.4vw, 14.5px); line-height: 1.6; }

/* -------------------------------- Formulario ------------------------------ */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: clamp(22px, 3.4vw, 34px);
}
.seccion-alt .formulario { background: var(--bg); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: 13.5px; font-weight: 500; color: #e8e8e8; }
.opcional { color: var(--muted); font-weight: 400; }

.campo input, .campo textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #fff;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 11px 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* 16px o más evitaría el zoom automático de iOS al enfocar; a 15px se
     compensa desde la media query de móvil, más abajo. */
}
.campo textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.campo input::placeholder, .campo textarea::placeholder { color: #6a6a6a; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgba(226, 180, 204, 0.16);
}
/* El campo inválido sólo se marca DESPUÉS de intentar enviar: con :invalid a
   secas, un campo obligatorio se pinta en rojo antes de que lo hayas tocado. */
.formulario.validado .campo input:invalid,
.formulario.validado .campo textarea:invalid {
  border-color: #ff6b6b;
}

/* La trampa antispam se saca de la pantalla en vez de ocultarse con `display`:
   muchos bots ignoran los campos que no se renderizan, y de este modo sí la ven. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cta-ancho { width: 100%; text-align: center; margin-top: 6px; }
.cta-ancho[disabled] { opacity: 0.6; cursor: progress; }

.form-aviso { font-size: 13.5px; line-height: 1.5; min-height: 1px; }
.form-aviso.ok { color: #7fd6a8; }
.form-aviso.ko { color: #ff9c9c; }
.form-legal { color: var(--muted); font-size: 12.5px; }

.contacto-directo { margin-top: 26px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.8; }
.contacto-directo a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------- Pie ---------------------------------- */
.pie { border-top: 1px solid var(--borde); padding: 28px clamp(18px, 4vw, 32px); background: var(--bg); }
.pie-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.pie-nav { display: flex; gap: 18px; }
.pie-nav a:hover { color: var(--rosa); }

/* Revelado al llegar. Se activa desde JS con IntersectionObserver, y el estado
   oculto sólo se aplica si hay JS (clase .js en <html>): sin script, todo el
   contenido queda visible. La animación añade, nunca esconde. */
.js .reveal { opacity: 0; transform: translateY(20px); }
/* 0,45 s y no 0,7. Con el escalonado encima, el último elemento de una rejilla
   tardaba más de un segundo en ser legible, y quien scrollea rápido —casi
   todo el mundo— se encontraba huecos vacíos. El efecto se sigue notando. */
.reveal.visible { opacity: 1; transform: translateY(0); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* =============================== FOCO VISIBLE ============================= */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.nav a:focus-visible { outline-color: #000; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
  .nav, .signin { display: none; }

  .header { justify-content: space-between; max-width: none; }
  .marca { height: 48px; padding-right: 14px; }
  .marca-simbolo { width: 42px; height: 42px; }

  .burger {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: var(--pill-dark);
    cursor: pointer;
    box-shadow: var(--nav-shadow);
    transition: background 0.3s ease;
  }
  .burger span {
    display: block;
    width: 18px; height: 1.5px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
  }
  .burger[aria-expanded="true"] { background: #fff; }
  .burger[aria-expanded="true"] span { background: #000; }
  /* Las barras giran sobre sí mismas: es la MISMA barra convertida en aspa, no
     un icono distinto, y por eso se lee como un gesto. */
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 8;
    animation: overlayIn 0.28s ease both;
  }
  .sheet {
    position: fixed;
    top: 84px; left: clamp(14px, 4vw, 24px); right: clamp(14px, 4vw, 24px);
    z-index: 9;
    background: #fff;
    border-radius: 28px;
    padding: 22px 18px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; gap: 4px;
    animation: menuIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .sheet-link {
    position: relative;
    color: var(--nav-text);
    font-size: 17px; font-weight: 500;
    padding: 13px 12px 17px;
    /* Ancho del contenido, no de la hoja. Los tres puntos del enlace activo se
       colocan con `left: 50%`, y con el enlace a ancho completo ese 50% caía en
       el centro de la hoja en vez de bajo la palabra. El alto del área pulsable
       no cambia: sigue en 47px, por encima del mínimo recomendado. */
    align-self: flex-start;
    opacity: 0;
    animation: linkIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .sheet-link:nth-child(1) { animation-delay: 0.06s; }
  .sheet-link:nth-child(2) { animation-delay: 0.11s; }
  .sheet-link:nth-child(3) { animation-delay: 0.16s; }
  .sheet-link:nth-child(4) { animation-delay: 0.21s; }
  .sheet-link.is-active::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 50%;
    width: 3px; height: 3px; border-radius: 50%;
    background: #000; transform: translateX(-50%);
    box-shadow: -5px 0 0 #000, 5px 0 0 #000;
  }
  .sheet-cta {
    margin-top: 8px;
    text-align: center;
    background: var(--pill-dark); color: #fff;
    border-radius: 999px;
    padding: 14px 18px;
    font-size: 15px; font-weight: 500;
    opacity: 0;
    animation: linkIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.26s forwards;
  }

  /* El atributo `hidden` del HTML equivale a `display: none`, pero lo aplica la
     hoja del NAVEGADOR: cualquier `display` que declaremos nosotros lo pisa. Y
     .sheet declara `display: flex` para maquetar los enlaces en columna, así
     que el menú se veía abierto con la hamburguesa cerrada. Esta regla devuelve
     a `hidden` su significado. (.overlay no lo necesitaba porque no declara
     display, y por eso el fallo sólo se veía en uno de los dos.) */
  .sheet[hidden], .overlay[hidden] { display: none; }

  body.menu-open { overflow: hidden; }

  .headline { letter-spacing: -0.08em; line-height: 1.05; }
  .rejilla-servicios, .rejilla-sectores { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 16px clamp(12px, 3vw, 20px); }
  .fila { grid-template-columns: 1fr; }
  /* 16px es el umbral por debajo del cual Safari en iOS hace zoom al enfocar un
     campo, y ese zoom descoloca la página entera. */
  .campo input, .campo textarea { font-size: 16px; }
}

/* Tablet: dos columnas. Seis elementos siguen cuadrando en filas completas. */
@media (max-width: 1000px) and (min-width: 721px) {
  .rejilla-servicios, .rejilla-sectores { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   PANTALLAS BAJAS

   La portada tiene que caber en un viewport, y su altura la fija sobre todo el
   TITULAR: a 80px por línea son 179px de las ~480 disponibles en un portátil de
   800px. Sin estos topes, el contenido llenaba el hueco hasta tocar la cabecera
   por arriba y las métricas por abajo — medido: 0px de separación en ambos
   extremos a 623px de alto.

   Se escala por ALTURA y no por anchura, que es la dimensión que escasea: una
   pantalla ancha y baja (un portátil normal) necesita el mismo recorte que una
   estrecha, y `vw` no lo veía.
   -------------------------------------------------------------------------- */
@media (max-height: 860px) {
  .headline { font-size: clamp(26px, 4.6vw, 58px); }
  .marca-hero { font-size: clamp(26px, 3.6vw, 48px); margin-bottom: 14px; }
  .trust { --trust-size: clamp(34px, 4vw, 38px); margin-bottom: 14px; }
  .subhead { margin-top: 12px; }
  .cta { margin-top: 16px; }
}

@media (max-height: 700px) {
  .headline { font-size: clamp(24px, 3.8vw, 46px); }
  .marca-hero { font-size: clamp(22px, 2.8vw, 36px); margin-bottom: 10px; }
  .trust { --trust-size: 34px; margin-bottom: 10px; }
  .subhead { margin-top: 9px; font-size: clamp(13.5px, 1.3vw, 15.5px); }
  .cta { margin-top: 12px; }
}

@media (max-width: 420px) {
  .trust { --trust-size: 34px; }
  .trust-pill { font-size: 12px; }
  .headline { letter-spacing: -0.09em; line-height: 1.04; }
}

/* ============================================================================
   MOVIMIENTO REDUCIDO
   Todo lo de arriba son entradas: elementos que empiezan invisibles y aparecen.
   Si se apagan las animaciones sin más, se quedarían invisibles PARA SIEMPRE.
   Por eso aquí no basta con anular la animación: hay que devolver el estado
   final a mano.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim, .pulse, .headline .line, .header {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .headline { color: #fff; }
  .bg-video { display: none; }
}

/* ============================================================================
   SECCIONES PORTADAS DESDE LA WEB ACTUAL
   Valor, Problemas, Proceso, Casos y FAQ. Mismo contenido, mismo lenguaje
   visual que el resto: negro, rejillas de 1px, glifos de matriz de puntos.
   ========================================================================== */

.contenedor-medio { max-width: 820px; }

/* Oculto a la vista, presente para un lector de pantalla. No se usa `display:
   none` ni `visibility: hidden`: ambos lo esconderían también de la voz. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------- Valor ---------------------------------- */
.rejilla-valor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
}
.valor { background: var(--bg); padding: clamp(22px, 2.8vw, 30px); transition: background 0.25s ease; }
.valor:hover { background: var(--superficie); }
.valor h3 { font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.valor p { color: var(--muted); font-size: clamp(13px, 1.3vw, 14px); line-height: 1.6; }
.valor-cierre {
  margin-top: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------- Problemas -------------------------------- */
.rejilla-problemas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
.problema { position: relative; padding-top: 6px; }
.problema-num {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  /* Los problemas no llevan tarjeta: el número hace de ancla visual, así que
     necesita más presencia que una marca de agua de fondo. */
  color: var(--lavanda);
  margin-bottom: 12px;
}
.problema h3 { font-size: clamp(16px, 1.7vw, 18px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.problema p { color: var(--muted); font-size: clamp(13.5px, 1.4vw, 14.5px); line-height: 1.65; }

/* -------------------------------- Proceso --------------------------------- */
.pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.paso { position: relative; padding-top: 30px; }
/* Línea que une los cuatro pasos: se dibuja como borde superior de cada uno y se
   recorta en el último, en vez de como un elemento aparte que habría que
   posicionar y mantener alineado. */
.paso::before {
  content: '';
  position: absolute;
  top: 13px; left: 0; right: -12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.paso:last-child::before { right: 0; }
.paso-num {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--rosa);
  background: var(--bg);
  padding-right: 12px;
  line-height: 26px;
}
.seccion-alt .paso-num { background: var(--bg-alt); }
.paso h3 { font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.paso p { color: var(--muted); font-size: clamp(13px, 1.35vw, 14px); line-height: 1.6; }

/* --------------------------------- Casos ---------------------------------- */
.caso {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 40px);
}
.caso + .caso { margin-top: clamp(14px, 2vw, 20px); }
.caso-num { display: block; font-family: var(--font-display); font-size: 28px; color: var(--lavanda); margin-bottom: 14px; }
.caso-chip { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.caso h3 { font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 12px; }
.caso-texto { color: var(--muted); font-size: clamp(14px, 1.45vw, 15.5px); line-height: 1.7; margin-bottom: 16px; max-width: 52ch; }
.caso-enlace { display: inline-block; font-size: 14px; font-weight: 500; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.caso-enlace:hover { opacity: 0.7; }
.caso-nota { color: #8A8490; font-size: 12.5px; line-height: 1.55; margin-top: 10px; max-width: 46ch; }
/* La regla separadora es vertical en escritorio y horizontal al apilar: en la
   columna estrecha del móvil un borde izquierdo no separa nada. */
.caso-lateral { border-left: 1px solid var(--borde); padding-left: clamp(20px, 2.6vw, 34px); }
.caso-etiqueta { font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--rosa); margin-bottom: 14px; }
.caso-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.caso-lista li { position: relative; padding-left: 18px; font-size: 14px; color: #d8d8d8; line-height: 1.5; }
.caso-lista li::before { content: '›'; position: absolute; left: 0; color: var(--rosa); font-family: var(--font-display); }

/* ---------------------------------- FAQ ----------------------------------- */
.faq { border-top: 1px solid var(--borde); }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: opacity 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: 0.72; }
/* El signo pasa de + a − al abrir. Se gira la barra vertical de un "+" dibujado
   con dos pseudo-elementos, para que el cambio sea un giro y no un salto. */
.faq-item summary::after,
.faq-item summary::before {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 1.5px;
  background: var(--rosa);
  transform: translateY(-50%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item summary::before { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::before { transform: translateY(-50%) rotate(0deg); }
.faq-item p {
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 15px);
  line-height: 1.75;
  padding: 0 44px 22px 0;
  max-width: 68ch;
}


/* ============================================================================
   RESPONSIVE DE LAS SECCIONES PORTADAS

   Va al FINAL del fichero, y eso es lo importante. Estos ajustes vivían más
   arriba, junto al resto de media queries, pero las reglas base de .pasos,
   .rejilla-valor y compañía se escribieron DESPUÉS. A igual especificidad gana
   la última, así que la rejilla de cuatro columnas del proceso seguía aplicando
   en un móvil: medido a 390px, los pasos 03 y 04 se salían hasta los 571px y la
   página se desplazaba en horizontal.

   La regla no es "las media queries van al final del fichero" sino "van después
   de lo que anulan". Aquí coincide con el final porque son lo último añadido.
   ========================================================================== */

@media (max-width: 1000px) {
  .rejilla-valor, .rejilla-problemas, .pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .rejilla-valor, .rejilla-problemas, .pasos { grid-template-columns: 1fr; }

  /* Apilados, la línea que unía los pasos ya no une nada: iría de un paso al de
     arriba, que no es la relación que cuenta. El número pasa a la izquierda. */
  .paso::before { display: none; }
  .paso { padding-top: 0; padding-left: 42px; min-height: 26px; }
  .paso-num { padding-right: 0; }

  .caso { grid-template-columns: 1fr; }
  .caso-lateral {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 0;
    padding-top: 22px;
  }
}

/* Objetivos táctiles. En escritorio estos enlaces se pulsan con un ratón y 17px
   de alto sobran; en un móvil se tocan con el pulgar, y por debajo de 44px la
   tasa de fallo sube. Se les da altura con padding, sin cambiar la tipografía. */
@media (max-width: 720px) {
  .pie-nav { gap: 4px 20px; flex-wrap: wrap; }
  .pie-nav a { padding: 14px 0; }
  .contacto-directo a { display: inline-block; padding: 12px 0; }
  .caso-enlace { padding: 14px 0; }
  /* El CTA se quedaba en 41px por el clamp, que escala con la ALTURA de la
     ventana y en un móvil apaisado da el valor mínimo. En táctil manda el dedo,
     no la altura de pantalla. */
  .cta { padding-top: 15px; padding-bottom: 15px; }
}

/* ============================================================================
   PÁGINAS LEGALES
   Texto largo para leer, no para escanear: una sola columna estrecha, más
   interlineado y sin ningún adorno que distraiga.
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding: 130px clamp(18px, 4vw, 32px) 90px; }
.legal-volver { display: inline-block; font-size: 14px; color: var(--rosa); margin-bottom: 28px; }
.legal-volver:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 10px; }
.legal .legal-fecha { color: var(--muted); font-size: 13.5px; margin-bottom: 40px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  color: var(--rosa);
  margin: 40px 0 14px;
  letter-spacing: 0.01em;
}
.legal p, .legal li { color: #cfc8d4; font-size: 15.5px; line-height: 1.75; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: #fff; font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); color: #cfc8d4; vertical-align: top; }
.legal th { color: #fff; font-weight: 600; }
.legal-tabla-envoltorio { overflow-x: auto; }

/* Hueco pendiente. Rojo y con texto entre corchetes: la idea es que sea
   IMPOSIBLE publicar la página sin darse cuenta de que falta el dato. */
.legal .falta {
  background: #4a1420;
  color: #ffb4c0;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.92em;
}
.aviso-incompleto {
  border: 1px solid #7d2438;
  background: #2a1017;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 34px;
}
.aviso-incompleto p { color: #ffc9d2; margin: 0; font-size: 14.5px; }
.pie-legal a { color: var(--muted); }
.pie-legal a:hover { color: var(--rosa); }
.form-legal a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .pie-legal a { padding: 14px 0; } }