/* ═══════════════════════════════════════════════════════════════════════
   MECAGES — la web del producto

   CSS a mano y sin framework, a propósito. Una landing la abre alguien que
   acaba de ver un anuncio, desde el móvil, a veces con mala cobertura: si
   tarda dos segundos, se va. Sin build, sin descargas y sin nada que no se
   use.

   Los colores son los mismos que los del programa —mismo azul, mismos
   neutros— para que quien entra en la demo desde aquí no sienta que ha
   cambiado de sitio.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #0b1220;
  --tinta-suave: #475569;
  --tenue: #94a3b8;
  --papel: #ffffff;
  --papel-2: #f8fafc;
  --linea: #e2e8f0;

  --marca: #1d4ed8;
  --marca-oscura: #1e40af;
  --marca-clara: #dbeafe;

  --exito: #15803d;
  --alerta: #b45309;

  --radio: 14px;
  --sombra: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -12px rgb(15 23 42 / .12);
  --sombra-alta: 0 2px 4px rgb(15 23 42 / .04), 0 24px 48px -20px rgb(15 23 42 / .2);

  /* La del sistema: cero descargas y cero salto de texto al cargar. */
  --tipo: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; }

/* Quien ha pedido menos movimiento en su sistema, no lo tiene. A cierta gente
   las animaciones le producen mareo, y esto no es negociable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* nada empuja la página de lado, nunca */
}

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

a { color: inherit; }

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

/* ── Rejilla ──────────────────────────────────────────────────────────── */

.contenedor {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

section { padding: 5rem 0; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  section { padding: 3.5rem 0; }
  .contenedor { width: min(1120px, 100% - 2rem); }
}

/* ── Tipografía ───────────────────────────────────────────────────────── */

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 650; }

p { margin: 0; }

.entradilla {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--tinta-suave);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: .9rem;
}

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  /* 52 px: es un botón de "empieza aquí" y se pulsa con el pulgar. */
  min-height: 52px;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  /* Solo lo que no obliga al navegador a recalcular la página. */
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}

.boton-principal {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 1px 2px rgb(29 78 216 / .3), 0 12px 24px -12px rgb(29 78 216 / .5);
}
.boton-principal:hover {
  background: var(--marca-oscura);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgb(29 78 216 / .3), 0 18px 32px -14px rgb(29 78 216 / .55);
}
.boton-principal:active { transform: translateY(0); }

.boton-secundario {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--linea);
}
.boton-secundario:hover {
  border-color: var(--tenue);
  transform: translateY(-2px);
}

.boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cabecera.pegada {
  border-bottom-color: var(--linea);
  box-shadow: 0 1px 12px rgb(15 23 42 / .04);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  font-size: 1.06rem;
}

.marca-cuadro {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.marca-cuadro svg { width: 36px; height: 36px; }

/* La marca entera responde al raton: es tambien el enlace a la portada. */
.marca:hover .marca-cuadro svg { transform: rotate(-8deg); }
.marca-cuadro svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }

.cabecera nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* `:not(.boton)` y no `.cabecera nav a` a secas: sin eso, esta regla pisa por
   especificidad al color del boton —(0,1,1) contra (0,1,0)— y el texto de
   «Probarlo gratis» salia gris sobre el azul, ilegible salvo al pasar por
   encima. */
.cabecera nav a:not(.boton) {
  font-size: .94rem;
  font-weight: 520;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .15s ease;
}
.cabecera nav a:not(.boton):hover { color: var(--tinta); }

.cabecera .boton { min-height: 42px; padding: 0 1.1rem; font-size: .93rem; }

@media (max-width: 860px) {
  /* En el móvil se quedan la marca y el botón: los enlaces sobran porque la
     página entera se recorre con el dedo en dos segundos.

     `:not(.boton)` otra vez, y no por gusto: sin eso esta regla escondía
     también el botón de «Probarlo gratis», que es justo lo único que no puede
     faltar en un teléfono. */
  .cabecera nav a:not(.boton) { display: none; }
}

/* ── Portada ──────────────────────────────────────────────────────────── */

.portada {
  position: relative;
  padding: 4.5rem 0 5rem;
  overflow: hidden;
}

/* El fondo: una malla suave que se difumina hacia abajo. Da profundidad sin
   competir con el texto. */
