@charset "UTF-8";
/* =====================================================================
   Campeonato de Pesca Barrio Playa Brava 2026
   Hoja de estilos única de la landing.
   Orden: tokens · base · fondo · cabecera · hero · riel · tarjeta ·
          formulario · éxito · pie · animaciones · responsive
   ===================================================================== */

/* ------------------------------ TOKENS ------------------------------ */
:root{
  /* Paleta muestreada de los archivos gráficos del barrio */
  --navy-900:#012F52;
  --navy-800:#003B62;
  --navy-700:#0C3A5C;
  --teal-600:#005276;
  --teal-500:#028BAD;
  --cyan-400:#50C4DF;
  --cyan-300:#96DEEF;
  --cyan-100:#CAECF7;
  --orange:#FC8B32;
  --rojo:#E5484D;

  --tinta:#123A5E;            /* texto de etiquetas y títulos de la tarjeta */
  --tinta-suave:#5B7C96;
  --borde:#DCE7EF;
  --borde-foco:var(--cyan-400);
  --placeholder:#A9B8C6;
  --blanco:#FFFFFF;

  /* Medidas */
  --ancho:1180px;
  --riel:268px;
  --hueco:26px;
  --radio:8px;
  --radio-tarjeta:16px;
  --alto-campo:52px;

  --sombra-tarjeta:0 30px 70px rgba(1,47,82,.24), 0 4px 14px rgba(1,47,82,.10);
  --transicion:.28s cubic-bezier(.4,0,.2,1);
}

/* ------------------------------ BASE -------------------------------- */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  min-height:100vh;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:var(--tinta);
  background:var(--navy-900);
  position:relative;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

/* --------------------------- FONDO / FOTO --------------------------- */
.fondo{
  /* Absoluto, no fijo: evita los fallos de fondos fijos en iOS.

     La altura se ata al ANCHO de la ventana, no al alto del documento.
     Si dependiera del alto, en pantallas anchas la foto se ampliaría
     mucho más y el recorte cambiaría: por eso antes en 1920 px solo se
     veía cielo. Con 112vw el encuadre es el mismo en cualquier pantalla.
     El 66% es el piso mínimo, para que la foto siempre alcance la cresta
     de ola (64%) aunque el formulario crezca. */
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:max(112vw, 66%);
  z-index:0;
  overflow:hidden;
  background-color:var(--navy-900);
  /* Miniatura borrosa de 24px (874 bytes) incrustada aquí mismo: pinta
     de inmediato, sin esperar ninguna red, mientras llega la foto real
     (87-280 KB según el ancho). Antes de esto la pantalla se quedaba en
     azul sólido durante toda la carga, que era parte de la sensación de
     lentitud ("no carga rápido el formulario"). */
  background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAArABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDMjgz1Q1ZitQf4TVeC7cchQB/vGtS21RdoV4s8/wB7/wCtWsqjWyMY077sktdPyA0ilF9TRV61v7Mv80RDAZK5zRXJLESudSoJLY5hJIzK5YTAHAAyAauLdRIwDuwJ7M+D/Kq0dwjqXMTDBAbdhSKz7tUm3G2td3/TQNu/SupnOkaUUyQ6xcy7ZdpiGTuI5479hRWfHPOgEU0MTh8MocgY96KxktdTeO2hQjkLPmZt6553HrUtikkk5S3VGYjIQscnHp6n2qo5LHJOTQpIYEEgg8EVb1MkXlvLyK4JiyGHYLngUVSeaR5DK0jGQnJbPOaKmUU3exak11P/2Q==");
  background-size:cover;
  background-position:50% 62%;
  /* Sin esto, en móvil (donde el tamaño cambia a "100% auto" y la caja
     mide el alto de todo el documento) la miniatura se repetiría en
     mosaico borroso por el resto de la página en vez de dejar ver el
     navy sólido de abajo. */
  background-repeat:no-repeat;
}
/* Páginas cortas (sala de espera de la fila, por ahora): el 112vw de
   .fondo está pensado para la landing completa, mucho más alta. Con
   contenido corto, esa altura se sale kilómetros por debajo del pie de
   página y deja la foto sola, sin nada encima, hasta donde alcance la
   vista. Aquí el fondo se ata al alto real de la página en vez de al
   ancho de la ventana. */
body.pagina-corta .fondo{height:100%}
/* En la cuenta regresiva, la tarjeta es mucho más baja que el formulario
   real: sin el formulario largo empujando la altura, la mascota grande
   flotante (pensada para llenar ese espacio) deja un vacío enorme entre
   la tarjeta y el pie en vez de acompañarla. La tarjeta ya tiene su
   propio ícono de mascota en la cabecera. */
body.pagina-corta .mascotaFlotante{display:none}

