/* ============================================================
   VERDECITOK — Estilos
   Paleta tomada del logo: verde natural sobre crema.
   ============================================================ */

/* Paleta tomada del logo: crema + verde salvia.
   --verde-claro es el verde EXACTO del logo (decorativo: fondos, bordes,
   detalles). --verde es una versión más profunda, la que lleva texto
   blanco encima (botones) para que se lea bien.                        */
:root{
  --blanco:      #FFFFFF;
  --crema:       #FFFDE7;   /* crema del logo — fondo principal */
  --crema-2:     #EFEAC9;   /* bordes y placeholders */
  --menta:       #DDEAC2;   /* verde muy claro para fills suaves */
  --lima:        #C9E38A;   /* acento claro */
  --verde-claro: #A1CA74;   /* verde exacto del logo */
  --verde:       #55742F;   /* acción: botones y textos de acento */
  --verde-osc:   #435C24;   /* hover */
  --verde-deep:  #36471E;   /* verde profundo: texto y secciones oscuras */
  --tinta:       #36471E;
  --tinta-soft:  #6A7852;
  --sombra:     0 14px 46px rgba(54,71,30,.14);
  --sombra-sm:  0 5px 20px rgba(54,71,30,.09);
  --radio:      18px;
  --ancho:      1180px;
  --ease:       cubic-bezier(.22,1,.36,1);
  --titulo:      "Outfit", system-ui, sans-serif;   /* títulos */
  --texto:       "Inter", system-ui, -apple-system, sans-serif;  /* texto */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  font-family:var(--texto);
  color:var(--tinta);
  background:var(--crema);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }

/* ---------- INTRO: logo animado ----------
   Panel verde a pantalla completa con el logo. Al terminar, el panel
   se achica (clip-path) hasta calzar exactamente sobre el carousel,
   y ahí se desvanece: el verde "se convierte" en la primera foto.   */
#intro{
  position:fixed; inset:0; z-index:9999;
  background:#A1CA74;                    /* mismo verde del logo oficial */
  display:grid; place-items:center;
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
#intro.fin{ pointer-events:none; }

.intro-logo{ width:min(62vw, 620px); display:flex; flex-direction:column; align-items:center; gap:2px; }
.il-word{ width:100%; clip-path:inset(0 100% 0 0); }   /* se revela de izq. a der. */
.il-word img{ width:100%; height:auto; display:block; }
.il-sub{ width:34%; height:auto; align-self:flex-end; margin-right:2%; opacity:0; }

@media (max-width:640px){ .intro-logo{ width:78vw; } }

/* mientras dura la intro, nada de scroll */
body.intro-activa{ overflow:hidden; }

/* Cursor personalizado desactivado (se usa el cursor normal del sistema) */
.cursor-dot,.cursor-ring{ display:none !important; }

/* ============================================================
   HEADER de 3 filas
   ============================================================ */
.site-header{ position:relative; z-index:200; }

/* fila 1 — marquee de claims */
/* fila 1 — contacto */
.utilbar{ background:var(--crema); border-bottom:1px solid var(--crema-2); font-size:.83rem; }
.ub-in{ display:flex; align-items:center; justify-content:space-between; padding:9px 24px; }
.utilbar a{ color:var(--tinta-soft); transition:color .2s; }
.utilbar a:hover{ color:var(--verde-osc); }
.ub-links{ display:flex; align-items:center; gap:12px; }
.ub-links .sep{ opacity:.35; }

/* fila 3 — nav principal */
.mainnav{ position:relative; background:var(--blanco); border-bottom:1px solid var(--crema-2); transition:box-shadow .3s var(--ease); }
.mainnav.fixed{ position:fixed; top:0; left:0; right:0; z-index:200; box-shadow:var(--sombra-sm); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.mn-in{ display:flex; align-items:center; gap:26px; padding:14px 24px; }
.nav-logo{ flex:none; display:block; line-height:0; }
.nav-logo img{ height:30px; width:auto; display:block; }
@media (max-width:640px){ .nav-logo img{ height:24px; } }

.mn-links{ list-style:none; display:flex; gap:26px; margin:0 auto; }
.mn-links a{
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta); position:relative; padding:4px 0;
}
.mn-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--verde); transition:width .3s var(--ease);
}
.mn-links a:hover::after{ width:100%; }

.mn-right{ display:flex; align-items:center; gap:16px; flex:none; }
.mn-search{
  display:flex; align-items:center; gap:8px; background:var(--crema);
  border:1.5px solid var(--crema-2); border-radius:999px; padding:8px 14px;
  color:var(--tinta-soft); transition:border-color .25s;
}
.mn-search:focus-within{ border-color:var(--verde); }
.mn-search input{ border:none; background:none; outline:none; font-family:inherit; font-size:.88rem; color:var(--tinta); width:130px; }
.mn-search input::-webkit-search-cancel-button{ cursor:pointer; }

