/* ============================================================
   NARVIA — hoja de estilos

   Identidad nueva (septiembre 2026): azul petróleo + naranja,
   Space Grotesk para titulares e IBM Plex para todo lo demás.
   Sustituye a la anterior de azul noche y dorado.

   ORDEN DEL ARCHIVO
   1.  Tokens y reajustes
   2.  Piezas comunes (botones, contenedores, eyebrows, títulos)
   3.  Apariciones al hacer scroll
   4.  Intro de marca
   5.  Cabecera y navegación
   6.  Portada (hero) y su marca animada
   7.  Cinta de servicios
   8.  Qué se automatiza
   9.  Bloque "cuéntelo"
   10. Quién está detrás
   11. Caso JH
   12. Cómo funciona
   13. Garantía
   14. Tarifas
   15. Preguntas frecuentes
   16. Contacto y formulario
   17. Pie
   18. Asistente de WhatsApp, botón flotante y cookies
   19. Páginas sueltas (gracias, avisos legales)

   REGLA GENERAL: casi no hay media queries. Todo se adapta con clamp(),
   flex-wrap y grid auto-fit, así que la web funciona de 320 px a 1600 px
   sin puntos de ruptura que mantener.
   ============================================================ */

/* ---------- 1. Tokens y reajustes ---------- */

:root {
  /* Oscuros: el azul del logotipo y sus derivados */
  --ink: #072430;          /* fondo oscuro principal, botón oscuro */
  --ink-deep: #04191F;     /* pie */
  --teal-800: #0A2E3E;
  --teal-780: #0A3143;
  --teal-700: #12475E;
  --teal-600: #1A5872;

  /* Texto sobre claro */
  --text-ink: #0C3345;
  --body: #3A5D6C;
  --body-soft: #4A6B79;
  --muted: #7C97A3;

  /* Texto sobre oscuro */
  --mist: #CFE3EA;
  --mist-2: #A9C7D3;
  --muted-2: #7FA9BB;
  --muted-3: #6E9AAD;
  --muted-4: #5E8093;

  /* Naranja: el acento del logotipo. Hay tres versiones a propósito.
     El naranja puro no llega a 4,5:1 sobre papel, así que para texto
     pequeño sobre claro se usa --orange-ink y sobre oscuro,
     --orange-soft. El puro queda para fondos, bordes e iconos. */
  --orange: #F2703F;
  --orange-hover: #FF8351;
  --orange-ink: #D9552A;
  --orange-soft: #F2A184;

  /* Claros */
  --paper: #F6F3EF;
  --card: #ffffff;
  --card-2: #FCFAF8;

  --line-light: rgba(12, 51, 69, .12);
  --line-light-2: rgba(12, 51, 69, .2);
  --line-dark: rgba(207, 227, 234, .14);
  --line-dark-2: rgba(207, 227, 234, .35);

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.2, 1.3, .35, 1);

  --ancho: 1180px;
  --aire-y: clamp(64px, 9vw, 120px);
  --aire-x: clamp(18px, 4vw, 36px);

  /* La rejilla de fondo. Siempre enmascarada con un radial o un lineal:
     a pantalla completa y sin máscara parece papel milimetrado. */
  --rejilla:
    repeating-linear-gradient(to right, rgba(207, 227, 234, .055) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(207, 227, 234, .055) 0 1px, transparent 1px 72px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* la cabecera es sticky: sin esto, al pulsar un ancla el titular de la
     sección queda tapado por la barra */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
a { color: var(--orange-ink); text-decoration: none; }
a:hover { color: var(--orange); }
input, select, textarea, button { font: inherit; }
::selection { background: var(--orange); color: #fff; }

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: pretty; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Foco visible y coherente en toda la web. Sin esto, quien navega con el
   tabulador no sabe dónde está. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 300; background: var(--orange); color: #fff; font-weight: 600;
  padding: 10px 18px; border-radius: 2px; transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ---------- 2. Piezas comunes ---------- */

.container {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--aire-x);
  padding-right: var(--aire-x);
}

.section { padding: var(--aire-y) 0; }
.section--paper { background: var(--paper); }
.section--white { background: var(--card); border-top: 1px solid rgba(12, 51, 69, .1); }
.section--dark { background: linear-gradient(180deg, var(--ink), var(--teal-780)); }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 16px;
}
.eyebrow--dark { color: var(--orange-soft); }

.section__title {
  font-weight: 600;
  font-size: clamp(29px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}
.section__title--dark { color: #fff; }
.section__title em { color: var(--orange); font-style: italic; }

.section__lead {
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--body);
  margin: 18px 0 0;
  max-width: 660px;
}
.section__head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 64px); }

