/* ============================================================
   Maqueta multipágina — lista de boletos tipo rifa.
   Paleta azul (marino + azur), sustituye el rojo del original.
   Los 7 @keyframes son los del sitio de referencia, textuales.
   Marca, teléfonos y cuentas bancarias: placeholders ficticios.
   ============================================================ */
:root{
  /* azul elegante */
  --marino:#14396E;        /* primario: bordes, botones, franjas */
  --marino-hover:#0D2850;
  --azur:#2F6FD0;          /* énfasis de texto (donde el original usa rojo) */
  --tinta-banda:#101B2E;   /* bandas oscuras, con sesgo azul */
  --oro:#C9A227;           /* acento cálido, sólo para cifras de premio */
  --blanco:#FFFFFF;
  --suave:#E9EEF6;         /* gris con sesgo azul */
  --borde-suave:#C9D4E4;
  --tinta:#141B26;
  --apagado:#5F6C80;
  --verde:#0E8F5C;
  --verde-wa:#25D366;
  --verificado:#3B9EF0;
  --fondo:#F5F7FB;

  --wrap:640px;
  --wrap-grid:1040px;

  --flip-ms:2600ms;
  --zoom-ms:700ms;
  --off-ms:900ms;

  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --texto:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---------- keyframes del sitio de referencia ---------- */
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes listaProgressStripes{0%{background-position:0 0}to{background-position:46.2px 0}}
@keyframes heartbeat{0%{transform:scale(1)}10%{transform:scale(1.18)}20%{transform:scale(1)}30%{transform:scale(1.18)}40%{transform:scale(1)}to{transform:scale(1)}}
@keyframes zoomInPop{0%{filter:blur(.6px) brightness(.9);transform:scale(.45) rotate(-6deg)}60%{filter:blur(0) brightness(1.03);transform:scale(1.08) rotate(0)}to{filter:none;transform:scale(1)}}
@keyframes flipCardPreciseLoop{0%{filter:none;transform:rotateY(0deg) scale(1)}25%{filter:blur(1px) brightness(1.02);transform:rotateY(90deg) scale(1.02)}50%{filter:none;transform:rotateY(180deg) scale(1)}75%{filter:blur(1px) brightness(1.02);transform:rotateY(270deg) scale(1.02)}to{filter:none;transform:rotateY(1turn) scale(1)}}
@keyframes foldToEdge{0%{filter:none;opacity:1;transform:rotateX(0deg) scaleX(1) scaleY(1)}60%{filter:brightness(1.12);opacity:1;transform:rotateX(76deg) scaleX(1.02) scaleY(.12)}to{filter:brightness(1.05);opacity:0;transform:rotateX(90deg) scaleX(1.02) scaleY(0)}}
@keyframes shutterClose{0%{opacity:1;transform:scaleY(1)}70%{opacity:1;transform:scaleY(.08)}85%{opacity:.98;transform:scaleY(.02)}to{opacity:0;transform:scaleY(0)}}

*{box-sizing:border-box}
body{background:var(--blanco);color:var(--tinta);font-family:var(--texto);margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.marco{width:100%;padding-bottom:96px;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%}
:focus-visible{outline:3px solid var(--azur);outline-offset:2px}

/* ---------- encabezado ---------- */
.cabecera{position:sticky;top:0;z-index:40}
.cabecera .franja{height:9px;background:var(--marino)}
.barra{background:var(--tinta-banda);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:9px 14px;position:relative}
.insignia{
  grid-column:2;width:78px;height:78px;border-radius:50%;background:var(--blanco);
  border:4px solid var(--marino);display:grid;place-items:center;position:relative;margin:-16px 0;
  box-shadow:0 3px 10px rgba(0,0,0,.35);text-decoration:none;
}
.insignia .iniciales{font-family:var(--display);font-weight:800;font-size:30px;color:var(--marino);letter-spacing:-.02em;line-height:1}
.insignia .aro{position:absolute;inset:5px;border-radius:50%;border:1.5px dashed var(--marino);opacity:.5}
.palomita{position:absolute;top:-2px;right:-4px;width:24px;height:24px;border-radius:50%;background:var(--verificado);display:grid;place-items:center;border:2px solid var(--blanco)}
.palomita svg{width:13px;height:13px;fill:var(--blanco)}

.nav-movil{
  color:var(--blanco);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.05;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
  transition:color .18s ease;
}
.nav-movil:hover,.nav-movil:focus-visible{color:var(--azur)}
.nav-movil.izq{grid-column:1;justify-self:start;text-align:left}
.nav-movil.der{grid-column:3;justify-self:end;text-align:right}
.nav-full{display:none}

@media (min-width:820px){
  .barra{display:flex;justify-content:space-between;align-items:center;padding:6px 34px}
  .insignia{width:132px;height:132px;border-width:6px;margin:-24px 0 -30px}
  .insignia .iniciales{font-size:54px}
  .nav-movil{display:none}
  .nav-full{display:flex;align-items:center}
  .nav-full a{
    color:var(--blanco);font-family:var(--texto);font-weight:500;font-size:19px;text-decoration:none;
    padding:6px 26px;border-left:1px solid rgba(255,255,255,.28);transition:color .18s ease;white-space:nowrap;
  }
  .nav-full a:first-child{border-left:0}
  .nav-full a:hover,.nav-full a:focus-visible{color:var(--azur)}
  .nav-full a[aria-current="page"]{color:var(--azur);font-weight:700}
}

/* ---------- títulos y bandas ---------- */
.titulo-sorteo{background:var(--tinta-banda);color:var(--blanco);text-align:center;padding:16px 16px 18px}
.titulo-sorteo h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,6.5vw,58px);line-height:1.02;margin:0 auto 12px;max-width:960px;text-transform:uppercase;text-wrap:balance}
.fecha{display:inline-block;border-top:2px solid rgba(255,255,255,.25);padding-top:10px;font-family:var(--display);font-weight:700;font-size:clamp(19px,3.4vw,30px);letter-spacing:.02em}
.banda{background:var(--tinta-banda);color:var(--blanco);text-align:center;padding:18px;margin:22px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(23px,4.6vw,42px);text-transform:uppercase;line-height:1.06;text-wrap:balance}
.banda-flechas{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 12px 6px;background:var(--blanco)}
.flecha{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:20px solid var(--marino)}
.banda-flechas span{color:var(--tinta);font-family:var(--display);font-weight:800;font-size:clamp(19px,3.4vw,30px);text-transform:uppercase}

