/* =========================
   XES Landing (styles.css)  ✅ CSS PRINCIPAL
   ========================= */

:root{
  --bg:#0b0b0b;
  --bg2:#101010;
  --white:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.12);
  --shadow:0 14px 40px rgba(0,0,0,.45);

  --yellow:#f2b300;
  --yellow2:#ffcf33;
  --orange:#ff6a00;
  --red:#ff2a2a;

  --max:1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--white);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* ---------- TOPBAR ---------- */
.xes-topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.80);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.xes-topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}
.xes-brand{display:flex;align-items:center;gap:10px}
.xes-brand__logo{height:24px;width:auto}

.xes-nav{
  display:flex;
  gap:16px;
  align-items:center;
  margin-left:auto;
  flex-wrap:wrap;
}
.xes-nav a{
  font-size:13px;
  color:rgba(255,255,255,.86);
  padding:6px 8px;
  border-radius:8px;
}
.xes-nav a:hover{background:rgba(255,255,255,.08)}
.xes-nav__blog{
  border-left:1px solid rgba(255,255,255,.15);
  padding-left:14px;
  margin-left:6px;
}

.xes-timer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:10px;
}
.xes-timer__label{
  font-size:12px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.xes-timer__value{
  font-size:20px;
  font-weight:900;
  color:var(--yellow);
  letter-spacing:.5px;
  white-space:nowrap;
}

.xes-topbar__line{
  height:2px;
  background:linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity:.9;
}

/* ---------- HERO ---------- */
.xes-hero{
  min-height:calc(100vh - 58px);
  position:relative;
  display:flex;
  align-items:center;
  background: var(--hero-bg) center/cover no-repeat;
}
.xes-hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 20% 40%, rgba(0,0,0,.30), rgba(0,0,0,.85)),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.85));
}
.xes-hero__shapes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  pointer-events:none;
}
.xes-hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding:40px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
}
.xes-hero__copy{max-width:680px}

.xes-hero__title{
  margin:0 0 20px 0;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:.92;
  font-size:64px;
}
.xes-hero__title .y{color:var(--yellow)}
.xes-hero__title .w{color:#fff}
.xes-hero__title--small{font-size:46px}

/* ✅ HERO media: botella grande + cartel PNG */
.xes-hero__media{
  position:relative;
  margin:14px 0 18px;
  min-height:340px;
}

.xes-hero__bottle{
  width: clamp(260px, 30vw, 460px);
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  position:relative;
  z-index:2;
}

/* ✅ Price tag PNG (triángulo) */
.xes-hero__price-tag{
  position:absolute;
  z-index:3;
  width: clamp(220px, 26vw, 420px);
  height:auto;
  left: 58%;
  top: 68%;
  transform: translate(-50%, -50%);
  pointer-events:none;
}

.xes-hero__price-tag--bottom{
  left: 60%;
  top: 70%;
}

/* bullets */
.xes-hero__bullets{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
  max-width:520px;
  margin-top:10px;
}
.xes-hero__bullets .b{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.85);
  font-size:14px;
}
.xes-hero__bullets .i{
  width:22px;height:22px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:12px;
  opacity:.9;
}

/* ---------- FORM CARD ---------- */
.xes-form-card{
  width:360px;
  background:linear-gradient(180deg, var(--yellow2), var(--yellow));
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:16px;
  color:#111;
}
.xes-form-card__title{
  font-weight:900;
  text-align:center;
  font-size:14px;
  line-height:1.25;
  margin-bottom:12px;
}
.xes-form input{
  width:100%;
  padding:12px 12px;
  margin:8px 0;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  outline:none;
  font-size:14px;
  background:#fff;
}
.xes-form input:focus{border-color: rgba(0,0,0,.35)}
.xes-btn{
  width:100%;
  padding:12px 14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg, var(--orange), var(--red));
  color:#fff;
  font-weight:1000;
  letter-spacing:.6px;
  cursor:pointer;
  margin-top:8px;
}
.xes-btn:hover{filter:brightness(1.02)}
.xes-btn--ghost{
  width:auto;
  display:inline-block;
  padding:12px 18px;
  background:transparent;
  border:2px solid rgba(255,255,255,.35);
  color:#fff;
}
.xes-btn--ghost:hover{background:rgba(255,255,255,.08)}
.xes-form-card__note{
  text-align:center;
  font-size:12px;
  margin-top:10px;
  opacity:.8;
}

/* ---------- BAR ---------- */
.xes-bar{
  background:#000;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.xes-bar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.xes-bar__title{
  font-weight:900;
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-style:italic;
  font-size:16px;
}
.xes-bar__items{display:flex;gap:18px;flex-wrap:wrap}
.xes-bar__item{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.85);
  font-size:14px;
}
.xes-bar__item .icon{
  width:26px;height:26px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
}

/* ---------- GENERAL HEADERS ---------- */
.xes-h2{
  margin:0 0 18px;
  text-align:center;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#111;
}

