/* Los 4 colores de marca, más el verde de las tapas (botones de compra),
   un café más oscuro de la misma familia y el verde oficial de WhatsApp. */
:root {
  --cafe: #603812;
  --salvia: #80a084;
  --claro: #dee3da;
  --amarillo: #fff100;
  --verde: #0a6c28; /* tapa de la botella, medido en la foto del producto; blanco encima 6,6:1 */
  --cafe-oscuro: #4a2a0c;
  --whatsapp: #25d366;

  --texto: var(--cafe);
  --texto-suave: color-mix(in srgb, var(--cafe) 78%, var(--claro));
  --linea: color-mix(in srgb, var(--cafe) 16%, var(--claro));
  --superficie: color-mix(in srgb, var(--claro) 55%, white);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 72rem;
  --radio-grande: 1.75rem;
  --radio: 1rem;
}


html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--claro);
  color: var(--texto);
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Tipografía: tracking negativo en grande, aire en cuerpo ---------- */
.display,
h1,
h2,
h3 {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--texto-suave);
  max-width: 34em;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--cafe);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* ---------- Botones: respuesta al presionar, no al soltar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0.625rem 1.75rem;
  border-radius: 999px;
  text-align: center;
  line-height: 1.25;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  transition:
    transform 100ms ease-out,
    background-color 160ms ease-out;
}
.btn:active {
  transform: scale(0.97);
}
/* Compra: verde de las tapas. Un brillo la recorre una vez al entrar en pantalla
   y un pulso de luz leve al pasar el cursor. */
.btn-buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--verde);
  color: #fff;
}
.btn-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-buy.is-shining::after {
  animation: shine 1100ms cubic-bezier(0.4, 0, 0.2, 1) 250ms 1 both;
}
@keyframes shine {
  to {
    transform: translateX(120%);
  }
}
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--verde) 0%, transparent),
      0 0 22px 2px color-mix(in srgb, var(--verde) 40%, transparent);
  }
}
.btn-quiet {
  background: transparent;
  color: var(--cafe);
  box-shadow: inset 0 0 0 2px var(--cafe);
}
@media (hover: hover) {
  .btn-buy:hover {
    background: color-mix(in srgb, var(--verde) 88%, white);
    animation: glow 1600ms ease-in-out infinite;
  }
  .btn-quiet:hover {
    background: color-mix(in srgb, var(--cafe) 8%, transparent);
  }
}

/* Enlaces dentro de texto: siempre subrayados */
.link {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  font-weight: 600;
}

/* ---------- Barra superior translúcida ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--claro) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.topbar::after {
  /* borde suave donde el contenido pasa por debajo, en lugar de una línea dura */
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 12px;
  background: linear-gradient(color-mix(in srgb, var(--cafe) 8%, transparent), transparent);
  pointer-events: none;
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

/* Barra del cupo semanal */
.announce {
  background: var(--cafe);
  color: var(--claro);
}
.cupo {
  margin: 0;
  line-height: 1.45;
}
.cupo strong {
  font-weight: 700;
}
.cupo-bar {
  padding-block: 0.45rem;
  font-size: 0.8125rem;
  text-align: center;
}
.cupo-bar strong {
  color: var(--amarillo);
}
.cupo-short {
  display: none;
}
@media (max-width: 600px) {
  .cupo-long {
    display: none;
  }
  .cupo-short {
    display: inline;
  }
  .cupo-bar {
    padding-block: 0.375rem;
  }
}
.cupo-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cupo-inline {
  margin-top: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--amarillo) 22%, var(--claro));
  font-size: 0.9375rem;
}
.cupo-ship {
  display: block;
  margin-top: 0.25rem;
  color: var(--texto-suave);
}
.topbar .btn {
  min-height: 2.5rem;
  padding: 0 1.125rem;
  font-size: 1rem;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
  }
}
.hero-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--superficie);
}
/* Celular: la foto sube entre el titular y el precio, para que el producto se vea en la primera pantalla. */
@media (max-width: 899px) {
  .hero-grid {
    gap: 0;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy > * {
    order: 3;
  }
  .hero-copy > h1,
  .hero-copy > .proof {
    order: 1;
  }
  .hero-copy > .lead {
    order: 4;
  }
  .hero-photo {
    order: 2;
    aspect-ratio: 16 / 10;
    margin-top: 1.25rem;
  }
  .hero-copy > .price-line {
    margin-top: 1.25rem;
  }
}
@media (max-width: 480px) {
  .hero h1 {
    font-size: 2.25rem;
  }
}
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-top: 2rem;
}
.price-line strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.assurances li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.assurances svg,
.assurances img {
  flex: none;
  color: var(--verde);
}
.proof {
  margin-top: 1.25rem;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--verde);
}

