/* ==========================================================================
   Amazon · Ofertas exclusivas — landing page
   Diseño base: 526 px de ancho (1 rem = 16 px a ese ancho).
   Todo el layout está en rem y la raíz escala con el viewport, por lo que
   la página se ve idéntica a cualquier ancho (móvil, tablet, escritorio).
   ========================================================================== */

/* ---------------------------------- fuentes ------------------------------- */
@font-face{font-family:Anton;src:url("../assets/fonts/anton-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../assets/fonts/inter-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("../assets/fonts/inter-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url("../assets/fonts/montserrat-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------------------------------- base ---------------------------------- */
:root{
  --ink:#0c1c2f;
  --navy:#04162b;
  --cream:#fdf3e1;
  --orange:#f2680f;
  --orange-2:#fb8a1c;
  --pink:#fc2952;
  --blue:#2e9ec3;
  --page-w:32.875rem;                 /* 526 px */
  --ff-display:Anton,"Arial Narrow",Impact,sans-serif;
  --ff-ui:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-text:Poppins,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-caps:Montserrat,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:min(16px,3.0418vw);      /* 16 px cuando el viewport mide 526 px */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  display:flex;
  justify-content:center;
  min-height:100vh;
  background:#ececec;
  color:var(--ink);
  font-family:var(--ff-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.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}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.page{
  position:relative;
  width:100%;
  max-width:var(--page-w);
  background:#fff;
  box-shadow:0 0 3rem rgba(0,0,0,.10);
  overflow:hidden;
}

/* ============================== franja superior =========================== */
.ad-slot{
  height:9.875rem;                    /* 158 px */
  padding:1.0625rem 0 0 1.1875rem;
  background:#000;
}
.ad-slot__tile{
  display:grid;
  place-items:center;
  width:10.125rem;                    /* 162 px */
  height:4.625rem;                    /*  74 px */
  background:#f9650d;
}
.ad-slot__tile img{width:6.6rem}

/* ================================== hero ================================== */
.hero{
  position:relative;
  height:25.06rem;                       /* 416 px */
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(85% 58% at 95% 100%, #f2760f 0%, rgba(242,118,15,0) 60%),
    radial-gradient(70% 48% at 68% 86%, #f99a3d 0%, rgba(249,154,61,0) 65%),
    radial-gradient(120% 65% at 0% 0%, #fefaf1 0%, rgba(254,250,241,0) 55%),
    linear-gradient(180deg,#fdf4e4 0%,#fdefda 40%,#fbe2bf 70%,#f8c78d 100%);
}

/* suelo / mesa */
.hero__floor{
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-3%;
  height:31%;
  z-index:0;
  transform:rotate(-1.8deg);
  background:linear-gradient(180deg,#fba043 0%,#f57c17 45%,#ee660a 100%);
  box-shadow:0 -.35rem 1rem rgba(219,110,10,.18);
}
.hero__stage{
  position:absolute;
  left:-8%;
  bottom:12%;
  width:112%;
  height:38%;
  z-index:1;
  transform:rotate(-2.4deg);
  border-radius:50% 50% 40% 40%;
  background:radial-gradient(60% 90% at 45% 60%,#fff6e6 0%,#fcedd2 55%,rgba(252,237,210,0) 78%);
}

/* logotipo */
.hero__logo{
  position:absolute;
  left:1.25rem;
  top:1.28rem;
  width:6.55rem;
  z-index:6;
}

/* titular */
.hero__title{
  position:absolute;
  left:1.625rem;
  top:4.2rem;
  z-index:6;
  margin:0;
  font-family:var(--ff-display);
  font-weight:400;
  color:#0d1b2e;
  letter-spacing:.005em;
  line-height:1;
  text-transform:uppercase;
}
.hero__title b{display:block;font-weight:400}
.hero__title-1{font-size:2.15rem;letter-spacing:.02em;line-height:1}
.hero__title-2{font-size:3rem;letter-spacing:.01em;margin-top:-.15rem;line-height:.98;transform:scaleX(1.3);transform-origin:left center}

/* lema naranja */
.hero__kicker{
  position:absolute;
  left:3.05rem;
  top:8.82rem;
  z-index:6;
  margin:0;
  display:flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--ff-display);
  font-size:1.9rem;
  line-height:1;
  letter-spacing:.015em;
  color:var(--orange);
  text-transform:uppercase;
}
.tick{position:relative;display:inline-block;width:.55rem;height:.9rem;flex:none}
.tick::before,.tick::after{
  content:"";
  position:absolute;
  left:0;
  width:.4rem;
  height:.11rem;
  border-radius:.06rem;
  background:var(--orange);
}
.tick::before{top:.14rem;transform:rotate(26deg)}
.tick::after{top:.44rem;transform:rotate(-26deg)}
.tick--r{transform:scaleX(-1)}

/* pastilla azul marino */
.hero__pill{
  position:absolute;
  left:3.5rem;
  top:10.79rem;
  z-index:6;
  width:18rem;
  margin:0;
  padding:.2rem .45rem .24rem;
  border-radius:1.4rem;
  border:.08rem solid #f0b25c;
  background:#071a30;
  box-shadow:0 .25rem .7rem rgba(3,17,32,.35),inset 0 0 0 .04rem rgba(255,255,255,.12);
  color:#fff;
  text-align:center;
  font-family:var(--ff-caps);
  font-weight:800;
  font-size:.9rem;
  line-height:1.22;
  letter-spacing:.035em;
  text-transform:uppercase;
}

/* cupón 20 € */
.ticket{
  position:absolute;
  left:1.05rem;
  top:15.35rem;
  z-index:3;
  width:19rem;
  height:5.2rem;
  transform:rotate(-6.5deg);
  filter:drop-shadow(0 1.1rem 1.1rem rgba(150,62,0,.30));
}
.ticket__paper{
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translate(-.12rem,.16rem) rotate(-1deg);
  border-radius:.6rem;
  background:linear-gradient(160deg,#fdf6e8 0%,#fbe8cd 100%);
  box-shadow:0 .6rem 1rem rgba(150,62,0,.18);
}
.ticket__inner{
  display:flex;
  width:100%;
  height:100%;
  padding:.34rem;
  border-radius:.55rem;
  background:linear-gradient(150deg,#fffdf8 0%,#fdf1dd 55%,#f8e2c2 100%);
}
.ticket__value{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.32rem;
  background:linear-gradient(150deg,#fb8a1c 0%,#f46c0e 55%,#ea5f05 100%);
  color:#fff;
  font-family:var(--ff-text);
  font-weight:700;
  font-size:6.9rem;
  line-height:.78;
  letter-spacing:-.04em;
  text-shadow:0 .08rem .18rem rgba(160,60,0,.18);
}
.ticket__cur{font-size:.62em;margin-left:-.02em;position:relative;top:-.02em}
.ticket__side{
  position:relative;
  flex:0 0 4.7rem;
  display:grid;
  place-items:center;
  border-left:.14rem dashed rgba(255,255,255,.95);
  color:#f06a0e;
  font-family:var(--ff-caps);
  font-weight:800;
  font-size:.6rem;
  line-height:1.34;
  letter-spacing:.02em;
  text-align:center;
  text-transform:uppercase;
  padding-left:.3rem;
}
.ticket__side span{display:block}
/* muescas del cupón */
.ticket__side::before,.ticket__side::after{
  content:"";
  position:absolute;
  left:-.42rem;
  width:.62rem;
  height:.62rem;
  border-radius:50%;
  background:#fdf6e9;
}
.ticket__side::before{top:-.62rem}
.ticket__side::after{bottom:-.62rem}

/* cinta naranja inferior */
.ribbon{
  position:absolute;
  left:50.8%;
  bottom:.12rem;
  z-index:4;
  width:20.9rem;
  padding:.34rem .9rem .42rem;
  transform:translateX(-50%) rotate(-1.6deg);
  background:linear-gradient(180deg,#fca14a 0%,#f6861f 42%,#ef6a0c 100%);
  clip-path:polygon(0 0,100% 0,99.2% 50%,100% 100%,0 100%,.8% 50%);
  box-shadow:0 .45rem 1rem rgba(190,86,0,.28);
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  font-family:var(--ff-text);
  font-weight:700;
  font-size:.86rem;
  line-height:1.24;
  letter-spacing:.012em;
}
.ribbon p{margin:0}
.ribbon__star{
  position:absolute;
  top:50%;
  width:1.05rem;
  height:1.05rem;
  transform:translateY(-50%);
}
.ribbon__star--l{left:.42rem}
.ribbon__star--r{right:.42rem}

/* ================================= móvil ================================== */
.phone{
  position:absolute;
  right:1.6rem;
  top:3rem;
  z-index:5;
  width:9.75rem;
  height:19.6rem;
  padding:.16rem;
  transform:rotate(6deg);
  border-radius:1.5rem;
  background:linear-gradient(128deg,#eff1f3 0%,#b3bac0 9%,#fbfcfd 20%,#c9cfd4 34%,#f7f8f9 48%,#a9b1b8 63%,#e9ecee 74%,#a2aab1 89%,#dfe3e6 100%);
  box-shadow:0 1.5rem 2.2rem rgba(122,58,0,.35),0 .2rem .4rem rgba(90,40,0,.2);
}
.phone__island{
  position:absolute;
  top:.55rem;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:2.7rem;
  height:.55rem;
  border-radius:999px;
  background:#050505;
}
.phone__screen{
  position:relative;
  height:100%;
  border-radius:1.34rem;
  overflow:hidden;
  background:#07192b;
  display:flex;
  flex-direction:column;
}
.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.34rem .6rem 0;
  color:#fff;
  font-family:var(--ff-ui);
  font-weight:600;
  font-size:.4rem;
  line-height:1;
}
.statusbar__icons{display:flex;align-items:center;gap:.15rem}
.statusbar__icons svg{display:block}

.app-logo{width:3.95rem;margin:.5rem auto .34rem}
.app-search{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 .42rem;
  height:1.32rem;
  border-radius:.1rem;
  background:#fff;
  color:#6f6f6f;
  font-family:var(--ff-ui);
  font-size:.44rem;
  overflow:hidden;
}
.app-search span{padding-left:.32rem}
.app-search__btn{
  display:grid;
  place-items:center;
  width:1.3rem;
  height:100%;
  background:#f9a11b;
}
.app-search__btn svg{width:.62rem;height:.62rem}
.app-welcome{
  margin:.45rem 0 0;
  color:#fff;
  text-align:center;
  font-family:var(--ff-ui);
  font-weight:700;
  font-size:.64rem;
  line-height:1.2;
  letter-spacing:-.015em;
}
.app-welcome__sub{
  margin:.16rem 0 0;
  color:#b7c3d1;
  text-align:center;
  font-family:var(--ff-ui);
  font-size:.52rem;
  line-height:1.32;
}
.app-cats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.08rem;
  margin-top:.44rem;
  padding:.42rem .18rem .32rem;
  background:#fff;
  border-radius:.12rem .12rem 0 0;
  text-align:center;
}
.cat svg{width:1.15rem;height:1.15rem;margin:0 auto}
.cat span{
  display:block;
  margin-top:.16rem;
  color:#2b2b2b;
  font-family:var(--ff-ui);
  font-size:.35rem;
  line-height:1.18;
  letter-spacing:-.01em;
}
.app-coupon{
  position:relative;
  margin:.42rem .42rem .4rem;
  padding:.6rem .28rem .4rem;
  border-radius:.24rem;
  border:.035rem solid #f1b276;
  background:#fdf6ea;
  text-align:center;
  font-family:var(--ff-ui);
}
.app-coupon__check{
  position:absolute;
  top:-.4rem;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:.82rem;
  height:.82rem;
  border-radius:50%;
  background:#45b649;
  box-shadow:0 0 0 .07rem rgba(255,255,255,.9);
}
.app-coupon__check svg{width:.5rem;height:.5rem}
.app-coupon__title{
  margin:.16rem 0 .06rem;
  color:#151515;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:-.01em;
}
.app-coupon__value{
  margin:0;
  color:#f2680f;
  font-weight:700;
  font-size:.55rem;
  line-height:1.28;
}
.app-coupon__note{
  margin:.14rem 0 0;
  color:#6a6a6a;
  font-size:.41rem;
  line-height:1.2;
}

/* ----------------------------- adornos del hero --------------------------- */
.deco{position:absolute;z-index:2;pointer-events:none}
.coin{width:2.3rem;height:2.3rem}
.coin--a{left:19.2rem;top:9.05rem;width:2rem;height:2rem;transform:rotate(-12deg);opacity:.9}
.coin--b{left:20.3rem;top:10.1rem;width:2.5rem;height:2.5rem;transform:rotate(10deg);z-index:4}
.coin--c{right:1.55rem;top:17.85rem;width:2.2rem;height:2.2rem;transform:rotate(18deg)}
.gift--a{left:-1.3rem;bottom:-.15rem;width:6.3rem;height:6.3rem;z-index:4;transform:rotate(-4deg)}
.gift--b{left:2.9rem;bottom:2.5rem;width:4.6rem;height:4.6rem;z-index:1;transform:rotate(6deg);opacity:.95}
.curl{left:-1.3rem;bottom:1.2rem;width:6.4rem;height:7.4rem;z-index:1}
.hero__arc{position:absolute;right:.6rem;top:1.1rem;width:3.4rem;z-index:0;opacity:.55}

/* ================================ pasos =================================== */
.steps{
  position:relative;
  background:linear-gradient(180deg,#f4892a 0%,#f1731a 100%);
  padding-bottom:.3rem;
}
.steps__card{
  display:flex;
  align-items:stretch;
  gap:.28rem;
  padding:.6rem .7rem .55rem;
  border-radius:1rem 1rem 0 0;
  background:linear-gradient(180deg,#fff4e3 0%,#fff0db 100%);
}
.step{flex:1 1 0;min-width:0}
.step__head{display:flex;align-items:center;gap:.26rem;margin-bottom:.42rem}
.step__num{
  flex:none;
  display:grid;
  place-items:center;
  width:1.05rem;
  height:1.05rem;
  border-radius:50%;
  background:linear-gradient(180deg,#fba13c,#ef6d10);
  color:#fff;
  font-family:var(--ff-caps);
  font-weight:800;
  font-size:.62rem;
  line-height:1;
  box-shadow:inset 0 0 0 .045rem rgba(255,255,255,.35);
}
.step__title{
  margin:0;
  color:#0b1b2c;
  font-family:var(--ff-caps);
  font-weight:800;
  font-size:.62rem;
  line-height:1.15;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.step__body{display:flex;align-items:flex-start;gap:.3rem}
.step__icon{flex:none;width:1.5rem;height:1.5rem}
.step__text{
  margin:0;
  color:#333;
  font-family:var(--ff-text);
  font-weight:500;
  font-size:.5rem;
  line-height:1.38;
}
.step__arrow{
  flex:none;
  align-self:center;
  width:0;
  height:0;
  margin:0 .12rem;
  border-left:.52rem solid #f4931f;
  border-top:.36rem solid transparent;
  border-bottom:.36rem solid transparent;
  filter:drop-shadow(.06rem 0 0 rgba(255,255,255,.35));
}

/* ============================== barra de confianza ======================== */
.trust{
  list-style:none;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.45rem;
  padding:.45rem .72rem .49rem;
  background:var(--navy);
  color:#fff;
}
.trust__item{
  display:flex;
  align-items:center;
  gap:.24rem;
  min-width:0;
  font-family:var(--ff-text);
  font-weight:500;
  font-size:.47rem;
  line-height:1.3;
}
.trust__item svg{flex:none;width:1rem;height:1rem}
.trust__item span{display:block;max-width:5.5rem}

/* ================================== CTA =================================== */
.cta{
  padding:2.35rem 0 0;
  background:linear-gradient(180deg,#000 0 5.5rem,#fff 5.5rem);
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:70.2%;
  margin:0 auto;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-family:var(--ff-ui);
  font-weight:700;
  text-align:center;
  letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.btn--primary{
  height:4.75rem;
  background:var(--pink);
  font-size:1.5rem;
  box-shadow:0 .3rem .9rem rgba(252,41,82,.28);
}
.btn--secondary{
  height:3.75rem;
  margin-top:.42rem;
  background:var(--blue);
  font-size:1.3rem;
  box-shadow:0 .25rem .8rem rgba(46,158,195,.25);
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(.06rem) scale(.994);filter:brightness(.97)}
.btn:focus-visible{outline:.15rem solid #0b57d0;outline-offset:.12rem}

/* ================================= cierre ================================= */
.outro{
  background:#fff;
  padding:7.65rem 1.4rem .2rem;
  text-align:center;
}
.outro h2{
  margin:0 auto;
  max-width:26.5rem;
  color:#2d2d2d;
  font-family:var(--ff-ui);
  font-weight:600;
  font-size:1.53rem;
  line-height:1.52;
  letter-spacing:-.012em;
}
.private{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:3.4rem 0 0;
  color:#2b2b2b;
  font-family:var(--ff-ui);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-.005em;
}
.private i{
  display:block;
  width:.34rem;
  height:.34rem;
  border-radius:50%;
  background:#e01f4d;
}

/* --------------------------------- motion --------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}