/* ============================================================
   RAVONTI — Hoja de estilos
   Paleta: negro tinta, gris Apple, blanco roto y oro apagado.

   Estructura del sitio:
     index.html        → la tienda entera: hero con las dos fichas
                         grandes y rejilla de proveedores por nicho
     gracias.html      → confirmación tras el pago
     terminos · privacidad · aviso-legal → textos legales
   ============================================================ */

:root{
  /* Superficies */
  --bg:            #ffffff;
  --bg-alt:        #f5f5f7;
  --bg-dark:       #05080c;
  --bg-dark-2:     #0b1119;

  /* Tinta */
  --ink:           #101114;
  --ink-soft:      #6b6f76;
  --ink-light:     rgba(255,255,255,.72);

  /* Acentos */
  --gold:          #b08d57;
  --gold-hi:       #e6cd9b;
  --gold-lo:       #8a6b3c;

  /* Líneas */
  --line:          rgba(16,17,20,.10);
  --line-dark:     rgba(255,255,255,.12);

  /* Sistema */
  --radius:        22px;
  --radius-lg:     30px;
  --shadow:        0 1px 2px rgba(16,17,20,.05), 0 18px 50px -24px rgba(16,17,20,.28);
  --shadow-hi:     0 1px 2px rgba(16,17,20,.05), 0 34px 70px -30px rgba(16,17,20,.34);
  --shadow-lg:     0 40px 90px -40px rgba(0,0,0,.55);
  --ease:          cubic-bezier(.22,.68,.24,1);

  --font: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Tipografía exclusiva del logotipo. Alternativas que encajan igual
     de bien: "Marcellus", "Playfair Display", "Cormorant Garamond".
     Si cambias esta línea, cambia también el enlace de Google Fonts
     que hay en el <head> de las siete páginas. */
  --font-brand: "Cinzel", Georgia, "Times New Roman", serif;

  /* Oro luminoso, solo para la marquesina de oferta.
     El resto de la web sigue con el oro apagado de arriba. */
  --gold-bright:   #c79320;
  --gold-flash:    #ffeeae;

  /* Altura de la marquesina fija superior */
  --topbar-h: 44px;
}

/* Páginas sin marquesina (gracias.html) */
body.no-marquee{ --topbar-h: 0px; }

/* ─────────────────────────  BASE  ───────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:118px;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold-hi); color:#241a08; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}

/* ──────────────────────  LAYOUT  ─────────────────────── */

.container{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,28px);
}
.container--narrow{ max-width:760px; }