/* ---------- premio ---------- */
.premio{padding:14px 12px 8px;perspective:1400px}
.premio-marco{
  max-width:var(--wrap);margin-inline:auto;border:5px solid var(--marino);border-radius:12px;overflow:hidden;
  background:var(--suave);transform-style:preserve-3d;
  animation:zoomInPop var(--zoom-ms) cubic-bezier(.22,.9,.23,1) both;
}
.premio-marco.girando{animation:flipCardPreciseLoop var(--flip-ms) cubic-bezier(.3,.1,.3,.95) infinite}
.premio-marco img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* ---------- precios ---------- */
.precios{background:var(--tinta-banda);margin:14px 12px;border-radius:8px;padding:22px 14px}
.precios ul{margin:0 auto;padding:0;max-width:var(--wrap);display:grid;gap:10px}
.precios li{list-style:none;color:var(--blanco);font-weight:700;font-size:clamp(14px,2.4vw,20px);text-align:center;font-variant-numeric:tabular-nums}
.precios li b{color:var(--oro)}
@media (min-width:820px){.precios{margin:0;border-radius:0}}

/* ---------- promos / texto ---------- */
.promos{padding:14px 18px 4px}
.promos .wrap{display:grid;gap:22px;text-align:center}
.promos p{margin:0;font-weight:700;font-size:clamp(15px,2.3vw,19px);line-height:1.45}
.promos .acento{color:var(--azur);text-transform:uppercase}
.promos .verde{color:var(--verde);text-transform:uppercase}
.promos .chico{font-size:clamp(13px,2vw,17px);font-weight:600}
.promos .destaca{color:var(--azur)}
.promos .cifra{color:var(--oro)}

