/* ==========================================================================
   Altaria Desarrollos — hoja de estilo
   Paleta y tipografía tomadas del manual de marca:
     Negro Azabache Mate  #0D0D0D   fondo dominante
     Gris Grafito         #1E1E1E   bloques y contraste secundario
     Dorado Champagne     #C19B62   acento, isotipo y titulares
     Blanco Marfil        #F9F9F6   cuerpo de lectura
   Tipografías: Cinzel para titulares (mayúsculas, tracking amplio),
   Inter para el cuerpo.
   ========================================================================== */

:root {
  --negro: #0d0d0d;
  --grafito: #1e1e1e;
  --oro: #c19b62;
  --oro-claro: #d9bb8a;
  --marfil: #f9f9f6;
  --gris-texto: #a8a5a0;
  --borde: rgba(193, 155, 98, 0.22);

  /*
   * Semáforo de disponibilidad de lotes.
   *
   * No son colores de marca y por eso viven aparte de la paleta de arriba:
   * verde, amarillo y rojo los entiende cualquiera sin que nadie se los
   * explique, y en un plano de 30 lotes eso vale más que la coherencia
   * cromática. El dorado se queda para el marco, los títulos y los botones.
   */
  --lote-verde: #4fa96f;
  --lote-ambar: #d9a63c;
  --lote-rojo: #c8524a;

  /*
   * El azul del punto que late (aviso en vivo y preventa).
   *
   * Antes esos puntos eran rojos (#e0533f) y se pasaron a azul el 2026-10-02
   * (Cristian). El motivo es que el rojo ya significa algo en este sitio: es el
   * del semáforo de disponibilidad, «lote apartado». Un punto rojo latiendo al
   * lado de un número decía lo mismo que el semáforo sin querer decir eso.
   * Es el mismo azul de los marcadores del mapa, que no compite con el dorado.
   */
  --aviso-azul: #3d7fd6;

  /*
   * Marcadores del mapa.
   *
   * No son los colores del semáforo, aunque el rojo se le parezca: el semáforo
   * habla del ESTADO de un lote y esto de QUÉ ES cada punto del mapa. Se separan
   * para poder cambiar uno sin tocar el otro, y el rojo del terreno es más vivo
   * a propósito: tiene que encontrarse de un vistazo entre los azules.
   */
  --mapa-terreno: #d93a2f;
  --mapa-lugar: #3d7fd6;

  --titulo: "Cinzel", Georgia, "Times New Roman", serif;
  --cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --radio: 2px;
}

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

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--oro);
  text-decoration: none;
}

/* ------------------------------- tipografía ------------------------------ */

h1,
h2,
h3 {
  font-family: var(--titulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  letter-spacing: 0.1em;
}

h2 {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
}

h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

.entrada {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--oro);
  margin: 0 0 1.1rem;
  font-weight: 500;
}

.entrada::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--oro);
  margin-top: 0.85rem;
  opacity: 0.65;
}

.entrada--centrada::after {
  margin-left: auto;
  margin-right: auto;
}

p {
  margin: 0 0 1.1em;
  color: var(--gris-texto);
}

/* Un titular de dos líneas reparte mejor el peso entre ambas. En un párrafo
   largo el balanceo perjudica, así que solo se aplica a los encabezados. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* ------------------------------ foco visible ----------------------------- */
/*
 * Un solo anillo para toda la página.
 *
 * Antes, los enlaces de navegación, los botones y el logotipo no tenían
 * ninguna regla de foco: quien navega con teclado pulsaba Tab y no veía
 * dónde estaba. Los únicos campos con foco lo conseguían apagando el
 * contorno del navegador, que es justo lo contrario.
 *
 * Se usa `outline` y no `box-shadow` a propósito: el modo de alto contraste
 * del sistema conserva y recolorea el contorno, pero descarta las sombras.
 * El desplazamiento de 3px aleja el anillo de los botones dorados, donde un
 * anillo dorado no se distinguiría; fuera del botón, sobre el fondo oscuro,
 * sí se ve.
 */
:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.centrado {
  text-align: center;
}

/* -------------------------------- estructura ----------------------------- */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.seccion--grafito {
  background: var(--grafito);
}

/*
 * La foto del equipo detrás del bloque de contacto de la portada.
 *
 * El `picture` va absoluto, a sangre y detrás del contenido. El fondo grafito de
 * `seccion--grafito` se queda puesto: es lo que se ve mientras la foto carga, y
 * así la sección no parpadea en blanco.
 */
#contacto {
  position: relative;
  overflow: hidden;
}

.contacto__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contacto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * El encuadre baja un poco respecto al centro.
   *
   * La sección es mucho más ancha que alta, así que el navegador recorta la foto
   * —que es panorámica— en una banda horizontal. Con el encuadre al centro, la
   * banda se lleva techo y ventanas y deja al equipo abajo, cortado. Bajándolo,
   * las caras quedan dentro.
   */
  object-position: center 58%;
}

/*
 * El velo.
 *
 * El error de la primera versión fue tapar la foto para que el texto cupiera
 * encima: con las dos capas al 0,72 y 0,62, la esquina del texto quedaba al 89 %
 * de negro y el equipo no se veía. Lo que hace un fotógrafo es lo contrario —
 * dejar la foto y resolver la legibilidad con luz—, así que aquí:
 *
 *   · El degradado horizontal va de oscuro a claro: cierra la izquierda, donde
 *     caen el titular y el párrafo, y abre la derecha, donde está el formulario.
 *   · El vertical solo oscurece los bordes de arriba y abajo, para que la
 *     sección empalme con las de al lado en vez de cortarse con una línea recta.
 *     El centro se queda limpio, que es donde están las caras.
 *
 * Lo que no se resuelve con el velo se resuelve con sombra en el texto (abajo) y
 * con el panel del formulario, no tapando más la foto.
 */
#contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(13, 13, 13, 0.55) 0%,
      rgba(13, 13, 13, 0.12) 26%,
      rgba(13, 13, 13, 0.12) 68%,
      rgba(13, 13, 13, 0.6) 100%
    ),
    linear-gradient(90deg, rgba(13, 13, 13, 0.86) 0%, rgba(13, 13, 13, 0.2) 78%);
}

#contacto > .envoltura {
  position: relative;
  z-index: 2;
}

/*
 * Sombra en el texto que va sobre la foto.
 *
 * Es lo que permite bajar el velo sin perder legibilidad: la sombra oscurece
 * justo debajo de cada letra —donde molesta el fondo claro— sin tocar el resto
 * de la foto. No se nota como sombra; se nota como que el texto se despega.
 */
.seccion--foto .rejilla > div:first-child {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
}

/*
 * El formulario, sobre su propio panel.
 *
 * Sus campos ya son negros y opacos, pero las etiquetas («NOMBRE*», «TELÉFONO»)
 * van sueltas sobre el fondo, y sobre una foto clara no se leen. El panel las
 * recoge y, de paso, convierte el formulario en una pieza con borde en vez de
 * una columna de campos flotando.
 */
.seccion--foto .formulario {
  padding: 30px 28px;
  background: rgba(13, 13, 13, 0.62);
  border: 1px solid var(--borde);
  backdrop-filter: blur(3px);
}

/* Y el aviso legal de debajo, que también va sobre la foto. */
.seccion--foto .aviso,
.seccion--foto .campo label {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.borde-oro {
  border-top: 1px solid var(--borde);
}

/* -------------------------------- cabecera ------------------------------- */

.cabecera {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 20px 0;
}

.cabecera .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cabecera img {
  height: 46px;
  width: auto;
}

.cabecera nav {
  display: flex;
  gap: 26px;
  align-items: center;
}

.cabecera nav a {
  color: var(--marfil);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

.cabecera nav a:hover {
  color: var(--oro);
  opacity: 1;
}

/* El grupo de la derecha: el botón de vuelta y la navegación, que en el móvil
   desaparece mientras el botón se queda. */
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 22px;
}

/*
 * Botón de vuelta a la portada.
 *
 * Con borde y no como un enlace del menú: tiene que leerse como una acción. El
 * texto es corto a propósito —«Inicio»— porque comparte fila con el logo en
 * pantallas de 390 px, donde «Volver al inicio» no cabe.
 */
.cabecera__volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  color: var(--marfil);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: border-color 0.18s, color 0.18s;
}

.cabecera__volver:hover {
  border-color: var(--oro);
  color: var(--oro);
}

@media (max-width: 760px) {
  .cabecera nav {
    display: none;
  }
  .cabecera img {
    height: 36px;
  }
}

/* --------------------------------- héroe --------------------------------- */

.heroe {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 130px 0 70px;
  overflow: hidden;
  background: var(--negro);
}

.heroe__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.heroe__media img,
.heroe__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * El <picture> es un envoltorio, no un elemento visible, pero sí genera caja:
 * sin ocupar el 100% el img de dentro no tendría contra qué medirse.
 */
.heroe__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Las dos versiones del héroe (panorámica y vertical) se recortan centradas
 * sobre el sujeto, así que aquí basta con centrar. Si alguna foto necesitara
 * otro punto de mira, se ajusta en medios/_focos.json, no aquí.
 */
.heroe__media img {
  object-position: center;
}

/* Velo oscuro: garantiza que el texto se lea sobre cualquier fotografía. */
.heroe__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.82) 0%,
    rgba(13, 13, 13, 0.62) 45%,
    rgba(13, 13, 13, 0.94) 100%
  );
}