.section{ padding-block:clamp(76px,9.5vw,132px); }
.section--alt{ background:var(--bg-alt); }
.section--dark{ background:var(--bg-dark-2); color:#fff; }
.section--dark .h2{ color:#fff; }

.section__head{
  max-width:660px;
  margin:0 auto clamp(42px,6vw,68px);
  text-align:center;
}
.section__head .lead{ margin-bottom:0; }

.grid{ display:grid; gap:clamp(18px,2.4vw,26px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

@media (max-width:900px){
  .grid--2,.grid--3{ grid-template-columns:1fr; }
}

/* ────────────────────  TIPOGRAFÍA  ───────────────────── */

.h1{
  margin:0 0 22px;
  font-size:clamp(2.4rem,6vw,4.4rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.035em;
}
.h2{
  margin:0 0 18px;
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:640;
  line-height:1.1;
  letter-spacing:-.03em;
}
.h3{
  margin:0 0 10px;
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:-.015em;
}

.lead{
  margin:0 0 32px;
  font-size:clamp(1.05rem,1.5vw,1.26rem);
  line-height:1.55;
  font-weight:400;
  color:var(--ink-soft);
  letter-spacing:-.01em;
}
.lead--light{ color:var(--ink-light); }

.eyebrow{
  margin:0 0 18px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-hi);
}
.eyebrow--dark{ color:var(--gold-lo); }

.grad{
  background:linear-gradient(100deg,#fff 8%,var(--gold-hi) 46%,#fff 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.microcopy{
  margin:14px 0 0;
  font-size:.82rem;
  color:var(--ink-soft);
}
.microcopy--light{ color:rgba(255,255,255,.5); }

/* ────────────────────────  NAV  ──────────────────────── */

.nav{
  position:fixed;
  top:var(--topbar-h);
  left:0; right:0;
  z-index:100;
  background:rgba(5,8,12,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(255,255,255,.78);
  border-bottom-color:var(--line);
}

/* Tres columnas: enlaces · marca centrada · carrito */
.nav__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  height:56px;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,28px);
}

.nav__links{
  display:flex;
  gap:clamp(14px,2.2vw,26px);
  grid-column:1;
  justify-self:start;
  font-size:.88rem;
}
.nav__links a{
  color:rgba(255,255,255,.78);
  transition:color .25s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a[aria-current="page"]{ color:var(--gold-hi); }
.nav.is-scrolled .nav__links a{ color:var(--ink-soft); }
.nav.is-scrolled .nav__links a:hover{ color:var(--ink); }
.nav.is-scrolled .nav__links a[aria-current="page"]{ color:var(--gold-lo); }

.nav__brand{
  display:flex;
  align-items:center;
  gap:11px;
  grid-column:2;          /* siempre en el centro, aunque falten los lados */
  color:#fff;
  transition:color .4s var(--ease);
}
.nav.is-scrolled .nav__brand{ color:var(--ink); }

/* Logotipo: serif clásica con tracking amplio */
.nav__name,
.footer__brand span{
  font-family:var(--font-brand);
  font-size:1.04rem;
  font-weight:600;
  letter-spacing:.17em;
  line-height:1;
  padding-top:.06em;      /* compensa la altura de las mayúsculas serif */
}

.nav__mark{
  flex:none;
  width:28px; height:28px;
  object-fit:contain;
}

/* Botón de carrito */
.nav__cart{
  position:relative;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  grid-column:3;
  justify-self:end;
  border-radius:50%;
  color:#fff;
  transition:background .3s var(--ease), color .4s var(--ease);
}
.nav__cart svg{ width:21px; height:21px; }
.nav__cart:hover{ background:rgba(255,255,255,.12); }
.nav.is-scrolled .nav__cart{ color:var(--ink); }
.nav.is-scrolled .nav__cart:hover{ background:rgba(16,17,20,.07); }

.nav__cart b{
  position:absolute;
  top:2px; right:1px;
  min-width:16px;
  padding:0 4px;
  border-radius:980px;
  font-size:.62rem;
  font-weight:700;
  line-height:16px;
  text-align:center;
  color:#231907;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold));
}
.nav__cart b[hidden]{ display:none; }
.nav__cart b.is-bump{ animation:bump .45s var(--ease); }

@keyframes bump{
  0%{   transform:scale(1); }
  35%{  transform:scale(1.45); }
  100%{ transform:scale(1); }
}

/* ────────────────  PANEL DE PRODUCTOS  ───────────────── */

.drawer[hidden]{ display:none; }
.drawer{ position:fixed; inset:0; z-index:200; }

.drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,8,12,.5);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.drawer.is-open .drawer__backdrop{ opacity:1; }

.drawer__panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(420px,100%);
  display:flex;
  flex-direction:column;
  background:var(--bg);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .45s var(--ease);
}
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--line);
}
.drawer__head h2{
  margin:0;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.drawer__head h2 span{ color:var(--ink-soft); font-weight:400; }
.drawer__close{
  display:grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.drawer__close svg{ width:16px; height:16px; }
.drawer__close:hover{ background:var(--bg-alt); color:var(--ink); }

.drawer__list{
  flex:1;
  overflow-y:auto;
  padding:8px 24px 20px;
}
.drawer__row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.drawer__row:last-child{ border-bottom:0; }
.drawer__info{ flex:1; min-width:0; }
.drawer__info h3{
  margin:0 0 3px;
  font-size:.94rem;
  font-weight:500;
  letter-spacing:-.012em;
}
.drawer__info p{ margin:0 0 11px; font-size:.82rem; color:var(--ink-soft); }

/* Selector de cantidad */
.qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:980px;
  overflow:hidden;
}
.qty button{
  width:30px; height:28px;
  font-size:1rem;
  line-height:1;
  color:var(--ink-soft);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.qty button:hover{ background:var(--bg-alt); color:var(--ink); }
.qty span{
  min-width:26px;
  text-align:center;
  font-size:.88rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.drawer__line{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:none;
}
.drawer__line b{ font-size:1rem; font-weight:650; letter-spacing:-.02em; }
.drawer__del{
  font-size:.76rem;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s var(--ease);
}
.drawer__del:hover{ color:#b4322f; }

/* Carrito vacío */
.drawer__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:64px 20px;
  text-align:center;
}
.drawer__empty svg{ width:38px; height:38px; margin-bottom:8px; color:rgba(16,17,20,.2); }
.drawer__empty p{ margin:0; font-size:1rem; font-weight:500; }
.drawer__empty span{ font-size:.86rem; color:var(--ink-soft); }

/* Recomendación de lo que le falta al carrito */
.crossell{
  flex:none;
  margin:0 24px 18px;
  padding:20px;
  border-radius:var(--radius);
  background:linear-gradient(155deg,rgba(230,205,155,.26),rgba(176,141,87,.09));
  border:1px solid rgba(176,141,87,.34);
}
.crossell__tag{
  margin:0 0 8px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-lo);
}
.crossell h3{
  margin:0 0 8px;
  font-size:1.06rem;
  font-weight:640;
  letter-spacing:-.022em;
  line-height:1.25;
}
.crossell p{
  margin:0 0 16px;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-soft);
}

@media (max-width:560px){
  .crossell{ margin-inline:20px; padding:18px; }
  .crossell .btn{ padding:14px 20px; }
}

.drawer__foot{
  padding:18px 24px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.drawer__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}
.drawer__total span{ font-size:.9rem; color:var(--ink-soft); }
.drawer__total b{ font-size:1.5rem; font-weight:650; letter-spacing:-.03em; }
.drawer__note{
  margin:11px 0 0;
  text-align:center;
  font-size:.76rem;
  color:var(--ink-soft);
}

/* ────────────────────  MARQUESINA  ───────────────────── */

.marquee{
  position:fixed;
  top:0; left:0; right:0;
  z-index:101;
  display:flex;
  align-items:center;
  height:var(--topbar-h);
  overflow:hidden;
  color:#1a1206;
  background:linear-gradient(90deg,
    var(--gold-bright) 0%,
    #f3ce62 20%,
    var(--gold-flash) 50%,
    #f3ce62 80%,
    var(--gold-bright) 100%);
  border-bottom:1px solid rgba(0,0,0,.18);
  box-shadow:0 2px 14px -6px rgba(199,147,32,.75);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  user-select:none;
}
.marquee__track{
  display:flex;
  flex:none;
  white-space:nowrap;
  animation:marquee 38s linear infinite;
}
.marquee__group{
  display:flex;
  align-items:center;
  flex:none;
}
.marquee__group span{ padding:0 clamp(18px,3vw,32px); }
.marquee__group i{
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(26,18,6,.5);
}
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,0,0); }
}
@media (max-width:640px){ :root{ --topbar-h:40px; } .marquee{ font-size:.75rem; letter-spacing:.1em; } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* Segunda marquesina, dentro del flujo de la página */
.marquee--inline{
  position:static;
  height:auto;
  padding:15px 0;
  border-top:1px solid rgba(0,0,0,.18);
  box-shadow:0 0 22px -8px rgba(199,147,32,.6);
}
.marquee--inline .marquee__track{ animation-direction:reverse; }

/* ─────────────────────  CONTADOR  ────────────────────── */

.countdown{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px 26px 22px;
  border-radius:var(--radius);
  background:var(--bg);
  border:1px solid rgba(176,141,87,.3);
  box-shadow:var(--shadow);
}
.countdown__label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-lo);
}
.countdown__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#e5484d;
  box-shadow:0 0 0 0 rgba(229,72,77,.6);
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%{   box-shadow:0 0 0 0 rgba(229,72,77,.55); }
  70%{  box-shadow:0 0 0 9px rgba(229,72,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,72,77,0); }
}
.countdown__boxes{ display:flex; align-items:flex-start; gap:8px; }
.countdown__box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:60px;
  padding:11px 8px 9px;
  border-radius:13px;
  background:var(--ink);
}
.countdown__box b{
  font-size:1.65rem;
  font-weight:650;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.countdown__box span{
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.countdown__sep{
  padding-top:12px;
  font-size:1.3rem;
  font-weight:600;
  color:rgba(16,17,20,.22);
}
@media (max-width:480px){
  .countdown{ width:100%; padding:18px 14px 20px; }
  .countdown__box{ min-width:0; flex:1; }
  .countdown__box b{ font-size:1.4rem; }
  .countdown__sep{ display:none; }
}

/* ──────────────  FICHAS DE PRODUCTO (tienda)  ─────────── */

.offtag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px 7px 11px;
  border-radius:980px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  color:#fff;
  background:linear-gradient(140deg,#f4534a 0%,#d92c26 46%,#a81b18 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:
    0 8px 20px -7px rgba(217,44,38,.9),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* Etiqueta de precio delante del porcentaje */
.offtag::before{
  content:"";
  flex:none;
  width:13px; height:13px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.9 1.6H20.4a2 2 0 0 1 2 2v8.5a2 2 0 0 1-.6 1.4l-8.5 8.5a2 2 0 0 1-2.8 0l-8.5-8.5a2 2 0 0 1 0-2.8l8.5-8.5a2 2 0 0 1 1.4-.6Zm5.6 3.6a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11.9 1.6H20.4a2 2 0 0 1 2 2v8.5a2 2 0 0 1-.6 1.4l-8.5 8.5a2 2 0 0 1-2.8 0l-8.5-8.5a2 2 0 0 1 0-2.8l8.5-8.5a2 2 0 0 1 1.4-.6Zm5.6 3.6a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Al pasar por encima de la ficha, la etiqueta crece un poco */
.buycard:hover .offtag,
.tile:hover .offtag{
  transform:scale(1.07);
  box-shadow:
    0 12px 26px -7px rgba(217,44,38,1),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Fichas pequeñas por categoría */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,22px);
}
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }

/* Con 7 fichas la última fila deja una suelta: se centra en vez de
   quedarse descolgada a la izquierda. */
@media (min-width:901px){
  .tiles > .tile:last-child:nth-child(3n+1){ grid-column:2; }
}
@media (min-width:561px) and (max-width:900px){
  .tiles > .tile:last-child:nth-child(2n+1){
    grid-column:1 / -1;
    max-width:calc(50% - clamp(8px,1vw,11px));
    margin-inline:auto;
  }
}

.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:24px 22px 22px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover{ transform:translateY(-4px); border-color:rgba(176,141,87,.4); box-shadow:var(--shadow-hi); }

/* La ilustración se sale del padding de la ficha y ocupa todo el ancho */
.tile__media{
  position:relative;
  margin:-24px -22px 18px;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#06090d;
}
.tile__media img{ width:100%; height:100%; object-fit:cover; }

.tile__media .offtag{
  position:absolute;
  left:14px; bottom:14px;
  font-size:.78rem;
  padding:6px 13px 6px 10px;
}
.tile__media .offtag::before{ width:12px; height:12px; }
/* Títulos en mayúsculas: tracking positivo para que respiren */
.tile h3{ margin:0 0 5px; font-size:.98rem; font-weight:700; letter-spacing:.015em; line-height:1.25; }
.tile__meta{ margin:0 0 20px; font-size:.85rem; color:var(--ink-soft); }
.tile__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.tile__prices{ display:flex; flex-direction:column; line-height:1.25; }
.tile__prices s{ font-size:.78rem; color:var(--ink-soft); }
.tile__prices b{ font-size:1.32rem; font-weight:650; letter-spacing:-.03em; }

/* Fila de garantías */
.assure{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  padding-top:clamp(30px,4vw,44px);
  margin-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line);
}
.assure div{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-soft); }
.assure svg{ flex:none; width:18px; height:18px; color:var(--gold-lo); }
@media (max-width:820px){ .assure{ grid-template-columns:repeat(2,1fr); row-gap:18px; } }
@media (max-width:440px){ .assure{ grid-template-columns:1fr; } }

