/* ══════════════════════════════════════════════════════════════════════════
   Zumbeo — landing pública (zumbeo.com)

   MOBILE FIRST. Todas las @media son `min-width`: lo que está fuera de una
   media query es lo que ve un celular, y las pantallas grandes añaden. Casi
   todo el tráfico de un municipio entra desde un celular de gama baja, así
   que el caso base tiene que ser el barato, no el que se recorta después.

   Paleta de marca compartida con las apps y el panel: naranja #F2641E como
   acento y navy #17293D como tinta. El neutro tira a azul, no a crema.

   Un solo tema a propósito. Una landing es una superficie de marca, y dejar
   que el sistema operativo del visitante decida los colores del logo es
   regalar la decisión. Todo se pinta explícito, nada hereda del navegador.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ground: #ffffff;
  --surface: #f1f5f9;
  --ink: #17293d;
  --ink-deep: #0e1d2b;
  --ink-soft: #33475c;
  --muted: #5a6b7d;
  --line: #dfe7ee;

  --primary: #f2641e;
  /* Naranja para TEXTO sobre blanco. El #F2641E de marca da 3,1:1 contra el
     blanco y no pasa AA en cuerpo de texto; este da 5,1:1. El de marca se
     reserva para rellenos y bordes, donde el contraste de texto no aplica. */
  --primary-ink: #b8460b;
  --primary-wash: #fef0e8;

  --ancho: 1080px;
  --radio: 14px;
  --paso: clamp(1.25rem, 4vw, 1.5rem);

  --sans: 'Segoe UI Variable Display', 'Segoe UI', -apple-system,
    BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sin esto, saltar a #como-funciona deja el título pegado al borde. */
  scroll-padding-top: 1.5rem;
}

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

body {
  margin: 0;
  /* Nada debe desbordar a lo ancho en un celular. */
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--primary-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  /* Quita el retardo de 300 ms del doble toque en móvil. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(242, 100, 30, 0.18);
}

a:hover {
  color: var(--primary);
}

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

h1,
h2,
h3 {
  text-wrap: balance;
}

/* El encabezado es pegajoso, así que saltar a un ancla dejaría el destino
   debajo de él. Va sobre cualquier elemento con id porque varias anclas cuelgan
   de la <section>, no del título. */
[id] {
  scroll-margin-top: 5rem;
}

p {
  text-wrap: pretty;
}

/* El ancla de teclado: primer tabulador de la página. */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.salto:focus-visible {
  left: 0;
  color: #fff;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  /* Los insets protegen el contenido del notch en horizontal. */
  padding-inline: max(1.25rem, env(safe-area-inset-left));
}

@media (min-width: 48rem) {
  .contenedor {
    padding-inline: 1.5rem;
  }
}

/* ── Wordmark ─────────────────────────────────────────────────────────── */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.marca:hover {
  color: var(--ink);
}

.marca__glifo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--primary-wash);
}

.marca__acento {
  color: var(--primary);
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.cabecera__nav a {
  color: var(--muted);
  text-decoration: none;
}

.cabecera__nav a:hover {
  color: var(--ink);
}

/* En móvil sobran los enlaces de sección —la página se lee de arriba abajo—
   pero no el de descargar, que es la acción. Ocultar la navegación entera
   dejaba el encabezado sin nada que tocar. */
.cabecera__nav a:not(.cabecera__cta) {
  display: none;
}

.cabecera__cta {
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-weight: 700;
}

.cabecera__cta:hover {
  background: var(--primary);
  color: #fff;
}

@media (min-width: 48rem) {
  .cabecera__nav a:not(.cabecera__cta) {
    display: inline;
  }
}

/* ── Etiqueta beta ────────────────────────────────────────────────────── */

.beta {
  display: inline-block;
  padding: 0.1875rem 0.5625rem;
  border-radius: 999px;
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.beta--oscuro {
  background: rgba(242, 100, 30, 0.2);
  color: #ffb489;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding: 2.5rem 0 3rem;
}

.hero__rejilla {
  display: grid;
  gap: 2rem;
}

.hero__etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.hero__lugar {
  font-size: 0.875rem;
  color: var(--muted);
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 15ch;
}

.hero__entrada {
  margin: 0 0 1.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ── Firma: la mascota parada sobre la vía ────────────────────────────────
   El único gesto decorativo de la página, y solo aquí. La línea con el trazo
   discontinuo naranja es una calle: la mascota no flota sobre el blanco, está
   parada en el pueblo. La sombra elíptica es lo que la apoya. */

.hero__figura {
  order: -1;
  display: grid;
  justify-items: center;
  margin: 0;
}

.hero__mascota {
  width: clamp(150px, 42vw, 210px);
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(23, 41, 61, 0.14));
}

.hero__via {
  position: relative;
  width: min(100%, 320px);
  height: 3px;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line) 14%,
    var(--line) 86%,
    transparent
  );
}

.hero__via::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  translate: -50% 0;
  width: 46%;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    var(--primary) 0 14px,
    transparent 14px 26px
  );
}

