/* ==========================================================================
   MEGAVAN LOGÍSTICA
   ==========================================================================
   Índice
     1.  Las fuentes
     2.  Los colores y las medidas
     3.  Lo básico
     4.  Los botones
     5.  La cabecera
     6.  La portada y LA LÍNEA DEL DÍA
     7.  Los encabezados de sección
     8.  Las dos ventanas
     9.  Los tres pasos
     10. El cuestionario de cotización
     11. Las preguntas
     12. El cierre y el pie
     13. Los anchos pequeños
     14. Menos movimiento
   ========================================================================== */

/* ==========================================================================
   1. LAS FUENTES
   ==========================================================================
   Archivo y Archivo Black, las dos con licencia SIL Open Font License, que
   permite servirlas desde aquí. Se sirven desde el propio sitio y no desde
   Google: así no se avisa a un tercero cada vez que alguien entra, no hay una
   conexión más que pueda fallar, y la página no depende de que otro esté en
   pie.

   Archivo es una fuente VARIABLE: un solo archivo lleva los pesos de 400 a
   900. Por eso los cuatro pesos que se pidieron a Google apuntaban al mismo
   archivo. Con `font-weight: 100 900` se declara ese recorrido entero.

   `unicode-range` deja que el navegador baje el trozo que necesita. El
   español vive en el bloque `latin` —la ñ es U+00F1 y las tildes están por
   debajo de U+00FF—, así que el `latin-ext` solo se baja si aparece algo de
   fuera.
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. LOS COLORES Y LAS MEDIDAS
   ==========================================================================
   LA PALETA SALE DEL LOGOTIPO, NO DE UN CATÁLOGO.
   Se leyeron los colores del propio archivo y estos son los que más superficie
   ocupan:
       #3C3C3C  el gris de «Mega»
       #00A8E4  el azul de la van y de «Van»
       #6C6C6C  el gris de «LOGÍSTICA»
       #FA8C1E  el naranja de la van
   (El encargo decía «azul #1E88E5 aproximado». El medido es #00A8E4: más cian,
   más brillante. Se usa el medido.)

   EL COLOR SIGNIFICA ALGO, Y SIEMPRE LO MISMO:
       azul    → la colecta, lo que se recoge
       naranja → la ruta, lo que se entrega
   En la línea del día, en los rótulos, en los botones y en el cuestionario.

   SOBRE EL CONTRASTE
   ------------------
   El azul y el naranja de la marca son brillantes y sobre el hueso no llegan
   al contraste mínimo para texto (4.5:1). Por eso hay dos versiones de cada
   uno: el vivo para formas y filetes, y uno hondo para texto. Medido con la
   fórmula del contraste:
       #00A8E4 sobre hueso .... 2,0:1   no sirve para texto
       #00679E sobre hueso .... 6,1:1   texto normal, correcto
       #FA8C1E sobre hueso .... 2,3:1   no sirve para texto
       #A85400 sobre hueso .... 4,7:1   texto normal, correcto
       #FA8C1E sobre tinta .... 7,1:1   correcto: sobre oscuro sí vale el vivo
       #00A8E4 sobre tinta .... 6,7:1   correcto
   ========================================================================== */
:root {
  /* De la marca */
  --azul: #00a8e4;
  --azul-hondo: #00679e;
  --naranja: #fa8c1e;
  --naranja-hondo: #a85400;
  --gris-marca: #6c6c6c;

  /* Del sitio */
  --tinta: #0e1526;
  --tinta-suave: #3d4a63;
  --hueso: #f4f1ea;
  --hueso-hondo: #e8e3d8;
  --blanco: #fff;
  --gris: #5c6472;
  --filete: rgba(14, 21, 38, 0.14);
  --filete-claro: rgba(244, 241, 234, 0.18);

  /* Tipografía */
  --display: 'Archivo Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
    sans-serif;
  --texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radio: 4px;
  --ancho: 1120px;
}