/*
 * El héroe con plano: el texto a la izquierda y el plano de lotificación a la
 * derecha, en el hueco que quedaba vacío en los proyectos sin fotografía.
 *
 * La clase la pone el generador solo cuando hay plano, así que las landings sin
 * plano conservan el héroe de una columna tal como estaba.
 */
.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 50px;
  align-items: center;
}

.heroe__plano {
  margin: 0;
}

/*
 * El plano se sirve entero, sin recortar, sobre un fondo marfil que es el suyo.
 *
 * El borde y la sombra no son adorno: separan el papel blanco del plano del fondo
 * oscuro del héroe. Sin ellos, el rectángulo brillante parece un error de carga.
 */
.heroe__plano img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--marfil);
  border: 1px solid var(--borde);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.heroe__plano-enlace {
  display: block;
  transition: transform 0.18s;
}

.heroe__plano-enlace:hover {
  transform: translateY(-3px);
}

.heroe__plano figcaption {
  margin-top: 14px;
  color: var(--gris-texto);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
  /* Reparte las palabras entre las dos líneas en vez de dejar una sola —«Xoxtla»
     colgando— al final. */
  text-wrap: balance;
}

/* ------------------- la imagen de la sección de lotes --------------------- */

/*
 * La sección de disponibilidad de Juquila lleva el render de la lotificación en
 * lugar del plano interactivo.
 *
 * A todo el ancho de la envoltura y con la proporción del archivo: la imagen
 * lleva los números de lote dentro y recortarla sería comerse justo lo que se
 * quiere que se lea. Por eso no hay alto fijo ni `object-fit`.
 */
.seccion__figura {
  margin: 30px 0 0;
}

.seccion__figura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borde);
}

.seccion__figura figcaption {
  margin-top: 12px;
  color: var(--gris-texto);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* --------------------------- carrusel del héroe --------------------------- */

/*
 * El carrusel ocupa el mismo hueco que el plano de Tepactepec: a un costado del
 * texto, dentro del héroe.
 *
 * La caja tiene proporción fija (4:3) a propósito. Dentro conviven un render de
 * 2:1 y un plano de 2:3; si la caja creciera con cada imagen, el héroe daría un
 * salto de altura cada vez que alguien pasa de diapositiva, y el texto de al
 * lado se movería con él.
 */
.heroe__carrusel {
  margin: 0;
}

.carrusel__marco {
  position: relative;
  /* La proporción la pone la ficha del proyecto (`_carrusel.json`); 4:3 es la
     que mejor reparte renders apaisados y planos. */
  aspect-ratio: var(--carrusel-proporcion, 4 / 3);
  background: #0a0a0a;
  border: 1px solid var(--borde);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.carrusel__pista {
  position: absolute;
  inset: 0;
}

.carrusel__toma {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* El atributo `hidden` basta, pero se declara por si algún día alguien le pone
   un `display` a la diapositiva y deja de ocultarse sola. */
.carrusel__toma[hidden] {
  display: none;
}

.carrusel__toma:not([hidden]) {
  animation: carruselAparecer 320ms ease both;
}

@keyframes carruselAparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.carrusel__abrir {
  display: block;
  width: 100%;
  height: 100%;
}

.carrusel__toma img {
  display: block;
  width: 100%;
  height: 100%;
  /* Por defecto, entera. Recortar es lo que hay que pedir, imagen a imagen:
     un plano recortado pierde justo las cotas y los lotes de las orillas. */
  object-fit: contain;
}

.carrusel__toma img[data-ajuste="cover"] {
  object-fit: cover;
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.74);
  color: var(--dorado);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.carrusel__flecha svg {
  width: 18px;
  height: 18px;
}

.carrusel__flecha:hover,
.carrusel__flecha:focus-visible {
  background: rgba(13, 13, 13, 0.92);
  border-color: var(--dorado);
}

.carrusel__flecha--antes {
  left: 10px;
}

.carrusel__flecha--despues {
  right: 10px;
}

.carrusel__pie {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: var(--gris-texto);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Dos líneas reservadas: los pies no miden lo mismo y, sin el hueco, los puntos
   de abajo subirían y bajarían en cada cambio. */
.carrusel__texto {
  flex: 1;
  min-height: 2.8em;
  text-wrap: pretty;
}

.carrusel__cuenta {
  color: var(--dorado);
  white-space: nowrap;
}

.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}

/* El punto se ve de 8 px pero se pulsa en 26: un blanco de 8 px no se acierta
   con el dedo. */
.carrusel__punto {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Los puntos de paginación no pueden usar el dorado al 22 % de `--borde`: a 8 px
   y sobre una fotografía clara no se ven. */
.carrusel__punto::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(214, 206, 196, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.45);
  transition: background 160ms ease, border-color 160ms ease;
}

.carrusel__punto[aria-current="true"]::after {
  background: var(--dorado);
  border-color: var(--dorado);
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__toma:not([hidden]) {
    animation: none;
  }
}

/* En pantalla estrecha, el plano y el carrusel pasan debajo del texto y se
   centran. */
@media (max-width: 980px) {
  .heroe__rejilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .heroe__plano,
  .heroe__carrusel {
    max-width: 420px;
    margin: 0 auto;
  }
}

.heroe .envoltura {
  position: relative;
  z-index: 1;
}

.heroe__caja {
  max-width: 760px;
}

/* Hueco reservado para la fotografía o el vídeo de dron.
   Va como etiqueta discreta en la esquina inferior: si se centrara, quedaría
   por debajo del titular y el texto se solaparía. */
.media-pendiente {
  position: absolute;
  /*
   * A la izquierda, no a la derecha: abajo a la derecha vive el botón flotante
   * de WhatsApp y en móvil se solapaban. Mientras el aviso siga en la página
   * tiene que poder leerse.
   */
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 13, 13, 0.72);
  border: 1px dashed rgba(193, 155, 98, 0.4);
  border-radius: var(--radio);
  padding: 8px 14px;
  /* #6d6963 medía 3.56:1 sobre el fondo, por debajo del mínimo de 4.5:1, y a
     0.62rem el texto quedaba por debajo de cualquier suelo tipográfico. Este
     marcador desaparece cuando se sustituya por el vídeo real, pero mientras
     esté en la página tiene que poder leerse. */
  color: var(--gris-texto);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  max-width: calc(100% - 28px);
  z-index: 1;
}

.media-pendiente strong {
  color: var(--oro);
  font-weight: 500;
  white-space: nowrap;
}

.media-pendiente span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .media-pendiente span {
    display: none;
  }
}

/* ------------------------------- mensualidad ----------------------------- */

.mensualidad {
  margin: 26px 0 30px;
  padding: 22px 26px;
  border-left: 2px solid var(--oro);
  background: rgba(255, 255, 255, 0.035);
}

.mensualidad__etiqueta {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--oro);
  margin-bottom: 6px;
}

.mensualidad__cifra {
  font-family: var(--titulo);
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  color: var(--marfil);
  line-height: 1;
  letter-spacing: 0.02em;
}

.mensualidad__cifra small {
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--gris-texto);
}

.mensualidad__nota {
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin: 10px 0 0;
}

/* --------------------------------- botones ------------------------------- */

.boton {
  display: inline-block;
  padding: 15px 38px;
  border: 1px solid var(--oro);
  background: var(--oro);
  color: var(--negro);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border-radius: var(--radio);
}

.boton:hover {
  background: transparent;
  color: var(--oro);
}

.boton--fantasma {
  background: transparent;
  color: var(--oro);
}

.boton--fantasma:hover {
  background: var(--oro);
  color: var(--negro);
}

.boton--ancho {
  width: 100%;
  text-align: center;
}

/*
 * Botón con un icono delante del texto.
 *
 * `inline-flex` y no `inline-block`: con `inline-block` el SVG se apoya en la
 * línea de base del texto y queda descolgado; con flex, icono y texto se centran
 * entre sí sin trucos de `vertical-align`.
 *
 * El icono hereda el color del botón (`currentColor` dentro del SVG), así que al
 * pasar el ratón —cuando el botón se rellena de dorado y el texto pasa a
 * negro— el icono cambia con él.
 */
.boton--con-icono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.boton__icono {
  flex: none;
}

/*
 * Los dos botones del bloque de disponibilidad —apartar y conocer— van en la
 * misma fila, y en ese orden. En pantalla estrecha se apilan solos y el de
 * apartar, que es la conversión, queda arriba. `gap` en vez de márgenes: el
 * `inline-block` deja un hueco de espacio en blanco entre botones que con
 * `flex` desaparece.
 */
.acciones-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* --------------------------------- rejillas ------------------------------ */

.rejilla {
  display: grid;
  gap: 26px;
}

.rejilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.rejilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.tarjeta {
  padding: 30px 26px;
  background: var(--grafito);
  border: 1px solid transparent;
  border-top: 2px solid var(--oro);
}

/*
 * La cifra del precio, al final del texto de la tarjeta.
 *
 * Va **en su propia línea y con aire alrededor** (Cristian, 2026-09-17): pegada
 * al final de la frase —«… con jardín. Con mensualidad desde $8,167/mes»— el
 * precio queda apretado contra el texto de arriba y contra la línea de abajo, y
 * un número apretado deja de leerse como un precio.
 *
 * `tarjeta__cifra-linea` es un bloque para que la cifra y su «/mes» caigan
 * juntos en la línea, y la cifra de dentro sigue siendo un elemento en línea: si
 * el bloque lo llevara la cifra, el «/mes» se iría solo a la línea siguiente.
 *
 * `white-space: nowrap` para que «$11,833» no se parta: una cifra rota por la
 * mitad deja de leerse como una cifra.
 */
