/* Edita aquí los colores de la experiencia. Sin fuentes ni librerías externas. */
:root{--navy:#061521;--white:#f6f8f7;--gold:#f4d68b;--cyan:#53c5f6;--muted:#b6c6d4;--pointer-x:0px;--pointer-y:0px;color-scheme:dark}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:Arial,Helvetica,sans-serif;min-height:100svh;overflow-x:hidden;isolation:isolate}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:7px}button{cursor:pointer}a{color:inherit;text-decoration:none}
.stadium{position:fixed;z-index:-4;inset:-3%;background:linear-gradient(180deg,#06152122 10%,#06152100 65%,#03141155),url('assets/estadio.png') center bottom/cover no-repeat;transform:translate(var(--pointer-x),var(--pointer-y)) scale(1.025);transition:transform .7s ease-out}.vignette{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,#061521b5 0%,#06152180 44%,#06152115 71%,#061521c9 100%),radial-gradient(ellipse at center,transparent 20%,#04101c88 100%)}
.masthead{max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 4.5%;gap:20px}.wordmark{display:flex;align-items:center;gap:12px}.monogram{font-family:Georgia,serif;letter-spacing:-5px;font-size:33px;font-weight:bold}.monogram>span{font-family:Arial,sans-serif;font-size:9px;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 6px}.brand-text{font-size:10px;letter-spacing:1.8px;line-height:1.7;border-left:1px solid #ffffff36;padding-left:13px;font-weight:700}.brand-text small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);font-weight:400}.edition{font-size:9px;letter-spacing:2.8px;color:var(--muted);display:flex;align-items:center;gap:10px}.edition i{height:5px;width:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #f4d68b88}.motion-toggle{background:#ffffff08;color:#d1dce4;border:1px solid #ffffff24;border-radius:50px;display:flex;gap:9px;padding:10px 15px;align-items:center;font-size:10px;letter-spacing:.7px}.motion-toggle:hover{background:#ffffff18}
.hero{text-align:center;min-height:calc(100svh - 154px);display:flex;flex-direction:column;align-items:center;padding:12px 24px 38px;position:relative}.crest-stage{position:relative;display:flex;align-items:center;flex-direction:column;margin:0 0 23px}.crest{width:272px;height:326px;background:url('assets/portada-original.png') -641px -430px / 960px 920px no-repeat;clip-path:polygon(40% 0,57% 0,63% 11%,91% 18%,93% 27%,100% 34%,96% 54%,100% 65%,92% 71%,90% 77%,76% 87%,64% 95%,51% 100%,34% 94%,16% 84%,8% 74%,0 66%,6% 57%,0 39%,5% 29%,6% 19%,37% 11%);filter:drop-shadow(0 15px 30px #0008);zoom:.65;position:relative;z-index:1}.crest-halo{position:absolute;width:300px;height:280px;top:-20px;background:radial-gradient(ellipse,#3fabff27,transparent 65%);pointer-events:none}.crest-caption{font-size:8px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:12px;margin-top:15px}.crest-caption span{height:1px;width:30px;background:linear-gradient(90deg,transparent,#f4d68b88)}.crest-caption span:last-child{transform:rotate(180deg)}
.eyebrow{font-size:10px;letter-spacing:3px;color:#bfcfdb;margin:0 0 18px;font-weight:500}h1{font-size:clamp(46px,6.25vw,94px);line-height:1.035;letter-spacing:-3.5px;margin:0;font-weight:800;text-shadow:0 4px 35px #06152188}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;background:linear-gradient(110deg,#faebbd,#eac26c 45%,#fceac0);background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:-3px}.intro{font-size:16px;line-height:1.9;color:#cfdae3;margin:24px 0 0;font-weight:400}.intro strong{font-weight:400;color:#fff}.actions{margin-top:27px}#celebrate{display:inline-flex;align-items:center;gap:15px;background:linear-gradient(115deg,#fbe9b2,#e9c271);color:#14202a;font-size:12px;font-weight:700;border:1px solid #f6e0a0;border-radius:5px;padding:17px 23px;box-shadow:0 4px 30px #e8c67218;transition:transform .2s,box-shadow .2s}#celebrate:hover{transform:translateY(-3px);box-shadow:0 8px 35px #e8c67240}#celebrate:active{transform:translateY(0) scale(.98)}.ball{font-size:18px;font-weight:400}.arrow{margin-left:9px;font-size:18px}.health{font-size:11px;color:#c8d2d9;margin:17px 0 0;letter-spacing:.3px}.closing{margin-top:auto;padding-top:49px;display:flex;align-items:center;gap:23px;max-width:100%}.closing-line{width:74px;height:1px;background:linear-gradient(90deg,transparent,#d4dfde50)}.closing-line:last-child{transform:rotate(180deg)}.closing p{font-size:12px;line-height:1.8;color:#d0d9dd;margin:0}.closing strong{font-weight:500;color:white;font-size:14px}
footer{margin:0 4.5%;padding:21px 0;border-top:1px solid #ffffff1a;display:flex;justify-content:space-between;gap:20px;color:#a9b9c8;font-size:8px;letter-spacing:1.5px}.footer-center{letter-spacing:.3px;font-size:10px;color:#c2ced6}.heart{color:var(--gold);font-size:11px;margin-left:5px}#confetti{position:fixed;inset:0;pointer-events:none;width:100%;height:100%;z-index:5}.beam{position:fixed;pointer-events:none;bottom:15%;height:90vh;width:35vw;background:linear-gradient(to top,#8ad8ff0d,transparent);clip-path:polygon(48% 100%,0 0,100% 0);z-index:-2;transform-origin:center bottom;animation:sweep 14s ease-in-out infinite alternate}.beam-left{left:-9%;rotate:20deg}.beam-right{right:-9%;rotate:-20deg;animation-delay:-7s}@keyframes sweep{from{transform:rotate(-12deg);opacity:.4}to{transform:rotate(12deg);opacity:1}}.reveal{animation:arrive 1s both cubic-bezier(.16,1,.3,1)}.crest-stage{animation-delay:.1s}.eyebrow{animation-delay:.25s}h1{animation-delay:.38s}.intro{animation-delay:.52s}.actions{animation-delay:.65s}.closing{animation-delay:.8s}@keyframes arrive{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.still *, .still *::before,.still *::after{animation:none!important;transition:none!important}.still .stadium{transform:none}
@media(min-width:1500px){.hero{padding-top:25px}.crest{zoom:.8}.intro{font-size:18px}.closing{padding-top:50px}}
@media(max-width:700px){.masthead{padding:22px 6%;}.edition{display:none}.brand-text{font-size:8px;letter-spacing:1.1px}.monogram{font-size:29px}.motion-toggle{padding:9px 12px}.hero{padding:14px 20px 32px;min-height:calc(100svh - 149px)}.crest{zoom:.61}.crest-stage{margin-bottom:24px}.crest-caption{font-size:7px;letter-spacing:2.2px}.eyebrow{font-size:8px;letter-spacing:1.6px;margin-bottom:18px}h1{font-size:clamp(38px,9.3vw,64px);letter-spacing:-1.8px;line-height:1.08}h1 em{letter-spacing:-1.5px}.intro{font-size:14px;line-height:1.85;max-width:360px;margin:21px auto 0}.desktop-br{display:none}.actions{margin-top:24px}#celebrate{padding:16px 20px}.health{font-size:10px}.closing{padding-top:42px;gap:13px}.closing-line{width:30px}.closing p{font-size:11px}.closing strong{font-size:12px}footer{flex-wrap:wrap;justify-content:center;gap:9px;padding:17px 0;font-size:7px}.footer-center{width:100%;text-align:center;order:3;font-size:9px}.stadium{background-position:center bottom}.vignette{background:linear-gradient(180deg,#061521bb,#06152199 50%,#06152111 75%,#061521bb)}.beam{width:70vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body:not(.motion-enabled),body:not(.motion-enabled) *,body:not(.motion-enabled) *::before,body:not(.motion-enabled) *::after{animation:none!important;transition:none!important}body:not(.motion-enabled) .stadium{transform:none}}

/* Collage angular inspirado en Persona 5, aplicado únicamente al escudo.
   La imagen original no cambia: las capas y los cortes se construyen con CSS. */
.crest-cutout{position:relative;isolation:isolate;padding:10px 18px 6px;transform:rotate(-4deg);animation:crest-sticker-in .8s .15s both cubic-bezier(.16,1,.3,1);filter:drop-shadow(6px 10px 0 #062c64);}
.crest-cutout::before,.crest-cutout::after{content:"";position:absolute;pointer-events:none;z-index:-1;}
.crest-cutout::before{inset:0 -13px -4px -12px;background:#008bd2;clip-path:polygon(18% 12%,65% 0,69% 9%,95% 4%,87% 39%,100% 44%,87% 60%,94% 85%,58% 87%,48% 100%,31% 88%,6% 91%,14% 57%,0 42%,16% 33%);transform:translate(8px,6px) rotate(7deg);animation:crest-offset 6s 1.1s infinite steps(1,end);}
.crest-cutout::after{inset:2px 0 -2px;background:#ffffff;clip-path:polygon(36% 0,62% 3%,67% 13%,100% 20%,94% 45%,100% 64%,83% 81%,52% 100%,22% 84%,0 64%,7% 43%,2% 20%,33% 12%);transform:rotate(2deg);}
.crest-cutout .crest{transform:rotate(3deg);}
.crest-cutout .crest::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,#fff7 49%,transparent 60%);transform:translateX(-140%);animation:crest-glint 7s 1.2s infinite;pointer-events:none;}
.crest-slash{position:absolute;pointer-events:none;z-index:2;display:block;background:#ffffff;clip-path:polygon(0 35%,100% 0,72% 65%,9% 100%);}
.slash-one{width:33px;height:12px;top:42px;right:-24px;transform:rotate(-27deg);}
.slash-two{width:23px;height:8px;bottom:46px;left:-23px;transform:rotate(-27deg);background:#f4d68b;}
.crest-cutout:hover::before{transform:translate(13px,4px) rotate(11deg);animation-play-state:paused;}
@keyframes crest-sticker-in{0%{opacity:0;transform:translateY(12px) scale(.8) rotate(-12deg)}70%{opacity:1;transform:translateY(0) scale(1.035) rotate(-2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-4deg)}}
@keyframes crest-offset{0%,93%,100%{transform:translate(8px,6px) rotate(7deg)}94%,97%{transform:translate(11px,3px) rotate(10deg)}96%,99%{transform:translate(5px,8px) rotate(5deg)}}
@keyframes crest-glint{0%,75%{transform:translateX(-140%)}92%,100%{transform:translateX(140%)}}

/* Distribución fluida: el contenido puede crecer con el zoom y la altura disponible. */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.masthead{width:100%;flex-wrap:wrap}
main{flex:1;display:flex;flex-direction:column;min-width:0}
.hero{flex:1;min-height:0;width:100%}
.message{width:100%;min-width:0;overflow-wrap:break-word}
.wordmark{min-width:0;max-width:100%}
.brand-text{overflow-wrap:anywhere}
.motion-toggle{flex-shrink:0;min-height:44px}
.crest-stage{max-width:100%}
.crest-caption{max-width:100%;text-align:center}
.crest-caption span{flex-shrink:1}
.closing p{min-width:0;overflow-wrap:break-word}
.closing-line{flex-shrink:1}
footer{flex-wrap:wrap;align-items:center}
footer>span{min-width:0;overflow-wrap:anywhere}
#celebrate{max-width:100%;min-height:44px}
@media(max-width:380px){
  .masthead{padding:16px 5%;gap:12px}
  .wordmark{gap:8px}
  .brand-text{padding-left:8px;letter-spacing:.5px}
  .hero{padding-inline:16px}
  h1{font-size:clamp(28px,9.3vw,38px)}
  .crest{zoom:.52}
  .crest-halo{width:100%}
  .crest-caption{letter-spacing:1.3px;gap:8px}
  .closing{gap:8px}
  .closing-line{width:16px}
  #celebrate{gap:8px;padding-inline:16px}
}
/* Vista compacta: tamaños y espacios ajustados a la altura disponible. */
.masthead{margin:0 auto;padding-block:8px;flex-shrink:0}
.hero{justify-content:center;padding:6px 24px 12px;gap:clamp(8px,1.8svh,18px)}
.crest-stage{margin:0}
.crest{zoom:.44}
.crest-halo{width:220px;height:180px}
.crest-caption{margin-top:10px}
.eyebrow{margin-bottom:10px;font-size:9px}
h1{font-size:clamp(32px,min(5.3vw,8svh),72px);letter-spacing:-2px;line-height:1.04}
h1 em{letter-spacing:-1.8px}
.intro{font-size:14px;line-height:1.55;margin:14px auto 0}
.actions{margin-top:16px}
#celebrate{padding:10px 20px}
.health{margin-top:9px}
.closing{margin-top:0;padding-top:0}
.closing p{line-height:1.5}
footer{flex-shrink:0;padding-block:10px;gap:8px 20px}
@media(min-height:850px) and (min-width:701px){
  .crest{zoom:.55}
  .hero{gap:22px}
  .intro{font-size:16px}
}
@media(max-width:700px){
  .masthead{padding:6px 6%;justify-content:flex-end}
  .hero{padding:4px 20px 10px;gap:12px}
  .crest{zoom:.38}
  .crest-caption{margin-top:9px}
  .eyebrow{font-size:8px;margin-bottom:8px}
  h1{font-size:clamp(28px,min(8.5vw,6.3svh),48px);letter-spacing:-1.2px}
  h1 em{letter-spacing:-1.2px}
  .intro{font-size:13px;line-height:1.5;margin-top:10px;max-width:390px}
  .actions{margin-top:12px}
  .health{margin-top:8px}
  footer{padding-block:8px;gap:5px 12px}
}
@media(max-height:650px){
  .hero{gap:8px;padding-block:4px 8px}
  .crest{zoom:.3}
  .crest-caption{margin-top:6px}
  .intro{margin-top:8px}
  .actions{margin-top:8px}
  .health{margin-top:6px}
  footer{padding-block:6px}
}
/* En horizontal, el escudo comparte fila con el mensaje. */
@media(max-height:500px) and (min-width:600px){
  .hero{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3fr);align-content:center;column-gap:24px;max-width:1100px;margin-inline:auto}
  .crest-stage{grid-column:1;grid-row:1;align-self:center}
  .message{grid-column:2;grid-row:1}
  .closing{grid-column:1 / -1;justify-content:center}
  .crest-caption{font-size:6px;letter-spacing:1px;gap:5px}
  .crest-caption span{width:12px}
  h1{font-size:clamp(26px,7.5svh,36px)}
  .intro{font-size:12px;line-height:1.4;max-width:460px}
  .desktop-br{display:none}
  .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:6px}
  .health{font-size:10px}
  .closing p{font-size:10px}
  .closing strong{font-size:11px}
}