/* ==========================================================================
   3. LO BÁSICO
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* La cabecera se pega arriba, así que los saltos de sección tienen que
     dejar sitio o el título queda debajo. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--hueso);
  font-synthesis-weight: none;
}

h1,
h2,
h3,
p,
figure,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

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

b,
strong {
  font-weight: 700;
}

/* Los números de hora se leen mejor si todos ocupan lo mismo. */
.tramo__horas,
.ventana__horas,
.linea__marca,
.pie__horas,
.pie__tel {
  font-variant-numeric: tabular-nums;
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

.envoltura--estrecha {
  max-width: 760px;
}

/*
 * El enlace de saltar: invisible hasta que alguien llega con el tabulador.
 *
 * Se esconde RECORTÁNDOLO, no mandándolo a `left: -9999px`. Sacarlo de la
 * pantalla por la izquierda funciona, pero deja un elemento fuera del área
 * visible que algunas herramientas cuentan como desborde —y en una página con
 * scroll horizontal, un elemento a 9999 px a la izquierda puede llegar a
 * provocarlo—. Recortado a un píxel no ocupa sitio ni engaña a nadie.
 */
.saltar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus {
  width: auto;
  height: auto;
  padding: 13px 20px;
  margin: 0;
  clip-path: none;
  top: 10px;
  left: 10px;
  background: var(--tinta);
  color: var(--hueso);
  border-radius: var(--radio);
}

/* Foco visible y con el color de la marca. Sin esto, quien navega con el
   teclado se pierde. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   4. LOS BOTONES
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--texto);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.boton--grande {
  padding: 15px 26px;
  font-size: 1rem;
}

/* El botón de WhatsApp es el único verde del sitio. Se sale de la paleta a
   propósito: es donde el cliente reconoce la aplicación, y confundirlo con un
   botón cualquiera cuesta envíos. */
.boton--wa {
  background: #1faa53;
  color: #fff;
}
.boton--wa:hover {
  background: #188a43;
}

.boton:not(.boton--wa) {
  background: var(--tinta);
  color: var(--hueso);
}
.boton:not(.boton--wa):hover {
  background: #1c2942;
}

.boton--atras {
  background: transparent !important;
  color: var(--tinta) !important;
  border-color: var(--filete) !important;
}

/*
 * LOS BOTONES SOBRE EL FONDO OSCURO.
 *
 * El botón normal es tinta sobre hueso. Dentro de la portada, que ya es tinta,
 * quedaba tinta sobre tinta: se leía el texto suelto, sin botón. Se vio en la
 * primera captura.
 *
 * Dentro de la portada el botón se invierte —hueso sobre tinta—, que además es
 * lo que corresponde: allí el fondo es oscuro y el botón tiene que destacar.
 * El de WhatsApp se queda verde, que es su color en todo el sitio.
 */
.portada .boton:not(.boton--wa) {
  background: var(--hueso);
  color: var(--tinta);
}
.portada .boton:not(.boton--wa):hover {
  background: var(--blanco);
}

.icono-wa {
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9s-3.5-3.2-3.6-3.4c-.1-.2-.8-1.2-.8-2.2s.5-1.5.7-1.7c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.4.5c-.2.2-.3.3-.1.6.2.3.7 1.2 1.5 1.9 1 .9 1.5 1 1.7 1.1.2.1.4 0 .5-.1l.8-.9c.2-.2.3-.2.5-.1l1.6.8c.3.1.4.2.4.3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9s-3.5-3.2-3.6-3.4c-.1-.2-.8-1.2-.8-2.2s.5-1.5.7-1.7c.2-.2.4-.3.6-.3h.4c.2 0 .4 0 .6.4l.7 1.7c.1.2 0 .4-.1.5l-.4.5c-.2.2-.3.3-.1.6.2.3.7 1.2 1.5 1.9 1 .9 1.5 1 1.7 1.1.2.1.4 0 .5-.1l.8-.9c.2-.2.3-.2.5-.1l1.6.8c.3.1.4.2.4.3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ==========================================================================
   5. LA CABECERA
   ==========================================================================
   Clara, y no oscura, por una razón concreta: el logotipo tiene «Mega» en gris
   oscuro y «LOGÍSTICA» en gris medio. Sobre un fondo oscuro desaparecerían las
   dos. Se podría recolorear el logotipo, pero eso es rediseñar la marca y nadie
   lo ha pedido. Así que la cabecera es clara y el logotipo se ve entero.
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hueso);
  border-bottom: 1px solid var(--filete);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding-block: 10px;
}

.marca {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.marca img {
  width: auto;
  /* 52 px y no 42: el logotipo lleva tres renglones —la van, «MegaVan» y
     «LOGÍSTICA»— y por debajo de 50 la tercera línea no se lee. */
  height: 52px;
  flex: none;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.menu a {
  padding: 9px 13px;
  color: var(--tinta-suave);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radio);
}
.menu a:hover {
  color: var(--tinta);
  background: var(--hueso-hondo);
}

.cabecera .boton--wa {
  padding: 10px 16px;
  font-size: 0.88rem;
}

/* ==========================================================================
   6. LA PORTADA Y LA LÍNEA DEL DÍA
   ==========================================================================
   La portada no lleva una foto de una van. Lleva el horario, que es lo que de
   verdad distingue a este negocio: se recolecta de 8 a 11 y se reparte de 12 a
   22, el mismo día.

   El fondo oscuro hace dos cosas: el azul y el naranja de la marca brillan
   sobre él —ahí sí alcanzan buen contraste— y la línea parece iluminada, como
   el tablero de salidas de una terminal.
   ========================================================================== */
.portada {
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(44px, 7vw, 92px) clamp(38px, 5vw, 62px);
  overflow: hidden;
}

.rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--naranja-hondo);
}
.rotulo--claro {
  color: var(--azul);
}