.fondo picture{display:block;width:100%;height:100%}
.fondo img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Encuadre del diseño: recorta el cielo de arriba para dejar a la
     altura del titular la cordillera, la ciudad y el pescador. */
  object-position:50% 62%;
}
/* Velo navy: oscurece la izquierda lo justo para que el texto blanco se
   lea, y deja intacto el atardecer de la derecha. */
.fondo__velo{
  position:absolute;
  inset:0;
  background:
    /* 1. Refuerzo en la esquina inferior izquierda: ahí la foto tiene
          espuma clara y el párrafo perdía legibilidad. Al ser radial,
          se apaga antes de llegar al pescador y al atardecer. */
    radial-gradient(115% 72% at 0% 100%,
      rgba(1,30,54,.58) 0%,
      rgba(1,30,54,.26) 46%,
      rgba(1,30,54,0) 76%),
    /* 2. Velo principal: oscurece la columna del texto y deja limpia
          la derecha. */
    linear-gradient(100deg,
      rgba(1,32,58,.86) 0%,
      rgba(1,36,64,.74) 24%,
      rgba(2,49,84,.40) 54%,
      rgba(2,55,94,.08) 100%),
    /* 3. Sombra suave arriba y abajo para asentar la cabecera y el
          borde inferior. */
    linear-gradient(180deg,
      rgba(1,32,58,.22) 0%,
      rgba(1,32,58,.02) 18%,
      rgba(1,32,58,.04) 70%,
      rgba(1,32,58,.40) 100%);
}

/* --------------------------- CABECERA ------------------------------- */
.cabecera{
  position:relative;
  z-index:3;
  max-width:var(--ancho);
  margin:0 auto;
  padding:30px 20px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.logo{text-decoration:none;display:inline-block;line-height:0}
/* Logo oficial (logo-barrio.webp). El width/height del <img> fija su
   proporción real (1.927:1); aquí solo se controla el alto y el ancho
   se sigue solo, sin deformar el gráfico. */
.logo__imagen{height:90px;width:auto}

.cabecera__nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  color:rgba(255,255,255,.88);
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
}
.cabecera__nav i{color:var(--cyan-400);font-style:normal}
.cabecera__raya{
  width:46px;
  height:2px;
  background:var(--cyan-400);
  border-radius:2px;
  margin-right:6px;
}

/* --------------------------- ENVOLTURA ------------------------------ */
.envoltura{
  position:relative;
  z-index:2;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 20px;
}

/* ------------------------------ HERO -------------------------------- */
.hero{padding:64px 0 0}

.hero__eyebrow{
  margin:0 0 22px;
  color:var(--cyan-400);
  font-size:12px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(1,20,38,.55);
}
.hero__eyebrow i{font-style:normal;opacity:.7;margin:0 4px}

.hero__titulo{
  margin:0 0 24px;
  /* Dos líneas: "Inscripción Campeonato de Pesca" / "Playa Brava
     2026". La primera mide 27ch a cualquier tamaño de fuente (el ch
     escala con ella), así que 28ch deja el margen justo para que no
     se parta en tres. */
  max-width:28ch;
  color:var(--blanco);
  font-size:clamp(32px,3.1vw,42px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.005em;
  text-shadow:0 2px 24px rgba(1,32,58,.45);
}

.hero__texto{
  margin:0;
  max-width:540px;
  color:#F2F8FC;
  font-size:16px;
  font-weight:300;
  line-height:1.72;
  /* Sombra en dos capas: una ceñida para definir el borde de cada letra
     y una más ancha y suave para separar el texto del fondo. Así se lee
     igual sobre cielo claro que sobre agua oscura, sin depender de que
     el velo quede perfectamente calibrado en cada punto de la foto. */
  text-shadow:0 1px 2px rgba(1,20,38,.75), 0 3px 18px rgba(1,20,38,.55);
}
.hero__texto a{
  color:var(--cyan-300);
  text-decoration:none;
  border-bottom:1px solid rgba(150,222,239,.45);
  transition:border-color var(--transicion),color var(--transicion);
}
.hero__texto a:hover{color:var(--blanco);border-bottom-color:var(--blanco)}

/* ---------------------------- COLUMNAS ------------------------------ */
.columnas{
  position:relative;
  display:grid;
  grid-template-columns:var(--riel) minmax(0,1fr);
  gap:var(--hueco);
  align-items:start;
  padding-top:46px;
  padding-bottom:120px;
}

/* --------------------------- TRANSICIÓN ----------------------------- */
/* Panel blanco que ocupa el tercio inferior de la página con una cresta
   de ola encima. Va anclado al body (no usa 100vw) para que no genere
   desbordamiento horizontal ni un contenedor de scroll. */
.transicion{
  position:absolute;
  left:0;
  right:0;
  top:64%;
  bottom:0;
  z-index:1;
  background:#fff;
  pointer-events:none;
}
.transicion::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-68px;
  height:70px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 52C240 4 480 100 720 52 960 4 1200 100 1440 52v26C1200 126 960 30 720 78 480 126 240 30 0 78Z' fill='%2396DEEF'/%3E%3Cpath d='M0 74C240 26 480 122 720 74 960 26 1200 122 1440 74v46H0Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
}