/* Botones. Todos comparten el radio de 2 px: es el detalle que hace que
   la web parezca de ingeniería y no de plantilla. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: background .25s, color .25s, border-color .25s,
              transform .25s, box-shadow .25s;
}

.btn--naranja {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 14px 34px rgba(242, 112, 63, .32);
}
.btn--naranja:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(242, 112, 63, .45);
}

.btn--linea { border-color: var(--line-dark-2); color: #fff; font-weight: 500; }
.btn--linea:hover {
  border-color: var(--orange);
  background: rgba(242, 112, 63, .1);
  color: #fff;
  transform: translateY(-3px);
}

.btn--oscuro { background: var(--ink); color: #fff; }
.btn--oscuro:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(242, 112, 63, .35);
}

.btn--contorno {
  border-color: var(--text-ink);
  color: var(--text-ink);
  font-size: 15px;
  padding: 12px 20px;
}
.btn--contorno:hover { background: var(--text-ink); color: #fff; }

.btn--sm { font-size: 14.5px; padding: 11px 20px; box-shadow: 0 8px 22px rgba(242, 112, 63, .28); }
.btn--sm.btn--naranja:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242, 112, 63, .42); }
.btn--linea.btn--sm { box-shadow: none; }
.btn--bloque { width: 100%; }

/* ---------- 3. Apariciones al hacer scroll ---------- */

/* Todo lo que lleve .rv entra desde abajo cuando asoma en pantalla. Los
   retardos escalonan los elementos de una misma fila. */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.rv[data-delay="1"] { transition-delay: .08s; }
.rv[data-delay="2"] { transition-delay: .16s; }
.rv[data-delay="3"] { transition-delay: .24s; }
.rv[data-delay="4"] { transition-delay: .32s; }
.rv--in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 4. Intro de marca ---------- */

/* Dura tres segundos y medio y se salta con un clic en cualquier punto.
   No se muestra si el visitante ha pedido menos animación. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: radial-gradient(900px 640px at 50% 42%, #0E3B4E, #061F29 72%);
  cursor: pointer;
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1);
}
.intro--out { opacity: 0; pointer-events: none; }
.intro__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(207, 227, 234, .05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, rgba(207, 227, 234, .05) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent);
  mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent);
}
.intro__marca { position: relative; width: min(190px, 44vw); height: auto; overflow: visible; }
.intro__pie { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.intro__wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 26px);
  letter-spacing: .3em;
  padding-left: .3em;
  color: #fff;
  opacity: 0;
  animation: nvBrand .9s var(--ease) 2.05s forwards;
}
.intro__linea {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-4);
  opacity: 0;
  animation: nvRise .8s ease-out 2.35s forwards;
}
.intro__saltar {
  position: absolute;
  bottom: 34px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(207, 227, 234, .45);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  animation: nvRise .8s ease-out 1.4s forwards;
}
.intro__saltar:hover { color: var(--orange); }

/* El isotipo: seis nodos, seis aristas y seis radios que se dibujan por
   orden hasta encender el núcleo naranja. Va en SVG y no en imagen
   justamente para poder animarlo por partes. */
.nv-nodo { transform-box: fill-box; transform-origin: center; }
.nv-nucleo, .nv-onda { transform-box: fill-box; transform-origin: center; }