.portada__titulo {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(2.3rem, 7.4vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.portada__titulo em {
  font-style: normal;
  color: var(--naranja);
}

.portada__texto {
  margin-top: 18px;
  max-width: 44ch;
  color: rgba(244, 241, 234, 0.76);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
}

/* ------------------------------------------------------- la cuenta atrás --- */
/*
 * EL RELOJ COMO ARGUMENTO.
 *
 * Va entre el titular y la línea del día, que es el sitio de más peso de la
 * página después del titular mismo. Si es lo que vende el negocio, tiene que
 * estar donde más se ve.
 *
 * LOS NÚMEROS VAN CON CIFRAS DE ANCHO FIJO, y no es un detalle de tipografía:
 * sin eso, al pasar de «1 h 9 min» a «1 h 10 min» el ancho cambia, la línea
 * se mueve sola cada minuto y la página parece temblar.
 */
.cuenta {
  margin-top: clamp(24px, 4vw, 36px);
  padding: 18px 22px;
  border-left: 4px solid var(--naranja);
  background: rgba(250, 140, 30, 0.1);
  border-radius: var(--radio);
  max-width: 52ch;
}
.cuenta[hidden] {
  display: none;
}
.cuenta__linea {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3.4vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hueso);
}
.cuenta__tiempo {
  font-variant-numeric: tabular-nums;
  color: var(--naranja);
}
.cuenta__texto {
  margin-top: 8px;
  font-size: 0.95rem;
  color: rgba(244, 241, 234, 0.78);
}
/* El ámbito, pegado y visible. No en letra pequeña ni escondido: es la
   condición de todo lo que dice arriba. */
.cuenta__ambito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 11px;
  border: 1px solid rgba(0, 168, 228, 0.45);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azul);
}
.cuenta__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}
/*
 * CUANDO YA CERRÓ, el bloque cambia de color: el naranja es «queda tiempo»
 * y el azul pasa a gris. No hay parpadeo ni animación de ninguna clase —el
 * reloj ya llama la atención solo— y con «menos movimiento» pedido tampoco
 * habría nada que quitar.
 */
.cuenta--cerrada {
  border-left-color: rgba(244, 241, 234, 0.3);
  background: rgba(244, 241, 234, 0.05);
}
.cuenta--cerrada .cuenta__tiempo {
  color: var(--hueso);
}

/* ------------------------------------------------------------ la línea --- */
.linea {
  margin-top: clamp(34px, 5vw, 54px);
}

.linea__regla {
  position: relative;
  height: 96px;
  border-radius: var(--radio);
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid var(--filete-claro);
  overflow: hidden;
}

.tramo {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding-inline: 14px;
  overflow: hidden;
}

/* El azul es la colecta. */
.tramo--colecta {
  background: linear-gradient(180deg, rgba(0, 168, 228, 0.34), rgba(0, 168, 228, 0.18));
  border-right: 2px solid var(--azul);
}
/* El naranja es la ruta. */
.tramo--ruta {
  background: linear-gradient(180deg, rgba(250, 140, 30, 0.34), rgba(250, 140, 30, 0.18));
  border-left: 2px solid var(--naranja);
}

.tramo__nombre {
  font-family: var(--display);
  font-size: clamp(0.86rem, 1.7vw, 1.16rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tramo--colecta .tramo__nombre {
  color: #7fd4f5;
}
.tramo--ruta .tramo__nombre {
  color: #ffb066;
}

.tramo__horas {
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 600;
  color: rgba(244, 241, 234, 0.72);
  white-space: nowrap;
}

/* La marca de la hora actual. La coloca el guion. */
.linea__ahora {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--hueso);
  box-shadow: 0 0 0 3px rgba(244, 241, 234, 0.16);
}
.linea__ahora::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--hueso);
}

.linea__marcas {
  position: relative;
  height: 26px;
  margin-top: 7px;
}
.linea__marca {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(244, 241, 234, 0.44);
  white-space: nowrap;
}
.linea__marca i {
  display: block;
  width: 1px;
  height: 6px;
  margin: 0 auto 3px;
  background: rgba(244, 241, 234, 0.28);
}

.linea__ahora-texto {
  margin-top: 10px;
  font-size: 0.84rem;
  color: rgba(244, 241, 234, 0.66);
}
.linea__ahora-texto b {
  color: var(--hueso);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 38px);
}

.portada__nota {
  margin-top: 16px;
  font-size: 0.82rem;
  color: rgba(244, 241, 234, 0.5);
}

/* ==========================================================================
   7. LOS ENCABEZADOS DE SECCIÓN
   ========================================================================== */
.seccion {
  padding-block: clamp(52px, 8vw, 104px);
}
.seccion--hueso {
  background: var(--blanco);
}

.encabezado {
  max-width: 62ch;
}
.titulo {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.entrada {
  margin-top: 16px;
  color: var(--gris);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}
.entrada b {
  color: var(--tinta);
}

/* ==========================================================================
   8. LAS DOS VENTANAS
   ==========================================================================
   Dos bloques con la hora enorme. La hora es el dato, así que se trata como
   el dato: en tipografía de cartel y con cifras de ancho fijo.
   ========================================================================== */
.ventanas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(30px, 4vw, 46px);
}

