/* Los estilos de las TRES páginas: el recorrido (index.html), las
   características y los precios.
   ⚠️ UN SOLO ARCHIVO, y estuvo dentro de index.html. Salió de ahí el día que la
   página dejó de ser una: una barra superior, un pie y un botón que se ven
   igual en tres sitios no se pueden mantener copiados en tres sitios. Es lo
   mismo que ROAD_BANDS en layout.js — tres copias de una cosa son tres
   respuestas a la misma pregunta, y la que se queda vieja nunca es la que estás
   leyendo.
   No hay empaquetador ni preprocesador: esto lo lee el navegador tal cual. */

/* ── Base ──────────────────────────────────────────────────────────────
   ⚠️ El BODY hace scroll y el CANVAS va FIJO. Esa es la mecánica entera de
   la página: la rueda del ratón mueve el recorrido —cambia de tarjeta y
   lleva la cámara a la siguiente parada— y por eso el zoom de la escena
   está apagado en main.js. Con el canvas en flujo normal, la escena se iría
   hacia arriba con el scroll y no habría recorrido que mover. */
/* ── Tipografía ────────────────────────────────────────────────────────
   ⚠️ SIN UNA SOLA FUENTE DESCARGADA. Todo el proyecto se sostiene sin pedirle
   nada a nadie —los modelos son locales, three.js está en vendor/, las
   texturas se pintan en un canvas en tiempo de ejecución— y una tipografía de
   Google sería el único recurso externo de la página, en la ruta crítica y a
   cambio de un titular.

   Las dos pilas viven aquí y no repetidas en cada regla. La tarjeta tiene seis
   sitios que piden tipografía; escritas a mano, cambiar «la fuente del
   titular» es acordarse de cuáles de los seis eran el titular. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* El titular y las cifras van en PALO SECO: se leen mejor a este tamaño y
     sobre un fondo que deja pasar el mapa. Hubo antes una pila con serifa
     (Didot / Bodoni 72 / Georgia) y la cambió el criterio de quien mira la
     página, no un problema técnico.

     ⚠️ Al pasar de una Didone a un palo seco se pierde el contraste entre
     trazos, que es lo que hacía que ese titular pesara. Hay que devolvérselo
     con GRUESO y apretando la letra: un titular grande en palo seco a peso
     normal y espaciado normal se queda plano, y parece que nadie lo maquetó.
     De ahí el 700 y el −0,025em de abajo. */
  --display: var(--sans);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ⚠️ EL SCROLL ATERRIZA EN UNA PARADA, SIEMPRE. Es lo que hace que la tarjeta
   llegue a ser opaca del todo: su opacidad sale de lo cerca que está la página
   de su parada, así que un scroll libre que se detiene a medio camino deja el
   texto translúcido sobre el mapa. Se veía como un fondo mal elegido y era una
   posición de scroll intermedia.

   `mandatory` y no `proximity`: entre dos paradas no hay ningún sitio que
   valga la pena — no es una página de texto que se pueda leer a media altura,
   son seis posiciones de cámara. Y va en `html`, que es el elemento que
   desplaza.

   ⚠️ SIN `scroll-behavior: smooth`. Lo tenía, y sobre un contenedor con
   anclaje las dos animaciones se pisan: el desplazamiento suave del navegador
   y el del anclaje tiran del mismo scroll a la vez y el aterrizaje rebota. El
   anclaje ya llega suave por su cuenta. */
html {
  scroll-snap-type: y mandatory;
}
body {
  width: 100%;
  background: #90c1e8;
  /* La barra siempre presente: si aparece y desaparece entre paradas, el
     ancho de la ventana cambia y las tarjetas dan un salto lateral. */
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
}
canvas { position: fixed; inset: 0; display: block; z-index: 0; }

/* Lo que da altura a la página. Sin contenido: sólo es el recorrido, una
   sección por parada (las crea cards.js). */
#scroll-space { position: relative; z-index: 1; pointer-events: none; }
.stop {
  height: 100vh;
  /* `start` y no `center`: la sección mide exactamente una pantalla, así que
     su borde superior contra el borde superior de la ventana deja la parada
     `i` en `i · 100vh` clavado — que es el número del que cards.js deriva el
     índice. Con `center` el último aterrizaje caería a media pantalla del
     final y la última tarjeta nunca llegaría a opaca. */
  scroll-snap-align: start;
  /* Que no se pueda quedar parado entre dos. */
  scroll-snap-stop: always;
}