.intro .nv-nodo { opacity: 0; animation: nvPop .5s var(--ease-pop) forwards; }
.intro .nv-arista, .intro .nv-radio { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro .nv-arista { animation: nvDraw .5s cubic-bezier(.4, 0, .2, 1) forwards; }
.intro .nv-radio { animation: nvDraw .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.intro .nv-nucleo {
  opacity: 0;
  animation: nvCore .7s cubic-bezier(.2, 1.2, .3, 1) 1.8s forwards,
             nvCorePulse 2.8s ease-in-out 2.5s infinite;
}
.intro .nv-onda { opacity: 0; animation: nvBurst .9s ease-out 1.86s forwards; }

/* los seis nodos aparecen escalonados, y luego las aristas y los radios */
.intro .nv-nodo:nth-child(1) { animation-delay: .10s; }
.intro .nv-nodo:nth-child(2) { animation-delay: .17s; }
.intro .nv-nodo:nth-child(3) { animation-delay: .24s; }
.intro .nv-nodo:nth-child(4) { animation-delay: .31s; }
.intro .nv-nodo:nth-child(5) { animation-delay: .38s; }
.intro .nv-nodo:nth-child(6) { animation-delay: .45s; }
.intro .nv-arista:nth-child(1) { animation-delay: .62s; }
.intro .nv-arista:nth-child(2) { animation-delay: .68s; }
.intro .nv-arista:nth-child(3) { animation-delay: .74s; }
.intro .nv-arista:nth-child(4) { animation-delay: .80s; }
.intro .nv-arista:nth-child(5) { animation-delay: .86s; }
.intro .nv-arista:nth-child(6) { animation-delay: .92s; }
.intro .nv-radio:nth-child(1) { animation-delay: 1.24s; }
.intro .nv-radio:nth-child(2) { animation-delay: 1.30s; }
.intro .nv-radio:nth-child(3) { animation-delay: 1.36s; }
.intro .nv-radio:nth-child(4) { animation-delay: 1.42s; }
.intro .nv-radio:nth-child(5) { animation-delay: 1.48s; }
.intro .nv-radio:nth-child(6) { animation-delay: 1.54s; }

@keyframes nvPop { from { opacity: 0; transform: scale(.15); } to { opacity: 1; transform: scale(1); } }
@keyframes nvDraw { to { stroke-dashoffset: 0; } }
@keyframes nvCore { 0% { opacity: 0; transform: scale(0); } 62% { opacity: 1; transform: scale(1.32); } 100% { opacity: 1; transform: scale(1); } }
@keyframes nvCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes nvBurst { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes nvBrand { from { opacity: 0; letter-spacing: .62em; } to { opacity: 1; letter-spacing: .3em; } }
@keyframes nvRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nvFloat { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
@keyframes nvSpin { to { transform: rotate(360deg); } }
@keyframes nvSpinRev { to { transform: rotate(-360deg); } }
@keyframes nvGlow { 0%, 100% { opacity: .4; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.04); } }
@keyframes nvMarquee { to { transform: translateX(-50%); } }
@keyframes nvDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes nvFlow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

html.intro-activa, body.intro-activa { overflow: hidden; }

/* ---------- 5. Cabecera ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 36, 48, .88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-dark);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.header__progreso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: rgba(242, 112, 63, .12);
  overflow: hidden;
}
.header__progreso i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-600), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
}

.marca { display: flex; align-items: center; gap: 11px; color: #fff; flex: 0 0 auto; }
.marca:hover { color: #fff; }
.marca__icono { width: 32px; height: 32px; display: block; }
.marca__texto {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .28em;
  padding-left: .28em;
  color: #fff;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  white-space: nowrap;
}
.nav__link { color: var(--mist); font-size: 14.5px; font-weight: 500; transition: color .25s; }
.nav__link:hover, .nav__link--activo { color: var(--orange); }

/* Los enlaces solo caben con holgura por encima de 1080 px. Por debajo se
   quedan la marca y el botón naranja, que es la única acción que importa
   en una página de una sola columna. */
@media (max-width: 1080px) {
  .nav__link { display: none; }
}

/* ---------- 6. Portada ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 76% 18%, rgba(26, 88, 114, .6), transparent 66%),
    radial-gradient(700px 460px at 8% 92%, rgba(242, 112, 63, .14), transparent 70%),
    linear-gradient(170deg, var(--ink), var(--teal-780) 60%, var(--ink));
}
.hero__rejilla {
  position: absolute;
  inset: 0;
  background-image: var(--rejilla);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-top: clamp(56px, 9vw, 110px);
  padding-bottom: clamp(64px, 8vw, 96px);
}
.hero__texto { flex: 1 1 420px; min-width: 290px; }

.pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(242, 112, 63, .45);
  border-radius: 100px;
  padding: 7px 15px 7px 11px;
  margin-bottom: 26px;
}
.pildora__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: nvDot 1.8s ease-in-out infinite;
}
.pildora__texto {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-soft);
}
.pildora--clara {
  background: var(--card);
  border-color: rgba(242, 112, 63, .4);
  padding: 9px 16px;
  margin: 0;
}
.pildora--clara .pildora__texto {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--teal-700);
}

.hero__title {
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 24px;
}
.hero__title em { color: var(--orange); font-style: italic; }

.hero__lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--mist-2);
  max-width: 560px;
  margin: 0 0 34px;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero__nota { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted-3); }

/* La marca animada de la derecha: tres anillos que giran a distinta
   velocidad, un halo que respira y el isotipo flotando con impulsos
   naranjas viajando hacia el núcleo. */
.hero__marca { flex: 1 1 300px; min-width: 230px; display: flex; justify-content: center; }
.orbe {
  position: relative;
  width: min(400px, 72vw);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbe__halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 112, 63, .32), transparent 62%);
  filter: blur(6px);
  animation: nvGlow 6s ease-in-out infinite;
}
.orbe__anillo { position: absolute; border-radius: 50%; }
.orbe__anillo--1 { inset: 0; border: 1px dashed rgba(207, 227, 234, .22); animation: nvSpin 44s linear infinite; }
.orbe__anillo--2 { inset: 11%; border: 1px solid rgba(207, 227, 234, .14); animation: nvSpinRev 30s linear infinite; }
.orbe__anillo--3 { inset: 22%; border: 1px dashed rgba(242, 112, 63, .3); animation: nvSpin 20s linear infinite; }
.orbe__marca {
  position: relative;
  width: 58%;
  height: auto;
  overflow: visible;
  animation: nvFloat 7s ease-in-out infinite;
  filter: drop-shadow(0 20px 44px rgba(7, 36, 48, .55));
}
.orbe__marca .nv-nodo { animation: nvCorePulse 3.4s ease-in-out infinite; }
.orbe__marca .nv-nodo:nth-child(2) { animation-delay: .5s; }
.orbe__marca .nv-nodo:nth-child(3) { animation-delay: 1s; }
.orbe__marca .nv-nodo:nth-child(4) { animation-delay: 1.5s; }
.orbe__marca .nv-nodo:nth-child(5) { animation-delay: 2s; }
.orbe__marca .nv-nodo:nth-child(6) { animation-delay: 2.5s; }
/* los impulsos que viajan por los radios hasta el núcleo */
.orbe__marca .nv-pulso { stroke-dasharray: .34 .66; animation: nvFlow 2.6s linear infinite; }
.orbe__marca .nv-pulso:nth-child(2) { animation-delay: .43s; }
.orbe__marca .nv-pulso:nth-child(3) { animation-delay: .86s; }
.orbe__marca .nv-pulso:nth-child(4) { animation-delay: 1.3s; }
.orbe__marca .nv-pulso:nth-child(5) { animation-delay: 1.73s; }
.orbe__marca .nv-pulso:nth-child(6) { animation-delay: 2.16s; }
.orbe__marca .nv-nucleo { animation: nvCorePulse 2.6s ease-in-out infinite; }
.orbe__marca .nv-onda { animation: nvBurst 2.6s ease-out infinite; }

/* ---------- 7. Cinta de servicios ---------- */

.cinta {
  background: var(--teal-800);
  border-top: 1px solid rgba(207, 227, 234, .12);
  border-bottom: 1px solid rgba(207, 227, 234, .12);
  overflow: hidden;
  padding: 14px 0;
}
.cinta__pista { display: flex; width: max-content; animation: nvMarquee 38s linear infinite; }
.cinta__grupo {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.cinta__sep { color: var(--orange); }

/* ---------- 8. Qué se automatiza ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}
.tarjeta {
  background: var(--card);
  border: 1px solid var(--line-light);
  border-radius: 3px;
  padding: 30px 26px 32px;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.tarjeta:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 46px rgba(7, 36, 48, .14);
  border-color: rgba(242, 112, 63, .55);
}
.tarjeta__num { font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: .16em; margin-bottom: 22px; }
.tarjeta h3 { font-weight: 600; font-size: 20px; line-height: 1.22; color: var(--ink); margin: 0 0 12px; }
.tarjeta p { font-size: 15.5px; line-height: 1.6; color: var(--body-soft); }

.banda {
  margin-top: 18px;
  background: linear-gradient(120deg, var(--teal-800), var(--teal-700));
  border-radius: 3px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
}
.banda__etiqueta {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange-soft);
}
.banda p { flex: 1 1 380px; font-size: 17px; line-height: 1.6; color: var(--mist); }
.banda strong { color: #fff; font-weight: 600; }

/* ---------- 9. Bloque "cuéntelo" ---------- */

.contar {
  background: var(--card);
  border-top: 1px solid rgba(12, 51, 69, .1);
  border-bottom: 1px solid rgba(12, 51, 69, .1);
  padding: clamp(56px, 7vw, 90px) 0;
}
.contar__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.contar__titulo {
  font-weight: 600;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 18px;
}
.contar__titulo em { color: var(--orange); font-style: italic; }
.contar__lead { font-size: 17px; line-height: 1.62; color: var(--body); margin: 0 auto 28px; max-width: 620px; }
.contar__fine { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 20px; }

/* ---------- 10. Quién está detrás ---------- */

.quien { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 64px); align-items: center; }
/* El retrato va en círculo. La foto es un selfie cuadrado y dentro de un
   marco vertical quedaba descentrada y cortada por arriba; el círculo la
   recorta donde la foto ya estaba bien, alrededor de la cara. Es la única
   forma redonda grande de toda la web, así que además destaca sola. */
.quien__foto {
  flex: 0 0 auto;
  width: clamp(210px, 30vw, 330px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  position: relative;
}
/* Dos anillos concéntricos alrededor del retrato, como los del isotipo:
   el naranja de la marca y otro de puntos en azul. Sin ellos la foto
   flota sobre el papel y parece recortada con tijeras. */
.quien__marco {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(242, 112, 63, .55);
  border-radius: 50%;
}
.quien__marco::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px dashed rgba(26, 88, 114, .25);
  border-radius: 50%;
}
.quien__foto img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  background: var(--teal-800);
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
  box-shadow: 0 16px 40px rgba(7, 36, 48, .15);
}
.quien__texto { flex: 1 1 420px; min-width: 280px; }
.quien__texto h2 {
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 22px;
}
.quien__texto p { font-size: 17px; line-height: 1.66; color: var(--body); margin: 0 0 16px; }
.quien__cita {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--teal-700);
  border-left: 2px solid var(--orange);
  padding-left: 16px;
  margin: 24px 0 0;
}