/* ---------- COMPARE ✅ (dos cards SIEMPRE) ---------- */
.xes-compare{
  background:linear-gradient(90deg, #f1a41a, #ffbf25);
  padding:44px 0;
}
.xes-compare__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.xes-compare__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}
.xes-card{
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  padding:18px;
}
.xes-card--white{background:#fff;color:#111}
.xes-card--yellow{background:#ffe28a;color:#111}

.xes-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.xes-card__brand{
  font-weight:1000;
  font-size:34px;
  color:#ff6a00;
}
.xes-card__mini{
  width:52px;height:52px;
  object-fit:contain;
}
.xes-card__title{
  font-weight:1000;
  font-size:22px;
  line-height:1.05;
}
.xes-card__pills{
  width:92px;height:70px;
  object-fit:cover;
  border-radius:10px;
}

.xes-list{margin:10px 0 0;padding-left:18px}
.xes-list li{margin:8px 0; line-height:1.25}
.xes-list--x{list-style:none;padding-left:0}
.xes-list--x li{
  display:flex;
  gap:10px;
  margin:10px 0;
}
.xes-list--x li::before{
  content:"✕";
  color:#ff2a2a;
  font-weight:1000;
}

/* ---------- DJ ---------- */
.xes-dj{
  position:relative;
  padding:52px 0;
  background:
    var(--dj-bg) center/cover no-repeat,
    radial-gradient(900px 400px at 70% 40%, rgba(160,0,255,.35), rgba(0,0,0,0)),
    #0a0a0a;
}
.xes-dj__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.30));
}
.xes-dj__inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:center;
}
.xes-dj__title{
  margin:0 0 10px;
  font-weight:1000;
  text-transform:uppercase;
  font-size:32px;
  line-height:1.05;
}
.xes-dj__quote{font-size:42px;color:var(--orange);margin:8px 0}
.xes-dj__text{color:rgba(255,255,255,.85);line-height:1.5;margin:0 0 12px}
.xes-dj__author{color:rgba(255,255,255,.85);margin-bottom:16px}
.xes-dj__media img{
  width:100%;
  border-radius:16px;
  box-shadow: var(--shadow);
}
.xes-dj__placeholder{
  padding:24px;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:16px;
  text-align:center;
  color:rgba(255,255,255,.7);
}

/* ---------- STRIP ---------- */
.xes-strip{
  background:linear-gradient(90deg, #f1a41a, #ffbf25);
  padding:34px 0;
}
.xes-strip__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.xes-strip__text{
  color:#111;
  max-width:760px;
}
.xes-strip__text p{margin:6px 0;line-height:1.35}
.xes-strip__text .accent{font-weight:900;color:#ff2a2a}
.xes-strip__img img{
  width:120px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

/* ---------- HOW ---------- */
.xes-how{
  background:#060606;
  padding:46px 0;
}
.xes-how__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.xes-how__title{
  margin:0 0 22px;
  text-align:center;
  font-weight:1000;
  letter-spacing:.6px;
}
.xes-how__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.xes-how__item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:18px;
  text-align:center;
  background:rgba(255,255,255,.03);
}
.xes-how__icon{font-size:32px;margin-bottom:10px}
.xes-how__text{color:rgba(255,255,255,.85);font-weight:800}

/* ---------- REVIEWS ---------- */
.xes-reviews{
  position:relative;
  padding:52px 0;
  background:
    var(--reviews-bg) center/cover no-repeat,
    radial-gradient(900px 400px at 70% 60%, rgba(160,0,255,.28), rgba(0,0,0,0)),
    #0a0a0a;
}
.xes-reviews__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.65));
}
.xes-reviews__inner{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.xes-reviews__title{
  margin:0 0 22px;
  text-align:center;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:26px;
}
.xes-reviews__title .y{color:var(--yellow)}
.xes-phones{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.xes-phones img{
  width:220px;
  height:auto;
  border-radius:18px;
  box-shadow: var(--shadow);
}

/* ---------- STEPS ---------- */
.xes-steps{
  background:linear-gradient(90deg, #f1a41a, #ffbf25);
  padding:44px 0;
}
.xes-steps__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
}
.xes-steps__title{
  margin:0 0 18px;
  text-align:center;
  color:#111;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.xes-steps__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.xes-step{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:14px;
  color:#111;
}
.xes-step .t{font-weight:1000;margin-bottom:6px}
.xes-step .d{font-size:13px;opacity:.9;line-height:1.25}

/* ---------- BOTTOM HERO ---------- */
.xes-hero--bottom{min-height:560px}

/* ---------- FOOTER ---------- */
.xes-footer{
  background:#000;
  border-top:1px solid rgba(255,255,255,.08);
}
.xes-footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px;
  text-align:center;
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.xes-footer__inner a{color:rgba(255,255,255,.85)}
.xes-footer__inner a:hover{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .xes-hero__inner{flex-direction:column;align-items:stretch}
  .xes-form-card{width:100%}
  .xes-hero__title{font-size:52px}

  .xes-compare__grid{grid-template-columns:1fr}
  .xes-dj__inner{grid-template-columns:1fr}
  .xes-how__grid{grid-template-columns:1fr}
  .xes-steps__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .xes-bar__inner{flex-direction:column;align-items:flex-start}

  .xes-hero__media{min-height:280px}
  .xes-hero__bottle{width: clamp(220px, 60vw, 360px)}
  .xes-hero__price-tag{
    width: clamp(200px, 60vw, 320px);
    left: 62%;
    top: 74%;
  }
}

@media (max-width: 520px){
  .xes-hero__title{font-size:40px}
  .xes-hero__bullets{grid-template-columns:1fr}
  .xes-steps__grid{grid-template-columns:1fr}
}