/* ── Tarjetas ──────────────────────────────────────────────────────────
   La capa NO recibe puntero; cada tarjeta lo activa cuando está visible
   (ver cards.js). Si la capa lo capturara, no se podría arrastrar el mapa
   en ningún sitio de la pantalla. */
#cards {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
}

.card {
  position: absolute;
  top: 50%;
  width: min(38vw, 520px);
  padding: 40px 44px;
  /* El fondo pedido: blanco casi opaco. Deja adivinar el mapa por debajo
     sin que el texto pierda contraste. */
  background-color: #fffffffa;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 30, 40, .18), 0 2px 6px rgba(20, 30, 40, .08);
  opacity: 0;
  transition: opacity .45s ease;
  will-change: opacity, transform;
}
.card--left  { left: clamp(20px, 4vw, 72px);  transform: translateY(calc(-50% + var(--lift, 0px))); }
.card--right { right: clamp(20px, 4vw, 72px); transform: translateY(calc(-50% + var(--lift, 0px))); }
/* La última, la del cierre: al medio y sin lado.
   ⚠️ Es la ÚNICA que se centra, y por eso mismo funciona — el lado ha
   significado algo durante diez paradas, así que perderlo dice «esto ya no es
   una parada más». Ahí es donde se pide la reunión. */
.card--center {
  left: 50%; width: min(52vw, 620px); text-align: center;
  transform: translate(-50%, calc(-50% + var(--lift, 0px)));
}
.card--center .card__body { max-width: none; }
.card--center .card__actions { justify-content: center; }

/* La primera: casi la mitad de la pantalla, y la única con botones y cifras. */
.card--hero { width: min(46vw, 660px); padding: 48px 52px 44px; }

.card__eyebrow {
  font: 600 11.5px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c0563d;                 /* el mismo rojo con el que está pintado el letrero de la portería */
  margin-bottom: 18px;
}
.card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(29px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #14181c;
  margin-bottom: 22px;
}
.card--hero .card__title { font-size: clamp(38px, 4.2vw, 62px); }
.card__line { display: block; }

.card__body {
  font: 400 15px/1.68 var(--sans);
  color: #454b52;
  max-width: 46ch;
}
.card--hero .card__body { font-size: 16px; }
.card__body strong { color: #14181c; font-weight: 600; }
.card__body em { font-style: italic; }

.card__list {
  list-style: none;
  margin-top: 20px;
  font: 400 14px/1.55 var(--sans);
  color: #454b52;
}
.card__list li { position: relative; padding-left: 18px; margin-top: 9px; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: #c0563d;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 4px;
  font: 600 14px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background-color .2s ease, color .2s ease;
}
.btn--primary { background: #c0563d; color: #fff; }
.btn--primary:hover { background: #a8493a; }
.btn--ghost { border: 1.5px solid #14181c; color: #14181c; }
.btn--ghost:hover { background: #14181c; color: #fff; }

/* ── El pie del hero ───────────────────────────────────────────────────
   Dos frases apiladas, no tres columnas de cifras. Aquí había una rejilla de
   tres estadísticas («0,5 s», «Sin señal», «1 base») y se fue entera: son el
   tipo de dato que se lee después de estar interesado, no lo que hace que
   alguien lo esté. */
.card__notes {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #ddd8cf;
}
/* La mediana usa la variable del titular, y a propósito: es una frase de
   titular, no de texto. Escrita a mano aquí, cambiar la del titular dejaría la
   tarjeta con un titular de un palo y un pie de otro — que se lee como un
   descuido, no como una decisión. */
.note--md {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: #14181c;
}
.note--sm {
  font: 400 12px/1.5 var(--sans);
  color: #6b7278;
  margin-top: 8px;
}

/* ── Pantallas estrechas ───────────────────────────────────────────────
   ⚠️ Debajo de 900 px TODAS caen al mismo sitio: una hoja abajo, a lo ancho.
   Una maqueta que sólo funciona porque una tarjeta está a la izquierda es una
   maqueta que se rompe en un teléfono, y el lado deja de significar nada
   cuando no hay espacio a los lados. */
@media (max-width: 900px) {
  .card, .card--hero, .card--center {
    width: auto;
    left: 12px; right: 12px;
    top: auto; bottom: 16px;
    padding: 26px 24px;
    transform: translateY(var(--lift, 0px));
    border-radius: 14px;
    max-height: 72vh; overflow-y: auto;
  }
  .card--hero .card__title { font-size: clamp(28px, 8vw, 40px); }
  .card__notes { margin-top: 22px; padding-top: 18px; }
  .note--md { font-size: 19px; }
}

/* ── Instrumental (sólo con ?ui=1) ─────────────────────────────────────── */
#hud {
  position: fixed; left: 16px; bottom: 16px; z-index: 10;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  pointer-events: none;
}
#hud b { font-weight: 600; letter-spacing: .04em; }
#hud span { opacity: .72; }

#readout {
  position: fixed; left: 16px; top: 16px; z-index: 10;
  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
  white-space: pre;
}

#boot {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: #90c1e8; color: #fff;
  font: 500 14px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .6s ease;
}
#boot.done { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRA SUPERIOR
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ FIJA Y POR ENCIMA DEL LIENZO, y sobre el recorrido va SIN FONDO. La
   página es un mapa que ocupa la pantalla entera; una barra con fondo sólido
   le pone un marco arriba y lo convierte en un vídeo incrustado. Sobre el mapa
   sólo lleva un degradado oscuro muy suave, que es lo que hace legible el
   texto blanco contra un cielo claro sin dibujar un borde.

   En las páginas de documento (`.chrome--solid`) sí es sólida: allí no hay
   mapa detrás, y una barra flotando sobre texto que sube por debajo es un
   problema de lectura. */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(16px, 4vw, 40px);
  height: 62px;
}
.chrome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(12,20,28,.34), rgba(12,20,28,0));
  pointer-events: none;
}
.chrome--solid {
  background: #fffffff2;
  border-bottom: 1px solid #e4ded3;
}
.chrome--solid::before { display: none; }

