/* =========================================================
   HiiCBD — Design tokens
   Palette: warm white dominant, deep botanical green accent,
   near-black ink for contrast. Editorial, restrained, premium.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper: #FBFAF7;
  --paper-deep: #F3F1EA;
  --ink: #14170F;
  --ink-soft: #4A4E42;
  --green: #3E9142;
  --green-bright: #5FBE63;
  --line: #E2DFD4;
  --white: #FFFFFF;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* ---------- Page-load progress bar ---------- */
.page-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--green); z-index:9999;
  box-shadow:0 0 8px rgba(62,145,66,0.6);
  transition:width .5s ease, opacity .35s ease;
}
.page-progress.done{ width:100%; }
.page-progress.hide{ opacity:0; }
html{ overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

.accent{ color:var(--green); }
.accent-bright{ color:var(--green-bright); }

:focus-visible{ outline:2px solid var(--green-bright); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:2px;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{ background:var(--green); color:var(--white); }
.btn-primary:hover{ background:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }

/* ---------- Promo banner ---------- */
.promo-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green); color:var(--white);
  text-align:center; padding:9px 16px; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s;
  position:sticky; top:76px; z-index:49;
}
.promo-banner svg{ flex-shrink:0; }
.promo-banner:hover{ background:var(--ink); }
.promo-text-wrap{ position:relative; display:inline-block; height:1.3em; width:250px; }
.promo-text{
  position:absolute; left:50%; top:0;
  display:inline-flex; align-items:center; gap:8px;
  opacity:0; white-space:nowrap;
  transform:translateX(calc(-50% + 14px));
  animation: promo-cycle 18s ease-in-out infinite;
}
.promo-text svg{ flex-shrink:0; }
.promo-text:nth-child(1){ animation-delay:0s; }
.promo-text:nth-child(2){ animation-delay:6s; }
.promo-text:nth-child(3){ animation-delay:12s; }
@keyframes promo-cycle{
  0%{ opacity:0; transform:translateX(calc(-50% + 14px)); }
  4.5%{ opacity:1; transform:translateX(-50%); }
  20%{ opacity:1; transform:translateX(-50%); }
  25%{ opacity:0; transform:translateX(calc(-50% - 14px)); }
  100%{ opacity:0; transform:translateX(calc(-50% - 14px)); }
}
@media (prefers-reduced-motion: reduce){
  .promo-text{ animation:none; opacity:0; transform:translateX(-50%); }
  .promo-text:first-child{ opacity:1; }
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(251,250,247,0.92);
  backdrop-filter:blur(8px);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  max-width:none;
  padding:0 28px;
  position:relative;
}
@media (min-width:881px){
  .site-header .main-nav{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
  }
}
.logo{ font-family:var(--serif); font-size:22px; font-weight:600; display:inline-flex; align-items:center; }
.logo span{ color:var(--green); }
.logo img{ height:34px; width:auto; display:block; }
@media (max-width:880px){ .logo img{ height:28px; } }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav > ul{ display:flex; gap:32px; }
.main-nav a{ font-size:14px; position:relative; padding:4px 0; color:inherit; }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--green); transition:width .25s var(--ease);
}
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:22px; }
.header-actions .btn-ghost{ border-color:var(--ink); color:var(--ink); }
.header-actions .btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.icon-btn{ background:none; border:none; cursor:pointer; padding:4px; color:var(--ink); }

/* Cart */
.cart-btn{ position:relative; display:flex; align-items:center; color:var(--ink); transition:color .2s; }
.cart-btn:hover{ color:var(--green); }
.cart-count{
  position:absolute; top:-7px; right:-9px;
  background:var(--green); color:var(--white);
  font-size:10px; font-weight:600; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.cart-btn.has-items .cart-count{ animation: gentle-vibrate 4s ease-in-out infinite; }

/* Productos dropdown */
.has-dropdown{ position:relative; display:flex; align-items:center; }
.dropdown-toggle{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  padding:4px 0;
}
.dropdown-arrow{
  background:none; border:none; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; padding:4px 0 4px 5px;
}
.dropdown-arrow svg{ transition:transform .25s var(--ease); display:block; }
.has-dropdown.open .dropdown-arrow svg,
.has-dropdown:hover .dropdown-arrow svg,
.has-dropdown:focus-within .dropdown-arrow svg{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--white); border:1px solid var(--line);
  min-width:240px; padding:8px 0;
  opacity:0; visibility:hidden;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  box-shadow:0 18px 40px rgba(20,23,15,0.10);
  z-index:10;
}
.dropdown::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px; background:var(--white);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown a{ display:block; padding:10px 24px; font-size:13.5px; letter-spacing:.01em; color:var(--ink); }
.dropdown a:hover{ color:var(--green); background:var(--paper-deep); }
.dropdown a::after{ content:none; }