/* ------------------------------ RIEL -------------------------------- */
.riel{position:relative;z-index:1;padding-top:6px;align-self:stretch;display:flex;flex-direction:column}
.mascotaFlotante{margin-top:auto;padding-top:64px;pointer-events:none}
.mascotaFlotante img{display:block;width:100%;height:auto;animation:flotar 6s ease-in-out infinite;filter:drop-shadow(0 14px 12px rgba(1,47,82,.12))}
@media(min-width:1440px){.mascotaFlotante img{width:calc(var(--riel) + 120px);max-width:none;margin-left:-120px}}

.riel__barra{
  display:block;
  width:54px;
  height:4px;
  border-radius:4px;
  background:var(--orange);
  margin-bottom:34px;
}

.ventajas{list-style:none;margin:0 0 46px;padding:0;display:grid;gap:22px}

.ventaja{display:flex;align-items:center;gap:16px}
/* El ítem de las bases es un <a> real (abre el modal); los otros dos son
   texto simple. El enlace repite el mismo layout de fila para que se
   vea idéntico, y suma foco/hover visibles porque ahora es interactivo. */
.ventaja__enlace{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
}
.ventaja__enlace:focus-visible{outline:2px solid var(--cyan-400);outline-offset:6px}
.ventaja__enlace:hover .ventaja__texto,
.ventaja__enlace:focus-visible .ventaja__texto{text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
.ventaja__icono{
  flex:none;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--navy-700);
  box-shadow:0 8px 22px rgba(1,32,58,.35);
  transition:transform var(--transicion),background var(--transicion);
}
.ventaja:hover .ventaja__icono,
.ventaja__enlace:hover .ventaja__icono,
.ventaja__enlace:focus-visible .ventaja__icono{transform:translateY(-3px);background:var(--teal-600)}
.ventaja__icono img{width:28px;height:auto}
.ventaja__texto{
  color:var(--blanco);
  font-size:15px;
  font-weight:400;
  line-height:1.32;
}

/* Lema manuscrito */
.lema{position:relative;padding-bottom:14px}
.lema__texto{
  margin:0;
  font-family:"Caveat","Poppins",cursive;
  font-size:40px;
  font-weight:600;
  line-height:1.12;
  color:var(--blanco);
}
.lema__trazo{
  width:150px;
  height:auto;
  margin-top:2px;
  margin-left:4px;
}

/* Contador de cupos */
.contador{
  margin-top:40px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(150,222,239,.28);
  backdrop-filter:blur(6px);
  width:max-content;
  max-width:100%;
}
.contador__numero{
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--cyan-300);
}
.contador__etiqueta{
  font-size:12px;
  line-height:1.3;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ---------------------------- TARJETA ------------------------------- */
.tarjeta{
  position:relative;
  z-index:1;
  background:var(--blanco);
  border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra-tarjeta);
  padding:30px 38px 40px;
  overflow:hidden;
}

.tarjeta__cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:22px;
  margin-bottom:26px;
  border-bottom:1px solid #EAF1F6;
}
.tarjeta__titulo{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tinta);
}
.tarjeta__mascota{width:54px;height:65px;object-fit:contain;flex:none}

.tarjeta__sello{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:none;
}
.tarjeta__sello img{width:118px;opacity:.85}
.tarjeta__sello span{
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#8FBCD4;
}

/* Cuenta regresiva de apertura */
.cuentaRegresiva{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  margin:6px 0 24px;
  flex-wrap:wrap;
}
.cuentaRegresiva__caja{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:74px;
  padding:16px 8px 14px;
  border-radius:var(--radio);
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
  box-shadow:0 10px 24px rgba(1,47,82,.22);
}
.cuentaRegresiva__numero{
  font-size:32px;
  font-weight:700;
  line-height:1;
  color:var(--blanco);
  font-variant-numeric:tabular-nums;
}
.cuentaRegresiva__numero.es-tic{animation:crTic .4s cubic-bezier(.34,1.56,.64,1)}
.cuentaRegresiva__etiqueta{
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--cyan-300);
}
.cuentaRegresiva__dosPuntos{
  align-self:center;
  margin-top:-14px;
  font-size:26px;
  font-weight:300;
  color:var(--borde);
}
.cuentaRegresiva__fecha{
  margin:0 0 26px;
  text-align:center;
  font-size:14px;
  color:var(--tinta-suave);
}
.cuentaRegresiva__fecha i{color:var(--teal-500);font-style:normal;margin:0 4px}
.cuentaRegresiva__aviso{
  text-align:center;
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:10px;
  background:#EFF9FC;
  border-top:4px solid var(--orange);
  color:var(--navy-800);
  font-weight:600;
}
.cuentaRegresiva__aviso[hidden]{display:none}
#cuentaRegresivaActualizar{margin-top:2px}