/* ──────────────────────  BOTONES  ────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 30px;
  border-radius:980px;
  font-size:.97rem;
  font-weight:500;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .3s var(--ease), background .3s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); opacity:.85; }

.btn--sm{ padding:8px 18px; font-size:.85rem; }
.btn--lg{ padding:17px 40px; font-size:1.05rem; }
.btn--block{ display:flex; width:100%; }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; box-shadow:0 12px 30px -14px rgba(0,0,0,.6); }

.btn--gold{
  color:#231907;
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 58%,var(--gold-lo) 100%);
  box-shadow:0 10px 30px -14px rgba(176,141,87,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover{ box-shadow:0 16px 40px -14px rgba(176,141,87,.95), inset 0 1px 0 rgba(255,255,255,.5); }

.btn--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.09); }

.btn--line{
  color:var(--ink);
  border:1px solid var(--line);
  background:var(--bg);
}
.btn--line:hover{ border-color:rgba(16,17,20,.28); }

.btn--white{
  color:var(--ink);
  background:#fff;
  box-shadow:0 10px 30px -16px rgba(0,0,0,.8);
}
.btn--white:hover{ background:#f2f2f4; box-shadow:0 16px 40px -16px rgba(0,0,0,.9); }

/* Secundario dorado: para navegar, no para comprar */
.btn--soft{
  color:var(--gold-lo);
  background:rgba(230,205,155,.16);
  border:1px solid rgba(176,141,87,.36);
}
.btn--soft:hover{
  background:rgba(230,205,155,.28);
  border-color:rgba(176,141,87,.6);
  color:#6f5228;
}

