/* ==========================================================================
   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);
}

/*
 * EL ÁMBITO, PEGADO AL TITULAR.
 *
 * Va entre el titular y el lema, y no es una nota al pie: es la CONDICIÓN de
 * los dos «hoy» de arriba. Sin él, el titular promete lo mismo en Monterrey
 * que en Iztapalapa, y eso es el error que este sitio lleva siete encargos
 * evitando.
 *
 * SE VE SIEMPRE, con guion y sin él, y por eso no vive dentro del bloque de la
 * cuenta atrás: aquel nace oculto y lo enseña el guion, así que quien no tenga
 * JavaScript se quedaría sin saber de dónde es el «hoy».
 *
 * EL COLOR ES EL DEL ÁMBITO EN TODO EL SITIO —el azul de la colecta— y el
 * punto es el mismo dibujo que lleva la etiqueta de la cuenta atrás, para que
 * se lean como la misma cosa.
 */
.portada__ambito {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--azul);
}
.portada__ambito-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azul);
  flex: none;
}

/* ------------------------------------------------------- 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);
}
/* Sobre el fondo oscuro, el gris no llega al contraste mínimo. */
.entrada--clara {
  color: rgba(244, 241, 234, 0.78);
}

/* ==========================================================================
   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);
}

/* ==========================================================================
   PARA QUIÉN ES
   ==========================================================================
   Dos tarjetas, las dos con el mismo peso visual: no hay una principal y
   otra de relleno, porque los dos tipos de cliente valen lo mismo.
   ========================================================================== */
.para__tipos {
  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);
}
.para__tipo {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--azul);
  border-radius: var(--radio);
  background: var(--blanco);
}
.para__nombre {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  letter-spacing: -0.02em;
}
.para__texto {
  margin-top: 9px;
  color: var(--gris);
}

/* ==========================================================================
   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);
}

/* ==========================================================================
   EL PRECIO: LOS DOS MODELOS, CADA UNO EN SU BLOQUE
   ==========================================================================
   ESTA SECCIÓN ES LA MÁS DELICADA DEL SITIO, y la maquetación es la mitad de
   la comprobación.

   Los dos modelos de precio son el mismo par de ámbitos que el apartado de
   arriba acaba de separar —dentro y fuera de la cobertura—, así que la
   separación visual hace aquí el mismo trabajo que allí: si los dos modelos
   cayeran en el mismo recuadro, alguien de Monterrey leería «tarifa fija» como
   si le tocara. La otra mitad la hace el montaje: `tarifaPegadaAlResto()`
   FALLA si una frase de tarifa fija se acerca a «resto de la república».

   VA EN LA MISMA BANDA OSCURA QUE EL APARTADO, y es a propósito: son la misma
   conversación —hasta dónde llegamos y cuánto cuesta— y separarlas en dos
   fondos distintos invitaría a leerlas por separado, que es justo lo que hay
   que impedir.
   ========================================================================== */
/*
 * LA SEPARACIÓN DE ARRIBA, QUE SE PROBÓ A QUITAR Y NO SE PUEDE.
 *
 * El primer intento fue `padding-top: 0`, para que esta sección se leyera como
 * la continuación del apartado de arriba y no como una sección suelta. Se miró
 * a 320 px y el encabezado quedaba DEBAJO DE LA CABECERA PEGAJOSA: el `scroll`
 * deja 84 px y el titular del precio mide más que eso en un teléfono, así que
 * se comía la primera línea. Un titular que no se lee al llegar a su sección es
 * peor que 60 px de aire de más.
 *
 * SE QUEDA EL RELLENO NORMAL DE SECCIÓN. El filete de arriba —la línea de un
 * pixel que separa esta banda de la anterior— es lo que hace el trabajo de
 * decir «esto sigue aquí», y el aire no estorba a nadie.
 */
.seccion--tarifa {
  border-top: 1px solid rgba(244, 241, 234, 0.12);
}