.mn-cart{ display:flex; align-items:center; gap:9px; color:var(--tinta); transition:color .2s; }
.mn-cart:hover{ color:var(--verde-osc); }
.mn-cart .ic{ position:relative; display:grid; place-items:center; }
.mn-cart .count{
  position:absolute; top:-6px; right:-8px; background:var(--verde); color:#fff;
  font-size:.66rem; font-weight:800; min-width:18px; height:18px; border-radius:999px;
  display:grid; place-items:center; padding:0 4px;
}
.mn-cart .tot{ font-weight:700; font-size:.86rem; }

/* botón hamburguesa: oculto en desktop, solo aparece en mobile */
.mn-burger{
  display:none; flex:none; width:32px; height:32px; align-items:center; justify-content:center;
}
.mn-burger span,.mn-burger span::before,.mn-burger span::after{
  content:""; display:block; width:20px; height:2px; background:var(--tinta); border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease), background .2s;
}
.mn-burger span{ position:relative; }
.mn-burger span::before{ position:absolute; left:0; top:-6px; }
.mn-burger span::after{ position:absolute; left:0; top:6px; }
.mainnav.nav-open .mn-burger span{ background:transparent; }
.mainnav.nav-open .mn-burger span::before{ transform:translateY(6px) rotate(45deg); }
.mainnav.nav-open .mn-burger span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .mn-in{ justify-content:space-between; }
  .mn-burger{ display:flex; }
  .mn-search input{ width:88px; }

  .mn-links{
    display:flex; flex-direction:column; gap:0; margin:0;
    position:absolute; top:100%; left:0; right:0; z-index:50;
    background:var(--blanco); border-bottom:1px solid var(--crema-2); box-shadow:var(--sombra-sm);
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .mainnav.nav-open .mn-links{ max-height:320px; }
  .mn-links a{ display:block; padding:15px 24px; border-top:1px solid var(--crema-2); }
  .mn-links a::after{ display:none; }
}

@media (max-width:520px){
  .mn-search{ display:none; }
}

