/* ═══════════════════════════════════════════════════════════════
   VERONA BEACH — hoja unica del tema

   Una sola vista, un solo objetivo: que el visitante deje sus datos.

   La regla de toda la hoja es la misma: si un elemento no dice nada, no va.
   No hay tarjeta, ni cajas alrededor de los campos, ni sombras, ni botones
   flotantes. Lo que queda —el logotipo, una frase y tres lineas donde
   escribir— tiene sitio de sobra para respirar, que es de donde sale la
   sensacion de calma.

   Paleta tomada del logotipo original, con cuentagotas:
     azul #183255   ·   aguamarina #9AD6D3   ·   arena #E7D4B4
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── Tipografias ─────────────────────────
   Alojadas en el propio tema, no en Google. Servirlas desde alli costaba dos
   conexiones nuevas (fonts.googleapis.com y fonts.gstatic.com) y una hoja
   que bloquea el pintado, ademas de meter a un tercero en cada visita.

   Son las versiones variables: un archivo por familia cubre todos los pesos
   que usa la pagina. En estaticas eran seis archivos y 237 KB; asi son tres
   y 122 KB. Los subconjuntos latin-ext viajan en el tema pero el navegador
   solo los pide si aparece un caracter que los necesite, cosa que en
   castellano no pasa.

   Ambas familias son SIL Open Font License. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-950: #050D16;
  --navy-900: #081422;
  --navy-800: #0C1B2B;
  --navy-700: #112536;

  --aqua:   #9AD6D3;
  --sand:   #E7D4B4;
  --cream:  #F4F0E4;

  /* Sobre una foto no se puede escribir con transparencias. Un crema al 76 %
     deja pasar el fondo, y donde el fondo es el sol el texto pierde el
     contraste minimo. Aqui van colores opacos: el mismo aspecto apagado, pero
     con un contraste que no depende de lo que haya detras.
     Y cuanto mas claro sea el texto, menos velo necesita la foto: subir el
     crema es lo que permite dejar ver la piscina en vez de taparla. */
  --txt:       #EFEBDF;
  --txt-soft:  #E2DDD0;
  --txt-faint: #CFCABC;
  --line:      rgba(244, 240, 228, .30);
  --line-soft: rgba(244, 240, 228, .19);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Una sola curva para todo el movimiento del sitio: entra rapido y frena
     largo. Mezclar curvas distintas hace que las cosas parezcan de sitios
     distintos. */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

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

body {
  margin: 0;
  /* Columna unica: el escenario ocupa lo que sobre y el pie se apoya abajo,
     sin margenes negativos ni posiciones fijas que descuadren la altura. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--navy-900);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* ───────────────────────── Fondo ─────────────────────────
   Tres capas fijas que ocupan la ventana entera: la foto, el velo y el grano.

   `fixed` y no `absolute` porque en movil la pagina si se desplaza, y una foto
   que se va con el scroll deja una franja de color plano al final. */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--navy-950);
}

/* La foto. El marcador borroso de 20 px va incrustado aqui en base64: pinta
   los colores del atardecer desde el primer fotograma, asi que mientras baja
   la imagen de verdad no se ve un rectangulo negro. Pesa 148 bytes, menos que
   la peticion de red que costaria servirlo como archivo. */
/* Dos capas y no una, a proposito: el envoltorio se mueve con el raton y la
   imagen de dentro hace el acercamiento. Si las dos cosas vivieran en el mismo
   `transform`, el JS del raton pisaria la animacion del CSS en cada fotograma.

   El envoltorio sobresale un 4 % por cada lado para tener margen donde
   desplazarse: sin ese colchon, al moverse asomaria el borde de la foto. */
