:root {
  --noche: #33203f;
  --noche-2: #46254a;
  --vino: #651c3a;
  --rosa: #c22f68;
  --rosa-claro: #f2bfc4;
  --rosa-medio: #ea85ab;
  --salmon: #e9a090;
  --terracota: #c85a3c;
  --crema: #f3ece3;
  --mantequilla: #f2e4b4;
  --lavanda: #dfe0f2;
  --azul: #8b90d8;
  --azul-oscuro: #6a6fc4;
  --oliva: #6f7c2e;
  --tinta: #2f1c2b;
  --tinta-suave: #5d4a56;
  --cinta: rgba(205, 186, 150, .8);
  --serif: "Gelasio", Georgia, serif;
  --maquina: "Courier Prime", "Courier New", monospace;
  --sans: "Poppins", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 400 16px/1.65 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
em { font-style: italic; }

.wrap { width: min(1080px, 100%); margin: 0 auto; padding: 0 20px; }
.estrecho { width: min(720px, 100%); }

/* Piezas de marca */
.etiqueta {
  display: inline-block;
  padding: 5px 14px;
  font: 700 14px/1.3 var(--maquina);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.etiqueta-rosa { background: var(--rosa); color: var(--crema); }
.etiqueta-vino { background: var(--vino); color: var(--crema); }

.nota {
  position: relative;
  padding: 26px 24px;
  font: 400 clamp(28px, 7vw, 42px)/1.2 var(--serif);
  box-shadow: 0 8px 22px rgba(30, 10, 30, .25);
  transform: rotate(-1deg);
}
.nota::before, .nota::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 92px;
  height: 26px;
  background: var(--cinta);
}
.nota::before { left: -10px; transform: rotate(-7deg); }
.nota::after { right: -10px; transform: rotate(6deg); }
.nota-crema { background: var(--crema); color: var(--tinta); }
.nota-crema em { color: var(--rosa); }

.titulo {
  margin-top: 14px;
  font: 400 clamp(32px, 7vw, 46px)/1.15 var(--serif);
}
.titulo em { color: var(--rosa); }
.titulo-claro { color: var(--crema); }
.titulo-claro em { color: var(--rosa-claro); }

.boton {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--vino);
  color: var(--crema);
  font: 700 16px/1.2 var(--maquina);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(50, 10, 30, .35);
  transition: transform .15s ease, background .15s ease;
}
.boton:hover { background: var(--rosa); transform: translateY(-2px); }
.boton:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.libro { box-shadow: 0 16px 34px rgba(20, 5, 25, .45); transform: rotate(3deg); }

