/* ═══════════════════════════════════════════════════════════════════════════════
   Software Total — web pública

   CSS a mano, sin compilar y sin dependencias. Cinco secciones no justifican un
   segundo bundle, y así el HTML que ve un buscador es el que está escrito (ADR-0023).

   La paleta es la MISMA que la de la aplicación (`frontend/src/styles/tokens.css`),
   copiada a propósito: este archivo no pasa por Tailwind ni por ningún compilador,
   así que no puede resolver un `@import` del otro proyecto. Si los tokens cambian
   allí, hay que reflejarlo aquí.

   El REGISTRO es opuesto al de la aplicación: allí «instrumento de precisión»,
   densidad máxima y color sólo cuando codifica; aquí escaparate, aire y contraste.
   Ver .claude/skills/software-total-web-publica/SKILL.md
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --st-font:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  --st-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  --st-bg: oklch(0.985 0.002 250);
  --st-surface: oklch(1 0 0);
  /* Más separado del fondo (era 0.962): con la diferencia anterior, la alternancia
     entre secciones no se percibía y la página se leía como un bloque continuo. */
  --st-surface-alt: oklch(0.945 0.005 250);
  --st-fg: oklch(0.24 0.012 255);
  --st-fg-muted: oklch(0.48 0.014 255);
  /* Bajado de 0.62 a 0.55: a 0.62 daba 3.47:1 y no llegaba al mínimo AA (4.5:1)
     en los pies, las etiquetas de contacto y los rótulos de las fichas. */
  --st-fg-subtle: oklch(0.55 0.012 255);
  --st-border: oklch(0.905 0.006 255);
  /* 0.49 y no 0.52: como texto sobre el fondo alterno se quedaba en 4.46:1, a cuatro
     centésimas del mínimo. Oscurecerlo también mejora el blanco sobre los botones. */
  --st-primary: oklch(0.49 0.1 213);
  --st-primary-hover: oklch(0.46 0.1 213);
  --st-primary-fg: oklch(0.99 0 0);
  --st-primary-subtle: oklch(0.955 0.021 213);
  --st-danger: oklch(0.52 0.17 25);
  --st-success: oklch(0.5 0.12 155);
  --st-whatsapp: oklch(0.6 0.15 152);
  --st-whatsapp-hover: oklch(0.54 0.15 152);
  /* Relleno: el verde de marca con texto blanco se queda en 3.58:1. Se oscurece
     para el botón sólido, que sí lleva texto encima. */
  --st-whatsapp-solido: oklch(0.5 0.13 152);
  --st-whatsapp-solido-hover: oklch(0.44 0.12 152);
  --st-whatsapp-solido-fg: oklch(0.99 0 0);

  /* La terminal es oscura en los dos temas: un editor claro no lee como código. */
  --st-code-bg: oklch(0.2 0.012 255);
  --st-code-fg: oklch(0.88 0.008 255);
  --st-code-dim: oklch(0.6 0.012 255);
  --st-code-ok: oklch(0.76 0.14 152);
  --st-code-fn: oklch(0.78 0.1 240);
  --st-code-str: oklch(0.82 0.11 90);

  --st-radius: 0.875rem;
  --st-radius-sm: 0.5rem;
  --st-ancho: 72rem;
  --st-ancho-estrecho: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --st-bg: oklch(0.175 0.009 255);
    --st-surface: oklch(0.213 0.011 255);
    /* Más separado del fondo (era 0.15, con el fondo en 0.175): la diferencia
       no se percibía y en oscuro la página se leía como un bloque continuo. */
    --st-surface-alt: oklch(0.128 0.008 255);
    --st-fg: oklch(0.945 0.004 255);
    --st-fg-muted: oklch(0.735 0.011 255);
    /* Subido de 0.6 a 0.66: se quedaba en 4.48:1, justo por debajo del mínimo. */
    --st-fg-subtle: oklch(0.66 0.013 255);
    --st-border: oklch(0.305 0.012 255);
    --st-primary: oklch(0.72 0.105 213);
    --st-primary-hover: oklch(0.78 0.1 213);
    --st-primary-fg: oklch(0.17 0.02 255);
    --st-primary-subtle: oklch(0.28 0.038 213);
    --st-danger: oklch(0.72 0.16 25);
    --st-success: oklch(0.72 0.13 155);
    --st-whatsapp: oklch(0.68 0.15 152);
    --st-whatsapp-hover: oklch(0.74 0.14 152);
    /* En oscuro se invierte: fondo claro y texto oscuro. Un verde lo bastante
       oscuro como para llevar texto blanco quedaría apagado sobre el fondo. */
    --st-whatsapp-solido: oklch(0.76 0.14 152);
    --st-whatsapp-solido-hover: oklch(0.82 0.13 152);
    --st-whatsapp-solido-fg: oklch(0.17 0.02 152);
    --st-code-bg: oklch(0.14 0.01 255);
  }
}

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

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: sin esto, una ancla deja el título tapado. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--st-bg);
  color: var(--st-fg);
  font-family: var(--st-font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--st-primary);
  text-underline-offset: 0.2em;
}

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

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

