/* =========================================================
   OUTFIT CHECK — LANDING LIGHT
   Puerta de entrada: presentación, demo y visor.
   Fuentes locales servidas desde ./deck/fonts/.
   ========================================================= */

@font-face{
  font-family:'Inter';
  src:url('./deck/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('./deck/fonts/instrument-serif-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('./deck/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

:root{
  --paper:#F7F6F1;
  --paper-2:#F2F1EB;
  --ink:#0B2B2A;
  --teal:#007782;
  --teal-deep:#005B63;
  --teal-bright:#00B3A6;
  --mint:#DDF4EF;
  --coral:#FF6F5E;

  --line:rgba(11,43,42,.12);
  --line-soft:rgba(11,43,42,.07);
  --line-strong:rgba(11,43,42,.22);
  --muted:rgba(11,43,42,.58);
  --muted-2:rgba(11,43,42,.42);

  --font-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 18px 50px rgba(11,43,42,.08);
  --shadow-card:0 26px 60px rgba(11,43,42,.14),0 2px 6px rgba(11,43,42,.04);

  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p,h1,h2{margin:0}
::selection{background:var(--teal-bright);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* =========================================================
   FONDO ANIMADO — malla mint/peach + onda fina
   ========================================================= */
.background{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(1100px 780px at 82% -10%,rgba(221,244,239,.92),transparent 68%),
    radial-gradient(920px 720px at 2% 106%,rgba(255,230,216,.6),transparent 70%),
    radial-gradient(760px 580px at 48% 44%,rgba(255,255,255,.66),transparent 74%),
    linear-gradient(180deg,#F9F8F3 0%,var(--paper) 54%,var(--paper-2) 100%);
}
.background::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 46%,transparent 40%,rgba(247,246,241,.12) 76%,rgba(247,246,241,.5) 100%);
}
.background__blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(68px);
  opacity:.7;
  will-change:transform;
}
.background__blob--a{
  width:820px;
  height:820px;
  right:-230px;
  top:-320px;
  background:radial-gradient(circle at 50% 50%,rgba(0,179,166,.2),rgba(221,244,239,.06) 68%,transparent 72%);
  animation:blob-a 24s ease-in-out infinite alternate;
}
.background__blob--b{
  width:760px;
  height:760px;
  left:-320px;
  bottom:-400px;
  background:radial-gradient(circle at 50% 50%,rgba(255,177,146,.22),rgba(255,241,232,.02) 68%,transparent 72%);
  animation:blob-b 28s ease-in-out infinite alternate;
}
.background__blob--c{
  width:520px;
  height:520px;
  right:14%;
  top:48%;
  background:radial-gradient(circle at 50% 50%,rgba(0,119,130,.09),transparent 70%);
  animation:blob-c 22s ease-in-out infinite alternate;
}
.background__dots{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(11,43,42,.16) 1px,transparent 1px);
  background-size:36px 36px;
  opacity:.15;
  -webkit-mask-image:radial-gradient(ellipse 46% 54% at 75% 42%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 46% 54% at 75% 42%,#000 0%,transparent 72%);
}
.background__wave{
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-56px;
  width:112%;
  height:min(380px,38vh);
  opacity:.8;
  animation:wave-drift 28s ease-in-out infinite alternate;
}
.background__wave path{
  fill:none;
  stroke:rgba(0,119,130,.17);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

@keyframes blob-a{
  from{transform:translate3d(-28px,-14px,0) scale(1)}
  to{transform:translate3d(46px,36px,0) scale(1.08)}
}
@keyframes blob-b{
  from{transform:translate3d(18px,26px,0) scale(1.04)}
  to{transform:translate3d(-52px,-22px,0) scale(.96)}
}
@keyframes blob-c{
  from{transform:translate3d(-34px,-22px,0) scale(.98)}
  to{transform:translate3d(50px,28px,0) scale(1.12)}
}
@keyframes wave-drift{
  from{transform:translate3d(-20px,5px,0)}
  to{transform:translate3d(20px,-5px,0)}
}

/* =========================================================
   ESTRUCTURA
   ========================================================= */
.site{
  position:relative;
  z-index:1;
  width:min(1360px,100%);
  min-height:100svh;
  margin:0 auto;
  padding:0 clamp(22px,4.5vw,64px);
  display:flex;
  flex-direction:column;
}

.site-top{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:clamp(64px,8vh,84px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-weight:640;
  letter-spacing:-.03em;
  color:var(--ink);
}
.brand__mark{
  width:27px;
  height:27px;
  color:var(--teal);
  flex:0 0 auto;
}
.brand:hover .brand__mark{color:var(--teal-bright)}

.top-note{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:540;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
}
.top-note__dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--coral);
  flex:0 0 auto;
}

.hero{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  align-items:center;
  gap:clamp(16px,3vw,48px);
  padding:clamp(18px,3.4vh,40px) 0 clamp(26px,4.4vh,52px);
}

.hero__copy{
  position:relative;
  z-index:2;
  min-width:0;
}

/* Eyebrow */
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-size:10.5px;
  font-weight:560;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__eyebrow::before{
  content:"";
  width:clamp(26px,2.6vw,42px);
  height:1px;
  background:var(--coral);
  flex:0 0 auto;
}

/* Wordmark */
.wordmark{
  margin-top:clamp(22px,3vh,32px);
  font-weight:400;
  color:var(--ink);
}
.wordmark__outfit,
.wordmark__check{display:block}
.wordmark__outfit{
  font-size:clamp(84px,12.4vw,184px);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.062em;
  color:var(--ink);
}
.wordmark__check{
  margin-top:-.115em;
  margin-left:.075em;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(108px,16vw,238px);
  line-height:.74;
  letter-spacing:-.028em;
  color:var(--teal);
  white-space:nowrap;
  padding-bottom:.04em;
}
.wordmark__dot{
  display:inline-block;
  width:.055em;
  height:.055em;
  margin-left:.09em;
  border-radius:50%;
  background:var(--coral);
  vertical-align:baseline;
  transform:translateY(-.04em);
}

/* Tagline */
.tagline{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(20px,3vh,30px);
  font-size:clamp(17px,1.45vw,22px);
  letter-spacing:-.012em;
  color:var(--muted);
}
.tagline::before{
  content:"";
  width:clamp(32px,3.4vw,54px);
  height:1px;
  background:rgba(11,43,42,.24);
  flex:0 0 auto;
}
.tagline em{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:1.28em;
  letter-spacing:-.01em;
  color:var(--teal);
}

/* Acciones */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(28px,4.2vh,46px);
}
.actions__secondary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn--primary{
  height:60px;
  padding:0 8px 0 27px;
  gap:12px;
  background:var(--teal);
  color:#fff;
  font-size:15.5px;
  font-weight:560;
  letter-spacing:-.012em;
  box-shadow:0 18px 38px rgba(0,119,130,.23),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary .btn__arrow{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.btn--primary .btn__arrow svg{width:18px;height:18px}
.btn--primary:hover{
  background:var(--teal-deep);
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(0,119,130,.27),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--primary:hover .btn__arrow{transform:translateX(2px);background:rgba(255,255,255,.2)}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{
  height:52px;
  padding:0 19px;
  gap:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  color:rgba(11,43,42,.72);
  font-size:14px;
  font-weight:510;
  letter-spacing:-.005em;
}
.btn--ghost .btn__icon{width:14px;height:14px;opacity:.62;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.btn--ghost:hover{
  background:#fff;
  border-color:rgba(0,119,130,.38);
  color:var(--teal);
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}
.btn--ghost:hover .btn__icon{transform:translate(1px,-1px);opacity:1}

/* =========================================================
   VISUAL — halo, órbita, teléfono y tarjeta de talla
   ========================================================= */
.hero__visual{
  position:relative;
  min-height:clamp(470px,62vh,640px);
  display:grid;
  place-items:center;
}
.halo{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(430px,41vw,620px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#EDFBF7 0%,var(--mint) 56%,#D7F0EA 100%);
  box-shadow:inset 0 0 0 1px rgba(0,119,130,.05),0 40px 90px rgba(0,119,130,.07);
}
.orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(500px,49vw,730px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,119,130,.14);
  border-radius:50%;
}
.orbit::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px dashed rgba(0,119,130,.12);
  border-radius:50%;
}
.orbit::after{
  content:"";
  position:absolute;
  left:12%;
  top:15%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 7px rgba(255,111,94,.1);
}

.phone-tilt{
  position:relative;
  z-index:2;
  width:clamp(220px,18vw,292px);
  transform:rotate(6.4deg);
  transform-origin:60% 60%;
  animation:phone-bob 9s ease-in-out infinite;
}
.phone{
  position:relative;
  --phone-radius:clamp(34px,3.4vw,50px);
  width:100%;
  aspect-ratio:450 / 940;
  padding:9px;
  border-radius:var(--phone-radius);
  background:linear-gradient(145deg,#17413F 0%,#0B2B2A 34%,#071E1D 100%);
  box-shadow:
    0 52px 110px rgba(11,43,42,.24),
    0 18px 42px rgba(11,43,42,.14),
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 3px rgba(0,0,0,.18);
  transform:perspective(2200px) rotateY(-10deg) rotateX(2.5deg);
  transform-style:preserve-3d;
}
.phone::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:3;
  border:1px solid rgba(255,255,255,.1);
  border-radius:inherit;
  pointer-events:none;
}
.phone::after{
  content:"";
  position:absolute;
  right:-3px;
  top:23%;
  width:3px;
  height:9%;
  border-radius:0 3px 3px 0;
  background:#08201F;
  box-shadow:0 68px 0 #08201F;
}
.phone__screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:calc(var(--phone-radius) - 9px);
  background-color:#fff;
  background-image:url('./deck/assets/demo-shot.png');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.phone__glare{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 76%,rgba(255,255,255,.055) 100%);
  opacity:.6;
}

.fit-card{
  position:absolute;
  z-index:4;
  left:clamp(-56px,-2.4vw,-12px);
  bottom:clamp(18px,3.2vh,34px);
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border:1px solid rgba(11,43,42,.1);
  border-radius:16px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow-card);
  transform:rotate(-4.5deg);
  animation:card-bob 8.2s ease-in-out infinite reverse;
}
.fit-card__size{display:flex;flex-direction:column;gap:1px;min-width:32px}
.fit-card__label{
  font-size:8px;
  font-weight:560;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.fit-card__value{
  font-size:28px;
  font-weight:660;
  line-height:.9;
  letter-spacing:-.06em;
  color:var(--ink);
}
.fit-card__rule{
  width:1px;
  height:29px;
  background:var(--line);
  flex:0 0 auto;
}
.fit-card__verdict{display:flex;align-items:center;gap:6px}
.fit-card__check{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  flex:0 0 auto;
}
.fit-card__check svg{width:9px;height:9px}
.fit-card__verdict>span:last-child{
  font-size:8px;
  font-weight:560;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--teal);
  white-space:nowrap;
}

@keyframes phone-bob{
  0%,100%{transform:rotate(6.4deg) translateY(0)}
  50%{transform:rotate(6.4deg) translateY(-10px)}
}
@keyframes card-bob{
  0%,100%{transform:rotate(-4.5deg) translateY(0)}
  50%{transform:rotate(-4.5deg) translateY(-7px)}
}

/* =========================================================
   PIE
   ========================================================= */
.site-foot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(16px,2.4vh,24px) 0 clamp(18px,2.8vh,26px);
  border-top:1px solid var(--line-soft);
  font-size:9.5px;
  font-weight:520;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(11,43,42,.4);
}
.site-foot span:last-child{text-align:right}

/* =========================================================
   ENTRADA
   ========================================================= */
.hero__eyebrow{animation:rise .8s .05s var(--ease) both}
.wordmark{animation:rise .9s .1s var(--ease) both}
.tagline{animation:rise .9s .18s var(--ease) both}
.actions{animation:rise .9s .26s var(--ease) both}
.hero__visual{animation:visual-in 1.1s .18s var(--ease) both}

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes visual-in{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1020px){
  .hero{
    grid-template-columns:1fr;
    gap:8px;
    padding-top:clamp(20px,3vh,34px);
  }
  .hero__copy{max-width:760px}
  .hero__visual{
    min-height:clamp(440px,56vh,560px);
    margin-top:4px;
  }
  .phone-tilt{width:clamp(210px,30vw,248px)}
  .halo{width:clamp(400px,62vw,500px)}
  .orbit{width:clamp(460px,74vw,590px)}
  .fit-card{left:max(4px,calc(50% - 300px));bottom:clamp(22px,4vh,40px)}
}

@media (max-width:720px){
  .site{padding:0 20px}
  .site-top{height:64px}
  .top-note{display:none}
  .hero{padding-top:22px;padding-bottom:30px}
  .hero__eyebrow{font-size:9.5px;letter-spacing:.17em;gap:10px}
  .hero__eyebrow::before{width:24px}

  .wordmark{margin-top:22px}
  .wordmark__outfit{font-size:clamp(76px,20vw,112px)}
  .wordmark__check{font-size:clamp(96px,26vw,146px);margin-left:.04em}

  .tagline{
    margin-top:22px;
    font-size:16.5px;
    gap:11px;
    flex-wrap:wrap;
  }
  .tagline::before{width:28px}

  .actions{display:grid;grid-template-columns:1fr;margin-top:28px;gap:9px}
  .btn--primary{width:100%;justify-content:space-between;height:58px;padding-left:24px}
  .actions__secondary{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .btn--ghost{height:50px;padding:0 14px;font-size:13.5px}

  .hero__visual{min-height:440px;margin-top:6px}
  .halo{width:min(86vw,430px)}
  .orbit{display:none}
  .phone-tilt{width:min(54vw,218px)}
  .fit-card{
    left:max(0px,calc(50% - 188px));
    bottom:30px;
    transform:rotate(-4deg) scale(.94);
    transform-origin:left bottom;
    animation:none;
  }
  .phone-tilt{animation-duration:10s}

  .site-foot{flex-direction:column;align-items:flex-start;gap:7px;font-size:9px;padding-bottom:20px}
  .site-foot span:last-child{text-align:left}
}

@media (max-width:400px){
  .wordmark__outfit{font-size:72px}
  .wordmark__check{font-size:94px}
  .hero__visual{min-height:400px}
  .phone-tilt{width:200px}
  .fit-card{left:50%;margin-left:-96px;bottom:16px;transform:rotate(-4deg) scale(.88)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .background__blob,
  .background__wave,
  .phone-tilt,
  .fit-card,
  .hero__eyebrow,
  .wordmark,
  .tagline,
  .actions,
  .hero__visual{
    animation:none !important;
  }
  .btn,.btn__arrow,.btn__icon{transition:none}
}