/* Hero */
.hero {
  padding: 40px 0 64px;
  color: var(--crema);
  background:
    radial-gradient(circle at 12% 18%, rgba(242, 228, 180, .7) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 10%, rgba(242, 228, 180, .7) 0 2px, transparent 2.5px),
    radial-gradient(circle at 92% 46%, rgba(242, 228, 180, .6) 0 1.5px, transparent 2px),
    radial-gradient(circle at 44% 62%, rgba(242, 228, 180, .5) 0 1.5px, transparent 2px),
    radial-gradient(circle at 6% 84%, rgba(242, 228, 180, .6) 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 92%, rgba(242, 228, 180, .5) 0 1.5px, transparent 2px),
    linear-gradient(170deg, var(--noche), var(--noche-2));
}
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hora { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.hora-num { font: 400 clamp(64px, 16vw, 92px)/1 var(--serif); }
.hero h1 { margin-bottom: 26px; }
.hero-sub { margin-bottom: 26px; font-size: 17px; color: #ece1e4; }
.hero .boton { background: var(--rosa); }
.hero .boton:hover { background: var(--vino); }
.hero-nota { margin-top: 14px; font-size: 14px; color: #d9c8d3; }
.hero-img { width: min(320px, 78%); margin: 0 auto; }

/* Rayas */
.rayas {
  padding: 72px 0;
  background: repeating-linear-gradient(90deg, var(--rosa) 0 11.11%, var(--salmon) 11.11% 22.22%);
}
.nota-grande { font-size: clamp(30px, 7vw, 46px); }
.emociones {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 44px 0;
  padding: 0;
  list-style: none;
}
.emociones li { position: relative; width: min(30%, 170px); aspect-ratio: 1; }
.emociones .flor { display: block; width: 100%; height: 100%; }
.emociones span {
  position: absolute;
  inset: 14%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font: 700 clamp(11px, 3.2vw, 16px)/1 var(--maquina);
}
.rayas-texto {
  padding: 20px 22px;
  background: var(--crema);
  font: 400 clamp(20px, 4.6vw, 24px)/1.35 var(--serif);
  box-shadow: 0 8px 22px rgba(30, 10, 30, .2);
  transform: rotate(.6deg);
}

/* Contenido */
.adentro { padding: 76px 0; }
.tarjetas { display: grid; gap: 28px; margin-top: 36px; }
.tarjeta { padding: 14px 14px 22px; background: #fbf7f1; box-shadow: 0 6px 18px rgba(60, 30, 50, .13); }
.tarjeta img { width: 100%; border: 1px solid rgba(60, 30, 50, .08); }
.tarjeta h3 { margin: 16px 0 4px; color: var(--rosa); font: 400 26px/1.2 var(--serif); }
.tarjeta p { color: var(--tinta-suave); font-size: 15px; }
.extra { margin-top: 32px; font-size: 17px; }

/* Pasos */
.pasos { padding: 72px 0; background: var(--noche); }
.pasos-lista {
  display: grid;
  gap: 16px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos-lista li {
  position: relative;
  padding: 20px 20px 20px 72px;
  background: var(--lavanda);
  counter-increment: paso;
}
.pasos-lista li::before {
  content: counter(paso);
  position: absolute;
  left: 22px;
  top: 14px;
  color: var(--azul-oscuro);
  font: italic 400 38px/1.2 var(--serif);
}
.pasos-lista strong { display: block; font-weight: 500; }

/* Oferta */
.oferta { position: relative; padding: 76px 0; overflow: hidden; background: var(--rosa-medio); }
.flor-deco { position: absolute; width: 240px; height: 240px; color: var(--salmon); opacity: .55; }
.flor-a { top: -70px; right: -60px; }
.flor-b { bottom: -80px; left: -70px; color: var(--rosa); }
.oferta-caja {
  position: relative;
  display: grid;
  gap: 34px;
  width: min(940px, calc(100% - 32px));
  padding: 34px 22px;
  background: var(--crema);
  box-shadow: 0 12px 30px rgba(70, 20, 50, .25);
}
.libro-oferta { width: min(230px, 66%); margin: 0 auto; }
.incluye { margin: 22px 0; padding: 0; list-style: none; }
.incluye li { position: relative; padding: 5px 0 5px 28px; }
.incluye li::before { content: "✿"; position: absolute; left: 0; color: var(--rosa); }
.precio { color: var(--vino); font: 500 56px/1 var(--serif); margin-bottom: 20px; }
.precio small { font: 700 20px var(--maquina); }
.oferta .boton { width: 100%; text-align: center; }
.garantia { margin-top: 16px; color: var(--tinta-suave); font-size: 14px; }
.garantia strong { color: var(--tinta); font-weight: 500; }

/* Preguntas */
.preguntas { padding: 76px 0; }
.preguntas .titulo { margin-bottom: 26px; }
details { border-bottom: 1px solid rgba(60, 30, 50, .22); }
summary {
  padding: 18px 28px 18px 0;
  position: relative;
  cursor: pointer;
  font: 500 19px/1.35 var(--serif);
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 2px; top: 14px; color: var(--rosa); font-size: 26px; }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 20px; color: var(--tinta-suave); }

/* Pie */
.pie { padding: 44px 0 110px; background: var(--vino); color: var(--crema); text-align: center; font-size: 14px; }
.pie-marca { font: italic 400 30px/1.2 var(--serif); }
.pie-legal { margin: 16px auto; max-width: 560px; opacity: .85; }
.pie a { color: var(--crema); }

/* Botón fijo en celular */
.barra-movil {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  padding: 10px 16px;
  background: rgba(243, 236, 227, .95);
  box-shadow: 0 -4px 14px rgba(40, 10, 30, .15);
}
.barra-movil .boton { display: block; text-align: center; }

@media (min-width: 620px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hero { padding: 64px 0 88px; }
  .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 64px; }
  .hero-img { width: 100%; max-width: 380px; }
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .pasos-lista { grid-template-columns: repeat(3, 1fr); }
  .oferta-caja { grid-template-columns: .85fr 1fr; align-items: center; padding: 50px; }
  .libro-oferta { width: 100%; }
  .oferta .boton { width: auto; }
  .barra-movil { display: none; }
  .pie { padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
}

/* Muestras difuminadas */
.muestra { position: relative; }
.vista {
  position: absolute;
  top: 66%;
  left: 50%;
  padding: 6px 14px;
  background: var(--vino);
  color: var(--crema);
  font: 700 13px/1.3 var(--maquina);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-2deg);
}