h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.4rem);
  font-weight: 660;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 620;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.contenedor {
  width: 100%;
  max-width: var(--st-ancho);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.contenedor--estrecho {
  max-width: var(--st-ancho-estrecho);
}

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  padding: 0.5rem 0.9rem;
}

/* ─── Movimiento ───────────────────────────────────────────────────────────────
   El contenido es VISIBLE por defecto. La clase `.animar` la pone el JavaScript, y
   sólo entonces se oculta para aparecer al entrar en pantalla.

   Al revés —opacidad 0 en el CSS y JS que la sube— un fallo de JavaScript dejaría la
   página en blanco y un buscador vería una web vacía. Es el error más caro de esta
   técnica y por eso está escrito aquí.
   ──────────────────────────────────────────────────────────────────────────── */

/* La PORTADA NUNCA se oculta.
   ────────────────────────────────────────────────────────────────────────────
   Esto se aprendió probando. La primera versión la desvanecía desde opacidad 0, y
   en un navegador que no compone fotogramas —pestaña en segundo plano, entorno sin
   pantalla, algunos rastreadores— la animación queda «running» pero **no avanza
   nunca**: el titular se queda invisible para siempre.
   
   No da error, no se ve en desarrollo, y deja en blanco justo lo que más importa.
   
   Por eso la portada sólo anima `transform`. Si la animación no avanza, el texto se
   lee igual —queda 12 px más abajo, y nadie sabe que iba a moverse—. El contenido
   de arriba se lee siempre; el adorno es lo prescindible, no al revés. */
@keyframes entrar-portada {
  from {
    transform: translateY(12px);
  }
  to {
    transform: none;
  }
}

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

.animar .portada [data-revelar] {
  animation: entrar-portada 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.animar .portada__texto > [data-revelar]:nth-child(2) {
  animation-delay: 60ms;
}
.animar .portada__texto > [data-revelar]:nth-child(3) {
  animation-delay: 120ms;
}
.animar .portada__texto > [data-revelar]:nth-child(4) {
  animation-delay: 180ms;
}
.animar .portada__texto > [data-revelar]:nth-child(5) {
  animation-delay: 240ms;
}
.animar .terminal[data-revelar] {
  animation-delay: 200ms;
}

/* El resto sí aparece al entrar en pantalla. `web.js` tiene además una red de
   seguridad que lo revela todo pasado un segundo y medio: si el observador no
   dispara, el contenido aparece igual en vez de quedarse en blanco. */
.animar [data-revelar]:not(.portada [data-revelar]) {
  opacity: 0;
  transform: translateY(14px);
}

.animar [data-revelar].visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Red de seguridad: aunque el JS no lo comprobara, aquí no se mueve nada. */
  .animar [data-revelar],
  .animar [data-revelar].visible,
  .animar .portada [data-revelar] {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--st-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--st-border);
}

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

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 660;
  font-size: 1.0625rem;
  color: var(--st-fg);
  text-decoration: none;
  letter-spacing: -0.015em;
}