/* Precio dentro del propio botón */
.btn__price{
  padding-left:10px;
  margin-left:2px;
  border-left:1px solid currentColor;
  opacity:.55;
  font-weight:500;
}

/* ─────────────────────────  HERO  ─────────────────────── */

.hero{
  position:relative;
  padding:clamp(132px,16vw,196px) 0 clamp(76px,8.5vw,112px);
  background:var(--bg-dark);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero--short{ padding-bottom:clamp(62px,7vw,90px); }

.hero__glow{
  position:absolute;
  inset:-30% -10% auto -10%;
  height:120%;
  z-index:-1;
  background:
    radial-gradient(58% 46% at 50% 8%,  rgba(176,141,87,.30) 0%, rgba(176,141,87,0) 62%),
    radial-gradient(46% 40% at 82% 62%, rgba(90,120,160,.20) 0%, rgba(90,120,160,0) 65%),
    radial-gradient(50% 38% at 12% 78%, rgba(230,205,155,.10) 0%, rgba(230,205,155,0) 68%);
  filter:blur(6px);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:180px;
  z-index:-1;
  background:linear-gradient(to bottom,rgba(5,8,12,0),var(--bg-dark));
}

.hero__inner{ text-align:center; }
.hero .lead{ max-width:620px; margin-inline:auto; }

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:clamp(52px,7vw,78px);
}
.hero__actions--tight{ margin-bottom:clamp(38px,5vw,56px); }