/* ---------- 11. Caso JH ---------- */

.caso { position: relative; overflow: hidden; }
.caso__rejilla {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right, rgba(207, 227, 234, .05) 0 1px, transparent 1px 72px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.caso__inner { position: relative; }
.caso__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.caso__panel {
  border: 1px solid rgba(207, 227, 234, .18);
  border-radius: 3px;
  padding: 30px 26px;
  background: rgba(255, 255, 255, .02);
}
.caso__panel--ahora {
  border-color: rgba(242, 112, 63, .45);
  background: linear-gradient(150deg, rgba(242, 112, 63, .14), rgba(242, 112, 63, .03));
}
.caso__etiqueta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}
.caso__panel--ahora .caso__etiqueta { color: var(--orange-soft); }
.caso__lista { display: flex; flex-direction: column; gap: 12px; }
.caso__lista li {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mist-2);
  padding-left: 18px;
  border-left: 1px solid rgba(207, 227, 234, .25);
}
.caso__panel--ahora h3 { font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 10px; }
.caso__panel--ahora p { font-size: 16px; line-height: 1.55; color: var(--mist); margin: 0 0 20px; }
.caso__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
  border-bottom: 1px solid rgba(242, 112, 63, .5);
  padding-bottom: 3px;
  transition: gap .25s, color .25s;
}
.caso__enlace:hover { gap: 14px; color: var(--orange-hover); }