/* ---------- controles ---------- */
.controles{padding:20px 22px 6px}
.controles .wrap{display:grid;gap:12px;justify-items:center}
.etiqueta{color:var(--azur);font-weight:800;font-size:clamp(13px,1.9vw,16px);text-transform:uppercase;letter-spacing:.04em;text-align:center}
.boton{
  width:100%;max-width:360px;font-family:var(--texto);font-weight:700;font-size:clamp(15px,1.9vw,17px);
  text-transform:uppercase;letter-spacing:.03em;padding:14px 18px;border-radius:12px;
  border:3px solid var(--marino);background:var(--blanco);color:var(--tinta);cursor:pointer;text-align:center;
  text-decoration:none;display:inline-block;
  transition:color .18s ease,background-color .18s ease,transform .18s ease;
}
.boton:hover{background:var(--marino);color:var(--blanco)}
.boton:active{transform:scale(.97)}
.boton:disabled{background:var(--suave);border-color:var(--borde-suave);color:var(--apagado);cursor:not-allowed}
.boton.solido{background:var(--marino);color:var(--blanco);border-color:var(--marino)}
.boton.solido:hover{background:var(--marino-hover);border-color:var(--marino-hover)}
.boton.solido:disabled,.boton.solido:disabled:hover{background:var(--suave);border-color:var(--borde-suave);color:var(--apagado)}
select.campo,input.campo{
  width:100%;max-width:360px;font-family:var(--texto);font-weight:700;font-size:clamp(15px,1.9vw,17px);
  text-align:center;text-transform:uppercase;padding:14px 18px;border-radius:12px;
  border:3px solid var(--marino);background:var(--suave);color:var(--tinta);
}
input.campo{background:var(--blanco)}
input.campo::placeholder{color:#9AA7B8;font-weight:700}

/* ---------- progreso ---------- */
.progreso{padding:16px 22px 4px;display:none}
.progreso.activa{display:block}
.progreso-cabeza{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-banda);margin-bottom:7px}
.progreso-cabeza .cifra{color:var(--azur);font-variant-numeric:tabular-nums}
.progreso-pista{height:18px;border-radius:9px;background:var(--suave);border:2px solid var(--tinta-banda);overflow:hidden}
.progreso-relleno{
  height:100%;width:0%;background-color:var(--marino);
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.32) 0 11px,transparent 11px 23.1px);
  background-size:46.2px 100%;animation:listaProgressStripes 1.35s linear infinite;transition:width .28s ease;
}
.progreso-meta{margin-top:7px;font-size:12px;font-weight:600;color:var(--apagado);text-align:center}