.hero__countdown{ display:flex; justify-content:center; }

/* Salto a la rejilla de proveedores sueltos */
.hero__jump{
  margin-top:clamp(16px,2vw,22px);
  padding:12px 24px;
  font-size:.93rem;
}
.hero__jump svg{ transition:transform .35s var(--ease); }
.hero__jump:hover svg{ transform:translateY(2px); }

/* ─────────  HERO EN MODO TIENDA: producto · texto · producto  ───────── */

/* El alto se ajusta para que la ficha entera quepa sin cortarse
   en pantallas de portátil (~720 px de viewport útil). */
.hero--shop{ padding-top:clamp(110px,9vw,128px); padding-bottom:clamp(50px,5.5vw,66px); }

/* Variante clara de la portada */
.hero--light{
  color:var(--ink);
  background:linear-gradient(180deg,#ffffff 0%,#fafafb 55%,#f4f4f7 100%);
}
.hero--light::after{ display:none; }
.hero--light .hero__glow{
  inset:0;
  height:100%;
  filter:none;
  background:
    radial-gradient(48% 40% at 50% -8%, rgba(176,141,87,.17) 0%, rgba(176,141,87,0) 64%),
    radial-gradient(40% 44% at 8% 82%, rgba(176,141,87,.09) 0%, rgba(176,141,87,0) 68%),
    radial-gradient(38% 42% at 94% 74%, rgba(96,120,152,.10) 0%, rgba(96,120,152,0) 70%);
}
.hero--light .lead{ color:var(--ink-soft); }

/* Degradado dorado legible sobre fondo claro */
.grad--ink{
  background:linear-gradient(100deg,#7a5d30 0%,#c3a066 44%,#8a6b3c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(22px,2.8vw,40px);
  align-items:center;
}
.hero__center{ text-align:center; }
.hero__center .lead{ max-width:none; margin-bottom:clamp(24px,3vw,32px); }

/* Escritorio: fichas a los lados ocupando dos filas, y en la columna
   central el texto arriba con el botón justo debajo. */
@media (min-width:1081px){
  .hero__grid{ grid-template-rows:auto auto; }
  .buycard--curso{ grid-column:1; grid-row:1 / span 2; align-self:center; }
  .hero__center { grid-column:2; grid-row:1; }
  .hero__jump   { grid-column:2; grid-row:2; justify-self:center; }
  .buycard--pack{ grid-column:3; grid-row:1 / span 2; align-self:center; }
}

.hero--shop .h1{
  font-size:clamp(2rem,3.4vw,3.1rem);
  margin-bottom:14px;
}
.hero--shop .lead{ margin-bottom:clamp(20px,2.4vw,26px); }

/* Pantallas bajas (portátiles): se comprime aún más para que
   la ficha entera siga entrando sin scroll. */
@media (min-width:1081px) and (max-height:720px){
  .hero--shop{ padding-top:108px; padding-bottom:42px; }
  .hero--shop .h1{ font-size:clamp(1.8rem,2.8vw,2.5rem); margin-bottom:11px; }
  .hero--shop .lead{ font-size:1rem; margin-bottom:20px; }
  .buycard__media{ aspect-ratio:2/1; }
  .countdown{ padding:15px 20px 17px; gap:9px; }
  .countdown__box{ padding:9px 8px 7px; }
  .countdown__box b{ font-size:1.4rem; }
  .hero__jump{ margin-top:13px; padding:10px 22px; font-size:.89rem; }
}

/* Tablet: el texto arriba a lo ancho, el botón debajo y las dos fichas al pie */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr 1fr; }
  .hero__center { grid-column:1 / -1; order:1; margin-bottom:clamp(14px,2vw,20px); }
  .hero__jump   { grid-column:1 / -1; order:2; justify-self:center; margin-top:0; margin-bottom:clamp(10px,1.6vw,16px); }
  .buycard--curso{ order:3; }
  .buycard--pack { order:4; }
  .hero--shop .h1{ font-size:clamp(2.2rem,5.6vw,3.4rem); }
}

