/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

/* ============================================================
   MAGNUSRISE — SITIO WEB
   ============================================================
   Sistema de tokens. Ningún color ni familia tipográfica se
   escribe suelto en el documento: todo pasa por una variable.
   Si hace falta un valor nuevo, se declara aquí primero.

   Paleta y tipografía tomadas de memoriaagentes/BRAND.md.
   ============================================================ */

:root {
  /* ---- Superficies ---- */
  --bg: #080816;
  --bg-alt: #0c0d1c;
  --bg-slate: #1e2e45;
  --bg-slate-alt: #253d5e;
  --bg-panel: rgba(255, 255, 255, 0.028);
  --bg-panel-alt: rgba(255, 255, 255, 0.045);

  /* ---- Marca ---- */
  --verde: #00ff88;
  --verde-hondo: #00c46a;
  --verde-tenue: rgba(0, 255, 136, 0.11);
  --verde-linea: rgba(0, 255, 136, 0.32);
  --hielo: #a8c4e0;

  /* ---- Texto ---- */
  --tinta: #ffffff;
  --tinta-2: rgba(255, 255, 255, 0.74);
  --tinta-3: rgba(255, 255, 255, 0.55);
  --tinta-4: rgba(255, 255, 255, 0.38);

  /* ---- Líneas ---- */
  --linea: rgba(255, 255, 255, 0.1);
  --linea-tenue: rgba(255, 255, 255, 0.055);
  --linea-fuerte: rgba(255, 255, 255, 0.2);

  /* ---- WhatsApp ---- */
  --wa: #25d366;
  --wa-hondo: #1da851;

  /* ---- Tipografía ---- */
  --fuente: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Escala enumerada. Cada tamaño del sitio cae en un escalón
     de esta rampa — agregar uno es una decisión, no un atajo. */
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-48: 3rem;

  /* Escalones fluidos — solo para los dos niveles de display. */
  --t-display: clamp(2.5rem, 6.2vw, 4.6rem);
  --t-titulo: clamp(1.85rem, 3.6vw, 2.85rem);

  /* ---- Ritmo vertical ---- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --e-8: 8rem;

  --ancho: 1180px;
  --ancho-texto: 62ch;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE
   ============================================================ */

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

html,
body {
  overflow-x: clip; /* clip, nunca hidden: hidden rompe position:sticky */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--tinta-2);
  font-family: var(--fuente);
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Los títulos van SIEMPRE en redonda. El énfasis lo carga el
   peso y el verde de marca, no la itálica. */
h1,
h2,
h3,
h4 {
  font-style: normal;
  margin: 0;
  color: var(--tinta);
  letter-spacing: -0.022em;
  line-height: 1.14;
  /* break-word en vez de anywhere: parte solo cuando una palabra de
     verdad no cabe, en vez de cortar a mitad de palabra sin necesidad. */
  overflow-wrap: break-word;
  min-width: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

::selection {
  background: var(--verde);
  color: var(--bg);
}

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

/* ============================================================
   ESTRUCTURA
   ============================================================ */

.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--e-3);
}

.seccion {
  padding-block: var(--e-7);
  border-top: 1px solid var(--linea-tenue);
}

.seccion--sin-linea {
  border-top: none;
}

/* Encabezado colgante: el título flota en aire propio sobre la
   sección, con la etiqueta encima y no al costado. */
/* La medida se define en cada elemento de texto, nunca en el
   contenedor: `ch` depende del tamaño de fuente del elemento donde
   se declara, así que ponerlo en el padre encoge los títulos grandes
   a la medida del cuerpo. */
.cabecera {
  margin-bottom: var(--e-6);
}

.etiqueta {
  display: block;
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: var(--e-2);
}

.cabecera h2 {
  max-width: 21ch;
  font-size: var(--t-titulo);
  font-weight: 700;
}

.cabecera p {
  max-width: 48ch;
  margin-top: var(--e-3);
  color: var(--tinta-3);
  font-size: var(--t-18);
  line-height: 1.65;
}

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

/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 22, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-tenue);
}

.nav__fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: 72px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.marca img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.marca span {
  font-size: var(--t-16);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--tinta);
  white-space: nowrap;
}

.nav__enlaces {
  display: flex;
  gap: var(--e-4);
  margin-left: auto;
}

.nav__enlaces a {
  font-size: var(--t-14);
  font-weight: 500;
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s var(--curva);
}

.nav__enlaces a:hover {
  color: var(--tinta);
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap; /* nunca dos líneas en un clickable */
  cursor: pointer;
  transition:
    transform 0.18s var(--curva),
    background 0.18s var(--curva),
    border-color 0.18s var(--curva);
}