.chrome__brand {
  display: flex; align-items: center; gap: 9px;
  margin-right: auto;
  text-decoration: none;
}
.chrome__brand img { width: 30px; height: 30px; display: block; }
.chrome__brand b {
  font: 700 17px/1 var(--display);
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.chrome--solid .chrome__brand b { color: #14181c; text-shadow: none; }

.chrome__nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 26px); }
.chrome__nav a {
  font: 600 13.5px/1 var(--sans);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.chrome--solid .chrome__nav a { color: #454b52; text-shadow: none; }
.chrome__nav a:hover { border-bottom-color: currentColor; }
/* La página en la que estás, marcada. Sin esto, tres enlaces iguales en tres
   páginas no dicen dónde está uno. */
.chrome__nav a[aria-current] { border-bottom-color: #c0563d; color: #fff; }
.chrome--solid .chrome__nav a[aria-current] { color: #c0563d; }

.chrome__cta {
  background: #c0563d; color: #fff !important;
  padding: 9px 16px !important;
  border-radius: 4px;
  border-bottom: 0 !important;
  text-shadow: none !important;
}
.chrome__cta:hover { background: #a8493a; }

/* ⚠️ Por debajo de 720 px el botón se va y los enlaces se aprietan. Un botón
   más tres enlaces más la marca no caben en un teléfono, y lo que pasa cuando
   no caben es que la barra crece a dos líneas y se come la primera tarjeta. */
@media (max-width: 720px) {
  .chrome { height: 54px; gap: 12px; }
  .chrome__cta { display: none; }
  .chrome__brand b { font-size: 15px; }
  .chrome__nav a { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAS PÁGINAS DE DOCUMENTO — características y precios
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ SON PÁGINAS APARTE Y NO SECCIONES DEL RECORRIDO, y hay tres razones que
   no son de gusto:

     · el recorrido vive de `scroll-snap-type: y mandatory`, del que cuelga la
       opacidad de cada tarjeta. Colgarle un documento largo debajo es pelearse
       con el anclaje en cada rueda de ratón;
     · una matriz de veinticinco módulos y una tabla de precios son documentos:
       se enlazan, se imprimen y se reenvían al consejo. Eso no se puede hacer
       con la parada número siete de un scroll;
     · el recorrido pesa 2,2 MB de modelos. Quien hace clic en «Precios» no
       tiene por qué esperar a que carguen mil pinos para ver tres números. */
body.doc {
  background: #f6f2ea;
  padding-top: 62px;
}
@media (max-width: 720px) { body.doc { padding-top: 54px; } }

.wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.wrap--narrow { width: min(760px, calc(100% - 40px)); }

.doc-hero { padding: clamp(44px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); }
.doc-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 5vw, 54px); line-height: 1.08; letter-spacing: -.03em;
  color: #14181c;
}
.doc-hero p {
  font: 400 17px/1.6 var(--sans);
  color: #5b6169; max-width: 56ch; margin-top: 18px;
}

.sec { padding: clamp(28px, 4vw, 52px) 0; }
/* ⚠️ DOS SELECTORES, y el segundo no es adorno. Las secciones con banda
   (`.sec--band`) necesitan un `.wrap` por dentro para que el fondo llegue de
   borde a borde mientras el texto se queda centrado — así que ahí el titular es
   NIETO de la sección y `.sec > h2` no lo tocaba. El resultado era un `<h2>` con
   el estilo del navegador (Times, 2em) y un párrafo sin margen inferior, pegado
   a las fichas de abajo. Se veía como un descuido de maquetación y era un
   combinador. */
.sec > h2,
.sec > .wrap > h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; color: #14181c;
  margin-bottom: 8px;
}
.sec > .lead,
.sec > .wrap > .lead {
  font: 400 15px/1.65 var(--sans); color: #5b6169;
  max-width: 62ch; margin-bottom: 26px;
}
.sec--band { background: #fff; border-block: 1px solid #e8e2d8; }

.rule { border: 0; border-top: 1px solid #e4ded3; margin: 0; }

/* ── Rejilla de fichas ─────────────────────────────────────────────────── */
/* ⚠️ 288 y no 258, y el número lo decide CUÁNTAS fichas hay. A 258 el ancho de
   1.080 daba CUATRO columnas, y los dos grupos de esta web tienen SEIS fichas:
   cuatro arriba y dos huérfanas debajo, con media fila de blanco al lado. Tres
   y tres se lee como una rejilla; cuatro y dos se lee como que faltan dos. */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
/* Para los grupos de CUATRO, que con tres columnas quedarían 3 + 1. */
.grid--par { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tile {
  background: #fff; border: 1px solid #e8e2d8; border-radius: 12px;
  padding: 22px 22px 24px;
}
.sec--band .tile { background: #fbf9f5; }
.tile h3 {
  font: 600 16px/1.3 var(--sans); color: #14181c;
  margin-bottom: 9px; letter-spacing: -.01em;
}
.tile p { font: 400 14px/1.6 var(--sans); color: #5b6169; }
.tile p + p { margin-top: 10px; }
.tile em { color: #454b52; font-style: italic; }
.tile strong { color: #14181c; font-weight: 600; }

.mods { display: grid; gap: 0; }
.mod {
  display: grid; grid-template-columns: 1fr; gap: 6px 20px;
  align-items: baseline;
  padding: 18px 0; border-top: 1px solid #e4ded3;
}
.mod:first-child { border-top: 0; }
.mod h3 { font: 600 16px/1.3 var(--sans); color: #14181c; letter-spacing: -.01em; }
.mod p { grid-column: 1 / -1; font: 400 14px/1.62 var(--sans); color: #5b6169; max-width: 74ch; }
.mod p strong { color: #14181c; font-weight: 600; }


/* ── Los planes ───────────────────────────────────────────────────────────
   Tres columnas y el de en medio destacado. El precio va grande y el «+ IVA»
   pegado a él: si el impuesto aparece después, en el carrito o en la
   propuesta, se lee como letra menuda. */
.tiers { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); align-items: start; }
/* ⚠️ EL HUECO DE LA ETIQUETA SE RESERVA EN LOS TRES. «El más común» sólo lo
   lleva uno, y en el flujo normal empujaba su titular hacia abajo: los tres
   nombres quedaban a dos alturas distintas y los tres precios también. Sacada
   del flujo, la etiqueta vive en el relleno superior que TODOS tienen, y las
   tres columnas se leen en línea. */
.tier {
  position: relative;
  background: #fff; border: 1px solid #e8e2d8; border-radius: 14px;
  padding: 44px 26px 30px;
}
.tier--pick { border: 2px solid #c0563d; box-shadow: 0 14px 34px rgba(192,86,61,.12); }
.tier__tag {
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: #c0563d; display: block;
  position: absolute; top: 20px; left: 26px;
}
.tier h3 { font-family: var(--display); font-weight: 700; font-size: 21px; color: #14181c; letter-spacing: -.02em; }
.tier__size { font: 400 13.5px/1.5 var(--sans); color: #6b7278; margin-top: 4px; }
.tier__price {
  font-family: var(--display); font-weight: 700;
  font-size: 36px; line-height: 1.1; letter-spacing: -.03em; color: #14181c;
  margin-top: 20px;
}
.tier__price span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #6b7278; }
.tier__year {
  font: 400 13.5px/1.5 var(--sans); color: #454b52;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid #eee7dc;
}
.tier__year b { color: #14181c; font-weight: 600; }

/* Lo que trae el plan. Es la MISMA lista en los tres, y eso se ve de un
   vistazo: lo que cambia entre planes es el tamaño de la copropiedad, no lo que
   viene dentro. Repetirla en cada columna dice eso mejor que una nota al pie
   que hay que ir a buscar. */
.tier__list { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.tier__list li {
  position: relative; padding-left: 24px;
  font: 400 14px/1.45 var(--sans); color: #454b52;
}
.tier__list li::before {
  content: ""; position: absolute; left: 3px; top: .28em;
  width: 11px; height: 6px;
  border-left: 2px solid #c0563d; border-bottom: 2px solid #c0563d;
  transform: rotate(-45deg);
}

/* ── Preguntas ───────────────────────────────────────────────────────────── */
.qa { border-top: 1px solid #e4ded3; padding: 20px 0; }
.qa h3 { font: 600 15.5px/1.4 var(--sans); color: #14181c; margin-bottom: 8px; }
.qa p { font: 400 14px/1.65 var(--sans); color: #5b6169; max-width: 72ch; }
.qa p strong { color: #14181c; font-weight: 600; }

/* ── El remate de las páginas de documento ───────────────────────────────── */
.cta {
  background: #14181c; color: #fff;
  border-radius: 16px; padding: clamp(30px, 5vw, 50px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  justify-content: space-between;
}
.cta h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em;
}
.cta p { font: 400 14.5px/1.6 var(--sans); color: #b9bfc6; margin-top: 10px; max-width: 46ch; }
.cta .btn--primary { background: #c0563d; }
.cta .btn--ghost { border-color: #fff; color: #fff; }
.cta .btn--ghost:hover { background: #fff; color: #14181c; }

/* ── El pie ──────────────────────────────────────────────────────────────── */
.foot {
  padding: 40px 0 54px;
  font: 400 13px/1.7 var(--sans); color: #6b7278;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
}
.foot a { color: #454b52; }
.foot__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 20px; }
@media (max-width: 640px) { .foot__legal { margin-left: 0; } }

/* ── Iconos ────────────────────────────────────────────────────────────────
   Trazo de Tabler, inline, heredando el color del texto — ver src/icons.js.

   ⚠️ EL HUECO SE RESERVA AQUÍ. El SVG lo mete JavaScript un cuadro después de
   pintar la página, así que sin un ancho y un alto fijos en la caja vacía los
   treinta iconos empujarían su titular al entrar y la página daría un tirón con
   el texto ya leyéndose. Con la caja reservada, lo único que ocurre es que el
   dibujo aparece.

   ⚠️ Y VA EN UNA CAJA CON FONDO, no suelto sobre el papel. Un icono de trazo a
   22 px sobre blanco se pierde al lado de un titular en negrita de 16; el
   cuadrado tenue le da peso y hace que la lista se recorra por los dibujos,
   que es para lo que están. */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 9px;
  background: #f4ece3;
  color: #c0563d;
}
.sec--band .ico { background: #f6f1e9; }
.ico__svg { display: block; }

/* En una ficha, el icono va ENCIMA del titular y no a su lado: el titular de
   una ficha ocupa dos líneas y un icono al lado le roba el ancho justo donde
   más falta hace. */
.tile .ico { margin-bottom: 14px; }

/* En la lista de módulos va a la izquierda, con el titular al lado — ahí es
   una columna que se recorre con el ojo, y la sangría es lo que hace que se
   lea como lista. */
.mod {
  grid-template-columns: 38px 1fr;
  column-gap: 14px;
}
.mod .ico { grid-row: 1 / span 2; align-self: start; margin-top: -3px; }
.mod p { grid-column: 2 / -1; }
@media (max-width: 560px) {
  .mod .ico { grid-row: 1 / span 2; }
  .mod p { grid-column: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL FORMULARIO DE CONTACTO
   ══════════════════════════════════════════════════════════════════════════ */
.form-wrap {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .form-wrap { grid-template-columns: 1fr; } }

.form {
  background: #fff; border: 1px solid #e8e2d8; border-radius: 14px;
  padding: clamp(22px, 3vw, 34px);
  display: grid; gap: 18px;
}
.campo { display: grid; gap: 7px; }
.campo-par { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .campo-par { grid-template-columns: 1fr; } }

.campo label { font: 600 13.5px/1.3 var(--sans); color: #14181c; }
.req { color: #c0563d; }

.campo input, .campo textarea {
  font: 400 15px/1.45 var(--sans);
  color: #14181c;
  background: #fbf9f5;
  border: 1px solid #ddd6ca;
  border-radius: 8px;
  padding: 12px 13px;
  width: 100%;
  /* Sin esto, Safari en iOS pinta sus propios campos y el formulario deja de
     parecerse al resto de la página. */
  -webkit-appearance: none; appearance: none;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: #c0563d;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192, 86, 61, .12);
}
.campo input::placeholder, .campo textarea::placeholder { color: #a9b0b7; }

.pista { font: 400 12.5px/1.5 var(--sans); color: #7c848b; }
.cuenta { font: 400 12px/1 var(--sans); color: #9aa1a8; justify-self: end; }
/* Que se note ANTES de que el campo deje de aceptar letras. Un `maxlength` que
   corta sin avisar se siente como que el teclado falla. */
.cuenta--tope { color: #c0563d; font-weight: 600; }

/* ⚠️ EL CEBO: fuera de la pantalla, no `display:none`. Hay bots que descartan
   lo que está oculto de la forma evidente, y un campo que no existe para el
   navegador tampoco se rellena. Así queda invisible para una persona y bien
   presente en el formulario. */
.cebo {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.aviso {
  font: 500 14px/1.5 var(--sans);
  border-radius: 8px; padding: 12px 14px;
}
.aviso--mal { background: #fbe9e5; color: #8e3524; border: 1px solid #f0cec6; }

.form-pie { display: grid; gap: 14px; }
.form-pie .btn { justify-self: start; border: 0; cursor: pointer; }
.form-pie .btn[disabled] { opacity: .6; cursor: default; }
.legal { font: 400 12px/1.55 var(--sans); color: #7c848b; max-width: 54ch; }
.legal a { color: #454b52; }

.gracias {
  background: #fff; border: 2px solid #c0563d; border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
}
.gracias h2 {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; color: #14181c; margin-bottom: 10px;
}
.gracias p { font: 400 15px/1.6 var(--sans); color: #5b6169; max-width: 52ch; }

.form-lado { display: grid; gap: 14px; }
.form-lado .tile { padding: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   DOCUMENTOS LEGALES — /terminos/ y /privacidad/
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ ESTAS PÁGINAS NO SE ESCRIBEN A MANO. Las genera
   `juntox/scripts/legal-publish.js` desde el MISMO .md que congela la versión
   en la base de datos, que es lo que impide que el texto publicado y el texto
   que alguien aceptó dentro de la app se separen. Retocar el HTML servido se
   perdería en la próxima versión y además dejaría dos textos distintos con el
   mismo número.
   Lo que se toca es la plantilla del generador. Estos estilos están AQUÍ para
   que la hoja del sitio siga siendo una sola: la plantilla enlaza este archivo
   como cualquier otra página. */
.legal-doc {
  font: 400 16px/1.72 var(--sans);
  color: #454b52;
  padding-bottom: 24px;
}
.legal-doc h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.025em;
  color: #14181c; margin-bottom: 22px;
}
.legal-doc h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 21px; letter-spacing: -.02em; color: #14181c;
  margin: 40px 0 12px;
}
.legal-doc h3 { font: 600 17px/1.35 var(--sans); color: #14181c; margin: 28px 0 10px; }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { margin-bottom: 7px; }
.legal-doc a { color: #c0563d; }
.legal-doc strong { color: #14181c; font-weight: 600; }
.legal-doc blockquote {
  margin: 0 0 20px; padding: 14px 18px;
  background: #fbf9f5; border-left: 3px solid #ddd6ca; border-radius: 8px;
}
.legal-doc code {
  background: #f3ede4; padding: 1px 5px; border-radius: 4px;
  font-size: .9em; word-break: break-word;
}

/* ⚠️ La tabla scrollea DENTRO de su caja, no arrastra la página. Un documento
   legal trae tablas de cinco columnas —los datos que se tratan, con su
   finalidad y su base legal— y en un teléfono eso es más ancho que la pantalla
   pase lo que pase. Sin el contenedor, el que scrollea es el documento entero y
   el texto se sale por la izquierda. */
.legal-doc .tabla-scroll { overflow-x: auto; margin: 0 0 20px; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal-doc th, .legal-doc td {
  border: 1px solid #e4ded3; padding: 9px 12px;
  text-align: left; vertical-align: top;
}
.legal-doc th { background: #fbf9f5; color: #14181c; font-weight: 600; }

/* El sello de versión y su huella. Va ARRIBA del texto a propósito: es lo que
   contesta «¿qué estoy leyendo exactamente?» antes de leerlo. */
.sello {
  background: #fff; border: 1px solid #e8e2d8; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 34px;
  font: 400 13.5px/1.6 var(--sans); color: #7c848b;
}
.sello strong { color: #14181c; font-weight: 600; }
.sello code {
  display: inline-block; margin-top: 4px;
  font-size: 11.5px; word-break: break-all; color: #5b6169;
  background: #f6f2ea; padding: 3px 6px; border-radius: 4px;
}

/* Lo propio de /eliminar-cuenta/, que es la única de las tres páginas de esa
   familia escrita a mano (las otras dos las genera legal-publish.js). Sus tres
   clases vivían en el `<style>` que se le quitó al pasarla a esta hoja. */
.legal-doc ol.pasos { margin: 0 0 20px; padding-left: 22px; }
.legal-doc ol.pasos li { margin-bottom: 9px; }
.legal-doc .tarjeta {
  background: #fff; border: 1px solid #e8e2d8;
  border-radius: 12px; padding: 20px 22px; margin-bottom: 18px;
}
.legal-doc .tarjeta h2 { margin-top: 0; }
.legal-doc .nota { font-size: 14.5px; color: #7c848b; }

/* ══════════════════════════════════════════════════════════════════════════
   TELÉFONO — los dos rótulos y la navegación por parada
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ 900 px otra vez: es el mismo corte donde las tarjetas pierden su lado y
   caen a una hoja abajo, y el mismo que CFG.camera.narrowWidth usa para elegir
   la pose de la cámara. Tres cosas que tienen que cambiar A LA VEZ o la página
   queda a medio camino entre dos diseños. */
.solo-movil { display: none; }
@media (max-width: 900px) {
  .solo-ancho { display: none; }
  .solo-movil { display: inline; }
}

/* Fuera del teléfono no existen. */
.card__nav { display: none; }

@media (max-width: 900px) {
  /* Abajo del todo de la tarjeta, separados por una línea: es un mando, no
     parte del texto, y mezclarlo con el contenido hace dudar de si «Siguiente»
     es un enlace más de la lista. */
  .card__nav {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid #ece5da;
  }

  .navbtn {
    -webkit-appearance: none; appearance: none;
    background: #f6f2ea; border: 1px solid #e2dacd; border-radius: 999px;
    color: #14181c; font: 600 14px/1 var(--sans);
    /* ⚠️ 44 px de alto MÍNIMO. Es el tamaño que Apple pide para que un pulgar
       acierte, y por debajo de eso el botón se falla — que en una tarjeta con
       un mapa detrás significa arrastrar la escena sin querer. */
    min-height: 44px; padding: 0 18px;
    display: inline-flex; align-items: center; gap: 9px;
    cursor: pointer;
  }
  .navbtn:active { background: #ece5da; }

  /* La flecha, dibujada con dos bordes girados — el mismo truco que la palomita
     de los planes. Cero bytes y cero peticiones: esta página ya carga 1,7 MB de
     modelos y no va a pedir un icono para pintar un ángulo. */
  .navbtn::before {
    content: ""; width: 8px; height: 8px;
    border-top: 2px solid #c0563d; border-right: 2px solid #c0563d;
  }
  .navbtn--prev::before { transform: rotate(-135deg); margin-right: -2px; }
  .navbtn--next::before { order: 2; transform: rotate(45deg); margin-left: -2px; }

  /* Cuando falta uno de los dos —la última no tiene «siguiente»— el hueco lo
     ocupa un <span> vacío para que el otro no se centre de repente. */
  .card__nav > span { flex: 0 0 auto; }
}