/* Móvil: primero el pack, después el botón de nichos y al final el curso */
@media (max-width:700px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__center { order:1; }
  .buycard--pack { order:2; }
  .hero__jump    { order:3; margin-bottom:0; }
  .buycard--curso{ order:4; }
}

/* Ficha de compra */
.buycard{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:var(--ink);
  border-radius:var(--radius-lg);
  background:var(--bg);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.buycard:hover{
  transform:translateY(-5px);
  border-color:rgba(176,141,87,.45);
  box-shadow:var(--shadow-hi);
}

.buycard__media{ position:relative; aspect-ratio:16/9; background:var(--bg-alt); }
.buycard__media img{ width:100%; height:100%; object-fit:cover; }
.buycard__media .offtag{ position:absolute; top:15px; left:15px; font-size:.86rem; }

.buycard__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(18px,1.7vw,23px);
}
.buycard__kicker{
  margin:0 0 8px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-lo);
}
.buycard__title{
  margin:0 0 6px;
  font-size:clamp(1.18rem,1.5vw,1.36rem);
  font-weight:640;
  letter-spacing:-.026em;
  line-height:1.18;
}
.buycard__desc{
  margin:0 0 15px;
  font-size:.89rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.buycard__foot{ margin-top:auto; }
.buycard__prices{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.buycard__prices s{ font-size:.9rem; color:var(--ink-soft); }
.buycard__prices b{ font-size:1.72rem; font-weight:650; letter-spacing:-.035em; }
.buycard__link{
  display:block;
  margin-top:9px;
  text-align:center;
  font-size:.8rem;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
}
.buycard__link:hover{ color:var(--ink); }

/* ───────────────  AVISO DESTACADO  ──────────────── */

.notice{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:clamp(22px,2.6vw,28px) clamp(22px,3vw,32px);
  border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(230,205,155,.16),rgba(176,141,87,.07));
  border:1px solid rgba(176,141,87,.3);
}
.notice__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  color:var(--gold-lo);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(176,141,87,.25);
}
.notice__ico svg{ width:19px; height:19px; }
.notice p{ margin:0; font-size:.98rem; color:var(--ink); }
.notice strong{ font-weight:600; }