.cifras { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.cifra { border-top: 1px solid rgba(242, 112, 63, .6); padding-top: 18px; }
.cifra__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.cifra p { font-size: 14.5px; line-height: 1.5; color: var(--muted-2); margin-top: 10px; }
.caso__fine { margin-top: 28px; font-size: 15.5px; line-height: 1.6; color: var(--muted-2); max-width: 640px; }

/* ---------- 12. Cómo funciona ---------- */

.proceso__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
/* La línea naranja de cada paso se dibuja de izquierda a derecha, una
   detrás de otra: es lo que hace que se lean en orden. */
.paso__linea {
  height: 2px;
  background: var(--orange);
  margin-bottom: 20px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease);
}
.pasos--dibujados .paso__linea { transform: scaleX(1); }
.pasos--dibujados .paso:nth-child(1) .paso__linea { transition-delay: .15s; }
.pasos--dibujados .paso:nth-child(2) .paso__linea { transition-delay: .3s; }
.pasos--dibujados .paso:nth-child(3) .paso__linea { transition-delay: .45s; }
.pasos--dibujados .paso:nth-child(4) .paso__linea { transition-delay: .6s; }
.paso__num { font-family: var(--mono); font-size: 12px; color: var(--orange-ink); letter-spacing: .16em; margin-bottom: 14px; }
.paso h3 { font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--ink); margin: 0 0 10px; }
.paso p { font-size: 15.5px; line-height: 1.6; color: var(--body-soft); }

/* ---------- 13. Garantía ---------- */