.tarifa__modelos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin-top: 26px;
}
.tarifa__modelo {
  padding: 20px 22px;
  border: 1px solid rgba(244, 241, 234, 0.16);
  border-radius: var(--radio);
  background: rgba(244, 241, 234, 0.04);
}
/*
 * EL BLOQUE DE DENTRO LLEVA EL FILETE AZUL, que en este sitio quiere decir
 * «esto sí está confirmado»: es el mismo recurso que el bloque con plazo del
 * apartado. El de fuera se queda neutro a propósito —no es un dato que falte,
 * es un modelo distinto— y por eso no se le pone ni una marca de alarma.
 */
.tarifa__modelo--dentro {
  border-color: rgba(0, 168, 228, 0.5);
  border-left: 4px solid var(--azul);
  background: rgba(0, 168, 228, 0.09);
}
.tarifa__modelo-titulo {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.62);
}
.tarifa__modelo--dentro .tarifa__modelo-titulo {
  color: var(--azul);
}
/*
 * LA MARCA ES LA FRASE QUE DECIDE EL MODELO —«Tarifa fija. Sin sorpresas.»
 * frente a «Se cotiza caso por caso»— así que va en tipografía de cartel y en
 * el color de la ruta, como el «el mismo día» del apartado. Es el dato, no un
 * adorno: quien lea solo esto ya sabe qué le toca.
 */
.tarifa__modelo-marca {
  margin-top: 6px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--naranja);
}
.tarifa__modelo--dentro .tarifa__modelo-marca {
  color: var(--naranja);
}
.tarifa__modelo-texto {
  margin-top: 10px;
  font-size: 0.93rem;
  color: rgba(244, 241, 234, 0.76);
}

/*
 * LA PREGUNTA DEL DOMICILIO.
 *
 * Va DEBAJO de los dos bloques y fuera de ellos, porque vale para los dos: es
 * la respuesta al hueco que deja no publicar la lista de colonias y
 * municipios, y metida dentro de un bloque parecería que solo se contesta a
 * quien está en ese.
 *
 * LLEVA EL FILETE NARANJA a la izquierda, como la clave del apartado, porque
 * es una invitación a actuar y no un párrafo de relleno. Y el signo de
 * interrogación va en un círculo para que se vea que es una pregunta y no una
 * afirmación disfrazada.
 */
.tarifa__casa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio);
  background: rgba(250, 140, 30, 0.08);
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  font-weight: 600;
  color: var(--hueso);
}
.tarifa__casa-marca {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--naranja);
  color: var(--naranja);
  font-family: var(--display);
  font-size: 1rem;
  line-height: 26px;
  text-align: center;
}

/* ==========================================================================
   SERVICIO A LA MEDIDA
   ==========================================================================
   Vuelve al fondo claro a propósito: es la vuelta al «nosotros» después de dos
   secciones de ámbito, y el cambio de fondo marca ese cambio de tema sin
   necesidad de decirlo.
   ========================================================================== */
.medida__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
  margin-top: 26px;
}
.medida__puntos {
  display: grid;
  gap: 12px;
  list-style: none;
  min-width: 0;
}
/*
 * LOS TRES PUNTOS SON LOS TRES HECHOS, y se dibujan como fichas y no como
 * lista con viñetas porque cada uno lleva su título: «Se recoge de 8:00 a
 * 11:00» no es un elemento de una enumeración, es un dato con su nombre.
 */
.medida__punto {
  padding: 14px 18px;
  border-left: 3px solid var(--azul);
  border-radius: var(--radio);
  background: var(--hueso);
  min-width: 0;
}
.medida__punto-titulo {
  display: block;
  font-size: 1rem;
  color: var(--tinta);
}
.medida__punto-texto {
  display: block;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--gris);
}
.medida__cierre {
  min-width: 0;
}
.medida__cierre-texto {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: var(--tinta);
}
.medida__invita {
  margin-top: 12px;
  font-weight: 600;
  color: var(--naranja-hondo);
}
/*
 * EL BOTÓN VA DEBAJO DE LAS DOS COLUMNAS, no dentro de la derecha.
 *
 * Dentro dejaba un hueco de media columna vacío debajo del texto, y el botón
 * flotando a media altura sin nada que lo sostenga. Debajo y alineado con los
 * puntos, cierra la sección y se lee como lo que es: la acción que sigue.
 */
