:root{
  --bg0:#050203;
  --bg1:#0b0507;
  --card:#120608;
  --wine:#2b060a;        /* vinotinto */
  --red:#6b0b12;         /* rojo profundo */
  --red2:#8e101a;        /* rojo intenso */
  --border:rgba(255,255,255,.10);
  --gold:#e6b65b;
  --text:#f4e9d2;
  --muted:rgba(244,233,210,.78);
  --soft:rgba(244,233,210,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;

  /* WhatsApp */
  --wa:#25D366;         /* WhatsApp green */
  --wa-dark:#128C7E;    /* WhatsApp dark */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(142,16,26,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(230,182,91,.12), transparent 55%),
    radial-gradient(900px 520px at 70% 90%, rgba(107,11,18,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.global-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 700px at 50% 25%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(255,255,255,.03), transparent 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(255,255,255,.025), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.45));
  opacity:.9;
  mix-blend-mode: screen;
  filter: blur(0px);
}
.global-overlay::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.22;
  transform: rotate(-6deg);
  filter: blur(14px) contrast(120%);
  mix-blend-mode: overlay;
  animation: smoke 18s ease-in-out infinite alternate;
}
@keyframes smoke{
  from{ transform: translate3d(-2%, -1%, 0) rotate(-6deg) scale(1.02); }
  to{ transform: translate3d(2%, 1%, 0) rotate(-4deg) scale(1.04); }
}

/* Tipografía */
.h1,.h2,.h3{
  font-family: Cinzel, Inter, system-ui;
  letter-spacing:.2px;
  margin:0 0 12px;
}
.h1{ font-size: clamp(30px, 3.3vw, 46px); line-height:1.08; }
.h2{ font-size: clamp(24px, 2.5vw, 36px); line-height:1.12; }
.h3{ font-size: 18px; line-height:1.15; }

.p, .lead{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.6;
}
.lead{ font-size: 16.5px; color: rgba(244,233,210,.86); }

.kicker{
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  color: rgba(230,182,91,.95);
  margin: 0 0 10px;
}
.kicker--light{ color: rgba(244,233,210,.82); }
.kicker--hero{ color: rgba(230,182,91,.95); }

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(10,4,6,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}
.brand__mark{
  width: 14px; height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--gold), rgba(230,182,91,.2));
  box-shadow: 0 0 0 8px rgba(230,182,91,.06), 0 0 34px rgba(230,182,91,.20);
}
.brand__name{
  font-family: Cinzel, Inter, system-ui;
  font-weight: 700;
  letter-spacing:.5px;
}
.brand__tag{
  font-size: 12px;
  color: rgba(244,233,210,.70);
  margin-top: 2px;
}

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 10px 34px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  position: relative;
  z-index: 1;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0px) scale(.99); }

/* ✅ Primario: WhatsApp verde */
.btn--primary{
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  border-color: rgba(255,255,255,.18);
  color: #07110b;
  box-shadow: 0 18px 55px rgba(18,140,126,.25);
}

/* ✅ Secundarios: fondo rojo (premium) */
.btn--soft{
  background: linear-gradient(135deg, rgba(142,16,26,.95), rgba(107,11,18,.88));
  border-color: rgba(255,255,255,.14);
  color: rgba(244,233,210,.95);
}
.btn--ghost{
  background: rgba(107,11,18,.22);
  border-color: rgba(142,16,26,.45);
  color: rgba(244,233,210,.95);
}

.btn--block{ width:100%; }
.btn--lg{ padding: 14px 18px; font-size: 15px; }

/* Icono WhatsApp (SVG inline via CSS mask) */
.wa-icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.11 17.2c-.28-.14-1.66-.82-1.92-.91-.26-.1-.45-.14-.64.14-.19.28-.73.91-.9 1.1-.17.19-.33.21-.61.07-.28-.14-1.18-.43-2.24-1.38-.83-.74-1.39-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.12-.12.28-.33.42-.5.14-.17.19-.28.28-.47.09-.19.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.13-.23-.55-.46-.48-.64-.49h-.55c-.19 0-.5.07-.76.36-.26.28-1 1-1 2.44 0 1.44 1.02 2.84 1.16 3.04.14.19 2.01 3.06 4.87 4.29.68.29 1.21.46 1.62.59.68.22 1.3.19 1.79.12.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.26-.19-.54-.33z'/%3E%3Cpath d='M27.15 4.85A14.93 14.93 0 0 0 16.01 0C7.17 0 .02 7.15.02 15.99c0 2.82.73 5.57 2.12 7.99L0 32l8.24-2.16a15.9 15.9 0 0 0 7.77 1.98h.01c8.84 0 15.99-7.15 15.99-15.99 0-4.27-1.66-8.28-4.86-11zM16.02 29.2h-.01a13.2 13.2 0 0 1-6.73-1.85l-.48-.28-4.89 1.28 1.31-4.77-.31-.49a13.17 13.17 0 0 1-2.03-7.1c0-7.28 5.92-13.2 13.2-13.2 3.52 0 6.83 1.37 9.31 3.85a13.08 13.08 0 0 1 3.86 9.35c0 7.28-5.92 13.21-13.2 13.21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wa-icon--big{ width: 22px; height:22px; }