.garantia { background: var(--paper); padding: 0 0 var(--aire-y); }
.garantia__panel {
  position: relative;
  background: linear-gradient(130deg, var(--teal-800), var(--teal-700) 70%, var(--teal-600));
  border-radius: 3px;
  padding: clamp(34px, 5vw, 60px);
  overflow: hidden;
}
.garantia__halo {
  position: absolute;
  top: -60px; right: -40px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 112, 63, .3), transparent 65%);
  animation: nvGlow 7s ease-in-out infinite;
}
.garantia__inner { position: relative; display: flex; flex-wrap: wrap; gap: 36px; align-items: center; }
.garantia__texto { flex: 1 1 460px; min-width: 280px; }
.garantia__promesa {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(25px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 16px;
}
.garantia__promesa em { color: var(--orange); font-style: italic; }
.garantia__razon { font-size: 16px; line-height: 1.62; color: var(--mist-2); }
.garantia__fine {
  flex: 0 1 300px;
  min-width: 240px;
  border-left: 1px solid rgba(207, 227, 234, .2);
  padding-left: 26px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--mist);
}

/* ---------- 14. Tarifas ---------- */

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(12, 51, 69, .14);
  border-radius: 3px;
  padding: 28px 24px;
  background: var(--card-2);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.plan:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 46px rgba(7, 36, 48, .13);
  border-color: rgba(242, 112, 63, .5);
}
.plan__nombre { font-weight: 600; font-size: 21px; color: var(--ink); margin: 0 0 6px; }
.plan__tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-bottom: 22px; }
.plan__lista { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 24px; }
.plan__lista li { font-size: 15px; line-height: 1.5; color: var(--body); display: flex; gap: 10px; }
.plan__lista li::before { content: "·"; color: var(--orange); font-weight: 700; }
/* Ocupa el hueco donde antes iba el precio. El hueco se mantiene a
   propósito: una tarjeta que termina de golpe en la lista parece que se
   ha quedado a medias. */
.plan__presupuesto { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: -.015em; }
.plan__terms { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 20px; }

/* El destacado va en oscuro: es la única tarjeta que rompe el ritmo, y por
   eso es la que se mira primero. */
.plan--destacado {
  position: relative;
  border-color: var(--orange);
  background: linear-gradient(165deg, var(--teal-800), var(--teal-700));
  box-shadow: 0 24px 50px rgba(7, 36, 48, .22);
}
.plan--destacado:hover { transform: translateY(-9px); box-shadow: 0 30px 60px rgba(7, 36, 48, .32); }
.plan__sello {
  position: absolute;
  top: -11px; left: 24px;
  background: var(--orange);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}
.plan--destacado .plan__nombre { color: #fff; }
.plan--destacado .plan__tag { color: var(--muted-2); }
.plan--destacado .plan__lista li { color: var(--mist); }
.plan--destacado .plan__presupuesto { color: #fff; }
.plan--destacado .plan__terms { color: var(--muted-2); }

/* El bloque que responde al "¿cuánto cuesta?" ahora que no hay tarifa
   publicada. Va en papel sobre el blanco de la sección para que se lea
   como una respuesta y no como una nota al pie. */
.presupuesto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  padding: 26px clamp(20px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid rgba(12, 51, 69, .12);
  border-left: 2px solid var(--orange);
  border-radius: 3px;
}
.presupuesto__texto { flex: 1 1 380px; }
.presupuesto__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
}
.presupuesto__texto p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0; }
.presupuesto .btn { flex: 0 0 auto; }

.compara { margin-top: 34px; border: 1px solid rgba(12, 51, 69, .14); border-radius: 3px; overflow: hidden; }
.compara__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-ink);
  list-style: none;
  background: var(--card-2);
}
.compara__summary::-webkit-details-marker { display: none; }
.compara__summary:hover { color: var(--orange-ink); }
.compara__summary svg { flex: 0 0 auto; transition: transform .3s var(--ease); }
.compara[open] .compara__summary svg { transform: rotate(180deg); }
/* La tabla no cabe en un móvil por debajo de 680 px, así que rueda en
   horizontal dentro de su caja en lugar de romper la página. */