@media (prefers-reduced-motion: no-preference) {
  .hero__mascota {
    animation: saludo 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }
  .hero__via {
    animation: saludo 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) 0.12s both;
  }
}

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

@media (min-width: 60rem) {
  .hero {
    padding: 4rem 0 4.5rem;
  }
  .hero__rejilla {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
  .hero__figura {
    order: 0;
  }
  .hero__mascota {
    width: clamp(210px, 22vw, 280px);
  }
  .hero__via {
    width: 300px;
  }
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px de alto: el objetivo táctil mínimo cómodo con guantes de moto. */
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.boton--primario {
  background: var(--primary);
  color: #fff;
}

.boton--primario:hover {
  background: var(--primary-ink);
  color: #fff;
}

.boton--linea {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.boton--linea:hover {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

.boton:disabled,
.boton[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Secciones ────────────────────────────────────────────────────────── */

.seccion {
  padding: 3rem 0;
}

@media (min-width: 48rem) {
  .seccion {
    padding: 4.5rem 0;
  }
}

.seccion--gris {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.seccion--oscura {
  background: var(--ink-deep);
  color: #fff;
}

.seccion__titulo {
  margin: 0 0 0.625rem;
  scroll-margin-top: 5rem;
  font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.seccion__bajada {
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 56ch;
}

@media (min-width: 48rem) {
  .seccion__bajada {
    margin-bottom: 2.75rem;
    font-size: 1.125rem;
  }
}

.seccion--oscura .seccion__bajada {
  color: #a9bacb;
}

/* ── Pasos numerados ──────────────────────────────────────────────────
   La numeración aquí sí informa: el pedido pasa por estos tres momentos en
   este orden. No es decoración. */

.pasos {
  display: grid;
  gap: 1.75rem;
  counter-reset: paso;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  column-gap: 1rem;
  align-items: start;
  /* Sin esto los tres pasos se desalinean en escritorio: el <li> se estira a la
     altura del más alto, `align-content` reparte ese sobrante entre las filas
     automáticas y cada título baja tantos píxeles como corto sea su párrafo. */
  align-content: start;
}

.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--primary-wash);
  color: var(--primary-ink);
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.pasos h3 {
  grid-column: 2;
  margin: 0.3125rem 0 0.375rem;
  font-size: 1.1875rem;
  font-weight: 700;
}

.pasos p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

@media (min-width: 52rem) {
  .pasos {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
  .pasos li {
    grid-template-columns: 1fr;
  }
  .pasos li::before {
    margin-bottom: 0.5rem;
  }
  .pasos h3,
  .pasos p {
    grid-column: 1;
  }
}

/* ── Doble columna cliente / conductor ────────────────────────────────── */

.publicos {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 52rem) {
  .publicos {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.tarjeta {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.5rem;
}

@media (min-width: 48rem) {
  .tarjeta {
    padding: 2rem;
  }
}

.tarjeta h3 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tarjeta__para {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

/* ── Listas con viñeta de marca ───────────────────────────────────────────
   Sangría + viñeta absoluta, NO grid. Con `display: grid` en el <li> cada
   elemento en línea de dentro (un <strong>, un <a>) se convierte en su propio
   ítem de la rejilla: el texto se parte en columnas y sale una palabra por
   renglón. Así el <li> mantiene su flujo en línea normal y admite cualquier
   marcado dentro. */

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.lista li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-soft);
  font-size: 1rem;
  overflow-wrap: break-word;
}

.lista li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.lista strong {
  color: var(--ink);
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────
   <details> nativo: se abre sin JavaScript, es accesible por teclado de
   fábrica y el buscador del navegador encuentra el texto cerrado. */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 62rem;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ground);
}

.faq details[open] {
  border-color: #c9d6e2;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.875rem 1.125rem;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.18s ease, translate 0.18s ease;
}

.faq details[open] summary::after {
  rotate: -135deg;
  translate: 0 3px;
}

.faq summary:hover {
  color: var(--primary-ink);
}

.faq .faq__cuerpo {
  padding: 0 1.125rem 1.125rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ── Descarga ─────────────────────────────────────────────────────────── */

.descargas {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .descargas {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.descarga {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radio);
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
}

.descarga h3 {
  margin: 0 0 0.375rem;
  font-size: 1.1875rem;
  font-weight: 700;
}

.descarga p {
  margin: 0 0 1.125rem;
  color: #a9bacb;
  font-size: 0.9375rem;
}

.descarga__estado {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: #c6d3df;
  font-size: 0.875rem;
  font-weight: 600;
}

.seccion--oscura a {
  color: #ffb489;
}

.seccion--oscura a:hover {
  color: #fff;
}

/* ── Aviso ────────────────────────────────────────────────────────────── */

.aviso {
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  background: var(--surface);
  padding: 1.125rem 1.25rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

.aviso > :first-child {
  margin-top: 0;
}

.aviso > :last-child {
  margin-bottom: 0;
}

.aviso strong {
  color: var(--ink);
}

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

.pie {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 calc(3rem + env(safe-area-inset-bottom));
  font-size: 0.9375rem;
  color: var(--muted);
}

.pie__fila {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}

@media (min-width: 48rem) {
  .pie__fila {
    flex-direction: row;
    align-items: flex-start;
  }
}

.pie__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

@media (min-width: 48rem) {
  .pie__enlaces {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.375rem;
  }
}

.pie__enlaces a {
  color: var(--muted);
  text-decoration: none;
}

.pie__enlaces a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.pie__nota {
  margin: 1.75rem 0 0;
  font-size: 0.84375rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ══════════════════════════════════════════════════════════════════════
   Documento legal (privacidad, términos, eliminar cuenta)
   ══════════════════════════════════════════════════════════════════════ */

.doc {
  max-width: 46rem;
  margin-inline: auto;
  padding: 2.5rem max(1.25rem, env(safe-area-inset-left)) 4rem;
}

@media (min-width: 48rem) {
  .doc {
    padding: 4rem 1.5rem 5.5rem;
  }
}

.doc__titulo {
  margin: 0 0 0.5rem;
  font-size: clamp(1.875rem, 1.5rem + 2vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.doc__subtitulo {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1rem;
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.375rem;
  scroll-margin-top: 5rem;
  border-top: 1px solid var(--line);
  font-size: 1.4375rem;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.doc h3 {
  margin: 1.75rem 0 0.5rem;
  scroll-margin-top: 5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.doc p {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.375rem;
}

.doc li {
  margin-bottom: 0.5625rem;
}

/* ── Índice del documento ─────────────────────────────────────────────────
   En un texto legal largo, saber qué hay dentro antes de bajar es la
   diferencia entre leerlo y no leerlo.

   Va DESPUÉS de `.doc h2 / ol / li` a propósito: `.doc__indice h2` y `.doc h2`
   tienen la misma especificidad, así que aquí gana el que se declare último. Si
   este bloque sube, el título del índice se pinta como un encabezado de sección
   con su línea y su tamaño grande. */

.doc__indice {
  margin: 0 0 2.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.doc__indice h2 {
  all: unset;
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc__indice ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  columns: 1;
}

@media (min-width: 40rem) {
  .doc__indice ol {
    columns: 2;
    column-gap: 2rem;
  }
}

.doc__indice li {
  margin-bottom: 0.375rem;
  break-inside: avoid;
}

.doc__pendiente {
  margin-bottom: 2.25rem;
  border: 1px solid #e8c98a;
  border-radius: 10px;
  background: #fdf6e6;
  padding: 0.9375rem 1.125rem;
  font-size: 0.9375rem;
  color: var(--ink);
}

.doc__cierre {
  margin-top: 2.5rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════
   Página 404
   ══════════════════════════════════════════════════════════════════════ */

.perdido {
  max-width: 40rem;
  margin-inline: auto;
  padding: 2.5rem max(1.25rem, env(safe-area-inset-left)) 4rem;
  text-align: center;
}

.perdido__mascota {
  width: clamp(130px, 34vw, 180px);
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 12px 18px rgba(23, 41, 61, 0.14));
}

.perdido__nota {
  margin: 1rem auto 0;
  max-width: 44ch;
  color: var(--muted);
}

.perdido__enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (min-width: 34rem) {
  .perdido__enlaces {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Restablecer contraseña
   ══════════════════════════════════════════════════════════════════════ */

.pantalla-centro {
  /* dvh y no vh: en móvil, `100vh` cuenta la barra del navegador y el panel
     queda cortado por abajo hasta que el usuario hace scroll. */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  background: var(--ink-deep);
}

.panel {
  width: 100%;
  max-width: 25rem;
  background: var(--ground);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

@media (min-width: 30rem) {
  .panel {
    padding: 2.25rem 2rem;
  }
}

.panel__marca {
  display: flex;
  justify-content: center;
  margin-bottom: 1.625rem;
}

.panel h1 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
}

.panel__nota {
  margin: 0 0 1.625rem;
  font-size: 0.9375rem;
  color: var(--muted);
  text-align: center;
}

.campo {
  display: block;
  margin-bottom: 1.125rem;
}

.campo__etiqueta {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.90625rem;
  font-weight: 600;
}

.campo input {
  width: 100%;
  min-height: 48px;
  padding: 0.6875rem 0.8125rem;
  border: 1px solid #cfd8e2;
  border-radius: 10px;
  font-family: inherit;
  /* 16px exactos: por debajo de eso Safari en iOS hace zoom al enfocar. */
  font-size: 1rem;
  color: var(--ink);
  background: var(--ground);
}

.campo input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(242, 100, 30, 0.22);
}

.campo__ayuda {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

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

.error {
  margin: 0 0 1rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 10px;
  background: #fdeceb;
  color: #a5271c;
  font-size: 0.90625rem;
}

.oculto {
  display: none !important;
}