/* ===========================================================
   DORILA — home.css
   Estilos de la página principal: hero, categorías, productos,
   historia, beneficios, contacto, formulario y carrito.
   Cargar después de base.css solo en index.html.
   =========================================================== */

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position: relative;
  width: 100%;
  max-width: none;
  padding: 0;
  margin-inline: 0;
}

.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-parchment-deep);
}
.hero-image{
  width:100%; height:100%;
  object-fit:cover;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(28, 19, 10, 0.30) 0%, rgba(28, 19, 10, 0.05) 45%, rgba(28, 19, 10, 0.28) 100%);
}
.hero-overlay::before{
  content: "";
  position: absolute;
  inset: -25% -50%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 253, 245, 0.10) 50%, transparent 58%);
  transform: translateX(-120%) skewX(-12deg);
  animation: heroReflejo 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroReflejo{
  0%   { transform: translateX(-120%) skewX(-12deg); }
  55%  { transform: translateX(120%) skewX(-12deg); }
  100% { transform: translateX(120%) skewX(-12deg); }
}

.hero-content{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: calc(var(--space-2) + 2rem) var(--space-1) var(--space-5);
  text-align:center;
  text-wrap-mode: balance;
}

.hero-text{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width: 66ch;
}
.hero-text .eyebrow-mark{ color: var(--color-forest); text-shadow: 1px 1px 0 rgba(255,253,245,0.5); }

.hero-content h1{
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  color: var(--color-forest-deep);
  text-shadow: 1px 1px 0 rgba(255,253,245,0.5);
  text-wrap: balance;
  margin-top: var(--space-2);
}
.hero-content .lead{
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  color: var(--color-forest);
  max-width: 42ch;
  text-shadow: 1px 1px 0 rgba(255,253,245,0.5);
}
.hero-ctas{
  display:flex; flex-wrap:nowrap; justify-content:center; gap: var(--space-1);
  margin-top: var(--space-3);
  width:100%;
}
.hero-ctas .btn{ font-size: var(--fs-small); padding: 0.7em 1.1em; flex: 1 1 auto; min-width:0; }
.hero-ctas .btn-outline{
  border-color: var(--color-forest-deep);
  color: var(--color-forest-deep);
}
.hero-ctas .btn-outline:hover{ background: var(--color-forest-deep); color: var(--color-parchment-soft); }
.hero-ctas .btn-primary{ background: var(--color-salvia); }
.hero-ctas .btn-primary:hover{ background: var(--color-crema); }

@media (max-width: 639px){
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn-outline{ display:none; }
  .hero-ctas .btn-primary{ width:100%; }
  #categorias{ display:none; }
}
.hero-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 0.5rem 1.2rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(44,63,36,0.25);
}
.hero-tag{
  display:flex; align-items:center; gap:0.4em;
  font-size: var(--fs-small); color: var(--color-ink); font-weight:600;
}
.hero-tag svg{ width:16px; height:16px; }

/* ===========================================================
   CATEGORÍAS
   =========================================================== */
