/* ==========================================================================
   ESCÁLARE LATINOAMÉRICA — hoja de estilos única
   Mobile-first. Sin frameworks. Todo el color y la tipografía vive en :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Paleta confirmada (Manual de Marca v1.0) */
  --verde:   #168B51;  /* héroe: trazo del logo, acentos, botones */
  --pino:    #0B3D2E;  /* fondos de secciones amplias */
  --carbon:  #12100E;  /* fondo oscuro principal */
  --grafito: #1E1B15;  /* tarjetas sobre el carbón */
  --crema:   #F3F0E9;  /* fondo claro y texto sobre fondo oscuro */
  --piedra:  #B8B3A6;  /* texto secundario SOBRE FONDO OSCURO */
  --alerta:  #C1121F;  /* solo errores de formulario */

  /* Color de acento del tema. Por defecto es el verde de marca; cada rama
     lo redefine (ver sección 12). Todo lo que acentúa —rótulos, cifras,
     viñetas, botones, filetes— lee de aquí y de ningún otro lado. */
  --acento: var(--verde);

  /* Texto secundario sobre fondo claro.
     Piedra sobre crema da 1.87:1 de contraste — ilegible. Se usa el carbón
     atenuado, que es el mismo color de la paleta con transparencia. */
  --texto-tenue-claro: rgba(18, 16, 14, 0.72);
  /* Líneas de la cuadrícula */
  --linea-clara:  rgba(18, 16, 14, 0.14);
  --linea-oscura: rgba(243, 240, 233, 0.16);

  /* Tipografía */
  /* Oswald: logo y titulares, siempre en mayúsculas.
     Lato: párrafos y textos largos. Humanista y de terminales suaves, para
     que acompañe a la condensada en vez de competirle. */
  --fuente-titulo: "Oswald", "Arial Narrow", sans-serif;
  --fuente-texto:  "Lato", "Segoe UI", Arial, sans-serif;

  /* Ritmo vertical y medidas */
  --ancho-max: 1140px;
  --ancho-barra: 1440px;          /* el encabezado corre más ancho que el texto */
  --margen-lateral: 1.5rem;
  --aire-seccion: 4.5rem;

  /* Logo: relación real del archivo recortado 1093x306 = 3.57:1.
     Se usa el tamaño mínimo de marca (120px de ancho): la pieza más discreta
     que el manual permite, para que la barra no compita con el contenido. */
  --logo-ancho: 120px;
  --logo-alto: 34px;
  --area-proteccion: 21px;
  --alto-barra: 4.75rem;

  /* Animación (ver sección 11) */
  --duracion: 0.65s;
  /* La salida corre más rápido que la entrada: al irse, el bloque no debe
     arrastrarse detrás del scroll. */
  --duracion-salida: 0.4s;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa el encabezado fijo al saltar a un ancla */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  /* Red de seguridad: la página nunca hace scroll horizontal. */
  overflow-x: hidden;
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--fuente-texto);
  /* Lato tiene la altura de x más baja que una serif de texto: pide un punto
     más de cuerpo y algo menos de interlínea para leerse igual de cómoda. */
  font-size: 1.1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Estilo "cuadrado con carácter": ninguna esquina redondeada en todo el sitio. */
button,
input,
select,
textarea,
.boton,
.tarjeta { border-radius: 0; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   Peso sobrio: los titulares pesan por tamaño y por aire, no por negritas.
   Oswald 400 es el peso de trabajo; 500 se reserva para piezas cortas.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.rotulo,
.boton,
.menu a,
.cifra {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.16;
  margin: 0;
}

h1 { font-size: clamp(2rem, 7.6vw, 3.7rem); letter-spacing: 0.015em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 5.6vw, 2.5rem); letter-spacing: 0.02em; }
h3 { font-size: clamp(1.15rem, 4vw, 1.4rem); letter-spacing: 0.04em; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

/* Párrafo de entrada: un poco mayor, para la frase que abre una sección. */
.entrada {
  font-size: clamp(1.08rem, 3vw, 1.25rem);
  max-width: 34em;
}

.cuerpo { max-width: 36em; }

/* Rótulo pequeño que numera o nombra la sección */
.rotulo {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.26em;
  color: var(--acento);
  margin-bottom: 1.1rem;
  display: block;
}

/* Texto secundario, según el fondo sobre el que va */
.tenue { color: var(--texto-tenue-claro); }
.seccion--oscura .tenue,
.seccion--pino .tenue { color: var(--piedra); }

.acento { color: var(--acento); }

/* --------------------------------------------------------------------------
   4. ESTRUCTURA DE SECCIONES
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* El encabezado usa una franja más ancha para que el logo quede pegado
   a la izquierda de la pantalla y no alineado a la caja del texto. */
.contenedor--barra {
  max-width: var(--ancho-barra);
}

.seccion {
  padding-block: var(--aire-seccion);
  border-top: 1px solid var(--linea-clara);
}

.seccion--clara  { background: var(--crema);  color: var(--carbon); }
.seccion--oscura { background: var(--carbon); color: var(--crema); border-top-color: var(--linea-oscura); }
.seccion--pino   { background: var(--pino);   color: var(--crema); border-top-color: var(--linea-oscura); }

/* Sección de mucho aire (el filtro de cliente) */
.seccion--aire { padding-block: calc(var(--aire-seccion) * 1.6); }

/* La rama Marca vende posicionamiento, no soluciona un dolor:
   el diseño se abre y se vuelve más sobrio. */
.pagina--marca { --aire-seccion: 6rem; }
.pagina--marca .entrada { max-width: 30em; }
.pagina--marca h1,
.pagina--marca h2 { font-weight: 300; letter-spacing: 0.04em; }

/* Declaración destacada: la palabra es autoridad, no imagen */
.declaracion {
  border-top: 1px solid var(--linea-oscura);
  border-bottom: 1px solid var(--linea-oscura);
  padding-block: 2.75rem;
  margin-top: 3.5rem;
  max-width: 38em;
}
/* Sus filetes son la única cosa que la separa del resto: sobre crema tienen
   que cambiar de tinta o desaparecen, porque la línea oscura es crema
   traslúcida y ahí no se ve. */
.seccion--clara .declaracion {
  border-top-color: var(--linea-clara);
  border-bottom-color: var(--linea-clara);
}
.declaracion h3 { color: var(--acento); margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.boton {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Principal: fondo verde con texto carbón.
   Carbón sobre verde da 4.41:1; crema sobre verde solo 3.82:1. */
.boton--principal {
  background: var(--acento);
  color: var(--carbon);
  border-color: var(--acento);
}
.boton--principal:hover,
.boton--principal:focus-visible {
  background: transparent;
  color: var(--acento);
}
.seccion--clara .boton--principal:hover,
.seccion--clara .boton--principal:focus-visible { color: var(--pino); border-color: var(--pino); }

/* Secundario: solo contorno */
.boton--linea {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.boton--linea:hover,
.boton--linea:focus-visible {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--carbon);
}

/* Foco visible en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--carbon);
  padding: 0.75rem 1.25rem;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  z-index: 200;
}
.saltar:focus { left: 0; }

/* --------------------------------------------------------------------------
   6. ENCABEZADO Y MENÚ
   Tres zonas: logo pegado a la izquierda · menú al centro · acción a la
   derecha. En escritorio se resuelve con una rejilla de columnas laterales
   iguales, que es lo único que centra el menú de verdad.
   -------------------------------------------------------------------------- */
.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--carbon);
  border-bottom: 1px solid var(--linea-oscura);
  transition: transform 0.35s var(--curva);
  will-change: transform;
}

/* Se esconde al bajar y vuelve al subir (ver principal.js) */
.encabezado--oculto { transform: translateY(-100%); }

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 1rem;
  min-height: var(--alto-barra);
}