.marca img {
  border-radius: var(--st-radius-sm);
}

.navegacion {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* `:not(.boton)` no es cosmético: sin él, `.navegacion a` (0,1,1) gana en
   especificidad a `.boton--primario` (0,1,0) y le pisa el color al botón. El
   resultado era texto oscuro sobre fondo oscuro —contraste 1.25— justo en la
   llamada a la acción principal de la cabecera. */
.navegacion a:not(.boton) {
  color: var(--st-fg-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 140ms ease;
}

.navegacion a:not(.boton):hover {
  color: var(--st-fg);
}

.navegacion__acceso {
  margin-left: 0.3rem;
}

/* «Entrar» va con borde y no relleno: compite con «Hablemos» si pesa lo mismo, y la
   acción que interesa a un visitante nuevo es la comercial. */
.navegacion__entrar {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  transition: border-color 150ms ease;
}

.navegacion__entrar:hover {
  border-color: var(--st-fg-subtle);
}

@media (max-width: 900px) {
  .navegacion__entrar {
    border: 0;
    border-bottom: 1px solid var(--st-border) !important;
    border-radius: 0;
    padding: 0.75rem 0;
  }
}

.menu-boton {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
}

.menu-boton span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--st-fg);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .menu-boton {
    display: flex;
  }

  .navegacion {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-border);
    padding: 0.5rem 1.25rem 1rem;
    display: none;
  }

  .navegacion[data-abierto='true'] {
    display: flex;
  }

  .navegacion a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--st-border);
  }

  .navegacion__acceso {
    margin: 0.85rem 0 0;
    text-align: center;
    justify-content: center;
    border-bottom: 0 !important;
  }
}

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--st-radius-sm);
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.boton:hover {
  transform: translateY(-1px);
}

.boton--grande {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
}

.boton--primario {
  background: var(--st-primary);
  color: var(--st-primary-fg);
}

.boton--primario:hover {
  background: var(--st-primary-hover);
}

.boton--whatsapp {
  background: transparent;
  color: var(--st-fg);
  border-color: var(--st-border);
}

/* Dentro de la banda es la única acción que hay, así que va rellena: un botón de
   contorno solo en un bloque compite con nada y pierde igual. */
.banda .boton--whatsapp {
  background: var(--st-whatsapp-solido);
  border-color: transparent;
  color: var(--st-whatsapp-solido-fg);
}

.banda .boton--whatsapp svg {
  color: currentColor;
}

.banda .boton--whatsapp:hover {
  background: var(--st-whatsapp-solido-hover);
  border-color: transparent;
}

.boton--whatsapp svg {
  color: var(--st-whatsapp);
}

.boton--whatsapp:hover {
  border-color: var(--st-whatsapp);
}

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

@media (prefers-reduced-motion: reduce) {
  .boton:hover {
    transform: none;
  }
}

/* ─── Etiquetas de sección ─────────────────────────────────────────────────── */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--st-primary);
}

.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-success) 22%, transparent);
}

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

/* El relleno inferior es menor que el superior a propósito: dejaba una franja muerta
   bajo el contenido y la primera pantalla parecía a medio terminar. Que la sección
   siguiente asome un poco es además lo que le dice al visitante que hay más abajo. */
.portada {
  position: relative;
  padding: clamp(2.75rem, 1.5rem + 6vw, 5.5rem) 0 clamp(2rem, 1rem + 3vw, 3.25rem);
  overflow: hidden;
}

/* Malla decorativa: dos manchas de color muy difusas. Barata, no anima nada y da
   profundidad sin recurrir a una imagen que habría que descargar. */