/* ---------- Hero con secuencia scroll ---------- */
.hero{ position:relative; height:100vh; overflow:hidden; }
.hero-sequence{ position:absolute; inset:0; width:100%; height:100%; }
.hero-sequence canvas{ width:100%; height:100%; display:block; }
.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 100%, var(--menta) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 80% 0%, #EAFBEF 0%, rgba(255,255,255,0) 50%),
    var(--blanco);
}
.hero-content{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 24px;
}
.hero-kicker{
  font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:.72rem;
  color:var(--verde-osc); margin-bottom:22px;
}
.hero h1{
  font-family:var(--titulo); font-weight:600; line-height:.98; letter-spacing:-.03em;
  font-size:clamp(2.8rem,9vw,6.5rem); color:var(--tinta);
}
.hero h1 em{ font-style:italic; color:var(--verde-osc); }
.hero p.sub{ margin-top:22px; font-size:clamp(1rem,2vw,1.25rem); color:var(--tinta-soft); max-width:520px; }
.hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn-primary{
  background:var(--verde); color:#fff; font-weight:600; padding:15px 30px; border-radius:999px;
  font-size:1rem; transition:transform .25s var(--ease), box-shadow .25s; box-shadow:var(--sombra-sm);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.btn-ghost{
  border:1.5px solid var(--verde); color:var(--verde-osc); font-weight:600; padding:15px 30px;
  border-radius:999px; transition:background .25s, color .25s;
}
.btn-ghost:hover{ background:var(--verde); color:#fff; }
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-soft); opacity:.7;
  pointer-events:none; user-select:none;
}
/* en pantallas bajas se pisaba con los botones */
@media (max-height:760px){ .scroll-hint{ display:none; } }
.scroll-hint::after{ content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:var(--verde-osc); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ============================================================
   HERO con CAROUSEL interactivo
   ============================================================ */
.hero-c{ position:relative; background:var(--crema); height:100vh; height:100svh; }

.carousel{ position:relative; width:100%; height:100%; }
.car-viewport{ overflow:hidden; height:100%; }
.car-track{ display:flex; height:100%; transition:transform .8s var(--ease); will-change:transform; }

.car-slide{ flex:0 0 100%; height:100%; user-select:none; }
.car-slide picture{ display:block; width:100%; height:100%; }
.car-slide img{
  width:100%; height:100%;
  object-fit:cover; display:block; -webkit-user-drag:none;
}
/* esta foto es vertical (retrato), a diferencia de las otras del carousel
   que son panorámicas — subimos el encuadre para que se vean las caras */
.car-slide-retrato img{ object-position:50% 22%; }

/* flechas */
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.9); color:var(--verde-deep); backdrop-filter:blur(6px);
  display:grid; place-items:center; box-shadow:var(--sombra-sm);
  transition:transform .25s var(--ease), background .25s, color .25s;
}
.car-arrow:hover{ background:var(--verde); color:#fff; transform:translateY(-50%) scale(1.08); }
.car-arrow.prev{ left:22px; }
.car-arrow.next{ right:22px; }

/* pie: puntos + barra, superpuestos sobre la imagen */
.car-foot{
  position:absolute; left:0; right:0; bottom:22px; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 24px;
}
.car-dots{ display:flex; gap:9px; }
.car-dots button{
  width:9px; height:9px; border-radius:50%; border:1.5px solid #fff;
  background:rgba(255,255,255,.35); box-shadow:0 1px 6px rgba(0,0,0,.35);
  transition:all .3s var(--ease);
}
.car-dots button.on{ background:#fff; transform:scale(1.35); }
.car-bar{ width:min(260px,60%); height:3px; background:rgba(255,255,255,.35); border-radius:3px; overflow:hidden; }
.car-bar span{ display:block; height:100%; width:0; background:#fff; }

@media (max-width:860px){
  .car-arrow{ width:40px; height:40px; }
  .car-arrow.prev{ left:10px; }
  .car-arrow.next{ right:10px; }
}

/* ============================================================
   SHOWCASE — paneles a pantalla completa con SNAP ON SCROLL
   El canvas 3D queda sticky detrás y el fondo cambia por panel.
   ============================================================ */
.showcase{ position:relative; }

/* temas por panel */
.showcase[data-theme="1"]{ --sc-bg:#FFFFFF; --sc-fg:#16351F; --sc-acc:#2FB865; --sc-dim:#4A6B54; }
.showcase[data-theme="2"]{ --sc-bg:#16351F; --sc-fg:#F4FBF4; --sc-acc:#D6F45B; --sc-dim:#9DBFA8; }
.showcase[data-theme="3"]{ --sc-bg:#C8F0D8; --sc-fg:#16351F; --sc-acc:#1F9E52; --sc-dim:#3F6B4F; }

.showcase-bg{
  position:sticky; top:0; height:100vh; height:100svh; z-index:0;
  background:var(--sc-bg); transition:background-color .7s var(--ease);
}
.showcase-bg canvas{ width:100%; height:100%; display:block; }

.sc-slide{
  position:relative; z-index:2; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; color:var(--sc-fg);
  transition:color .7s var(--ease);
}
.sc-slide.first{ margin-top:-100vh; margin-top:-100svh; }  /* se monta sobre el canvas */
.sc-inner{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; }
.sc-inner.center{ text-align:center; }

.sc-kick{
  display:block; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  font-size:.72rem; color:var(--sc-acc); margin-bottom:26px;
}
.sc-title{
  font-family:var(--titulo); font-weight:600; line-height:.92; letter-spacing:-.035em;
  font-size:clamp(3rem,8.5vw,7.5rem);
}
.sc-title.sm{ font-size:clamp(2.4rem,6vw,5rem); }
.sc-title em{ font-style:italic; color:var(--sc-acc); }
/* palabra en contorno — look editorial */
.sc-outline{
  -webkit-text-stroke:2px var(--sc-fg); color:transparent;
  -webkit-text-fill-color:transparent;
}
.sc-lead{
  margin-top:28px; max-width:460px; font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.55; color:var(--sc-dim);
}

/* lista numerada del panel 2 */
.sc-list{ list-style:none; margin-top:40px; display:grid; gap:2px; max-width:720px; }
.sc-list li{
  display:flex; gap:24px; align-items:baseline;
  padding:22px 0; border-top:1px solid color-mix(in srgb, var(--sc-fg) 18%, transparent);
}
.sc-list li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--sc-fg) 18%, transparent); }
.sc-list .n{ font-family:var(--titulo); font-size:1rem; color:var(--sc-acc); font-weight:600; flex:none; width:34px; }
.sc-list h3{ font-family:var(--titulo); font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:600; }
.sc-list p{ color:var(--sc-dim); font-size:.95rem; margin-top:4px; }

/* UI fija: contador, puntos y cue */
.sc-ui{ position:fixed; inset:0; pointer-events:none; z-index:6; opacity:0; transition:opacity .5s var(--ease); }
.sc-ui.on{ opacity:1; }
.sc-count{
  position:absolute; left:34px; bottom:34px; display:flex; align-items:center; gap:12px;
  font-family:var(--titulo); font-size:.95rem; color:var(--sc-fg); font-variant-numeric:tabular-nums;
}
.sc-count .sep{ width:34px; height:1px; background:currentColor; opacity:.4; }
.sc-count .sc-tot{ opacity:.45; }
.sc-dots{ position:absolute; right:34px; top:50%; transform:translateY(-50%); list-style:none; display:grid; gap:14px; pointer-events:auto; }
.sc-dots li{
  width:9px; height:9px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--sc-fg); opacity:.35; transition:all .3s var(--ease);
}
.sc-dots li.on{ opacity:1; background:var(--sc-acc); border-color:var(--sc-acc); transform:scale(1.25); }
.sc-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--sc-fg); opacity:.55;
}
.sc-cue::after{ content:""; display:block; width:1px; height:26px; margin:8px auto 0; background:currentColor; animation:scrolldot 1.8s var(--ease) infinite; }