/* Sellos de pago */
.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.payments-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.payments ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.payments li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 2.5rem;
  padding: 0 0.4375rem;
  border-radius: 0.375rem;
  background: #fff;
  border: 1px solid var(--linea);
}
.payments li img {
  display: block;
}
@media (max-width: 420px) {
  .payments ul {
    gap: 0.25rem;
  }
  .payments li {
    min-width: 2.25rem;
    padding: 0 0.25rem;
  }
}

/* ---------- Ritual: franja café con la tira de 30 días ---------- */
.ritual {
  background: var(--cafe);
  color: var(--claro);
}
.ritual .lead {
  color: color-mix(in srgb, var(--claro) 82%, var(--cafe));
}
/* 6 botellas con sus días (9, y 11 la última); en móvil, 2 botellas por fila */
.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.strip li {
  display: grid;
  gap: 0.625rem;
  align-content: start;
}
.strip-label {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
}
.strip-label span {
  font-family: var(--font-body), system-ui, sans-serif;
  font-weight: 400;
  color: color-mix(in srgb, var(--claro) 75%, var(--cafe));
}
.strip-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.strip .day {
  width: 0.875rem;
  aspect-ratio: 1 / 2.2;
  border-radius: 999px;
  background: color-mix(in srgb, var(--claro) 14%, var(--cafe));
  transition: background-color 420ms ease-out;
  transition-delay: calc(var(--i) * 20ms);
}
.strip[data-filled="true"] .day {
  background: var(--amarillo);
}
.strip-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--claro) 75%, var(--cafe));
}
.steps {
  display: grid;
  gap: 2rem;
  margin: clamp(3.5rem, 7vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.steps li {
  counter-increment: paso;
  border-top: 1px solid color-mix(in srgb, var(--claro) 28%, var(--cafe));
  padding-top: 1.25rem;
}
.steps li::before {
  content: counter(paso);
  display: block;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--salvia);
  margin-bottom: 1rem;
}
.steps p {
  margin-top: 0.5rem;
  color: color-mix(in srgb, var(--claro) 80%, var(--cafe));
}

/* ---------- Testimonios ---------- */
.videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: 1rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.videos::-webkit-scrollbar {
  display: none;
}
@media (min-width: 900px) {
  .videos {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
.videos video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radio-grande);
  background: var(--cafe);
  scroll-snap-align: start;
}

/* ---------- La botella ---------- */
.bottle {
  background: var(--cafe-oscuro);
  color: var(--claro);
}
.bottle .lead,
.bottle .facts span {
  color: color-mix(in srgb, var(--claro) 80%, var(--cafe-oscuro));
}
.fact-seal {
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
}
.fact-seal div {
  display: grid;
  gap: 0.25rem;
}

/* Tiendas que nos venden */
.stores {
  padding-block: 0 clamp(4rem, 8vw, 6rem);
}
.stores-title {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  letter-spacing: -0.01em;
}
.stores-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}
@media (min-width: 720px) {
  .stores-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
  }
}
.stores-list li {
  display: grid;
  line-height: 1.3;
}
.stores-list strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
}
.stores-list span {
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.stores-more {
  align-self: end;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}
.bottle-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 900px) {
  .bottle-grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}
.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts li {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--claro) 20%, var(--cafe-oscuro));
}
.facts li:first-child {
  border-top: 1px solid color-mix(in srgb, var(--claro) 20%, var(--cafe-oscuro));
}
.facts strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1875rem;
}