.categories{ padding-block: var(--space-3); }
.category-grid{ display:grid; gap:0.5rem; grid-template-columns:repeat(2,1fr); }
.category-card{ position:relative; border:1px solid var(--color-terracotta); border-radius:var(--radius-card); background:var(--color-parchment-soft); cursor:pointer; overflow:hidden; transition:transform var(--transition-fast), box-shadow var(--transition-fast); }
.category-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); }
.category-card-inner{ padding:0.65rem 0.7rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 0.6rem; }
.category-card.is-featured{ background:linear-gradient(135deg, color-mix(in srgb, var(--color-gold) 12%, var(--color-parchment-deep)), var(--color-parchment-deep) 70%); border-color:var(--color-gold); box-shadow:0 0 0 1px color-mix(in srgb, var(--color-gold) 55%, transparent), var(--shadow-card); }
.category-icon{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, var(--color-forest) 12%, transparent); color:var(--color-forest); flex-shrink:0; }
.category-icon svg{ width:17px; height:17px; }
.category-icon img{ width:18px; height:18px; object-fit:contain; }
.category-card h3{ font-family:var(--font-display); font-size:clamp(0.95rem,1vw + 0.75rem,1.05rem); color:var(--color-forest-deep); line-height:1.25; flex:1; }
.category-card p{ color:var(--color-body-soft); font-size:var(--fs-tiny); max-width:30ch; width:100%; }
.category-badge{ align-self:flex-start; background:var(--color-terracotta); color:var(--color-parchment-soft); font-size:var(--fs-tiny); font-weight:700; letter-spacing:0.03em; padding:0.2em 0.65em; border-radius:999px; display:inline-flex; align-items:center; gap:0.35em; box-shadow:0 4px 10px -4px rgba(122,52,25,0.6); }
.category-badge::before{ content:"★"; font-size:0.9em; line-height:1; }
.category-links{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--color-terracotta) 12%, transparent); color:var(--color-terracotta); transition:background var(--transition-fast), transform var(--transition-fast); }
.category-links svg{ width:15px; height:15px; transition:transform var(--transition-fast); }
.category-links:hover{ background:var(--color-terracotta); color:#fff; }
.category-links:hover svg{ transform:translateX(2px); }

/* ===========================================================
   HISTORIA
   =========================================================== */
.story{ padding-block:var(--space-3); background-color:var(--color-parchment); }
.story-text.reveal.is-visible p,
.story-text.reveal.is-visible .story-signature{ text-shadow:0 1px 1px rgb(104 103 101 / 85%), 0 0 14px rgba(250,243,227,0.9); }
.story-grid{ display:grid; gap:var(--space-4); align-items:center; }
.story-media{ display:none; border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--color-parchment-soft); border:var(--border-frame); }
.story-text p{ color:var(--color-black); max-width:var(--max-text); line-height:1.8; }
.story-text p + p{ margin-top:var(--space-2); }
.story-signature{ margin-top:var(--space-3); font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-black); }
.story-cta{ margin-top:var(--space-3); }
.story-cta .btn{ display:inline-flex; }

/* ===========================================================
   TESTIMONIOS (home)
   =========================================================== */
.home-testimonials{ padding-block:var(--space-3); }

/* ===========================================================
   PRODUCTOS
   =========================================================== */
.products{ padding-block:var(--space-3); }
.product-grid{ display:grid; gap:var(--space-2); grid-template-columns:repeat(2,1fr); grid-auto-rows:min-content; }
.product-card{ background:var(--color-parchment-soft); border-radius:14px; overflow:hidden; border:1px solid var(--color-line); box-shadow:var(--shadow-card); display:flex; flex-direction:column; width:100%; cursor:pointer; transition:transform var(--transition-fast), box-shadow var(--transition-fast); }
.product-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(51,35,15,0.55); }
.product-media{ aspect-ratio:1/1; max-height:140px; background:var(--color-parchment-deep); position:relative; overflow:hidden; }
.product-tag{ position:absolute; top:8px; left:8px; background:var(--color-ink); color:var(--color-parchment-soft); font-size:var(--fs-tiny); font-weight:700; letter-spacing:0.03em; padding:0.25em 0.6em; border-radius:999px; text-transform:capitalize; }
.product-body{ padding:var(--space-2) 0.6rem; display:flex; flex-direction:column; gap:0.3rem; flex:1; }
.product-body h3{ font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-ink); line-height:1.2; }
.product-body p{ font-size:var(--fs-tiny); color:var(--color-body-soft); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.product-footer{ margin-top:auto; padding-top:var(--space-1); display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
.product-price{ font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-forest-deep); }
.add-btn{ width:32px; height:32px; border-radius:50%; background:var(--color-terracotta); color:#fff; border:none; display:inline-flex; align-items:center; justify-content:center; transition:transform var(--transition-fast), background var(--transition-fast); flex-shrink:0; }
.add-btn svg{ width:15px; height:15px; }
.add-btn:hover{ background:var(--color-terracotta-deep); transform:scale(1.06); }
.card-link{ margin-top:var(--space-1); display:inline-block; font-size:var(--fs-small); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-terracotta); text-decoration:underline; text-decoration-color:rgba(122,52,25,0.35); text-underline-offset:3px; }
.card-link:hover{ color:var(--color-terracotta-deep); text-decoration-color:currentColor; }

/* Buscador y filtros */
.product-tools{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; margin-bottom:var(--space-3); }
.search-wrap{ position:relative; flex:1 1 260px; max-width:380px; }
.search-wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--color-body-soft); pointer-events:none; }
.search-input{ width:100%; padding:0.8em 1em 0.8em 2.6em; border-radius:999px; border:2px solid var(--color-line); background:var(--color-parchment-soft); font-family:var(--font-body); font-size:var(--fs-mid); color:var(--color-ink); transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
.search-input:focus{ outline:none; border-color:var(--color-terracotta); box-shadow:0 0 0 3px rgba(156,70,38,0.15); }
.search-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:none; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:none; background:var(--color-line); color:var(--color-ink); font-size:var(--fs-tiny); line-height:1; cursor:pointer; }
.search-clear.is-visible{ display:inline-flex; }
.product-filters{ display:flex; flex-wrap:wrap; gap:0.25rem; }
.filter-btn{ border:2px solid var(--color-line); background:var(--color-parchment-soft); color:var(--color-body); font-family:var(--font-body); font-size:clamp(0.68rem,0.2vw + 0.64rem,0.72rem); font-weight:700; padding:0.35em 0.7em; border-radius:999px; cursor:pointer; transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); text-transform:capitalize; }
.filter-btn:hover{ border-color:var(--color-forest); color:var(--color-forest-deep); }
.filter-btn.is-active{ background:var(--color-forest-deep); color:var(--color-parchment-soft); border-color:var(--color-forest-deep); }
.product-count{ font-size:var(--fs-small); color:var(--color-body-soft); margin-top:var(--space-2); }
.product-empty{ text-align:center; color:var(--color-body-soft); padding:var(--space-4); font-style:italic; }