.tarjeta__cifra-linea {
  display: block;
  margin: 12px 0 10px;
}

.tarjeta__cifra {
  color: var(--oro);
  font-family: var(--titulo);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tarjeta__cifra-mes {
  color: var(--gris-texto);
  font-size: 0.78rem;
}

.tarjeta__precio-nota {
  margin-bottom: 20px;
  font-size: 0.85rem;
}

/*
 * Las tres tarjetas de la portada, con el botón abajo del todo.
 *
 * Sin esto, el botón queda donde acabe el texto de cada una y los tres salen a
 * alturas distintas: se ve desordenado y da la impresión de que una tarjeta
 * tiene más contenido que otra. Con `margin-top: auto` el botón se pega al
 * fondo, y la insignia de escasez —que solo aparece en el proyecto que tiene
 * lotes apartados— deja de descolocarlo.
 *
 * Va con `.rejilla--3` delante porque `.tarjeta` se usa también en las landings,
 * donde las tarjetas llevan ilustración y no quieren este comportamiento.
 */
.rejilla--3 .tarjeta {
  display: flex;
  flex-direction: column;
}

.rejilla--3 .tarjeta > .boton {
  margin-top: auto;
}

.tarjeta h3 {
  margin-bottom: 0.5em;
}

.tarjeta p:last-child {
  margin-bottom: 0;
}

/*
 * Tarjetas de datos con icono.
 *
 * El icono va en un círculo con el borde dorado de la marca, arriba de la
 * etiqueta. No es adorno: las tres tarjetas se leían como un bloque de texto
 * seguido y costaba ver de un vistazo dónde empieza una y acaba la otra; con el
 * círculo arriba, la vista las separa antes de leer nada.
 */
.tarjeta--icono {
  display: flex;
  flex-direction: column;
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--oro);
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: rgba(193, 155, 98, 0.06);
}

.tarjeta__icono svg {
  display: block;
}

/*
 * Ilustración de la tarjeta.
 *
 * Va a sangre: se sale del relleno de la tarjeta por los lados y por arriba
 * hasta tocar el borde dorado. Se hace con márgenes negativos del mismo valor
 * que el relleno (30px arriba, 26px a los lados) en vez de reestructurar la
 * tarjeta, que la usan más sitios del sitio. Si algún día cambia el relleno de
 * `.tarjeta`, hay que cambiar estos tres números con él.
 */
.tarjeta__imagen {
  display: block;
  width: calc(100% + 52px);
  /*
   * `max-width: none` deshace la regla general `img { max-width: 100% }`, que
   * si no recorta la imagen al ancho del relleno y deja 26 px de fondo a cada
   * lado. Con `width` mayor que `max-width`, gana siempre el máximo.
   */
  max-width: none;
  /*
   * `height: auto` es obligatorio, no un adorno.
   *
   * El <img> lleva `width` y `height` en el HTML —1254×1254— para reservar el
   * hueco antes de que cargue la imagen, y esos atributos valen como `height:
   * 1254px` en CSS. Sin esta línea, el navegador obedece al atributo y la foto
   * sale de 1254 px de alto dentro de una tarjeta de 360, estirando y cortando
   * el gráfico. Con `auto`, manda la proporción cuadrada.
   */
  height: auto;
  margin: -30px -26px 24px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--negro);
}

/* ---------------------------- proceso de compra -------------------------- */

/*
 * Los pasos, numerados.
 *
 * <ol> y no una lista de viñetas porque el orden ES la información: primero el
 * mensaje, después la visita, después el depósito. El número lo pone un
 * contador de CSS para poder pintarlo en dorado sin escribir «1», «2», «3» a
 * mano en el HTML.
 *
 * Los selectores van con `>`. Sin eso, la lista de dos puntos que lleva dentro
 * el último paso (escritura al terminar de pagar / de contado) heredaría el
 * contador y saldría numerada como si fueran pasos 08 y 09.
 */
.pasos {
  counter-reset: paso;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 26px 24px 26px 74px;
  background: var(--grafito);
  border: 1px solid transparent;
  border-left: 2px solid var(--oro);
  color: var(--gris-texto);
}

.pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 24px;
  font-family: var(--titulo);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--oro);
}

.pasos strong {
  display: block;
  margin-bottom: 6px;
  color: var(--marfil);
  font-weight: 500;
}

.pasos > li > span {
  display: block;
  font-size: 0.94rem;
}

/* Los puntos dentro de un paso: mismo guion dorado que las otras listas del
   sitio, sin número propio. */
.pasos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.pasos ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
}

.pasos ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 8px;
  height: 1px;
  background: var(--oro);
}

/* ------------------------------- confianza ------------------------------- */

.confianza {
  border: 1px solid var(--borde);
  padding: 34px 30px;
  background: rgba(193, 155, 98, 0.04);
}

.lista-marcas {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lista-marcas li {
  padding-left: 30px;
  position: relative;
  color: var(--marfil);
}

.lista-marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--oro);
}

/* ------------------------------- calculador ------------------------------ */

.calculador {
  border: 1px solid var(--borde);
  background: var(--grafito);
  padding: clamp(24px, 4vw, 40px);
}

/* Los tres datos del hero: superficie, contado y plazo.
   Son pares de etiqueta y valor, no secciones del documento. Antes iban
   marcados como <h3>, lo que rompía el índice de encabezados: la página
   saltaba de <h1> a <h3> sin ningún <h2> entre medias, y quien navega por
   encabezados con un lector de pantalla recibía un esquema roto. */
.datos-clave {
  margin: 0;
}

.datos-clave dt {
  margin: 0 0 0.5rem;
}

.datos-clave dd {
  margin: 0;
  color: var(--oro);
  font-family: var(--titulo);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.04em;
}

.calculador__campos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 26px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 170px;
  flex: 1 1 170px;
}

.campo label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gris-texto);
}

.campo input,
.campo select {
  padding: 13px 14px;
  background: var(--negro);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--marfil);
  font-family: var(--cuerpo);
  font-size: 1rem;
  border-radius: var(--radio);
}

/* El borde dorado es un refuerzo del anillo, no su sustituto: el anillo lo
   aporta la regla :focus-visible general. Antes esto era `outline: none` con
   un cambio de borde de 1px, por debajo del perímetro de 2px que hace falta. */
.campo input:focus-visible,
.campo select:focus-visible {
  border-color: var(--oro);
}

.tabla-envoltura {
  overflow-x: auto;
  margin-top: 8px;
}

table.planes {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 480px;
}

table.planes th {
  text-align: left;
  padding: 12px 14px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--oro);
  border-bottom: 1px solid var(--borde);
  font-weight: 500;
  white-space: nowrap;
}

table.planes td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--marfil);
  white-space: nowrap;
}

table.planes tr.destacada {
  background: rgba(193, 155, 98, 0.09);
}

table.planes tr.destacada td:first-child {
  border-left: 2px solid var(--oro);
}

/* Las filas de la tabla son seleccionables con el ratón. Un atajo que solo
   existe para el ratón es un atajo a medias, así que `calculador.js` las hace
   además alcanzables con Tab (tabindex móvil, el patrón de widget compuesto)
   y activables con Enter o Espacio. El cursor las anuncia; el anillo las
   sitúa. */
table.planes tbody tr {
  cursor: pointer;
}

table.planes tbody tr:focus-visible {
  /* Hacia dentro: un anillo por fuera se montaría sobre la fila vecina. */
  outline: 2px solid var(--oro-claro);
  outline-offset: -2px;
}

@media (hover: hover) {
  table.planes tbody tr:hover {
    background: rgba(193, 155, 98, 0.06);
  }
}

table.planes td.mensual {
  font-family: var(--titulo);
  font-size: 1.12rem;
  color: var(--oro);
}

table.planes .sobreprecio {
  color: var(--gris-texto);
  font-size: 0.86rem;
}

/* --------------------------------- mapa ---------------------------------- */

.mapa {
  width: 100%;
  height: clamp(320px, 46vw, 460px);
  margin-top: 30px;
  border: 1px solid var(--borde);
  background: var(--negro);
  /* Leaflet coloca sus capas con `position: absolute`: sin un ancestro
     posicionado, el mapa se dibuja tomando como referencia otro elemento y
     aparece desplazado o encima de la cabecera. */
  position: relative;
  z-index: 0;
}

/* =========================== mapa servido por OSM ======================== */

/*
 * Leaflet trae su propio aspecto: claro, con controles blancos y un aviso
 * legal en blanco translúcido. Sobre un sitio negro eso canta, así que se
 * ajusta a la marca sin tocar la librería.
 */
.leaflet-container {
  background: var(--negro);
  font-family: var(--cuerpo);
}

/*
 * Las teselas de OpenStreetMap son de día, y el sitio es negro: pegadas tal
 * cual, el mapa es un rectángulo blanco en mitad de la página.
 *
 * Se oscurecen con un filtro CSS en vez de usar un servicio de teselas oscuras:
 * los oscuros «gratis» de verdad no existen —los de CARTO y compañía piden
 * plan para uso comercial—, y contratar uno para tres mapas sería absurdo.
 * Invertir y girar el tono mantiene el contraste (lo que era texto oscuro sobre
 * claro queda claro sobre oscuro) y devuelve el agua a su azul.
 *
 * El filtro va SOLO en la capa de teselas: los controles, el pin y el aviso
 * legal se quedan con los colores de la marca.
 */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.06) saturate(0.75);
}

