/* © 2026 Carlo Andre Chiuyare Guillen (Carlo · Dev). Todos los derechos reservados. */
:root{
  --hueso:#F4EEE4; --hueso2:#EAE1D2; --carmesi:#C1121F; --carmesi-o:#8E0B16; --tinta:#14100E; --tinta2:#201915; --ambar:#F2A33A; --mut:#6B5F55;
  --f-d:"Anton","Impact",sans-serif; --f-s:"Instrument Serif",Georgia,serif; --f-b:"Inter Tight",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --hh:68px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--hh) + 16px)}
body{font-family:var(--f-b);font-size:1.0625rem;line-height:1.55;color:var(--tinta);background:var(--hueso);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit} img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--carmesi);outline-offset:3px;border-radius:6px}
.wrap{width:min(1320px,100% - 2.4rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(24px)}}
::selection{background:var(--carmesi);color:var(--hueso)}

/* tipografía */
.d{font-family:var(--f-d);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
.s{font-family:var(--f-s);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.kicker::before{content:"";width:34px;height:2px;background:currentColor}

/* split text */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .l{display:inline-block;transform:translateY(112%) rotate(5deg);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*38ms + var(--base,0ms))}
[data-split].on .l{transform:none}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--dl,0s)}
.rv.on{opacity:1;transform:none}

/* barra de progreso y cursor */
#prog{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--carmesi);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:120}
#cur{position:fixed;left:0;top:0;z-index:130;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--carmesi);pointer-events:none;mix-blend-mode:multiply;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s;display:none;will-change:transform}
#cur span{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hueso);opacity:0;transition:opacity .2s}
#cur.big{width:86px;height:86px;margin:-43px 0 0 -43px;mix-blend-mode:normal}
#cur.big span{opacity:1}
@media(hover:hover) and (pointer:fine){#cur{display:block}}

/* botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:56px;padding:.8rem 2rem;border-radius:999px;border:2px solid var(--tinta);background:var(--tinta);color:var(--hueso);font-weight:700;font-size:1rem;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s,transform .2s}
.btn::before{content:"";position:absolute;inset:0;background:var(--carmesi);transform:translateY(101%);border-radius:50% 50% 0 0/100% 100% 0 0;transition:transform .5s var(--ease),border-radius .5s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none;border-radius:0}
.btn:hover{border-color:var(--carmesi)}
.btn.c{background:var(--carmesi);border-color:var(--carmesi)}
.btn.c::before{background:var(--tinta)}
.btn.c:hover{border-color:var(--tinta)}
.btn.o{background:transparent;color:var(--tinta)}
.btn.o:hover{color:var(--hueso)}
.btn.h{background:transparent;color:var(--hueso);border-color:var(--hueso)}
.btn.h::before{background:var(--hueso)}
.btn.h:hover{color:var(--tinta);border-color:var(--hueso)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

/* aviso y cabecera */
.aviso{background:var(--tinta);color:var(--hueso);text-align:center;font-size:.82rem;padding:.5rem 1rem}
.aviso a{color:var(--ambar);font-weight:700}
header.top{position:sticky;top:0;z-index:100;background:rgba(244,238,228,.82);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(20,16,14,.1)}
header.top .in{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--f-d);font-size:1.7rem;letter-spacing:.02em;text-transform:uppercase;min-height:44px;line-height:1}
.logo i{width:12px;height:12px;border-radius:50%;background:var(--carmesi);display:inline-block;animation:latido 2.4s infinite}
.logo b{font-weight:400;color:var(--carmesi)}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(193,18,31,.6)}70%{box-shadow:0 0 0 10px rgba(193,18,31,0)}100%{box-shadow:0 0 0 0 rgba(193,18,31,0)}}
.top nav{display:flex;align-items:center;gap:1.8rem}
.top nav a:not(.btn){text-decoration:none;font-weight:600;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center;position:relative}
.top nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--carmesi);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.top nav a:not(.btn):hover::after,.top nav a[aria-current=page]::after{transform:scaleX(1)}
.top .btn{min-height:46px;padding:.4rem 1.4rem;font-size:.92rem}
@media(max-width:760px){.top nav a:not(.btn){display:none}}

/* diálogo de estado */
.estado{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 1rem;border-radius:999px;border:1.5px solid currentColor;font-size:.86rem;font-weight:700}
.estado i{width:9px;height:9px;border-radius:50%;background:#8a7f72}
.estado.on i{background:#1F9D55;animation:latido2 2s infinite}
@keyframes latido2{0%{box-shadow:0 0 0 0 rgba(31,157,85,.6)}70%{box-shadow:0 0 0 9px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}

/* marquesina */
.marq{overflow:hidden;white-space:nowrap;padding-block:1.4rem;background:var(--carmesi);color:var(--hueso);border-block:2px solid var(--tinta)}
.marq .tr{display:inline-flex;will-change:transform}
.marq span{font-family:var(--f-d);text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;display:inline-flex;align-items:center;gap:2rem;padding-right:2rem}
.marq span em{font-family:var(--f-s);text-transform:none;font-size:.9em}
.marq span::after{content:"";width:.22em;height:.22em;border-radius:50%;background:var(--ambar)}
.marq.o{background:var(--hueso);color:transparent;-webkit-text-stroke:2px var(--tinta)}

footer{background:var(--tinta);color:var(--hueso);padding:3.5rem 0 7rem;font-size:.9rem}
footer .wrap{display:grid;gap:1.2rem}
footer .big{font-size:clamp(4rem,17vw,15rem);color:var(--carmesi);line-height:.82;margin-bottom:1rem}
footer a{color:var(--ambar)}
footer details summary{cursor:pointer;color:var(--ambar);font-weight:600;min-height:44px;display:flex;align-items:center}
footer details ul{padding-left:1.2rem;display:grid;gap:.3rem;font-size:.84rem;color:#cfc4b4}

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