/* ═══════════════════════════════════════════════════════════
   VISTE A JORY BOY — PRISMA × Under Armour
   LAYER 1 — FONT FACES  (shared with deck_ua.html)
═══════════════════════════════════════════════════════════ */
@font-face{font-family:'Archivo';src:url('./assets/fonts/Archivo-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Archivo';src:url('./assets/fonts/Archivo-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Archivo';src:url('./assets/fonts/Archivo-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Archivo';src:url('./assets/fonts/Archivo-Black.ttf') format('truetype');font-weight:900;font-display:swap;}
@font-face{font-family:'ArchivoExp';src:url('./assets/fonts/Archivo-ExpandedBold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'ArchivoExp';src:url('./assets/fonts/Archivo-ExpandedBlack.ttf') format('truetype');font-weight:900;font-display:swap;}

/* ═══════════════════════════════════════════════════════════
   LAYER 2 — DESIGN TOKENS
═══════════════════════════════════════════════════════════ */
:root{
  --black:#000000;
  --ink:#0A0A0C;
  --bone:#F2F0EC;
  --white:#FFFFFF;
  --red:#C8102E;
  --red-lit:#E31837;
  --grey:#6E6E73;
  --grey2:#9A9AA0;

  --t-primary:var(--bone);
  --t-secondary:rgba(242,240,236,.62);
  --t-muted:rgba(242,240,236,.34);

  --b-subtle:rgba(242,240,236,.12);
  --b-mid:rgba(242,240,236,.26);

  --f-body:'Archivo',system-ui,-apple-system,sans-serif;
  --f-disp:'ArchivoExp','Archivo',system-ui,sans-serif;

  --max-w:480px;
  --pad-h:20px;

  --ease-fast:.16s ease;
  --ease-mid:.32s ease;
  --ease-slow:.55s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════
   LAYER 3 — RESET + BASE
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;width:100%;overflow-x:hidden;}

body{
  background:var(--black);
  color:var(--t-primary);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  min-height:100dvh;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  align-items:center;
}

img{display:block;max-width:100%;}
button{font-family:var(--f-body);-webkit-tap-highlight-color:transparent;}
ul{list-style:none;}

/* black-on-transparent UA mark → white */
.mark{filter:invert(1);}

:focus-visible{outline:2px solid var(--red-lit);outline-offset:3px;}

/* ═══════════════════════════════════════════════════════════
   LAYER 4 — HEADER
═══════════════════════════════════════════════════════════ */
.site-head{
  width:100%;
  max-width:var(--max-w);
  padding:22px var(--pad-h) 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.lockup{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding-top:2px;min-width:0;}

.lockup-prisma{
  font-family:var(--f-disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(.72rem,3.3vw,.92rem);letter-spacing:.22em;color:var(--white);line-height:1;
  white-space:nowrap;
}
.lockup-x{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--grey2);line-height:1;}
.lockup-mark{width:clamp(24px,7vw,32px);height:auto;flex-shrink:0;}
.lockup-brand{
  font-family:var(--f-body);font-weight:700;font-size:clamp(.72rem,3.4vw,.95rem);
  letter-spacing:-.01em;color:var(--white);line-height:1;white-space:nowrap;
}

.head-tag{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-family:var(--f-body);font-weight:700;font-size:.52rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--grey);
  line-height:1.5;text-align:right;flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 5 — SHELL + PHASES
═══════════════════════════════════════════════════════════ */
.shell{
  width:100%;
  max-width:var(--max-w);
  padding:0 var(--pad-h);
  flex:1;
}

.phase{display:flex;flex-direction:column;align-items:center;gap:26px;padding:26px 0 40px;}
.phase.is-hidden{display:none;}
/* No fill-mode: with `both` the from-state (opacity:0) sticks whenever the
   animation cannot run — a throttled/hidden page then renders nothing. */
.phase.is-entering{animation:fadeUp .5s var(--ease-slow);}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ═══════════════════════════════════════════════════════════
   LAYER 6 — HERO
═══════════════════════════════════════════════════════════ */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}

.hero-title{
  font-family:var(--f-disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.35rem,12.2vw,3.5rem);
  line-height:.88;letter-spacing:-.022em;color:var(--white);
}

/* "RESULTADOS" is a much longer word than "GRACIAS" and overflows the shell
   at the hero ramp, so this headline gets its own smaller one. */
#results-title{font-size:clamp(1.85rem,9.9vw,3rem);}

.hero-sub{
  font-family:var(--f-body);font-weight:700;
  font-size:clamp(.82rem,3.6vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  line-height:1.3;
}

.hero-copy{
  font-size:.83rem;line-height:1.62;color:var(--grey2);
  max-width:40ch;margin-top:2px;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 7 — CAROUSEL
═══════════════════════════════════════════════════════════ */
.carousel{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;}

.carousel-viewport{width:100%;overflow:hidden;}

.carousel-track{
  display:flex;
  transition:transform var(--ease-slow);
  will-change:transform;
}

.slide{flex:0 0 100%;min-width:0;}

/* ── frame ── */
.frame{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  background:var(--ink);
  border:1px solid var(--b-subtle);
  border-radius:10px;
  overflow:hidden;
  isolation:isolate;
}

.frame-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}

/* once a real look photo is uncommented, the placeholder steps aside */
.frame-photo ~ .frame-empty{display:none;}

/* scrim keeps the bone chrome legible over stage photography */
.frame::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5) 100%);
}

/* placeholder while the real look photography is "por definir" */
.frame-empty{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 46%,rgba(227,24,55,.10),rgba(0,0,0,0) 68%),
    repeating-linear-gradient(135deg,rgba(242,240,236,.028) 0 2px,rgba(0,0,0,0) 2px 9px),
    var(--ink);
}
.frame-empty img{width:92px;opacity:.11;}

/* status chip — reads with the look name instead of floating mid-frame */
.look-chip{
  display:inline-block;margin-top:12px;
  font-family:var(--f-body);font-weight:700;font-size:.5rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey2);
  border:1px solid var(--b-mid);border-radius:999px;padding:4px 10px;
}

/* everything above the photo */
.frame-tl,.frame-mark,.marg,.callouts,.frame-count{z-index:2;}

.frame-tl{position:absolute;top:20px;left:20px;max-width:64%;}

.look-kicker{
  display:block;
  font-family:var(--f-body);font-weight:700;font-size:.58rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--bone);
}
.look-rule{display:block;width:34px;height:2px;background:var(--bone);margin:8px 0 12px;}