/* ---------- Ofertas ---------- */
.offers {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 900px) {
  .offers {
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
}
.offer {
  display: flex;
  flex-direction: column;
  border-radius: var(--radio-grande);
  background: var(--superficie);
  overflow: hidden;
}
.offer-featured {
  border: 3px solid var(--cafe);
}
.offer-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--claro);
}
.offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.375rem;
  padding: 1.75rem;
}
.offer-tag {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--cafe);
  color: var(--amarillo);
  font-size: 0.875rem;
  font-weight: 700;
}
.offer-price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.offer-price strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.offer-price s {
  color: var(--texto-suave);
}
.offer ul {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.offer ul li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.offer ul svg {
  flex: none;
  margin-top: 0.3rem;
  color: var(--verde);
}
.offer .btn {
  margin-top: 1rem;
  width: 100%;
}
.offer .cupo-inline {
  margin-top: auto;
}
.offer .payments ul {
  display: flex;
  margin: 0;
  gap: 0.375rem;
}
@media (max-width: 420px) {
  .offer .payments ul {
    gap: 0.25rem;
  }
}

.guarantee {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radio-grande);
  background: var(--salvia);
}
.guarantee .small {
  color: var(--cafe);
  max-width: 44em;
}
.guarantee-seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cafe);
  color: var(--amarillo);
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.guarantee-seal span {
  display: block;
  font-size: 2rem;
}
.small {
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* ---------- Preguntas ---------- */
.faq {
  max-width: 46rem;
}
.faq details {
  border-bottom: 1px solid var(--linea);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.1875rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms ease-out;
}
.faq details[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}
.faq details p {
  padding-bottom: 1.25rem;
  color: var(--texto-suave);
  max-width: 38em;
}

/* ---------- Cierre y pie ---------- */
.closing {
  background: var(--cafe);
  color: var(--claro);
  text-align: center;
}
.closing .lead {
  margin-inline: auto;
  color: color-mix(in srgb, var(--claro) 82%, var(--cafe));
}
.closing .btn-quiet {
  color: var(--claro);
  box-shadow: inset 0 0 0 2px var(--claro);
}
.footer {
  padding-block: 3rem 6rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* ---------- WhatsApp flotante ---------- */
.wa {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--cafe) 55%, transparent);
  transition: transform 100ms ease-out;
}
.wa:active {
  transform: scale(0.94);
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .strip .day {
    transition: none;
    background: var(--amarillo);
  }
  .btn,
  .wa {
    transition: none;
  }
  .btn-buy::after {
    display: none;
  }
  .btn-buy.is-shining::after,
  .btn-buy:hover {
    animation: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--claro);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* =====================================================================
 * /prueba · Botella gratis (Valle de Aburrá). Página de una sola oferta.
 * ===================================================================== */
.pz-header {
  padding-block: 1rem;
  border-bottom: 1px solid var(--linea);
}
.pz-header .wrap {
  display: flex;
  justify-content: center;
}
.pz-hero {
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}
.pz-hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .pz-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.pz-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--cafe);
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
}
.pz-sub {
  margin-top: 1rem;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.2;
}
.pz-sub strong {
  color: var(--verde);
  font-weight: 700;
}
.pz-hero-copy .lead {
  margin-top: 1rem;
  max-width: 34rem;
}
.pz-media {
  position: relative;
  margin: 0;
  aspect-ratio: 822 / 1280;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--superficie);
}
.pz-media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pz-media figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(transparent, color-mix(in srgb, var(--cafe) 82%, transparent));
  color: var(--claro);
  font-size: 0.9375rem;
}
.pz-media-desktop {
  display: none;
  max-width: 26rem;
  justify-self: end;
  width: 100%;
}
.pz-media-mobile {
  margin-top: 1.5rem;
  aspect-ratio: 4 / 5;
}
@media (min-width: 900px) {
  .pz-media-desktop {
    display: block;
  }
  .pz-media-mobile {
    display: none;
  }
}

/* Contador "Quedan X de 100" */
.pz-counter {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--amarillo) 22%, var(--claro));
  max-width: 30rem;
}
.pz-counter-main {
  display: grid;
  gap: 0.15rem;
}
.pz-counter-main strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}
.pz-counter-main span {
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.pz-bar {
  height: 0.5rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cafe) 12%, var(--claro));
  overflow: hidden;
}
.pz-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--verde);
  transition: width 600ms ease-out;
}
.pz-counter-off {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
}
.pz-actions {
  margin-top: 1.25rem;
}
.pz-actions .btn {
  width: 100%;
  max-width: 30rem;
}
.pz-fine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.pz-fine li::before {
  content: "✓ ";
  color: var(--verde);
  font-weight: 700;
}

/* Cómo se toma */
.pz-dose {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 800px) {
  .pz-dose {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pz-dose li {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radio);
  background: var(--superficie);
}
.pz-dose-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--salvia);
  color: #fff;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 700;
}
.pz-dose h3 {
  font-size: 1.1875rem;
}
.pz-dose p {
  margin-top: 0.35rem;
  color: var(--texto-suave);
}

/* Anuncio del order bump */
.pz-bump-section {
  padding-top: 0;
}
.pz-bump {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 2px dashed var(--cafe);
  border-radius: var(--radio-grande);
}
.pz-bump h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
}
.pz-bump p {
  margin-top: 0.75rem;
  max-width: 44rem;
}
.pz-faq-title {
  margin-bottom: 1.5rem;
}
#pz-faq + .faq {
  margin-top: 1.5rem;
}

/* Cierre */
.pz-closing-counter .pz-counter {
  margin-inline: auto;
  text-align: left;
  color: var(--cafe);
}

/* Barra fija en celular */
.pz-sticky {
  display: none;
}
@media (max-width: 720px) {
  .pz-sticky {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--claro) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea);
  }
  .pz-sticky .pz-counter {
    margin: 0;
    padding: 0;
    background: none;
    min-width: 0;
  }
  .pz-sticky .pz-counter-main strong,
  .pz-sticky .pz-counter-off {
    font-size: 1rem;
  }
  .pz-sticky .pz-bar {
    margin-top: 0.35rem;
    width: 8rem;
  }
  .pz-sticky .btn {
    flex: none;
    padding-inline: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pz-bar span {
    transition: none;
  }
}