.btn:active {
  transform: translateY(1px);
}

/* El CTA principal es sólido y grande: es LA acción de la página. */
.btn--wa {
  background: var(--wa);
  color: #04220f;
  font-weight: 700;
}

.btn--wa:hover {
  background: #2ee771;
}

.btn--linea {
  border-color: var(--linea-fuerte);
  color: var(--tinta);
  background: transparent;
}

.btn--linea:hover {
  border-color: var(--verde);
  color: var(--verde);
}

.btn svg {
  flex-shrink: 0;
}

/* ============================================================
   APERTURA
   ============================================================ */

.apertura {
  position: relative;
  padding-block: var(--e-8) var(--e-7);
  overflow: hidden;
}

.apertura__luz {
  position: absolute;
  inset: -30% 30% auto -10%;
  height: 620px;
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(37, 61, 94, 0.5),
    transparent 62%
  );
  pointer-events: none;
}

.apertura__contenido {
  position: relative;
}

/* La medida va sobre el h1, no sobre el contenedor: `ch` se calcula
   con el tamaño de fuente del propio elemento, así que 16ch aquí son
   ~16 caracteres del display — no del cuerpo de 16px. */
.apertura h1 {
  max-width: 16ch;
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.apertura__bajada {
  max-width: 54ch;
  margin-top: var(--e-4);
  font-size: var(--t-20);
  line-height: 1.6;
  color: var(--tinta-2);
}

.apertura__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.apertura__nota {
  margin-top: var(--e-3);
  font-size: var(--t-13);
  color: var(--tinta-4);
}

/* Franja de disciplinas — reemplaza al típico "trusted by". */
.disciplinas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  margin-top: var(--e-6);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-tenue);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--tinta-4);
}

.disciplinas span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.disciplinas span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--verde);
  flex-shrink: 0;
}

/* ============================================================
   DIAGNÓSTICO — preguntas de dolor
   ============================================================ */

.diagnostico {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 78ch;
  border-top: 1px solid var(--linea-tenue);
}

.diagnostico li {
  list-style: none;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea-tenue);
  font-size: var(--t-18);
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.5;
  display: flex;
  gap: var(--e-2);
}

.diagnostico li::before {
  content: "—";
  color: var(--verde);
  flex-shrink: 0;
}

.diagnostico ~ .veredicto {
  max-width: var(--ancho-texto);
  margin-top: var(--e-5);
  font-size: var(--t-18);
  color: var(--tinta-2);
  line-height: 1.7;
}

.veredicto strong {
  color: var(--tinta);
  font-weight: 600;
}

/* ============================================================
   QUÉ ES MAGNUSRISE — definición
   ============================================================ */

.definicion {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}

.definicion__cuerpo p + p {
  margin-top: var(--e-3);
}

.definicion__cuerpo p {
  font-size: var(--t-18);
  line-height: 1.75;
  color: var(--tinta-2);
}

.definicion__cuerpo strong {
  color: var(--tinta);
  font-weight: 600;
}

.ficha {
  padding: var(--e-4);
  background: var(--bg-panel);
  border: 1px solid var(--linea-tenue);
  border-radius: 12px;
}

.ficha dl {
  margin: 0;
  display: grid;
  gap: var(--e-3);
}

.ficha dt {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-4);
  margin-bottom: 4px;
}

.ficha dd {
  margin: 0;
  font-size: var(--t-15);
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   SERVICIOS — lista asimétrica, no tarjetas
   ============================================================ */

.servicio {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: var(--e-5);
  padding-block: var(--e-5);
  border-top: 1px solid var(--linea-tenue);
}

.servicio:last-child {
  border-bottom: 1px solid var(--linea-tenue);
}

.servicio__num {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde);
  margin-bottom: var(--e-2);
}

.servicio h3 {
  font-size: var(--t-28);
  font-weight: 700;
}

.servicio__para {
  margin-top: var(--e-2);
  font-size: var(--t-14);
  color: var(--tinta-4);
}

.servicio__desc {
  font-size: var(--t-17, 1.0625rem);
  line-height: 1.72;
  color: var(--tinta-2);
}

.servicio__lista {
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.servicio__lista li {
  list-style: none;
  padding-left: 22px;
  position: relative;
  font-size: var(--t-15);
  color: var(--tinta-3);
  line-height: 1.55;
}

.servicio__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--verde);
}