.bg__photo {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  display: block;
  background-image: url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAAAwBACdASoUAAsAPu1iqU2ppaOiMAgBMB2JZACdMoGv/gQCLbeANkW2V6gA/o4TJLI/vxylswXDnuHjXe50exiaQD+NsQ4x8mlUzkeeH/pSobpz1NyW62m22+hMhqPI/IRYpWNpgdLlq8wOoZAVVjwjID46QUOTggGuO213joCgAA==");
  background-size: cover;
  background-position: center;

  /* El JS escribe estas dos variables; el navegador solo recompone la capa. */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.bg__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform-origin: 46% 58%;   /* el sol y el arranque de la piscina */
  will-change: transform;

  /* Dos animaciones encadenadas.
     La primera es la entrada: la foto llega muy acercada y se abre hasta su
     sitio en dos segundos y pico. Es el unico momento en que el movimiento se
     nota, y es a proposito — la pagina abre como una fotografia y la marca
     aparece despues, encima.
     La segunda toma el relevo justo donde acaba la primera y ya no para: va y
     vuelve entre 1.06 y 1.14 en 46 segundos, tan despacio que no se ve moverse,
     solo se nota que la imagen esta viva. Va y vuelve en lugar de repetirse
     porque un bucle que solo entra tiene que volver al principio de un salto. */
  animation:
    vb-entrada 2.4s cubic-bezier(.16, 1, .3, 1) both,
    vb-deriva 46s ease-in-out 2.4s infinite alternate;
}
@keyframes vb-entrada {
  from { transform: scale(1.30); }
  to   { transform: scale(1.06); }
}
@keyframes vb-deriva {
  from { transform: scale(1.06); }
  to   { transform: scale(1.14); }
}

/* Mientras el raton se mueve, la transicion se acorta para que la foto siga al
   cursor; al parar vuelve la larga y frena sola. */
.bg__photo.is-siguiendo { transition-duration: .28s; }

/* Velo. Es lo unico que hace legible el texto sobre una foto tan clara, y no es
   un tinte plano: esta calculado contra donde cae el texto.

   En movil, que va en una sola columna centrada, el texto ocupa todo el ancho,
   asi que el velo es vertical y se cierra abajo, que es donde estan los campos.
   La version de escritorio, con sus dos columnas, esta mas abajo en la hoja. */
.bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(5, 13, 22, .78) 0%,
    rgba(5, 13, 22, .82) 16%,
    rgba(5, 13, 22, .83) 46%,
    rgba(5, 13, 22, .83) 70%,
    rgba(5, 13, 22, .91) 100%);

  /* El velo entra despues de la foto. Durante los primeros segundos la imagen
     se ve casi limpia; el velo se cierra justo a tiempo de recibir el texto.
     Es lo que hace que la pagina abra como una fotografia y no como una
     fotografia con una capa oscura encima. */
  animation: vb-velo 2.6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vb-velo {
  from { opacity: .42; }
  to   { opacity: 1; }
}

/* Grano. No es decoracion: sin el, un velo tan grande y tan oscuro se bandea
   en pantallas de 8 bits y salen escalones de color donde deberia haber una
   transicion limpia. */
.bg__grain {
  position: absolute;
  inset: -50%;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────────────── Escenario ───────────────────────── */

.stage {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* max() con env(): en un iPhone con muesca el contenido no se mete debajo
     de la barra ni de las esquinas redondeadas. En todo lo demas, env() vale 0
     y manda el valor de siempre. */
  padding:
    clamp(48px, 7vh, 96px)
    max(24px, env(safe-area-inset-right))
    clamp(36px, 5vh, 72px)
    max(24px, env(safe-area-inset-left));
}

.shell {
  width: 100%;
  max-width: 440px;
  text-align: center;
}

/* ───────────────────────── Marca y titulares ───────────────────────── */

/* El logotipo estaba a 300 px y se comia la portada: sobre una foto, una marca
   grande compite con la imagen en lugar de apoyarse en ella. A 210 px manda
   igual y deja respirar el atardecer. */
.brand {
  margin-bottom: clamp(26px, 4.2vh, 42px);
}
.brand img {
  width: clamp(152px, 34vw, 210px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 clamp(16px, 2.6vh, 22px);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;          /* compensa el espaciado sobrante de la ultima letra */
  text-transform: uppercase;
  color: var(--sand);
}

.hero__title {
  margin: 0 0 clamp(16px, 2.6vh, 22px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 8.6vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.012em;
  color: var(--cream);
  text-wrap: balance;
}
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--sand);
}

/* Va en una sola linea, siempre. Por eso el tamano se ata al ancho de la
   ventana en vez de fijarse: en un telefono de 360 px baja a 12 px y sigue
   entrando, y en escritorio se planta en 15 px y no crece mas.
   Ojo si se cambia el texto desde el panel: una frase mucho mas larga que la
   de por defecto se saldra por el lado. */
.hero__lead {
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(11px, 3.3vw, 15px);
  line-height: 1.7;
  letter-spacing: .005em;
  color: var(--txt);
}

/* ───────────────────────── Registro ─────────────────────────
   Sin tarjeta. Un panel de cristal encima de un fondo ya trabajado son dos
   superficies discutiendo por el mismo sitio; quitarlo dejo el formulario
   apoyado directamente sobre el fondo, que es donde se ve mejor. */

.registro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* al confirmar se fija la altura: el mensaje queda centrado en ella */
  margin-top: clamp(32px, 4.6vh, 56px);
  text-align: left;
}