.malla {
  position: absolute;
  inset: -30% -10% auto;
  height: 130%;
  pointer-events: none;
  background:
    radial-gradient(
      42rem 26rem at 18% 22%,
      color-mix(in oklab, var(--st-primary) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      36rem 24rem at 82% 8%,
      color-mix(in oklab, var(--st-success) 13%, transparent),
      transparent 68%
    );
}

.portada__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

@media (max-width: 940px) {
  .portada__rejilla {
    grid-template-columns: 1fr;
  }
}

.portada__texto {
  max-width: 34rem;
}

.entradilla {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.25rem);
  color: var(--st-fg-muted);
  margin-bottom: 1.75rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.microcopia {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--st-fg-subtle);
}

/* ─── Terminal ─────────────────────────────────────────────────────────────── */

.terminal {
  border-radius: var(--st-radius);
  overflow: hidden;
  background: var(--st-code-bg);
  border: 1px solid color-mix(in oklab, var(--st-code-fg) 14%, transparent);
  box-shadow: 0 24px 60px -30px oklch(0 0 0 / 0.55);
}

.terminal__barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in oklab, var(--st-code-fg) 12%, transparent);
}

.terminal__barra span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--st-code-fg) 26%, transparent);
}

.terminal__barra em {
  margin-left: auto;
  font-family: var(--st-mono);
  font-size: 0.75rem;
  font-style: normal;
  color: var(--st-code-dim);
}

.terminal__cuerpo {
  margin: 0;
  padding: 1.1rem 1.2rem 1.35rem;
  overflow-x: auto;
  font-family: var(--st-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--st-code-fg);
}

.c-com {
  color: var(--st-code-dim);
}
.c-ok {
  color: var(--st-code-ok);
}
.c-dim {
  color: var(--st-code-dim);
}
.c-fn {
  color: var(--st-code-fn);
}
.c-str {
  color: var(--st-code-str);
}

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

.seccion {
  padding: clamp(3.25rem, 2rem + 4vw, 5.5rem) 0;
}

.seccion--alterna {
  background: var(--st-surface-alt);
  border-block: 1px solid var(--st-border);
}

.seccion__entrada {
  max-width: 44rem;
  color: var(--st-fg-muted);
  margin-bottom: 2.25rem;
}

.cierre-seccion {
  margin: 2rem 0 0;
  color: var(--st-fg-muted);
}

/* ─── Tarjetas de servicio ─────────────────────────────────────────────────── */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tarjeta {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  padding: 1.5rem;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.tarjeta:hover {
  border-color: color-mix(in oklab, var(--st-primary) 45%, var(--st-border));
  transform: translateY(-2px);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.9rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-primary-subtle);
  color: var(--st-primary);
}

.tarjeta__icono svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tarjeta p {
  margin: 0;
  color: var(--st-fg-muted);
  font-size: 0.9375rem;
}

/* La de Meta destaca porque la certificación es real y diferencia. Si algún día
   deja de serlo, esta clase se quita: no se destaca lo que no se puede sostener. */
.tarjeta--destacada {
  border-color: color-mix(in oklab, var(--st-primary) 40%, var(--st-border));
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--st-primary) 7%, var(--st-surface)),
    var(--st-surface) 60%
  );
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover {
    transform: none;
  }
}

/* ─── Pasos del proceso ────────────────────────────────────────────────────── */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
}

.paso {
  position: relative;
  counter-increment: paso;
  padding: 1.4rem 1.4rem 1.4rem 1.5rem;
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
}

.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--st-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--st-primary);
}

.paso p {
  margin: 0;
  color: var(--st-fg-muted);
  font-size: 0.9375rem;
}

/* ─── Banda de llamada a la acción ─────────────────────────────────────────── */

.banda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  background: linear-gradient(
    120deg,
    color-mix(in oklab, var(--st-primary) 9%, var(--st-surface)),
    var(--st-surface) 70%
  );
}

.banda h3 {
  margin: 0 0 0.2rem;
}

.banda p {
  margin: 0;
  color: var(--st-fg-muted);
  font-size: 0.9375rem;
}