/* ============================================================
   DIFERENCIADORES — comparación
   ============================================================ */

.comparacion {
  border: 1px solid var(--linea-tenue);
  border-radius: 12px;
  overflow: hidden;
}

.comparacion__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--linea-tenue);
}

.comparacion__fila:last-child {
  border-bottom: none;
}

.comparacion__cab {
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--bg-panel);
}

.comparacion__cab--otros {
  color: var(--tinta-4);
}

.comparacion__cab--magnus {
  color: var(--verde);
  border-left: 1px solid var(--linea-tenue);
}

.comparacion__celda {
  padding: var(--e-3);
  font-size: var(--t-15);
  line-height: 1.6;
}

.comparacion__celda--otros {
  color: var(--tinta-4);
}

.comparacion__celda--magnus {
  color: var(--tinta);
  font-weight: 500;
  border-left: 1px solid var(--linea-tenue);
  background: rgba(0, 255, 136, 0.028);
}

/* ============================================================
   CASOS Y TESTIMONIOS
   ============================================================ */

.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e-3);
}

.caso {
  display: flex;
  flex-direction: column;
  padding: var(--e-4);
  background: var(--bg-panel);
  border: 1px solid var(--linea-tenue);
  border-radius: 12px;
}

.caso__rubro {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: var(--e-2);
}

.caso__cita {
  font-size: var(--t-16);
  line-height: 1.65;
  color: var(--tinta);
  margin: 0;
}

.caso__cita::before {
  content: "\201C";
}

.caso__cita::after {
  content: "\201D";
}

.caso__firma {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-tenue);
  font-size: var(--t-13);
  color: var(--tinta-4);
}

.caso__firma strong {
  display: block;
  color: var(--tinta-2);
  font-weight: 600;
  font-size: var(--t-14);
}

.caso__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-3);
}

.caso__cifra {
  min-width: 0;
}

.caso__cifra b {
  display: block;
  font-size: var(--t-24);
  font-weight: 700;
  color: var(--verde);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.caso__cifra span {
  font-size: var(--t-12);
  color: var(--tinta-4);
}

/* Marca del espacio reservado hasta que se carguen casos reales. */
.caso--vacante {
  border-style: dashed;
  border-color: var(--linea);
  background: transparent;
}

.caso--vacante .caso__cita {
  color: var(--tinta-4);
  font-style: italic;
}

.caso--vacante .caso__cita::before,
.caso--vacante .caso__cita::after {
  content: "";
}

/* ============================================================
   MUESTRA DE TRABAJO

   Nada de cromo de navegador dibujado a mano (barra de URL falsa,
   semáforo de puntos): es uno de los tells más delatores. El sitio
   real dentro de un marco con línea fina y su enlace de verdad.
   ============================================================ */

.muestra {
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-alt);
}

.muestra__marco {
  position: relative;
  width: 100%;
  /* Alto proporcional: mantiene la ventana estable mientras carga
     el iframe y evita el salto de layout. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-slate);
}

/* El iframe se renderiza a un ancho virtual y se reduce hasta calzar
   exacto en el marco. El ancho y la escala los fija sitio.js según el
   viewport: en escritorio muestra la composición de escritorio; en
   móvil muestra la versión móvil del propio sitio, que es legible en
   vez de una miniatura ilegible del escritorio.
   Los valores de aquí son el punto de partida antes de que corra JS. */
.muestra__sitio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform: scale(0.5);
  transform-origin: top left;
}

.muestra__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--e-3);
  border-top: 1px solid var(--linea-tenue);
}

.muestra__pie strong {
  display: block;
  font-size: var(--t-15);
  font-weight: 600;
  color: var(--tinta);
}

.muestra__pie span {
  font-size: var(--t-13);
  color: var(--tinta-4);
}

.muestra__enlace {
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--verde);
  text-decoration: none;
  white-space: nowrap;
}

.muestra__enlace:hover {
  text-decoration: underline;
}

.muestra__notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--e-2) var(--e-4);
  margin: var(--e-4) 0 0;
  padding: 0;
}

.muestra__notas li {
  list-style: none;
  padding-left: 22px;
  position: relative;
  font-size: var(--t-15);
  color: var(--tinta-3);
  line-height: 1.55;
}

.muestra__notas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--verde);
}

@media (max-width: 900px) {
  /* En móvil el marco se hace vertical: el sitio embebido pasa a su
     propia versión móvil y necesita alto, no ancho. */
  .muestra__marco {
    aspect-ratio: 3 / 4;
  }
}

/* ============================================================
   PROCESO
   ============================================================ */