/* Modal de la planta */
.modal-media{ background:var(--color-parchment-deep); position:relative; }
.modal-media img.lazy-img{ display:block; }
.modal-img2{ position:absolute; top:10px; right:10px; width:44px; height:44px; padding:0; border:2px solid var(--color-parchment-soft); border-radius:12px; background:none; cursor:pointer; overflow:hidden; box-shadow:0 4px 12px -4px rgba(51,35,15,0.5); transition:transform var(--transition-fast), border-color var(--transition-fast); }
.modal-img2:hover{ transform:translateY(-2px); border-color:var(--color-terracotta); }
.modal-img2 img{ width:100%; height:100%; object-fit:cover; }
.modal-img2[hidden]{ display:none; }
.modal-cat{ position:absolute; left:14px; bottom:-14px; background:var(--color-terracotta); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; padding:0.4em 1em; border-radius:999px; text-transform:uppercase; box-shadow:0 6px 14px -6px rgba(122,52,25,0.7); }
.modal-id{ position:absolute; right:14px; bottom:-14px; background:var(--color-ink); color:var(--color-parchment-soft); font-size:0.72rem; font-weight:700; letter-spacing:0.06em; padding:0.4em 1em; border-radius:999px; box-shadow:0 6px 14px -6px rgba(28,19,10,0.6); }
.modal-body h3{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--color-ink); margin-top:var(--space-2); }
.modal-scientific{ margin-top:0.2rem; font-style:italic; font-size:var(--fs-mid); color:var(--color-forest-deep); }
.modal-scientific strong{ font-style:normal; }
.modal-desc{ margin-top:var(--space-2); font-size:var(--fs-small); color:var(--color-body); }
.modal-props{ margin-top:var(--space-3); }
.modal-props h4{ font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-ink); margin-bottom:var(--space-2); }
.modal-props ul{ display:flex; flex-direction:column; gap:0.5rem; }
.modal-props li{ display:flex; gap:0.6rem; align-items:flex-start; font-size:var(--fs-small); color:var(--color-body); }
.modal-props li svg{ width:17px; height:17px; flex-shrink:0; color:var(--color-forest); margin-top:2px; }
.modal-note{ margin-top:var(--space-3); padding:var(--space-2); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--color-gold) 12%, transparent); border-left:3px solid var(--color-gold); font-size:var(--fs-tiny); color:var(--color-body-soft); }
.modal-more{ margin-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-2); }
.modal-more .btn{ flex:1 1 auto; }
.products-more{ text-align:center; margin-top:var(--space-4); }

/* ===========================================================
   BENEFICIOS
   =========================================================== */
.benefits{ padding-block:var(--space-5); background:var(--color-parchment-deep); color:var(--color-forest-deep); }
.benefits .section-head h2{ color:var(--color-forest-deep); }
.benefits .section-head p{ color:rgba(244,233,211,0.7); }
.benefit-grid{ display:grid; gap:var(--space-3); grid-template-columns:1fr; }
.benefit-item{ display:flex; gap:var(--space-2); align-items:flex-start; }
.benefit-item svg{ width:30px; height:30px; color:var(--color-gold); flex-shrink:0; margin-top:2px; }
.benefit-item img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; margin-top:2px; }
.benefit-item h3{ font-family:var(--font-display); font-size:clamp(1.05rem,0.5vw + 0.95rem,1.15rem); color:var(--color-forest-deep); margin-bottom:0.2rem; }
.benefit-item p{ font-size:var(--fs-small); color:var(--color-black); }

