/* Estilo común del sitio.
   Proporciones tomadas del sistema de diseño de ALIANN: letra de lectura de 16 px, títulos con tope,
   botones medianos de esquinas suaves, tarjetas con borde fino y sombra leve, bloques que alternan blanco y un tinte casi invisible.
   Página blanca, un solo color de acento (verde agua). Sin líneas de fondo. */

:root {
  /* Colores: para cambiar el acento, basta con editar estas tres líneas */
  --acento: #0b7d78;
  --acento-oscuro: #08635f;
  --acento-suave: #e4f3f2;
  --acento-rgb: 11 125 120;
  /* Tonos del acento sobre fondo oscuro y para detalles; cada página de marca los reemplaza con su color */
  --acento-claro: #b5ebe6;
  --acento-medio: #7fd4cf;
  --acento-hover: #a3e3df;
  --sobre-oscuro: #e6f3f2;
  --marca: var(--acento);
  --amarillo: #ffc400;

  --tinta: #0f1a1b;
  --apagado: #46585a;
  --tenue: #5a6c6e;
  --fondo: #ffffff;
  --tinte: #f6f9f9;
  --superficie: #f6f9f9;
  --borde: #dde7e7;
  --borde-fuerte: #b9c9c9;

  --titulo: 'Poppins', 'Nunito Sans', system-ui, sans-serif;
  --texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio-s: 8px;
  --radio: 16px;
  --radio-l: 22px;
  --sombra-1: 0 1px 2px rgb(15 30 45 / 0.06);
  --sombra-2: 0 8px 24px -8px rgb(15 30 45 / 0.16);

  --margen: clamp(20px, 4vw, 64px);
  --ancho: 1360px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--titulo); margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.etiqueta { font: 600 0.75rem/1.2 var(--titulo); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }

/* Títulos: con tope de tamaño */
.h1 { font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: 1.08; letter-spacing: -0.02em; }
.h2 { font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
.h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.005em; }
.bajada { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; color: var(--apagado); max-width: 38em; }

/* Botones: medianos, esquinas suaves */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.25rem; border-radius: var(--radio-s); border: 1px solid transparent;
  font: 700 0.875rem/1.2 var(--texto); text-decoration: none; cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.boton:hover { transform: translateY(-1px); }