.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--e-4);
  counter-reset: paso;
}

.paso {
  padding-top: var(--e-3);
  border-top: 2px solid var(--verde-linea);
}

.paso__num {
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde);
  margin-bottom: var(--e-1);
}

.paso h3 {
  font-size: var(--t-18);
  font-weight: 600;
  margin-bottom: var(--e-1);
}

.paso p {
  font-size: var(--t-14);
  color: var(--tinta-3);
  line-height: 1.6;
}

/* ============================================================
   PREGUNTAS
   ============================================================ */

.faq {
  max-width: 82ch;
  border-top: 1px solid var(--linea-tenue);
}

.faq details {
  border-bottom: 1px solid var(--linea-tenue);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  padding-block: var(--e-3);
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  line-height: 1.45;
}

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

.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--verde);
  font-weight: 400;
  font-size: var(--t-24);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.22s var(--curva);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding-bottom: var(--e-3);
  max-width: var(--ancho-texto);
  color: var(--tinta-3);
  font-size: var(--t-16);
  line-height: 1.7;
}

/* ============================================================
   CIERRE
   ============================================================ */

.cierre {
  position: relative;
  padding-block: var(--e-8);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--linea-tenue);
}

.cierre__luz {
  position: absolute;
  inset: auto 0 -60% 0;
  height: 520px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(0, 255, 136, 0.12),
    transparent 66%
  );
  pointer-events: none;
}

.cierre__contenido {
  position: relative;
}

.cierre h2 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--t-titulo);
  font-weight: 700;
}

.cierre p {
  max-width: 52ch;
  margin: var(--e-3) auto 0;
  font-size: var(--t-18);
  color: var(--tinta-3);
}

.cierre .btn {
  margin-top: var(--e-5);
  padding: 18px 34px;
  font-size: var(--t-18);
}

.cierre__nota {
  margin-top: var(--e-3);
  font-size: var(--t-13);
  color: var(--tinta-4);
}

/* ============================================================
   PIE
   ============================================================ */

.pie {
  padding-block: var(--e-5);
  border-top: 1px solid var(--linea-tenue);
  background: var(--bg-alt);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
}

.pie__lema {
  font-size: var(--t-14);
  color: var(--tinta-4);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.pie__enlaces a {
  font-size: var(--t-14);
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
}

.pie__enlaces a:hover {
  color: var(--verde);
}

/* ============================================================
   BOTÓN FLOTANTE
   ============================================================ */

.wa-flota {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 100px;
  background: var(--wa);
  color: #04220f;
  font-size: var(--t-15);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.28s var(--curva),
    transform 0.28s var(--curva);
}

.wa-flota.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ============================================================
   APARICIÓN AL SCROLL
   ============================================================ */

.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--curva),
    transform 0.6s var(--curva);
}

.aparece.dentro {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .aparece {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   RESPONSIVE — verificado a 320 / 375 / 414 / 768
   ============================================================ */

@media (max-width: 900px) {
  .definicion,
  .servicio {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
  }

  .servicio {
    padding-block: var(--e-4);
  }

  /* Con seis enlaces, el espaciado de escritorio ya no cabe en tablet.
     Se aprieta antes de llegar al punto donde el menú se oculta. */
  .nav__enlaces {
    gap: var(--e-2);
  }

  .nav__enlaces a {
    font-size: var(--t-13);
  }
}

@media (max-width: 720px) {
  :root {
    --e-7: 4rem;
    --e-8: 5rem;
  }

  .nav__enlaces {
    display: none;
  }

  .apertura h1 {
    max-width: none;
  }

  .apertura__acciones .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .comparacion__fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparacion__cab--magnus,
  .comparacion__celda--magnus {
    border-left: none;
    border-top: 1px solid var(--linea-tenue);
  }

  .pie__fila {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .wa-flota span {
    display: none; /* en pantallas muy angostas queda solo el ícono */
  }

  .wa-flota {
    padding: 14px;
  }

  .diagnostico li,
  .cabecera p,
  .definicion__cuerpo p {
    font-size: var(--t-16);
  }

  /* El texto del botón no puede partirse en dos líneas (regla dura),
     así que a 320px se achica el botón hasta que el rótulo entre
     completo dentro del ancho disponible. */
  .btn,
  .cierre .btn {
    padding: 14px 16px;
    font-size: var(--t-13);
    gap: 8px;
  }

  .btn svg,
  .cierre .btn svg {
    width: 17px;
    height: 17px;
  }

  .env {
    padding-inline: var(--e-2);
  }
}