/* ============================================================================
   Páginas de aterrizaje: un servicio, una ciudad

   Lo cargan las páginas del plan de SEO.md (diseno-web-cancun.html y las que
   sigan), más el índice del final de servicios.html.

   Los tokens y la base siguen en styles.css, que va primero. Esta hoja no
   declara ni un color ni una fuente propia: el gate la audita con las mismas
   reglas que las otras (HOJAS_CON_TOKENS en tests/gate.mjs).

   ---

   POR QUÉ UNA HOJA COMPARTIDA Y NO UNA POR PÁGINA

   El resto del sitio tiene una hoja por página porque cada página es una pieza
   distinta: el descenso del cordón, el comercial, la consola del método. Estas
   no. Son doce páginas con la misma estructura y distinto texto, y su trabajo
   es rankear y convertir, no sorprender. Una hoja por página serían doce copias
   del mismo layout separándose entre sí desde el primer cambio.

   La consecuencia es la regla: **acá no se diseña por página.** Si una
   aterrizaje necesita un bloque que no está en esta hoja, el bloque se agrega
   acá y sirve para las doce, o no se agrega.

   ---

   POR QUÉ NO USA .revelar

   `.revelar` vive en internas.css, que pesa 41,4 KB y trae el comercial, la
   consola y las cinco fugas. Enlazarlo para conseguir una animación de entrada
   sería pagar todo eso por un fade. Estas páginas entran dibujadas: es más
   rápido, funciona sin JavaScript y una página cuyo trabajo es aparecer en
   Google no gana nada escondiendo su contenido hasta que el visitante baje.

   ---

   POR QUÉ NO HAY IMÁGENES

   No porque no se quieran: porque todavía no existen (PRODUCT.md § Evidence on
   Hand). La regla del proyecto es marcar el placeholder, no rellenar con banco
   de imágenes. Estas páginas se sostienen con tipografía, vidrio y aire hasta
   que haya material propio, y el día que lo haya entra en .aterrizaje sin
   rehacer el layout.
   ========================================================================= */

/* ============================================================================
   Envoltura común

   Un solo ancho de columna para toda la página. El margen sale de
   --tablero-margen, el mismo que usa el resto del sitio, para que el borde
   izquierdo del texto caiga en la misma línea vertical que en las otras
   páginas.
   ========================================================================= */

.tramo {
  padding-block: var(--unidad);
  border-top: 1px solid var(--costura-luz);
}

/* La costura de arriba es una ranura, no un borde: sombra encima y reflejo
   debajo, igual que el encuentro entre dos unidades del rack. El primer tramo
   no la lleva porque arriba tiene el hero, no otra unidad. */
.tramo + .tramo { box-shadow: inset 0 1px 0 var(--costura-sombra); }

.tramo__interior {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding-inline: var(--tablero-margen);
}

.tramo__rotulo {
  margin: 0 0 var(--u);
  color: var(--saffron);
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tramo__titulo {
  margin: 0 0 calc(var(--u) * 2);
  max-width: 24ch;
  font-size: var(--t-titulo);
  text-wrap: balance;
}

.tramo__texto {
  margin: 0 0 calc(var(--u) * 2);
  max-width: var(--medida);
  color: var(--tinta-suave);
  font-size: var(--t-cuerpo);
}

.tramo__texto:last-child { margin-bottom: 0; }

.entrega + .tramo__texto,
.marcha + .tramo__texto { margin-top: calc(var(--u) * 3); }

/* ============================================================================
   El hero

   Sin imagen y sin scroll: el titular tiene que caer entero en el primer
   viewport de un teléfono, porque es la frase que Google muestra y la que
   decide si el visitante se queda. El campo de circuito de atrás es el mismo
   recurso que la unidad 1 de servicios.html, bajado a intensidad de fondo.
   ========================================================================= */

.aterrizaje {
  position: relative;
  padding-block: calc(var(--unidad) * 1.2) var(--unidad);
  overflow: hidden;
  background: var(--negro);
}

/* La retícula. Dos degradados repetidos, sin un solo nodo del DOM: es
   decoración y no tiene por qué existir para un lector de pantalla. */
.aterrizaje::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--circuito-linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--circuito-linea) 1px, transparent 1px);
  background-size: calc(var(--u) * 6) calc(var(--u) * 6);
  /* El desvanecido hacia abajo evita el corte recto contra el tramo siguiente,
     que es lo que delata que la retícula es un fondo pegado encima. */
  mask-image: linear-gradient(to bottom, var(--negro) 0%, transparent 92%);
  pointer-events: none;
}

.aterrizaje__interior {
  position: relative;
  width: min(100%, 76rem);
  margin-inline: auto;
  padding-inline: var(--tablero-margen);
}