.registro__title {
  margin: 0 0 clamp(20px, 3vh, 28px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.18rem, 4.4vw, 1.34rem);
  line-height: 1.35;
  letter-spacing: .002em;
  color: var(--cream);
  text-align: center;
  text-wrap: balance;
}

/* ── Campos ──
   Solo una linea debajo. La etiqueta de texto se oculta y queda como respaldo
   para lectores de pantalla: el marcador de posicion ya dice lo mismo, y
   repetirlo alarga el formulario, que es justo lo que baja los registros. */

.field {
  position: relative;
  margin-bottom: 4px;
}

.field > label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.field input {
  width: 100%;
  padding: 14px 2px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.4;
  transition: border-color .3s var(--ease);
}
.field input::placeholder {
  color: var(--txt-faint);
  transition: color .3s var(--ease);
}
.field input:hover { border-bottom-color: var(--line); }
.field input:focus { outline: none; }
.field input:focus::placeholder { color: rgba(244, 240, 228, .16); }

/* El subrayado que crece desde el centro al enfocar. Es lo unico que se mueve
   dentro del formulario, y por eso se nota sin necesidad de un halo alrededor
   del campo. */
.field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s var(--ease);
}
.field:focus-within::after { transform: scaleX(1); }

.field input.is-invalid { border-bottom-color: rgba(226, 138, 128, .8); }

/* Autocompletado de Chrome: sin esto pinta el campo de azul claro con texto
   negro y rompe la portada entera. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 60px var(--navy-800) inset;
  caret-color: var(--cream);
}

/* Honeypot: fuera de la vista y fuera del recorrido del tabulador, pero sin
   display:none — algunos bots omiten los campos ocultos de esa forma. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ───────────── Selector de pais del telefono (intl-tel-input) ─────────────
   La libreria trae su propio CSS, pensado para formularios sobre fondo blanco:
   panel blanco, borde gris, prefijos en gris claro. Encima de esta landing el
   resultado era ilegible — los nombres de pais heredaban nuestro crema y
   quedaban crema sobre blanco. Esto lo reviste entero. */

/* La libreria envuelve el campo en un div `inline-block`, y el ancho se
   quedaba en el que pidiera su contenido: el campo del WhatsApp salia 61 px
   mas corto que los otros dos y la linea de debajo no llegaba al final. */
.field .iti { display: block; width: 100%; }

/* Sin banderas. El sprite de la libreria son 70 KB para dibujar 16 rectangulos
   de 20x14 px, y con la lista en castellano y reducida a los paises que el
   servidor acepta, el nombre ya identifica cada fila. Ocultarlas evita que el
   navegador llegue a pedir la imagen.
   (El elemento sigue en el DOM: de su clase sale el codigo de pais que usa el
   JS para poner los nombres en castellano.) */
.iti__flag, .iti__flag-box { display: none; }
.iti__selected-country-primary { gap: 0; }