.ventana {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--filete);
  border-top-width: 4px;
  border-radius: var(--radio);
  background: var(--blanco);
}
.ventana--colecta {
  border-top-color: var(--azul);
}
.ventana--ruta {
  border-top-color: var(--naranja);
}

.ventana__rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ventana--colecta .ventana__rotulo {
  color: var(--azul-hondo);
}
.ventana--ruta .ventana__rotulo {
  color: var(--naranja-hondo);
}

.ventana__horas {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ventana__horas span {
  font-family: var(--texto);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gris);
  letter-spacing: 0;
}

.ventana__texto {
  margin-top: 12px;
  color: var(--gris);
  font-size: 0.95rem;
}

/* ==========================================================================
   9. LOS TRES PASOS
   ========================================================================== */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(38px, 5vw, 62px);
  counter-reset: paso;
}

.etapa {
  border-top: 1px solid var(--filete);
  padding-top: 16px;
}
.etapa__n {
  font-family: var(--display);
  font-size: 0.94rem;
  color: var(--azul-hondo);
}
.etapa__titulo {
  margin-top: 6px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.etapa__texto {
  margin-top: 8px;
  color: var(--gris);
  font-size: 0.94rem;
}

/* ==========================================================================
   10. EL CUESTIONARIO DE COTIZACIÓN
   ==========================================================================
   Diez campos repartidos en tres pasos. En el teléfono, diez campos seguidos
   se abandonan: se ve un muro y se cierra. De tres en tres, cada paso se
   termina.
   ========================================================================== */
.cotizador {
  margin-top: clamp(28px, 4vw, 42px);
  max-width: 720px;
}

/* --- el avance por los tres pasos --- */
.avance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 26px;
}
.avance__punto {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gris);
}
.avance__punto span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--filete);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
/* El paso en el que se está, marcado en azul: el mismo azul de la colecta, que
   en este sitio quiere decir «lo que se recoge», o sea, lo que estás dando. */
.avance__punto--activo {
  color: var(--tinta);
}
.avance__punto--activo span {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--tinta);
}

/* --- cada paso --- */
.paso {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.paso + .paso {
  margin-top: 0;
}
.paso[hidden] {
  display: none;
}
.paso__titulo {
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

/* --- cada campo --- */
.campo {
  margin-bottom: 20px;
}
.campo label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.92rem;
  font-weight: 700;
}
.campo label abbr {
  color: var(--naranja-hondo);
  text-decoration: none;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  /* 16 px o más: por debajo, el iPhone hace zum al enfocar un campo y la
     página salta. Es un detalle tonto que arruina el llenado en el teléfono. */
  font-size: 1rem;
  line-height: 1.4;
}
.campo textarea {
  resize: vertical;
  min-height: 92px;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: #9aa2b0;
}
.campo input:focus,
.campo textarea:focus {
  outline: 3px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}

/* El campo con error se marca con el naranja hondo, no con rojo: el rojo no
   está en la paleta de la marca y el naranja ya significa «algo que atender»
   en el resto del sitio. Va acompañado de un filete grueso y de un texto, así
   que no depende solo del color — quien no distinga el color lee el mensaje. */
.campo--mal input,
.campo--mal textarea {
  border-color: var(--naranja-hondo);
  border-width: 2px;
  background: #fdf6ef;
}

.campo__ayuda {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--gris);
}

.campo__error {
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--naranja-hondo);
}
.campo__error[hidden] {
  display: none;
}
/* El mensaje lleva un signo delante para que se vea de un vistazo cuál es el
   que hay que arreglar cuando hay varios. */
.campo__error::before {
  content: '▲ ';
  font-size: 0.7em;
  vertical-align: 1px;
}

.cotizador__resumen {
  margin-top: 4px;
  padding: 13px 15px;
  border-left: 4px solid var(--naranja-hondo);
  background: #fdf6ef;
  font-size: 0.92rem;
  font-weight: 600;
}
.cotizador__resumen[hidden] {
  display: none;
}

.cotizador__mandos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.cotizador__mandos [hidden] {
  display: none;
}

.cotizador__letra {
  margin-top: 18px;
  font-size: 0.83rem;
  color: var(--gris);
  max-width: 58ch;
}

/* --- sin JavaScript ---
   Se ven los tres pasos de golpe. No se puede avanzar por pasos sin guion, así
   que esconder los otros dos dejaría el cuestionario inservible. */
html:not(.js) .paso[hidden] {
  display: block;
}
/*
 * Y los campos que solo salen si el envío es foráneo, también.
 *
 * Nacen ocultos y los enseña el guion al elegir «foráneo». Sin guion no hay
 * quien los enseñe, así que un envío foráneo se quedaba sin poder cotizar:
 * el campo de estado y el de ciudad no aparecían nunca. Mismo criterio que
 * con los pasos —sin guion se enseña todo— y el aviso de más arriba ya dice
 * que hay que escribir por WhatsApp.
 */
html:not(.js) [data-solo-foraneo][hidden] {
  display: block;
}
html:not(.js) .avance,
html:not(.js) .cotizador__mandos {
  display: none;
}