/* El logo respeta su área de protección: nada entra en ese espacio. */
.logo {
  display: block;
  flex: none;
  margin-right: var(--area-proteccion);
}
.logo img {
  width: var(--logo-ancho);
  height: var(--logo-alto);
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: none;
}

/* El botón de diagnóstico se ve siempre, también en celular.
   Ahí parte en dos renglones para no empujar el ancho de la página. */
.encabezado .boton {
  padding: 0.5rem 0.8rem;
  font-size: 0.7rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 8em;
}

/* Botón hamburguesa */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--linea-oscura);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 1px;
  background: var(--crema);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú desplegable en celular: baja como una fila completa bajo la barra,
   nunca como una columna angosta metida entre el logo y el botón. */
.menu {
  display: none;
  flex: 0 0 100%;
  order: 3;
  width: 100%;
  border-top: 1px solid var(--linea-oscura);
  background: var(--carbon);
}
.menu.abierto { display: block; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1.25rem;
}
.menu a {
  display: block;
  padding: 0.9rem 0;
  color: var(--crema);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--linea-oscura);
  transition: color 0.2s ease;
}
.menu a:hover { color: var(--acento); }

/* La página en la que estás va en negrita, siempre, en las cuatro opciones.
   El color por sí solo no basta —hay quien no lo distingue— y el peso se ve
   igual en cualquiera de los tres temas de rama. */
.menu a[aria-current="page"] {
  color: var(--acento);
  font-weight: 600;
}
/* El botón de diagnóstico también, cuando estás en la encuesta. Mismo 600 que
   el menú: un peso más suelto obligaría a cargar otro archivo de Oswald. */
.boton[aria-current="page"] { font-weight: 600; }

/* Empuja el contenido por debajo del encabezado fijo */
.contenido { padding-top: var(--alto-barra); }

/* --------------------------------------------------------------------------
   7. PORTADA (hero)
   -------------------------------------------------------------------------- */
.portada {
  background: var(--carbon);
  color: var(--crema);
  padding-block: calc(var(--aire-seccion) * 1.25) var(--aire-seccion);
}
.portada h1 { max-width: 15ch; }
.portada__subtitulo {
  font-size: clamp(1.02rem, 3.2vw, 1.22rem);
  color: var(--piedra);
  max-width: 32em;
  margin: 1.75rem 0 2.5rem;
}
/* Regla verde bajo el titular: el único adorno del sitio. Corta a propósito
   —es un remate, no un subrayado— y del mismo largo en las cuatro portadas. */
.portada h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--acento);
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   8. REJILLAS Y TARJETAS
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: 1px;                       /* la cuadrícula se ve como línea de 1px */
  background: var(--linea-oscura);
  border: 1px solid var(--linea-oscura);
  margin-top: 2.75rem;
}
.seccion--clara .rejilla {
  background: var(--linea-clara);
  border-color: var(--linea-clara);
}

.tarjeta {
  background: var(--grafito);
  padding: 2rem 1.75rem;
}
.seccion--clara .tarjeta { background: var(--crema); }
.seccion--pino .tarjeta  { background: var(--pino); }

/* La cifra de La Prueba: pesa por tamaño, no por negrita. */
.cifra {
  display: block;
  font-size: clamp(2.3rem, 10vw, 3.2rem);
  font-weight: 300;
  color: var(--acento);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}
.tarjeta p { font-size: 1rem; }