@media (max-width:880px){
  .has-dropdown{ border-bottom:1px solid var(--line); }
  .dropdown-toggle{ flex:1; padding:16px 0; font-size:17px; }
  .dropdown-arrow{ padding:16px 4px 16px 10px; }
  .dropdown{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; min-width:0; background:none;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .3s var(--ease), padding .3s var(--ease);
  }
  .dropdown::before{ content:none; }
    /* Eran 280px cuando el menú tenía cinco entradas. Con nueve se cortaba y
     Packs, Aceites, Cosmética y Mayoristas quedaban invisibles en el móvil.
     Con un tope holgado caben todas y la animación sigue funcionando. */
  .has-dropdown.open .dropdown{ max-height:640px; padding:2px 0 14px 14px; }
  .dropdown a{ padding:10px 0; font-size:15px; }
}

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; width:32px; height:32px; position:relative; }
.main-nav-contact{ display:none; }
.nav-toggle span{ display:block; width:22px; height:1px; background:var(--ink); margin:5px 0; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 880px){
  .site-header .wrap{ height:64px; }
  .promo-banner{ top:64px; }
  .main-nav{
    position:fixed; inset:64px 0 0 0; z-index:40;
    background:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 440'%3E%3Cg fill='none' stroke='%233E9142' stroke-width='1.2' stroke-opacity='0.06'%3E%3Cpath d='M200,420 C182,330 176,150 200,30 C224,150 218,330 200,420 Z' transform='rotate(-56 200 420)'/%3E%3Cpath d='M200,420 C184,340 179,180 200,60 C221,180 216,340 200,420 Z' transform='rotate(-28 200 420)'/%3E%3Cpath d='M200,420 C185,345 181,200 200,90 C219,200 215,345 200,420 Z'/%3E%3Cpath d='M200,420 C184,340 179,180 200,60 C221,180 216,340 200,420 Z' transform='rotate(28 200 420)'/%3E%3Cpath d='M200,420 C182,330 176,150 200,30 C224,150 218,330 200,420 Z' transform='rotate(56 200 420)'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right -60px bottom -40px; background-size:340px;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:8px var(--pad) 0; transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; gap:0; width:100%; padding-top:20px; }
  .main-nav > ul > li{ border-bottom:1px solid var(--line); width:100%; }
  .main-nav > ul > li.has-dropdown{ border-bottom:none; flex-wrap:wrap; }
  .main-nav .dropdown{ width:100%; }
  .has-dropdown.open .dropdown{ transform:none; }
  .main-nav a{ display:block; padding:17px 0; font-family:var(--serif); font-size:21px; color:var(--ink); }
  .main-nav > ul > li > a[aria-current="page"]{ color:var(--green); }
  .main-nav .dropdown-toggle{ font-family:var(--serif); font-size:21px; padding:17px 0; }
  .dropdown li{ border-bottom:none; }
  .dropdown a{ font-family:var(--sans); font-size:16px; color:var(--ink-soft); padding:11px 0 !important; }

  .main-nav-contact{
    display:flex; flex-direction:column; gap:2px;
    padding:18px 0 28px; margin-top:12px; border-top:1px solid var(--line);
  }
  .main-nav-contact a{
    display:flex; align-items:center; gap:10px;
    padding:9px 0 !important; font-family:var(--sans) !important; font-size:14.5px !important;
    color:var(--ink-soft);
  }
  .main-nav-contact a:hover{ color:var(--green); }
  .main-nav-contact svg{ color:var(--green); flex-shrink:0; }

  .nav-toggle{ display:block; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:13px; color:var(--ink-soft); padding:20px 0; }
.breadcrumb a:hover{ color:var(--green); }

/* ---------- Hero fold wrapper: keeps trust bar pinned to the bottom of the first screen ---------- */
.hero-fold{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:calc(100vh - 116px);
}
@media (max-width:880px){ .hero-fold{ min-height:auto; display:block; } .trust{ margin-top:36px; } }

/* ---------- Hero ---------- */
.hero{ padding:clamp(14px,3vw,36px) 0 0; position:relative; overflow:hidden; }
.hero-leaf{
  position:absolute; top:-8%; right:-6%; z-index:0;
  width:clamp(320px,38vw,560px); height:auto;
  color:var(--green); opacity:0.07;
  pointer-events:none;
}
.hero-content{ text-align:center; max-width:740px; margin:0 auto; position:relative; z-index:1; }
.hero h1{ font-size:clamp(28px,5.5vw,52px); line-height:1.08; }
.hero-slogan{
  margin-top:8px; font-family:var(--sans); font-weight:600;
  font-size:clamp(12px,1.6vw,17px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
  opacity:0;
  animation: slogan-reveal 1.5s cubic-bezier(.16,.84,.44,1) .35s forwards;
}
@keyframes slogan-reveal{
  0%{ opacity:0; letter-spacing:-.02em; filter:blur(4px); }
  55%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; letter-spacing:.14em; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slogan{ animation:none; opacity:1; }
  .hero-video-leaf{ animation:none; }
}
.hero-cta{ display:flex; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; padding-bottom:0; }
.hero-cta .btn{ padding:14px 30px; font-size:15px; }

.hero-video{ margin-top:10px; }
.hero-video-frame{
  width:100%; max-width:640px; margin:0 auto;
  height:clamp(160px,20vw,280px);
  background:var(--paper-deep);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.hero-video-leaf{
  position:absolute; top:50%; left:50%;
  width:clamp(200px,34vw,320px); height:auto;
  color:var(--green); opacity:0.08;
  transform:translate(-50%,-50%);
  animation: leaf-drift 70s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes leaf-drift{
  0%{ transform:translate(-50%,-50%) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(360deg); }
}
.hero-carousel{ position:absolute; inset:0; }
.hero-video-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-carousel-link{ position:absolute; inset:0; display:block; cursor:pointer; }
.hero-carousel-link:hover .carousel-slide.active{ filter:brightness(0.97); }
.carousel-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1.2s ease;
}
.carousel-slide.active{ opacity:1; }
.carousel-slide:nth-child(1){ background:
  radial-gradient(120% 140% at 12% 18%, rgba(95,190,99,.15), transparent 55%),
  linear-gradient(135deg, var(--paper-deep), #ECE9DF); }
.carousel-slide:nth-child(2){ background:
  radial-gradient(120% 140% at 88% 82%, rgba(95,190,99,.13), transparent 55%),
  linear-gradient(135deg, #ECE9DF, var(--paper-deep)); }
.carousel-slide:nth-child(3){ background:
  radial-gradient(120% 140% at 50% 8%, rgba(95,190,99,.15), transparent 55%),
  linear-gradient(135deg, var(--paper-deep), #E4E1D5); }
.carousel-slide span{
  position:relative; z-index:2;
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  background:rgba(251,250,247,0.9); padding:9px 18px; border-radius:2px;
  border:1px solid var(--line);
}
.hero-video-frame::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(44,74,46,0.05), transparent 55%);
  pointer-events:none; z-index:1;
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(251,250,247,0.9); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:3; transition:background .2s, transform .2s;
}
.carousel-arrow:hover{ background:var(--white); }
.carousel-arrow.prev{ left:18px; }
.carousel-arrow.next{ right:18px; }
@media (max-width:720px){
  .hero-video-frame{ height:clamp(140px,42vw,200px); }
  .carousel-arrow{ width:34px; height:34px; }
  .carousel-slide span{
    max-width:calc(100% - 116px); font-size:10px; padding:8px 12px;
    text-align:center; line-height:1.5;
  }
}

/* ---------- Feature icons ---------- */
.features{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-deep); }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.features-grid li{ padding:48px 30px; border-left:1px solid var(--line); text-align:center; }
.features-grid li:first-child{ border-left:none; }
.features-grid svg{ margin:0 auto 18px; display:block; color:var(--green); }
.features-grid h3{ font-size:16px; margin-bottom:10px; }
.features-grid p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; }
@media (max-width:880px){
  .features-grid{ grid-template-columns:1fr 1fr; }
  .features-grid li{ border-left:none; border-top:1px solid var(--line); }
  .features-grid li:nth-child(odd){ border-right:1px solid var(--line); }
}
@media (max-width:560px){
  .features-grid{ grid-template-columns:1fr; }
  .features-grid li:nth-child(odd){ border-right:none; }
}

/* ---------- Trust bar ---------- */
.trust{ margin-top:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-deep); }
.trust ul{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust li{ padding:14px var(--pad); border-left:1px solid var(--line); }
.trust li:first-child{ border-left:none; }
.trust-num{ display:block; font-family:var(--serif); font-size:15px; color:var(--green); margin-bottom:6px; }
.trust-label{ font-size:14px; color:var(--ink-soft); }
@media (max-width:880px){ .trust ul{ grid-template-columns:1fr 1fr; } .trust li{ border-left:none; border-top:1px solid var(--line); } .trust li:nth-child(odd){ border-right:1px solid var(--line); } }

/* ---------- Section shell ---------- */
.section{ padding:clamp(64px,9vw,120px) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(28px,3.4vw,42px); }
.section-head p{ color:var(--ink-soft); max-width:40ch; }
.section-link{ font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap; }
.section-link:hover{ color:var(--green); border-color:var(--green); }

/* ---------- Category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cat-card{ background:var(--paper); padding:36px 28px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; transition:background .3s var(--ease); }
.cat-card:hover{ background:var(--white); }
.cat-card .cat-visual{ aspect-ratio:1/1; background:var(--paper-deep); margin-bottom:20px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12px; overflow:hidden; }
.cat-card .cat-visual img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.cat-card:hover .cat-visual img{ transform:scale(1.04); }
.cat-card h3{ font-size:19px; margin-bottom:8px; }
.cat-card p{ font-size:14px; color:var(--ink-soft); }
.cat-card .cat-link{ margin-top:18px; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.tick-list{ margin-top:12px; }
.tick-list li{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px; line-height:1.3; }
.tick-list li svg{ flex-shrink:0; color:var(--green); }
.product-card .tick-list{ margin-top:8px; }
@media (max-width:960px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
.cat-grid.articles-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .cat-grid.articles-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---------- Philosophy / story ---------- */
.story{ background:var(--ink); color:var(--paper); }
.story .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,6vw,90px); align-items:center; padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(64px,9vw,120px); }
.story h2{ font-size:clamp(26px,3.2vw,38px); color:var(--white); }
.story p{ color:#C9CBC1; margin-top:20px; font-size:17px; line-height:1.7; }
.story-mark{ font-family:var(--serif); font-size:clamp(64px,8vw,120px); color:var(--green-bright); line-height:1; }
.story-photo{ border-radius:2px; overflow:hidden; }
.story-photo img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
@media (max-width:720px){ .story-photo{ order:-1; } .story-photo img{ aspect-ratio:16/10; } }
@media (max-width:880px){ .story .wrap{ grid-template-columns:1fr; } }

/* ---------- Newsletter ---------- */
.newsletter{ border-top:1px solid var(--line); }
.newsletter .wrap{ padding-top:clamp(56px,8vw,90px); padding-bottom:clamp(56px,8vw,90px); text-align:center; }
.newsletter h2{ font-size:clamp(26px,3.2vw,36px); }
.newsletter p{ color:var(--ink-soft); margin-top:14px; }
.newsletter-form{ display:flex; gap:10px; max-width:440px; margin:30px auto 0; }
.newsletter-form input{ flex:1; padding:14px 16px; border:1px solid var(--line); background:var(--white); font-family:var(--sans); font-size:14px; border-radius:2px; }
.newsletter-form input:focus{ border-color:var(--green); }

/* ---------- Footer newsletter banner ---------- */
.footer-newsletter{ background:var(--ink); color:var(--paper); }
.footer-newsletter-inner{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  padding:12px 20px; max-width:1000px; margin:0 auto;
}
.footer-newsletter-inner p{ font-size:14.5px; color:#E7E6DE; max-width:46ch; }
.footer-newsletter-form{ display:flex; gap:10px; flex-shrink:0; }
.footer-newsletter-form input{
  padding:11px 14px; border:1px solid #3A3D33; background:transparent; color:var(--paper);
  font-family:var(--sans); font-size:13.5px; border-radius:2px; min-width:220px;
}
.footer-newsletter-form input::placeholder{ color:#9A9C90; }
.footer-newsletter-form input:focus{ border-color:var(--green-bright); }
@media (max-width:640px){
  .footer-newsletter-inner{ flex-direction:column; align-items:flex-start; }
  .footer-newsletter-form{ width:100%; }
  .footer-newsletter-form input{ flex:1; min-width:0; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid rgba(255,255,255,0.08); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 0.85fr 1fr 0.85fr; gap:clamp(20px,2.4vw,38px); padding:24px 20px 14px; max-width:1240px; margin:0 auto; align-items:start; }
.footer-grid h4{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:10px; color:rgba(255,255,255,.5); }
.footer-grid li{ margin-bottom:5px; }
.footer-grid a{ font-size:13px; color:#B9BBB0; }
.footer-grid a:hover{ color:var(--green-bright); }
.footer-brand p{ color:#B9BBB0; font-size:14px; margin-top:14px; max-width:32ch; }
.footer-brand .footer-slogan{
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-bright) !important; margin-top:10px;
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding:11px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:#8C8E82; max-width:1000px; margin:0 auto; }
.footer-bottom a:hover{ color:var(--green-bright); }
.footer-bottom-center{ justify-content:center; }
.footer-nav-columns{ columns:2; column-gap:16px; }

/* Right-aligned "Únete" subscribe block */
.footer-lista{
  max-width:1240px; margin:0 auto; padding:20px 20px 0;
}
.footer-subscribe{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,4vw,56px);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:3px; padding:16px 22px;
}
.fs-eyebrow{
  display:block; font-family:var(--sans); font-size:10px;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:7px;
}
.footer-subscribe h4{
  font-family:var(--serif); font-weight:400; font-size:18px;
  line-height:1.15; margin:0 0 4px; color:var(--white);
}
.footer-subscribe p{
  font-size:12.5px; line-height:1.55; color:#9A9C91; margin:0; max-width:52ch;
}
.footer-subscribe-form{ display:block; }
.fs-campos{ display:flex; gap:8px; flex-wrap:nowrap; }
.fs-campos input{ flex:1 1 0; min-width:0; }
.footer-subscribe-form input[type="text"],
.footer-subscribe-form input[type="email"]{
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.15);
  color:var(--white); padding:10px 12px; font-size:13.5px;
  border-radius:2px; font-family:var(--sans);
  transition:border-color .2s var(--ease);
}
.footer-subscribe-form input::placeholder{ color:#83857A; }
.footer-subscribe-form input:focus{ border-color:var(--green-bright); outline:none; }
.footer-subscribe-form .btn{ padding:10px 20px; font-size:13px; white-space:nowrap; flex:0 0 auto; }

.fs-privacidad{
  display:flex; align-items:center; gap:8px;
  margin-top:10px; font-size:11.5px; line-height:1.45; color:#83857A;
}
.fs-privacidad input{ accent-color:var(--green-bright); flex:0 0 auto; }
.fs-privacidad a{ color:#9A9C91; border-bottom:1px solid rgba(255,255,255,.24); }
.fs-privacidad a:hover{ color:var(--green-bright); border-color:var(--green-bright); }

.fs-oculto{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.fs-aviso{ display:none; margin:10px 0 0; font-size:12.5px; color:var(--green-bright); }
.fs-aviso.fs-error{ color:#E8A0A0; }

@media (max-width:900px){
  .footer-subscribe{ grid-template-columns:1fr; gap:18px; padding:22px; }
  .fs-campos{ flex-wrap:wrap; }
  .fs-campos input{ flex:1 1 140px; }
  .footer-subscribe-form .btn{ width:100%; justify-content:center; }
}
}
 }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-nav-columns{ columns:1; } }
.footer-legal{
  max-width:720px; margin:0 auto;
  padding:12px 20px 0; border-top:1px solid rgba(255,255,255,0.08);
  text-align:center; font-size:11px; line-height:1.6;
  letter-spacing:.01em; color:#75776D;
}


/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; left:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:11px;
  padding:9px 20px 9px 9px;
  border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(20,23,15,0.13);
  color:var(--ink); font-family:var(--sans); font-size:13.5px; font-weight:500;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: gentle-vibrate 5s ease-in-out infinite;
}
.wa-float:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(20,23,15,0.18);
  animation-play-state:paused;
}
.wa-float .wa-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
}
.wa-float .wa-icon svg{ width:19px; height:19px; }
.wa-float .wa-label{ white-space:nowrap; }
@media (max-width:560px){ .wa-float .wa-label{ display:none; } .wa-float{ padding:9px; } }

@keyframes gentle-vibrate{
  0%, 90%, 100%{ transform:translate(0,0) rotate(0); }
  91%{ transform:translate(-1.5px,0) rotate(-4deg); }
  92.5%{ transform:translate(1.5px,0) rotate(4deg); }
  94%{ transform:translate(-1.5px,0) rotate(-4deg); }
  95.5%{ transform:translate(1.5px,0) rotate(4deg); }
  97%{ transform:translate(-1px,0) rotate(-2deg); }
  98.5%{ transform:translate(1px,0) rotate(2deg); }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--white);
  padding:12px 18px; z-index:100; font-size:14px;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Age gate ---------- */
.age-gate-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,23,15,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.age-gate-card{
  background:var(--paper); max-width:420px; width:100%;
  padding:44px 36px; text-align:center; border:1px solid var(--line);
}
.age-gate-logo{ display:block; height:32px; width:auto; margin:0 auto 26px; }
.age-gate-card h2{ font-size:22px; margin-bottom:14px; }
.age-gate-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; }
.age-gate-actions{ display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.age-gate-actions .btn{ width:100%; justify-content:center; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:250;
  background:var(--ink); color:var(--paper);
  padding:22px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.cookie-banner.visible{ transform:translateY(0); }
.cookie-banner p{ font-size:13.5px; color:#C9CBC1; max-width:640px; line-height:1.6; }
.cookie-banner a{ color:var(--paper); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-actions .btn-ghost{ border-color:#4A4E42; color:var(--paper); }
.cookie-actions .btn-ghost:hover{ border-color:var(--green-bright); color:var(--green-bright); }
@media (max-width:640px){ .cookie-banner{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   Category / listing page
   ========================================================= */
.page-head{ padding:36px 0 48px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(30px,4vw,46px); }
.page-head p{ color:var(--ink-soft); margin-top:12px; max-width:60ch; }

.listing{ display:grid; grid-template-columns:220px 1fr; gap:48px; padding:48px 0 100px; align-items:start; }
.filters{ position:sticky; top:96px; }
.filters h4{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:14px; }
.filter-group{ margin-bottom:32px; }
.filter-group label{ display:flex; align-items:center; gap:10px; font-size:14px; padding:6px 0; cursor:pointer; }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 24px; }
.product-card{ display:flex; flex-direction:column; }
.product-card-link{ display:block; }
.analytics-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:11.5px; color:var(--ink-soft); text-decoration:underline;
}
.analytics-link:hover{ color:var(--green); }
.btn-add-mini{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:14px; padding:11px 16px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.01em;
  cursor:pointer; transition:background .2s, transform .15s;
}
.btn-add-mini:hover{ background:#2A2E20; }
.btn-add-mini:active{ transform:scale(0.98); }
.btn-add-mini.is-added{ background:var(--green); border-color:var(--green); }
.product-card > .analytics-link{ order:2; margin-top:auto; }
.product-card > .btn-add-mini{ order:3; }
.product-card > .analytics-link + .btn-add-mini{ margin-top:10px; }
.product-media{ aspect-ratio:1/1; background:var(--paper-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12px; margin-bottom:16px; overflow:hidden; position:relative; }
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card:hover .product-media{ border-color:var(--green); }
.stock-tag{ position:absolute; top:12px; left:12px; font-size:11px; background:var(--white); border:1px solid var(--line); padding:3px 9px; border-radius:2px; color:var(--ink-soft); }
.offer-tag{ position:absolute; top:12px; right:12px; font-size:11px; font-weight:600; letter-spacing:.02em; background:var(--ink); color:var(--white); padding:3px 10px; border-radius:2px; }
.top-tag{ position:absolute; top:12px; right:12px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; background:var(--green); color:var(--white); padding:4px 10px; border-radius:2px; box-shadow:0 2px 10px rgba(0,0,0,.22); }
.offer-tag + .top-tag, .top-tag + .offer-tag{ top:44px; }
.price-original{ text-decoration:line-through; color:var(--ink-soft); font-weight:400; margin-right:7px; font-size:13px; }
.price-current{ color:var(--green); font-weight:600; }
.product-cat{ font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
.product-name{ font-family:var(--serif); font-size:17px; margin-bottom:6px; }
.product-price{ font-size:14px; color:var(--green); font-weight:500; }
@media (max-width:960px){ .listing{ grid-template-columns:1fr; } .filters{ position:static; display:flex; gap:32px; overflow-x:auto; } .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr 1fr; gap:20px 14px; } }

/* =========================================================
   Product detail page
   ========================================================= */
.product-detail{ padding:44px 0 40px; }
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); }
.pd-gallery-main{ aspect-ratio:1/1; background:var(--paper-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; margin-bottom:12px; }
.pd-gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pd-gallery-thumbs div{ aspect-ratio:1/1; background:var(--paper-deep); border:1px solid var(--line); cursor:pointer; }
.pd-gallery-thumbs div:hover{ border-color:var(--green); }

.pd-cat{ font-size:13px; color:var(--green); margin-bottom:10px; }
.pd-title{ font-size:clamp(28px,3.4vw,40px); margin-bottom:14px; }
.pd-price{ font-size:22px; font-family:var(--serif); margin-bottom:20px; }
.pd-desc{ color:var(--ink-soft); line-height:1.75; margin-bottom:28px; }

.pd-variants{ margin-bottom:24px; }
.pd-variants h4{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:10px; }
.variant-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.variant-pills button{ padding:9px 16px; border:1px solid var(--line); background:var(--white); font-size:13px; cursor:pointer; border-radius:2px; transition:border-color .2s; }
.variant-pills button.active, .variant-pills button:hover{ border-color:var(--green); color:var(--green); }

.pd-add{ display:flex; gap:12px; margin-bottom:32px; }
.qty-input{ width:64px; text-align:center; border:1px solid var(--line); font-family:var(--sans); font-size:15px; border-radius:2px; }

.pd-meta{ border-top:1px solid var(--line); padding-top:20px; font-size:13.5px; color:var(--ink-soft); }
.pd-meta div{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); }

.pd-tabs{ margin-top:64px; border-top:1px solid var(--line); }
.pd-tab-nav{ display:flex; gap:32px; border-bottom:1px solid var(--line); }
.pd-tab-nav button{ background:none; border:none; padding:18px 0; font-size:14px; cursor:pointer; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.pd-tab-nav button.active{ color:var(--ink); border-color:var(--green); }
.pd-tab-panel{ padding:32px 0; color:var(--ink-soft); line-height:1.8; display:none; max-width:70ch; }
.pd-tab-panel.active{ display:block; }

.related-title{ font-size:clamp(24px,3vw,32px); margin:80px 0 32px; }

@media (max-width:880px){ .pd-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Nosotros
   ========================================================= */
.about-hero{ padding:clamp(56px,8vw,100px) 0 clamp(40px,6vw,64px); }
.about-hero h1{ font-size:clamp(34px,4.6vw,56px); max-width:16ch; }
.about-hero p.lead{ margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:56ch; }

.about-values{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-values li{ padding:44px var(--pad); border-left:1px solid var(--line); }
.about-values li:first-child{ border-left:none; }
.about-values .num{ font-family:var(--serif); color:var(--green); font-size:14px; display:block; margin-bottom:16px; }
.about-values h3{ font-size:19px; margin-bottom:10px; }
.about-values p{ color:var(--ink-soft); font-size:14.5px; }
@media (max-width:800px){ .about-values{ grid-template-columns:1fr; } .about-values li{ border-left:none; border-top:1px solid var(--line); } .about-values li:first-child{ border-top:none; } }

.about-process{ display:grid; grid-template-columns:0.6fr 1.4fr; gap:clamp(24px,5vw,64px); }
.process-steps{ counter-reset:step; }
.process-step{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:28px 0; border-top:1px solid var(--line); }
.process-step:last-child{ border-bottom:1px solid var(--line); }
.process-step .step-num{ font-family:var(--serif); font-size:22px; color:var(--green); }
.process-step h4{ font-family:var(--sans); font-weight:600; font-size:16px; margin-bottom:6px; }
.process-step p{ color:var(--ink-soft); font-size:14.5px; max-width:60ch; }
@media (max-width:800px){ .about-process{ grid-template-columns:1fr; } }

/* ---------- About content block ---------- */
.about-content{ max-width:720px; margin:0 auto; }
.about-content h2{ font-size:clamp(28px,3.4vw,38px); }
.about-content h3{ font-size:21px; margin-top:44px; margin-bottom:4px; }
.about-content p{ color:var(--ink-soft); font-size:16px; line-height:1.8; margin-top:14px; }

/* ---------- Analíticas gate ---------- */
.analytics-gate{
  text-align:center; padding:56px 40px; background:var(--paper-deep);
  border:1px solid var(--line); max-width:640px; margin:0 auto;
}
.analytics-gate-icon{
  width:52px; height:52px; border-radius:50%; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--green);
}
.analytics-gate h2{ font-size:22px; margin-bottom:10px; }
.analytics-gate p{ color:var(--ink-soft); font-size:14.5px; max-width:44ch; margin:0 auto; }
.cat-card-locked .cat-visual{ font-size:22px; }
.cat-card-locked{ opacity:0.92; }

/* ---------- Write a review ---------- */
.review-section-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:start; }
.review-intro h2{ font-size:clamp(26px,3.2vw,36px); }
.review-form{
  max-width:none; background:var(--paper-deep); border:1px solid var(--line);
  padding:32px; display:flex; flex-direction:column; gap:20px;
}
.review-form .btn{ align-self:flex-start; margin-top:4px; }
.star-rating{ display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:4px; }
.star-rating button{
  background:none; border:none; font-size:30px; line-height:1; color:var(--line);
  cursor:pointer; padding:0; transition:color .15s;
}
.star-rating button:hover,
.star-rating button:hover ~ button,
.star-rating button.selected,
.star-rating button.selected ~ button{ color:var(--green); }
.review-suggestions{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px; }
.suggestion-chip{
  background:var(--paper-deep); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; transition:border-color .2s, color .2s;
}
.suggestion-chip:hover{ border-color:var(--green); color:var(--green); }
@media (max-width:860px){ .review-section-grid{ grid-template-columns:1fr; } }

/* ---------- Reviews showcase (marquee) ---------- */
.reviews-showcase{ background:var(--paper-deep); border-top:1px solid var(--line); }
.reviews-rating{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--ink-soft); }
.reviews-rating .stars-inline{ color:var(--green); letter-spacing:2px; }
.reviews-track-wrap{
  overflow:hidden; margin-top:36px;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.reviews-track{ display:flex; gap:20px; width:max-content; animation:reviews-scroll 90s linear infinite; }
.reviews-track:hover{ animation-play-state:paused; }
@keyframes reviews-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.review-card-placeholder{
  flex:0 0 320px; background:var(--white); border:1px solid var(--line);
  padding:28px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;
}
.review-card-placeholder .stars-inline{ color:var(--green); letter-spacing:2px; display:block; margin-bottom:10px; font-size:15px; }
.review-card{
  flex:0 0 300px; background:var(--white); border:1px solid var(--line);
  padding:26px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;
}
.review-card .stars-inline{ color:var(--green); letter-spacing:2px; display:block; margin-bottom:12px; font-size:14px; }
.review-card .review-author{ display:block; margin-top:16px; font-weight:600; color:var(--ink); font-size:12.5px; }
@media (max-width:600px){ .review-card{ flex-basis:260px; } }

/* =========================================================
   Beneficios — hub y artículos
   ========================================================= */
.article-page{ max-width:720px; margin:0 auto; padding:8px 0 100px; }
.article-page .article-meta{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
.article-page h1{ font-size:clamp(28px,3.8vw,42px); line-height:1.15; margin-bottom:28px; }
.article-page h2{ font-family:var(--sans); font-weight:600; font-size:21px; margin-top:42px; margin-bottom:12px; }
.article-page h3{ font-family:var(--sans); font-weight:600; font-size:17px; margin-top:30px; margin-bottom:10px; }
.article-page p{ color:var(--ink-soft); font-size:16px; line-height:1.85; margin-top:14px; }
.article-page ul{ margin-top:14px; padding-left:22px; }
.article-page li{ color:var(--ink-soft); font-size:16px; line-height:1.8; margin-bottom:10px; }
.article-page a{ color:var(--green); text-decoration:underline; }
.article-disclaimer{
  margin-top:44px; padding:18px 20px; background:var(--paper-deep);
  border-left:3px solid var(--ink); font-size:13.5px; color:var(--ink-soft); line-height:1.7;
}
.article-back{ display:inline-block; margin-top:40px; font-size:14px; border-bottom:1px solid var(--ink); }
.article-back:hover{ color:var(--green); border-color:var(--green); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); padding:clamp(48px,7vw,80px) 0; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:13px; color:var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea{
  padding:13px 14px; border:1px solid var(--line); background:var(--white);
  font-family:var(--sans); font-size:14.5px; border-radius:2px; resize:vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--green); }
.form-honeypot{ position:absolute; left:-9999px; }
.form-note{ font-size:12.5px; color:var(--ink-soft); }
.form-status{ font-size:14px; padding:12px 14px; border-radius:2px; display:none; margin-top:16px; }
.form-status.success{ background:#EAF1E9; color:var(--green); }
.form-status.error{ background:#F6E7E3; color:#8A3A24; }

.contact-info-card{ background:var(--paper-deep); border:1px solid var(--line); padding:36px; }
.contact-info-card h3{ font-size:20px; margin-bottom:20px; }
.contact-info-card .row{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; }
.contact-info-card .row:first-of-type{ border-top:none; }
.contact-map-block{ margin-top:24px; border:1px solid var(--line); }
.contact-map{ display:block; width:100%; aspect-ratio:16/9; border:0; filter:grayscale(0.15) contrast(1.03); }
.contact-map-caption{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--paper-deep); border-top:1px solid var(--line);
  padding:14px 18px; font-size:13px; color:var(--ink-soft);
}
.contact-map-caption > div{ display:flex; align-items:center; gap:8px; }
.contact-map-caption svg{ color:var(--green); flex-shrink:0; }
.contact-map-caption a{ color:var(--green); font-weight:600; white-space:nowrap; }
.contact-map-caption a:hover{ color:var(--ink); }

/* =========================================================
   404
   ========================================================= */
.error-page{ padding:clamp(100px,14vw,180px) 0; text-align:center; }
.error-page .error-code{ font-family:var(--serif); font-size:clamp(70px,12vw,140px); color:var(--paper-deep); line-height:1; }
.error-page h1{ font-size:clamp(26px,3.2vw,36px); margin-top:-20px; }
.error-page p{ color:var(--ink-soft); margin-top:14px; max-width:48ch; margin-left:auto; margin-right:auto; }
.error-page .btn{ margin-top:30px; }

/* =========================================================
   Legal pages
   ========================================================= */
.legal-page{ padding:56px 0 100px; max-width:780px; margin:0 auto; }
.legal-page h1{ font-size:clamp(28px,3.6vw,40px); margin-bottom:8px; }
.legal-page .updated{ font-size:13px; color:var(--ink-soft); margin-bottom:40px; }
.legal-page h2{ font-family:var(--sans); font-weight:600; font-size:17px; margin-top:40px; margin-bottom:12px; }
.legal-page p, .legal-page li{ color:var(--ink-soft); font-size:15px; line-height:1.8; }
.legal-page li{ margin-left:20px; }
.legal-placeholder{ background:var(--paper-deep); border:1px dashed var(--line); padding:14px 16px; font-size:13.5px; color:var(--ink-soft); margin:18px 0; }
.legal-notice{ background:var(--paper-deep); border-left:3px solid var(--ink); padding:18px 20px; font-size:14px; line-height:1.7; color:var(--ink); margin:24px 0; }
.legal-notice strong{ font-weight:600; }

/* ---------- Carrito y checkout ---------- */
.cart-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start; }
.cart-main{ min-width:0; }
.cart-items{ display:flex; flex-direction:column; }
.cart-item{
  display:flex; align-items:center; gap:13px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
/* Quitar una línea: discreto, a la izquierda, sin competir con el precio */
.cart-item-quitar{
  flex:0 0 auto; width:22px; height:22px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:50%;
  color:var(--ink-soft); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.cart-item-quitar:hover{ color:var(--white); background:#B04A4A; border-color:#B04A4A; }
.cart-item-quitar:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-family:var(--serif); font-size:17px; color:var(--ink); margin-bottom:2px; }
.cart-item-format{ font-size:13px; color:var(--ink-soft); }
.cart-item-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:2px; flex-shrink:0; }
.cart-item-qty button{ border:none; background:none; width:30px; height:36px; cursor:pointer; font-size:15px; color:var(--ink); }
.cart-item-qty button:hover{ color:var(--green); }
.cart-item-qty span{ width:28px; text-align:center; font-size:14px; }
.cart-item-price{ width:90px; text-align:right; font-family:var(--serif); font-size:16px; color:var(--ink); flex-shrink:0; }
.cart-item-remove{
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.cart-item-remove:hover{ color:#8A3A24; }

.cart-section-title{ font-family:var(--serif); font-size:22px; margin:40px 0 20px; }
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cart-payment-note{
  font-size:13.5px; line-height:1.6; color:var(--ink-soft);
  background:var(--paper-deep); border:1px solid var(--line); padding:14px 16px; margin-top:4px;
}
.cart-payment-note strong{ color:var(--ink); }
.cart-submit{ width:100%; justify-content:center; margin-top:4px; }

.cart-summary{ position:sticky; top:100px; }
.cart-summary .contact-info-card h3{ margin-bottom:18px; }
.cart-summary-line{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft);
}
.cart-summary-line:first-child{ border-top:none; }
.cart-summary-line span:first-child{ color:var(--ink); }
.cart-summary-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:16px; border-top:1px solid var(--line);
}
.cart-summary-total span:first-child{ font-size:14px; font-weight:600; color:var(--ink); }
.cart-summary-total span:last-child{ font-family:var(--serif); font-size:24px; color:var(--green); }

.cart-empty{ text-align:center; padding:80px 20px; }
.cart-empty p{ color:var(--ink-soft); font-size:16px; margin-bottom:20px; }

.cart-confirmed{ text-align:center; max-width:480px; margin:0 auto; padding:70px 20px; }
.cart-confirmed-icon{
  width:56px; height:56px; border-radius:50%; background:var(--green);
  color:var(--white); font-size:26px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.cart-confirmed h2{ font-family:var(--serif); font-size:28px; margin-bottom:12px; }
.cart-confirmed p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin-bottom:28px; }

@media (max-width:880px){
  .cart-grid{ grid-template-columns:1fr; gap:36px; }
  .cart-summary{ position:static; }
  .form-row-split{ grid-template-columns:1fr; gap:18px; }
  .cart-item{ flex-wrap:wrap; }
  .cart-item-price{ width:auto; margin-left:auto; }
}

/* ---------- Ficha de producto: envío, trust ticks, comprar ahora ---------- */
.pd-shipping-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-deep); border:1px solid var(--line);
  padding:12px 16px; margin:20px 0 4px; font-size:13.5px; color:var(--ink);
}
.pd-shipping-banner svg{ color:var(--green); flex-shrink:0; }
.pd-shipping-banner strong{ color:var(--green); }

.btn-buy-now{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:10px; padding:14px 20px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  cursor:pointer; transition:background .2s, transform .15s;
}
.btn-buy-now:hover{ background:#2A2E20; }
.btn-buy-now:active{ transform:scale(0.98); }

.pd-trust-ticks{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.pd-trust-ticks li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); }
.pd-trust-ticks svg{ color:var(--green); flex-shrink:0; }

/* ---------- Carrito lateral (drawer) ---------- */
.cart-drawer-overlay{
  position:fixed; inset:0; background:rgba(20,23,15,0.45);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  z-index:90;
}
.cart-drawer-overlay.open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw);
  background:var(--paper); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s var(--ease);
  z-index:91; box-shadow:-18px 0 40px rgba(20,23,15,0.12);
}
.cart-drawer.open{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.cart-drawer-head h3{ font-family:var(--serif); font-size:20px; }
.cart-drawer-close{
  background:none; border:none; cursor:pointer; font-size:24px; line-height:1;
  color:var(--ink-soft); width:32px; height:32px; display:flex; align-items:center; justify-content:center;
}
.cart-drawer-close:hover{ color:var(--ink); }

.cart-drawer-items{ flex:1; overflow-y:auto; padding:8px 24px; }
.cart-drawer-items .cart-item{ padding:16px 0; }
.cart-drawer-items .cart-item-name{ font-size:15px; }

.cart-drawer-footer{ padding:20px 24px 24px; border-top:1px solid var(--line); flex-shrink:0; }
.cart-drawer-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:16px; font-size:14px; font-weight:600; color:var(--ink);
}
.cart-drawer-total span:last-child{ font-family:var(--serif); font-size:22px; color:var(--green); font-weight:400; }
.cart-drawer-checkout{ width:100%; justify-content:center; }
.cart-drawer-view{
  display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--ink-soft);
}
.cart-drawer-view:hover{ color:var(--green); }

.cart-drawer-empty{ padding:60px 24px; text-align:center; color:var(--ink-soft); font-size:14px; }

/* ---------- Confirmación de pedido: datos bancarios ---------- */
.bank-details{
  background:var(--paper-deep); border:1px solid var(--line);
  padding:22px 24px; margin:22px 0; text-align:left;
}
.bank-details h4{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; }
.bank-details .row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.bank-details .row:first-of-type{ border-top:none; }
.bank-details .row span:first-child{ color:var(--ink-soft); flex-shrink:0; }
.bank-details .row span:last-child{ color:var(--ink); font-weight:600; text-align:right; }

@media (max-width:520px){
  .cart-drawer{ width:100vw; }
}

.cart-save-data{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:13px; line-height:1.45; color:var(--ink-soft); margin-top:-4px;
}
/* Tamaño explícito: sin él, iOS pinta la casilla enorme y rompe la línea. */
.cart-save-data input{
  width:16px; height:16px; margin:0; flex:0 0 16px;
  accent-color:var(--green); cursor:pointer;
}

.cart-summary-subtotal{ border-top:none !important; margin-top:2px; }
.cart-shipping-hint{
  font-size:12px; color:var(--green); background:var(--paper);
  border:1px dashed var(--line); padding:8px 10px; margin:6px 0 2px;
}
.cart-drawer-lines{ margin-bottom:4px; }
.cart-drawer-lines .cart-summary-line{ font-size:13px; padding:6px 0; }

/* Nota de formatos en la ficha de producto */
.variant-note{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.variant-note a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-gallery-main{ overflow:hidden; position:relative; }

/* Margen lateral en movil para catalogo y ficha (sin tocar escritorio) */
@media (max-width:640px){
  .listing, .product-detail{ padding-left:20px; padding-right:20px; }
}

/* Consentimiento RGPD en formularios */
.form-consent{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink-soft); line-height:1.6; cursor:pointer; }
.form-consent input{ margin-top:3px; width:16px; height:16px; accent-color:var(--green); flex:0 0 auto; }
.form-consent a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }

/* Precio del formato elegido en la ficha */
.pd-price-unit{ font-size:14px; color:var(--ink-soft); font-family:var(--sans); font-weight:400; margin-left:6px; }
.pd-price-consultar{ color:var(--ink-soft); }

/* Filtros del catálogo */
.filter-group{ margin-bottom:26px; }
.filter-group h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:12px; }
.filter-group label{ display:flex; align-items:center; gap:9px; font-size:14px; margin-bottom:9px; cursor:pointer; }
.filter-group input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--green); }
.filter-search{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:2px; font-size:14px; font-family:var(--sans); background:var(--white); }
.filter-search:focus{ outline:none; border-color:var(--green); }
.f-precio{ width:100%; accent-color:var(--green); }
.filter-precio-valor{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.filter-reset{ font-size:13px; color:var(--ink-soft); background:none; border:none; border-bottom:1px solid var(--line); padding:0 0 2px; cursor:pointer; }
.filter-reset:hover{ color:var(--green); border-color:var(--green); }
.listing-vacio{ display:none; padding:48px 0; color:var(--ink-soft); font-size:14.5px; }

/* Buscador global */
.search-overlay{ position:fixed; inset:0; background:rgba(20,23,15,0.45); z-index:200; display:flex; justify-content:center; padding:72px 20px 20px; }
.search-overlay[hidden]{ display:none; }
.search-panel{ background:var(--white); width:100%; max-width:620px; border-radius:3px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.search-bar{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.search-bar input{ flex:1; border:none; font-size:16px; font-family:var(--sans); color:var(--ink); background:none; }
.search-bar input:focus{ outline:none; }
.search-bar button{ background:none; border:none; font-size:13px; color:var(--ink-soft); cursor:pointer; font-family:var(--sans); }
.search-bar button:hover{ color:var(--green); }
.search-results{ overflow-y:auto; padding:8px; }
.search-hint{ padding:26px 14px; font-size:14px; color:var(--ink-soft); }
.search-hint a{ color:var(--green); text-decoration:underline; }
.search-item{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:2px; text-decoration:none; color:var(--ink); }
.search-item:hover{ background:var(--paper-deep); }
.search-thumb{ width:48px; height:48px; flex:0 0 48px; background:var(--paper-deep); border:1px solid var(--line); overflow:hidden; }
.search-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.search-info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.search-info strong{ font-size:14.5px; font-weight:500; }
.search-info span{ font-size:12.5px; color:var(--ink-soft); }
.search-precio{ font-size:13.5px; color:var(--green); white-space:nowrap; }
@media (max-width:560px){ .search-overlay{ padding:12px; } .search-precio{ display:none; } }

/* Lupa de cabecera: sin caja, igual que el resto de iconos */
button.cart-btn, .search-btn{ background:none; border:none; padding:0; margin:0; cursor:pointer;
  font:inherit; color:var(--ink); line-height:0; -webkit-appearance:none; appearance:none; }
.search-btn:focus{ outline:none; }
.search-btn:focus-visible{ outline:1px solid var(--green); outline-offset:6px; }
.search-btn svg{ display:block; transition:transform .25s var(--ease); }
.search-btn:hover svg{ transform:scale(1.06); }

/* Panel de búsqueda: más aire, menos caja */
.search-overlay{ background:rgba(20,23,15,0.32); backdrop-filter:blur(3px); padding:88px 20px 20px; }
.search-panel{ border-radius:2px; box-shadow:0 24px 70px rgba(20,23,15,.14); border:1px solid var(--line); }
.search-bar{ padding:20px 24px; gap:14px; }
.search-bar input{ font-size:17px; letter-spacing:-.01em; }
.search-bar input::placeholder{ color:#A8AB9E; }
.search-bar button{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#A8AB9E; }
.search-results{ padding:6px 10px 14px; }
.search-item{ padding:12px 14px; transition:background .18s; }
.search-thumb{ width:52px; height:52px; flex-basis:52px; border:none; background:var(--paper-deep); }
.search-info strong{ font-family:var(--serif); font-size:16px; font-weight:400; }
.search-info span{ font-size:12px; letter-spacing:.02em; }
.search-precio{ font-size:13px; color:var(--ink-soft); }
.search-item:hover .search-precio{ color:var(--green); }
.search-hint{ padding:30px 16px; font-size:14px; }
/* Fuera la X azul nativa del campo de búsqueda */
.search-bar input[type="search"]::-webkit-search-cancel-button,
.search-bar input[type="search"]::-webkit-search-decoration,
.filter-search[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
/* El panel se ajusta a los resultados, no estira hasta abajo */
.search-overlay{ align-items:flex-start; }
.search-panel{ height:auto; }

/* Selector de variedad (Small Buds) */
.variedad-select{ width:100%; max-width:340px; padding:11px 13px; border:1px solid var(--line); border-radius:2px;
  font-size:14.5px; font-family:var(--sans); background:var(--white); color:var(--ink); }
.variedad-select:focus{ outline:none; border-color:var(--green); }

/* Destacados de portada */
.destacados{ padding:clamp(56px,7vw,90px) 0; background:var(--paper-deep); }
.destacados .section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:32px; }
.destacados h2{ font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); font-weight:400; }
.dest-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.dest-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.dest-media{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--white); border:1px solid var(--line); margin-bottom:12px; }
.dest-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.dest-card:hover .dest-media img{ transform:scale(1.04); }
.dest-card:hover .dest-media{ border-color:var(--green); }
.dest-cat{ font-size:11.5px; color:var(--ink-soft); margin-bottom:3px; }
.dest-nombre{ font-family:var(--serif); font-size:15px; line-height:1.3; margin-bottom:4px; }
.dest-precio{ font-size:13px; color:var(--green); }
@media (max-width:1100px){ .dest-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .dest-grid{ grid-template-columns:repeat(2,1fr); gap:16px 12px; } .destacados .section-head{ flex-direction:column; gap:8px; } }

/* Pedido al por mayor */
.may-wrap{ padding-bottom:90px; }
.may-form{ max-width:780px; }
.may-intro{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:38px; }
.may-intro div{ border-top:2px solid var(--green); padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.may-intro strong{ font-size:14px; font-weight:600; }
.may-intro span{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.may-h3{ font-family:var(--serif); font-size:20px; font-weight:400; margin:34px 0 6px; }
.may-ayuda{ font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; }
.may-catalogo{ border:1px solid var(--line); border-radius:2px; max-height:420px; overflow-y:auto; padding:6px 14px 14px; background:var(--white); }
.may-cat{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:18px 0 8px; position:sticky; top:0; background:var(--white); padding:6px 0; }
.may-item{ display:flex; align-items:center; gap:11px; padding:7px 8px; border-radius:2px; cursor:pointer; }
.may-item:hover{ background:var(--paper-deep); }
.may-item.activo{ background:#EAF1E9; }
.may-item input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--green); flex:0 0 auto; }
.may-nombre{ flex:1; font-size:14px; }
.may-cant{ width:104px; padding:6px 9px; border:1px solid var(--line); border-radius:2px; font-size:13px; font-family:var(--sans); }
.may-cant:disabled{ background:var(--paper-deep); color:#B4B7AA; }
.may-resumen{ font-size:13.5px; color:var(--ink-soft); margin-top:12px; }
.may-resumen.activo{ color:var(--green); font-weight:500; }
.may-resumen.aviso{ color:#8A3A24; font-weight:500; }
@media (max-width:700px){ .may-intro{ grid-template-columns:1fr; gap:14px; } .may-cant{ width:84px; } }

/* Producto agotado */
.stock-tag.agotado{ background:var(--ink); color:var(--white); border-color:var(--ink); font-weight:500; }
.btn-add-mini.agotado{ background:none; color:var(--ink-soft); border:1px solid var(--line); cursor:pointer; }
.btn-add-mini.agotado:hover{ border-color:var(--green); color:var(--green); }
.product-card:has(.stock-tag.agotado) .product-media img{ filter:grayscale(.55); opacity:.85; }

/* Barra de envío gratis */
.envio-barra{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin:10px 0 6px; }
.envio-barra span{ display:block; height:100%; background:var(--green); border-radius:2px; transition:width .45s var(--ease); }
.envio-logrado{ color:var(--green); font-weight:500; }

/* Aviso de analíticas bloqueadas */
.aviso-overlay{ position:fixed; inset:0; background:rgba(20,23,15,.45); backdrop-filter:blur(3px); z-index:210; display:none; align-items:center; justify-content:center; padding:20px; }
.aviso-overlay.visible{ display:flex; }
.aviso-caja{ background:var(--white); max-width:440px; padding:32px 30px; border:1px solid var(--line); box-shadow:0 24px 70px rgba(20,23,15,.16); }
.aviso-caja h3{ font-family:var(--serif); font-size:21px; font-weight:400; margin-bottom:12px; }
.aviso-caja p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:22px; }
.aviso-acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.aviso-acciones .btn{ flex:1; justify-content:center; min-width:140px; }
.analytics-link.desbloqueado{ color:var(--green); }
.campo-ayuda{ font-size:12.5px; color:var(--ink-soft); margin-top:5px; line-height:1.5; }
/* Rechazar y aceptar cookies con el mismo peso visual (lo exige la AEPD) */
.cookie-actions .btn{ min-width:128px; justify-content:center; }

/* En móvil, Franquíciate vive dentro del menú y el header queda limpio */
@media (max-width:880px){
  .header-actions .solo-escritorio{ display:none; }
}
.nav-franquicia{ display:none; }
@media (max-width:880px){
  .nav-franquicia{ display:block; margin-top:6px; padding-top:14px; border-top:1px solid var(--line); }
  .nav-franquicia a{ color:var(--green); font-weight:500; }
}

/* Reseñas: la mitad de rápido, y más lento aún en móvil */
.reviews-track{ animation-duration:180s; }
@media (max-width:880px){ .reviews-track{ animation-duration:220s; } }
@media (prefers-reduced-motion: reduce){ .reviews-track{ animation:none; } }

/* =========================================================
   Margen lateral en móvil, de una vez y para toda la web.
   Varias secciones (.page-head, .listing, .about-content,
   .contact-grid, .legal-page...) anulaban el padding de .wrap
   con un "padding: X 0", y el texto acababa pegado al borde.
   ========================================================= */
@media (max-width:880px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .wrap.hero-video{ padding-left:20px; padding-right:20px; }
  .page-head{ padding-top:28px; padding-bottom:34px; }
  .page-head p{ max-width:46ch; }
}

/* Ajustes finos de móvil: alineación y botones a ancho completo */
@media (max-width:640px){
  /* La tarjeta del formulario alineaba su texto 36px dentro, desencajado
     del resto de la página, que va a 20px. Ahora todo cae en la misma línea. */
  .contact-info-card{ padding-left:20px; padding-right:20px; }
  /* En móvil, un botón a media pantalla se pulsa peor y se ve menos. */
  .story .btn, .page-head + * .btn-primary{ width:100%; justify-content:center; }
  .story .wrap{ padding-top:44px; padding-bottom:44px; }
  .contact-grid{ padding-top:36px; padding-bottom:56px; }
}

/* WhatsApp: fuera el aro blanco. En móvil, solo el círculo verde. */
.wa-float{ border:none; }
@media (max-width:560px){
  .wa-float{
    background:none; box-shadow:none; padding:0;
    left:18px; bottom:18px;
  }
  .wa-float .wa-icon{
    width:52px; height:52px;
    box-shadow:0 8px 22px rgba(37,211,102,.34), 0 2px 6px rgba(20,23,15,.18);
  }
  .wa-float .wa-icon svg{ width:26px; height:26px; }
}

/* Textos legales: legibles también en móvil */
@media (max-width:640px){
  .legal-page{ padding-top:32px; padding-bottom:72px; }
  .legal-page h1{ line-height:1.15; margin-bottom:10px; }
  .legal-page .updated{ margin-bottom:28px; }
  .legal-page h2{
    font-size:16px; margin-top:34px; margin-bottom:10px;
    padding-top:22px; border-top:1px solid var(--line);
  }
  .legal-page h2:first-of-type{ border-top:none; padding-top:0; }
  .legal-page p, .legal-page li{ font-size:15.5px; line-height:1.75; }
  .legal-page p{ margin-bottom:14px; }
  .legal-page ul, .legal-page ol{ margin:0 0 16px; padding-left:18px; }
  .legal-page li{ margin-left:0; margin-bottom:8px; }
  /* Las direcciones de correo largas no deben romper el ancho de pantalla */
  .legal-page a, .legal-page p{ overflow-wrap:anywhere; }
}

/* =========================================================
   Iconos de cabecera: misma caja, mismo trazo, área de
   pulsación de 40px (antes eran 19-20px, se fallaba al tocar).
   ========================================================= */
.header-actions{ gap:2px; }
.header-actions .cart-btn,
.header-actions .search-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.header-actions .cart-btn:hover,
.header-actions .search-btn:hover{ background:var(--paper-deep); color:var(--green); }
.header-actions .cart-btn svg,
.header-actions .search-btn svg{ display:block; }
.header-actions .btn-ghost{ margin-right:10px; }

/* Contador del carrito: pegado al icono, no flotando fuera */
.cart-btn .cart-count{
  position:absolute; top:4px; right:2px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--green); color:var(--white);
  font-size:10.5px; font-weight:600; line-height:16px; text-align:center;
  border:2px solid var(--white);
}
@media (max-width:880px){
  .header-actions{ gap:0; }
  .header-actions .cart-btn, .header-actions .search-btn{ width:42px; height:42px; }
  .nav-toggle{ width:42px; height:42px; display:block; padding:0; }
  .nav-toggle span{ margin-left:auto; margin-right:auto; }
}

/* =========================================================
   Reseñas en móvil: la cabecera se apila en vez de apretarse
   y las tarjetas se alinean con el resto de la página.
   ========================================================= */
@media (max-width:720px){
  .reviews-showcase .section-head{
    flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:26px;
  }
  .reviews-rating{
    flex-wrap:wrap; gap:6px 10px; margin-top:8px; font-size:13.5px;
  }
  .reviews-rating .stars-inline{ font-size:15px; }
  .reviews-showcase .section-link{ white-space:nowrap; }

  /* El carrusel arranca alineado con el texto, no cortado en el borde. */
  .reviews-track-wrap{
    margin-top:24px;
    margin-left:-20px; margin-right:-20px;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .reviews-track{ gap:14px; }
  .review-card{
    flex-basis:270px; padding:22px 20px; font-size:13.5px;
    display:flex; flex-direction:column;
  }
  .review-card .review-author{ margin-top:auto; padding-top:16px; }
}

/* =========================================================
   Portada en móvil: respiración, jerarquía y todo centrado.
   El vídeo pasa a formato vertical-amable, los botones a
   ancho completo y la franja de datos baja para no competir
   con la llamada principal.
   ========================================================= */
@media (max-width:880px){
  .hero{ padding-top:26px; }
  .hero-leaf{ width:min(78vw,420px); top:-4%; right:-18%; opacity:.05; }

  .hero-content{ max-width:19ch; }
  .hero h1{ font-size:clamp(27px,7.2vw,34px); line-height:1.12; letter-spacing:-.01em; }
  .hero-slogan{ margin-top:12px; font-size:12px; letter-spacing:.16em; }

  .hero-video{ margin-top:22px; }
  .hero-video-frame{
    height:auto; aspect-ratio:4/3; max-height:34vh;
    border:none; border-radius:3px;
    box-shadow:0 14px 40px rgba(20,23,15,.12);
  }

  .hero-cta{
    margin-top:22px; gap:10px;
    flex-direction:column; align-items:stretch;
  }
  .hero-cta .btn{ width:100%; padding:16px 20px; font-size:15.5px; justify-content:center; }

  /* Los cuatro datos bajan y dejan aire tras los botones. */
  .trust{ margin-top:52px; }
  .trust li{ padding:22px var(--pad); }
  .trust li strong, .trust li .num{ font-size:19px; }
}
@media (max-width:560px){
  .hero-video-frame{ aspect-ratio:5/4; max-height:32vh; }
}

/* =========================================================
   Menú móvil sin líneas divisorias: el aire separa, no el trazo.
   ========================================================= */
@media (max-width:880px){
  .main-nav > ul{ padding-top:26px; }
  .main-nav > ul > li{ border-bottom:none; }
  .main-nav a{ padding:13px 0; font-size:22px; letter-spacing:-.01em; }
  .main-nav .dropdown-toggle{ font-size:22px; padding:13px 0; }
  .main-nav .dropdown a{ padding:9px 0 !important; }
  .nav-franquicia{ border-top:none; margin-top:20px; padding-top:0; }
  .main-nav-contact{ border-top:none; padding-top:26px; margin-top:22px; }
}

/* Título de portada: reparto de líneas equilibrado */
.hero h1{ text-wrap:balance; }
.hero-slogan{ text-wrap:balance; }
@media (max-width:880px){
  .hero-content{ max-width:none; }
  .hero h1{ font-size:clamp(28px,7.8vw,36px); }
  .hero-slogan{ font-size:11.5px; letter-spacing:.12em; margin-top:14px; }
}

/* =========================================================
   Hamburguesa y X: las tres líneas se posicionan desde el
   centro, así la X cierra exacta y no deja rastro de la
   tercera línea al abrirse.
   ========================================================= */
.nav-toggle{ position:relative; }
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:21px; height:1.5px; margin:0;
  background:var(--ink); border-radius:2px;
  transform-origin:50% 50%;
  transition:transform .32s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
.nav-toggle span:nth-child(2){ transform:translate(-50%,-50%); }
.nav-toggle span:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }

.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:translate(-50%,-50%) scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

/* Catálogo: una sola línea divisoria, no dos.
   Donde la rejilla ya trae su propio marco, la cabecera no repite línea. */
.page-head.sin-linea{ border-bottom:none; padding-bottom:26px; }

@media (max-width:560px){
  /* En una sola columna el marco exterior sobra: bastan las
     separaciones entre tarjetas. */
  .cat-grid{ border:none; gap:1px; }
  .cat-card{ padding:26px 20px 30px; min-height:0; }
  .cat-card .cat-visual{ aspect-ratio:16/10; margin-bottom:16px; }
}
@media (max-width:560px){
  /* En móvil la rejilla pierde el marco, así que la línea que separa
     la introducción del catálogo la pone la cabecera. Siempre una. */
  .page-head.sin-linea{ border-bottom:1px solid var(--line); padding-bottom:30px; }
  .cat-grid{ margin-top:2px; }
}

/* =========================================================
   Filtros en móvil: un solo botón que despliega un panel
   ordenado. Antes eran tres columnas apretadas con el texto
   partido; ahora las opciones son pastillas pulsables.
   ========================================================= */
.filters-toggle{ display:none; }

@media (max-width:960px){
  .filters-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin:0 0 18px; padding:13px 16px;
    background:var(--white); border:1px solid var(--line); border-radius:2px;
    font-family:var(--sans); font-size:14.5px; color:var(--ink); cursor:pointer;
  }
  .filters-toggle span:first-child{ display:flex; align-items:center; gap:10px; }
  .filters-toggle svg{ color:var(--green); }
  .filters-toggle[aria-expanded="true"]{ border-color:var(--green); }
  .filters-count{
    min-width:22px; height:22px; padding:0 7px; border-radius:999px;
    background:var(--green); color:var(--white);
    font-size:12px; font-weight:600; line-height:22px; text-align:center;
  }
  .filters-count[hidden]{ display:none; }

  .filters{
    position:static; display:none; overflow:visible;
    background:var(--white); border:1px solid var(--line); border-radius:2px;
    padding:20px 18px 18px; margin-bottom:26px;
  }
  .filters.open{ display:block; }
  .filter-group{ margin-bottom:22px; }
  .filter-group:last-of-type{ margin-bottom:16px; }
  .filter-group h4{ margin-bottom:11px; }

  /* Casillas convertidas en pastillas: se tocan bien y no parten el texto. */
  .filter-group label{
    display:inline-flex; align-items:center; margin:0 7px 7px 0; padding:9px 15px;
    border:1px solid var(--line); border-radius:999px;
    font-size:13.5px; white-space:nowrap; background:var(--white);
    transition:border-color .2s, background .2s, color .2s;
  }
  .filter-group label input[type="checkbox"]{
    position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
  }
  .filter-group label.activo{
    border-color:var(--green); background:var(--green); color:var(--white);
  }
  .filter-search{ padding:12px 13px; font-size:15px; }
  .f-precio{ width:100%; }
  .filter-reset{ display:inline-block; margin-top:4px; }
}

/* =========================================================
   Página de tiendas
   ========================================================= */
.tiendas-lista{ padding-top:12px; padding-bottom:80px; }
.tienda{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px; align-items:center;
  padding:52px 0; border-bottom:1px solid var(--line);
}
.tienda:last-of-type{ border-bottom:none; }
.tienda:nth-child(even) .tienda-foto{ order:2; }
.tienda-foto{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-deep); }
.tienda-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.tienda-foto-vacia{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--ink-soft); font-size:13px;
}
.tienda-tipo{
  display:inline-block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px;
}
.tienda h2{ font-family:var(--serif); font-size:clamp(26px,3vw,34px); font-weight:400; margin-bottom:10px; }
.tienda-dir{ font-size:15px; line-height:1.6; margin-bottom:14px; }
.tienda-nota{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:22px; max-width:46ch; }
.tienda-horario{ border-top:1px solid var(--line); margin-bottom:24px; }
.tienda-horario div{
  display:flex; justify-content:space-between; gap:20px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.tienda-horario div span:first-child{ color:var(--ink-soft); }
.tienda-acciones{ display:flex; flex-wrap:wrap; gap:10px; }
.tienda-acciones .btn{ font-size:14px; padding:11px 20px; }
.tienda-cerrada .tienda-tipo{ color:var(--ink-soft); }
.tienda-cerrada .tienda-foto-vacia{ background:var(--paper-deep); }

.tiendas-cta{ background:var(--ink); color:var(--white); padding:clamp(54px,7vw,84px) 0; text-align:center; }
.tiendas-cta h2{ font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); font-weight:400; margin-bottom:14px; }
.tiendas-cta p{ color:rgba(255,255,255,.72); max-width:52ch; margin:0 auto 26px; line-height:1.7; }

@media (max-width:860px){
  .tienda{ grid-template-columns:1fr; gap:24px; padding:38px 0; }
  .tienda:nth-child(even) .tienda-foto{ order:0; }
  .tienda-foto{ aspect-ratio:16/10; }
  .tienda-nota{ max-width:none; }
  .tienda-acciones{ flex-direction:column; align-items:stretch; }
  .tienda-acciones .btn{ justify-content:center; }
}

/* Páginas de zona (Palma, Mojácar) */
.zona-texto{ max-width:820px; padding-bottom:84px; margin-left:auto; margin-right:auto; }
.zona-texto h2{ font-family:var(--serif); font-size:clamp(22px,2.6vw,29px); font-weight:400; margin:44px 0 14px; }
.zona-texto h3{ font-size:16px; font-weight:600; margin:24px 0 10px; }
.zona-texto p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:14px; }
.zona-texto a:not(.btn){ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.zona-dato{ font-size:15.5px; line-height:1.8; color:var(--ink) !important; }
.zona-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; margin-top:8px; }
.zona-grid h2{ margin-top:0; }
.zona-foto{ overflow:hidden; background:var(--paper-deep); }
.zona-foto img{ width:100%; height:auto; display:block; }
.zona-opciones{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:22px 0 8px; }
.zona-opciones > div{ border:1px solid var(--line); padding:26px 22px; background:var(--white); }
.zona-opciones h3{ margin-top:0; }
.zona-opciones .btn{ margin-top:6px; font-size:14px; padding:11px 20px; }
@media (max-width:820px){
  .zona-grid{ grid-template-columns:1fr; gap:26px; }
  .zona-opciones{ grid-template-columns:1fr; }
  .zona-texto{ padding-bottom:64px; }
  .zona-opciones .btn{ width:100%; justify-content:center; }
}
.zona-foto-ancha{ margin-bottom:10px; background:none; }
.zona-foto-ancha img{ width:100%; height:auto; display:block; }
.zona-pie{ font-size:13px !important; color:var(--ink-soft); margin-top:10px; }

/* Bloque de tiendas en el pie */
.footer-tiendas h4{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:10px; }
.footer-tiendas ul{ list-style:none; margin:0 0 10px; padding:0; }
.footer-tiendas li{ margin-bottom:8px; }
.footer-tiendas a{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.footer-tiendas strong{ font-size:13px; font-weight:500; color:rgba(255,255,255,.88); }
.footer-tiendas span{ font-size:11.5px; color:rgba(255,255,255,.5); line-height:1.45; }
.footer-tiendas a:hover strong{ color:var(--green-light, #7FC17F); }
.footer-vertodas{ font-size:13px; color:rgba(255,255,255,.62); text-decoration:none; }
.footer-vertodas:hover{ color:var(--white); }

/* Entradilla y llamada dentro de artículos */
.article-page .entradilla{ font-size:17px; line-height:1.7; color:var(--ink); margin-bottom:8px; }
.articulo-cta{
  background:var(--paper-deep); border-left:3px solid var(--green);
  padding:28px 26px; margin:38px 0;
}
.articulo-cta h3{ font-family:var(--serif); font-size:21px; font-weight:400; margin:0 0 8px; }
.articulo-cta p{ margin-bottom:18px; }
.articulo-cta .tienda-acciones{ display:flex; gap:10px; flex-wrap:wrap; }
.articulo-cta .btn{ font-size:14px; padding:12px 22px; }
@media (max-width:640px){
  .articulo-cta{ padding:24px 20px; margin:30px 0; }
  .articulo-cta .tienda-acciones{ flex-direction:column; }
  .articulo-cta .btn{ width:100%; justify-content:center; }
}

.pd-gallery-thumbs button{ aspect-ratio:1/1; padding:0; background:var(--paper-deep); border:1px solid var(--line); cursor:pointer; overflow:hidden; transition:border-color .2s ease; }
.pd-gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-gallery-thumbs button:hover{ border-color:var(--green); }
.pd-gallery-thumbs button[aria-current="true"]{ border-color:var(--green); }

/* Listado de analíticas de laboratorio */
.lista-analiticas{ list-style:none; margin:0; padding:0; }
.lista-analiticas li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line, #E2DFD4);
}
.lista-analiticas a{ font-size:15.5px; border-bottom:1px solid transparent; }
.lista-analiticas a:hover{ color:var(--green); border-color:var(--green); }
.lista-analiticas span{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
@media (max-width:560px){
  .lista-analiticas li{ flex-direction:column; gap:3px; }
  .lista-analiticas span{ white-space:normal; }
}
.pd-nota-aprox{
  margin-top:12px; font-size:13px; line-height:1.7; color:var(--ink-soft);
  padding-left:13px; border-left:2px solid var(--line, #E2DFD4);
}

/* =========================================================
   Packs (bundles.html) — banda oscura: zona de promoción
   ========================================================= */
.packs-band{
  background:var(--ink); color:var(--white);
  padding:clamp(26px,3vw,38px) 0 clamp(58px,7vw,90px);
}
/* La migaja vive dentro del negro: sin franja clara que corte arriba */
.breadcrumb-oscuro{
  color:rgba(255,255,255,.42);
  margin:0 0 clamp(30px,4vw,44px);
}
.breadcrumb-oscuro a{ color:rgba(255,255,255,.6); }
.breadcrumb-oscuro a:hover{ color:var(--green-bright); }
.packs-band .packs-intro h1{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(34px,5vw,58px); line-height:1.06;
  letter-spacing:-.015em; margin:0 0 16px; max-width:14ch;
}
.packs-band .wrap{ position:relative; }
.packs-intro{ max-width:58ch; margin:0 0 clamp(38px,4.5vw,54px); }
.packs-intro span{
  display:inline-block; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:14px;
}
.packs-intro h2{
  font-family:var(--serif); font-weight:400; color:var(--white);
  font-size:clamp(28px,3.6vw,40px); line-height:1.12; margin:0 0 12px;
}
.packs-intro p{ color:rgba(255,255,255,.62); font-size:16px; line-height:1.75; margin:0; }

.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }

.pack-card{
  position:relative; display:flex; flex-direction:column;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  padding:36px 30px 30px; border-radius:3px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.pack-card:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.075);
  transform:translateY(-4px);
}
.pack-card-destacado{
  border-color:var(--green-bright);
  background:rgba(95,190,99,.07);
  box-shadow:0 0 0 1px rgba(95,190,99,.25), 0 26px 60px rgba(0,0,0,.4);
}
.pack-card-destacado:hover{ border-color:var(--green-bright); background:rgba(95,190,99,.1); }

.pack-cinta{
  position:absolute; top:0; right:26px; transform:translateY(-50%);
  background:var(--green-bright); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; padding:6px 13px; border-radius:2px;
}
.pack-num{
  font-family:var(--sans); font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 12px;
}
.pack-nombre{
  font-family:var(--serif); font-weight:400; color:var(--white);
  line-height:1.1; font-size:clamp(25px,2.6vw,31px); margin:0 0 13px;
  letter-spacing:-.01em; text-wrap:balance;
}
.pack-gancho{ color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.65; margin:0 0 26px; text-wrap:pretty; }

.pack-items{ list-style:none; margin:0 0 26px; padding:0; flex:1 1 auto; }
.pack-items li{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px 0; font-size:14.5px; color:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pack-items li:first-child{ border-top:1px solid rgba(255,255,255,.1); }
.pack-items li span:last-child{ color:rgba(255,255,255,.45); white-space:nowrap; }

.pack-precio{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:10px; margin-top:auto; padding-top:6px; flex-wrap:wrap;
}
.pack-precio > div{ min-width:0; }
.pack-suelto{
  display:block; font-size:12.5px; color:rgba(255,255,255,.4);
  text-decoration:line-through; margin-bottom:4px;
}
.pack-final{
  display:block; font-family:var(--serif);
  font-size:clamp(26px,2.4vw,32px);
  line-height:1; color:var(--white); letter-spacing:-.01em;
  white-space:nowrap;          /* el símbolo de euro nunca cae de línea */
}
.pack-ahorro{
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--green-bright);
  padding:5px 9px; border-radius:2px; white-space:nowrap;
  margin-bottom:4px; flex:0 0 auto;
}

/* En fondo oscuro el botón se invierte: blanco sólido, máximo contraste */
.pack-cta.btn-primary{
  margin-top:24px; width:100%; justify-content:center;
  background:var(--white); color:var(--ink); border-color:var(--white);
}
.pack-cta.btn-primary:hover{ background:var(--green-bright); border-color:var(--green-bright); color:var(--ink); }
.pack-envio{
  margin-top:12px; font-size:11.5px; letter-spacing:.05em;
  color:rgba(255,255,255,.42); text-align:center;
}

.packs-pie{
  margin-top:clamp(34px,4vw,48px); padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.packs-pie p{ color:rgba(255,255,255,.55); font-size:14px; margin:0; max-width:60ch; }
.packs-pie a{ color:var(--green-bright); border-bottom:1px solid transparent; white-space:nowrap; }
.packs-pie a:hover{ border-color:var(--green-bright); }

.pack-porque{
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  border-top:1px solid var(--line); padding-top:40px;
}
.pack-porque h3{ font-family:var(--sans); font-weight:600; font-size:16px; margin:0 0 10px; }
.pack-porque p{ color:var(--ink-soft); font-size:15px; line-height:1.8; margin:0; }

@media (max-width:980px){
  .pack-grid{ grid-template-columns:1fr; gap:14px; }
  .pack-card{ padding:32px 24px 26px; }
  .pack-card-destacado{ box-shadow:0 0 0 1px rgba(95,190,99,.25); }
  .pack-porque{ grid-template-columns:1fr; gap:26px; padding-top:32px; }
  .packs-pie{ flex-direction:column; align-items:flex-start; }
}


/* Cantidades dentro del carrito lateral */
.cart-item-qty-mini{ margin-top:7px; width:fit-content; }
.cart-item-qty-mini button{ width:26px; height:28px; font-size:14px; }
.cart-item-qty-mini span{ min-width:26px; text-align:center; font-size:13.5px; }
.cart-drawer-seguir{ width:100%; justify-content:center; margin-top:9px; }

/* Contacto y Legal comparten columna: así no queda una fila suelta debajo */
.footer-col-doble{ display:flex; flex-direction:column; gap:20px; }
.footer-brand p{ font-size:12.5px; line-height:1.6; color:#9A9C91; max-width:34ch; }
.footer-slogan{ margin-top:10px; }
@media (max-width:880px){ .footer-col-doble{ gap:22px; } }

/* Pie más compacto: el logo no necesita el tamaño de la cabecera */
.footer-brand .logo img{ max-width:112px; height:auto; }
.footer-brand{ padding-right:10px; }

/* El texto del bloque de lista va junto, como una sola columna */
.fs-texto{ display:block; }
.fs-texto .fs-eyebrow{ margin-bottom:6px; }
.fs-texto h4{ margin:0 0 5px; }
.fs-texto p{ margin:0; }


/* ---------- Carrito y pago en móvil ---------- */
/* El contenedor del carrito llevaba los laterales a cero en línea y los campos
   salían pegados al borde de la pantalla. Ahora hereda el margen de .wrap. */
.wrap-carrito{ padding-top:16px; padding-bottom:110px; }

/* La cabecera y la barra de promoción son fijas: sin esto, al saltar de campo
   en campo el navegador deja la etiqueta escondida debajo. */
.contact-form .form-row{ scroll-margin-top:132px; }

@media (max-width:640px){
  .wrap-carrito{ padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }

  /* Campos cómodos de tocar. Los 16px del input son deliberados: por debajo,
     iOS hace zoom al enfocar y descoloca toda la página. */
  .contact-form .form-row{ margin-bottom:18px; }
  .contact-form label{ font-size:13.5px; margin-bottom:7px; display:block; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    font-size:16px; padding:13px 14px; border-radius:3px; width:100%;
  }
  .campo-ayuda{ font-size:12.5px; line-height:1.5; margin-top:6px; }

  /* Dos columnas no caben: una debajo de otra. */
  .form-row-split{ grid-template-columns:1fr; gap:0; }

  .cart-section-title{ font-size:20px; margin:32px 0 16px; }

  /* La frase completa no cabe en una línea de móvil y la casilla se quedaba
     sola arriba. Texto más corto en el HTML y tipografía algo menor. */
  .cart-save-data{ font-size:12.5px; gap:8px; align-items:center; }
  .cart-save-data input{ width:15px; height:15px; flex:0 0 15px; }
  .cart-payment-note{ font-size:13px; padding:13px 14px; }

  /* El botón de pedido tiene que quedar por encima de la barra del navegador. */
  .cart-submit{ padding:15px 20px; font-size:15px; margin-top:8px; }
}

/* El botón de WhatsApp tapaba el aviso de pago y el botón de pedido. En el
   carrito se queda solo el icono y sube por encima de la barra del navegador. */
@media (max-width:640px){
  .wa-float{
    left:auto; right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    padding:11px; gap:0;
  }
  .wa-float .wa-label{ display:none; }
}
body.pagina-carrito .wa-float{ display:none; }