/* ---------- rejilla de boletos ---------- */
.leyenda{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:16px 20px 10px;font-weight:700;font-size:clamp(13px,1.9vw,16px)}
.muestra{width:44px;height:24px;border:2px solid var(--marino);border-radius:5px;background:var(--blanco)}
.muestra.vendido{background:var(--suave);border-color:var(--borde-suave)}
.rejilla{padding:4px 12px 24px;max-width:var(--wrap-grid);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;perspective:900px}
.boleto{
  border:1.5px solid var(--marino);border-radius:5px;background:var(--blanco);color:var(--tinta);
  font-size:clamp(12px,1.4vw,14px);font-weight:700;font-variant-numeric:tabular-nums;text-align:center;
  padding:6px 2px;cursor:pointer;transform-origin:center top;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.boleto:hover{background:var(--marino);color:var(--blanco);transform:translateY(-2px)}
.boleto.vendido{background:var(--suave);border-color:var(--borde-suave);color:#9AA7B8;cursor:default}
.boleto.vendido:hover{transform:none;background:var(--suave);color:#9AA7B8}
.boleto.elegido{background:var(--tinta-banda);border-color:var(--tinta-banda);color:var(--blanco)}
.boleto.resaltado{animation:zoomInPop var(--zoom-ms) cubic-bezier(.22,.9,.23,1) both;background:var(--oro);border-color:var(--oro);color:var(--tinta-banda)}
.boleto.plegando{animation:foldToEdge var(--off-ms) cubic-bezier(.33,0,.3,1) both}
.sin-resultados{grid-column:1/-1;text-align:center;padding:26px 10px;font-weight:700;color:var(--apagado)}

/* ---------- estado cerrado ---------- */
.cerrado{max-width:var(--wrap);margin:0 auto;background:var(--tinta-banda);color:var(--blanco);border-radius:8px;padding:38px 20px;text-align:center;display:none;transform-origin:center top}
.cerrado.visible{display:block;animation:fadeIn 2s both}
.cerrado h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,5vw,42px);margin:0 0 12px;text-transform:uppercase}
.cerrado p{margin:5px 0;font-weight:600;font-size:14px;opacity:.85}
.persiana{animation:shutterClose var(--off-ms) cubic-bezier(.7,0,.9,.2) forwards}

/* ---------- hero (inicio) ---------- */
/* Hero con parallax: la imagen va en un contenedor FIJO y las secciones
   siguientes (opacas, z-index mayor) se deslizan por encima al hacer scroll.
   Es el mismo mecanismo del sitio de referencia: position:fixed, no
   background-attachment. */
.hero-fondo{position:fixed;top:0;left:0;right:0;height:min(88vh,720px);z-index:0;background:var(--tinta-banda)}
.hero-fondo img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero{position:relative;z-index:1;min-height:min(68vh,540px);display:grid;place-items:end center;background:transparent;pointer-events:none}
.hero .hero-cta{pointer-events:auto;display:grid;gap:14px;justify-items:center;padding:0 20px 46px;width:100%;max-width:420px;animation:fadeIn 2s both}
/* TODO lo que va después del hero debe quedar por encima de la imagen
   fija. Antes solo lo tenía .portadas y por eso la foto se montaba
   sobre Preguntas Frecuentes y Contacto. */
.hero ~ *{position:relative;z-index:1}
.tras-hero{position:relative;z-index:1;background:var(--blanco)}
/* y necesitan fondo propio: si son transparentes, la foto se ve a través */
.hero ~ .pie{margin-top:0}   /* el margen transparente dejaba ver la foto fija */
.hero ~ .contenido,
.hero ~ .portadas,
.hero ~ .controles,
.hero ~ .cuentas{background:var(--blanco)}
.hero .boton{background:rgba(255,255,255,.96);border-color:var(--blanco);color:var(--tinta-banda)}
.hero .boton.solido{background:var(--marino);border-color:var(--blanco);color:var(--blanco)}
.hero .boton:hover{background:var(--azur);border-color:var(--azur);color:var(--blanco)}

/* ---------- FAQ / contenido de texto ---------- */
.contenido{padding:26px 20px 8px}
.contenido .wrap{display:grid;gap:26px}
.contenido h3{
  font-family:var(--display);font-weight:800;color:var(--azur);
  font-size:clamp(21px,3.4vw,30px);text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 8px;text-align:center;text-wrap:balance;
}
.contenido p{margin:0 0 10px;font-weight:500;font-size:clamp(14px,1.9vw,17px);line-height:1.6}
.contenido p:last-child{margin-bottom:0}
.contenido a{color:var(--azur);font-weight:600}
.contenido .nota{font-weight:700}
.divisor{width:180px;height:4px;background:var(--marino);border-radius:2px;margin:6px auto;border:0}

/* ---------- tarjetas de cuenta (pagos) ---------- */
.cuentas{padding:20px 16px 8px}
.cuentas .wrap{display:grid;gap:14px}
.cuenta{
  border:2px solid var(--borde-suave);border-left:8px solid var(--marino);border-radius:12px;
  background:var(--blanco);padding:16px 18px;display:grid;gap:8px;
  box-shadow:0 2px 10px rgba(20,57,110,.07);
}
.cuenta .banco{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cuenta .banco strong{font-family:var(--display);font-weight:800;font-size:23px;text-transform:uppercase;color:var(--tinta-banda);letter-spacing:.02em}
.pastilla{background:var(--suave);color:var(--marino);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:20px;white-space:nowrap}
.pastilla.inactiva{background:#F3E7E7;color:#94502F}
.campo-dato{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.campo-dato dt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--apagado)}
.campo-dato dd{margin:0;font-weight:700;font-size:clamp(15px,2vw,18px);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.copiar{
  justify-self:start;background:var(--suave);border:2px solid transparent;border-radius:8px;
  padding:8px 14px;font-family:var(--texto);font-weight:700;font-size:13px;color:var(--marino);cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.copiar:hover{background:var(--marino);color:var(--blanco)}
.copiar.hecho{background:var(--verde);color:var(--blanco)}
.aviso{
  max-width:var(--wrap);margin:0 auto 6px;background:#FFF6E5;border:2px solid #E9C877;border-radius:10px;
  padding:14px 16px;font-weight:700;font-size:14px;line-height:1.5;color:#6B4E12;text-align:center;
}
.aviso-demo{
  max-width:var(--wrap);margin:0 auto 14px;background:var(--suave);border:2px dashed var(--marino);
  border-radius:10px;padding:12px 16px;font-size:13px;font-weight:700;color:var(--marino);text-align:center;line-height:1.5;
}

/* ---------- resultado de verificación ---------- */
.resultado{max-width:var(--wrap);margin:14px auto 0;display:none}
.resultado.visible{display:block;animation:fadeIn .6s both}
.resultado .caja{border:2px solid var(--borde-suave);border-radius:12px;padding:18px;background:var(--blanco)}
.resultado h4{margin:0 0 10px;font-family:var(--display);font-size:24px;text-transform:uppercase;color:var(--marino)}
.resultado .fichas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ficha{background:var(--marino);color:var(--blanco);border-radius:6px;padding:6px 10px;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.ficha.pendiente{background:var(--suave);color:var(--apagado)}

/* ---------- pie ---------- */
.pie{background:var(--tinta-banda);color:var(--blanco);text-align:center;padding:30px 20px 34px;margin-top:26px}
.pie .rotulo{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--azur)}
.pie .tel{font-family:var(--display);font-weight:800;font-size:clamp(24px,4vw,34px);margin:6px 0 12px}
.pie a{color:rgba(255,255,255,.75);font-size:12px;font-weight:600}
.pie .redes{display:flex;justify-content:center;gap:14px;margin:12px 0}
.pie .redes span{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center}
.pie .redes svg{width:20px;height:20px;fill:var(--blanco)}

/* ---------- WhatsApp flotante y barra verificado ---------- */
.wa{
  position:fixed;right:18px;bottom:64px;z-index:50;width:58px;height:58px;border-radius:50%;
  background:var(--verde-wa);border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 5px 16px rgba(0,0,0,.3);animation:heartbeat 1.6s ease-in-out infinite;transition:bottom .28s ease;
}
.wa svg{width:33px;height:33px;fill:var(--blanco)}
.verificado{
  position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--blanco);border-top:2px solid var(--borde-suave);
  padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
}
.verificado .circulo{flex:none;width:26px;height:26px;border-radius:50%;background:var(--verificado);display:grid;place-items:center}
.verificado .circulo svg{width:14px;height:14px;fill:var(--blanco)}
.verificado .txt strong{display:block;color:var(--verificado);font-family:var(--display);font-weight:800;font-size:clamp(16px,2.4vw,22px);text-transform:uppercase;letter-spacing:.02em}
.verificado .txt small{font-size:clamp(10px,1.4vw,12px);font-weight:700;color:var(--apagado);text-decoration:underline}

/* ---------- panel de animaciones (añadido, no del original) ---------- */
.panel{position:fixed;left:14px;bottom:64px;z-index:60;font-family:var(--texto)}
.panel-boton{background:var(--tinta-banda);color:var(--blanco);border:0;border-radius:22px;padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.3)}
.panel-cuerpo{margin-bottom:9px;background:var(--tinta-banda);border-radius:12px;padding:12px;width:214px;box-shadow:0 8px 26px rgba(0,0,0,.4);display:grid;gap:6px}
.panel-cuerpo h3{margin:0 0 3px;color:#8494AB;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.panel-cuerpo button{background:#22334C;color:var(--blanco);border:0;border-radius:7px;padding:8px 10px;font-family:var(--texto);font-size:11.5px;font-weight:700;text-align:left;cursor:pointer;transition:background-color .18s ease}
.panel-cuerpo button:hover{background:var(--marino)}
.panel-cuerpo button code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.62;font-size:10px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:400px){
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}
  .panel-cuerpo{width:184px}
}


/* ---------- barra de apartado (aparece al seleccionar boletos) ---------- */
.barra-apartar{
  position:fixed;left:0;right:0;bottom:52px;z-index:55;
  background:var(--tinta-banda);color:var(--blanco);
  padding:12px 16px;display:none;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 -6px 22px rgba(0,0,0,.28);
}
.barra-apartar.visible{display:flex;animation:fadeIn .3s both}
.barra-apartar .resumen{font-weight:700;font-size:14px;line-height:1.3}
.barra-apartar .resumen b{color:var(--oro);font-variant-numeric:tabular-nums}
.barra-apartar .apartar{
  background:var(--marino);color:var(--blanco);border:3px solid var(--azur);border-radius:10px;
  padding:11px 26px;font-family:var(--texto);font-weight:800;font-size:15px;letter-spacing:.06em;
  cursor:pointer;transition:background-color .18s ease,transform .18s ease;white-space:nowrap;
}
.barra-apartar .apartar:hover{background:var(--azur)}
.barra-apartar .apartar:active{transform:scale(.97)}
.barra-apartar .limpiar{background:none;border:0;color:rgba(255,255,255,.65);font-family:var(--texto);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:70;background:rgba(10,18,32,.72);display:none;place-items:center;padding:18px}
.modal.visible{display:grid;animation:fadeIn .25s both}
.modal-caja{background:var(--blanco);border-radius:14px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;padding:22px}
.modal-caja h3{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;color:var(--marino)}
.modal-caja .sub{margin:0 0 16px;font-size:13px;color:var(--apagado);font-weight:600}
.modal-caja label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--apagado);margin:12px 0 5px}
.modal-caja input{width:100%;padding:12px 14px;border:2px solid var(--borde-suave);border-radius:9px;font-family:var(--texto);font-weight:700;font-size:15px}
.modal-caja input:focus{border-color:var(--marino);outline:none}
.previo{
  background:#E7F3EA;border:2px solid #B8DCC4;border-radius:10px;padding:14px;margin:16px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow-y:auto;color:#1B3D28;
}
.modal-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.modal-acciones .boton{flex:1;min-width:150px;max-width:none;margin:0}
.wa-enlace{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:150px;
  background:var(--verde-wa);color:#fff;border:3px solid var(--verde-wa);border-radius:12px;padding:13px 16px;
  font-family:var(--texto);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
}
.wa-enlace svg{width:20px;height:20px;fill:#fff}
.cerrar-modal{background:none;border:0;font-size:26px;line-height:1;color:var(--apagado);cursor:pointer;float:right;padding:0 4px}

/* ---------- portadas del inicio ---------- */
.portadas{padding:26px 16px 6px;position:relative;z-index:1;background:var(--blanco)}
.portadas .wrap{display:grid;gap:16px}
.portada{
  display:block;border:4px solid var(--marino);border-radius:14px;overflow:hidden;text-decoration:none;
  background:var(--tinta-banda);box-shadow:0 4px 18px rgba(20,57,110,.16);
  transition:transform .2s ease,box-shadow .2s ease;
}
.portada:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(20,57,110,.26)}
.portada img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.portada .pie-portada{padding:13px 16px;color:var(--blanco);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.portada .pie-portada strong{font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase}
.portada .pie-portada span{background:var(--azur);border-radius:20px;padding:5px 13px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* ---------- nota de muestra aleatoria ---------- */
.nota-muestra{
  max-width:var(--wrap);margin:0 auto;padding:0 20px 6px;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--apagado);line-height:1.5;
}
.nota-muestra b{color:var(--marino);font-variant-numeric:tabular-nums}

/* Cuando aparece la barra de apartado, los flotantes suben para no taparla */
.con-barra .panel,
.con-barra .wa{bottom:132px}
.panel{transition:bottom .28s ease}


/* ---------- loader de transición entre páginas ---------- */
@keyframes girarLoader{to{transform:rotate(1turn)}}
@keyframes pulsoLoader{0%,100%{opacity:.35}50%{opacity:1}}
.cargando{
  position:fixed;inset:0;z-index:90;
  background:rgba(16,27,46,.93);
  display:grid;place-items:center;gap:18px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.cargando.visible{opacity:1;visibility:visible}
.cargando-caja{display:grid;justify-items:center;gap:16px}
.cargando-aro{
  width:56px;height:56px;border-radius:50%;
  border:5px solid rgba(255,255,255,.18);
  border-top-color:var(--azur);
  border-right-color:var(--azur);
  animation:girarLoader .8s linear infinite;
}
.cargando-txt{
  color:var(--blanco);font-family:var(--display);font-weight:800;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  animation:pulsoLoader 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .cargando-aro{animation:none;border-top-color:var(--azur)}
  .cargando-txt{animation:none}
}

/* Nota: NO usar @view-transition{navigation:auto} aquí. La transición
   del navegador congela la página al iniciar la navegación y dispara
   'pagehide' de inmediato, lo que cancela este loader. Son excluyentes. */

/* pista para descubrir el botón de apartar (aparece sólo al seleccionar) */
.pista-apartar{
  max-width:var(--wrap);margin:0 auto 10px;padding:10px 18px;text-align:center;
  background:var(--suave);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--marino);line-height:1.5;
}
.pista-apartar strong{letter-spacing:.04em}
.con-barra .pista-apartar{opacity:.45}