/* Secciones */
.section{
  position: relative;
  z-index: 1;
  padding: 74px 0;
}
.section--dark{ background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24)); }
.section--wine{ background: linear-gradient(180deg, rgba(43,6,10,.92), rgba(11,5,7,.88)); }
.section--deepred{ background: linear-gradient(180deg, rgba(107,11,18,.92), rgba(43,6,10,.92)); }

.section-head{
  max-width: 780px;
  margin: 0 0 26px;
}
.h2--light, .p--light{ color: rgba(244,233,210,.92); }
.p--light{ opacity:.95; }

/* Intro */
.section--intro{
  padding-top: 52px;
}
.intro__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items:start;
}
.intro__card{
  background: rgba(18,6,8,.75);
  border: 1px solid rgba(230,182,91,.16);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.intro__card-inner{
  padding: 18px 18px 18px;
}
.bullets{
  margin: 14px 0 18px;
  padding-left: 18px;
  color: rgba(244,233,210,.85);
  line-height:1.6;
}
.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 10px;
}
.trustline{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.pill{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(244,233,210,.08);
  border: 1px solid rgba(244,233,210,.12);
  color: rgba(244,233,210,.86);
}

/* Mini steps */
.mini-steps{
  display:grid;
  gap: 10px;
  margin: 14px 0 14px;
}
.mini-step{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.mini-step__n{
  width: 26px; height: 26px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 800;
  color: rgba(230,182,91,.95);
  background: rgba(230,182,91,.10);
  border: 1px solid rgba(230,182,91,.18);
}
.mini-step__t{ color: rgba(244,233,210,.84); font-size: 14px; }

/* Separadores */
.separator{
  position: relative;
  z-index: 2;
  height: 38px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.separator__line{
  width: min(var(--max), calc(100% - 40px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,182,91,.32), rgba(255,255,255,.08), rgba(230,182,91,.32), transparent);
  opacity:.9;
}
.separator__glow{
  position:absolute;
  width: 58%;
  height: 120px;
  background: radial-gradient(circle, rgba(230,182,91,.12), transparent 60%);
  filter: blur(10px);
  opacity:.9;
}
.separator--wine .separator__line{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), rgba(230,182,91,.26), rgba(255,255,255,.10), transparent);
}
.separator--red .separator__glow{
  background: radial-gradient(circle, rgba(244,233,210,.10), transparent 60%);
}

/* Hero full */
.hero{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  z-index: 1;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(800px 480px at 20% 20%, rgba(230,182,91,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 70%, rgba(142,16,26,.18), transparent 60%),
    url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  filter: contrast(108%) saturate(108%);
  transform: scale(1.02);
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)),
    radial-gradient(900px 520px at 50% 20%, rgba(0,0,0,.25), transparent 60%);
}
.hero__content{
  position: relative;
  padding: 84px 0 84px;
}
.hero__title{
  font-family: Cinzel, Inter, system-ui;
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.hero__subtitle{
  max-width: 760px;
  color: rgba(244,233,210,.86);
  line-height: 1.6;
  margin: 0 0 16px;
}
.hero__badges{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 900px;
}
.badge{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}
.badge__t{ font-weight: 800; color: rgba(230,182,91,.92); }
.badge__s{ font-size: 13px; color: rgba(244,233,210,.78); margin-top: 3px; }

/* Split layout */
.split{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 26px;
  align-items:center;
}
.split--reverse{
  grid-template-columns: 1.15fr 1fr;
}
.split--reverse .split__media{ order: 2; }
.split__media{ position:relative; }
.img-frame{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.img-frame--soft{
  filter: contrast(105%) saturate(104%);
}

.media-note{
  position:absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(230,182,91,.18);
  backdrop-filter: blur(8px);
}
.media-note__title{
  font-weight: 800;
  color: rgba(230,182,91,.95);
}
.media-note__text{
  color: rgba(244,233,210,.82);
  font-size: 13px;
  margin-top: 3px;
}

/* Feature grid */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}
.feature{
  background: rgba(244,233,210,.06);
  border: 1px solid rgba(244,233,210,.10);
  border-radius: 16px;
  padding: 12px 12px;
}
.feature__title{
  font-weight: 800;
  color: rgba(230,182,91,.92);
}
.feature__text{
  margin-top: 6px;
  color: rgba(244,233,210,.78);
  line-height:1.55;
  font-size: 13.5px;
}

/* Cards */
.cards{
  display:grid;
  gap: 14px;
}
.cards--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 46px rgba(0,0,0,.35);
  background: rgba(18,6,8,.55);
}
.card__img{
  width: 100%;
  height: 1020px;
  object-fit: fixed;
  filter: contrast(108%) saturate(105%);
}
.card__body{ padding: 14px 14px 16px; }
.card__title{
  margin:0 0 8px;
  font-family: Cinzel, Inter, system-ui;
  font-size: 18px;
}
.card__text{
  margin: 0 0 12px;
  color: rgba(244,233,210,.82);
  line-height: 1.6;
  font-size: 14px;
}
.card__meta{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(244,233,210,.70);
  opacity:.95;
}
.card--wine{
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.22)), rgba(43,6,10,.72);
  border-color: rgba(244,233,210,.12);
}
.card--darkglass{
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.28)), rgba(107,11,18,.25);
  border-color: rgba(230,182,91,.16);
}