.sin-js {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--filete);
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio);
  background: var(--blanco);
}
.sin-js__titulo {
  font-size: 1.06rem;
  font-weight: 800;
}
.sin-js p {
  margin-top: 10px;
  color: var(--gris);
  font-size: 0.94rem;
}
.sin-js__acciones {
  margin-top: 18px;
}

/* --- la lista de los diez datos --- */
.listado {
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--filete);
  max-width: 720px;
}
.listado__titulo {
  font-size: 0.94rem;
  font-weight: 800;
}
.listado__lista {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 7px 24px;
  counter-reset: dato;
}
.listado__lista li {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--gris);
  counter-increment: dato;
}
.listado__lista li::before {
  content: counter(dato, decimal-leading-zero);
  font-weight: 700;
  color: var(--azul-hondo);
  flex: none;
}

/* ==========================================================================
   11. LAS PREGUNTAS
   ========================================================================== */
.preguntas {
  margin-top: clamp(26px, 4vw, 38px);
  border-top: 1px solid var(--filete);
}

.pregunta {
  border-bottom: 1px solid var(--filete);
}
.pregunta__p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pregunta__p::-webkit-details-marker {
  display: none;
}
/* La flecha se dibuja y gira al abrir. Es lo único que se mueve aquí, y sirve
   para saber si está abierto o cerrado. */
.pregunta__p::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--azul-hondo);
  border-bottom: 2px solid var(--azul-hondo);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.pregunta[open] .pregunta__p::after {
  transform: rotate(-135deg);
}
.pregunta__r {
  padding: 0 0 20px;
  max-width: 62ch;
  color: var(--gris);
  font-size: 0.96rem;
}

.cierre {
  margin-top: clamp(34px, 5vw, 50px);
  padding-top: 26px;
  border-top: 1px solid var(--filete);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
}
.cierre__texto {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   12. EL CIERRE Y EL PIE
   ========================================================================== */
.pie {
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(40px, 6vw, 64px) 26px;
}

.pie__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(26px, 4vw, 48px);
}

/* El logotipo va sobre una placa clara porque el pie es oscuro y «Mega» es
   gris oscuro. Es la misma razón que en la cabecera. */
.pie__marca img {
  height: 40px;
  width: auto;
  padding: 7px 10px;
  background: var(--hueso);
  border-radius: var(--radio);
}
.pie__lema {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 0.88rem;
  color: rgba(244, 241, 234, 0.62);
}

.pie__rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul);
}
.pie__rotulo:not(:first-child) {
  margin-top: 20px;
}
.pie__tel {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--hueso);
  text-decoration: none;
}
.pie__tel:hover {
  color: var(--naranja);
}
.pie__horas {
  margin-top: 5px;
  font-size: 0.92rem;
  color: rgba(244, 241, 234, 0.72);
}

.pie__letra {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--filete-claro);
  font-size: 0.8rem;
  color: rgba(244, 241, 234, 0.44);
}

/* ==========================================================================
   CÓMO ENTRA TU PAQUETE
   ==========================================================================
   La opción de que pasemos nosotros va primera y destacada, porque es la
   que le quita el trabajo al cliente. La otra, si está, va al lado y más
   discreta, pero con el mismo tamaño de letra: esconderla sería hacerle
   perder el tiempo a quien prefiera llevarlo.
   ========================================================================== */
.entrada__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(28px, 4vw, 42px);
  align-items: start;
}
.entrada__opcion {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--blanco);
}
/* La principal, con el azul de la colecta: en este sitio el azul quiere
   decir «lo que te llevas». */
.entrada__opcion--principal {
  border-left: 4px solid var(--azul);
}
.entrada__opcion-titulo {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: -0.02em;
}
.entrada__opcion-texto {
  margin-top: 10px;
  color: var(--gris);
}
.entrada__puntos {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.entrada__punto {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--tinta-suave);
}
/* Una palomita dibujada, no un emoji: los emoji cambian de forma según el
   teléfono y desarman la alineación. */
.entrada__punto::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  background: var(--azul-hondo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* La direccion, tal cual la dio el cliente. En cuerpo grande porque es el
   dato que la gente viene a buscar, y sin adornos porque no los hay. */
.entrada__direccion {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.entrada__direccion-linea,
.entrada__direccion-ciudad {
  display: block;
}
.entrada__direccion-ciudad {
  color: var(--azul-hondo);
}
.entrada__horario {
  margin-top: 8px;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--tinta-suave);
}
/* El aviso de confirmar antes de ir, con el naranja de la marca: no es una
   advertencia grave, es un consejo que ahorra un viaje. */
.entrada__aviso {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--naranja);
  font-size: 0.86rem;
  color: var(--gris);
}