/* Fila virtual de acceso */
.filaPagina{max-width:520px;margin:0 auto;padding:70px 0 100px}
.filaEspera__texto{
  margin:0 0 22px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--tinta-suave);
}
.filaEspera__barra{
  position:relative;
  height:8px;
  border-radius:8px;
  background:#EAF1F6;
  overflow:hidden;
  margin-bottom:26px;
}
.filaEspera__relleno{
  position:absolute;
  inset:0;
  width:40%;
  border-radius:8px;
  background:linear-gradient(90deg,var(--teal-500),var(--cyan-400));
  animation:filaBarra 1.6s ease-in-out infinite;
}
@keyframes filaBarra{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}
.filaEspera__datos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:22px;
}
.filaEspera__dato{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:18px 10px;
  border-radius:var(--radio);
  background:linear-gradient(160deg,var(--navy-800),var(--navy-900));
}
.filaEspera__numero{
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:var(--blanco);
  font-variant-numeric:tabular-nums;
}
.filaEspera__etiqueta{
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan-300);
  text-align:center;
}
.filaEspera__nota{
  margin:0 0 14px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--tinta-suave);
}
.filaEspera__actualizado{
  margin:0;
  font-size:11px;
  color:var(--placeholder);
  text-align:right;
}

/* Aviso de cierre */
.aviso{
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:22px;
  font-size:14px;
  line-height:1.55;
}
.aviso strong{display:block;margin-bottom:2px}
.aviso--cerrado{background:#EFF9FC;color:var(--navy-800);border-top:4px solid var(--orange);text-align:center;padding:38px 24px}
.aviso--cerrado[hidden],.formulario[hidden]{display:none}
.aviso--cerrado img{display:block;margin:0 auto 18px;object-fit:contain}
.aviso--cerrado strong{display:block;font-size:26px;line-height:1.3;margin-bottom:16px}
.aviso--cerrado p{font-size:15px;line-height:1.65;margin:12px 0;overflow-wrap:anywhere}
.aviso--error{background:#FDECEC;color:#9B2C2C;border:1px solid #F5C2C2}

/* --------------------------- FORMULARIO ----------------------------- */
.formulario{display:block}
.formulario[hidden]{display:none}
.formulario--bloqueado{opacity:.5;pointer-events:none;filter:saturate(.4)}

.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.fila{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
  margin-bottom:20px;
}

.campo{
  position:relative;
  min-width:0;
  border:0;
  margin:0;
  padding:0;
}
.campo--ancho{grid-column:1/-1}

.campo > label:not(.radio):not(.checkbox),
.campo > legend{
  display:block;
  margin:0 0 9px;
  padding:0;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--tinta);
}
.campo > label b,
.campo > legend b{color:var(--rojo);font-weight:600;margin-left:2px}
.label__nota{font-weight:400;color:var(--tinta-suave)}

.campo input[type=text],
.campo input[type=email],
.campo input[type=tel],
.campo input[type=date]{
  width:100%;
  height:var(--alto-campo);
  padding:0 16px;
  font-family:inherit;
  font-size:15px;
  font-weight:400;
  color:var(--tinta);
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  outline:0;
  transition:border-color var(--transicion),box-shadow var(--transicion),background var(--transicion);
}
.campo input::placeholder{color:var(--placeholder);font-weight:300}

.campo input:hover:not([readonly]){border-color:#C3D6E4}
.campo input:focus{
  border-color:var(--borde-foco);
  box-shadow:0 0 0 4px rgba(80,196,223,.20);
}
.campo input[readonly]{
  background:#F5F8FB;
  color:var(--tinta-suave);
  cursor:default;
}
.campo input[type=date]{padding-right:12px}

/* Estados de validación */
.campo.es-error input{border-color:var(--rojo);box-shadow:0 0 0 4px rgba(229,72,77,.13)}
.campo.es-ok input{border-color:#4CAF87}
.campo.es-cargando input{background-image:linear-gradient(90deg,transparent,rgba(80,196,223,.14),transparent);background-size:200% 100%;animation:barrido 1.1s linear infinite}

.ayuda{
  display:block;
  margin-top:7px;
  font-size:12px;
  font-weight:300;
  line-height:1.45;
  color:var(--tinta-suave);
}
.error{
  display:none;
  margin-top:7px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--rojo);
}
.campo.es-error .error{display:block;animation:aparece .22s ease both}
.campo.es-error .ayuda{display:none}

/* Marca de verificación del RUT */
.campo__tic{
  position:absolute;
  right:14px;
  top:39px;
  width:20px;
  height:20px;
  opacity:0;
  transform:scale(.6);
  transition:opacity var(--transicion),transform var(--transicion);
  pointer-events:none;
}
.campo.es-ok .campo__tic{opacity:1;transform:scale(1)}

/* ------------------------------ RADIOS ------------------------------ */
.campo .radio{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 11px;
  font-size:15px;
  font-weight:400;
  color:var(--tinta);
  cursor:pointer;
  user-select:none;
}
.campo .radio:last-of-type{margin-bottom:0}
.radio input{position:absolute;opacity:0;width:0;height:0}
.radio span{
  flex:none;
  width:19px;
  height:19px;
  border:1.5px solid #C3D3E0;
  border-radius:50%;
  background:var(--blanco);
  position:relative;
  transition:border-color var(--transicion),box-shadow var(--transicion);
}
.radio span::after{
  content:"";
  position:absolute;
  inset:3.5px;
  border-radius:50%;
  background:var(--navy-800);
  transform:scale(0);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.radio:hover span{border-color:var(--cyan-400)}
.radio input:focus-visible + span{box-shadow:0 0 0 4px rgba(80,196,223,.25)}
.radio input:checked + span{border-color:var(--navy-800)}
.radio input:checked + span::after{transform:scale(1)}
.radio input:disabled + span{opacity:.4}
.radio input:disabled ~ *{opacity:.45}

/* ----------------------------- CHECKBOX ------------------------------ */
/* Usado solo para "He leído y acepto las bases". Mismo lenguaje visual
   que .radio, pero cuadrado con un tique en vez de un punto.

   OJO: todo el texto de la frase va envuelto en UN solo
   .checkbox__texto. Antes cada fragmento (el texto suelto, el <a>, el
   <b>) era hijo directo de un <label> con display:flex, y flexbox
   convierte cada fragmento de texto/elemento suelto en su propio "flex
   item" — la frase se partía en columnas en vez de fluir como una
   oración. Con un solo contenedor de texto, ESE es el único flex item
   junto a la cajita, y por dentro fluye como un párrafo normal. */
.checkbox{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:var(--tinta);
  cursor:pointer;
  user-select:none;
}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox__texto{flex:1 1 auto;min-width:0}
.checkbox__caja{
  flex:none;
  width:19px;
  height:19px;
  margin-top:2px;
  border:1.5px solid #C3D3E0;
  border-radius:5px;
  background:var(--blanco);
  position:relative;
  transition:border-color var(--transicion),background var(--transicion),box-shadow var(--transicion);
}
.checkbox__caja::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.checkbox:hover .checkbox__caja{border-color:var(--cyan-400)}
.checkbox input:focus-visible + .checkbox__caja{box-shadow:0 0 0 4px rgba(80,196,223,.25)}
.checkbox input:checked + .checkbox__caja{border-color:var(--navy-800);background:var(--navy-800)}
.checkbox input:checked + .checkbox__caja::after{transform:rotate(45deg) scale(1)}
.checkbox a{color:var(--teal-500);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.checkbox a:hover{color:var(--navy-800)}
.bases__leer{display:block;margin:0 0 16px;color:var(--navy-800);font-size:22px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.bases__leer:focus-visible{outline:2px solid var(--teal-500);outline-offset:4px}
#enviar{min-height:54px;height:auto;padding-top:14px;padding-bottom:14px}
#enviar .boton__texto{white-space:normal;overflow-wrap:anywhere;line-height:1.4;letter-spacing:0}
#enviar:disabled .boton__flecha{display:none}
.checkbox:has(input:disabled){cursor:default}
.campo.es-error .checkbox__caja{border-color:var(--rojo);box-shadow:0 0 0 4px rgba(229,72,77,.13)}

/* ---------------------------- DROPZONE ------------------------------ */
.dropzone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:132px;
  padding:26px 20px;
  text-align:center;
  border:2px dashed #A8D9EF;
  border-radius:10px;
  background:#F4FBFE;
  cursor:pointer;
  transition:border-color var(--transicion),background var(--transicion),transform var(--transicion);
}
.dropzone:hover,.dropzone:focus-visible{
  border-color:var(--cyan-400);
  background:#ECF8FD;
  outline:0;
}
.dropzone.es-encima{
  border-color:var(--teal-500);
  background:#E2F4FC;
  transform:scale(1.01);
}
.dropzone__input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.dropzone__icono{
  width:54px;
  height:54px;
  border-radius:50%;
  background:#E2F4FC;
  display:grid;
  place-items:center;
  margin-bottom:8px;
  transition:transform var(--transicion);
}
.dropzone:hover .dropzone__icono{transform:translateY(-3px)}
.dropzone__icono img{width:30px}
.dropzone__titulo{font-size:15px;font-weight:500;color:var(--tinta)}
.dropzone__sub{font-size:13px;font-weight:300;color:var(--tinta-suave)}

.archivo[hidden]{display:none}
.archivo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:10px;
  background:#EEF7FC;
  border:1px solid #CDE7F4;
  animation:aparece .3s ease both;
}
.archivo__nombre{
  flex:1;
  min-width:0;
  font-size:14px;
  font-weight:500;
  color:var(--tinta);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.archivo__peso{font-size:12px;color:var(--tinta-suave);flex:none}
.archivo__quitar{
  flex:none;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:#D9EAF4;
  color:var(--tinta);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:background var(--transicion),transform var(--transicion);
}
.archivo__quitar:hover{background:var(--rojo);color:#fff;transform:rotate(90deg)}

/* ------------------------------ BOTÓN ------------------------------- */
.boton{
  position:relative;
  width:100%;
  height:62px;
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:0;
  border-radius:var(--radio);
  background:var(--navy-800);
  color:var(--blanco);
  font-size:14px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  transition:background var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.boton::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-100%);
  transition:transform .7s ease;
}
.boton:hover{
  background:#0A2F4F;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(1,47,82,.32);
}
.boton:hover::before{transform:translateX(100%)}
.boton:active{transform:translateY(0)}
.boton:focus-visible{outline:3px solid var(--cyan-400);outline-offset:3px}
.boton__flecha{width:21px;height:21px;flex:none;transition:transform var(--transicion)}
.boton:hover .boton__flecha{transform:translateX(5px)}

.boton__cargando{display:none}
.boton.es-enviando{pointer-events:none;background:#0A2F4F}
.boton.es-enviando .boton__texto,
.boton.es-enviando .boton__flecha{opacity:0}
.boton.es-enviando .boton__cargando{
  display:block;
  position:absolute;
  top:50%;left:50%;
  width:24px;height:24px;
  margin:-12px 0 0 -12px;
  border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:gira .7s linear infinite;
}

.boton--claro{
  background:transparent;
  color:var(--navy-800);
  border:1.5px solid var(--borde);
  height:52px;
  letter-spacing:.08em;
}
.boton--claro:hover{background:#F2F8FC;color:var(--navy-800);box-shadow:none}

.formulario__pie{
  margin:16px 0 0;
  font-size:12px;
  font-weight:300;
  line-height:1.55;
  color:var(--tinta-suave);
  text-align:center;
}

/* ------------------------------ ÉXITO ------------------------------- */
.exito[hidden]{display:none}
.exito{text-align:center;padding:26px 0 10px;animation:aparece .45s ease both}
.exito__marca{width:82px;height:82px;margin:0 auto 20px}
.exito__marca svg{width:100%;height:100%}
.exito__circulo{
  stroke:#4CAF87;stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:trazo .6s cubic-bezier(.65,0,.45,1) forwards;
}
.exito__tic{
  stroke:#4CAF87;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:trazo .35s cubic-bezier(.65,0,.45,1) .55s forwards;
}
.exito h3{margin:0 0 10px;font-size:24px;font-weight:700;color:var(--tinta)}
.exito__mensaje{margin:0 auto 24px;max-width:44ch;font-size:15px;font-weight:300;line-height:1.65;color:var(--tinta-suave)}

.exito__datos{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0;
  margin:0 auto 26px;
  max-width:420px;
  text-align:left;
  border:1px solid #E6EEF4;
  border-radius:12px;
  overflow:hidden;
}
.exito__datos dt,
.exito__datos dd{
  margin:0;
  padding:11px 16px;
  font-size:14px;
  border-bottom:1px solid #EEF3F7;
}
.exito__datos dt{color:var(--tinta-suave);font-weight:400;background:#F8FBFD}
.exito__datos dd{font-weight:600;color:var(--tinta)}
.exito__datos dt:last-of-type,
.exito__datos dd:last-of-type{border-bottom:0}

/* ------------------------------- MODAL -------------------------------- */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal[hidden]{display:none}
.modal__fondo{
  position:absolute;
  inset:0;
  background:rgba(1,20,38,.62);
  backdrop-filter:blur(3px);
  animation:modalFondo .2s ease both;
}
.modal__caja{
  position:relative;
  z-index:1;
  width:100%;
  max-width:640px;
  max-height:min(680px, 85vh);
  overflow-y:auto;
  background:var(--blanco);
  border-radius:16px;
  padding:32px 30px 26px;
  box-shadow:0 30px 80px rgba(1,32,58,.45);
  animation:modalCaja .25s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modalFondo{from{opacity:0}to{opacity:1}}
@keyframes modalCaja{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.modal__cerrar{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#F0F5F9;
  color:var(--tinta-suave);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background var(--transicion),color var(--transicion);
}
.modal__cerrar:hover{background:#E4EDF3;color:var(--tinta)}
.modal__cerrar:focus-visible{outline:2px solid var(--cyan-400);outline-offset:2px}

.modal__titulo{
  margin:0 0 18px;
  padding-right:38px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:var(--tinta);
}

.modal__cuerpo{font-size:14.5px;line-height:1.7;color:var(--tinta-suave)}
.modal__cuerpo p{margin:0 0 14px}
.modal__cuerpo table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:13px;overflow-wrap:anywhere}
.modal__cuerpo td{padding:8px 10px;border:1px solid var(--borde);vertical-align:top}
.modal__cuerpo tr:nth-child(odd){background:#F0F5F9}
.modal__cuerpo h3{margin:20px 0 8px;font-size:15px;font-weight:600;color:var(--tinta)}
.modal__cuerpo h3:first-child{margin-top:0}
.modal__cuerpo em{color:var(--orange);font-style:normal;font-weight:500}

.modal__pie{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--borde);
  display:flex;
  justify-content:flex-end;
}
.modal__aceptar{
  height:46px;
  padding:0 24px;
  border:0;
  border-radius:8px;
  background:var(--navy-800);
  color:var(--blanco);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--transicion),transform var(--transicion),box-shadow var(--transicion);
}
.modal__aceptar:hover:not(:disabled){background:#0A2F4F;transform:translateY(-2px);box-shadow:0 10px 22px rgba(1,47,82,.28)}
.modal__aceptar:disabled{opacity:.5;cursor:not-allowed}
.modal__aceptar:focus-visible{outline:2px solid var(--cyan-400);outline-offset:2px}

@media (max-width:480px){
  .modal__caja{padding:26px 20px 22px;border-radius:14px}
  .modal__titulo{font-size:18px}
  .modal__aceptar{width:100%}
}

/* ------------------------------- PIE -------------------------------- */
.pie{
  position:relative;
  z-index:3;
  background:var(--navy-900);
  padding:96px 20px 44px;
  margin-top:-1px;
}
.pie__ola{
  position:absolute;
  left:0;
  top:-1px;
  width:100%;
  height:76px;
  object-fit:fill;
  transform:translateY(-98%);
  pointer-events:none;
}
.pie__contenido{
  /* Sin la lista de valores ya no hace falta la tercera columna que
     la balanceaba: el logo tenue queda posicionado aparte, y el bloque
     central se centra solo dentro del ancho máximo del pie. */
  position:relative;
  max-width:var(--ancho);
  margin:0 auto;
  display:flex;
  justify-content:center;
}
.pie__lineas{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:110px;
  opacity:.10;
}
.pie__centro{text-align:center;display:grid;justify-items:center;gap:10px}
.pie__centro > .pie__mascota{width:100px;height:120px;object-fit:contain}
.pie__lema{
  margin:0;
  color:var(--blanco);
  font-size:17px;
  font-weight:500;
  letter-spacing:.30em;
  text-transform:uppercase;
}
.pie__lugar{
  margin:0;
  color:#6E9CBA;
  font-size:11px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.pie__lugar i{font-style:normal;color:var(--teal-500);margin:0 4px}
/* --------------------------- ANIMACIONES ---------------------------- */
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes barrido{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Sin opacity: si el navegador interrumpe la animación a medio camino
   (pestaña en segundo plano, panel oculto), el número debe seguir
   totalmente visible. Solo se anima el tamaño, nunca si se ve o no. */
@keyframes crTic{from{transform:scale(1.18)}to{transform:scale(1)}}

/* Estado inicial de los elementos animados.
   Va bajo .js: sin JavaScript nada se oculta y la página se usa igual. */
.js [data-anim]{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--retardo,0) * 90ms);
}
.js [data-anim="baja"]{transform:translateY(-22px)}
.js [data-anim="sube"]{transform:translateY(46px)}
.js [data-anim="izq"]{transform:translateX(-26px)}
.js [data-anim="ancho"]{transform:scaleX(0);transform-origin:left center}

.js [data-anim].es-visible{opacity:1;transform:none}
.js [data-anim="ancho"].es-visible{transform:scaleX(1)}

/* Entrada escalonada de los campos del formulario */
.js .formulario .fila,
.js .formulario .boton{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.js .formulario.es-listo .fila,
.js .formulario.es-listo .boton{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--i,0) * 65ms + 220ms);
}

.tarjeta__mascota{animation:flotar 5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js [data-anim],
  .js .formulario .fila,
  .js .formulario .boton{opacity:1!important;transform:none!important}
}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width:1080px){
  :root{--riel:230px;--hueco:22px}
  .tarjeta{padding:28px 30px 34px}
  .logo__imagen{height:74px}
}

@media (max-width:900px){
  /* En una columna el documento se alarga mucho y `cover` ampliaría la
     foto hasta dejar a la vista una franja vertical estrecha. Aquí la
     foto conserva su proporción natural en la parte de arriba y se
     funde hacia el navy, que cubre el resto de la página. */
  /* Alto y no background en abreviado: la forma corta "background:"
     borraría la miniatura de vista previa (background-image) definida
     en la regla base de .fondo, y volvería a dejar la pantalla en azul
     sólido mientras carga la foto — justo lo que se quería evitar. */
  .fondo{height:100%;background-size:100% auto;background-position:50% 0}
  .fondo picture{position:relative;height:auto}
  .fondo img{height:auto;object-fit:fill}
  .fondo picture::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:42%;
    background:linear-gradient(to bottom,
      rgba(1,47,82,0) 0%,
      rgba(1,47,82,.55) 45%,
      var(--navy-900) 100%);
  }
  /* Antes se aclaraba casi del todo (.16→0) justo donde cae el párrafo
     del hero, y con cielo brillante detrás el texto se leía muy poco
     ("los colores del texto está muy clarito"). Se sube el piso de
     oscuridad y se extiende más abajo, hasta cubrir todo el bloque de
     texto (eyebrow + título + párrafo) antes de aclarar hacia la tarjeta. */
  .fondo__velo{
    background:linear-gradient(180deg,
      rgba(1,26,46,.66) 0%,
      rgba(1,26,46,.50) 20%,
      rgba(1,26,46,.44) 42%,
      rgba(1,26,46,.20) 62%,
      rgba(1,26,46,0) 80%);
  }

  .columnas{grid-template-columns:1fr;gap:44px;padding-top:40px}
  .transicion{top:auto;height:0;display:none}
  .riel{order:2}
  .mascotaFlotante{padding-top:36px;width:min(260px,80%);margin:0 auto}
  .tarjeta{order:1}
  .ventajas{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
  .lema{text-align:center}
  .lema__trazo{margin:2px auto 0}
  .contador{margin-inline:auto}
  .hero__titulo{max-width:none}
  .hero__titulo br{display:none}
  .pie{background:var(--navy-900)}

}

@media (max-width:720px){
  .cabecera{flex-direction:column;align-items:flex-start;gap:14px;padding-top:22px}
  .cabecera__nav{margin-top:0}
  .hero{padding-top:38px}
  .hero__titulo{font-size:clamp(28px,7vw,36px)}
  .hero__texto{font-size:15px}
  .fila{grid-template-columns:1fr;gap:0}
  .fila > .campo{margin-bottom:18px}
  .fila > .campo:last-child{margin-bottom:0}
  .tarjeta{padding:24px 20px 30px;border-radius:14px}
  .tarjeta__cabecera{flex-direction:column;align-items:flex-start;gap:14px}
  .tarjeta__sello{align-items:flex-start}
  .tarjeta__titulo{font-size:21px}
  .boton{height:56px;font-size:13px;letter-spacing:.12em}
  /* Con flex + gap, 4 cajas + 3 separadores ":" no caben en una fila
     angosta y la última caja ("Seg") se cae sola a una segunda línea,
     descentrada. En grid de 4 columnas parejas siempre caben las cuatro
     juntas, así que aquí se sueltan los ":" (ya no hacen falta como
     separador visual: el propio espacio entre columnas cumple esa
     función) y cada caja se angosta en vez de envolver. */
  .cuentaRegresiva{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .cuentaRegresiva__dosPuntos{display:none}
  .cuentaRegresiva__caja{min-width:0;padding:13px 4px 11px}
  .cuentaRegresiva__numero{font-size:24px}
  .cuentaRegresiva__etiqueta{font-size:9.5px;letter-spacing:.09em}
  .pie__contenido{display:block}
  .pie__lineas{display:none}
  .pie__lema{font-size:14px;letter-spacing:.2em}
  .exito__datos{grid-template-columns:1fr}
  .exito__datos dt{padding-bottom:0;background:#fff;border-bottom:0}
  .exito__datos dd{padding-top:2px}
}

@media (max-width:420px){
  .logo__imagen{height:64px}
  .ventaja__icono{width:52px;height:52px}
  .lema__texto{font-size:34px}
}

/* Impresión: el dashboard usa su propia hoja; aquí solo lo básico. */
@media print{
  .fondo,.pie__ola,.boton{display:none}
  .tarjeta{box-shadow:none;border:1px solid #ccc}
}