/* ─────────────────────  FOOTER  ──────────────────────── */

.footer{
  padding:52px 0 60px;
  background:var(--bg-dark);
  border-top:1px solid var(--line-dark);
  color:rgba(255,255,255,.5);
  font-size:.85rem;
}
.footer__inner{
  display:grid;
  gap:22px;
  justify-items:center;
  text-align:center;
}

.footer__brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
}

.footer__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  row-gap:8px;
  font-size:.84rem;
}
.footer__links a{ transition:color .25s var(--ease); }
.footer__links a:hover{ color:#fff; }
.footer__copy{ color:rgba(255,255,255,.62); }

/* Punto de separación entre enlaces */
.footer__links > *:not(:last-child)::after{
  content:"·";
  margin:0 clamp(9px,1.4vw,15px);
  opacity:.45;
}

.footer__legal{
  margin:0;
  max-width:66ch;
  font-size:.8rem;
  line-height:1.65;
  color:rgba(255,255,255,.34);
}

/* ────────────────────  CONTACTO  ─────────────────────── */

.contacto{ padding:clamp(126px,15vw,180px) 0 clamp(70px,9vw,110px); }
.contacto .section__head{ margin-bottom:clamp(30px,4vw,42px); }

.form{
  display:grid;
  gap:18px;
  padding:clamp(24px,3.4vw,36px);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }

.field{ display:grid; gap:7px; }
.field > span{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 15px;
  font:inherit;
  font-size:.98rem;
  color:var(--ink);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:14px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5 7 9.5l4-4' fill='none' stroke='%236b6f76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
  padding-right:40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--bg);
  border-color:rgba(176,141,87,.6);
}

/* Trampa antispam */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Aviso posterior al envío */
.formmsg{
  display:flex;
  gap:10px;
  margin-bottom:22px;
  padding:16px 20px;
  border-radius:var(--radius);
  font-size:.95rem;
}
.formmsg[hidden]{ display:none; }
.formmsg--ok{ color:#1c5334; background:rgba(31,140,84,.11); border:1px solid rgba(31,140,84,.32); }
.formmsg--ko{ color:#7a1f1c; background:rgba(180,50,47,.10); border:1px solid rgba(180,50,47,.32); }
.formmsg a{ text-decoration:underline; text-underline-offset:3px; }

/* Bloques informativos bajo el formulario */
.infocards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,20px);
  margin-top:clamp(28px,3.6vw,42px);
}
@media (max-width:760px){ .infocards{ grid-template-columns:1fr; } }

.infocard{
  padding:24px 22px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.infocard__ico{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  margin-bottom:15px;
  border-radius:12px;
  color:var(--gold-lo);
  background:linear-gradient(150deg,rgba(230,205,155,.3),rgba(176,141,87,.12));
  border:1px solid rgba(176,141,87,.22);
}
.infocard__ico svg{ width:20px; height:20px; }
.infocard h2{ margin:0 0 5px; font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.infocard p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
.infocard a{ color:var(--gold-lo); text-decoration:underline; text-underline-offset:3px; word-break:break-word; }

/* ─────────────────  PÁGINAS DE TEXTO  ─────────────────── */

.legal{ padding:clamp(120px,15vw,180px) 0 clamp(70px,9vw,110px); }
.legal h1{
  margin:0 0 10px;
  font-size:clamp(2rem,4.4vw,3rem);
  font-weight:680;
  letter-spacing:-.03em;
  line-height:1.1;
}
.legal .updated{ margin:0 0 48px; font-size:.85rem; color:var(--ink-soft); }
.legal h2{ margin:44px 0 12px; font-size:1.22rem; font-weight:600; letter-spacing:-.02em; }
.legal p,.legal li{ color:var(--ink-soft); font-size:1rem; }
.legal p{ margin:0 0 14px; }
.legal ul{ display:grid; gap:9px; margin:0 0 14px; padding-left:20px; list-style:disc; }
.legal a{ color:var(--gold-lo); text-decoration:underline; text-underline-offset:3px; }
.legal .back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:52px;
  font-size:.92rem;
  color:var(--ink);
}
.legal .back:hover{ color:var(--gold-lo); }

/* Página de gracias */
.thanks{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:120px 0 80px;
  text-align:center;
  background:var(--bg-dark);
  color:#fff;
}
.thanks__mark{
  display:grid;
  place-items:center;
  width:74px; height:74px;
  margin:0 auto 30px;
  border-radius:50%;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold));
  box-shadow:0 20px 50px -18px rgba(176,141,87,.9);
}
.thanks__mark svg{ width:34px; height:34px; }
.thanks .lead{ max-width:520px; margin-inline:auto; }
.thanks__steps{
  display:grid;
  gap:12px;
  max-width:470px;
  margin:0 auto 36px;
  text-align:left;
}
.thanks__steps li{
  display:flex;
  gap:14px;
  padding:16px 18px;
  border-radius:16px;
  font-size:.95rem;
  color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
}
.thanks__steps b{ color:var(--gold-hi); font-weight:600; }