.entrada__nota {
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ==========================================================================
   EL APARTADO DE PAQUETES FORÁNEOS
   ==========================================================================
   Es el apartado con menos datos de todo el sitio, y por eso el más corto. No
   lleva mapa, ni avión, ni dibujo de ninguna clase: un mapa del país daría a
   entender una cobertura que no está confirmada, y eso es exactamente lo que
   no se puede hacer.

   El fondo oscuro lo separa del resto y le da el peso de «esto es otro
   servicio», que es la verdad: un paquete foráneo no es lo mismo que uno local.
   ========================================================================== */
.seccion--tinta {
  background: var(--tinta);
  color: var(--hueso);
}

.titulo--claro {
  color: var(--hueso);
}

.foraneo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(26px, 5vw, 64px);
}

.foraneo__texto {
  max-width: 62ch;
}

.foraneo__parrafo {
  margin-top: 16px;
  max-width: 52ch;
  color: rgba(244, 241, 234, 0.72);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.foraneo__acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* El botón, sobre fondo oscuro, se invierte: si no, sería tinta sobre tinta,
   que es el mismo fallo que tuvo la portada. */
.seccion--tinta .boton:not(.boton--wa) {
  background: var(--hueso);
  color: var(--tinta);
}
.seccion--tinta .boton:not(.boton--wa):hover {
  background: var(--blanco);
}

/*
 * LA FRASE QUE SOSTIENE EL APARTADO.
 *
 * Va en un bloque propio, con el filete naranja a la izquierda —el color
 * de la ruta en todo el sitio, o sea «lo que se entrega»— porque no es un
 * párrafo más: es lo que explica por qué se cotiza a mano en vez de tener
 * una tabla de precios. Es el argumento del servicio, no una disculpa.
 */
/*
 * LOS DOS BLOQUES DEL APARTADO FORÁNEO.
 *
 * Son dos tarjetas separadas, con su filete de color cada una, y el plazo
 * —«el mismo día»— SOLO aparece dentro de la primera. No es maquetación:
 * es lo que impide que alguien lea «mismo día» y «resto de la república»
 * como una sola frase y crea que desde Monterrey le llega hoy.
 *
 * La separación visual y la comprobación del montaje son las dos mitades
 * de lo mismo: una lo impide en la pantalla, la otra en el texto.
 */
.tramos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.tramo-info {
  padding: 18px 20px;
  border: 1px solid rgba(244, 241, 234, 0.16);
  border-radius: var(--radio);
  background: rgba(244, 241, 234, 0.04);
}
/* El bloque con plazo se distingue: el azul de la colecta, que en este
   sitio quiere decir «esto sí lo tenemos confirmado». */
.tramo-info--plazo {
  border-color: rgba(0, 168, 228, 0.5);
  border-left: 4px solid var(--azul);
  background: rgba(0, 168, 228, 0.09);
}
.tramo-info__titulo {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.62);
}
.tramo-info--plazo .tramo-info__titulo {
  color: var(--azul);
}
.tramo-info__tiempo {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--naranja);
}
.tramo-info__texto {
  margin-top: 10px;
  font-size: 0.93rem;
  color: rgba(244, 241, 234, 0.76);
}

.foraneo__clave {
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 4px solid var(--naranja);
  background: rgba(250, 140, 30, 0.08);
  border-radius: var(--radio);
  max-width: 54ch;
}
.foraneo__clave-titulo {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  letter-spacing: -0.015em;
  color: var(--naranja);
}
.foraneo__clave-texto {
  margin-top: 8px;
  font-size: 0.95rem;
  color: rgba(244, 241, 234, 0.78);
}
.foraneo__cierre {
  margin-top: 18px;
  max-width: 46ch;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hueso);
}

.foraneo__nota {
  max-width: 32ch;
  font-size: 0.8rem;
  color: rgba(244, 241, 234, 0.52);
}

/* ==========================================================================
   LA ELECCIÓN DE LOCAL O FORÁNEO
   ==========================================================================
   Dos opciones grandes, cada una con su explicación. Se hacen así, y no con un
   desplegable, porque la diferencia entre local y foráneo no es un detalle: es
   la pregunta que más cambia la cotización, y merece ocupar sitio.
   ========================================================================== */
.campo--eleccion {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}

.campo__leyenda {
  padding: 0;
  margin-bottom: 9px;
  font-size: 0.92rem;
  font-weight: 700;
}
.campo__leyenda abbr {
  color: var(--naranja-hondo);
  text-decoration: none;
}

.opciones {
  display: grid;
  gap: 10px;
}

/* La etiqueta envuelve al radio y a su caja, así que TODA la caja es
   pulsable, no solo el circulito. Es lo que hace que en el teléfono se pueda
   tocar con el pulgar sin apuntar. */
.opcion {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--blanco);
  cursor: pointer;
}
.opcion:hover {
  border-color: rgba(14, 21, 38, 0.3);
}

.opcion input {
  width: 19px;
  height: 19px;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--azul-hondo);
}

