/* Estilos exclusivos de la subpage de producto individual.
   Los componentes compartidos (topbar, botones, eyebrow, cards, FAQ, footer)
   viven en style.css y se reutilizan tal cual aquí. */

/* Paleta nueva para esta subpage — sobreescribe las variables de style.css.
   Como producto.css solo se carga en esta página, el resto del sitio
   (index.html) no se ve afectado. Contraste verificado contra WCAG AA. */

.marquee-bar {
  background: var(--pine);
  color: var(--paper);
  overflow: hidden;
  height: 40px;
  margin-top: 88px;
  display: flex;
  align-items: center;
}

.marquee-bar .track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 56px;
}

@keyframes marquee {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-bar .track {
    animation: none;
  }

  .product-hero .pic .gallery-media.is-active {
    animation: none;
  }

  .product-hero .pic .gallery-zoom:hover {
    transform: none;
  }
}

.product-hero .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.product-hero .pic {
  background: var(--pine);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.product-hero .pic .main-shot {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  background: #0f1a14;
}

.product-hero .pic .main-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-hero .pic .counter {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 12px;
  color: var(--on-dark-soft);
  letter-spacing: .04em;
  background: rgba(0, 0, 0, .35);
  padding: 3px 9px;
  border-radius: 100px;
}

.product-hero .pic .gallery-shot {
  cursor: zoom-in;
}

/* Cambiar de foto era un salto instantáneo. Va como animación y no como
   transición porque el medio entra desde display:none y no hay estado
   anterior que interpolar. */
.product-hero .pic .gallery-media.is-active {
  animation: gallery-entra .32s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes gallery-entra {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
}

.product-hero .pic .gallery-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--paper);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.product-hero .pic .gallery-zoom:hover,
.product-hero .pic .gallery-zoom:focus-visible {
  background: var(--pine-soft);
  transform: scale(1.08);
}

.product-hero .pic .gallery-zoom svg {
  width: 17px;
  height: 17px;
}

/* Flechas anterior/siguiente sobre el visor. Van centradas a los lados para no
   chocar con el contador (arriba) ni con el zoom y los controles del video (abajo). */
.product-hero .pic .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(15, 26, 20, .55);
  color: var(--paper);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}

.product-hero .pic .gallery-nav:hover,
.product-hero .pic .gallery-nav:focus-visible {
  background: var(--pine);
}

.product-hero .pic .gallery-nav.prev { left: 14px; }
.product-hero .pic .gallery-nav.next { right: 14px; }

.product-hero .pic .gallery-nav svg {
  width: 20px;
  height: 20px;
}

/* Las miniaturas miden 56px fijos y no encogen: a partir de seis fotos la fila
   pasaba del ancho del móvil y estiraba toda la página (aparecía scroll lateral y
   el texto se cortaba). Con wrap la fila salta de línea y la galería admite las
   fotos que haga falta. */
.product-hero .pic .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-hero .pic .thumbs button {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 2px solid transparent;
  flex-shrink: 0;
  opacity: .72;
  transition: border-color .2s ease, opacity .2s ease;
}

.product-hero .pic .thumbs button:hover,
.product-hero .pic .thumbs button:focus-visible {
  opacity: 1;
}

.product-hero .pic .thumbs button.active {
  border-color: var(--sage);
  opacity: 1;
}

.product-hero .pic .thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video dentro del visor principal */
.product-hero .pic .main-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f1a14;
}

/* Miniatura de video: overlay con el triángulo de play */
.product-hero .pic .thumbs .gallery-thumb.is-video {
  position: relative;
}

.product-hero .pic .thumbs .gallery-thumb.is-video .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 26, 20, .45);
  color: #FFFFFF;
}

.product-hero .pic .thumbs .gallery-thumb.is-video .play-badge svg {
  width: 16px;
  height: 16px;
}

.product-hero .pic .thumbs .more-slot {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 6px;
  border: 1px dashed rgba(169, 199, 154, .55);
  background: rgba(255, 255, 255, .05);
  color: var(--on-dark-soft);
}

.product-hero .pic .thumbs .more-slot svg {
  width: 15px;
  height: 15px;
}

.product-hero .pic .thumbs .more-slot span {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}

.product-hero .info {
  background: var(--paper-deep);
  padding: 52px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}

.product-hero .benefit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-hero .benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

.product-hero .benefit-list svg {
  width: 17px;
  height: 17px;
  color: var(--pine);
  flex-shrink: 0;
  margin-top: 2px;
}

.product-hero .spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  background: var(--paper);
  border-radius: 12px;
  padding: 16px 18px;
}