/* ─── Preguntas ────────────────────────────────────────────────────────────── */

.preguntas {
  display: grid;
  gap: 0.6rem;
}

.preguntas details {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  overflow: hidden;
}

.preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  font-weight: 580;
  cursor: pointer;
  list-style: none;
}

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

/* El signo se dibuja con CSS: un carácter «+» heredaría la fuente del texto y se
   vería distinto en cada sistema. */
.preguntas summary::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--st-fg-subtle);
  border-bottom: 2px solid var(--st-fg-subtle);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}

.preguntas details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.preguntas summary:hover {
  background: var(--st-surface-alt);
}

.preguntas__cuerpo {
  padding: 0 1.2rem 1.2rem;
  color: var(--st-fg-muted);
  font-size: 0.9375rem;
}

.preguntas__cuerpo p:last-child,
.preguntas__cuerpo ul:last-child {
  margin-bottom: 0;
}

.preguntas__cuerpo ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.preguntas__cuerpo li {
  margin-bottom: 0.3rem;
}

.preguntas__cuerpo strong {
  color: var(--st-fg);
}

/* ─── Dos columnas ─────────────────────────────────────────────────────────── */

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.dos-columnas p {
  color: var(--st-fg-muted);
}

/* Dos columnas y no `auto-fit`: son CUATRO datos, y con tres columnas quedaba una
   celda vacía que se lee como un fallo de la página, no como espacio. */
.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--st-border);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  overflow: hidden;
}

.datos > div {
  background: var(--st-surface);
  padding: 1.2rem 1.3rem;
}

.datos dt {
  font-size: 0.8125rem;
  color: var(--st-fg-subtle);
  margin-bottom: 0.2rem;
}

.datos dd {
  margin: 0;
  font-weight: 620;
}

/* ─── Datos de contacto ────────────────────────────────────────────────────── */

.contacto-datos {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.contacto-datos__clave {
  display: block;
  font-size: 0.8125rem;
  color: var(--st-fg-subtle);
}

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

.formulario {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  padding: 1.75rem;
  display: grid;
  gap: 1rem;
}

.campo {
  display: grid;
  gap: 0.35rem;
}

.campo label {
  font-size: 0.875rem;
  font-weight: 560;
}

.opcional {
  font-weight: 400;
  color: var(--st-fg-subtle);
}

.campo input,
.campo textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--st-fg);
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  padding: 0.65rem 0.8rem;
  width: 100%;
  resize: vertical;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--st-primary);
}

.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: var(--st-danger);
}

/* La trampa para robots no se oculta con `display:none`: hay robots que precisamente
   rellenan lo que está oculto así. Se saca de la pantalla. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__aviso {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.875rem;
}

.formulario__aviso[data-estado='error'] {
  color: var(--st-danger);
}

.formulario__aviso[data-estado='ok'] {
  color: var(--st-success);
}

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

.pie {
  border-top: 1px solid var(--st-border);
  padding: 2.25rem 0;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.pie__eslogan {
  margin: 0 0 0.15rem;
  font-weight: 560;
  color: var(--st-fg);
}

.pie__legal {
  margin: 0;
  font-size: 0.875rem;
  color: var(--st-fg-subtle);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.pie__enlaces a {
  font-size: 0.875rem;
  color: var(--st-fg-muted);
  text-decoration: none;
}

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

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.redes a {
  font-size: 0.875rem;
  color: var(--st-fg-muted);
  text-decoration: none;
}

.redes a:hover {
  color: var(--st-primary);
  text-decoration: underline;
}

/* ─── Botón flotante ───────────────────────────────────────────────────────── */

.flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--st-whatsapp-solido);
  color: var(--st-whatsapp-solido-fg);
  box-shadow: 0 10px 28px -10px color-mix(in oklab, var(--st-whatsapp-solido) 75%, transparent);
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.flotante:hover {
  background: var(--st-whatsapp-solido-hover);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .flotante:hover {
    transform: none;
  }
}