/* Frase de deslinde entre las dos ramas: obligatoria y visible */
.deslinde {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: clamp(1rem, 3.2vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border-left: 2px solid var(--acento);
  padding-left: 1.15rem;
  margin: 2.25rem 0 0;
  max-width: 32ch;
}

/* Variante centrada: encabeza el espejo de las dos ramas. Ahí el deslinde no
   es una nota al margen sino el titular, así que sube de cuerpo y suelta el
   filete de la izquierda.
   No lleva remate propio: la única raya del bloque es la del espejo, entera y
   de lado a lado. Con las dos —una corta al centro y las de las columnas más
   abajo— la vista leía un subrayado quebrado que sube y baja. */
.deslinde--centro {
  font-size: clamp(1.25rem, 4.4vw, 1.85rem);
  border-left: 0;
  padding-left: 0;
  margin: 0 auto;
  max-width: 26ch;
  text-align: center;
}

/* --- Espejo de las dos ramas (index.html) ---------------------------------
   No es un comparativo ni un "versus": es un espejo para que el visitante se
   reconozca en una de las dos frases. Las dos columnas pesan igual —mismo
   filete, mismo tamaño, mismo botón— y ninguna va marcada como recomendada.
   Por eso tampoco llevan la cuadrícula de 1px del resto del sitio: una línea
   entre ellas se leería como frontera entre rivales.

   Cada columna abre con su propio filete, entero y del ancho completo de la
   columna: dos rayas iguales, una por tema. Lo que antes se leía como una raya
   rota era el remate corto del titular metido entre las dos; ese ya no está. */
.espejo {
  display: grid;
  gap: 3.25rem;
  margin-top: 3.25rem;
}

.espejo__col {
  border-top: 2px solid var(--acento);
  padding-top: 2rem;
}

/* La frase va en primera persona: es lo que el visitante ya se dijo a sí
   mismo. Entrecomillada, para que se lea como su voz y no como un reclamo
   nuestro. */
.espejo__frase {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 300;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.espejo__quien { font-size: 1rem; margin-bottom: 0.85rem; max-width: 32ch; }
.espejo__busca { font-size: 1.05rem; font-weight: 700; margin-bottom: 2rem; max-width: 32ch; }

/* --- Pasos del método (negocio.html y marca.html) -------------------------
   Cuatro tarjetas en fila. Cada una dice QUÉ LOGRA la etapa, nunca cómo se
   hace: el método se muestra como prueba de que existe un sistema, no como
   tutorial. Una sola línea por tarjeta, sin subtítulos ni detalle técnico. */
.paso__num {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  /* Cuerpo grande a propósito: el verde de marca sobre crema da 3.81:1, que
     cumple para texto grande (3:1) pero no para cuerpo normal. */
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--acento);
  margin-bottom: 0.9rem;
}
.paso__titulo { margin-bottom: 0.6rem; }
.paso__texto { margin: 0; font-size: 1rem; }

/* Quién responde por la etapa. Va al pie de la tarjeta, separado por filete:
   es un dato de otra naturaleza que la promesa de la etapa —dice hasta dónde
   llega nuestro trabajo— y por eso no se mezcla con el párrafo de arriba.
   Nunca lleva el color de acento: no es un adorno, y en la rama Marca el
   acento es contraste, no color. */
.paso__papel {
  margin: 1.35rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--linea-oscura);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--piedra);
}
.seccion--clara .paso__papel {
  border-top-color: var(--linea-clara);
  color: var(--texto-tenue-claro);
}
.seccion--verde .paso__papel {
  border-top-color: rgba(18, 16, 14, 0.22);
  color: var(--carbon);
}

/* --- Bloque de destino ----------------------------------------------------
   Remata la fila de pasos: el estado final al que llega el cliente. Nunca una
   cifra ni una promesa de resultado. El filete monta sobre el borde inferior
   de la rejilla (de ahí el -1px) para que se lea como cierre de esa fila. */
.destino {
  border-top: 2px solid var(--acento);
  margin-top: -1px;
  padding-top: 2.25rem;
  max-width: 42em;
}
.destino h3 { color: var(--acento); margin-bottom: 1.1rem; }
.destino p {
  margin: 0;
  font-size: clamp(1.12rem, 3.2vw, 1.4rem);
  line-height: 1.55;
  max-width: 30em;
}

/* --------------------------------------------------------------------------
   9. LISTAS
   -------------------------------------------------------------------------- */
/* Fases del proceso.
   Cada fase es una fila: número · nombre · explicación. El texto nunca cae
   en una columna angosta; en celular se apila completo bajo el número. */
.fases {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linea-oscura);
}
.seccion--clara .fases { border-top-color: var(--linea-clara); }

.fase {
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linea-oscura);
}
.seccion--clara .fase { border-bottom-color: var(--linea-clara); }

.fase__num {
  flex: none;
  width: 2.25rem;
  font-family: var(--fuente-titulo);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--acento);
}

.fase__cuerpo { flex: 1 1 auto; min-width: 0; }

.fase__titulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.09em;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.fase__texto {
  margin: 0;
  font-size: 1rem;
  max-width: 46ch;
}

/* Lista de lo que incluye un servicio */
.incluye {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.incluye li {
  position: relative;
  padding: 1.05rem 0 1.05rem 2rem;
  border-bottom: 1px solid var(--linea-oscura);
  font-size: 1rem;
}
.seccion--clara .incluye li { border-bottom-color: var(--linea-clara); }
/* Viñeta redonda y pequeña. El cuadro de 7px que había antes se veía duro y
   dentado, y al ser el mismo elemento repetido ocho veces ese defecto se
   multiplicaba. Un punto de 6px pesa menos y acompaña al texto en vez de
   competirle.
   El top centra el punto en la primera línea: relleno superior del renglón
   (1.05rem) + media línea de texto (0.85em) - medio punto (3px). Va en em
   para que siga centrado si cambia el cuerpo de la lista. */
.incluye li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(1.05rem + 0.85em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento);
}