.product-hero .spec-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-hero .spec-grid dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.product-hero .spec-grid dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--pine);
}

.product-hero .reassure-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product-hero .reassure-row div {
  background: var(--paper);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}

.product-hero .reassure-row svg {
  width: 18px;
  height: 18px;
  color: var(--pine);
  margin-bottom: 6px;
}

.product-hero .reassure-row strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 700;
}

.product-hero .reassure-row span {
  display: block;
  font-size: 11px;
  color: var(--muted-ink);
  margin-top: 2px;
  line-height: 1.35;
}

.product-hero h1 {
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 300;
  margin: 0;
  line-height: 1.05;
}

.product-hero h1 em {
  font-style: italic;
  color: var(--moss);
}

.product-hero .lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 48ch;
}

.product-hero .price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.product-hero .price-now {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 500;
  color: var(--pine);
  line-height: 1;
}

.product-hero .price-was {
  font-size: 15px;
  text-decoration: line-through;
  color: var(--muted-ink);
  opacity: .75;
}

.product-hero .save-tag {
  background: var(--sunshine);
  color: var(--pine);
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 100px;
}

/* Cuando el envío se cobra no es una promoción: se dice, no se celebra */
.product-hero .save-tag.ship-paid {
  background: transparent;
  color: var(--muted-ink);
  border: 1px solid var(--accent-line);
  font-weight: 700;
}

.product-hero .envio-nota {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-ink);
  max-width: 42ch;
}

.product-hero .rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted-ink);
}

.product-hero .rating-row .stars {
  color: var(--accent);
  letter-spacing: 2px;
}

.product-hero .info .btn-primary,
.scarcity-cta .btn-primary {
  background: var(--accent-deep);
  color: #FFFFFF;
  box-shadow: none;
}

.product-hero .info .btn-primary:hover,
.scarcity-cta .btn-primary:hover {
  background: var(--pine-soft);
}

.product-hero .info .btn-primary {
  justify-content: center;
  padding: 17px 28px;
  font-size: 17px;
  box-shadow: 0 14px 30px -12px rgba(25, 83, 43, .5);
}

.checkout-cta svg {
  width: 21px;
  height: 21px;
}

.checkout-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}

.checkout-cta-text strong {
  font-weight: 700;
}

.checkout-cta-text em {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  opacity: .85;
}

.product-hero .trust-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--muted-ink);
  padding-top: 10px;
  border-top: 1px solid rgba(25, 83, 43, .12);
  margin-top: 2px;
  line-height: 1.5;
}

.product-hero .trust-note svg {
  width: 16px;
  height: 16px;
  color: var(--pine);
  flex-shrink: 0;
  margin-top: 1px;
}

.product-hero .trust-note strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}

.product-hero .highlight-quote {
  display: flex;
  gap: 12px;
  background: var(--paper);
  border: 1px solid rgba(25, 83, 43, .16);
  border-radius: 12px;
  padding: 16px 18px;
}

.product-hero .highlight-quote svg {
  width: 20px;
  height: 20px;
  color: var(--pine);
  flex-shrink: 0;
  margin-top: 2px;
}

.product-hero .highlight-quote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.why-card {
  border-radius: 14px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}

.why-card .n {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
}

.why-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  margin: 8px 0 0;
}

.why-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.care-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: center;
}

.care-row:not(:first-child) {
  margin-top: 60px;
}

.care-row.reverse {
  grid-template-columns: 1.1fr .9fr;
}

.care-row.reverse .care-photo {
  order: 2;
}

.care-photo {
  aspect-ratio: 4/3;
  border-radius: 12px;
  background: linear-gradient(150deg, #DFE1D4, #CFD3C2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--moss);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
}

.care-row .tag-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.care-row h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  margin: 12px 0 12px;
  color: var(--pine);
}

.care-row p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 52ch;
}

.process-list {
  max-width: 620px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
}

.process-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding-bottom: 30px;
  position: relative;
}

.process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 1px;
  background: rgba(25, 83, 43, .18);
}

.process-n {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  z-index: 1;
}

.process-step h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 21px;
  margin: 8px 0 4px;
  color: var(--pine);
}

.process-step p {
  margin: 0;
  font-size: 15px;
  color: var(--muted-ink);
  line-height: 1.5;
}