.center-actions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

/* Callout */
.callout{
  margin: 16px 0 14px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(230,182,91,.18);
}
.callout__title{
  font-weight: 900;
  color: rgba(230,182,91,.95);
  margin-bottom: 8px;
}
.callout__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(244,233,210,.84);
  line-height:1.6;
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.gallery__item{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  background: rgba(0,0,0,.2);
}
.gallery__item img{
  width:100%;
  height: 220px;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease;
  filter: contrast(108%) saturate(108%);
}
.gallery__item:hover img{
  transform: scale(1.03);
  filter: brightness(1.04) contrast(108%) saturate(112%);
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.faq{
  border-radius: 18px;
  background: rgba(244,233,210,.06);
  border: 1px solid rgba(244,233,210,.12);
  padding: 14px 14px;
}
.faq__q{
  margin:0 0 8px;
  font-family: Cinzel, Inter, system-ui;
  font-size: 16px;
  color: rgba(230,182,91,.95);
}
.faq__a{
  margin:0;
  color: rgba(244,233,210,.82);
  line-height: 1.65;
  font-size: 14px;
}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 22px;
  align-items:center;
}
.contact__media{ position:relative; }
.contact__badge{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(230,182,91,.18);
  backdrop-filter: blur(8px);
}
.contact__badge-t{ font-weight: 900; color: rgba(230,182,91,.95); }
.contact__badge-s{ font-size: 13px; color: rgba(244,233,210,.82); margin-top: 3px; }

.contact__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(244,233,210,.70);
}
.note--light{ color: rgba(244,233,210,.86); }

/* Footer */
.footer{
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.footer__brand{
  font-family: Cinzel, Inter, system-ui;
  font-weight: 800;
}
.footer__muted{
  font-size: 12px;
  color: rgba(244,233,210,.70);
  margin-top: 3px;
}

/* ✅ WhatsApp flotante verde */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration:none;

  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  border: 1px solid rgba(255,255,255,.20);
  color: #07110b;
  box-shadow: 0 18px 50px rgba(18,140,126,.28);
}
.wa-float__text{
  font-weight: 900;
  letter-spacing: .2px;
}

/* Responsive */
@media (max-width: 980px){
  .intro__grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .split--reverse .split__media{ order: 0; }
  .cards--3{ grid-template-columns: 1fr; }
  .cards--4{ grid-template-columns: 1fr; }
  .hero__badges{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .topbar__inner{ flex-direction: column; align-items: flex-start; }
  .wa-float{ right: 12px; bottom: 12px; }
  .gallery{ grid-template-columns: 1fr; }
}