*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--color);overflow-x:hidden}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:18px;line-height:1.6;color:var(--color-txt);background:var(--color)}
a:focus-visible,button:focus-visible{outline:3px solid var(--color-txt);outline-offset:3px}

.aviso-previa{background:#ffe08a;color:#1f1a24;text-align:center;padding:10px 16px;font-size:15px;font-weight:600}

.cabecera{text-align:center;padding:32px 16px 8px}
.logo{display:block;max-width:180px;max-height:110px;margin:0 auto 16px;object-fit:contain}
.cabecera h1{margin:0;font-size:2rem;line-height:1.2;letter-spacing:.01em}
.subtitulo{margin:10px auto 0;max-width:560px;font-size:1.1rem;opacity:.95}

.contenido{max-width:680px;margin:0 auto;padding:24px 16px 40px}
.bloque{padding:0;margin:0 0 24px}
.bloque p{margin:0 0 12px}
.bloque p:last-child{margin-bottom:0}
.datos{display:grid;gap:16px}
.datos h2{margin:0 0 4px;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}
@media (min-width:560px){.datos{grid-template-columns:1fr 1fr}}

.acciones{display:grid;gap:12px;margin:0 0 24px}
.boton{display:block;min-height:56px;padding:14px 18px;border-radius:12px;border:2px solid var(--color-txt);background:var(--color-txt);color:var(--color);text-decoration:none;text-align:center;font-weight:700;font-size:1.15rem;line-height:1.3}
.boton small{display:block;font-weight:400;font-size:.9rem;margin-top:2px}
.boton:hover{opacity:.9}
.boton-pdf{background:transparent;color:var(--color-txt)}

.cartel{margin:0 calc(50% - min(50vw, 550px)) 24px}
.cartel img{display:block;width:100%;height:auto}

.pie{text-align:center;font-size:.9rem;opacity:.85;padding:0 16px 32px}

.flotantes{display:none}
@media (max-width:767px){
  .flotantes{display:block}
  .acciones .boton:not(.boton-pdf){display:none}
  .flotantes-col{position:fixed;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);overflow-y:auto}
  .flotantes-izq{left:16px}
  .flotantes-der{right:16px}
  .flotante{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:var(--color-txt);color:var(--color);border:3px solid var(--color);text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:.02em;box-shadow:0 3px 10px rgba(0,0,0,.35)}
  .flotante[data-largo]{font-size:.72rem;letter-spacing:0}
  .flotante:active{transform:scale(.95)}
}
.visor-pdf canvas{display:block;width:100%;height:auto}
.visor-aviso{text-align:center;padding:40px 16px;margin:0;opacity:.9}