.includes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.includes-item {
  background: var(--paper);
  border-radius: 12px;
  padding: 24px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.includes-item svg {
  width: 26px;
  height: 26px;
  color: var(--pine);
}

.includes-item span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.scarcity-cta {
  background: var(--pine);
  padding: 72px 24px;
  text-align: center;
}

.scarcity-cta .stock-tag {
  display: inline-block;
  background: var(--sunshine);
  color: var(--pine);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
}

.scarcity-cta h2 {
  color: var(--on-dark);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 300;
  margin: 20px auto 12px;
  max-width: 18ch;
}

.scarcity-cta p {
  color: var(--on-dark-soft);
  font-size: 17px;
  margin: 0 auto 28px;
  max-width: 48ch;
  line-height: 1.55;
}

.scarcity-cta .micro {
  margin-top: 16px;
  color: var(--sage);
  font-size: 13.5px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related-card .pic {
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
}

.related-card .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-card strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--pine);
}

.related-card span {
  font-size: 14.5px;
  color: var(--muted-ink);
}

@media (max-width: 900px) {
  .product-hero .grid {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .care-row,
  .care-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .care-row.reverse .care-photo {
    order: 0;
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .includes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .marquee-bar {
    margin-top: 84px;
  }

  /* En táctil el objetivo debe ser cómodo de acertar con el pulgar. */
  .product-hero .pic .gallery-nav {
    width: 44px;
    height: 44px;
  }

  .product-hero .info {
    padding: 36px 20px;
    gap: 20px;
  }

  .product-hero .price-now {
    font-size: 34px;
  }

  .includes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-list {
    margin-top: 32px;
  }

  .why-grid {
    margin-top: 32px;
    gap: 14px;
  }

  .why-card {
    padding: 24px;
    min-height: 0;
  }

  .care-row:not(:first-child) {
    margin-top: 40px;
  }

  .scarcity-cta {
    padding: 56px 20px;
  }

  .related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .related-card:nth-child(3) {
    display: none;
  }
}

/* ==========================================================================
   Pasarela de pedido — tres pasos con el medidor de envío siempre a la vista.

   La regla del negocio es que desde $60 el envío deja de costar $6. Antes eso
   solo se anunciaba; aquí se puede accionar: el cliente ve cuánto le falta y
   tiene a un toque los bonsáis que cierran esa brecha.
   ========================================================================== */

[hidden] {
  display: none !important;
}

.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 26, 20, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: checkout-fondo-entra .22s ease-out both;
}

/* Cerrar es tan visible como abrir. Sin .closing el modal desaparecía de un
   fotograma al siguiente; app.js la pone, deja correr la salida y recién
   entonces oculta el overlay. */
/* Nombres distintos a los de la entrada, a propósito: con el mismo nombre el
   navegador no arranca una animación nueva y animationend no vuelve a sonar,
   así que el cierre dependía siempre del temporizador de respaldo. */
.checkout-overlay.closing {
  animation: checkout-fondo-sale .2s ease-in both;
}

.checkout-overlay.closing .checkout-panel {
  animation: checkout-sale .2s ease-in both;
}

@keyframes checkout-fondo-entra {
  from {
    opacity: 0;
  }
}

@keyframes checkout-fondo-sale {
  to {
    opacity: 0;
  }
}

@keyframes checkout-sale {
  to {
    opacity: 0;
    transform: translateY(10px) scale(.99);
  }
}

.checkout-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 18px;
  width: 100%;
  max-width: 470px;
  max-height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45);
  animation: checkout-in .28s cubic-bezier(.2, .8, .3, 1);
}

@keyframes checkout-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {

  .checkout-step:not([hidden]),
  .ship-meter.celebra,
  .order-line.es-nueva {
    animation: none;
  }

  /* Duración mínima en vez de none: el cierre espera a animationend, y sin
     animación que termine se quedaría colgado del temporizador de respaldo. */
  .checkout-overlay,
  .checkout-panel,
  .checkout-overlay.closing,
  .checkout-overlay.closing .checkout-panel {
    animation-duration: .01ms;
  }
}

/* --- Cabecera fija: título, cerrar y los tres pasos --- */
.checkout-head {
  flex: none;
  padding: 17px 22px 0;
  background: var(--paper);
}

.checkout-eyebrow {
  padding-right: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: .75;
  margin: 0 0 3px;
}

.checkout-panel h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--pine);
  margin: 0;
  padding-right: 34px;
}

.checkout-close {
  position: absolute;
  top: 15px;
  right: 15px;
  /* Sin este z-index la X queda medio muerta: .checkout-eyebrow lleva opacity,
     eso le crea contexto de apilamiento y, como va después en el DOM, se pinta
     encima del botón y se queda con los clics de su mitad superior. */
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--paper-deep);
  color: var(--pine);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease;
}

.checkout-close:hover {
  background: var(--sage);
}

.checkout-close svg {
  width: 15px;
  height: 15px;
}