/* nav adaptado a panel oscuro */
header.nav.on-dark .nav-logo{ color:var(--menta); }
header.nav.on-dark .nav-logo b{ color:var(--lima); }
header.nav.on-dark.solid{ background:rgba(22,53,31,.75); }

@media (max-width:760px){
  .sc-count{ left:20px; bottom:22px; }
  .sc-dots{ right:16px; }
  .sc-list li{ gap:14px; padding:16px 0; }
}

/* ---------- Franja de valores ---------- */
.valores{ background:var(--verde-deep); color:var(--crema); padding:60px 0; }
.valores .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.valores .item h3{ font-family:var(--titulo); font-size:1.3rem; margin-bottom:8px; }
.valores .item p{ opacity:.85; font-size:.95rem; line-height:1.5; }
.valores .item .ico{ font-size:1.8rem; margin-bottom:12px; }

/* ---------- Sección productos ---------- */
.section{ padding:90px 0; }
.section-head{ text-align:center; margin-bottom:50px; }
.section-head .kick{ font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--verde-osc); }
.section-head h2{ font-family:var(--titulo); font-size:clamp(2rem,5vw,3.2rem); color:var(--tinta); margin-top:10px; letter-spacing:-.02em; }

.filtros{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.filtros button{
  border:1.5px solid var(--crema-2); background:var(--blanco); color:var(--tinta-soft);
  padding:9px 20px; border-radius:999px; font-weight:600; font-size:.9rem; transition:all .25s var(--ease);
}
.filtros button.active,.filtros button:hover{ background:var(--verde); border-color:var(--verde); color:#fff; }

.grid-prod{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(260px,320px));
  justify-content:center;          /* tarjetas centradas */
}

/* ============================================================
   TRANSICIÓN entre páginas (al abrir un producto)
   Una cortina crema sube, navega, y baja del otro lado.
   ============================================================ */
#trans{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:#A1CA74;                     /* mismo verde del logo/intro */
  transform:translateY(100%);
  display:grid; place-items:center;
}
#trans .mascota{ width:min(42vw, 230px); height:auto; overflow:visible; opacity:0; }
@media (max-width:640px){ #trans .mascota{ width:56vw; } }
.card{
  background:var(--crema); border:2px solid var(--verde-deep); border-radius:16px; overflow:hidden;
  box-shadow:0 6px 0 rgba(54,71,30,.14);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 10px 0 rgba(54,71,30,.16); }
.card-img{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--crema-2); position:relative; border-bottom:2px solid var(--verde-deep); }
.card-img picture{ display:block; width:100%; height:100%; }
.card-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 80%; transition:transform .6s var(--ease); }
.card:hover .card-img img{ transform:scale(1.06); }
.card-img .ph{ width:100%; height:100%; display:grid; place-items:center; color:var(--verde-osc); font-family:var(--titulo); font-size:1.4rem; opacity:.6; }
.badge{ position:absolute; top:12px; left:12px; background:var(--verde-deep); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.badge.sin-stock{ background:#c0563f; }
.card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.card-body h3{
  font-family:var(--titulo); font-weight:800; font-size:.98rem; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.32; color:var(--verde-deep); margin:0 0 10px;
}
.card-body h3 a{ color:inherit; }
.card-body h3 a:hover{ color:var(--verde-osc); }
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 14px; }
.card-tags li{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  color:var(--verde-deep); background:rgba(54,71,30,.08); border:1px solid rgba(54,71,30,.18);
  border-radius:999px; padding:4px 10px;
}
.card-desc{
  font-size:.82rem; color:var(--tinta-soft); line-height:1.5; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:10px; }
.precio{ font-family:var(--titulo); font-size:1.3rem; font-weight:700; color:var(--verde-deep); }
.btn-add{ background:var(--verde-deep); color:#fff; font-weight:700; font-size:.82rem; padding:10px 16px; border-radius:999px; transition:transform .2s var(--ease), background .2s; }
.btn-add:hover{ transform:scale(1.05); background:var(--verde-osc); }
.btn-add:disabled{ background:var(--crema-2); color:var(--tinta-soft); cursor:not-allowed; transform:none; }

.empty{ text-align:center; padding:60px 0; color:var(--tinta-soft); }

/* ============================================================
   CÓMO FUNCIONA — 3 pasos con snap + ilustraciones animadas
   ============================================================ */
.pasos{ position:relative; }

.paso{
  min-height:100vh; min-height:100svh; display:flex; align-items:center;
  background:var(--p-bg); color:var(--p-fg);
  transition:background-color .6s var(--ease);
}
.paso[data-paso="1"]{ --p-bg:#FFFDE7; --p-fg:#36471E; --p-acc:#55742F; --p-dim:#6A7852; --p-road:#EFEAC9; --p-dash:#A1CA74; }
.paso[data-paso="2"]{ --p-bg:#DDEAC2; --p-fg:#36471E; --p-acc:#435C24; --p-dim:#5A6A45; --p-road:#C3D6A3; --p-dash:#55742F; }
.paso[data-paso="3"]{ --p-bg:#36471E; --p-fg:#FFFDE7; --p-acc:#C9E38A; --p-dim:#A8B78F; --p-road:#4A5C2C; --p-dash:#C9E38A; }

.paso-in{
  width:100%; max-width:var(--ancho); margin:0 auto; padding:70px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
/* invierte columnas en el paso del medio */
.paso.alt .paso-in{ direction:rtl; }
.paso.alt .paso-in > *{ direction:ltr; }

.paso-n{
  display:inline-block; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  font-size:.72rem; color:var(--p-acc); margin-bottom:16px;
}
.paso h2{
  font-family:var(--titulo); font-weight:600; letter-spacing:-.03em; line-height:.95;
  font-size:clamp(2.6rem,6.5vw,4.6rem);
}
.paso p{ margin-top:20px; color:var(--p-dim); font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.6; max-width:430px; }

.paso-art{ display:grid; place-items:center; }
.paso-art svg{ width:100%; max-width:480px; height:auto; max-height:58vh; overflow:visible; }
.e-card{ fill:var(--p-acc); opacity:.16; }

@media (max-width:860px){
  .paso-in{ grid-template-columns:1fr; gap:26px; padding:90px 24px 60px; text-align:center; }
  .paso.alt .paso-in{ direction:ltr; }
  .paso p{ margin-left:auto; margin-right:auto; }
  .paso-art{ order:-1; }
  .paso-art svg{ max-height:38vh; }
}

/* ============================================================
   SOBRE NOSOTROS
   ============================================================ */
.nosotros{ background:var(--crema); }
.nosotros-layout{
  display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;
}
.nosotros-txt .kick{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:.72rem; color:var(--verde); margin-bottom:14px; display:block;
}
.nosotros-txt h2{
  font-family:var(--titulo); font-weight:700; font-size:clamp(2rem,5vw,3.2rem);
  color:var(--tinta); letter-spacing:-.02em; margin-bottom:22px;
}
.nosotros-txt p{
  color:var(--tinta-soft); font-size:1.05rem; line-height:1.7; max-width:520px;
}
.nosotros-img{
  border-radius:24px; overflow:hidden; box-shadow:var(--sombra);
  aspect-ratio:1/1;
}
.nosotros-img picture{ display:block; width:100%; height:100%; }
.nosotros-img img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:860px){
  .nosotros-layout{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .nosotros-txt p{ margin-left:auto; margin-right:auto; }
  .nosotros-img{ max-width:340px; margin:0 auto; }
}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.prod-page{ padding:44px 0 70px; }
.crumbs{ font-size:.84rem; color:var(--tinta-soft); margin-bottom:28px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--verde-osc); }
.crumbs span{ opacity:.4; }
.crumbs b{ color:var(--tinta); font-weight:600; }

.prod-top{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

/* ============================================================
   GALERÍA de producto — swiper + zoom (estilo Zanna's)
   ============================================================ */
.prod-gallery{ position:relative; }
.pg-main{
  position:relative; aspect-ratio:1/1; max-height:760px; border-radius:24px; overflow:hidden;
  background:var(--crema-2); box-shadow:var(--sombra-sm); margin:0 auto;
  transition:aspect-ratio .25s var(--ease);
}
.pg-track{ display:flex; width:100%; height:100%; transition:transform .55s var(--ease); }
.pg-slide{ flex:0 0 100%; height:100%; overflow:hidden; display:grid; grid-template-rows:100%; grid-template-columns:100%; place-items:center; }
.pg-slide picture{ display:block; width:100%; height:100%; }
.pg-slide img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .15s linear; will-change:transform;
}
.pg-slide .ph{ font-family:var(--titulo); font-size:2rem; color:var(--verde-osc); opacity:.45; }
@media (hover:hover){ .pg-main{ cursor:zoom-in; } }

.pg-badge{ position:absolute; top:14px; left:14px; z-index:3; }
.pg-badge.sin-stock{ top:56px; }

.pg-zoom-hint{
  position:absolute; bottom:14px; right:14px; z-index:3;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--verde-deep); display:grid; place-items:center; box-shadow:var(--sombra-sm);
  transition:transform .2s var(--ease), background .2s;
}
.pg-zoom-hint:hover{ background:var(--verde); color:#fff; transform:scale(1.08); }

/* miniaturas abajo: forma clara y directa de cambiar de foto */
.pg-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pg-thumb{
  width:64px; height:64px; flex:none; border-radius:12px; overflow:hidden;
  border:2.5px solid transparent; box-shadow:var(--sombra-sm); background:var(--crema-2);
  opacity:.62; transition:opacity .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pg-thumb picture{ display:block; width:100%; height:100%; }
.pg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-thumb:hover{ opacity:.9; transform:translateY(-2px); }
.pg-thumb.on{ opacity:1; border-color:var(--verde); }

@media (max-width:760px){
  .pg-thumb{ width:56px; height:56px; }
}

/* ---------- Lightbox de fotos ---------- */
.pg-light{
  position:fixed; inset:0; z-index:9500; background:rgba(22,29,13,.94);
  display:none; align-items:center; justify-content:center;
}
.pg-light.open{ display:flex; }
.pg-light-stage{ width:min(92vw,900px); height:min(80vh,900px); display:grid; place-items:center; touch-action:pinch-zoom; }
.pg-light-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; }
.pg-light-close{
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.6rem; display:grid; place-items:center;
  transition:background .2s;
}
.pg-light-close:hover{ background:rgba(255,255,255,.22); }
.pg-light-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center; transition:background .2s;
}
.pg-light-arrow:hover{ background:rgba(255,255,255,.22); }
.pg-light-arrow.prev{ left:18px; }
.pg-light-arrow.next{ right:18px; }
.pg-light-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; }
.pg-light-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); }
.pg-light-dots button.on{ background:#fff; transform:scale(1.3); }

/* ============================================================
   BADGE "envío incluido" — el diferencial de la marca
   A propósito NO es una cajita sólida como el precio unitario:
   es una franja ancha, con borde punteado, para que se lea
   claramente distinto (un aviso, no un dato de precio).
   ============================================================ */
.envio-destacado{
  display:flex; align-items:center; gap:12px; width:100%; margin:14px 0 6px;
  background:transparent; border:2px dashed var(--verde);
  border-radius:12px; padding:10px 16px;
}
.ed-ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--verde-deep); color:var(--lima);
  display:grid; place-items:center;
}
.ed-ico svg{ animation:ed-drive 2.4s ease-in-out infinite; }
@keyframes ed-drive{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }
.ed-txt{ font-size:.92rem; color:var(--verde-deep); font-weight:600; line-height:1.3; }
.ed-txt strong{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; }