/* Nota al margen (presupuesto de anuncios, mezcla de contenido) */
.nota {
  border-left: 2px solid var(--acento);
  padding: 0.35rem 0 0.35rem 1.15rem;
  margin-top: 2.5rem;
  font-size: 0.975rem;
  max-width: 40em;
}
/* Lato no trae peso 500: el rótulo de la nota se distingue por el verde
   y por el 700, no por un peso intermedio que el navegador falsificaría. */
.nota strong { font-weight: 700; }

/* El rótulo de la nota es texto pequeño en negrita, y eso exige 4.5:1. El
   verde de marca no lo alcanza contra ninguno de los dos fondos: da 3.81:1
   sobre crema y 4.33:1 sobre carbón. En los dos casos pasa al color de texto
   de la sección —carbón sobre claro, crema sobre oscuro—; el filete verde de
   la izquierda sigue marcando la nota, así que no se pierde nada más que el
   color de una palabra. */
.seccion--clara .nota strong.acento { color: var(--carbon); }
.seccion--oscura .nota strong.acento,
.seccion--pino .nota strong.acento { color: var(--crema); }

/* Vías de contacto: el dato manda, así que va en la fuente de texto y con
   peso, no en Oswald: un correo en condensada mayúscula se lee peor. */
/* Son la acción principal de la página de contacto: piden más aire y más
   cuerpo que una tarjeta normal, o se leen como una nota al pie. */
.via { padding-block: 2.75rem; }
.via .rotulo { margin-bottom: 0.85rem; }

.via__dato {
  display: inline-block;
  margin-top: 0.15rem;
  font-weight: 700;
  /* El correo entero mide 31 caracteres: en celular el cuerpo baja lo justo
     para que entre en un renglón y no quede una letra suelta abajo. */
  font-size: clamp(0.97rem, 3.6vw, 1.18rem);
  line-height: 1.45;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;   /* red de seguridad: nunca desborda la tarjeta */
  transition: color 0.2s ease, border-color 0.2s ease;
}
a.via__dato { border-bottom-color: var(--acento); }
a.via__dato:hover,
a.via__dato:focus-visible { color: var(--acento); border-bottom-color: currentColor; }
.via__dato--texto { margin: 0.15rem 0 0; }

/* El correo es el dato más largo de los tres —31 caracteres— y en una columna
   de tres se queda sin aire a los lados. Baja de cuerpo solo él, por su
   href: los otros dos caben de sobra y no tienen por qué encoger con él. */
.via__dato[href^="mailto:"] {
  font-size: clamp(0.85rem, 2.9vw, 0.97rem);
  line-height: 1.5;
}

/* --- Voz del cliente ------------------------------------------------------
   Frases que dice el visitante, no la marca. Van entrecomilladas y en primera
   persona SIEMPRE: quitarles el "yo" las convierte en eslogan de agencia, que
   es justo lo contrario de lo que hacen aquí.

   El titular conserva Oswald mayúsculas, pero baja de peso: una frase íntima
   gritada en negritas deja de sonar a persona. Las de apoyo cambian a la
   fuente de texto en cursiva, que es la marca tipográfica de cita de toda la
   vida y no le compite a la condensada del titular.
   Nunca se agrupan: una frase por bloque, con aire alrededor. */
.voz--titular {
  font-weight: 300;
  letter-spacing: 0.03em;
  max-width: 20ch;
}

.voces {
  display: grid;
  gap: 2.75rem;
  margin-top: 3.25rem;
}

.voz {
  font-family: var(--fuente-texto);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.12rem, 3.6vw, 1.45rem);
  line-height: 1.5;
  border-left: 2px solid var(--acento);
  padding-left: 1.25rem;
  margin: 0;
  max-width: 30ch;
}

/* Frase suelta grande: el filtro de cliente */
.filtro {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: clamp(1.45rem, 5.4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.28;
  max-width: 22ch;
  margin: 0;
}
.filtro + .filtro { margin-top: 1.5rem; color: var(--acento); }

/* Socios.
   El bloque va centrado dentro de su tarjeta: es la única sección del sitio
   donde manda una fotografía, y descolgada a la izquierda dejaba un hueco
   muerto a su derecha. */
.socio { text-align: center; }

/* Marco del retrato. PROPORCIÓN 4:5 (vertical).
   Se muestra a 300px de ancho como máximo; las fotos se entregan a 1200x1500
   para que se vean nítidas en pantallas de alta densidad. */
.socio__retrato {
  aspect-ratio: 4 / 5;
  max-width: 300px;
  background: var(--grafito);
  border: 1px solid var(--linea-oscura);
  margin: 0 auto 1.6rem;
}
/* Cuando llegue la foto real, sustituir el div por:
   <img class="socio__retrato" src="img/socio-nombre.jpg" alt="" width="1200" height="1500"> */
img.socio__retrato { object-fit: cover; width: 100%; }

.socio h3 { margin-bottom: 0.35rem; }
.socio p { max-width: 34ch; margin-inline: auto; }
.socio__cargo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--acento);
  display: block;
  margin-bottom: 0.9rem;
}
.socio p { font-size: 0.975rem; }

/* --- Texto legal (privacidad.html y deslinde.html) ------------------------
   Son los dos únicos textos legales que se publican; todo lo demás vive en el
   contrato firmado. Se transcriben literales del marco legal, así que aquí
   solo se resuelve la lectura: columna angosta, interlínea suelta y
   subtítulos que ordenan sin gritar.
   Los h2 bajan de cuerpo a propósito: en una página de puro texto corrido, un
   titular de sección a tamaño de portada parte la lectura en vez de guiarla. */
.legal { max-width: 40em; }

