/* ============================================================
   4. HERO
   ============================================================ */
.hero{padding-top:132px; padding-bottom:26px}
@media(max-width:860px){.hero{padding-top:150px}}
.hero__grid{display:grid; grid-template-columns:1.25fr .78fr; gap:34px; align-items:end}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr; gap:26px}}
.hero h1{margin:18px 0 16px}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--vivo-luz),var(--vivo)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:26px}
@media(max-width:480px){.hero__cta .btn{flex:1 1 100%}}

.chips{display:flex; flex-direction:column; gap:10px}
.chip{display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08)}
.chip__k{font-family:var(--mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--vivo); margin-bottom:3px}
.chip__v{font-size:.93rem; line-height:1.4}
.chip__v small{color:var(--muted); display:block; font-size:.81rem; margin-top:2px}
.chip svg{width:19px; height:19px; flex:0 0 auto; margin-top:3px; color:var(--vivo)}

.ticker{overflow:hidden; border-block:1px solid var(--line-soft); margin-top:38px; position:relative; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(242,172,94,.05), transparent)}
.ticker__track{display:flex; gap:38px; padding:12px 0; width:max-content; animation:slide 36s linear infinite}
.ticker span{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.ticker b{color:var(--vivo); font-weight:400}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   5. CARRUSELES Y TARJETAS
   ============================================================ */
.world__head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:26px; flex-wrap:wrap}
.world__head h2{max-width:20ch}
.world__head p{max-width:44ch; color:var(--muted); font-size:.94rem}