.pi-cat{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--verde); }
.prod-info h1{ font-family:var(--titulo); font-weight:600; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2rem,4.5vw,3.2rem); color:var(--tinta); margin:10px 0 14px; }
.pi-precio-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pi-precio{ font-family:var(--titulo); font-size:2.3rem; font-weight:600; color:var(--verde-deep); }

/* precio por barra: mismo peso tipográfico que el precio grande,
   pero en su propio recuadro destacado al costado */
.pi-unit-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--verde-claro); border-radius:14px; padding:8px 18px;
  box-shadow:0 6px 16px rgba(85,116,47,.3);
}
.piu-precio{ font-family:var(--titulo); font-size:1.5rem; font-weight:600; color:var(--verde-deep); line-height:1.1; }
.piu-label{
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--verde-deep); opacity:.75;
}
.pi-chips{ display:flex; gap:9px; flex-wrap:wrap; margin:18px 0; }
.chip{ background:var(--crema); border:1.5px solid var(--crema-2); color:var(--tinta-soft); font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:999px; }
.chip.off{ background:#f6d9d1; border-color:#f0c4b7; color:#a03d24; }
.pi-desc{ color:var(--tinta-soft); line-height:1.65; font-size:1rem; }

.pi-compra{ display:flex; gap:12px; align-items:center; margin:26px 0 16px; flex-wrap:wrap; }
.qty-sel{ display:flex; align-items:center; gap:6px; border:1.5px solid var(--crema-2); border-radius:999px; padding:6px; background:var(--blanco); }
.qty-sel button{ width:34px; height:34px; border-radius:50%; background:var(--crema); color:var(--tinta); font-weight:700; font-size:1.05rem; transition:background .2s; }
.qty-sel button:hover{ background:var(--menta); }
.qty-sel span{ min-width:30px; text-align:center; font-weight:700; }
.pi-compra .btn-primary{ flex:1; min-width:190px; }
.pi-compra .btn-primary:disabled{ background:var(--crema-2); color:var(--tinta-soft); cursor:not-allowed; box-shadow:none; }

.pi-wa{ display:inline-flex; align-items:center; gap:9px; color:#128C4A; font-weight:600; font-size:.92rem; }
.pi-wa:hover{ text-decoration:underline; }
.pi-envio{ margin-top:22px; padding:16px 18px; background:var(--crema); border-radius:14px; font-size:.9rem; color:var(--tinta-soft); }
.pi-envio strong{ color:var(--verde-deep); }

/* letras del título (se arma solo) */
.prod-info h1 .ch{ display:inline-block; will-change:transform; }

/* panel de especificaciones (acordeón) */
.prod-specs{ margin-top:64px; max-width:820px; }
.specs-title{ font-family:var(--titulo); font-size:1.7rem; color:var(--tinta); margin-bottom:18px; }
.spec{ border-top:1px solid var(--crema-2); }
.spec:last-child{ border-bottom:1px solid var(--crema-2); }
.spec-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; font-family:var(--texto); font-size:1rem; font-weight:600; color:var(--tinta); text-align:left;
}
.spec-head svg{ flex:none; transition:transform .35s var(--ease); color:var(--verde); }
.spec.open .spec-head svg{ transform:rotate(180deg); }
.spec-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.spec.open .spec-body{ grid-template-rows:1fr; }
.spec-in{ overflow:hidden; }
.spec-in > *{ padding-bottom:22px; color:var(--tinta-soft); line-height:1.65; font-size:.95rem; }
.specs-vacio{ color:var(--tinta-soft); font-size:.95rem; }

table.nutri{ width:100%; border-collapse:collapse; }
table.nutri td{ padding:11px 4px; border-bottom:1px solid var(--crema-2); font-size:.92rem; }
table.nutri td:first-child{ color:var(--tinta); font-weight:600; }
table.nutri td:last-child{ text-align:right; color:var(--verde-deep); font-weight:600; }
table.nutri tr:last-child td{ border-bottom:none; }

.prod-404{ text-align:center; padding:80px 20px; }
.prod-404 h1{ font-family:var(--titulo); font-size:2rem; color:var(--tinta); margin-bottom:10px; }
.prod-404 p{ color:var(--tinta-soft); margin-bottom:26px; }

.rel{ background:var(--crema); }

@media (max-width:860px){
  .prod-top{ grid-template-columns:1fr; gap:26px; }
  .prod-specs{ margin-top:44px; }
}

/* ============================================================
   SEGUINOS
   ============================================================ */
.social{ background:var(--blanco); text-align:center; }
.social .title-container h2.subtitle{
  font-family:var(--titulo); font-size:clamp(1.9rem,4.5vw,2.8rem); color:var(--tinta);
}
.social .title-container p{ color:var(--tinta-soft); margin-top:10px; font-size:.96rem; }
.social-list{ list-style:none; display:flex; justify-content:center; gap:18px; margin-top:34px; flex-wrap:wrap; }
.btn-circle{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--verde); color:#fff; box-shadow:var(--sombra-sm);
  transition:transform .3s var(--ease), background .3s;
}
.btn-circle:hover{ transform:translateY(-5px) scale(1.06); background:var(--verde-deep); }
.btn-circle svg{ width:26px; height:26px; fill:currentColor; }