.compara__scroll { overflow-x: auto; }
.compara table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; }
.compara thead tr { background: var(--teal-800); }
.compara thead th {
  padding: 14px 12px;
  font-family: var(--display);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.compara thead th:first-child {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  padding: 14px 18px;
}
.compara thead th.es-motor { color: var(--orange); }
.compara tbody tr { border-bottom: 1px solid rgba(12, 51, 69, .09); }
.compara tbody tr:nth-child(even) { background: var(--card-2); }
.compara tbody tr:last-child { border-bottom: 0; }
.compara th[scope="row"] { text-align: left; font-family: var(--sans); font-weight: 400; padding: 13px 18px; color: var(--body); }
.compara td { text-align: center; color: var(--body); padding: 13px 8px; }
.compara .si { color: var(--orange); }
.compara .no { color: #8FA6AF; }

.oferta {
  margin-top: 20px;
  background: var(--ink);
  border-radius: 3px;
  padding: clamp(26px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.oferta__texto { flex: 1 1 420px; }
.oferta__titular {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 14px 0 10px;
}
.oferta__detalle { font-size: 15.5px; line-height: 1.6; color: var(--mist-2); }
.oferta__detalle + .oferta__detalle { margin-top: 10px; }
.oferta__contador {
  flex: 0 0 auto;
  border: 1px solid rgba(242, 112, 63, .5);
  border-radius: 3px;
  padding: 20px 26px;
  text-align: center;
}
.oferta__num { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--orange); }
.oferta__pie {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 10px;
}

/* ---------- 15. Preguntas frecuentes ---------- */

.faq { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(12, 51, 69, .14); }
.faq__item { border-bottom: 1px solid rgba(12, 51, 69, .14); }
.faq__q {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink);
  transition: color .25s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--orange-ink); }
.faq__q i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: var(--orange);
  transition: transform .35s var(--ease);
}
.faq__q i::before { content: "+"; }
.faq__item[open] .faq__q i { transform: rotate(45deg); }
.faq__a p { font-size: 16.5px; line-height: 1.65; color: var(--body); margin: 0 0 24px; max-width: 720px; }

/* ---------- 16. Contacto ---------- */

.contacto { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--teal-780), var(--ink)); }
.contacto__rejilla {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(207, 227, 234, .05) 0 1px, transparent 1px 72px);
  -webkit-mask-image: radial-gradient(60% 60% at 30% 30%, #000, transparent);
  mask-image: radial-gradient(60% 60% at 30% 30%, #000, transparent);
}
.contacto__inner { position: relative; display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 56px); }
.contacto__texto { flex: 1 1 400px; min-width: 280px; }
.contacto__texto h2 { margin-bottom: 18px; }
.contacto__lead { font-size: 17px; line-height: 1.62; color: var(--mist-2); margin: 0 0 30px; max-width: 520px; }
.contacto__alt { font-size: 15.5px; color: var(--muted-2); margin-top: 24px; }
.contacto__alt a { color: var(--mist); border-bottom: 1px solid rgba(207, 227, 234, .35); }
.contacto__alt a:hover { color: var(--orange); }