.look-name{
  font-family:var(--f-disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.28rem,6.4vw,1.72rem);
  line-height:.9;letter-spacing:-.02em;color:var(--white);
}

.frame-mark{position:absolute;top:20px;right:20px;width:30px;height:auto;opacity:.95;}

/* ── marginalia ── */
.marg{
  position:absolute;
  font-family:var(--f-body);font-weight:700;font-size:.46rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--t-muted);
  line-height:1.9;
}
.marg i{display:block;width:16px;height:1px;background:var(--t-muted);margin-top:6px;}
.marg-l{left:20px;top:59%;}
.marg-r{right:20px;top:14%;text-align:right;}
.marg-br{right:20px;bottom:16%;text-align:right;}
.marg-br i{margin-left:auto;}

/* ── product callouts ── */
.callouts{position:absolute;inset:0;pointer-events:none;}

.co{
  position:absolute;
  left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:0;
  transform:translateY(-50%);
}
.co-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--bone);
  box-shadow:0 0 0 3px rgba(0,0,0,.35);
  flex-shrink:0;
}
.co-line{width:var(--len);height:1px;background:var(--bone);flex-shrink:0;}
.co-txt{
  font-family:var(--f-body);font-weight:700;font-size:.5rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
  line-height:1.7;margin-left:8px;white-space:nowrap;
}

.co--left{flex-direction:row-reverse;transform:translate(-100%,-50%);}
.co--left .co-txt{margin-left:0;margin-right:8px;text-align:right;}

.frame-count{
  position:absolute;left:20px;bottom:18px;
  font-family:var(--f-body);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;color:var(--t-secondary);
}
.frame-count b{font-weight:900;color:var(--white);}

/* ── nav arrows ── */
.nav{
  position:absolute;top:calc(50% - 16px);transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.58);
  border:1px solid var(--b-mid);
  color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;z-index:3;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background var(--ease-fast),border-color var(--ease-fast),opacity var(--ease-fast);
}
.nav svg{width:17px;height:17px;}
.nav-prev{left:10px;}
.nav-next{right:10px;}
.nav:hover:not(:disabled){background:rgba(227,24,55,.22);border-color:rgba(227,24,55,.6);}
.nav:disabled{opacity:.26;cursor:not-allowed;}

/* ── dots ── */
.dots{display:flex;gap:8px;align-items:center;}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--b-mid);border:none;padding:0;cursor:pointer;
  transition:background var(--ease-mid),width var(--ease-mid),border-radius var(--ease-mid);
}
.dot.is-active{background:var(--red-lit);width:22px;border-radius:4px;}

/* ═══════════════════════════════════════════════════════════
   LAYER 8 — CTA
═══════════════════════════════════════════════════════════ */
.cta{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;}

.cta-ask{
  font-family:var(--f-body);font-weight:700;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t-secondary);
  text-align:center;
}