.leaflet-control-attribution {
  background: rgba(13, 13, 13, 0.82) !important;
  color: var(--gris-texto) !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
}

.leaflet-control-attribution a {
  color: var(--oro) !important;
}

/*
 * Los controles van con `!important` porque `leaflet.css` se inyecta en el
 * documento DESPUÉS de esta hoja (la carga `mapa.js` al vuelo), y con la misma
 * especificidad gana el que va más abajo: sin `!important`, los botones de zoom
 * seguían saliendo blancos.
 */
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background: var(--grafito) !important;
  color: var(--marfil) !important;
  border-bottom-color: var(--borde) !important;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background: #2a2825 !important;
  color: var(--oro) !important;
}

/*
 * Alfileres del mapa.
 *
 * Todos rojos (2026-09-17, a petición de Cristian). Las dos clases se mantienen
 * separadas porque describen cosas distintas —el terreno de una landing y los
 * desarrollos de la portada— y porque hoy comparten color pero no tienen por qué
 * compartirlo mañana; el dibujo y el tamaño son la misma pieza.
 *
 * El color se pone aquí y no en el SVG de `mapa.js`: el dibujo usa
 * `currentColor`, así que la paleta vive en un solo archivo.
 */
.marca-pin,
.marca-proyecto,
.marca-lugar {
  background: none;
  border: 0;
}

.marca-pin {
  color: var(--mapa-terreno);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

.marca-proyecto {
  color: var(--mapa-terreno);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

/* Al pasar por encima de una ficha de la lista, su punto salta. */
.marca-pin--salta {
  animation: marca-salta 0.7s ease 2;
}

@keyframes marca-salta {
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marca-pin--salta {
    animation: none;
  }
}

/*
 * Dos columnas: el mapa a la izquierda y la lista de «Qué hay alrededor» a la
 * derecha. La lista lleva ancho fijo porque su contenido —nombres y distancias—
 * no gana nada estirándose, y el mapa sí aprovecha todo lo demás.
 *
 * Por debajo de 900 px se apilan: la lista debajo del mapa. Al revés no tendría
 * sentido, porque la lista se lee después de haber visto dónde está todo.
 */
.ubicacion__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}

.ubicacion__rejilla .mapa {
  margin-top: 30px;
}

.alrededor {
  margin-top: 30px;
  padding: 26px 24px;
  border: 1px solid var(--borde);
  background: rgba(0, 0, 0, 0.35);
}

.alrededor__titulo {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}

.alrededor__nota {
  margin: 8px 0 18px;
  font-size: 0.78rem;
  color: var(--gris-texto);
}

.alrededor__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.alrededor__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(242, 237, 226, 0.1);
}

.alrededor__fila:last-child {
  border-bottom: 0;
}

.alrededor__nombre {
  color: var(--marfil);
  font-size: 0.92rem;
  line-height: 1.35;
}

.alrededor__nombre small {
  display: block;
  color: var(--gris-texto);
  font-size: 0.76rem;
}

/* La cifra no se parte nunca: «1.4 km» en dos líneas se lee fatal. */
.alrededor__distancia {
  flex: none;
  color: var(--oro);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

/* El alfiler de un lugar cercano: azul y más pequeño que el del terreno. Si los
   dos fueran iguales, el mapa dejaría de decir dónde está el lote. */
.marca-lugar {
  color: var(--mapa-lugar);
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.6));
}

/*
 * La etiqueta que aparece al pasar por encima de un punto.
 *
 * Leaflet la pinta blanca con texto negro por defecto, y sobre el mapa oscuro
 * de la marca eso parece un recorte pegado encima. Se pinta como el resto del
 * sitio.
 *
 * Van con `.mapa` delante a propósito: `leaflet.css` NO está en el HTML, lo
 * inyecta `mapa.js` al dibujar, así que entra en el documento DESPUÉS de
 * `marca.css` y sus reglas ganaban por orden. Con la clase delante, la
 * especificidad decide y da igual el orden de carga.
 *
 * Se incluyen las cuatro flechas porque la etiqueta salta de lado según dónde
 * esté el punto.
 */
.mapa .leaflet-tooltip {
  background: var(--negro);
  color: var(--marfil);
  border: 1px solid var(--oro);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.3;
}

.mapa .leaflet-tooltip-top::before {
  border-top-color: var(--oro);
}
.mapa .leaflet-tooltip-bottom::before {
  border-bottom-color: var(--oro);
}
.mapa .leaflet-tooltip-left::before {
  border-left-color: var(--oro);
}
.mapa .leaflet-tooltip-right::before {
  border-right-color: var(--oro);
}

/* La atribución de OpenStreetMap se queda, pero discreta y legible. */
.leaflet-control-attribution {
  background: rgba(13, 13, 13, 0.78) !important;
  color: #9a9384 !important;
  font-size: 0.66rem;
}

.leaflet-control-attribution a {
  color: var(--oro) !important;
}

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

  .alrededor {
    margin-top: 22px;
  }
}

/* Sin clave de API, el hueco del mapa se convierte en un enlace útil. */
.mapa__enlace {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 30px;
  color: var(--marfil);
  background: repeating-linear-gradient(
    45deg,
    #131313,
    #131313 16px,
    #171717 16px,
    #171717 32px
  );
  border-left: 2px solid var(--oro);
}

.mapa__enlace:hover {
  background: #191919;
}

.mapa__enlace strong {
  display: block;
  color: var(--oro);
  font-weight: 500;
  margin-bottom: 4px;
}

.mapa__enlace small {
  color: var(--gris-texto);
  font-size: 0.82rem;
}

.mapa__pin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--oro);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* ------------------------------ plano de lotes --------------------------- */

/*
 * El plano se dibuja con la geometría real del desarrollo: mismas filas y
 * columnas que el plano de lotificación. Las celdas mantienen su forma
 * independientemente del ancho de la pantalla, porque la rejilla se define en
 * columnas fijas y no con auto-ajuste.
 */

.plano {
  margin: 26px 0 0;
}

.plano__calle {
  padding: 9px 16px;
  border: 1px dashed rgba(193, 155, 98, 0.35);
  border-bottom: none;
  color: var(--oro);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(193, 155, 98, 0.05);
}

.plano__rejilla {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.02);
  overflow-x: auto;
  /* El plano se centra: un desarrollo de dos columnas es alto y estrecho, y
     estirado a todo el ancho quedaría con celdas absurdamente grandes. */
  justify-content: center;
}

.plano__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--gris-texto);
}

.plano__pie span::before {
  content: "— ";
  color: var(--oro);
}

.lote {
  /*
   * Alto fijo y ancho acotado. Sin esto, la proporción del lote multiplicada
   * por 15 filas produce celdas de más de 500 px y un plano imposible de ver
   * de un vistazo, que es justo lo contrario de para lo que sirve.
   */
  height: 40px;
  min-width: 0;
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--marfil);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radio);
}

@media (max-width: 640px) {
  .plano__rejilla {
    gap: 3px;
    padding: 8px;
  }
  .lote {
    height: 30px;
    font-size: 0.6rem;
  }
}

/* ------------------------------ plano de lotes --------------------------- */

/* --------------------------------- mapa ---------------------------------- */

/*
 * Semáforo de lotes: verde disponible, ámbar apartado, rojo vendido.
 *
 * El color solo no basta: quien no distingue el verde del rojo —uno de cada
 * doce hombres— vería el mismo plano con dos colores parecidos. Por eso cada
 * estado tiene además su textura: disponible va liso, apartado lleva rayas
 * diagonales y vendido va apagado y con el número tachado. Se distinguen en
 * blanco y negro y en una captura impresa.
 */
.lote--disponible {
  background: rgba(79, 169, 111, 0.16);
  border-color: rgba(79, 169, 111, 0.65);
  color: #b6e6c8;
}

.lote--apartado {
  background: repeating-linear-gradient(
    45deg,
    rgba(217, 166, 60, 0.26),
    rgba(217, 166, 60, 0.26) 5px,
    rgba(217, 166, 60, 0.12) 5px,
    rgba(217, 166, 60, 0.12) 10px
  );
  border-color: rgba(217, 166, 60, 0.8);
  color: #f3d79a;
}

.lote--vendido {
  background: rgba(200, 82, 74, 0.14);
  border-color: rgba(200, 82, 74, 0.5);
  color: #e3a49d;
  text-decoration: line-through;
}

.leyenda {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin-bottom: 4px;
}

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