/* ---------- Carrito (drawer) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(55,69,31,.4); backdrop-filter:blur(2px); z-index:300; opacity:0; visibility:hidden; transition:.4s var(--ease); }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--crema); z-index:400;
  transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--crema-2); }
.drawer-head h3{ font-family:var(--titulo); font-size:1.4rem; }
.drawer-close{ font-size:1.5rem; color:var(--tinta-soft); width:38px; height:38px; border-radius:50%; transition:background .2s; }
.drawer-close:hover{ background:var(--crema-2); }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 24px; }
.cart-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--crema-2); }
.cart-item picture{ flex:none; display:block; }
.cart-item img,.cart-item .ph{ width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--crema-2); flex:none; display:grid; place-items:center; color:var(--verde-osc); font-family:var(--titulo); }
.cart-item .info{ flex:1; }
.cart-item .info h4{ font-size:.95rem; font-weight:600; }
.cart-item .info .p{ color:var(--verde-deep); font-weight:600; font-size:.9rem; margin-top:2px; }
.qty{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.qty button{ width:26px; height:26px; border-radius:8px; background:var(--crema-2); color:var(--tinta); font-weight:700; display:grid; place-items:center; }
.qty span{ font-weight:600; min-width:20px; text-align:center; }
.cart-item .rm{ color:#c0563f; font-size:.78rem; margin-top:6px; }
.drawer-foot{ padding:20px 24px; border-top:1px solid var(--crema-2); background:var(--crema); }
.total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.total-row .lbl{ color:var(--tinta-soft); }
.total-row .val{ font-family:var(--titulo); font-size:1.6rem; font-weight:600; color:var(--verde-deep); }
.drawer-foot .btn-primary{ width:100%; text-align:center; }
.cart-empty{ text-align:center; color:var(--tinta-soft); padding:50px 20px; }

/* ---------- Modal checkout ---------- */
.modal{ position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal-card{ background:var(--crema); width:min(560px,100%); max-height:90vh; overflow-y:auto; border-radius:24px; box-shadow:var(--sombra); }
.modal-card-sm{ width:min(420px,100%); }
.modal-head{ padding:26px 28px 0; }
.modal-head h3{ font-family:var(--titulo); font-size:1.7rem; }
.modal-head p{ color:var(--tinta-soft); margin-top:6px; font-size:.92rem; }
.modal-body{ padding:22px 28px 28px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--tinta-soft); margin-bottom:6px; }
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--crema-2); border-radius:12px; background:var(--blanco);
  font-family:inherit; font-size:.95rem; color:var(--tinta); transition:border .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--verde); }