.checkout-stepper {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 13px 0 0;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--accent-line);
}

.checkout-stepper li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.checkout-stepper li+li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--accent-line);
  margin-right: 1px;
}

.checkout-stepper li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--muted);
  font-size: 11.5px;
  transition: background .2s ease, color .2s ease;
}

.checkout-stepper li.is-active {
  color: var(--pine);
}

.checkout-stepper li.is-active span {
  background: var(--pine);
  color: #FFFFFF;
}

.checkout-stepper li.is-done {
  color: var(--accent-ink);
}

.checkout-stepper li.is-done span {
  background: var(--sage);
  color: var(--pine-deep);
}

/* --- Cuerpo con scroll --- */
.checkout-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.checkout-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 4px;
}

/* Los pasos entran desde display:none, así que va como animación. El
   desplazamiento es neutro a propósito: sirve igual al avanzar que al volver. */
.checkout-step:not([hidden]) {
  animation: checkout-paso .3s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes checkout-paso {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- Medidor de envío gratis: el corazón de la pasarela --- */
.ship-meter {
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 16px;
  background: #FFF8E1;
  border: 1px solid rgba(255, 202, 38, .55);
}

.ship-meter.is-free {
  background: rgba(169, 199, 154, .28);
  border-color: rgba(47, 107, 62, .38);
}

/* Un pulso corto justo cuando el pedido cruza el umbral: es lo que queremos
   que la gente note, y sin él el cambio de color pasa desapercibido. */
.ship-meter.celebra {
  animation: ship-celebra .55s cubic-bezier(.2, .8, .3, 1);
}

@keyframes ship-celebra {
  35% {
    transform: scale(1.028);
  }
}

.ship-meter-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.ship-meter-msg svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--accent-ink);
}

.ship-meter-msg b {
  color: var(--pine);
}

.ship-meter-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(25, 83, 43, .13);
  overflow: hidden;
}

.ship-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sunshine), #F0A81E);
  transition: width .45s cubic-bezier(.2, .8, .3, 1), background .3s ease;
}

.ship-meter.is-free .ship-meter-fill {
  background: linear-gradient(90deg, var(--moss), var(--pine));
}

.ship-meter-foot {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-ink);
}

@media (prefers-reduced-motion: reduce) {
  .ship-meter-fill {
    transition: none;
  }
}

/* --- Paso 1: las piezas del pedido --- */
.order-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(25, 83, 43, .16);
}

.order-line.es-nueva {
  animation: order-entra .42s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes order-entra {
  from {
    opacity: 0;
    transform: translateY(-6px);
    border-color: var(--sunshine);
  }
}

.order-line img {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--paper-deep);
}

.order-line-text {
  flex: 1;
  min-width: 0;
}

.order-line-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.order-line-text span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.order-line-price {
  flex: none;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--pine);
}

.order-line-drop {
  flex: none;
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  line-height: 0;
  border-radius: 6px;
}

.order-line-drop:hover {
  color: #9B3B2F;
  background: rgba(155, 59, 47, .08);
}

.order-line-drop svg {
  width: 15px;
  height: 15px;
}

/* --- Paso 1: los bonsáis que puedes sumar --- */
.addons-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 4px;
}

.addons-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-ink);
  margin: 0 0 12px;
}

.addon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addon-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  border: 1px solid rgba(25, 83, 43, .16);
  background: var(--paper-deep);
  transition: border-color .18s ease, background .18s ease;
}

.addon-row.is-key {
  border-color: rgba(255, 202, 38, .85);
  background: #FFFCF0;
}

.addon-row img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #FFFFFF;
}

.addon-text {
  flex: 1;
  min-width: 0;
}

.addon-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.addon-text span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.addon-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--sunshine);
  color: #4A3500;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.addon-add {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--pine);
  background: transparent;
  color: var(--pine);
  border-radius: 99px;
  padding: 7px 13px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.addon-add svg {
  width: 13px;
  height: 13px;
}

.addon-add:hover {
  background: var(--pine);
  color: #FFFFFF;
}

.addons-more {
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.addons-empty {
  font-size: 12.5px;
  color: var(--muted-ink);
  margin: 0;
}

/* --- Pasos 2 y 3: formulario --- */
.checkout-step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 14px;
}

.checkout-step label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}

.checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-step input[type="text"],
.checkout-step input[type="tel"],
.checkout-step select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid rgba(25, 83, 43, .25);
  background: #FFFFFF;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  box-sizing: border-box;
}

.checkout-step input:focus,
.checkout-step select:focus {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
}