.legal h2 {
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  letter-spacing: 0.09em;
  margin: 3rem 0 1rem;
}
.legal h2:first-of-type { margin-top: 2.5rem; }
.legal p { font-size: 1.02rem; line-height: 1.75; }

/* El dato de contacto se repite tres veces en el aviso: el enlace se marca con
   filete y no con color, para que el texto siga siendo carbón pleno. */
.legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--acento);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.legal a:hover,
.legal a:focus-visible { color: var(--acento); }

.legal__fecha {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: var(--texto-tenue-claro);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. PIE
   Tres bloques arriba —marca · sitio · contacto— y una barra inferior con lo
   legal, separada por filete. Es la misma cuadrícula del resto del sitio,
   aplicada al cierre: columnas de ancho declarado, filete vertical entre
   ellas y ni una esquina redondeada.

   Todo el pie va en piedra sobre carbón (9.6:1) y sube a crema al pasar el
   ratón. Antes los datos de contacto iban en crema y peso 700: en una lista
   de dos renglones eso no era jerarquía, era grito. La jerarquía la dan
   ahora los rótulos de columna, que es lo único en crema por defecto.
   -------------------------------------------------------------------------- */
.pie {
  background: var(--carbon);
  color: var(--piedra);
  padding-block: 4rem 2.25rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: 0.95rem;
}

.pie__rejilla { display: grid; gap: 3rem; }

/* --- Bloque de marca ------------------------------------------------------ */
.pie .logo { margin: 0 0 var(--area-proteccion); }

/* El tagline oficial, completo: es la frase de la marca y no se recorta. Con
   la medida limitada cae en tres renglones y le da cuerpo a la columna, que
   de otro modo quedaría con el logo flotando solo. */
.pie__tagline {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 26em;
}

/* La acción principal cierra el bloque de marca. Va aquí y no en la lista de
   al lado por dos razones: el sitio existe para cerrar, y sin ella la columna
   de marca quedaba con un hueco muerto debajo del tagline mientras la de
   enlaces se estiraba. Más compacto que un botón de sección: en el pie es un
   recordatorio, no la llamada principal. */
.pie .boton {
  margin-top: 1.9rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

/* --- Columnas ------------------------------------------------------------- */
.pie__rotulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--crema);
  margin: 0 0 1.4rem;
}

.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: 0.8rem; }
.pie__lista li:last-child { margin-bottom: 0; }

/* Sin subrayado permanente: en una lista corta ensucia, y el contexto ya dice
   que son enlaces. La línea aparece al pasar el ratón o al llegar con el
   teclado. */