/* ===========================================================
   CONTACTO
   =========================================================== */
.contact{ padding-block:var(--space-3); background:var(--color-parchment-deep); }
.contact-grid{ display:grid; gap:var(--space-4); }
.contact-stack{ display:grid; gap:var(--space-4); }
.contact-stack .contact-card{ max-width:640px; margin-inline:auto; width:100%; }
.contact-card{ border:var(--border-frame); border-radius:24px; background:var(--color-parchment-soft); padding:clamp(1.5rem,7vw,2.5rem) clamp(1.1rem,6vw,1.5rem); min-width:0; }
.contact-card h2{ font-family:var(--font-display); font-size:var(--fs-h2); color:var(--color-ink); overflow-wrap:break-word; }
.contact-card p{ margin-top:var(--space-2); color:var(--color-body-soft); max-width:40ch; }
.contact-address{ font-style:normal; }
.contact-phone{ margin-top:var(--space-3); display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-display); font-size:clamp(1.35rem,7vw,2.1rem); color:var(--color-terracotta-deep); word-break:keep-all; }
.contact-phone svg{ width:1em; height:1em; color:var(--color-forest); flex-shrink:0; }
.contact-actions{ margin-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-2); }
.contact-actions .btn{ flex:1 1 auto; }
.contact-meta{ margin-top:var(--space-3); }
.contact-meta-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.contact-meta-item{ display:flex; flex-direction:column; gap:0.25rem; }
.contact-meta-item h3{ font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-ink); }
.contact-meta-item p{ font-size:var(--fs-small); color:var(--color-body-soft); }
.contact-meta-item p strong{ color:var(--color-ink); }

/* ===========================================================
   FORMULARIO DE SOLICITAR INFORMACIÓN
   =========================================================== */