.leyenda i {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* La leyenda repite el color Y la textura de cada estado: si el cuadrito de la
   leyenda no se parece al lote del plano, la leyenda no sirve de nada. */
.leyenda i.d {
  background: rgba(79, 169, 111, 0.2);
  border-color: rgba(79, 169, 111, 0.75);
}
.leyenda i.a {
  background: repeating-linear-gradient(
    45deg,
    rgba(217, 166, 60, 0.35),
    rgba(217, 166, 60, 0.35) 3px,
    rgba(217, 166, 60, 0.12) 3px,
    rgba(217, 166, 60, 0.12) 6px
  );
  border-color: rgba(217, 166, 60, 0.85);
}
.leyenda i.v {
  background: rgba(200, 82, 74, 0.18);
  border-color: rgba(200, 82, 74, 0.6);
}

.contador-disponibles {
  font-family: var(--titulo);
  font-size: 1.05rem;
  color: var(--oro);
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}

/* -------------------------------- formulario ----------------------------- */

.formulario {
  display: grid;
  gap: 14px;
}

.formulario__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.aviso {
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin: 4px 0 0;
}

.respuesta {
  padding: 16px 18px;
  border-left: 2px solid var(--oro);
  background: rgba(193, 155, 98, 0.08);
  font-size: 0.92rem;
  margin-top: 16px;
  display: none;
}

.respuesta.visible {
  display: block;
}

.respuesta.error {
  border-left-color: #b4543f;
  background: rgba(180, 84, 63, 0.1);
}

/* --------------------------------- pie ----------------------------------- */

.pie {
  padding: 46px 0 34px;
  border-top: 1px solid var(--borde);
  font-size: 0.84rem;
  color: var(--gris-texto);
}

.pie img {
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}

.pie__enlaces {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.pie__legal {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.76rem;
  line-height: 1.7;
  /* #6f6c67 medía 3.72:1 sobre el fondo, por debajo del 4.5:1 que exige el
     texto de cuerpo: los avisos legales eran lo menos legible de la página.
     El token del proyecto sube a 7.53:1. */
  color: var(--gris-texto);
}

.pie__legal p {
  color: inherit;
  font-size: inherit;
}

/* ---------------------------- WhatsApp flotante -------------------------- */

/*
 * Botón fijo abajo a la derecha.
 *
 * Va en el verde de WhatsApp y no en el oro de la marca a propósito: el color
 * es lo que hace que se reconozca sin necesidad de leerlo. En una página donde
 * todo es negro y oro, ese contraste es precisamente lo que lo hace visible.
 */
.wsp {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 14px;
  background: #25d366;
  color: #06281a;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(37, 211, 102, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wsp:hover {
  background: #1fbe5b;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(37, 211, 102, 0.5);
}

.wsp:focus-visible {
  outline: 2px solid var(--marfil);
  outline-offset: 3px;
}

.wsp__icono {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

/*
 * El botón flota sobre el contenido, así que el final de la página queda
 * debajo de él: sin este hueco, la última línea del aviso legal se lee a través
 * del botón.
 */
.pie {
  padding-bottom: 96px;
}

@media (max-width: 640px) {
  .wsp {
    right: 14px;
    padding: 11px 16px 11px 12px;
    font-size: 0.87rem;
  }

  .wsp__icono {
    width: 22px;
    height: 22px;
  }

  .pie {
    padding-bottom: 108px;
  }
}

/* ------------------------ ubicaciones (portada) -------------------------- */

/*
 * El mapa de todos los proyectos es más alto que el de una landing: aquí tiene
 * que caber un corredor de varios kilómetros y, debajo, las fichas con los
 * enlaces. Si fuera bajo, los pines de dos proyectos cercanos se solaparían.
 */
.mapa--proyectos {
  height: clamp(380px, 54vw, 540px);
}

.mapa__vacio {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 30px;
  color: var(--gris-texto);
  background: repeating-linear-gradient(
    45deg,
    #131313,
    #131313 16px,
    #171717 16px,
    #171717 32px
  );
  border-left: 2px solid var(--oro);
}

/*
 * Las fichas no son adorno: son los enlaces de verdad. Un mapa no se puede
 * seguir con un lector de pantalla ni con el teclado, así que cada proyecto
 * tiene aquí su enlace, su superficie y su precio.
 */
.ubicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.ubicacion {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ubicacion:hover,
.ubicacion:focus-visible {
  border-color: var(--oro);
  background: rgba(255, 255, 255, 0.055);
}

/* Se enciende cuando se toca su punto en el mapa. */
.ubicacion--activa {
  border-color: var(--oro);
  background: rgba(193, 155, 98, 0.12);
}

.ubicacion strong {
  display: block;
  font-family: var(--titulo);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--marfil);
  margin-bottom: 6px;
}

.ubicacion span {
  display: block;
  color: var(--gris-texto);
  font-size: 0.86rem;
}

.ubicacion em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--oro);
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .mapa--proyectos {
    height: 62vh;
  }

  .ubicaciones {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------- anclaje ------------------------------- */

/*
 * El mismo lote a tres plazos, uno al lado del otro.
 *
 * No es un adorno comparativo: puesto en fila, el precio de 60 meses hace que
 * el de 12 parezca lo que es —el mismo lote por la mitad—. La comparación ya
 * existía dentro de la calculadora, pero había que ir a buscarla.
 */
.ancla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.ancla__opcion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.03);
}

/* El plan que interesa destacar: el único que no tiene sobreprecio. */
.ancla__opcion--mejor {
  border-color: var(--oro);
  background: rgba(193, 155, 98, 0.1);
}

.ancla__plazo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris-texto);
}

.ancla__opcion--mejor .ancla__plazo {
  color: var(--oro);
}

.ancla__opcion strong {
  font-family: var(--titulo);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--marfil);
}

.ancla__nota {
  color: var(--gris-texto);
  font-size: 0.84rem;
}

.ancla__opcion--mejor .ancla__nota {
  color: var(--marfil);
}

/* ------------------------- escasez en el héroe --------------------------- */

/*
 * La llena lotes.js con el inventario real del CRM. Si no hay ningún lote
 * apartado, el elemento sigue oculto: no se inventa urgencia donde no la hay.
 */
.heroe__escasez {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 9px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(193, 155, 98, 0.12);
  color: var(--marfil);
  font-size: 0.86rem;
}

.heroe__escasez strong {
  color: var(--oro);
  font-weight: 600;
}

/* ---------------------- escasez en las tarjetas de la portada ------------ */

.tarjeta__escasez {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(193, 155, 98, 0.1);
  color: var(--gris-texto);
  font-size: 0.8rem;
}

.tarjeta__escasez strong {
  color: var(--oro);
  font-weight: 600;
}

@media (max-width: 640px) {
  .heroe__escasez {
    font-size: 0.8rem;
    padding: 8px 13px;
  }

  .ancla__opcion strong {
    font-size: 1.45rem;
  }
}

/* --------------------------------- utilidad ------------------------------ */

/*
 * Un elemento con el atributo `hidden` debe estar oculto, punto. Sin esto, una
 * regla posterior que fije `display` (por ejemplo la de la escasez del héroe)
 * lo resucita: `hidden` solo trae un `display: none` del navegador, que
 * cualquier `display` declarado gana.
 */
[hidden] {
  display: none !important;
}

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wsp {
    transition: none;
  }

  .wsp:hover {
    transform: none;
  }

  .galeria__imagen {
    transition: none;
  }

  .galeria__enlace:hover .galeria__imagen,
  .galeria__enlace:focus-visible .galeria__imagen {
    transform: none;
  }
}

/* ================================ galería ================================ */

/*
 * Rejilla de fotografías.
 *
 * Cuatro columnas en escritorio, dos en móvil. Las fotos son verticales (3:4),
 * que es la proporción en la que salen de un teléfono, así que las celdas usan
 * esa misma proporción y no se recorta prácticamente nada. Con `aspect-ratio`
 * además se reserva el hueco antes de que cargue la imagen: sin él, la página
 * da un salto hacia abajo cuando llegan las ocho.
 */
.galeria {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.galeria__pieza {
  margin: 0;
}

.galeria__enlace {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--negro);
  color: var(--marfil);
  aspect-ratio: 3 / 4;
}

.galeria__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.3s ease;
}

.galeria__enlace:hover .galeria__imagen,
.galeria__enlace:focus-visible .galeria__imagen {
  transform: scale(1.04);
}

/*
 * El rótulo aparece al pasar por encima y al enfocar con teclado. Es la única
 * señal de que la foto se puede abrir: sin él, la rejilla parece una
 * decoración y nadie toca nada. Va con el nombre de la estancia y no con un
 * «ampliar» genérico: en una galería de casa, saber que eso es el patio vale
 * más que saber que se puede ampliar.
 */