.form-wrap {
  flex: 1 1 400px;
  min-width: 280px;
  background: var(--card);
  border-radius: 3px;
  padding: clamp(26px, 3vw, 38px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.form-wrap__titulo {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 22px;
}
.form { display: flex; flex-direction: column; gap: 16px; position: relative; }
.form__row { display: flex; gap: 14px; flex-wrap: wrap; }
/* min-width:0 no es decorativo: un <select> mide por defecto lo que ocupa
   su opción más larga ("Fontanería, electricidad o cerrajería"), y sin
   esto empuja a su columna fuera de la fila y el formulario se descuadra. */
.form__row .field { flex: 1 1 150px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-ink); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-light-2);
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 15.5px;
  color: var(--text-ink);
  background: #fff;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 112, 63, .16);
}
.field__hint, .field__error { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.field__error { display: none; color: #B0431F; }
/* El error solo se enseña cuando ya se ha intentado enviar: avisar
   mientras el visitante escribe es la forma más rápida de que abandone. */
.form--tried .field input:invalid ~ .field__error,
.form--tried .field select:invalid ~ .field__error { display: block; }
.form--tried .field input:invalid,
.form--tried .field select:invalid { border-color: #B0431F; }
.form__hp { position: absolute; left: -9999px; }
.form__legal { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ---------- 17. Pie ---------- */

.footer { background: var(--ink-deep); padding: clamp(48px, 6vw, 72px) 0 30px; }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__marca { flex: 1 1 320px; max-width: 460px; }
.footer__marca .marca { margin-bottom: 18px; }
.footer__marca p { font-size: 15px; line-height: 1.62; color: var(--muted-2); }
.footer__marca strong { color: var(--mist); font-weight: 600; }
.footer__contacto { flex: 0 1 260px; display: flex; flex-direction: column; gap: 10px; }
.footer__contacto .eyebrow { margin-bottom: 6px; }
.footer__contacto a { font-size: 15px; color: var(--mist); }
.footer__contacto a:hover { color: var(--orange); }
.footer__dominio { font-family: var(--mono); font-size: 14px; color: var(--orange); letter-spacing: .06em; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 22px; }
.footer__legal p, .footer__legal a { font-family: var(--mono); font-size: 12px; color: var(--muted-4); margin: 0; }
.footer__legal a:hover { color: var(--orange); }
.footer__legal div { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- 18. Asistente, botón flotante y cookies ---------- */

.asistente { position: fixed; inset: 0; z-index: 150; display: flex; align-items: flex-end; justify-content: center; }
.asistente[hidden] { display: none; }
.asistente__fondo {
  position: absolute; inset: 0;
  background: rgba(4, 25, 31, .62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.asistente__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 3px 3px 0 0;
  padding: 26px clamp(20px, 4vw, 32px) 30px;
  box-shadow: 0 -20px 60px rgba(4, 25, 31, .45);
}
@media (min-width: 700px) {
  .asistente { align-items: center; }
  .asistente__panel { border-radius: 3px; }
}
.asistente__cerrar {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px;
}
.asistente__cerrar:hover { color: var(--orange); }
.asistente__cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.asistente__avatar {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.asistente__nombre { font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.asistente__estado { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.asistente__burbuja {
  background: var(--paper);
  border-left: 2px solid var(--orange);
  padding: 14px 16px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 18px;
}
.asistente__opciones { display: flex; flex-direction: column; gap: 9px; }
.asistente__opcion {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  padding: 13px 15px;
  font-size: 15px;
  color: var(--text-ink);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.asistente__opcion:hover { border-color: var(--orange); background: rgba(242, 112, 63, .06); transform: translateX(3px); }
.asistente__campo {
  width: 100%;
  border: 1px solid var(--line-light-2);
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 15.5px;
  color: var(--text-ink);
  margin-bottom: 12px;
  outline: none;
  font-family: inherit;
  transition: border-color .25s, box-shadow .25s;
}
.asistente__campo:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 112, 63, .16); }
.asistente__botonera { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.asistente__botonera .btn { flex: 1 1 auto; }
.asistente__botonera .btn--linea { border-color: var(--line-light-2); color: var(--text-ink); }
.asistente__botonera .btn--linea:hover { color: var(--text-ink); }
.asistente__fine { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; }
body.menu-abierto { overflow: hidden; }

.whatsapp-fab {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(242, 112, 63, .42);
  transition: background .25s, transform .25s;
}
.whatsapp-fab:hover { background: var(--orange-hover); transform: translateY(-3px); }

.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 160;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 32px);
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.cookies--visible { transform: none; }
.cookies__text { flex: 1 1 420px; font-size: 14px; line-height: 1.55; color: var(--mist-2); }
.cookies__text a { color: var(--orange-soft); }
.cookies__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookies .btn--linea { color: var(--mist); }

/* ---------- 19. Páginas sueltas ---------- */

.header--solid { background: var(--ink); }

.legal { padding: clamp(48px, 7vw, 84px) 0 var(--aire-y); background: var(--paper); }
.legal__inner { max-width: 760px; margin: 0 auto; }
.legal h1 {
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 10px;
}
.legal h2 { font-weight: 600; font-size: 21px; color: var(--ink); margin: 38px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.legal ul { margin: 0 0 18px; padding-left: 18px; list-style: disc; }
.legal li { margin-bottom: 8px; }
.legal .updated { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 30px; }
.legal .back { display: inline-block; margin-top: 30px; font-weight: 600; }
.legal strong { color: var(--text-ink); }

.thanks { background: linear-gradient(180deg, var(--teal-780), var(--ink)); padding: clamp(70px, 12vw, 130px) 0; }
.thanks__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.thanks__mark { width: 74px; height: 74px; margin: 0 auto 26px; display: block; }
.thanks__title {
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 18px;
}
.thanks__title em { color: var(--orange); font-style: italic; }
.thanks__lead { font-size: 17px; line-height: 1.62; color: var(--mist-2); margin: 0 0 12px; }
.thanks__next { font-family: var(--mono); font-size: 13px; color: var(--muted-2); margin-bottom: 30px; }
/* en bloque a propósito: si es inline se pega al botón de WhatsApp y
   parece parte de él */
.thanks__back { display: block; margin-top: 28px; font-family: var(--mono); font-size: 13px; color: var(--muted-2); }
.thanks__back a { color: inherit; }
.thanks__back:hover { color: var(--orange); }