.info-request{ padding-block:var(--space-5); }
.info-request-card{ border:var(--border-frame); border-radius:24px; background:var(--color-parchment-soft); padding:clamp(1.5rem,7vw,2.5rem) clamp(1.1rem,6vw,1.5rem); max-width:640px; margin-inline:auto; }
.info-request-card h2{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--color-ink); }
.info-request-card > p{ margin-top:var(--space-2); color:var(--color-body-soft); max-width:46ch; font-size:var(--fs-small); }
.info-form{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2); }
.info-form .field{ display:flex; flex-direction:column; gap:0.35rem; }
.info-form label{ font-size:var(--fs-small); font-weight:700; color:var(--color-ink); }
.info-form label em{ font-style:normal; color:var(--color-body-soft); font-weight:400; }
.info-form input,
.info-form select,
.info-form textarea{ width:100%; min-width:0; padding:0.85em 1em; border-radius:12px; border:2px solid var(--color-line); background:var(--color-parchment); font-family:var(--font-body); font-size:var(--fs-mid); color:var(--color-ink); transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
.info-form input:focus,
.info-form select:focus,
.info-form textarea:focus{ outline:none; border-color:var(--color-terracotta); box-shadow:0 0 0 3px rgba(156,70,38,0.15); }
.info-form textarea{ resize:vertical; min-height:110px; }
.info-form .btn{ align-self:flex-start; }
.info-form-note{ font-size:var(--fs-small); color:var(--color-body-soft); }
.info-success{ display:none; margin-top:0.6rem; color:var(--color-forest-deep); font-weight:700; font-size:var(--fs-small); }
.info-success.is-visible{ display:block; }

/* ===========================================================
   CARRITO — página de compra, verificación y orden
   =========================================================== */
.cart-page{ position:fixed; inset:0; z-index:150; background:var(--color-parchment); overflow-y:auto; display:none; }
.cart-page.is-open{ display:block; }
.cart-page-inner{ max-width:760px; margin-inline:auto; padding:0 var(--space-3) var(--space-4); min-height:100%; display:flex; flex-direction:column; }
.cart-page-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:var(--space-2); padding-block:var(--space-3); background:var(--color-parchment); border-bottom:2px solid var(--color-line); }
.cart-page-head h2{ font-family:var(--font-display); font-size:clamp(1.3rem,0.6vw + 1.15rem,1.5rem); color:var(--color-ink); flex:1; }
.cart-close-x{ width:42px; height:42px; border-radius:50%; border:2px solid var(--color-ink); background:transparent; color:var(--color-ink); display:inline-flex; align-items:center; justify-content:center; transition:background var(--transition-fast), color var(--transition-fast); }
.cart-close-x:hover{ background:var(--color-ink); color:var(--color-parchment-soft); }
.cart-close-x svg{ width:18px; height:18px; }
.cart-empty{ text-align:center; padding-block:var(--space-5); }
.cart-empty-img{ width:96px; height:96px; object-fit:contain; margin-inline:auto; }
.cart-empty p{ margin-block:var(--space-3); color:var(--color-body-soft); }
.cart-list{ display:flex; flex-direction:column; gap:var(--space-2); padding-block:var(--space-3); }
.cart-item{ display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; background:var(--color-parchment-soft); border:1px solid var(--color-line); border-radius:16px; padding:var(--space-2); }
.cart-item-img{ width:56px; height:56px; object-fit:cover; border-radius:12px; flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h3{ font-family:var(--font-display); font-size:var(--fs-mid); color:var(--color-ink); line-height:1.2; }
.cart-item-info p{ font-size:var(--fs-tiny); color:var(--color-body-soft); margin-top:2px; }
.cart-qty{ display:inline-flex; align-items:center; gap:0.8rem; margin-top:0.5rem; border:1px solid var(--color-line); border-radius:999px; padding:0.25rem 0.8rem; font-weight:700; color:var(--color-ink); }
.cart-qty button{ border:none; background:transparent; color:var(--color-terracotta); font-size:var(--fs-mid); line-height:1; width:22px; padding:0; }
.cart-qty span{ min-width:1.4ch; text-align:center; }
.cart-item-side{ display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; margin-left:auto; }
.cart-item-side strong{ font-family:var(--font-display); color:var(--color-forest-deep); font-size:var(--fs-mid); }
.cart-item-side button{ border:none; background:transparent; font-size:var(--fs-tiny); color:var(--color-terracotta); text-decoration:underline; padding:0; }
.cart-page-foot{ margin-top:auto; position:sticky; bottom:0; background:var(--color-parchment); border-top:2px solid var(--color-line); padding-block:var(--space-3); }
.cart-subtotal{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); color:var(--color-body); }
.cart-subtotal strong{ font-weight:700; color:var(--color-ink); font-size:clamp(1.1rem,0.5vw + 1rem,1.25rem); }
.cart-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.cart-actions .btn{ flex:1 1 auto; }

/* Modal de verificación / orden */
.cart-modal{ position:fixed; inset:0; z-index:160; display:none; align-items:center; justify-content:center; padding:var(--space-3); }
.cart-modal.is-open{ display:flex; }
.cart-modal-scrim{ position:absolute; inset:0; background:rgba(28,19,10,0.55); }
.cart-modal-card{ position:relative; width:100%; max-width:480px; max-height:86vh; overflow-y:auto; background:var(--color-parchment-soft); border:var(--border-frame); border-radius:22px; padding:var(--space-3); box-shadow:0 30px 60px -20px rgba(20,12,5,0.5); }
.cart-modal-card h3{ font-family:var(--font-display); font-size:clamp(1.2rem,0.4vw + 1.1rem,1.3rem); color:var(--color-ink); }
.cart-modal-card > p{ margin-top:var(--space-1); font-size:var(--fs-small); color:var(--color-body-soft); }
.verify-list{ display:flex; flex-direction:column; gap:0.5rem; margin-top:var(--space-3); }
.verify-list li{ display:flex; justify-content:space-between; gap:var(--space-2); font-size:var(--fs-small); color:var(--color-body); }
.verify-list strong{ color:var(--color-ink); }
.verify-total{ margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px dashed var(--color-line); display:flex; justify-content:space-between; font-size:var(--fs-mid); color:var(--color-ink); }