.payment-option {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(25, 83, 43, .25);
  border-radius: 11px;
  padding: 13px 14px;
  cursor: pointer;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
  background: #FFFFFF;
  transition: border-color .18s ease, background .18s ease;
}

.payment-option:has(input:checked) {
  border-color: var(--pine);
  background: rgba(169, 199, 154, .18);
}

.payment-option input {
  margin: 2px 0 0;
  accent-color: var(--pine);
  flex: none;
}

.payment-option em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

.checkout-bank select {
  margin-bottom: 4px;
}

.checkout-note {
  font-size: 12.5px;
  color: var(--muted-ink);
  line-height: 1.5;
  margin: 4px 0 16px;
}

/* Repaso del pedido en el último paso, para confirmar sin volver atrás */
.checkout-recap {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--paper-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-recap li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--muted-ink);
}

.checkout-recap li b {
  color: var(--ink);
  white-space: nowrap;
}

/* --- Pie fijo: el total y el botón, siempre visibles --- */
.checkout-foot {
  flex: none;
  padding: 12px 22px 15px;
  background: var(--paper);
  border-top: 1px solid var(--accent-line);
  box-shadow: 0 -10px 20px -18px rgba(0, 0, 0, .5);
}

.checkout-desglose {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checkout-desglose li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: var(--muted-ink);
}

.checkout-desglose li b {
  font-weight: 700;
  color: var(--ink);
}

.checkout-desglose .free {
  color: var(--pine);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .05em;
}

.checkout-desglose .was {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 6px;
}

.checkout-desglose li.total {
  border-top: 1px solid var(--accent-line);
  margin-top: 3px;
  padding-top: 8px;
  font-weight: 700;
  color: var(--ink);
}

.checkout-desglose li.total b {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--pine);
}

.checkout-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-foot .btn-primary {
  flex: 1;
  justify-content: center;
  background: var(--accent-deep);
  color: #FFFFFF;
  padding: 14px 22px;
  font-size: 15.5px;
  box-shadow: none;
}

.checkout-foot .btn-primary:hover {
  background: var(--pine-soft);
}

.checkout-back {
  background: none;
  border: 0;
  color: var(--muted-ink);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 2px;
  white-space: nowrap;
}

.checkout-back:hover {
  color: var(--pine);
}

.checkout-foot-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.checkout-foot-note svg {
  width: 13px;
  height: 13px;
  flex: none;
}

@media (max-width: 560px) {
  .checkout-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .checkout-panel {
    max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: 94vh;
  }

  .checkout-head {
    padding: 18px 18px 0;
  }

  /* En el móvil se toca con el pulgar: la X necesita más superficie */
  .checkout-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }

  .checkout-body {
    padding: 14px 18px 4px;
  }

  .checkout-foot {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  }

  .checkout-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-panel h3 {
    font-size: 22px;
  }
}

.rich-footer {
  background: var(--pine-deep);
  color: var(--on-dark-muted);
  padding: 64px 40px 32px;
}

.rich-footer .cols {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr 1fr;
  gap: 40px;
}

/* Sin canal de WhatsApp la cuarta columna no se imprime: el pie se reparte
   entre tres en vez de dejar un hueco a la derecha. */
.rich-footer .cols:not(:has(> :nth-child(4))) {
  grid-template-columns: 1.6fr .9fr .9fr;
}

.rich-footer .brand-col strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  color: var(--on-dark);
}

.rich-footer .brand-col strong .leaf {
  color: var(--accent);
}

.rich-footer .brand-col p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 34ch;
}

.rich-footer h4 {
  font-family: var(--body);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
}

.rich-footer .links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rich-footer a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 14px;
}

.rich-footer a:hover {
  color: var(--accent);
}

.rich-footer .canal-texto {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 10px;
}

.rich-footer .canal-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  background: var(--accent-deep);
  color: #FFFFFF;
  border-radius: 100px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .2s;
}

.rich-footer .canal-btn:hover {
  opacity: .88;
}

.rich-footer .canal-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rich-footer .social {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 14px;
}

.rich-footer .bottom {
  max-width: 1180px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(215, 232, 196, .14);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--on-dark-muted);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .rich-footer .cols {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
}

@media (max-width: 560px) {
  .rich-footer {
    padding: 48px 20px 28px;
  }

  .rich-footer .cols {
    grid-template-columns: 1fr;
  }
}


/* Plan B cuando el navegador bloquea la ventana de WhatsApp */
.checkout-fallback {
  padding: 20px 22px 26px;
}

.checkout-fallback p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
}

.checkout-fallback .checkout-step-label {
  margin-bottom: 12px;
}

.checkout-fallback .btn-primary {
  width: 100%;
  justify-content: center;
}