.pie__lista a {
  color: var(--piedra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pie__lista a:hover,
.pie__lista a:focus-visible { color: var(--crema); border-bottom-color: currentColor; }

/* El correo mide 31 caracteres y es lo más largo del pie: en su columna baja
   de cuerpo para no obligar a partirlo en dos renglones. */
.pie__lista a[href^="mailto:"] {
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* La ciudad no es un enlace: cierra la columna de contacto como dato, con el
   aire de una línea en blanco por encima. */
.pie__lugar {
  margin: 1.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* --- Barra inferior ------------------------------------------------------- */
/* Copyright a un lado, legal al otro. Separada por filete del bloque de
   arriba: lo de aquí es letra chica y tiene que leerse como tal, sin dejar de
   ser alcanzable desde cualquier página. */
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.9rem 2.5rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: 0.82rem;
}

.pie__copy { margin: 0; }

.pie__aviso {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0;
  padding: 0;
}
.pie__aviso li { margin: 0; }
.pie__aviso a {
  color: var(--piedra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pie__aviso a:hover,
.pie__aviso a:focus-visible { color: var(--crema); border-bottom-color: currentColor; }
/* Igual que en el menú: la página en la que estás se marca con peso, no solo
   con color. */
.pie__aviso a[aria-current="page"] { color: var(--crema); font-weight: 700; }

/* --------------------------------------------------------------------------
   11. ANIMACIÓN DE ENTRADA Y SALIDA
   Un mismo gesto con tres direcciones: sube, entra por la izquierda o entra
   por la derecha. Solo se animan opacidad y transform, nunca medidas.
   El estado oculto SOLO se aplica cuando el JS confirmó que va a animar,
   agregando .con-animacion. Si el JS falla, todo se ve normal.

   La salida es la misma animación al revés: el bloque se va por donde vino.
   No hace falta declararla aparte —basta con que el JS quite .visible— pero sí
   corre más rápido y sin escalonar, para que al irse no arrastre.
   -------------------------------------------------------------------------- */
/* La dirección se fija con variables, no reescribiendo transform: así el
   estado final (.visible) nunca queda pisado por una consulta de medios. */
.con-animacion .animar {
  --dx: 0px;
  --dy: 20px;
  opacity: 0;
  transform: translate3d(var(--dx), var(--dy), 0);
  /* Este es el estado de SALIDA además del inicial: la duración corta y el
     retraso en cero solo se notan cuando el bloque se va. */
  transition: opacity var(--duracion-salida) var(--curva),
              transform var(--duracion-salida) var(--curva);
  transition-delay: 0ms;
}
.con-animacion .animar[data-anim="izquierda"] { --dx: -32px; --dy: 0px; }
.con-animacion .animar[data-anim="derecha"]   { --dx:  32px; --dy: 0px; }
/* Solo se aclara, sin desplazamiento: para bloques muy grandes */
.con-animacion .animar[data-anim="fundido"]   { --dx: 0px;   --dy: 0px; }

/* Entrada: más lenta y con el escalonado que fija el JS en --retraso. Va aquí
   y no en la regla base porque la transición que corre es la del estado al que
   se llega; en la salida se llega al estado base, que no escalona. */
.con-animacion .animar.visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--duracion) var(--curva),
              transform var(--duracion) var(--curva);
  transition-delay: var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .con-animacion .animar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .encabezado { transition: none; }
  * { animation: none !important; }
}

/* En pantallas chicas el desplazamiento lateral se acorta: el contenido
   gana sobre el efecto y el teléfono no tartamudea. */
@media (max-width: 719px) {
  .con-animacion .animar[data-anim="izquierda"] { --dx: -16px; }
  .con-animacion .animar[data-anim="derecha"]   { --dx:  16px; }
}

/* ==========================================================================
   12. TEMAS POR RAMA
   Escálare vende dos productos a dos mercados distintos, y cada página se
   viste distinto para que nadie los confunda con niveles de lo mismo.

   · NEGOCIO — verde a tope. Franjas macizas de color, mucho contraste.
     Sobre verde, el texto va en CARBÓN: crema sobre verde da 3.82:1 y no
     alcanza el mínimo legible; carbón da 4.41:1.
   · MARCA — monocromática. Ni un solo acento de color: carbón, grafito,
     crema y piedra. La sobriedad es el argumento de venta de esa rama.
   ========================================================================== */

/* --- Sección verde macizo (rama Negocio) ---------------------------------- */
.seccion--verde,
.portada--verde {
  background: var(--verde);
  color: var(--carbon);
  border-top-color: rgba(18, 16, 14, 0.22);
}
/* Sobre verde no hay texto atenuado: se pierde. Todo va en carbón pleno. */
.seccion--verde .tenue,
.portada--verde .tenue,
.seccion--verde .rotulo,
.portada--verde .rotulo,
.portada--verde .portada__subtitulo { color: var(--carbon); }

/* Carbón sobre el verde de marca da 4.38:1. Eso basta y sobra para texto
   grande (mínimo 3:1), pero se queda corto para el cuerpo normal (4.5:1).
   Por eso sobre verde el párrafo sube a 25px: entra en "texto grande" y
   cumple. Ningún color de la paleta llega a 4.5:1 sobre este verde, así que
   la salida correcta es el tamaño, no cambiar de color. */
.seccion--verde .entrada,
.portada--verde .portada__subtitulo {
  font-size: clamp(1.2rem, 3.4vw, 1.56rem);
  line-height: 1.55;
  max-width: 26em;
}
.seccion--verde .rotulo,
.portada--verde .rotulo { font-weight: 400; }

.seccion--verde .rejilla,
.seccion--verde .fases,
.seccion--verde .incluye li,
.seccion--verde .fase { border-color: rgba(18, 16, 14, 0.22); }
.seccion--verde .rejilla { background: rgba(18, 16, 14, 0.22); }
.seccion--verde .tarjeta { background: var(--verde); }
.portada--verde h1::after { background: var(--carbon); }

/* Sobre verde el botón se invierte: carbón macizo. */
.seccion--verde .boton--principal,
.portada--verde .boton--principal {
  background: var(--carbon);
  color: var(--crema);
  border-color: var(--carbon);
}
.seccion--verde .boton--principal:hover,
.seccion--verde .boton--principal:focus-visible,
.portada--verde .boton--principal:hover,
.portada--verde .boton--principal:focus-visible {
  background: var(--crema);
  color: var(--carbon);
  border-color: var(--crema);
}
/* El de contorno también: su hover normal es fondo de acento, que sobre verde
   sería verde sobre verde y desaparecería. Aquí invierte a carbón macizo.
   En reposo va en carbón sobre verde (4.38:1), la misma desviación conocida y
   aceptada del menú de esta rama: ningún color de la paleta llega a 4.5:1
   sobre este verde, y el botón no puede crecer al tamaño de texto grande. */
.seccion--verde .boton--linea:hover,
.seccion--verde .boton--linea:focus-visible,
.portada--verde .boton--linea:hover,
.portada--verde .boton--linea:focus-visible {
  background: var(--carbon);
  color: var(--crema);
  border-color: var(--carbon);
}

.seccion--verde a:focus-visible,
.portada--verde a:focus-visible { outline-color: var(--carbon); }

/* --- Rama NEGOCIO: encabezado verde --------------------------------------- */
.pagina--negocio .encabezado {
  background: var(--verde);
  border-bottom-color: rgba(18, 16, 14, 0.22);
}
.pagina--negocio .menu,
.pagina--negocio .menu:not(.abierto) { border-top-color: rgba(18, 16, 14, 0.22); }
.pagina--negocio .menu.abierto { background: var(--verde); }
/* Sobre verde, Oswald 300 se deshilacha: el menú sube a 400 para sostener
   el contraste de 4.41:1 que da el carbón. */
.pagina--negocio .menu a {
  color: var(--carbon);
  font-weight: 400;
  border-bottom-color: rgba(18, 16, 14, 0.22);
}
/* La página actual se marca con peso y filete, no con un cambio de color:
   la crema sobre verde cae a 3.81:1 y deja de ser legible. Va en el mismo
   peso que en las otras dos ramas, para que "estás aquí" se lea igual en
   todo el sitio. */
.pagina--negocio .menu a:hover {
  color: var(--carbon);
  border-bottom-color: var(--carbon);
}
.pagina--negocio .menu a[aria-current="page"] {
  color: var(--carbon);
  font-weight: 600;
  border-bottom-color: var(--carbon);
}
.pagina--negocio .hamburguesa { border-color: rgba(18, 16, 14, 0.3); }
.pagina--negocio .hamburguesa span { background: var(--carbon); }
.pagina--negocio .encabezado .boton--principal {
  background: var(--carbon);
  color: var(--crema);
  border-color: var(--carbon);
}
.pagina--negocio .encabezado .boton--principal:hover,
.pagina--negocio .encabezado .boton--principal:focus-visible {
  background: var(--crema);
  color: var(--carbon);
  border-color: var(--crema);
}
.pagina--negocio .encabezado a:focus-visible,
.pagina--negocio .encabezado button:focus-visible { outline-color: var(--carbon); }

@media (min-width: 960px) {
  .pagina--negocio .menu a[aria-current="page"] { border-bottom-color: var(--carbon); }
}

/* --- Rama MARCA: monocromática -------------------------------------------- */
/* El acento deja de ser color y pasa a ser contraste: piedra sobre los
   fondos oscuros, carbón atenuado sobre los claros. */
.pagina--marca { --acento: var(--texto-tenue-claro); }
.pagina--marca .encabezado,
.pagina--marca .portada,
.pagina--marca .seccion--oscura,
.pagina--marca .seccion--pino,
.pagina--marca .pie { --acento: var(--piedra); }

/* En monocromo no hay pino: esa franja pasa a grafito. */
.pagina--marca .seccion--pino {
  background: var(--grafito);
  border-top-color: var(--linea-oscura);
}

/* Botones: crema macizo sobre oscuro, carbón macizo sobre claro. */
.pagina--marca .boton--principal {
  background: var(--crema);
  color: var(--carbon);
  border-color: var(--crema);
}
.pagina--marca .boton--principal:hover,
.pagina--marca .boton--principal:focus-visible {
  background: transparent;
  color: var(--crema);
  border-color: var(--crema);
}
.pagina--marca .seccion--clara .boton--principal {
  background: var(--carbon);
  color: var(--crema);
  border-color: var(--carbon);
}
.pagina--marca .seccion--clara .boton--principal:hover,
.pagina--marca .seccion--clara .boton--principal:focus-visible {
  background: transparent;
  color: var(--carbon);
  border-color: var(--carbon);
}
.pagina--marca .pie li a:hover,
.pagina--marca .pie li a:focus-visible { color: var(--piedra); }

/* En monocromo el acento es carbón atenuado, y ese mismo tono lo usa el texto
   secundario: número, título y apoyo quedarían del mismo color y la tarjeta se
   aplanaría. Sobre fondo claro, número y titular suben a carbón pleno; el
   filete se queda en el tono atenuado, que es lo que ordena sin gritar. */
.pagina--marca .seccion--clara .paso__num,
.pagina--marca .seccion--clara .destino h3 { color: var(--carbon); }

/* ==========================================================================
   13. FORMULARIO (encuesta.html)
   Una sola columna, campos anchos y mucho aire: en celular se contesta con
   el pulgar y cualquier fila doble obliga a hacer zoom.
   Ninguna esquina redondeada, tampoco en los controles nativos.
   ========================================================================== */
.formulario { max-width: 40rem; margin-top: 2.75rem; }

/* Sirve para div y para fieldset: el fieldset trae borde y sangrías propias. */
.campo {
  border: 0;
  margin: 0 0 2.25rem;
  padding: 0;
  min-width: 0;
}

.campo__etiqueta {
  display: block;
  padding: 0;                     /* legend */
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}
/* Lo opcional se marca con palabra, no con un asterisco que nadie descifra. */
.campo__opcional {
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--texto-tenue-claro);
}

/* Nota bajo un campo (a dónde llega el diagnóstico, sin compromiso) */
.campo__nota {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texto-tenue-claro);
}
/* El enlace al aviso de privacidad vive aquí. Sube a carbón pleno: es el
   único texto de la nota que se puede tocar y tiene que verse como tal. */
.campo__nota a {
  color: var(--carbon);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--acento);
  transition: color 0.2s ease;
}
.campo__nota a:hover,
.campo__nota a:focus-visible { color: var(--acento); border-bottom-color: currentColor; }