.aterrizaje__rotulo {
  display: inline-flex;
  margin-bottom: calc(var(--u) * 2);
}

/* --t-hero y no --t-display: el tipo más grande de la página se lo queda el
   cierre, igual que en el resto del sitio. 18ch mantiene el titular en dos o
   tres líneas parejas a cualquier ancho. */
.aterrizaje__titular {
  margin: 0 0 calc(var(--u) * 2);
  max-width: 18ch;
  font-size: var(--t-hero);
  line-height: 1.02;
  text-wrap: balance;
}

.aterrizaje__bajada {
  margin: 0 0 calc(var(--u) * 4);
  max-width: 52ch;
  color: var(--tinta-suave);
  font-size: var(--t-sub);
}

.aterrizaje__teclas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.5);
  align-items: center;
}

/* La segunda acción no compite con la primera: mismo tamaño de caja, vidrio en
   vez de saffron. Una página con dos botones amarillos no tiene ninguno. */
.aterrizaje__secundaria {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-superficie);
  color: var(--tinta);
  font: 700 var(--t-sub)/1.08 var(--fuente-titulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease);
}

.aterrizaje__secundaria:hover {
  background: var(--hud-superficie-viva);
  border-color: var(--hud-borde-fuerte);
}

button.aterrizaje__secundaria { cursor: pointer; }
.desenlace__teclas { justify-content: center; }

/* El precio en una línea bajo los botones: se lee, no compite con el titular. */
.aterrizaje__nota {
  margin: calc(var(--u) * 2) 0 0;
  color: var(--tinta-suave);
  font-size: var(--t-menor);
}

/* Sellos: la franja de cifras con una frase de resultado en vez de un número. */
.cifra__sello {
  grid-column: 1 / -1;
  max-width: 22ch;
  color: var(--tinta);
  font: 700 var(--t-sub)/1.2 var(--fuente-titulo);
  text-wrap: balance;
}

/* Cada cifra lleva la marca arriba: el isotipo en blanco, donde antes iba una raya. */
.cifra__sello::before {
  content: "";
  display: block;
  width: var(--marca);
  height: var(--marca);
  margin-bottom: calc(var(--u) * 1.5);
  background: var(--tinta);
  -webkit-mask: var(--isotipo-justo);
  mask: var(--isotipo-justo);
}

/* ============================================================================
   Puntos: tres cajas de vidrio en fila
   ========================================================================= */

.puntos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: calc(var(--u) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.punto {
  padding: calc(var(--u) * 3);
  border: 1px solid var(--hud-borde-suave);
  border-radius: var(--radio);
  background: var(--hud-superficie-tenue);
}

.punto__titulo {
  margin: 0 0 var(--u);
  font-size: var(--t-sub);
}

.punto__texto {
  margin: 0;
  /* --granito-claro y no --granito pelado: sobre la superficie teñida de las
     cajas el granito normal cae por debajo de 4.5:1. Mismo motivo y mismo
     token que las cinco fugas de servicios.html. */
  color: var(--granito-claro);
  font-size: var(--t-cuerpo);
}

/* ============================================================================
   Entrega: qué incluye, como lista marcada
   ========================================================================= */

.entrega {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--u) calc(var(--u) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entrega__item {
  position: relative;
  padding-left: calc(var(--marca) + var(--u) * 1.5);
  padding-block: calc(var(--u) * 0.75);
  color: var(--tinta);
  font-size: var(--t-cuerpo);
}

/* La marca es el isotipo (pedido de Axel, 2026-10-04: fuera las rayas), en
   blanco, que es como el manual lo admite sobre fondo oscuro. */
.entrega__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) * 0.75 + 0.1em);
  width: var(--marca);
  height: var(--marca);
  background: var(--tinta);
  -webkit-mask: var(--isotipo-justo);
  mask: var(--isotipo-justo);
}

/* ============================================================================
   Marcha: los pasos numerados
   ========================================================================= */

.marcha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: calc(var(--u) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: marcha;
}

.marcha__paso { counter-increment: marcha; }

.marcha__paso::before {
  content: counter(marcha, decimal-leading-zero);
  display: block;
  margin-bottom: var(--u);
  color: var(--bronce);
  font: 700 var(--t-sub)/1 var(--fuente-titulo);
}

.marcha__titulo {
  margin: 0 0 calc(var(--u) * 0.5);
  font-size: var(--t-cuerpo);
}

.marcha__texto {
  margin: 0;
  color: var(--tinta-suave);
  font-size: var(--t-menor);
}