.medida__accion {
  margin-top: 24px;
}
.medida__accion .boton {
  width: auto;
}

@media (max-width: 760px) {
  .medida__cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   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;
  }
}

/*
 * LA BANDA ESTRECHA DE LA CABECERA, DE 881 A 1100 px.
 *
 * ESTA BANDA EXISTE POR LAS DOS SECCIONES NUEVAS, y el problema fue real: al
 * añadir «Precio» y «A la medida» el menú pasó de siete enlaces a nueve, y a
 * 1024 px la cabecera medía 1090 px. Había scroll horizontal, que es el fallo
 * más visible que puede tener una página.
 *
 * EL CORTE ESTÁ EN 1100 Y NO EN 1040, y se midió: a 1041 px la cabecera seguía
 * midiendo 1090 y el desborde volvía. Se probaron los nueve anchos seguidos
 * —881, 900, 960, 1024, 1040, 1041, 1100, 1180 y 1280— y el último que
 * desbordaba era 1089. El corte se pone donde deja de desbordar, no donde
 * parece bonito.
 *
 * POR QUÉ NO SE ARREGLA CON EL CORTE DE 880 px QUE YA EXISTÍA: porque ahí el
 * menú baja a una fila propia y la cabecera se vuelve alta. Eso está bien en un
 * teléfono y es de más en una tableta o en una laptop pequeña, donde el menú sí
 * cabe al lado del logotipo; solo hay que apretarlo.
 *
 * Y POR QUÉ NO SE QUITAN ENLACES DEL MENÚ: porque el encargo pedía que las dos
 * secciones nuevas estuvieran a un toque, y una sección que no se encuentra es
 * peor que 6 px menos de relleno. Se aprieta, no se esconde.
 *
 * EL BOTÓN DE WHATSAPP SE QUEDA EN ICONO. Es lo que se aprieta primero porque
 * el icono ya dice lo que es, y porque el mismo botón aparece con su texto en
 * la portada y en el pie: quien no lo reconozca aquí lo encuentra ahí.
 */
@media (min-width: 881px) and (max-width: 1100px) {
  .cabecera__fila {
    gap: 8px;
  }
  .marca img {
    height: 44px;
  }
  .menu {
    gap: 1px;
  }
  .menu a {
    padding: 8px 7px;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
  }
  .cabecera .boton--wa {
    padding: 10px;
  }
  .cabecera .boton--wa .boton__texto {
    /* Se esconde SOLO el texto de la cabecera: los otros dos botones de
       WhatsApp de la página —portada y pie— conservan el suyo. */
    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;
  }
  /*
   * EL SALTO DE SECCIÓN TIENE QUE DEJAR SITIO A LA CABECERA ENTERA.
   *
   * Estaba en 130 px y la cabecera mide 226 px a 320 y 188 px de 360 a 430: el
   * salto dejaba el encabezado de la sección DEBAJO de la cabecera pegajosa y
   * se comía la primera línea del titular. No es un fallo nuevo —venía de
   * antes— pero salió al comprobarlo en los siete enlaces del menú, y se
   * arregla aquí porque aquí es donde se decide cuánto ocupa la cabecera.
   *
   * 180 px cubre los 226 de 320 px porque el titular lleva además 12 px de
   * margen propio y el encabezado arranca algo más abajo; se midió en 320, 360,
   * 390, 430, 620 y 820 px, que son los seis anchos que entran en este corte.
   */
  html {
    scroll-padding-top: 180px;
  }
}

@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;
}