/* --- Controles ------------------------------------------------------------ */
.control {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid rgba(18, 16, 14, 0.28);
  color: var(--carbon);
  font-family: var(--fuente-texto);
  /* 16px o más: por debajo de eso, iOS hace zoom solo al tocar el campo. */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.2s ease;
}
.control::placeholder { color: var(--texto-tenue-claro); opacity: 1; }
.control:hover { border-color: rgba(18, 16, 14, 0.5); }
.control:focus { border-color: var(--acento); }

textarea.control { min-height: 9.5rem; resize: vertical; }

/* La flecha de la lista se dibuja aparte: la nativa llega redondeada. */
select.control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2312100E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

/* --- Opciones (radios) ---------------------------------------------------- */
/* Misma cuadrícula de 1px del resto del sitio. El radio nativo se esconde y
   se dibuja uno cuadrado; el foco de teclado se pinta sobre ese cuadro. */
.opciones {
  display: grid;
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid rgba(18, 16, 14, 0.28);
}

.opcion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.2rem;
  background: var(--crema);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.opcion:hover { background: rgba(18, 16, 14, 0.045); }

.opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.opcion__marca {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.3rem;
  border: 1px solid rgba(18, 16, 14, 0.45);
  position: relative;
}
.opcion input:checked + .opcion__marca { border-color: var(--acento); }
.opcion input:checked + .opcion__marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--acento);
}
/* La opción elegida no se distingue solo por color: también por el filete
   macizo de la izquierda y por el cuadro relleno. */