/* El boton del pais: sin caja, alineado con el texto del campo. */
.iti__selected-country { background: transparent; border: 0; }
.iti__selected-country:hover,
.iti__selected-country:focus { background: rgba(244, 240, 228, .06); border-radius: 2px 2px 0 0; }

/* El prefijo venia a 16 px, un punto por encima del texto del campo, y se
   notaba. */
.iti__selected-dial-code {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--txt);
  margin-left: 7px;
}
.iti__arrow { border-top-color: var(--txt-faint); }
.iti__arrow--up { border-bottom-color: var(--txt-faint); }
.iti__selected-country:hover .iti__arrow { border-top-color: var(--sand); }

/* ── El panel ── */
.iti--container .iti__dropdown-content,
.iti__dropdown-content {
  background: rgba(8, 20, 34, .97);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(231, 212, 180, .22);
  border-radius: 4px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  overflow: hidden;
}

.iti__search-input {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 240, 228, .14);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
}
.iti__search-input::placeholder { color: var(--txt-faint); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--aqua); }

/* La libreria fija el alto con `.iti--inline-dropdown .iti__country-list`, que
   pesa mas que una sola clase: hay que igualar la especificidad para subirlo. */
.iti--container .iti__country-list,
.iti--inline-dropdown .iti__country-list,
.iti__country-list {
  max-height: 268px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 212, 180, .3) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 6px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__country-list::-webkit-scrollbar-thumb {
  background: rgba(231, 212, 180, .28);
  border-radius: 3px;
}

.iti__country {
  padding: 9px 14px;
  background: transparent;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.4;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.iti__country-name { color: var(--txt); }

/* El prefijo de cada fila venia en gris #999: sobre el panel oscuro no se veia.
   En arena se lee y ademas separa el dato del nombre sin necesidad de una
   linea entre columnas. */
.iti__dial-code { color: rgba(231, 212, 180, .62); }

.iti__country.iti__highlight,
.iti__country:hover {
  background: rgba(154, 214, 211, .12);
  color: var(--cream);
}
.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__country-name { color: var(--cream); }
.iti__country.iti__highlight .iti__dial-code,
.iti__country:hover .iti__dial-code { color: var(--sand); }

/* El pais ya elegido, marcado con el arena de la marca. */
.iti__country.iti__active .iti__country-name { color: var(--sand); }

/* Sin resultados de busqueda */
.iti__a11y-text { color: var(--txt-soft); }

/* En movil la libreria abre el panel a pantalla completa. */
.iti--fullscreen-popup .iti__dropdown-content {
  background: rgba(6, 16, 27, .985);
  border: 0;
  border-radius: 0;
}

/* Caja del candado de Cloudflare, que el JS inserta justo antes del boton. Con
   `interaction-only` casi siempre queda vacia, asi que no reserva alto: solo
   separa cuando de verdad aparece algo dentro. */
.vb-ts:not(:empty) { margin-top: clamp(22px, 3.4vh, 30px); }

/* ───────────────────────── Boton ───────────────────────── */

.btn {
  display: block;
  width: 100%;
  margin-top: clamp(26px, 4vh, 34px);
  padding: 15px 24px;
  border: 1px solid var(--sand);
  border-radius: 2px;
  background: var(--sand);
  color: var(--navy-950);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--cream); border-color: var(--cream); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

.btn--line {
  display: inline-block;
  width: auto;
  margin-top: 0;
  background: transparent;
  border-color: var(--line);
  color: var(--cream);
}
.btn--line:hover { background: transparent; border-color: var(--sand); color: var(--sand); }

/* ───────────────────────── Letra pequena ───────────────────────── */

.form-msg {
  margin: 14px 0 0;
  min-height: 1.15em;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--aqua);
}
.form-msg.is-error { color: #F0B5AE; }

/* Consentimiento: una sola linea, con una casilla del tamano de la letra.
   Sigue siendo una casilla real y marcable — la autorizacion expresa no se
   sustituye por un «al enviar aceptas», por mucho que quede mas limpio. */
.accept {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--txt-soft);
}
.accept input {
  flex: none;
  margin: 3px 0 0;
  width: 13px; height: 13px;
  accent-color: var(--aqua);
  cursor: pointer;
}