.portada::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 620px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgb(29 78 216 / .1), transparent 70%),
    linear-gradient(transparent 0 39px, rgb(148 163 184 / .09) 39px 40px),
    linear-gradient(90deg, transparent 0 39px, rgb(148 163 184 / .09) 39px 40px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  mask-image: linear-gradient(#000, transparent 78%);
  pointer-events: none;
  z-index: -1;
}

.portada-texto { max-width: 44rem; }

.portada h1 .destacado {
  /* El degradado sobre el texto: es el único adorno de la portada y va en la
     idea principal, no en cualquier sitio. */
  background: linear-gradient(100deg, var(--marca) 10%, #4f46e5 60%, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portada .entradilla { margin-top: 1.3rem; }

/* Las tres promesas de la portada. Sueltas y con su marca verde: en un móvil
   un párrafo de cinco líneas se salta, y tres frases marcadas no. */
.promesas {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  max-width: 40rem;
}
.promesas li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.promesas svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--exito);
}
.promesas strong { color: var(--tinta); font-weight: 650; }

@media (max-width: 700px) {
  .promesas li { font-size: .97rem; }
}

.portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

.portada-nota {
  margin-top: 1.1rem;
  font-size: .88rem;
  color: var(--tenue);
}

/* ── Lo que aparece al llegar ─────────────────────────────────────────── */
/* Todo empieza VISIBLE y la animación solo lo desplaza. Si empezara en
   opacity:0, quien tenga JavaScript desactivado —o un error tonto— se
   quedaría con la página en blanco. */

.revela { animation: revelar .6s cubic-bezier(.2,.8,.2,1) both; }
.revela[data-espera="1"] { animation-delay: .08s; }
.revela[data-espera="2"] { animation-delay: .16s; }
.revela[data-espera="3"] { animation-delay: .24s; }

@keyframes revelar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */

.rejilla {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.6rem;
}
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease,
              border-color .2s ease;
}
.tarjeta:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: var(--sombra);
}

.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { color: var(--tinta-suave); font-size: .97rem; }

.tarjeta-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--marca-clara);
  color: var(--marca);
  margin-bottom: 1rem;
}
.tarjeta-icono svg { width: 21px; height: 21px; }

/* ── Franja oscura ────────────────────────────────────────────────────── */