.opcion:has(input:checked) {
  background: rgba(22, 139, 81, 0.08);
  box-shadow: inset 3px 0 0 var(--acento);
}
.opcion input:focus-visible + .opcion__marca {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

.opcion__texto { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.opcion__detalle {
  display: block;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--texto-tenue-claro);
  margin-top: 0.15rem;
}

/* --- Errores -------------------------------------------------------------- */
/* El daltonismo más común confunde rojo y verde: todo error lleva además
   ícono y texto explicativo, nunca solo el borde rojo. */
.campo--error .control,
.campo--error .opciones { border-color: var(--alerta); }
.campo--error .control:focus { border-color: var(--alerta); }

.campo__error,
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.campo__error[hidden],
.aviso[hidden] { display: none; }

.campo__error {
  margin: 0.65rem 0 0;
  color: var(--alerta);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.45;
}
.campo__error svg,
.aviso svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 0.18rem;
  fill: currentColor;
}

/* Aviso de bloque: faltan campos, o el envío no salió */
.aviso {
  margin: 0 0 1.75rem;
  padding: 1.35rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.aviso--error {
  color: var(--alerta);
  background: rgba(193, 18, 31, 0.06);
  border-left: 3px solid var(--alerta);
}
.aviso p { margin-bottom: 1.1rem; }
.aviso .boton { margin-top: 0.25rem; }

/* --- Envío ---------------------------------------------------------------- */
.formulario__pie { margin-top: 2.75rem; }
.formulario__pie .campo__nota { margin-top: 0.9rem; }

/* Mientras manda: el botón se apaga, pero sin perder contraste. */
.boton[disabled] {
  background: var(--texto-tenue-claro);
  border-color: transparent;
  color: var(--crema);
  cursor: progress;
}

/* --- Acuse de recibo ------------------------------------------------------ */
/* Confirma que llegó. NO es un diagnóstico: ese lo manda una persona. */
.acuse {
  margin-top: 2.75rem;
  padding: 2.5rem 2rem;
  background: rgba(22, 139, 81, 0.07);
  border-left: 3px solid var(--acento);
  max-width: 40rem;
}
.acuse[hidden] { display: none; }
.acuse:focus { outline: none; }
.acuse:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.acuse .entrada { margin: 1.35rem 0 2.25rem; }

/* --------------------------------------------------------------------------
   14. ESCRITORIO
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  :root {
    --margen-lateral: 2.5rem;
    --aire-seccion: 6.5rem;
    --logo-ancho: 132px;
    --logo-alto: 37px;
    --area-proteccion: 24px;
    --alto-barra: 5.25rem;
  }

  /* Con espacio de sobra, el botón vuelve a un solo renglón. */
  .encabezado .boton {
    max-width: none;
    padding: 0.6rem 1.1rem;
    font-size: 0.74rem;
  }
  .encabezado__acciones { gap: 0.75rem; }

  .rejilla--tres { grid-template-columns: repeat(3, 1fr); }
  .rejilla--dos  { grid-template-columns: repeat(2, 1fr); }
  /* Cuatro pasos en tableta: dos y dos. A cuatro columnas cada tarjeta se
     quedaría en unos 150px y el nombre del paso partiría en tres renglones. */
  .rejilla--cuatro { grid-template-columns: repeat(2, 1fr); }
  .tarjeta { padding: 2.5rem 2.25rem; }

  /* Las dos ramas, lado a lado y del mismo ancho exacto: los dos filetes
     arrancan a la misma altura y miden lo mismo. */
  .espejo { grid-template-columns: 1fr 1fr; gap: 4rem; }

  /* La fase se abre en tres columnas: número · nombre · explicación. */
  .fase { gap: 2rem; padding: 1.9rem 0; }
  .fase__num { width: 3rem; font-size: 0.95rem; }
  .fase__cuerpo {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2rem;
    align-items: baseline;
  }
  .fase__titulo { margin: 0; font-size: 1.1rem; }

  .incluye { columns: 2; column-gap: 3rem; }
  .incluye li { break-inside: avoid; }

  /* Tableta: la marca ocupa el ancho completo y las dos columnas de enlaces
     se reparten debajo. A tres columnas aquí, el tagline quedaría en una
     tira de seis renglones. */
  .pie__rejilla {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  .pie__marca { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  /* En escritorio la barra es una rejilla de tres zonas con laterales
     iguales: es lo único que deja el menú centrado de verdad. */
  .hamburguesa { display: none; }

  .encabezado__barra {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
  }

  .menu {
    display: block;
    flex: 0 1 auto;
    order: 0;
    width: auto;
    border-top: 0;
    background: transparent;
  }
  .menu ul {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    padding: 0;
  }
  .menu a {
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .menu a[aria-current="page"] { border-bottom-color: var(--acento); }

  .portada h1 { max-width: 18ch; }

  /* Ya hay ancho para los cuatro pasos en una sola fila. Al partirse en
     cuatro, la columna se angosta y el relleno lateral cede un poco para que
     el nombre del paso siga cabiendo en un renglón. */
  .rejilla--cuatro { grid-template-columns: repeat(4, 1fr); }
  .paso { padding: 2.25rem 1.6rem; }

  /* Escritorio: las tres zonas en una sola fila. La marca pesa más que las
     columnas de enlaces —lleva el logo y el tagline— y por eso se lleva la
     fracción y media. */
  .pie__rejilla {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 0;
    /* Los dos filetes tienen que medir exactamente lo mismo: son la
       cuadrícula, y dos rayas de distinto largo se leen como un descuido.
       Estirar las columnas a la altura de la fila es lo que lo garantiza,
       sin importar cuántos enlaces lleve cada una. */
    align-items: stretch;
  }
  .pie__marca { grid-column: auto; padding-right: 4rem; }

  /* El filete vertical es la misma cuadrícula del resto del sitio, puesta a
     ordenar el cierre. Va a la izquierda de cada columna de enlaces, nunca
     alrededor: un recuadro completo convertiría el pie en una tabla. */
  .pie__columna {
    border-left: 1px solid var(--linea-oscura);
    padding-left: 3rem;
  }
}