.galeria__abrir {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 14px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--marfil);
  background: linear-gradient(to top, rgba(13, 13, 13, 0.92), rgba(13, 13, 13, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.galeria__enlace:hover .galeria__abrir,
.galeria__enlace:focus-visible .galeria__abrir {
  opacity: 1;
}

/*
 * La señal de «esto se abre». En una esquina, para no pelearse con el rótulo:
 * en una rejilla de cuatro columnas, un rótulo de dos líneas más un «ampliar»
 * al lado se pisan.
 */
.galeria__lupa {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--marfil);
  background: rgba(13, 13, 13, 0.66);
  border: 1px solid var(--borde);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.galeria__enlace:hover .galeria__lupa,
.galeria__enlace:focus-visible .galeria__lupa {
  opacity: 1;
}

/* En un móvil no hay puntero que pase por encima: rótulo y señal van siempre. */
@media (hover: none) {
  .galeria__abrir,
  .galeria__lupa {
    opacity: 1;
  }
}

@media (max-width: 1000px) {
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .galeria__abrir {
    font-size: 0.66rem;
    padding: 22px 10px 10px;
  }

  .galeria__lupa {
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }
}

/* ============================ visor de fotos ============================= */

/*
 * Visor a pantalla completa.
 *
 * Se abre con JavaScript, pero no depende de él: cada enlace apunta al archivo
 * de la foto, así que sin JavaScript la imagen se abre igual, en su pestaña.
 */
.visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.visor__capa {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: zoom-out;
}

.visor__marco {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(1180px, 100%);
  max-height: 100%;
}

.visor__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.visor__figura img {
  max-width: 100%;
  max-height: calc(100vh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--borde);
  background: var(--negro);
}

.visor__figura figcaption {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.visor__figura strong {
  font-family: var(--titulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--marfil);
}

.visor__figura span {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--oro);
}

.visor__flecha,
.visor__cierre {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--marfil);
  background: rgba(30, 30, 30, 0.72);
  border: 1px solid var(--borde);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.visor__flecha:hover,
.visor__cierre:hover,
.visor__flecha:focus-visible,
.visor__cierre:focus-visible {
  background: var(--oro);
  color: var(--negro);
}

.visor__cierre {
  position: absolute;
  top: -58px;
  right: 0;
  font-size: 1.6rem;
}

/*
 * En móvil las flechas van sobre la foto y el pie baja al borde inferior de la
 * pantalla. Las dos cosas por el mismo motivo: a los lados se comen el ancho
 * que necesita la imagen, y debajo del todo se peleaban con el rótulo —las
 * flechas caían encima del texto y lo tapaban.
 *
 * El pie se saca del flujo (`position: fixed`) para que el marco mida lo que
 * mide la foto: así `top: 50%` en las flechas es el centro de la imagen y no el
 * centro de «imagen más rótulo», que quedaba descolgado hacia abajo.
 */
@media (max-width: 720px) {
  .visor {
    padding: 12px;
  }

  .visor__marco {
    flex-direction: column;
  }

  .visor__figura img {
    max-height: calc(100vh - 190px);
  }

  .visor__figura figcaption {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    padding: 0 16px;
    row-gap: 2px;
  }

  .visor__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    font-size: 1.6rem;
  }

  .visor__flecha--antes {
    left: 6px;
  }

  .visor__flecha--despues {
    right: 6px;
  }

  .visor__cierre {
    top: -46px;
    right: 4px;
    width: 44px;
    height: 44px;
  }
}

/* ============================== pie del mapa ============================= */

/*
 * Plus Code y enlace a Google Maps, debajo del mapa.
 *
 * El enlace no es un adorno: hoy la clave de Google del sitio no dibuja el mapa
 * (falta facturación), así que este es el camino que de verdad usa quien quiere
 * ver dónde está. Y el Plus Code es como se comparte una ubicación por WhatsApp
 * en México: cabe en un mensaje y lleva al punto exacto.
 */
.mapa__pie {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--gris-texto);
}

.mapa__pie strong {
  color: var(--marfil);
  letter-spacing: 0.06em;
}

/* ================================= vídeo ================================= */

/*
 * El vídeo se limita en ancho porque el recorrido es vertical: estirado a todo
 * el ancho de la página, un vídeo de teléfono se convierte en una franja
 * gigante y borrosa. Además, limitarlo mantiene el archivo lejos de la
 * pantalla completa que el navegador no va a poder rellenar.
 */
.video {
  margin: 34px auto 0;
  max-width: 460px;
}

.video video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--borde);
  background: var(--negro);
}

.video figcaption {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--gris-texto);
  text-align: center;
}

.video__alterno {
  margin-top: 10px;
  font-size: 0.85rem;
  text-align: center;
}

/* ==========================================================================
   Landing de comisionistas (body.pagina-comisionistas)
   --------------------------------------------------------------------------
   Todo lo de esta sección va acotado a `body.pagina-comisionistas`. Las reglas
   de arriba las comparten las otras cinco páginas del sitio y no se tocan: si
   un estilo de esta página se necesitara en otra, se acota aquí y se copia, no
   se hace global.
   ========================================================================== */

/* -------------------------------- héroe --------------------------------- */

body.pagina-comisionistas .heroe__caja {
  max-width: 620px;
}

/*
 * El titular de esta página es más largo que el del resto del sitio desde el
 * 2026-10-02 —pasó de «Gana $10,000 por cada lote que vendas.» a la frase del
 * trato, que tiene el doble de letras—. Con el tamaño general salían seis
 * líneas y el botón «Quiero unirme al equipo» se iba por debajo del pliegue:
 * en un portátil de 768 px de alto no se vería sin bajar.
 *
 * Se le baja un escalón. Sigue siendo el elemento más grande del héroe y el
 * botón vuelve a entrar en pantalla.
 */
body.pagina-comisionistas h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

body.pagina-comisionistas .heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 0;
}

body.pagina-comisionistas .heroe__tira {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
}

body.pagina-comisionistas .tira__dato {
  position: relative;
  padding-left: 16px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--marfil);
}

body.pagina-comisionistas .tira__dato::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1px;
  background: var(--oro);
}

/*
 * Contador de personas viendo (sintético).
 *
 * Flota en la parte de arriba de la pantalla, no dentro del héroe: así sigue a
 * la vista mientras se recorre la página, que es cuando el dato hace su
 * trabajo. Se coloca por DEBAJO de la cabecera —que es `absolute` y mide unos
 * 86 px en escritorio y 76 px en móvil— para no taparle el logotipo ni el botón
 * de inicio.
 */
body.pagina-comisionistas .vivo-contador {
  position: fixed;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.9);
  color: var(--marfil);
  font-size: 0.86rem;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

body.pagina-comisionistas .vivo-contador__punto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aviso-azul);
  animation: comisionistasPulso 2.2s ease-out infinite;
}