/* Lista de descargas tras el pago */
.downloads{
  display:grid;
  gap:12px;
  max-width:520px;
  margin:0 auto 26px;
  text-align:left;
}
.downloads li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.downloads__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:36px; height:36px;
  border-radius:11px;
  color:var(--gold-hi);
  background:rgba(230,205,155,.12);
  border:1px solid rgba(230,205,155,.24);
}
.downloads__ico svg{ width:18px; height:18px; }
.downloads__name{
  flex:1;
  min-width:0;
  font-size:.94rem;
  color:rgba(255,255,255,.88);
}
.downloads .btn{ flex:none; }

@media (max-width:520px){
  .downloads li{ flex-wrap:wrap; }
  .downloads__name{ flex:1 1 100%; order:2; }
  .downloads .btn{ order:3; width:100%; margin-top:4px; }
}

/* ══════════════════════════════════════════════════════
   AJUSTES DE MÓVIL
   La mayoría del tráfico llega desde Instagram, así que
   estas reglas mandan sobre las de arriba.
   ══════════════════════════════════════════════════════ */

@media (max-width:700px){

  /* Aire suficiente bajo la marquesina y la barra fija */
  .hero--shop{ padding-top:126px; padding-bottom:44px; }

  /* Titular contenido para que la primera ficha entre en pantalla */
  .hero--shop .h1{ font-size:clamp(1.95rem,8.4vw,2.5rem); margin-bottom:12px; }
  .hero--shop .lead{ font-size:1rem; line-height:1.5; margin-bottom:22px; }
  .hero__grid{ gap:20px; }

  /* Fichas grandes: imagen más alta y botón cómodo */
  .buycard__media{ aspect-ratio:16/10; }
  .buycard__body{ padding:20px 20px 22px; }
  .buycard__title{ font-size:1.3rem; }
  .buycard__desc{ font-size:.95rem; }
  .buycard__prices b{ font-size:1.9rem; }
  .buycard .btn{ padding:16px 24px; font-size:1rem; }
  .buycard__link{ margin-top:12px; font-size:.86rem; }

  /* Zona táctil del carrito */
  .nav__cart{ width:44px; height:44px; }
  .nav__cart svg{ width:23px; height:23px; }
  .nav__cart b{ top:4px; right:2px; }

  /* Contador legible sin ocupar media pantalla */
  .countdown{ padding:16px 16px 18px; }
  .countdown__label{ font-size:.68rem; letter-spacing:.1em; }
  .countdown__box b{ font-size:1.5rem; }

  /* Botón a todo el ancho: zona táctil cómoda */
  .hero__jump{ width:100%; padding:15px 20px; font-size:.96rem; margin-top:18px; }
}

@media (max-width:560px){

  /* Una columna: la ilustración manda y el botón ocupa el ancho */
  .tile__media{ aspect-ratio:16/10; }
  .tile__foot{ flex-direction:column; align-items:stretch; gap:14px; }
  .tile__prices{ flex-direction:row; align-items:baseline; gap:10px; }
  .tile__prices b{ font-size:1.45rem; }
  .tile__foot .btn{ width:100%; padding:14px 20px; font-size:.96rem; }


  /* Filas del carrito con más margen para el dedo */
  .qty button{ width:38px; height:34px; }
  .drawer__list{ padding-inline:20px; }
  .drawer__head,.drawer__foot{ padding-inline:20px; }
}

/* ───────────────────  ANIMACIONES  ───────────────────── */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}