.oscuro {
  background: var(--tinta);
  color: #e2e8f0;
}
.oscuro h2 { color: #fff; }
.oscuro .entradilla { color: #94a3b8; }
.oscuro .eyebrow { color: #7dd3fc; }

/* Un enlace dentro de un párrafo del bloque oscuro. Subrayado y no solo de
   otro color: un color distinto sobre fondo oscuro lo pierde quien no
   distingue bien los tonos. */
.enlace-claro {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(125 211 252 / .6);
  transition: text-decoration-color .15s ease;
}
.enlace-claro:hover { text-decoration-color: #7dd3fc; }

/* ── Antes y después ──────────────────────────────────────────────────── */

.comparativa {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.columna-comparativa {
  border-radius: var(--radio);
  padding: 1.6rem;
  border: 1px solid;
}
.columna-antes {
  background: rgb(148 163 184 / .07);
  border-color: rgb(148 163 184 / .22);
}
.columna-ahora {
  background: rgb(29 78 216 / .06);
  border-color: rgb(29 78 216 / .22);
}
.oscuro .columna-antes {
  background: rgb(255 255 255 / .04);
  border-color: rgb(255 255 255 / .1);
}
.oscuro .columna-ahora {
  background: rgb(125 211 252 / .08);
  border-color: rgb(125 211 252 / .25);
}

.columna-comparativa h3 { margin-bottom: 1.1rem; }

.lista-comparativa { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.lista-comparativa li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .97rem;
  line-height: 1.5;
}
.lista-comparativa svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.columna-antes svg { color: var(--tenue); }
.columna-ahora svg { color: var(--marca); }
.oscuro .columna-ahora svg { color: #7dd3fc; }

/* ── La ilustración del programa ──────────────────────────────────────── */
/* Un dibujo de la pantalla hecho con CSS: no es una captura, pero se entiende
   de qué va y no son 300 kB de imagen. */

.pantalla {
  margin-top: 3rem;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: var(--papel);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.oscuro .pantalla { border-color: rgb(255 255 255 / .1); }

.pantalla-barra {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.pantalla-punto {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--linea);
}
.pantalla-url {
  margin-left: .6rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--tenue);
}

.pantalla-cuerpo { display: flex; min-height: 310px; }

.pantalla-lateral {
  width: 172px;
  flex-shrink: 0;
  background: var(--papel-2);
  border-right: 1px solid var(--linea);
  padding: .8rem .6rem;
}
.pantalla-seccion {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .55rem;
  border-radius: 7px;
  font-size: .78rem;
  color: var(--tinta-suave);
}
.pantalla-seccion.activa {
  background: var(--marca);
  color: #fff;
  font-weight: 600;
}
.pantalla-seccion span.punto {
  width: 14px; height: 14px; border-radius: 4px;
  background: currentColor; opacity: .45;
  flex-shrink: 0;
}

.pantalla-contenido { flex: 1; padding: 1.1rem; min-width: 0; }

.pantalla-fichas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.pantalla-ficha {
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: .6rem .7rem;
}
.pantalla-ficha .rotulo { font-size: .62rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.pantalla-ficha .cifra { font-size: 1.02rem; font-weight: 700; margin-top: .15rem; }

.pantalla-tabla { border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; }
.pantalla-fila {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr;
  gap: .6rem;
  padding: .5rem .7rem;
  font-size: .76rem;
  border-bottom: 1px solid var(--linea);
}
.pantalla-fila:last-child { border-bottom: 0; }
.pantalla-fila.cabecera-tabla {
  background: var(--papel-2);
  color: var(--tenue);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pantalla-fila .pildora {
  justify-self: start;
  font-size: .66rem;
  padding: .1rem .5rem;
  border-radius: 99px;
  background: rgb(21 128 61 / .1);
  color: var(--exito);
  font-weight: 600;
}
.pantalla-fila .pildora.espera {
  background: rgb(180 83 9 / .1);
  color: var(--alerta);
}

@media (max-width: 640px) {
  .pantalla-lateral { display: none; }
  .pantalla-fichas { grid-template-columns: repeat(2, 1fr); }
  .pantalla-cuerpo { min-height: 240px; }
}

/* ── La demostración animada ──────────────────────────────────────────── */
/* Hace de vídeo, pero sin serlo: no hay que darle al play, no se descargan
   varios megas y funciona igual en un móvil con datos justos. Se puede parar,
   y quien haya pedido menos movimiento en su sistema la ve quieta. */

.demo-flujo { margin-top: 2.8rem; }

.demo-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

.demo-paso {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 99px;
  padding: .45rem .95rem;
  font: inherit;
  font-size: .86rem;
  font-weight: 550;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: all .2s ease;
}
.demo-paso:hover { border-color: var(--tenue); color: var(--tinta); }

.demo-paso[aria-selected="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.demo-paso .num {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--tinta-suave);
  font-size: .72rem;
  font-weight: 700;
}
.demo-paso[aria-selected="true"] .num {
  background: rgb(255 255 255 / .22);
  color: #fff;
}

/* La barra que avanza sola: es lo que dice que esto se mueve sin tocarlo. */
.demo-barra {
  height: 3px;
  background: var(--linea);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.demo-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--marca);
  border-radius: 99px;
}
.demo-barra.corriendo i { animation: avanzar var(--duracion, 5s) linear forwards; }
@keyframes avanzar { to { width: 100%; } }

.demo-escena {
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: var(--sombra);
  padding: 1.6rem;
  min-height: 260px;
}

.demo-vista { display: none; }
.demo-vista.activa { display: block; animation: entrarVista .4s cubic-bezier(.2,.8,.2,1); }

@keyframes entrarVista {
  from { opacity: 0; transform: translateY(10px); }
}

.demo-titulo {
  font-size: 1.05rem;
  font-weight: 650;
  margin-bottom: .35rem;
}
.demo-texto {
  font-size: .94rem;
  color: var(--tinta-suave);
  margin-bottom: 1.2rem;
  max-width: 54ch;
}

/* Las filas que van apareciendo dentro de cada escena. */
.demo-linea {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: .5rem;
  background: var(--papel);
}
.demo-vista.activa .demo-linea { animation: entrarLinea .45s cubic-bezier(.2,.8,.2,1) both; }
.demo-vista.activa .demo-linea:nth-child(2) { animation-delay: .1s; }
.demo-vista.activa .demo-linea:nth-child(3) { animation-delay: .25s; }
.demo-vista.activa .demo-linea:nth-child(4) { animation-delay: .4s; }
.demo-vista.activa .demo-linea:nth-child(5) { animation-delay: .55s; }

@keyframes entrarLinea {
  from { opacity: 0; transform: translateX(-10px); }
}

.demo-linea .marca-check {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgb(21 128 61 / .12);
  color: var(--exito);
  flex-shrink: 0;
}
.demo-linea .marca-check svg { width: 13px; height: 13px; }
.demo-linea .crece { flex: 1; min-width: 0; }
.demo-linea .cifra-dcha {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
.demo-linea small { display: block; color: var(--tenue); font-size: .78rem; }

.demo-flecha {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--marca);
  font-size: .84rem;
  font-weight: 600;
  margin: .9rem 0 .3rem;
}
.demo-flecha svg { width: 16px; height: 16px; }

.demo-pie {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.demo-parar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 8px;
  padding: .4rem .75rem;
  font: inherit;
  font-size: .82rem;
  color: var(--tinta-suave);
  cursor: pointer;
  min-height: 36px;
}
.demo-parar:hover { border-color: var(--tenue); color: var(--tinta); }
.demo-parar svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  .demo-escena { padding: 1.2rem; min-height: 300px; }
  .demo-paso { font-size: .8rem; padding: .4rem .75rem; }
  .demo-paso .texto { display: none; }   /* en el móvil, solo el número */
  .demo-paso .num { width: 22px; height: 22px; }
}

/* ── Verifactu ────────────────────────────────────────────────────────── */

.aviso-legal {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  border-radius: var(--radio);
  border: 1px solid rgb(180 83 9 / .25);
  background: rgb(180 83 9 / .05);
  padding: 1.4rem 1.5rem;
  margin-top: 2rem;
}
.aviso-legal svg { width: 24px; height: 24px; color: var(--alerta); flex-shrink: 0; }
.aviso-legal p { font-size: .97rem; color: var(--tinta-suave); }
.aviso-legal strong { color: var(--tinta); }

/* ── Formulario ───────────────────────────────────────────────────────── */

.bloque-formulario {
  border-radius: 18px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
  padding: 2rem;
}

@media (min-width: 900px) {
  .formulario-columnas {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 3.5rem;
    align-items: center;
  }
}

.campo { margin-bottom: 1.05rem; }

.campo label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.campo label .opcional { font-weight: 400; color: var(--tenue); }

.campo input {
  width: 100%;
  /* 16 px EXACTOS: con menos, Safari en iPhone amplía la página al enfocar y
     no vuelve. Es el fallo de móvil más común que hay. */
  font-size: 16px;
  font-family: inherit;
  min-height: 50px;
  padding: 0 .95rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: var(--tenue); }
.campo input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgb(29 78 216 / .14);
}
.campo input[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgb(220 38 38 / .12);
}

.campo .error {
  display: none;
  font-size: .82rem;
  color: #dc2626;
  margin-top: .35rem;
}
.campo input[aria-invalid="true"] ~ .error { display: block; }

/* El campo trampa. Se esconde del ojo Y del lector de pantalla, pero sigue en
   el formulario para que el bot lo encuentre y se delate. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consentimiento {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 1.3rem 0;
  font-size: .88rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}
.consentimiento input {
  /* 20 px y no 14: una casilla pequeña en el móvil se falla una de cada tres. */
  width: 20px; height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--marca);
}
.consentimiento a { color: var(--marca); text-decoration: underline; }

.respuesta {
  display: none;
  margin-top: 1.1rem;
  padding: .95rem 1.1rem;
  border-radius: 10px;
  font-size: .93rem;
  line-height: 1.5;
}
.respuesta.bien {
  display: block;
  background: rgb(21 128 61 / .08);
  border: 1px solid rgb(21 128 61 / .25);
  color: var(--exito);
}
.respuesta.mal {
  display: block;
  background: rgb(220 38 38 / .07);
  border: 1px solid rgb(220 38 38 / .25);
  color: #b91c1c;
}

/* El botón mientras se manda: un giro pequeño y el texto cambia. */
.girando {
  width: 17px; height: 17px;
  border: 2px solid rgb(255 255 255 / .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--linea);
  padding: 2.5rem 0;
  font-size: .88rem;
  color: var(--tinta-suave);
}
.pie-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
}
.pie a { color: var(--tinta-suave); text-decoration: none; }
.pie a:hover { color: var(--tinta); text-decoration: underline; }
.pie .derecha { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }

@media (max-width: 620px) {
  .pie .derecha { margin-left: 0; }
}