.boton-primario { background: var(--acento); color: #fff; }
.boton-primario:hover { background: var(--acento-oscuro); box-shadow: 0 8px 20px -8px rgb(var(--acento-rgb) / 0.5); }
.boton-claro { background: #fff; color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-claro:hover { border-color: var(--tinta); }
.boton-chico { padding: 0.55rem 1rem; font-size: 0.8125rem; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.encabezado-fila { display: flex; align-items: center; gap: 1.5rem; min-height: 5.5rem; }
.logo-enlace { display: inline-flex; flex: none; }
.logo-enlace img { height: 3.6rem; width: auto; }
.menu-principal { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.menu-principal a { text-decoration: none; font-weight: 600; font-size: 0.875rem; color: var(--apagado); transition: color 0.16s; }
.menu-principal a:hover { color: var(--acento); }
.menu-principal a:not(.boton), .menu-boton { padding-block: 0.6rem; }
.menu-principal a:not(.boton)[aria-current="page"], .menu-boton[aria-current="page"] { color: var(--acento); box-shadow: inset 0 -2px 0 var(--acento); }
.menu-principal .boton { color: #fff; }
.menu-principal .boton[aria-current="page"] { background: var(--acento-oscuro); }
.menu-principal .boton:hover { color: #fff; }
.menu-item { position: relative; }
.menu-boton { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; background: none; border: 0; cursor: pointer; font: 600 0.875rem var(--texto); color: var(--apagado); transition: color 0.16s; }
.menu-boton::after { content: ''; width: 0.4em; height: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12em) rotate(45deg); }
.menu-boton:hover, .menu-item.abierto .menu-boton { color: var(--acento); }
.desplegable { display: none; position: absolute; top: 100%; z-index: 30; padding: 1rem; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-2); }
.menu-item.abierto .desplegable { display: grid; }
.mega { right: -8rem; width: min(56rem, 94vw); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: 1.2rem; }
.mega-grupo { display: grid; gap: 0.25rem; align-content: start; }
.mega-titulo { font: 600 0.75rem/1.2 var(--titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); padding: 0 0.6rem 0.4rem; }
.mega-item:hover { background: var(--acento-suave); }
.mega-item { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.8rem; border-radius: var(--radio-s); text-decoration: none; }
.mega-item { height: 5rem; }
.mega-item img { flex: none; width: 7.5rem; height: 3rem; object-fit: contain; object-position: center; }
.mega-item strong { display: block; font-size: 0.9375rem; color: var(--tinta); }
.mega-item small { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--tenue); font-weight: 400; }
.boton-menu { display: none; min-height: 2.75rem; margin-left: auto; background: #fff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); padding: 0.5rem 0.9rem; font: 700 0.8125rem var(--texto); color: var(--tinta); cursor: pointer; }

/* Portada grande con red de puntos, sin marcas */
.portada { position: relative; overflow: hidden; min-height: max(34rem, calc(100vh - 5.5rem)); min-height: max(34rem, calc(100svh - 5.5rem)); display: grid; align-items: center; background: linear-gradient(135deg, #ffffff 0%, var(--tinte) 100%); }
.red-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.portada::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 52%); }
.portada-contenido { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.portada-texto { display: grid; gap: 1.5rem; justify-items: start; max-width: 46rem; }
.portada-texto .h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); max-width: 11em; }
.portada-texto .bajada { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.boton-grande { padding: 1rem 1.9rem; font-size: 1rem; }

/* Secciones: alternan blanco y tinte, sin líneas */
.seccion { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: 5.5rem; }
.tinte { background: var(--tinte); }
.seccion-cabecera { display: grid; gap: 0.6rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* Tarjetas de marcas */
.grupo { display: grid; gap: 1rem; }
.grupo + .grupo { margin-top: 2.5rem; }
.grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; }
.grupo-titulo h2 { font-weight: 600; font-size: 1.125rem; }
.rejilla { display: grid; gap: 1rem; }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tarjeta-marca {
  display: grid; grid-template-rows: 6rem 1fr auto; gap: 1rem; padding: 1.6rem; min-height: 19rem; cursor: pointer;
  background: #fff; border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-l); box-shadow: var(--sombra-1);
  text-decoration: none; transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.tarjeta-marca:hover { border-color: var(--acento); box-shadow: var(--sombra-2); transform: translateY(-2px); }
.tarjeta-logo { height: 6rem; display: flex; align-items: center; justify-content: center; }
.tarjeta-logo img { max-height: 4.4rem; max-width: 88%; width: auto; object-fit: contain; object-position: center; }
.tarjeta-marca p { color: var(--apagado); font-size: 0.9375rem; line-height: 1.55; text-align: center; align-self: start; }
.tarjeta-ir { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.65rem 1rem; border-radius: var(--radio-s); background: var(--acento); color: #fff; font-weight: 700; font-size: 0.875rem; transition: background-color 0.16s; }
.tarjeta-ir span { transition: transform 0.16s; }
.tarjeta-marca:hover .tarjeta-ir { background: var(--acento-oscuro); }
.tarjeta-marca:hover .tarjeta-ir span { transform: translateX(3px); }

.tarjeta-cta { display: grid; align-content: end; gap: 0.4rem; padding: 1.6rem; min-height: 19rem; border-radius: var(--radio-l); background: var(--acento); color: #fff; text-decoration: none; transition: background-color 0.16s, transform 0.16s; }
.tarjeta-cta:hover { background: var(--acento-oscuro); transform: translateY(-2px); }
.tarjeta-cta strong { font: 600 1.125rem/1.25 var(--titulo); }
.tarjeta-cta span { font-size: 0.875rem; opacity: 0.92; }
.tarjeta-cta b { font-weight: 700; }

/* Cómo trabajamos: bloque oscuro, pasos en lista */

.nota-soporte { margin-top: 1.25rem; color: var(--tenue); font-size: 0.875rem; max-width: 46em; }

.oscura { background: var(--acento-oscuro); color: #fff; }
.oscura .bajada { color: var(--sobre-oscuro); }
.como { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.como-texto { display: grid; gap: 1rem; justify-items: start; }
.etiqueta-linea { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--acento-claro); }
.etiqueta-linea::before { content: ''; width: 2rem; height: 2px; background: currentColor; }
.como-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.como-paso { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radio); }
.como-paso b { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--acento-medio); color: var(--tinta); font: 700 1rem var(--titulo); }
.como-paso h3 { font: 600 1.0625rem/1.3 var(--titulo); }
.como-paso p { margin-top: 0.15rem; color: var(--sobre-oscuro); font-size: 0.9375rem; }

/* Asesor */
.asesor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 5vw, 4.5rem) 0; background: var(--acento-suave); border-radius: 28px; overflow: hidden; }
.asesor-foto { width: 100%; max-width: 21rem; height: auto; display: block; justify-self: center; }
.asesor-texto { display: grid; gap: 0.9rem; justify-items: start; align-self: center; padding-block: clamp(1.25rem, 3vw, 3rem); }
.asesor-cargo { color: var(--acento-oscuro); font-weight: 700; }
.correo { font-weight: 700; word-break: break-word; }

/* Formulario */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contacto-texto { display: grid; gap: 0.9rem; justify-items: start; }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1rem; align-items: start; }
.campo { display: grid; gap: 0.3rem; min-width: 0; align-content: start; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-weight: 700; font-size: 0.9375rem; }
.campo input, .campo select {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid #758a8a; border-radius: var(--radio-s);
  background: #fff; color: var(--tinta); font: 400 1.0625rem/1.4 var(--texto);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.formulario .boton { justify-self: start; padding: 0.95rem 2.2rem; font-size: 1rem; }
.aviso-prueba { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--tenue); }
.confirmacion { grid-column: 1 / -1; padding: 1rem 1.2rem; border-radius: var(--radio); background: var(--acento-suave); color: var(--acento-oscuro); font-weight: 700; }

.aviso-legal { padding: 1rem 1.2rem; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); color: var(--apagado); font-size: 0.875rem; line-height: 1.55; }

/* Pie de página: 4 columnas que calzan con las de la grilla de marcas */
.pie { background: #fff; border-top: 1px solid var(--borde); padding-block: clamp(2.5rem, 4vw, 3.5rem) 1.5rem; }
.pie-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; align-items: start; }
.pie-col { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.pie-logo { height: 2.75rem; width: auto; justify-self: start; }
.pie-col p { color: var(--apagado); font-size: 0.875rem; line-height: 1.55; }
.pie-legal { font-weight: 600; }
.pie-contacto { display: grid; justify-items: start; }
.pie-contacto a { display: inline-block; padding-block: 0.45rem; color: var(--tinta); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pie-contacto a:hover { color: var(--acento); }
.asesor-contacto { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pie-col .pie-h { font: 600 0.75rem/1.2 var(--titulo); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta); }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pie-col a { text-decoration: none; color: var(--apagado); font-size: 0.875rem; transition: color 0.16s; }
.pie-col a:hover { color: var(--acento); }
.pie-somos { display: grid; width: fit-content; justify-self: end; justify-items: stretch; text-align: center; align-content: start; gap: 0.6rem; }
.pie-somos span { color: var(--apagado); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.pie-somos img { width: 0; min-width: 100%; height: auto; }
.pie-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--borde); color: var(--tenue); font-size: 0.8125rem; }

/* Página de texto legal */
.texto-legal { display: grid; gap: 0.9rem; max-width: 46rem; }
.texto-legal h2 { margin-top: 1rem; }
.texto-legal p { color: var(--apagado); }
.texto-legal a { color: var(--acento); font-weight: 700; }

/* Responsive */
@media (max-width: 980px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada-contenido { grid-template-columns: minmax(0, 1fr); }
  .contacto { grid-template-columns: minmax(0, 1fr); }
  .asesor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .como { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .boton-menu { display: inline-block; }
  .menu-principal { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--margen) 1rem; background: #fff; border-bottom: 1px solid var(--borde); box-shadow: var(--sombra-2); }
  .menu-principal.abierto { display: flex; max-height: calc(100vh - 4rem); overflow-y: auto; }
  .menu-principal a { padding: 0.8rem 0 !important; }
  .menu-principal .boton { margin-top: 0.5rem; }
  .encabezado-fila { min-height: 4.5rem; }
  .logo-enlace img { height: 2.9rem; }
  .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
  .asesor { grid-template-columns: minmax(0, 1fr); padding-top: 1.25rem; }
  .asesor-texto { order: -1; padding-bottom: 0; }
  .asesor-foto { max-width: 15rem; }
  .portada { min-height: 32rem; }
  .portada::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%); }
  .menu-boton { padding: 0.7rem 0; width: 100%; justify-content: space-between; }
  .desplegable { position: static; width: auto; border: 0; box-shadow: none; padding: 0 0 0.5rem 0.5rem; }
  .mega { grid-template-columns: minmax(0, 1fr); }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .pie-grid { grid-template-columns: minmax(0, 1fr); }
  .pie-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* WhatsApp: icono en los botones y botón flotante siempre visible a la derecha */
.icono-wa { width: 1.2em; height: 1.2em; flex: none; }
.wa-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--acento); color: #fff; box-shadow: 0 10px 24px -6px rgb(var(--acento-rgb) / 0.55); text-decoration: none; transition: background-color 0.16s, transform 0.16s; }
.wa-flotante .icono-wa { width: 1.9rem; height: 1.9rem; }
.wa-flotante:hover { background: var(--acento-oscuro); transform: scale(1.08); }
.wa-flotante::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acento); opacity: 0; animation: wa-pulso 3.2s ease-out infinite; }
@keyframes wa-pulso { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 720px) { .wa-flotante { right: 0.9rem; bottom: 0.9rem; width: 3.3rem; height: 3.3rem; } }
@media (prefers-reduced-motion: reduce) { .wa-flotante::before { animation: none; } }