.opcion__caja {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opcion__titulo {
  font-size: 0.96rem;
  font-weight: 700;
}

.opcion__nota {
  font-size: 0.83rem;
  color: var(--gris);
}

/* Cuando la opción está elegida, se marca entera y no solo el circulito: así
   se ve de un vistazo cuál está puesta, incluso mirando desde lejos. */
.opcion:has(input:checked) {
  border-color: var(--azul-hondo);
  border-width: 2px;
  padding: 13px 14px;
  background: #f2fafd;
}

/* Y el foco, en el radio, se refleja en toda la caja: sin esto, quien navega
   con teclado vería el foco en un circulito de 19 px y no sabría qué opción
   está a punto de elegir. */
.opcion:has(input:focus-visible) {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

/* El error del grupo, igual que el de cualquier otro campo. */
.campo--eleccion.campo--mal .opcion {
  border-color: var(--naranja-hondo);
}
.campo--eleccion.campo--mal .campo__leyenda {
  color: var(--naranja-hondo);
}

/* ==========================================================================
   EL BOTÓN DE COMPARTIR Y EL AVISO DE «ENLACE COPIADO»
   ==========================================================================
   El botón se copió del proyecto de referencia, donde ya había pasado sus
   comprobaciones. Lo único que cambia es el dibujo: aquí los iconos se hacen
   con una máscara de CSS, como el de WhatsApp, en vez de con un SVG escrito
   en el HTML. Así el icono hereda el color del texto y no hay que repetirlo.
   ========================================================================== */
/* Los dos dibujos van aquí escritos enteros y no en una variable: `mask` es
   una propiedad con muchos matices entre navegadores y meterla en un `var()`
   dentro de un atajo da problemas. Repetirla cuesta menos que depurarla. */
.icono-compartir {
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icono-check {
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El botón de compartir de la cabecera: solo el icono, sin fondo. */
.boton--icono {
  padding: 11px 13px;
  background: transparent;
  color: var(--tinta-suave);
  border-color: var(--filete);
}
.boton--icono:hover {
  background: var(--hueso-hondo);
  color: var(--tinta);
}

/* Y en la portada, que es oscura, con filete claro. */
.boton--linea {
  background: transparent;
  color: var(--hueso);
  border-color: rgba(244, 241, 234, 0.34);
}
.boton--linea:hover {
  background: rgba(244, 241, 234, 0.1);
}

/*
 * EL AVISO DE «ENLACE COPIADO».
 *
 * Nace en el árbol de accesibilidad —sin `hidden`— pero con opacidad cero y
 * sin recibir toques. Un `hidden` lo sacaría del árbol y, al aparecer, los
 * lectores de pantalla no lo anunciarían: el aviso se vería pero no se oiría.
 *
 * Se queda 2,6 segundos. Más tiempo estorba; menos, no da tiempo a leerlo.
 */
.aviso-copiado {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--hueso);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(14, 21, 38, 0.28);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.aviso-copiado--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   EL AVISO PARA AÑADIR A LA PANTALLA DE INICIO
   ==========================================================================
   Abajo del todo y flotando, como en el proyecto de referencia.

   SALE SIEMPRE. Lo que cambia según el navegador no es si aparece, sino qué
   hace su botón. Ese fue el fallo del proyecto anterior y está explicado
   entero en `app.js`.
   ========================================================================== */
.instalar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 110;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  /* El aviso no se come los toques de lo que hay debajo: solo su caja. */
  pointer-events: none;
}
.instalar[hidden] {
  display: none;
}

.instalar__caja {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(13px, 2.4vw, 20px);
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(13px, 2.2vw, 18px);
  background: var(--tinta);
  border: 1px solid rgba(244, 241, 234, 0.16);
  /* El filete azul a la izquierda: el mismo azul de la colecta, que en este
     sitio quiere decir «lo que te llevas». */
  border-left: 4px solid var(--azul);
  border-radius: var(--radio);
  box-shadow: 0 18px 44px rgba(14, 21, 38, 0.34);
  pointer-events: auto;
}

/*
 * La entrada se anima SOLO si el sistema no pide menos movimiento. No es un
 * detalle de adorno: quien tiene sensibilidad al movimiento agradece que un
 * aviso no le entre deslizándose por la pantalla.
 */
@media (prefers-reduced-motion: no-preference) {
  .instalar:not([hidden]) .instalar__caja {
    animation: instalar-sube 0.34s ease;
  }
}

@keyframes instalar-sube {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
}

/* El logotipo, sobre placa clara: su «Mega» es gris oscuro y sobre el fondo
   oscuro del aviso desaparecería. Misma razón que en la cabecera. */
.instalar__logo {
  width: auto;
  height: clamp(38px, 5vw, 46px);
  flex: none;
  padding: 6px 9px;
  background: var(--hueso);
  border-radius: var(--radio);
}

.instalar__texto {
  flex: 1;
  min-width: 0;
}

.instalar__titulo {
  display: block;
  font-family: var(--display);
  font-size: clamp(0.92rem, 2.1vw, 1.06rem);
  letter-spacing: -0.01em;
  color: var(--hueso);
}

.instalar__parrafo,
.instalar__pasos {
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.7);
}
.instalar__pasos {
  color: var(--azul);
  font-weight: 600;
}

.instalar__botones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.instalar__boton {
  background: var(--azul);
  color: var(--tinta);
}
.instalar__boton:hover {
  background: #4dc3f0;
}
.instalar__luego {
  padding: 9px 6px;
  border: 0;
  background: none;
  color: rgba(244, 241, 234, 0.66);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.instalar__luego:hover {
  color: var(--hueso);
  text-decoration: underline;
}

.instalar__equis {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.12);
  color: var(--hueso);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.instalar__equis:hover {
  background: rgba(244, 241, 234, 0.22);
}

/*
 * EL CONTENIDO TIENE QUE PODER PASAR POR DEBAJO.
 *
 * El aviso flota abajo y, si no se reserva sitio, tapa el final de la página:
 * los últimos campos del cuestionario y el pie. El guion mide el alto real del
 * aviso y lo deja escrito en `--alto-aviso`; aquí solo se usa.
 *
 * Es la forma de que a 320 px no tape nada, en vez de apostar por un número
 * fijo que se quede corto.
 */
body[data-instalar-visible] {
  padding-bottom: var(--alto-aviso, 210px);
}

/* ==========================================================================
   13. LOS ANCHOS PEQUEÑOS
   ========================================================================== */
@media (max-width: 620px) {
  /*
   * EL AVISO SE APILA, Y NO ES UN CAPRICHO.
   *
   * En una fila, con el logotipo a un lado y los botones al otro, al texto le
   * quedaban menos de 130 px de ancho y se enrollaba en cinco líneas. Medido:
   * el aviso llegaba a 543 px de alto en una pantalla de 700, o sea el 77 %
   * de lo que se ve. Eso no es un aviso, es un muro.
   *
   * Apilado —logotipo y texto arriba, botones abajo ocupando el ancho— baja a
   * menos de la mitad. Y los botones quedan grandes, que es como se pulsan
   * bien con el pulgar.
   */
  .instalar__caja {
    flex-wrap: wrap;
  }
  .instalar__logo {
    height: 34px;
    padding: 4px 7px;
  }
  .instalar__titulo {
    font-size: 0.95rem;
  }
  .instalar__parrafo,
  .instalar__pasos {
    font-size: 0.8rem;
  }
  .instalar__botones {
    width: 100%;
    margin-top: 4px;
  }
  .instalar__boton {
    flex: 1;
  }
  /* La equis, en pantalla pequeña, donde el «Ahora no» queda más lejos. */
  .instalar__equis {
    display: grid;
  }
}

/* En el teléfono más estrecho el logotipo estorba más que ayuda: son 40 px de
   alto que hacen falta para el texto. */
@media (max-width: 400px) {
  .instalar__logo {
    display: none;
  }
}

@media (max-width: 880px) {
  /* El apartado de foráneos: en pantalla estrecha el botón baja debajo del
     texto en vez de quedarse al lado apretado. */
  .foraneo {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .foraneo__acciones .boton {
    width: 100%;
  }

  /*
   * EL MENÚ, EN SU PROPIA FILA.
   *
   * En el teléfono el menú baja debajo del logotipo. Se probó a dejarlo en una
   * fila que se desliza en horizontal, y a 320 px «Preguntas» quedaba fuera de
   * la pantalla: había que adivinar que aquello se movía. Se cambió a que los
   * cuatro enlaces se acomoden solos en dos filas y se vean todos.
   *
   * Es más alto, sí, pero una sección que no se encuentra es peor que 30 px
   * más de cabecera.
   */
  .menu {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 2px 4px;
  }
  .menu a {
    padding: 7px 10px;
    font-size: 0.86rem;
  }
  .cabecera__fila {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 9px;
  }
  .cabecera .boton--wa {
    margin-left: auto;
    padding: 11px 13px;
  }
  .cabecera .boton__texto {
    display: none;
  }
  html {
    scroll-padding-top: 130px;
  }
}

@media (max-width: 620px) {
  .portada__acciones .boton {
    flex: 1 1 100%;
  }
  .linea__regla {
    height: 84px;
  }
  /* En pantalla estrecha no caben ocho marcas: se quedan las cuatro que
     enmarcan las dos ventanas y el resto se oculta. */
  .linea__marca:nth-child(even) {
    display: none;
  }
  .tramo {
    padding-inline: 9px;
  }
  .ventana__horas {
    font-size: 2rem;
  }
  .cotizador__mandos .boton {
    flex: 1 1 100%;
  }
  .pie__fila {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. MENOS MOVIMIENTO
   ==========================================================================
   Si el sistema pide menos movimiento, no se anima nada. Las cosas que se
   mueven aquí son pequeñas —la línea que se dibuja al entrar y la flecha de
   las preguntas—, pero quien tiene sensibilidad al movimiento agradece no
   encontrárselas.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .revelar {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   LA ENTRADA DE LAS COSAS
   ==========================================================================
   Sin JavaScript, esto no se aplica nunca: la clase `js` no está y las cosas
   se ven desde el principio. Es a propósito — si el guion falla, la página
   tiene que verse entera igual.
   ========================================================================== */
.js .revelar {
  opacity: 0;
  transform: translateY(14px);
}
.js .revelar--visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}