.copy{ font-size:.72rem; color:var(--verde-osc); cursor:pointer; font-weight:600; }
.resumen{ background:var(--blanco); border-radius:14px; padding:16px; margin-bottom:18px; }
.resumen .li{ display:flex; justify-content:space-between; font-size:.9rem; padding:4px 0; }
.resumen .tot{ border-top:1px solid var(--crema-2); margin-top:8px; padding-top:10px; font-weight:700; }
.btn-wa{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#25D366; color:#fff; font-weight:700; padding:15px; border-radius:999px; font-size:1.02rem; transition:transform .2s var(--ease); }
.btn-wa:hover{ transform:translateY(-2px); }
.modal-close{ position:sticky; top:14px; float:right; margin-right:14px; font-size:1.4rem; color:var(--tinta-soft); width:36px; height:36px; border-radius:50%; }

/* ---------- Footer ---------- */
footer{ background:var(--verde-deep); color:var(--crema); padding:60px 0 34px; }
footer .grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; }
footer .logo{ height:32px; width:auto; display:block; }
footer a{ opacity:.85; transition:opacity .2s; }
footer a:hover{ opacity:1; }
footer .cols{ display:flex; gap:60px; flex-wrap:wrap; }
footer .col h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; opacity:.6; }
footer .col a,footer .col p{ display:block; margin-bottom:8px; font-size:.92rem; }
footer .base{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); font-size:.82rem; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Panel a pantalla completa (snap on scroll) ---------- */
.panel{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* ---------- Marquee infinito ---------- */
.marquee{
  background:var(--verde-deep); color:var(--lima); padding:20px 0; overflow:hidden; white-space:nowrap;
  user-select:none; -webkit-user-select:none;   /* que no se seleccione al scrollear */
}
.marquee .track{ display:inline-flex; gap:40px; will-change:transform; }
.marquee span{ font-family:var(--titulo); font-size:1.5rem; font-weight:600; display:inline-flex; align-items:center; gap:40px; }
.marquee span::after{ content:"·"; color:var(--verde); }

/* ---------- Botón magnético ---------- */
.magnetic{ display:inline-block; will-change:transform; }

/* ---------- Parallax ---------- */
[data-speed]{ will-change:transform; }

/* ---------- Reveals ---------- */
.reveal{ opacity:0; transform:translateY(40px); }
.reveal-char{ display:inline-block; opacity:0; transform:translateY(90%) rotate(4deg); }
.clip-reveal{ clip-path:inset(0 0 100% 0); }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%); background:var(--tinta); color:#fff; padding:14px 22px; border-radius:999px; font-size:.9rem; z-index:600; transition:transform .4s var(--ease); box-shadow:var(--sombra); }
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .valores .grid{ grid-template-columns:1fr; gap:24px; }
  .section{ padding:60px 0; }
  footer .grid{ flex-direction:column; }
}