/* Orden de compra */
.order-card{ max-width:560px; }
.order-head{ display:flex; align-items:center; gap:var(--space-2); border-bottom:2px solid var(--color-line); padding-bottom:var(--space-2); }
.order-logo{ width:46px; height:46px; object-fit:cover; border-radius:50%; }
.order-head h3{ font-size:clamp(1.2rem,0.4vw + 1.1rem,1.35rem); }
.order-number{ font-weight:700; color:var(--color-terracotta-deep); font-size:var(--fs-tiny); margin-top:2px; }
.order-date{ font-size:var(--fs-tiny); color:var(--color-body-soft); margin-top:2px; }
.order-receipt{ margin-top:var(--space-3); background:#fff; border:1px solid var(--color-line); border-radius:14px; padding:var(--space-2); }
.order-items{ display:flex; flex-direction:column; gap:0.5rem; }
.order-items li{ display:flex; justify-content:space-between; gap:var(--space-2); font-size:var(--fs-small); color:var(--color-body); }
.order-items li .item-name{ color:var(--color-ink); font-weight:600; }
.order-total{ margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px dashed var(--color-line); display:flex; justify-content:space-between; font-weight:700; font-size:clamp(1rem,0.5vw + 0.9rem,1.15rem); color:var(--color-forest-deep); }
.order-note{ margin-top:var(--space-3); font-size:var(--fs-tiny); color:var(--color-body-soft); }

/* Paso de verificación / orden */
.step-note{
  display:inline-flex; align-items:center; gap:0.4em;
  margin-top:var(--space-1);
  font-size:var(--fs-tiny); font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--color-terracotta-deep);
  background:color-mix(in srgb, var(--color-gold) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  border-radius:999px;
  padding:0.35em 0.9em;
  width:fit-content;
}

/* Acciones de la orden: WhatsApp destacado, imprimir/volver iguales */
.order-actions{ flex-direction:column; }
.order-actions > .btn{ flex:none; width:100%; }
.order-actions-secondary{ display:flex; flex-wrap:wrap; gap:var(--space-2); width:100%; }
.order-actions-secondary .btn{ flex:1 1 auto; }

@media print{
  body *{ visibility:hidden; }
  .order-receipt, .order-receipt *{ visibility:visible; }
  .order-receipt{ position:absolute; left:0; top:0; width:100%; border:1px solid #999 !important; box-shadow:none !important; }
  .order-items{ font-size:12px !important; }
  .order-total{ font-size:14px !important; }
}

/* ===========================================================
   BREAKPOINTS
   =========================================================== */
@media (min-width:480px){
  .story{ background-image:linear-gradient(to bottom, color-mix(in srgb, var(--color-parchment-soft) 16%, transparent) 0%, color-mix(in srgb, var(--color-parchment-soft) 60%, transparent) 100%), url(img/girasol_bg.webp); background-color:var(--color-parchment-deep); background-size:cover; background-position:center; }
  .story-media{ display:block; }
}
@media (min-width:640px){
  .category-grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
  .category-card-inner{ padding:0.8rem 0.9rem; gap:0.5rem 0.7rem; }
  .category-icon{ width:38px; height:38px; }
  .category-icon svg{ width:19px; height:19px; }
  .category-icon img{ width:20px; height:20px; }
  .category-card h3{ font-size:clamp(1rem,0.6vw + 0.9rem,1.1rem); }
  .category-links{ width:30px; height:30px; }
  .benefit-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .product-media{ max-height:180px; }
  .product-body{ padding:var(--space-2); }
  .product-filters{ gap:0.35rem; }
  .filter-btn{ font-size:var(--fs-tiny); padding:0.4em 0.9em; }
  .story{ background-image:none; background-color:var(--color-parchment-deep); }
  .story-text.reveal.is-visible p,
  .story-text.reveal.is-visible .story-signature{ text-shadow:none; }
  .cart-item{ flex-wrap:nowrap; }
  .cart-item-img{ width:64px; height:64px; }
  .cart-item-side{ margin-left:0; }
}
@media (min-width:860px){
  .story-grid{ grid-template-columns:1fr 1fr; }
  .story-grid.reverse .story-media{ order:2; }
  .contact-stack{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
}
@media (min-width:1000px){
  .hero-content{ min-height:92vh; padding:clamp(4rem,12vw,8rem) var(--space-4) var(--space-6); }
  .category-grid{ grid-template-columns:repeat(3,1fr); }
  .benefit-grid{ grid-template-columns:repeat(3,1fr); }
  .home-testimonials { padding-block: var(--space-4);}
  .categories { padding-block: var(--space-4);}
  .contact {padding-block: var(--space-5);}
}
@media (min-width:1180px){
  .product-grid{ grid-template-columns:repeat(5,1fr); }
}