.note {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--txt-faint);
}

/* ───────────────────────── Confirmacion ───────────────────────── */

.done { text-align: center; padding: 6px 0; }
.done__mark {
  width: 40px; height: 40px;
  margin: 0 auto 18px;
  color: var(--aqua);
}
.done__mark path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: vb-check .7s var(--ease) .15s forwards;
}
@keyframes vb-check { to { stroke-dashoffset: 0; } }

.done__title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--cream);
}
.done__title:focus { outline: none; }
.done__text { margin: 0 auto; max-width: 32ch; font-size: 13.5px; line-height: 1.65; color: var(--txt); }

/* ───────────────────────── Pie ─────────────────────────
   Una sola linea. El credito de la constructora y el aviso legal no compiten
   con nada porque estan a 10 px y al 45 % de opacidad, que es exactamente lo
   que merecen en una pagina cuyo trabajo es que alguien deje su telefono. */

.site-footer {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0 max(24px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-faint);
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  opacity: .55;
  transition: opacity .3s var(--ease);
}
.site-footer__brand:hover { opacity: .95; }
.site-footer__brand img { width: 84px; height: auto; display: block; }
.site-footer__legal { letter-spacing: .06em; text-transform: none; font-size: 10.5px; }
.site-footer__sep { margin: 0 6px; opacity: .5; }
.site-footer__legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.site-footer__legal a:hover { color: var(--sand); border-bottom-color: rgba(231, 212, 180, .5); }

/* ───────────────────────── Paginas de texto ───────────────────────── */

.stage--doc { align-items: flex-start; }
.doc {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  font-size: 15px;
  line-height: 1.75;
}
.doc__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 24px;
}
.doc h2, .doc h3 { font-family: var(--serif); font-weight: 400; color: var(--cream); }
.doc a { color: var(--sand); }

/* ───────────────────────── Entrada ─────────────────────────
   Cada bloque entra con su propio retraso (--d) para que la portada se componga
   de arriba abajo en lugar de aparecer de golpe.

   Es una animacion CSS y no una clase que ponga el JS a proposito. La primera
   version encendia el contenido desde requestAnimationFrame, y ahi el fondo se
   veia perfecto pero el texto no aparecia nunca en una pestana abierta de
   segundo plano: sin fotogramas no hay rAF. Con `animation ... both` el
   contenido acaba visible aunque el JS no llegue a ejecutarse. */