/* ============================================================================
   Muestra: la prueba que sí existe

   Storf no entregó todavía ningún trabajo pago, así que no hay casos ni
   testimonios que mostrar. Lo que sí hay es este sitio y el agente corriendo
   adentro, y este bloque existe para señalarlos en vez de dejar el hueco donde
   la categoría pone logos de clientes inventados.
   ========================================================================= */

.muestra {
  padding: calc(var(--u) * 4);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: var(--hud-vidrio);
  box-shadow: 0 0 60px var(--hud-glow);
  backdrop-filter: blur(6px);
}

.muestra__titulo {
  margin: 0 0 calc(var(--u) * 2);
  max-width: 26ch;
  font-size: var(--t-sub);
  text-wrap: balance;
}

.muestra__texto {
  margin: 0 0 calc(var(--u) * 2);
  max-width: var(--medida);
  color: var(--tinta-suave);
  font-size: var(--t-cuerpo);
}

.muestra__texto:last-child { margin-bottom: 0; }

/* ============================================================================
   Preguntas frecuentes

   <details> nativo: abre y cierra sin JavaScript, es navegable por teclado y
   los lectores de pantalla ya saben qué es. El mismo texto va en el JSON-LD
   FAQPage de la página, que es lo que citan las respuestas con IA.
   ========================================================================= */

.faq {
  display: grid;
  gap: var(--u);
}

.faq__item {
  border: 1px solid var(--hud-borde-suave);
  border-radius: var(--radio);
  background: var(--hud-superficie-tenue);
}

.faq__pregunta {
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  color: var(--tinta);
  font: 600 var(--t-cuerpo)/1.3 var(--fuente-cuerpo);
  cursor: pointer;
  list-style: none;
}

/* Los tres reset del marcador son obligatorios: falta uno y queda el triángulo
   del navegador al lado del signo propio. Mismo caso que .fuga__cabecera. */
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ""; }
.faq__item summary::-webkit-details-marker { display: none; }

/* El signo de la pregunta es el isotipo. Cerrada, en blanco. Abierta, se
   enciende: la tapa saffron con la S calada, la versión principal del manual. */
.faq__pregunta::after {
  content: "";
  float: right;
  width: var(--marca-tapa);
  height: var(--marca-tapa);
  margin-left: calc(var(--u) * 2);
  border-radius: var(--radio);
  background: var(--tinta);
  -webkit-mask: var(--isotipo-en-tapa);
  mask: var(--isotipo-en-tapa);
}

.faq__item[open] .faq__pregunta::after {
  background: var(--saffron);
  -webkit-mask: var(--isotipo-en-tapa), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
  -webkit-mask-composite: xor;
  mask: var(--isotipo-en-tapa), linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
  mask-composite: exclude;
}

.faq__pregunta:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: -2px;
}

.faq__respuesta {
  margin: 0;
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 2.5);
  max-width: var(--medida);
  color: var(--granito-claro);
  font-size: var(--t-cuerpo);
}

/* ============================================================================
   Desenlace: el cierre de la página

   Acá va el tipo más grande, no arriba.
   ========================================================================= */

.desenlace {
  padding-block: calc(var(--unidad) * 1.2);
  border-top: 1px solid var(--hud-borde);
  background: var(--hud-superficie-tenue);
  text-align: center;
}

.desenlace__interior {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding-inline: var(--tablero-margen);
}

.desenlace__titulo {
  margin: 0 auto calc(var(--u) * 2);
  max-width: 16ch;
  font-size: var(--t-display);
  line-height: 1;
  text-wrap: balance;
}

.desenlace__texto {
  margin: 0 auto calc(var(--u) * 4);
  max-width: 46ch;
  color: var(--tinta-suave);
  font-size: var(--t-sub);
}

/* ============================================================================
   Índice de páginas por servicio y ciudad

   Vive acá y no en internas.css porque lo usan las dos puntas: el final de
   servicios.html, que es el hub, y el pie de cada aterrizaje. Es el cableado
   interno entre las doce páginas del plan, que es lo que reparte la fuerza
   entre ellas.
   ========================================================================= */

.indice-sitio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
  margin: 0;
  padding: 0;
  list-style: none;
}

.indice-sitio__link {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 5.5);
  padding: var(--u) calc(var(--u) * 2);
  border: 1px solid var(--hud-borde-suave);
  border-radius: var(--radio);
  background: var(--hud-superficie-tenue);
  color: var(--tinta);
  font-size: var(--t-menor);
  text-decoration: none;
  transition:
    background var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease);
}

.indice-sitio__link:hover {
  background: var(--hud-superficie-viva);
  border-color: var(--hud-borde-fuerte);
}

@media (prefers-reduced-motion: reduce) {
  .aterrizaje__secundaria,
  .indice-sitio__link {
    transition-duration: 0.001ms;
  }
}