.rail{margin-top:34px}
.rail__bar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px}
.rail__title{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; min-width:0}
.rail__title span{font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.rail__nav{display:flex; gap:8px; flex:0 0 auto}
.arrow{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(242,172,94,.05); color:var(--oro); cursor:pointer; display:grid; place-items:center; transition:.3s var(--ease)}
.arrow:hover{background:linear-gradient(140deg,var(--oro-luz),var(--oro-med)); color:#1A0F04; border-color:transparent}
.arrow svg{width:16px; height:16px}
@media(max-width:640px){.rail__nav{display:none}}

.track{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px;
  scrollbar-width:none; scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 262px; scroll-snap-align:start; border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--vivo) 45%, transparent); box-shadow:0 26px 46px -28px #000}
@media(max-width:640px){.track{scroll-padding-left:4px} .card{flex:0 0 min(74vw,270px)}}

/* zona de imagen — tono suave del color del mundo */
.card__media{aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.card__media::after{content:''; position:absolute; inset:0; opacity:.35;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 10px, transparent 10px 20px)}
.card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3}
.card__media svg{width:56px; height:56px; position:relative; z-index:2; color:#FFF4E6; opacity:.85; filter:drop-shadow(0 5px 12px rgba(0,0,0,.55))}
.m1{background:linear-gradient(150deg, color-mix(in srgb,var(--vivo) 62%, #241708), #1A1108)}
.m2{background:linear-gradient(160deg, color-mix(in srgb,var(--oro) 55%, #241708), #17100A)}
.m3{background:linear-gradient(140deg, color-mix(in srgb,var(--vivo-luz) 48%, #2A1B0C), #150F09)}
.m4{background:linear-gradient(165deg, color-mix(in srgb,var(--vivo) 44%, #2C1C0D), #1C1209)}
.m5{background:linear-gradient(145deg, color-mix(in srgb,var(--oro-luz) 45%, #2A1A0B), #191007)}
.m6{background:linear-gradient(155deg, color-mix(in srgb,var(--vivo) 34%, #241708), #120C07)}

.tag{position:absolute; top:10px; left:10px; z-index:4; font-family:var(--mono); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(10,8,6,.82); border:1px solid rgba(255,255,255,.2); color:#FFF1DE; padding:5px 9px; border-radius:999px; backdrop-filter:blur(8px)}
.tag--hot{background:var(--vivo); color:#1A0F04; border-color:transparent; font-weight:500}

.card__body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:6px; flex:1}
.card__body h4{font-size:1rem; font-weight:600; letter-spacing:-.02em}
.card__body p{font-size:.84rem; color:var(--muted); line-height:1.45; flex:1}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.price{font-family:var(--mono); font-size:1rem; color:var(--oro); font-weight:500}
.price small{display:block; font-size:.61rem; color:var(--muted); letter-spacing:.09em; text-transform:uppercase}
.price s{color:var(--muted); font-size:.79rem; margin-right:6px}
.card__foot .btn{padding:9px 15px; font-size:.82rem; min-height:38px}

/* ============================================================
   6. PROMOS
   ============================================================ */
.promos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:26px}
@media(max-width:560px){.promos{grid-template-columns:1fr}}
.promo{padding:22px 19px; border-radius:var(--r-md); border:1px dashed color-mix(in srgb,var(--vivo) 40%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--vivo) 8%, transparent), transparent); transition:.4s var(--ease)}
.promo:hover{border-color:var(--vivo); background:color-mix(in srgb,var(--vivo) 12%, transparent)}
.promo__off{font-family:var(--display); font-size:2.4rem; font-weight:800; letter-spacing:-.05em; line-height:1;
  background:linear-gradient(100deg,var(--vivo-luz),var(--vivo)); -webkit-background-clip:text; background-clip:text; color:transparent}
.promo h4{margin:9px 0 6px; font-size:1rem; font-weight:600}
.promo p{font-size:.84rem; color:var(--muted)}
.promo__code{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:.71rem; letter-spacing:.13em;
  border:1px solid var(--line); padding:5px 11px; border-radius:6px; color:var(--oro-luz)}

/* ============================================================
   7. PEDIDOS / INFO
   ============================================================ */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media(max-width:900px){.duo{grid-template-columns:1fr; gap:38px}}
.apps{display:flex; flex-direction:column; gap:11px; margin-top:18px}
.app{display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  text-decoration:none; background:rgba(255,255,255,.035); transition:.35s var(--ease); min-height:var(--tap)}
.app:hover{border-color:var(--oro); background:rgba(242,172,94,.09)}
.app__logo{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--display); font-weight:800;
  font-size:1.02rem; flex:0 0 auto; border:1px solid rgba(242,172,94,.3); color:var(--oro-luz); background:linear-gradient(150deg, rgba(242,172,94,.16), rgba(10,8,6,.6))}
.app__t{flex:1; min-width:0}
.app__t strong{display:block; font-family:var(--display); font-size:.98rem; font-weight:600}
.app__t span{font-size:.8rem; color:var(--muted)}
.app__go{color:var(--oro); font-family:var(--mono)}

.info-list{display:flex; flex-direction:column; margin-top:16px}
.info-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.info-row:last-child{border-bottom:0}
.info-row dt{font-family:var(--mono); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); flex:0 0 104px; padding-top:3px}
.info-row dd{margin:0; font-size:.95rem; min-width:0}
.info-row dd a{color:var(--oro); text-decoration:none}
.info-row dd small{display:block; color:var(--muted); font-size:.81rem; margin-top:2px}
@media(max-width:420px){.info-row{flex-direction:column; gap:4px} .info-row dt{flex:none}}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin-top:24px}
.step{padding-top:18px; border-top:2px solid var(--vivo)}
.step__n{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--vivo)}
.step h4{margin:8px 0 6px; font-size:1rem; font-weight:600}
.step p{font-size:.85rem; color:var(--muted)}

/* ============================================================
   8. MAPA
   ============================================================ */
.mapa{margin-top:6px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); position:relative; background:#0B1626}
.mapa svg{display:block; width:100%; height:auto}
.mapa__pie{display:flex; align-items:center; gap:9px; padding:12px 15px; border-top:1px solid var(--line-soft);
  background:rgba(10,8,6,.7); font-size:.8rem; color:var(--muted)}
.mapa__pie i{width:9px; height:9px; border-radius:50%; background:#34D07F; box-shadow:0 0 0 3px rgba(52,208,127,.22); flex:0 0 auto}
@keyframes ping{0%{r:9px; opacity:.55} 100%{r:26px; opacity:0}}