:root { --azul:#04a9d1; --tinta:#123c48; --rosa:#b62352; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; font-family:'DM Sans',sans-serif; color:var(--tinta); }
.pagina { position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; background:#65cee7; }
.cielo { position:absolute; z-index:-3; inset:0; background:linear-gradient(110deg,rgba(5,153,197,.12),rgba(210,249,255,.25)),url('cielo.webp') center/cover no-repeat; transform:scale(1.08); }
.pagina:before { content:''; position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(ellipse at 92% 40%,rgba(227,252,255,.74),transparent 49%),radial-gradient(ellipse at 10% 75%,rgba(255,255,255,.32),transparent 40%); }
.encabezado { position:relative; z-index:2; padding-top:clamp(27px,5vh,62px); }
.encabezado h1 { margin:0; font-family:'Great Vibes',cursive; font-weight:400; color:#171a1b; font-size:clamp(4rem,9vw,8rem); line-height:1.08; text-shadow:0 3px 10px rgba(255,255,255,.18); }
.hojita { color:#6c9a42; font-family:Georgia,serif; font-size:.35em; margin-left:.16em; vertical-align:middle; }
.autora { margin:0; font-size:clamp(.85rem,1.25vw,1.06rem); letter-spacing:.075em; color:#164451; }
.autora strong { font-weight:700; }
.pentagrama { position:absolute; width:min(88%,980px); height:87px; border-top:2px solid rgba(255,255,255,.32); border-bottom:2px solid rgba(255,255,255,.32); top:58%; left:50%; transform:translate(-50%,-50%); background:repeating-linear-gradient(to bottom,transparent 0,transparent 18px,rgba(255,255,255,.35) 19px,transparent 20px); z-index:-1; opacity:.68; }
.hero { position:relative; flex:1; min-height:450px; }
.imagen-hero { position:absolute; z-index:-1; left:0; bottom:-3px; width:min(61vw,920px); height:min(76vh,850px); background:url('ilustracion.webp') left bottom/contain no-repeat; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%),linear-gradient(to top,#000 0%,#000 82%,transparent 100%); mask-image:linear-gradient(to right,#000 0%,#000 73%,transparent 100%),linear-gradient(to top,#000 0%,#000 82%,transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; }
.contenido-hero { height:100%; min-height:450px; }
.mensaje-col { padding-top:40px; padding-bottom:95px; }
.mensaje { padding:30px clamp(12px,2vw,32px); }
.ante-titulo { margin:0 0 13px; letter-spacing:.3em; font-weight:700; text-transform:uppercase; color:#8d3157; font-size:1rem; }
.mensaje h2 { font-family:'Playfair Display',Georgia,serif; font-size:clamp(2.4rem,4.4vw,4.55rem); line-height:1.17; font-weight:600; color:#183e4b; margin:0 0 25px; text-wrap:balance; }
.mensaje h2 span { color:#ad294c; display:block; font-weight:700; }
.subtexto { max-width:420px; margin:0; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.8; color:#315765; }
.separador { color:#ba486c; display:flex; align-items:center; gap:12px; margin-bottom:24px; opacity:.8; }
.separador span { height:1px; width:70px; background:#ba486c; }
.linea-final { width:94px; height:3px; border-radius:10px; background:#b93357; margin-top:28px; }
.pie { position:relative; z-index:3; align-self:stretch; display:flex; align-items:center; justify-content:center; gap:14px; padding:15px 16px 20px; font-size:.85rem; color:#275460; background:linear-gradient(to top,rgba(217,249,253,.8),rgba(217,249,253,0)); }
.pie a { color:#245063; text-decoration:underline; text-underline-offset:4px; font-weight:700; }
.pie a:hover { color:#a62b56; }
.modal-backdrop.show { opacity:.79; background:#051924; }
.modal-content { border:0; border-radius:18px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.3); }
.modal-header { background:#e9f9fc; padding:24px 28px; border-bottom:1px solid #cfe8ed; }
.modal-title { font-family:'Playfair Display',Georgia,serif; color:#143e4b; font-weight:700; }
.modal-eyebrow { color:#a72d53; text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:700; }
.modal-body { padding:26px 30px; line-height:1.7; }
.modal-body h3 { font-size:1.03rem; font-weight:700; margin:22px 0 8px; color:#1a5363; }
.modal-body p { margin-bottom:10px; }
.nota-legal { border-left:4px solid #d8a33c; background:#fff8e8; padding:13px 16px; font-size:.9rem; }
.actualizacion { font-size:.85rem; color:#5c6c73; padding-top:12px; }
.modal-footer { padding:15px 25px; }
.btn-cerrar { background:#146c82; border:0; color:#fff; padding:10px 20px; border-radius:9px; }
.btn-cerrar:hover { background:#0d5264; color:#fff; }
@media(max-width:991.98px) { .encabezado { padding-top:30px; } .encabezado h1 { font-size:clamp(3.8rem,12vw,6rem); } .hero { min-height:670px; } .contenido-hero { min-height:670px; } .imagen-hero { width:72vw; height:65vh; max-height:650px; opacity:.95; } .mensaje-col { padding:25px 0 100px; } .mensaje { max-width:480px; margin-left:auto; border-radius:18px; background:rgba(236,252,255,.66); backdrop-filter:blur(4px); } .mensaje h2 { font-size:clamp(2.3rem,5vw,3.5rem); } }
@media(max-width:575.98px) { .encabezado { padding-top:25px; } .encabezado h1 { font-size:clamp(3.5rem,15vw,5.3rem); } .autora { font-size:.72rem; padding:0 12px; letter-spacing:0; } .pentagrama { top:52%; height:65px; } .hero { min-height:740px; } .contenido-hero { min-height:740px; display:flex; align-items:flex-start; } .contenido-hero .row { height:auto!important; width:100%; margin:0; } .mensaje-col { padding:36px 6px 0; } .mensaje { margin:auto; padding:25px 18px 21px; background:rgba(236,252,255,.83); text-align:center; } .mensaje h2 { font-size:clamp(2.1rem,8vw,3.2rem); margin-bottom:12px; } .ante-titulo { font-size:.79rem; } .separador { justify-content:center; margin-bottom:10px; } .linea-final { margin:18px auto 0; } .subtexto { font-size:.92rem; line-height:1.55; } .imagen-hero { width:100vw; height:400px; background-position:left bottom; background-size:contain; -webkit-mask-image:linear-gradient(to top,#000 0%,#000 75%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,#000 75%,transparent 100%); } .pie { font-size:.76rem; gap:9px; padding:16px 7px 19px; } .modal-body { padding:20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }