@font-face{font-family:Handlee;src:url(fuentes/handlee-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;font-weight:400;src:url(fuentes/nunito-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Nunito;font-weight:700;src:url(fuentes/nunito-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Tenor Sans";src:url(fuentes/tenor-sans-latin-400-normal.woff2) format("woff2");font-display:swap}

/* --u = 1% del ancho de la escena (proporción 5:9), para que todo escale igual en cualquier móvil */
:root{
  --u:min(1vw,.5556vh);
  --verde:#10504E;
  --crema:#EFE7C5;
  --papel:#E9E5D4;
  --baya:#9C3A55;
  --niebla:#C9D4E1;
}
@supports (height:1dvh){:root{--u:min(1vw,.5556dvh)}}

*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--niebla);overflow:hidden}
body{display:flex;align-items:center;justify-content:center;font-family:Nunito,system-ui,sans-serif;color:var(--verde);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:calc(var(--u)*.7) solid var(--baya);outline-offset:calc(var(--u)*.4)}

/* Los móviles son más altos que el diseño: la máscara funde arriba y abajo con el color de fondo, sin corte */
#escena{position:relative;width:calc(var(--u)*100);height:calc(var(--u)*180);overflow:hidden}
.fondo{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease;user-select:none;-webkit-user-drag:none;-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent)}
.fondo.visible{opacity:1}
.capa{position:absolute;inset:0;animation:entrar .4s ease both}

.volver{position:absolute;left:calc(var(--u)*3.5);top:calc(var(--u)*3.5);width:calc(var(--u)*11.5);height:calc(var(--u)*11.5);border-radius:50%;background:var(--verde);color:var(--crema);display:grid;place-items:center;z-index:5}
.volver svg{width:58%;height:58%}

/* Selector: zonas invisibles sobre tus botones */
.tipo{position:absolute;left:20.4%;width:59.2%;border-radius:calc(var(--u)*5)}
.tipo:active{background:rgba(16,80,78,.12)}

/* Círculos del calendario */
.dia{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Handlee,cursive;line-height:1;font-size:calc(var(--u)*7);color:var(--verde);transition:transform .15s ease}
.dia:active{transform:scale(.93)}
.dia small{font-family:Nunito,sans-serif;font-weight:700;font-size:calc(var(--u)*2.3);margin-top:calc(var(--u)*-.2)}
.dia.futuro{color:rgba(16,80,78,.5)}
.dia.abierto{background:var(--verde);color:var(--crema)}
.dia.hoy{background:var(--baya);color:#fff;animation:latido 1.8s ease-in-out infinite}

/* Tarjeta del día: se ajusta al papel de tu diseño */
.tarjeta{position:absolute;left:16.6%;top:25.44%;width:67%;height:53.33%;animation:entrar .4s ease both;outline:0}
.texto{position:absolute;left:7%;right:5%;top:3.3%;bottom:13.8%}
/* Reserva el sitio de las velas para que el texto las rodee */
.hueco{float:right;width:39%;height:100%;shape-outside:polygon(100% 0,100% 71.5%,66% 76.9%,50% 81.9%,24% 86.9%,24% 100%,100% 100%)}
.fecha{font-weight:700;font-size:calc(var(--u)*3);letter-spacing:.02em}
.fiesta{font-weight:700;font-size:calc(var(--u)*3);color:var(--baya);line-height:1.2;margin-top:calc(var(--u)*.5)}
.fiesta:empty{display:none}
.tema{font-family:Handlee,cursive;font-weight:400;font-size:calc(var(--u)*8);line-height:1.05;margin:calc(var(--u)*2.6) 0 calc(var(--u)*2.8)}
.palabra{font-family:"Tenor Sans",serif;font-size:calc(var(--u)*5);line-height:1.33}
.fuente{font-size:calc(var(--u)*2.9);line-height:1.25;margin-top:calc(var(--u)*2.2);opacity:.85}
.etiqueta{font-weight:700;font-size:calc(var(--u)*2.9);letter-spacing:.08em;text-transform:uppercase;color:var(--baya);margin-bottom:calc(var(--u)*.6)}
.cuerpo{font-size:calc(var(--u)*4.2);line-height:1.34;margin-bottom:calc(var(--u)*2.6)}
.girar{position:absolute;left:5%;bottom:1.8%;min-width:50%;height:calc(var(--u)*9.4);padding:0 calc(var(--u)*3);border-radius:calc(var(--u)*5);background:var(--verde);color:var(--crema);font-weight:700;font-size:calc(var(--u)*3.4);white-space:nowrap}
.girar::after{content:"";position:absolute;inset:calc(var(--u)*-1.2) 0}

/* Navidad: en el hueco entre el muérdago y la estrella */
#navidad{outline:0}
.n-hueco{position:absolute;left:31.5%;width:37%;top:21%;height:18.6%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--crema);text-shadow:0 0 calc(var(--u)*1.2) rgba(16,80,78,.55)}
.n-hueco blockquote{font-family:"Tenor Sans",serif;font-size:calc(var(--u)*3.9);line-height:1.3}
.n-fuente{font-size:calc(var(--u)*2.8);margin-top:calc(var(--u)*.8)}
.n-felicitacion{font-family:Handlee,cursive;font-size:calc(var(--u)*5.2);line-height:1.1;margin-top:calc(var(--u)*2)}
.n-boton{left:50%;bottom:calc(var(--u)*3.6);transform:translateX(-50%)}

/* Mensaje de la cuenta el día de Navidad */
#felicitacion .texto{bottom:27%}
#felicitacion .tema{margin-top:calc(var(--u)*1)}
.f-botones{position:absolute;left:5%;bottom:1.8%;width:50%;display:grid;gap:calc(var(--u)*1.6)}
.f-botones .girar{position:relative;left:auto;bottom:auto;width:100%;min-width:0;padding:0;display:grid;place-items:center;text-decoration:none}
.f-botones .girar::after{inset:0}

.aviso{position:absolute;left:8%;right:8%;bottom:calc(var(--u)*6);background:var(--verde);color:var(--crema);text-align:center;font-weight:700;font-size:calc(var(--u)*3.7);line-height:1.25;padding:calc(var(--u)*2.6) calc(var(--u)*3.5);border-radius:calc(var(--u)*4);opacity:0;transform:translateY(calc(var(--u)*2));transition:opacity .25s,transform .25s;pointer-events:none;z-index:6}
.aviso.visible{opacity:1;transform:none}

@keyframes entrar{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(156,58,85,.55)}50%{box-shadow:0 0 0 calc(var(--u)*1.8) rgba(156,58,85,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}