.reveal {
  animation: vb-in .95s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes vb-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Segundo plano del parallax: el contenido se mueve con el raton mucho menos
   que la foto —5 px contra 26— y en el mismo sentido. Esa diferencia de
   velocidad entre las dos capas es lo que se lee como profundidad; si las dos
   se movieran igual, seria un desplazamiento y no un parallax.
   Se pone en el envoltorio y no en cada bloque para no tocar el `transform`
   que ya usa la animacion de entrada. */
.shell {
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.shell.is-siguiendo { transition-duration: .32s; }

/* Foco visible y consistente en todo lo que se puede tabular. Los campos
   tienen el suyo propio (el subrayado), asi que aqui van solo los demas. */
:where(a, button, [tabindex]):focus-visible {
  outline: 1px solid var(--aqua);
  outline-offset: 4px;
  border-radius: 1px;
}
.accept input:focus-visible { outline: 1px solid var(--aqua); outline-offset: 3px; }

/* ───────────────────────── Preferencias del sistema ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .done__mark path { animation: none !important; }
  .field::after { transition: none; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Ni entrada, ni acercamiento, ni parallax: la pagina aparece ya montada.
     La foto se queda un pelo acercada porque al 100 % exacto el borde puede
     despegarse por el redondeo de subpixeles. */
  .bg__photo img { animation: none !important; transform: scale(1.04) !important; }
  .bg__scrim { animation: none !important; opacity: 1 !important; }
  .bg__photo, .shell { transition: none !important; transform: none !important; }

  * { scroll-behavior: auto !important; }
}

/* ───────────────────────── Escritorio: dos columnas ─────────────────────────
   Apilado, el conjunto no cabe en un portatil y hay que desplazarse para llegar
   al formulario, que es lo unico que la pagina pide. En dos columnas entra
   entero en una pantalla de 720 px de alto y ademas se lee mejor: el mensaje a
   un lado, la accion al otro, separados por un filete de un pixel. */

@media (min-width: 900px) {
  /* El velo cambia de forma con el diseño. Con dos columnas el texto vive en
     los dos extremos, asi que se oscurecen los bordes y se deja pasar la foto
     por la franja del centro, que es justo el hueco entre las columnas: la
     piscina se ve, y ni el mensaje ni el formulario pierden contraste.
     La primera version oscurecia solo la izquierda y dejaba el formulario
     sobre las tumbonas iluminadas, a 3:1 de contraste. */
  .bg__scrim {
    background:
      /* Un ovalo suave justo detras del mensaje. El sol quemado de la foto cae
         exactamente ahi, y subir el velo de toda la pantalla para taparlo
         apagaba tambien la piscina, que es lo que se quiere ver. Oscurecer solo
         ese rectangulo deja el resto de la foto limpio. */
      radial-gradient(34% 42% at 27% 57%, rgba(5, 13, 22, .42) 0%, rgba(5, 13, 22, .22) 55%, transparent 100%),
      linear-gradient(100deg,
        rgba(5, 13, 22, .85) 0%,
        rgba(5, 13, 22, .83) 42%,
        rgba(5, 13, 22, .42) 50%,
        rgba(5, 13, 22, .40) 55%,
        rgba(5, 13, 22, .72) 60%,
        rgba(5, 13, 22, .82) 66%,
        rgba(5, 13, 22, .85) 100%),
      linear-gradient(to bottom,
        rgba(5, 13, 22, .28) 0%,
        rgba(5, 13, 22, .06) 42%,
        rgba(5, 13, 22, .42) 100%);
  }

  .shell {
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: clamp(56px, 7vw, 96px);
    align-items: center;
    text-align: left;
  }
  .shell--centro { display: block; max-width: 620px; text-align: center; }

  .stage { padding-top: clamp(48px, 7vh, 76px); padding-bottom: clamp(36px, 5vh, 56px); }

  .intro { max-width: 460px; }

  /* En la columna estrecha el titular ya no puede crecer con el ancho de la
     ventana: pasado cierto tamano «Algo extraordinario» se parte en dos lineas
     y el bloque deja de leerse como una sola frase. */
  .hero__title { font-size: clamp(2.6rem, 4.2vw, 3.5rem); }

  .brand img { margin: 0; }
  .hero__lead { margin-left: 0; margin-right: 0; }

  .registro { margin-top: 0; }
  .registro__title { text-align: left; }

  /* El filete que separa las dos columnas. Se difumina arriba y abajo para que
     no parezca el borde de una caja. */
  .registro::before {
    content: "";
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: calc(-1 * clamp(28px, 3.5vw, 48px));
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line-soft) 22%, var(--line-soft) 78%, transparent);
  }

  /* En las paginas sin formulario (404, gracias) el bloque sigue centrado:
     una sola columna no tiene por que alinearse a la izquierda. */
  .shell--centro .intro { max-width: none; }
  .shell--centro .brand img { margin: 0 auto; }
  .shell--centro .hero__lead { margin-left: auto; margin-right: auto; }

  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 0 clamp(28px, 4vw, 52px) 24px;
  }
}

/* Movil apaisado: el bloque necesita respirar menos o el formulario se va
   demasiado abajo. */
@media (max-height: 620px) and (max-width: 899px) {
  .stage { padding-top: 44px; padding-bottom: 52px; }
  .brand img { width: clamp(180px, 36vw, 220px); }
  .registro { margin-top: 30px; }
}

/* En movil el texto del boton se partia en dos lineas y lo dejaba en 62 px de
   alto: menos espaciado entre letras y cabe en una. */
@media (max-width: 460px) {
  .btn { font-size: 10.5px; letter-spacing: .14em; text-indent: .14em; }
}