@keyframes comisionistasPulso {
  0% { box-shadow: 0 0 0 0 rgba(61, 127, 214, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(61, 127, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 127, 214, 0); }
}

body.pagina-comisionistas .vivo-contador__num {
  /* `inline-block` para que el latido del cambio pueda escalarlo: `transform`
     no hace nada en un elemento en línea. */
  display: inline-block;
  color: var(--oro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * El latido de cada cambio. Es lo que hace que el número se lea como algo que
 * acaba de pasar; sin él, el ojo no registra que se movió.
 */
body.pagina-comisionistas .vivo-contador__num--late {
  animation: comisionistasLatido 420ms ease;
}

@keyframes comisionistasLatido {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* La foto del equipo, en su columna. Vertical y entera: a sangre se
   recortarían las caras. */
body.pagina-comisionistas .heroe__foto {
  margin: 0;
}

body.pagina-comisionistas .heroe__foto img {
  display: block;
  width: 100%;
  /* `height: auto` es imprescindible aunque el HTML traiga width y height: sin
     él, esos atributos valen como alto en CSS y la foto se sale de la caja. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 38%;
  border: 1px solid var(--borde);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

body.pagina-comisionistas .heroe__foto figcaption {
  margin-top: 12px;
  color: var(--gris-texto);
  font-size: 0.76rem;
  text-align: center;
}

/* ---------------------------- tarjetas y bloques ------------------------ */

body.pagina-comisionistas .tarjeta h3 {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.35;
}

body.pagina-comisionistas .damos {
  /* Cuatro tarjetas en dos columnas y no tres: con tres columnas, la cuarta
     caía sola en una fila con un hueco al lado. El mínimo va con `min(...)`
     para que en un móvil de 390 px la columna nunca mida más que su hueco:
     con `minmax(420px, 1fr)` a secas, la rejilla se salía 52 px de la pantalla
     y la página ganaba un desplazamiento horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/*
 * «Cómo ganas» se quedó con dos tarjetas al retirar la de «cero cuota»
 * (2026-10-02: si el equipo pide una meta de venta, no se puede prometer a la
 * vez que no hay ninguna condición). Se limitan a 880 px porque a todo lo
 * ancho cada tarjeta medía 577 y el texto quedaba en una línea larguísima.
 */
body.pagina-comisionistas .ganancias {
  max-width: 880px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

body.pagina-comisionistas .damos__item {
  border-top-color: var(--oro);
}

/* ------------------- tu mes en números: el gráfico ---------------------- */

/*
 * El gráfico de barras del bloque «Tu mes en números».
 *
 * Es HTML y CSS, sin librería: el sitio es estático y una librería de gráficos
 * pesa más que la página entera para dibujar tres barras.
 *
 * La línea de tendencia va en un SVG con `preserveAspectRatio="none"`, que
 * estira el dibujo a lo ancho y a lo alto de la caja. Para que ese estirón no
 * deforme el trazo, la línea lleva `vector-effect="non-scaling-stroke"` y la
 * punta de flecha es un SVG aparte, de tamaño fijo, colocado por CSS en el
 * extremo: un triángulo estirado se nota, un trazo no.
 */
body.pagina-comisionistas .grafico {
  margin: 34px 0 0;
  max-width: 760px;
}

body.pagina-comisionistas .grafico__titulo {
  display: block;
  margin-bottom: 18px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gris-texto);
}

body.pagina-comisionistas .grafico__caja {
  position: relative;
}

/* La capa de la línea y la flecha cubre solo la zona de las barras: los 46 px
   de abajo son la fila de etiquetas. */
body.pagina-comisionistas .grafico__capa {
  position: absolute;
  inset: 0 0 46px 0;
  z-index: 2;
  pointer-events: none;
}

body.pagina-comisionistas .grafico__linea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.pagina-comisionistas .grafico__tendencia {
  fill: none;
  stroke: var(--oro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* El tramo que proyecta: discontinuo, para que se lea como «esto sigue» y no
   como un dato medido. */
body.pagina-comisionistas .grafico__proyeccion {
  fill: none;
  stroke: var(--oro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  opacity: 0.7;
}

body.pagina-comisionistas .grafico__punta {
  position: absolute;
  top: 4%;
  right: 12.5%;
  width: 22px;
  height: 22px;
  transform: translate(50%, -50%);
}

body.pagina-comisionistas .grafico__punta path {
  fill: none;
  stroke: var(--oro);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.pagina-comisionistas .grafico__lista {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 10px;
  height: 330px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.pagina-comisionistas .grafico__item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.pagina-comisionistas .grafico__pista {
  position: relative;
  flex: 1;
  border-bottom: 1px solid var(--borde);
}

body.pagina-comisionistas .grafico__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--alto);
  overflow: hidden;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* La cifra va DENTRO de la barra: deja libre la punta, que es por donde pasa
   la línea de tendencia. */
body.pagina-comisionistas .grafico__valor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: var(--negro);
  white-space: nowrap;
}

body.pagina-comisionistas .grafico__etiqueta {
  display: block;
  flex: none;
  height: 46px;
  padding-top: 13px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gris-texto);
  text-align: center;
}

/* La columna de proyección: sin barra, una guía discontinua y «y sigue…». */
body.pagina-comisionistas .grafico__guia {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 92%;
  border-left: 1px dashed rgba(193, 155, 98, 0.45);
  transform: translateX(-50%);
}

body.pagina-comisionistas .grafico__valor--puntos {
  bottom: 11px;
  color: var(--oro);
}

body.pagina-comisionistas .grafico__chip {
  display: inline-block;
  margin: 22px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(193, 155, 98, 0.1);
  color: var(--marfil);
  font-size: 0.8rem;
}

/*
 * La entrada del gráfico: las barras crecen de cero al entrar en pantalla.
 * Las clases las pone el JavaScript, así que sin guion el gráfico sale dibujado
 * entero en vez de quedarse en blanco.
 */
body.pagina-comisionistas .grafico--preparado .grafico__barra {
  height: 0;
}

body.pagina-comisionistas .grafico--preparado .grafico__capa {
  opacity: 0;
}

body.pagina-comisionistas .grafico--visto .grafico__barra {
  height: var(--alto);
  transition: height 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.pagina-comisionistas .grafico--visto .grafico__capa {
  opacity: 1;
  transition: opacity 520ms ease 340ms;
}

body.pagina-comisionistas .grafico--visto .grafico__item:nth-child(2) .grafico__barra {
  transition-delay: 90ms;
}

body.pagina-comisionistas .grafico--visto .grafico__item:nth-child(3) .grafico__barra {
  transition-delay: 180ms;
}

body.pagina-comisionistas .mes__nota {
  margin-top: 16px;
  max-width: 620px;
  font-size: 0.8rem;
  color: var(--gris-texto);
}

/* Cierres de sección, en dorado. */
body.pagina-comisionistas .cierre {
  margin-top: 26px;
  font-family: var(--titulo);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--oro);
}

/* --------------------------------- FAQ ---------------------------------- */

body.pagina-comisionistas .acordeon {
  margin-top: 30px;
  border-top: 1px solid var(--borde);
}

body.pagina-comisionistas .acordeon__item {
  border-bottom: 1px solid var(--borde);
}

body.pagina-comisionistas .acordeon__pregunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--marfil);
}

body.pagina-comisionistas .acordeon__pregunta::-webkit-details-marker {
  display: none;
}

body.pagina-comisionistas .acordeon__pregunta::after {
  content: "+";
  flex: none;
  color: var(--oro);
  font-size: 1.3rem;
  line-height: 1;
}

body.pagina-comisionistas .acordeon__item[open] .acordeon__pregunta::after {
  content: "–";
}

body.pagina-comisionistas .acordeon__cuerpo {
  max-width: 720px;
  padding: 0 0 20px;
}

body.pagina-comisionistas .acordeon__cuerpo p {
  margin: 0;
}

/* ------------------------------- formulario ----------------------------- */

/* La regla global cubre `input` y `select`, pero no `textarea`. */
body.pagina-comisionistas .campo textarea {
  padding: 13px 14px;
  background: var(--negro);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--marfil);
  font-family: var(--cuerpo);
  font-size: 1rem;
  border-radius: var(--radio);
  resize: vertical;
}

body.pagina-comisionistas .campo textarea:focus-visible {
  border-color: var(--oro);
}

body.pagina-comisionistas [aria-invalid="true"] {
  border-color: #b4543f !important;
}

/* ------------------------- avisos de actividad en vivo ------------------ */

/*
 * Abajo a la IZQUIERDA: el botón flotante de WhatsApp vive abajo a la derecha,
 * así que los dos nunca se pisan. Por debajo del botón en z-index, por si la
 * pantalla es muy estrecha y se acercan.
 */
body.pagina-comisionistas .aviso-vivo {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  max-width: 340px;
  padding: 14px 40px 14px 16px;
  background: rgba(13, 13, 13, 0.94);
  border: 1px solid var(--borde);
  border-left: 2px solid var(--oro);
  border-radius: var(--radio);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

body.pagina-comisionistas .aviso-vivo--visible {
  opacity: 1;
  transform: none;
}

body.pagina-comisionistas .aviso-vivo__texto {
  display: block;
  color: var(--marfil);
  font-size: 0.9rem;
  line-height: 1.4;
}

body.pagina-comisionistas .aviso-vivo__hace {
  display: block;
  margin-top: 4px;
  color: var(--gris-texto);
  font-size: 0.78rem;
}

body.pagina-comisionistas .aviso-vivo__cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gris-texto);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

body.pagina-comisionistas .aviso-vivo__cerrar:hover {
  color: var(--marfil);
}

/* --------------------------- aparición por scroll ----------------------- */

/*
 * La clase la pone el JavaScript; sin él, el contenido se ve tal cual. Si la
 * clase estuviera escrita en el HTML y el guion fallara, la página se quedaría
 * en blanco.
 */
body.pagina-comisionistas .aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.pagina-comisionistas .aparece--dentro {
  opacity: 1;
  transform: none;
}

/* --------------------------------- móvil -------------------------------- */

@media (max-width: 980px) {
  body.pagina-comisionistas .heroe__foto {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  /* En móvil el aviso sale a lo ancho menos 24 px y por encima del botón
     flotante de WhatsApp, que vive a 20px del borde inferior. */
  body.pagina-comisionistas .aviso-vivo {
    left: 12px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    transform: translateY(12px);
  }

  /* El contador flota también en móvil, algo más arriba: la cabecera es más
     baja (logotipo de 36 px). */
  body.pagina-comisionistas .vivo-contador {
    top: 82px;
    padding: 7px 13px;
    font-size: 0.8rem;
  }

  /*
   * El botón de WhatsApp en móvil: SOLO el icono, en un círculo. El texto
   * «Escríbenos por WhatsApp» se comía media pantalla y aquí basta con
   * reconocerlo de un vistazo; el nombre accesible del enlace sigue en su
   * `aria-label`, así que quien use lector de pantalla no pierde nada.
   */
  body.pagina-comisionistas .wsp {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  body.pagina-comisionistas .wsp span {
    display: none;
  }

  body.pagina-comisionistas .wsp__icono {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 560px) {
  body.pagina-comisionistas .heroe__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  body.pagina-comisionistas .heroe__acciones .boton {
    text-align: center;
  }

  /* El gráfico, en un móvil: caja más baja y cifras más pequeñas para que
     «$10,000» quepa dentro de una barra de 80 px. */
  body.pagina-comisionistas .grafico__lista {
    height: 260px;
    gap: 6px;
  }

  body.pagina-comisionistas .grafico__valor {
    font-size: 0.82rem;
  }

  body.pagina-comisionistas .grafico__etiqueta {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  body.pagina-comisionistas .grafico__punta {
    width: 18px;
    height: 18px;
  }
}

/* --------------------------- sin movimiento ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.pagina-comisionistas .vivo-contador__punto {
    animation: none;
  }

  body.pagina-comisionistas .vivo-contador__num--late {
    animation: none;
  }

  /* El aviso aparece con fundido y sin desplazamiento. */
  body.pagina-comisionistas .aviso-vivo {
    transform: none;
    transition: opacity 0.2s ease;
  }

  body.pagina-comisionistas .aviso-vivo--visible {
    transform: none;
  }

  body.pagina-comisionistas .aparece {
    transition: none;
    transform: none;
  }

  /* El gráfico sale dibujado de una vez, sin crecer. */
  body.pagina-comisionistas .grafico--preparado .grafico__barra,
  body.pagina-comisionistas .grafico--visto .grafico__barra,
  body.pagina-comisionistas .grafico--preparado .grafico__capa,
  body.pagina-comisionistas .grafico--visto .grafico__capa {
    transition: none;
  }
}

/* ==========================================================================
   Apartado de preventa
   --------------------------------------------------------------------------
   Va acotado a `.preventa` (el propio bloque) y no a una clase del `body`: las
   landings de proyecto no llevan clase en el cuerpo, y así el mismo apartado
   sirve el día que otro desarrollo tenga su preventa.

   El bloque es compartido por las tres landings: cualquier regla de aquí
   afecta solo a lo que está dentro de `.preventa`, y el chip de la portada va
   aparte, en `.chip-preventa`.
   ========================================================================== */

.preventa {
  position: relative;
  overflow: hidden;
  background: var(--grafito);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

/* Un halo dorado muy tenue en la esquina de arriba: la sección se nota sin
   gritar, que es lo que se busca en una página que ya tiene su propio reclamo. */
.preventa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  pointer-events: none;
  background: radial-gradient(120% 100% at 12% 0%, rgba(193, 155, 98, 0.12), transparent 70%);
}

.preventa .envoltura {
  position: relative;
}

/* ------------------------------ el sello -------------------------------- */

.preventa__sello {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--oro);
}

/* El filete que se dibuja al entrar. `scaleX` y no `width`: cambiar el ancho
   obliga al navegador a recolocar lo de al lado, la escala no. */
.preventa__sello::after {
  content: "";
  flex: 0 1 150px;
  height: 1px;
  background: var(--oro);
  opacity: 0.65;
  transform-origin: left center;
  animation: preventaFilete 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes preventaFilete {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.preventa__punto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aviso-azul);
  animation: preventaPulso 2.2s ease-out infinite;
}

@keyframes preventaPulso {
  0% { box-shadow: 0 0 0 0 rgba(61, 127, 214, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(61, 127, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 127, 214, 0); }
}

.preventa__titular {
  max-width: 900px;
}

.preventa__intro {
  max-width: 680px;
}

/* --------------------------- cuenta regresiva ---------------------------- */

.preventa__cuenta {
  margin: 34px 0 0;
  padding: clamp(20px, 3.6vw, 34px);
  border: 1px solid var(--borde);
  background: rgba(13, 13, 13, 0.55);
}

.preventa__cuenta-titulo {
  margin: 0 0 18px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--gris-texto);
}

.preventa__reloj {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 18px);
}

.preventa__caja {
  position: relative;
  padding: clamp(16px, 2.6vw, 24px) 8px clamp(14px, 2.2vw, 20px);
  text-align: center;
  border: 1px solid rgba(193, 155, 98, 0.28);
  /* Tres paradas: luz dorada arriba, el color del fondo en medio y una sombra
     abajo. Es lo que hace que la caja se lea como una pieza y no como un
     rectángulo con un número dentro. */
  background: linear-gradient(
    180deg,
    rgba(193, 155, 98, 0.18) 0%,
    rgba(193, 155, 98, 0.03) 46%,
    rgba(0, 0, 0, 0.28) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px -18px rgba(0, 0, 0, 0.9);
}

/* Cifras tabulares: sin ellas, cada dígito nuevo cambia el ancho de la caja y
   las cuatro columnas bailan cada segundo. */
.preventa__cifra {
  position: relative;
  display: block;
  padding-bottom: clamp(8px, 1.4vw, 12px);
  font-family: var(--titulo);
  font-size: clamp(1.6rem, 5.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

/* Un filete corto bajo la cifra: separa el número del rótulo sin partir la caja
   en dos con una línea entera. */
.preventa__cifra::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 1px;
  background: var(--oro);
  opacity: 0.45;
  transform: translateX(-50%);
}

.preventa__rotulo {
  display: block;
  margin-top: 10px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris-texto);
}

/*
 * Dos rótulos por cifra: el largo («Minutos») y el corto («Min»). En el móvil
 * las cuatro cajas van en una sola fila y «SEGUNDOS» con su espaciado no cabe;
 * el corto sí. El corto va con `aria-hidden` porque el largo sigue en el
 * documento —lectores de pantalla y buscadores leen el bueno—.
 */
.preventa__rotulo--corto {
  display: none;
}

/* Solo late la cifra que cambió: si saltaran las cuatro a la vez, parecería un
   anuncio en vez de un reloj. */
.preventa__cifra--cambia {
  animation: preventaCifra 280ms ease;
}

@keyframes preventaCifra {
  from { opacity: 0; transform: translateY(-0.28em); }
  to { opacity: 1; transform: none; }
}

.preventa__cuenta-nota {
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--gris-texto);
}

/* El aviso que sustituye a la cuenta cuando llega el día. */
.preventa__abierta {
  margin: 30px 0 0;
  padding: 18px 22px;
  border-left: 2px solid var(--oro);
  background: rgba(193, 155, 98, 0.1);
  font-family: var(--titulo);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--marfil);
}

/* ------------------------------ beneficios ------------------------------- */

.preventa__beneficios {
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.preventa__beneficio {
  padding: 30px 26px;
  border: 1px solid var(--borde);
  border-top: 2px solid var(--oro);
  background: rgba(255, 255, 255, 0.035);
}

.preventa__beneficio h3 {
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.preventa__beneficio p:last-child {
  margin-bottom: 0;
}

/* El mismo círculo dorado de las tarjetas de «Lo esencial»: la página tiene que
   parecer hermana de sí misma. */
.preventa__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--oro);
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: rgba(193, 155, 98, 0.06);
}

/* --------------------------- acciones y nota ----------------------------- */

.preventa__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 36px 0 0;
}

.preventa__nota {
  margin: 20px 0 0;
  max-width: 720px;
  font-size: 0.76rem;
  color: var(--gris-texto);
}

/* -------------------------------- vídeo ---------------------------------- */

.preventa__video {
  margin: 40px 0 0;
}

.preventa__video video {
  display: block;
  width: 100%;
  border: 1px solid var(--borde);
  background: var(--negro);
}

.preventa__video figcaption {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--gris-texto);
}

.preventa__video strong {
  color: var(--marfil);
}

/* --------------------------- aparición suave ----------------------------- */

/*
 * Las clases las pone `preventa.js`. Sin guion, las tarjetas salen ya puestas:
 * si estuvieran escritas en el HTML y el guion fallara, la sección se quedaría
 * con las tres tarjetas invisibles.
 */
.preventa--preparado .preventa__beneficio {
  opacity: 0;
  transform: translateY(16px);
}

.preventa--visto .preventa__beneficio {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.preventa--visto .preventa__beneficio:nth-child(2) {
  transition-delay: 90ms;
}

.preventa--visto .preventa__beneficio:nth-child(3) {
  transition-delay: 180ms;
}

/* ------------------------- chip de la portada ---------------------------- */

/*
 * El chip va **montado sobre el borde de arriba de la tarjeta**, no dentro del
 * texto. Es lo que hace que las tres tarjetas sigan alineadas: metido en el
 * flujo, empujaba el título de Juquila 47 px por debajo del de las otras dos y
 * la fila se veía descuadrada.
 *
 * La clase `tarjeta--preventa` la pone el generador en la tarjeta que tiene
 * preventa, así que esto no toca las tarjetas de las demás páginas.
 */
.tarjeta--preventa {
  position: relative;
}

.tarjeta--preventa .chip-preventa {
  position: absolute;
  top: -14px;
  left: 26px;
  margin: 0;
  /* Opaco y del color del fondo: el chip corta el filete dorado de la tarjeta
     y se lee como una cinta, no como un texto encimado. */
  background: var(--negro);
  border-color: var(--oro);
}

.chip-preventa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(193, 155, 98, 0.12);
  color: var(--marfil);
  font-size: 0.74rem;
}

.chip-preventa__punto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aviso-azul);
  animation: preventaPulso 2.2s ease-out infinite;
}

/*
 * El mismo distintivo, pero en el héroe de la landing: va sobre el antetítulo
 * del proyecto, así que se le da un poco más de aire y de cuerpo —ahí compite
 * con el titular, no con el texto de una tarjeta—.
 */
.chip-preventa--heroe {
  margin: 0 0 1.05rem;
  padding: 7px 14px;
  font-size: 0.76rem;
}

@media (max-width: 620px) {
  /*
   * Las cuatro cifras van **en una sola fila también en el móvil** (Cristian,
   * 2026-10-02). En dos filas de dos la cuenta se lee como un formulario; en
   * cuatro columnas se lee como un reloj, que es lo que es.
   *
   * Cabe porque se aprieta todo a la vez: el rótulo largo se cambia por el
   * corto, la caja reduce su relleno lateral y el número baja de tamaño. Si
   * solo se cambiara el tamaño de la letra, «SEGUNDOS» —con su espaciado—
   * seguiría sin entrar en una columna de 70 px.
   */
  .preventa__cuenta {
    padding: 16px 12px;
  }

  .preventa__reloj {
    gap: 6px;
  }

  .preventa__caja {
    padding: 12px 2px;
  }

  .preventa__cifra {
    font-size: clamp(1.25rem, 7.4vw, 2rem);
    padding-bottom: 7px;
    letter-spacing: 0;
  }

  .preventa__cifra::after {
    width: 14px;
  }

  .preventa__rotulo {
    margin-top: 7px;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .preventa__rotulo--largo {
    display: none;
  }

  .preventa__rotulo--corto {
    display: inline;
  }

  .preventa__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .preventa__acciones .boton {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preventa__punto,
  .chip-preventa__punto {
    animation: none;
  }

  /* El filete aparece ya dibujado. */
  .preventa__sello::after {
    animation: none;
    transform: none;
  }

  /* El reloj sigue funcionando —es información, no adorno— pero sin latido. */
  .preventa__cifra--cambia {
    animation: none;
  }

  .preventa--preparado .preventa__beneficio,
  .preventa--visto .preventa__beneficio {
    opacity: 1;
    transform: none;
    transition: none;
  }
}