.btn{
  position:relative;
  width:100%;
  min-height:58px;
  padding:18px 26px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--bone);
  color:var(--black);
  border:none;border-radius:999px;
  font-family:var(--f-body);font-weight:900;
  font-size:clamp(.88rem,3.8vw,1.02rem);
  letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;
  transition:background var(--ease-fast),transform var(--ease-fast),color var(--ease-fast);
}
.btn:hover:not(:disabled){background:var(--white);}
.btn:active:not(:disabled){transform:scale(.985);}
.btn:disabled{cursor:not-allowed;}

.btn-arrow{width:20px;height:20px;flex-shrink:0;transition:transform var(--ease-mid);}
.btn:hover:not(:disabled) .btn-arrow{transform:translateX(4px);}

.btn-loader{
  position:absolute;
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(0,0,0,.22);
  border-top-color:var(--red);
  opacity:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn.is-loading{color:transparent;}
.btn.is-loading .btn-text,
.btn.is-loading .btn-arrow{opacity:0;}
.btn.is-loading .btn-loader{opacity:1;}

.cta-fine{
  font-size:.74rem;line-height:1.55;color:var(--grey);
  text-align:center;max-width:38ch;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 9 — RESULTS
═══════════════════════════════════════════════════════════ */
.results{width:100%;display:flex;flex-direction:column;gap:22px;}

.bar-head{
  display:flex;align-items:baseline;gap:9px;margin-bottom:9px;
}

.bar-idx{
  font-family:var(--f-disp);font-weight:900;font-size:.72rem;
  letter-spacing:.06em;color:var(--grey);flex-shrink:0;
}

.bar-name{
  font-family:var(--f-body);font-weight:700;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-secondary);
  line-height:1.3;
}

.bar-flag{
  display:none;
  font-family:var(--f-body);font-weight:700;font-size:.5rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red-lit);
  border:1px solid rgba(227,24,55,.5);border-radius:999px;
  padding:2px 7px;flex-shrink:0;
}
.bar.is-mine .bar-flag{display:inline-block;}
.bar.is-mine .bar-name{color:var(--bone);}

.bar-pct{
  margin-left:auto;flex-shrink:0;
  font-family:var(--f-disp);font-weight:900;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--t-secondary);
  transition:color var(--ease-mid);
}
.bar.is-winner .bar-pct{color:var(--white);}

.bar-track{
  width:100%;height:9px;border-radius:999px;
  background:rgba(242,240,236,.09);overflow:hidden;
}
.bar-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:rgba(242,240,236,.30);
  transition:width var(--ease-slow),background var(--ease-mid);
}
.bar.is-winner .bar-fill{
  background:linear-gradient(90deg,var(--red) 0%,var(--red-lit) 100%);
}

.results-total{
  font-family:var(--f-body);font-weight:700;font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--grey);
  text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   LAYER 10 — FOOTER
═══════════════════════════════════════════════════════════ */
.site-foot{
  width:100%;max-width:var(--max-w);
  padding:30px var(--pad-h) calc(34px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:7px;
  text-align:center;
}

.foot-band{display:flex;align-items:center;gap:16px;width:100%;}
.foot-rule{flex:1;height:1px;background:var(--b-subtle);min-width:18px;}
.foot-centre{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;}

.foot-kicker{
  font-family:var(--f-body);font-weight:500;font-size:.66rem;
  letter-spacing:.2em;color:var(--grey);
}

.foot-brand{
  font-family:var(--f-disp);font-weight:900;text-transform:uppercase;
  font-size:1.5rem;letter-spacing:.2em;color:var(--white);line-height:1;
  margin-left:.2em; /* optical: compensate trailing letter-spacing */
}

.foot-date{
  font-family:var(--f-body);font-weight:700;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey2);
}

.foot-marks{display:flex;align-items:center;gap:11px;margin-top:16px;}
.foot-by{
  font-family:var(--f-body);font-weight:500;font-size:.58rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--grey);
}
.foot-siente{width:74px;height:auto;}
.foot-sep{width:1px;height:16px;background:var(--b-subtle);}
.foot-mark{width:26px;height:auto;opacity:.8;}

/* ═══════════════════════════════════════════════════════════
   LAYER 11 — RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (min-width:600px){
  :root{--max-w:560px;--pad-h:28px;}
  .phase{gap:32px;padding:34px 0 48px;}
  .hero-copy{font-size:.88rem;}
  .co-txt{font-size:.56rem;}
  .marg{font-size:.5rem;}
}

@media (max-width:360px){
  :root{--pad-h:16px;}
  .lockup-brand{font-size:.86rem;}
  .head-tag{font-size:.48rem;letter-spacing:.2em;}
  .co-txt{font-size:.46rem;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}