/* ==========================================================
   Decretos Nocturnos — clon mobile-first
   Base = móvil (<561px) · min-width:561px = tablet · min-width:801px = escritorio
   ========================================================== */

:root {
  --ink: #171928;
  --cream: #f5f1e9;
  --paper: #fbfaf6;
  --lav: #b6a7d9;
  --lavd: #76658e;
  --copper: #ca8e70;
  --muted: #68666c;
  --line: rgba(23, 25, 40, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-bottom: 76px; /* espacio para la barra fija en móvil */
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.65 'DM Sans', sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; }
p { margin-top: 0; }

/* ---------- Topbar ---------- */
.topbar {
  align-items: center;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
.brand { align-items: center; display: flex; gap: 10px; }
.brand img { height: 34px; width: 34px; }
.brand span { display: flex; flex-direction: column; font: 500 21px/.78 'Cormorant Garamond', serif; }
.brand em { font-style: italic; font-weight: 400; }
.topbar a:last-child { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero {
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr;
  min-height: 720px;
}
.hero-copy { align-self: center; padding: 140px 24px 75px; }
.eyebrow { color: var(--lav); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { font-size: 58px; letter-spacing: -.05em; line-height: .88; margin: 28px 0; }
.hero h1 i, .final h2 i { color: var(--lav); font-style: italic; }
.hero p { color: #cbc8d0; max-width: 480px; }
.hero .support { border-left: 1px solid var(--copper); color: var(--cream); font-size: 14px; margin: 25px 0; padding-left: 15px; }
.hero small { color: #a7a3af; display: block; font-size: 9px; letter-spacing: .1em; margin-top: 20px; text-transform: uppercase; }
.hero-image { min-height: 400px; overflow: hidden; }
.hero-image img { height: 100%; object-fit: cover; width: 100%; }

/* ---------- Botón ---------- */
.btn {
  align-items: center;
  background: var(--copper);
  border: 0;
  color: var(--ink);
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: .1em;
  min-width: 270px;
  max-width: 100%;
  padding: 17px 20px;
  text-transform: uppercase;
  transition: .2s;
}
.btn:hover { background: #e2ab90; transform: translateY(-2px); }

/* ---------- Secciones base ---------- */
.section { padding: 80px 24px; }

.intro { display: grid; gap: 8vw; grid-template-columns: 1fr; }
.intro h2, .method h2, .contents h2, .promise h2, .offer h2, .faq h2 {
  font-size: clamp(44px, 5.2vw, 72px);
  letter-spacing: -.04em;
  line-height: .92;
  margin: 24px 0;
}
.intro p, .method p, .promise p, .offer-copy p { color: var(--muted); max-width: 570px; }
.note { align-self: end; border-top: 1px solid var(--line); color: var(--lavd); font: 29px/.9 'Cormorant Garamond', serif; padding-top: 18px; }
.note em { color: var(--copper); }

/* ---------- Método + audio ---------- */
.method { background: var(--cream); display: grid; gap: 9vw; grid-template-columns: 1fr; }
.method-image { position: relative; }
.method-image img { display: block; width: 100%; }
.method-image span {
  background: var(--lav);
  bottom: -16px;
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.2;
  padding: 16px;
  position: absolute;
  right: -16px;
}
.emphasis { color: var(--ink) !important; font: italic 25px 'Cormorant Garamond', serif; }

.audio { background: var(--ink); color: var(--cream); margin-top: 35px; padding: 20px; }
.audio audio { display: block; width: 100%; height: 44px; margin: 0 0 16px; }
.audio #play { display: none; }
.audio button { background: var(--lav); border: 0; border-radius: 50%; font-size: 18px; height: 45px; width: 45px; }
.wave { align-items: center; display: flex; gap: 3px; height: 35px; margin: 18px 0; }
.wave i { background: var(--copper); display: block; flex: 1; height: var(--h); }

/* ---------- Contenido (tarjetas) ---------- */
.contents { background: var(--paper); }
.contents-head { display: grid; gap: 5vw; grid-template-columns: 1fr; }
.contents-head p { align-self: end; color: var(--muted); max-width: 300px; }
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 65px; }
.card { border-top: 1px solid var(--line); min-height: 220px; padding: 20px 10px 25px 0; transition: .22s; }
.card:hover { transform: translateY(-5px); border-color: var(--lavd); }
.card.feature { background: var(--ink); color: var(--cream); padding: 24px; }
.card h3 { font-size: 31px; line-height: .95; margin: 45px 0 15px; }
.card p { color: var(--muted); font-size: 13px; }
.card.feature p { color: #bab7bf; }

/* ---------- Bonus (definido en el original) ---------- */
.bonus { background: var(--ink); color: var(--cream); display: grid; gap: 9vw; grid-template-columns: 1fr; }
.bonus h2 { font-size: clamp(45px, 5vw, 68px); line-height: .9; }
.bonus p { color: #aaa8b3; }
.bonus-list { border-top: 1px solid rgba(245, 241, 233, .2); margin-top: 20px; }
.bonus-item {
  align-items: center;
  border-bottom: 1px solid rgba(245, 241, 233, .2);
  display: grid;
  gap: 22px;
  grid-template-columns: 34px 1fr 20px;
  padding: 25px 0;
  position: relative;
  transition: .22s;
}
.bonus-item:before {
  background: var(--copper);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: -1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: .26s;
  width: 100%;
}
.bonus-item:hover { background: rgba(182, 167, 217, .08); padding-left: 14px; transform: translateX(4px); }
.bonus-item:hover:before { transform: scaleX(1); }
.bonus-item h3 { font-size: 28px; line-height: 1; margin: 0 0 5px; }
.bonus-item > span { color: var(--copper); font-size: 11px; }

/* ---------- Promesa ---------- */
.promise { background: var(--cream); display: grid; gap: 10vw; grid-template-columns: 1fr; }

/* ---------- Oferta ---------- */
.offer { background: #e7e2d9; display: grid; gap: 8vw; grid-template-columns: 1fr; }
.offer-card {
  background: var(--paper);
  box-shadow: 0 18px 48px rgba(23, 25, 40, .1);
  max-width: 100%;
  padding: 35px clamp(24px, 4vw, 50px);
}
.offer-card ul { list-style: none; margin: 24px 0; padding: 0; }
.offer-card li { margin: 9px 0; }
.offer-card li:before { color: var(--copper); content: '✓'; margin-right: 10px; }
.countdown { align-items: center; background: var(--ink); color: var(--cream); display: flex; justify-content: space-between; margin: 22px 0; padding: 13px 16px; }
.countdown label { color: #bcb6c9; font-size: 8px; line-height: 1.2; max-width: 145px; }
.countdown strong { color: var(--lav); font: 500 27px/1 'Cormorant Garamond', serif; }
.countdown i { color: var(--copper); font-style: normal; }
.price { border-top: 1px solid var(--line); padding-top: 18px; }
.price small { color: var(--muted); }
.price strong { display: block; font: 500 52px/1 'Cormorant Garamond', serif; }
.price del { color: var(--muted); font-size: 11px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 9vw; grid-template-columns: 1fr; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: 21px 'Cormorant Garamond', serif;
  justify-content: space-between;
  padding: 22px 0;
  text-align: left;
  width: 100%;
}
.faq-item button span { transition: transform .2s; }
.faq-item.open button span { transform: rotate(180deg); }
.answer { color: var(--muted); display: none; max-width: 620px; }
.faq-item.open .answer { display: block; }

/* ---------- Cierre ---------- */
.final { background: var(--ink); color: var(--cream); padding: 130px 24px; text-align: center; }
.final h2 { font-size: clamp(60px, 8vw, 110px); line-height: .85; margin: 25px 0; }
.final p { color: #bab7c1; margin: 7px auto; max-width: 500px; }
.final .btn { margin-top: 28px; }

/* ---------- Footer ---------- */
.footer {
  align-items: flex-start;
  background: var(--ink);
  border-top: 1px solid rgba(245, 241, 233, .15);
  color: #aaa7b1;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 15px;
  justify-content: space-between;
  padding: 25px 6vw;
}

/* ---------- Barra fija (solo móvil) ---------- */
.sticky {
  align-items: center;
  background: var(--cream);
  bottom: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  left: 14px;
  padding: 12px 16px;
  position: fixed;
  right: 14px;
  z-index: 10;
}
.sticky span { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; line-height: 1.1; }
.sticky small { color: var(--lavd); font-size: 8px; letter-spacing: .12em; }

/* ==========================================================
   TABLET  ≥ 561px
   ========================================================== */
@media (min-width: 561px) {
  body { padding-bottom: 0; }
  .topbar { padding: 22px 6vw; }
  .topbar a:last-child { font-size: 10px; }
  .hero h1 { font-size: clamp(54px, 6.4vw, 94px); }
  .countdown strong { font-size: 31px; }
  .faq-item button { font-size: 24px; }
  .footer { align-items: center; flex-direction: row; gap: 0; }
  .sticky { display: none; }
}

/* ==========================================================
   ESCRITORIO  ≥ 801px
   ========================================================== */
@media (min-width: 801px) {
  .hero { grid-template-columns: 1fr 1.05fr; }
  .hero-copy { padding: 140px 8vw 80px; }
  .hero-image { min-height: 0; }

  .section { padding: clamp(80px, 11vw, 150px) 8vw; }
  .intro { grid-template-columns: .35fr 1fr .55fr; }
  .method { grid-template-columns: 1fr 1fr; }
  .contents-head { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { min-height: 0; }
  .bonus { grid-template-columns: .8fr 1.2fr; }
  .bonus-list { margin-top: 0; }
  .promise { grid-template-columns: .7fr 1.3fr; }
  .offer { grid-template-columns: .9fr 1.1fr; }
  .offer-card { max-width: 540px; }
  .faq { grid-template-columns: .7fr 1.3fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}