/* Formulario: mensajes de validación */
.campo-msg:empty { display: none; }
.campo-msg { font-size: 0.875rem; line-height: 1.3; color: var(--tenue); }
.campo-msg.ok { color: var(--acento); font-weight: 700; }
.campo-msg.error { color: #b3261e; font-weight: 600; }
.campo input.invalido, .campo select.invalido { border-color: #b3261e; box-shadow: 0 0 0 3px rgb(179 38 30 / 0.12); }

/* Contacto: tarjeta grande de WhatsApp */
.wa-tarjeta { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 26rem; padding: 1.1rem 1.25rem; margin-top: 0.5rem; background: var(--acento); color: #fff; border-radius: var(--radio); text-decoration: none; box-shadow: 0 14px 30px -14px rgb(var(--acento-rgb) / 0.65); transition: background-color 0.16s, transform 0.16s; }
.wa-tarjeta:hover { background: var(--acento-oscuro); transform: translateY(-2px); }
.wa-tarjeta-icono { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.wa-tarjeta-icono .icono-wa { width: 1.8rem; height: 1.8rem; }
.wa-tarjeta-texto { display: grid; gap: 0.1rem; flex: 1; }
.wa-tarjeta-texto strong { font: 600 1.0625rem var(--titulo); }
.wa-tarjeta-texto small { font-size: 0.8125rem; opacity: 0.9; }
.wa-tarjeta-flecha { font-size: 1.3rem; font-weight: 700; transition: transform 0.16s; }
.wa-tarjeta:hover .wa-tarjeta-flecha { transform: translateX(4px); }

/* Saltar al contenido (teclado) */
.saltar { position: absolute; left: 0.75rem; top: -4rem; z-index: 100; padding: 0.7rem 1.1rem; background: #fff; color: var(--acento-oscuro); font-weight: 700; border: 2px solid var(--acento); border-radius: var(--radio-s); text-decoration: none; transition: top 0.16s; }
.saltar:focus { top: 0.75rem; }

/* Variante clara de los bloques de pasos (fondo blanco) */

/* Agenda opcional después del formulario */
.formulario .agenda-bloque { grid-column: 1 / -1; display: grid; gap: 1.1rem; }
.agenda-pregunta { display: grid; gap: 0.6rem; justify-items: start; padding: 1.4rem; background: var(--tinte); border: 1px solid var(--borde); border-radius: var(--radio); }
.agenda-pregunta p { color: var(--apagado); }
.agenda-pregunta .acciones { margin-top: 0.4rem; }
.agenda-caja { display: grid; gap: 0.6rem; }
.agenda-marco { width: 100%; height: 44rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.agenda-enlace { font-weight: 700; color: var(--acento); }
.agenda-prueba { padding: 1.2rem 1.4rem; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio); color: var(--apagado); }

/* Correos largos: que se corten antes de salirse de la pantalla en celulares chicos, y con área cómoda para tocarlos */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.correo { display: inline-block; padding-block: 0.55rem; }

/* Celulares muy angostos: el logo se achica un poco para que el botón "Menú" no se salga de la pantalla */
@media (max-width: 400px) {
  .encabezado-fila { gap: 1rem; }
  .logo-enlace { flex: 0 1 auto; min-width: 0; }
  .logo-enlace img { height: 2.5rem; max-width: 100%; object-fit: contain; object-position: left center; }
}

/* Formulario: aviso si el envío falla */
.form-error { grid-column: 1 / -1; margin: 0; padding: 0.8rem 1rem; border-radius: var(--radio-s); background: #fdecea; color: #8a1c14; font-weight: 600; }