/* ---------- Tokens ---------- */
:root{
  --cacao-950:#130b07;
  --cacao-900:#1c110a;
  --cacao-850:#241509;
  --cacao-800:#2c190f;
  --cacao-700:#3d2314;
  --cacao-600:#54301b;
  --cream:#f3e7d3;
  --cream-soft:#ecdcbd;
  --paper:#faf5ea;
  --gold:#c69a55;
  --gold-light:#e7c988;
  --gold-deep:#8a6423;
  --ink:#150c07;

  --accent:var(--gold);
  --accent-light:var(--gold-light);
  --accent-dark:var(--gold-deep);

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-script:'Kaushan Script', cursive;
  --font-body:'Jost', 'Helvetica Neue', sans-serif;

  --container:1280px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);
  --radius-chunk:6px;

  --ease:cubic-bezier(.22,.9,.32,1);
}

body[data-line="amargo"]{
  --accent:#c69a55; --accent-light:#e7c988; --accent-dark:#8a6423;
}
body[data-line="honey"]{
  --accent:#d99a2b; --accent-light:#f0c56a; --accent-dark:#7a5518;
}
body[data-line="sinazucar"]{
  --accent:#93ab5e; --accent-light:#c3d79a; --accent-dark:#4f6b34;
}
body[data-line="woow"]{
  --accent:#e0392f; --accent-light:#f4c430; --accent-dark:#a82720;
}
body[data-line="nosotros"]{
  --accent:#c69a55; --accent-light:#e7c988; --accent-dark:#8a6423;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cacao-950);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);text-transform:uppercase;font-weight:400;letter-spacing:.01em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
section{position:relative;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.script{
  font-family:var(--font-script);
  text-transform:none;
  font-weight:400;
  color:var(--accent-light);
  display:inline-block;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--accent);
}

.h1{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2.8rem, 7vw, 6.4rem); line-height:.94; }
.h2{ font-size:clamp(2.2rem, 5.6vw, 4.2rem); line-height:.98; }
.h3{ font-size:clamp(1.5rem, 3vw, 2.2rem); line-height:1.05; }

.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--cream-soft);
  max-width:52ch;
  font-weight:300;
}

/* ---------- Grain / texture ---------- */
.grain{position:relative; isolation:isolate;}
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:5;
}

/* ---------- Buttons / chunks ---------- */
.chunk-btn{
  --btn-bg:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.7em;
  background:var(--btn-bg);
  color:var(--ink);
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:1rem;
  border:none;
  border-radius:var(--radius-chunk);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -4px 0 rgba(0,0,0,.25),
    0 10px 24px -8px rgba(0,0,0,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.chunk-btn:hover{
  transform:translateY(-3px) rotate(-1deg);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -4px 0 rgba(0,0,0,.25),
    0 16px 30px -8px rgba(0,0,0,.6);
}
.chunk-btn.ghost{
  background:transparent;
  color:var(--cream);
  border:1.5px solid var(--accent);
  box-shadow:none;
}
.chunk-btn.ghost:hover{ background:rgba(198,154,85,.12); }

/* ================================================================
   HEADER / TABLET NAV
   ================================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem 0;
  transition:padding .4s var(--ease), box-shadow .4s var(--ease);
}
/* sin franja de fondo: al scrollear el logo pasa a una cápsula de vidrio, igual que la nav */
.site-header::before{ display:none; }
.site-header.scrolled{
  padding:.7rem 0;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.brand{
  display:inline-flex; align-items:center;
  white-space:nowrap;
}
.brand-logo{
  height:82px;
  width:auto;
  display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition:height .4s var(--ease);
}
.site-header.scrolled .brand-logo{ height:62px; }
.footer-logo{
  height:132px;
  margin-bottom:1.1rem;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

.tablet-nav{
  display:flex;
  border:1.5px solid rgba(243,231,211,.25);
  border-radius:8px;
  overflow:hidden;
  background:rgba(0,0,0,.2);
}
.tablet-nav a{
  position:relative;
  padding:.7em 1.1em;
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--cream-soft);
  border-right:1.5px solid rgba(243,231,211,.18);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.tablet-nav a:last-child{border-right:none;}
.tablet-nav a:hover{
  background:var(--accent);
  color:var(--ink);
  transform:translateY(-2px);
}
.tablet-nav a.active{
  background:var(--accent-dark);
  color:var(--cream);
}
.tablet-nav a.active::after{
  content:"";
  position:absolute; left:50%; bottom:4px;
  width:4px;height:4px;border-radius:50%;
  background:var(--accent-light);
  transform:translateX(-50%);
}

.burger{
  display:none;
  width:44px; height:34px;
  border:1.5px solid rgba(243,231,211,.35);
  border-radius:6px;
  background:transparent;
  position:relative;
}
.burger span, .burger span::before, .burger span::after{
  content:"";
  position:absolute; left:9px; right:9px; height:2px; background:var(--cream);
}
.burger span{top:16px;}
.burger span::before{content:"";top:-7px; position:absolute; left:0; right:0; height:2px; background:var(--cream);}
.burger span::after{content:"";top:7px; position:absolute; left:0; right:0; height:2px; background:var(--cream);}

.mobile-menu{
  position:fixed; inset:0; z-index:1500;
  background:var(--cacao-950);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:2rem var(--gutter);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .5s var(--ease), visibility 0s linear .5s;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; transition:transform .5s var(--ease), visibility 0s; }
@media (min-width:1025px){ .mobile-menu{ display:none; } }
.mobile-menu ul{ display:flex; flex-direction:column; gap:.4rem; }
.mobile-menu a{
  font-family:var(--font-display);
  font-size:clamp(2rem,10vw,3.4rem);
  text-transform:uppercase;
  color:var(--cream);
  padding:.25rem 0;
  border-bottom:1px solid rgba(243,231,211,.12);
}
.mobile-menu a:hover{ color:var(--accent); }
.menu-close{
  position:absolute; top:1.4rem; right:var(--gutter);
  width:44px;height:44px;border-radius:6px;
  border:1.5px solid rgba(243,231,211,.3); background:transparent; color:var(--cream);
  font-size:1.4rem;
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  padding-top:8rem;
  padding-bottom:clamp(2.5rem,6vw,5rem);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,11,7,.35) 0%, rgba(19,11,7,.55) 55%, rgba(19,11,7,.96) 100%);
  z-index:1;
}
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ margin-bottom:1rem; display:block; }
.hero .h1{ color:var(--cream); }
.hero .h1 em{ font-style:normal; color:var(--accent-light); }
.hero-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-top:2.4rem;
}

/* ================================================================
   REVEAL ANIMATIONS
   ================================================================ */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ================================================================
   SECTIONS — generic
   ================================================================ */
.section{ padding:clamp(4rem,9vw,7.5rem) 0; }
.section--cream{ background:var(--paper); color:var(--ink); }
.section--cream .eyebrow{ color:var(--accent-dark); }
.section--dark{ background:var(--cacao-950); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }

/* ---------- Nuestra Empresa split ---------- */
.empresa-figure{
  position:relative;
  border-radius:10px;
  overflow:hidden;
}
.empresa-figure img{ width:100%; height:100%; object-fit:cover; }
.empresa-figure .frame-badge{
  position:absolute; right:-1px; bottom:-1px;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-display);
  padding:.9rem 1.2rem;
  font-size:1.6rem;
  border-top-left-radius:10px;
  line-height:1;
}
.empresa-figure .frame-badge small{
  display:block; font-family:var(--font-body); font-size:.55rem; letter-spacing:.1em; font-weight:600;
}

/* ---------- Stat row ---------- */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(198,154,85,.25);
  border-bottom:1px solid rgba(198,154,85,.25);
  margin-top:3rem;
}
.stat{ padding:1.6rem 1rem; text-align:center; border-right:1px solid rgba(198,154,85,.2); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--accent); }
.stat span{ font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--cream-soft); }
.section--cream .stat span{ color:#5a4a38; }

/* ================================================================
   PRODUCT LINES — home grid
   ================================================================ */
.lines-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(198,154,85,.25);
  border:1px solid rgba(198,154,85,.25);
}
.line-card{
  background:var(--cacao-900);
  padding:2.2rem 1.8rem;
  min-height:420px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.line-card .line-eyebrow{ font-size:.68rem; letter-spacing:.2em; color:var(--accent); font-weight:600; }
.line-card h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-top:.5rem; }
.line-card p{ color:var(--cream-soft); font-size:.92rem; margin-top:.8rem; max-width:32ch; }
.line-card{ isolation:isolate; background:linear-gradient(160deg,var(--tone-a,#b8863b),var(--tone-b,#7a4f22)); }
.line-card[data-tone="amargo"]{ --tone-a:#c9954a; --tone-b:#6e4420; }
.line-card[data-tone="honey"]{ --tone-a:#e0a63a; --tone-b:#94600f; }
.line-card[data-tone="sinazucar"]{ --tone-a:#a3bb6c; --tone-b:#456130; }
.line-card[data-tone="woow"]{ --tone-a:#f4c430; --tone-b:#c22e26; }
.line-card img{
  position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  object-fit:cover; object-position:82% center;
  mix-blend-mode:multiply;
  transform:scale(.92); transform-origin:82% 55%;
  transition:transform .7s var(--ease);
}
.line-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(19,11,7,.92) 0%, rgba(19,11,7,.55) 35%, rgba(19,11,7,0) 65%),
             linear-gradient(0deg, rgba(19,11,7,.75) 0%, transparent 30%);
  transition:opacity .5s var(--ease);
}
.line-card:hover img{ transform:scale(1) rotate(-2deg); }
.line-card:hover::before{ opacity:.8; }
.line-card > div{ max-width:58%; }
.line-card .go::after{ content:"→"; transition:transform .3s var(--ease); }
.line-card:hover .go::after{ transform:translateX(6px); }

/* ================================================================
   PRODUCT CARDS (line pages) — shaped like a tableta row
   ================================================================ */
.tableta-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.6rem; margin-top:3rem;
}
.tableta-card{
  background:var(--paper);
  color:var(--ink);
  border-radius:10px;
  padding:1.6rem 1.6rem 1.9rem;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tableta-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -18px rgba(0,0,0,.55); }
.tableta-card .pct{
  font-family:var(--font-display); font-size:2.4rem; color:var(--accent-dark); line-height:1;
}
.tableta-card .pct span{ font-size:.9rem; vertical-align:super; }
.tableta-card .img-wrap{
  aspect-ratio:3/4; display:flex; align-items:center; justify-content:center;
  margin:1rem 0;
}
.tableta-card .img-wrap img{ max-height:100%; object-fit:contain; }
.tableta-card h4{ font-size:1.05rem; margin-bottom:.4rem; }
.tableta-card p{ font-size:.86rem; color:#5a4a38; }

/* ---------- Ficha técnica badges ---------- */
.badge-list{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.badge-list .b{
  display:flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600;
  padding:.6em 1em; border-radius:8px;
  background:rgba(198,154,85,.1); border:1px solid rgba(198,154,85,.3);
}
.badge-list .b i{
  width:8px;height:8px;border-radius:50%;background:var(--accent); display:inline-block;
}

/* ================================================================
   GALLERY / masonry-ish
   ================================================================ */
.gallery{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-top:3rem;
}
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.gallery .g1{ grid-column:span 3; grid-row:span 2; }
.gallery .g2{ grid-column:span 3; grid-row:span 1; aspect-ratio:16/9;}
.gallery .g3{ grid-column:span 3; grid-row:span 1; aspect-ratio:16/9;}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{
  background:var(--cacao-950);
  padding-top:5rem;
  border-top:1px solid rgba(198,154,85,.2);
}
.footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem;
}
.footer-brand .brand{ font-size:2.4rem; margin-bottom:.8rem; }
.footer-brand p{ color:var(--cream-soft); max-width:34ch; font-size:.92rem; }
.footer-col h5{
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.05em;
  color:var(--accent); margin-bottom:1rem;
}
.footer-col a{ display:block; color:var(--cream-soft); font-size:.92rem; padding:.3rem 0; }
.footer-col a:hover{ color:var(--accent-light); }
.footer-bottom{
  border-top:1px solid rgba(198,154,85,.15);
  padding:1.6rem 0 2.4rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.78rem; color:rgba(243,231,211,.5);
}

@keyframes spin{ to{ transform:rotate(360deg); } }

/* ================================================================
   NOSOTROS — timeline & valores
   ================================================================ */

.timeline{ margin-top:3.5rem; position:relative; padding-left:2rem; border-left:2px solid rgba(198,154,85,.3); }
.tl-item{ position:relative; padding-bottom:2.6rem; }
.tl-item::before{
  content:""; position:absolute; left:-2.42rem; top:2px; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--cacao-950);
}
.tl-item b{ font-family:var(--font-display); font-size:1.2rem; color:var(--accent-light); display:block; margin-bottom:.3rem; }
.tl-item p{ color:var(--cream-soft); max-width:60ch; font-size:.94rem; }

/* ================================================================
   WOOW — pop world
   ================================================================ */
body[data-line="woow"]{ background:var(--woow-choc,#241407); }

.pop-block{ padding:clamp(3.5rem,8vw,6rem) 0; }
.pop-red{ background:#e0392f; color:#fff8ec; }

.pop-blue{ background:#5fb8dd; color:#0e2530; }
.pop-cream{ background:#fdf3dc; color:#2c190f; }

.pop-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,6vw,4.6rem);
  text-transform:uppercase;
  line-height:.95;
}
.wobble{ display:inline-block; transform:rotate(-3deg); }

.woow-flavors{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3rem;
}
.woow-flavor{
  background:#fff8ec; color:#2c190f; border-radius:16px; padding:1.8rem;
  text-align:center;
  box-shadow:0 24px 40px -18px rgba(0,0,0,.35);
  transition:transform .35s var(--ease), rotate .35s var(--ease);
}
.woow-flavor:nth-child(1){ rotate:-2deg; }
.woow-flavor:nth-child(2){ rotate:1.4deg; }
.woow-flavor:nth-child(3){ rotate:-1deg; }
.woow-flavor:hover{ transform:translateY(-10px) scale(1.03); rotate:0deg; }
.woow-flavor img{ max-height:220px; margin:0 auto 1.2rem; object-fit:contain; }
.woow-flavor h4{ font-family:var(--font-display); font-size:1.3rem; }
.woow-flavor p{ font-size:.85rem; margin-top:.5rem; opacity:.75; }
.woow-flavor .kcal{
  display:inline-block; margin-top:1rem; background:#f4c430; color:#2c190f;
  padding:.5em 1em; border-radius:99px; font-weight:700; font-size:.85rem;
}

.confetti-strip{
  overflow:hidden; white-space:nowrap; border-top:3px solid #2c190f; border-bottom:3px solid #2c190f;
  background:#f4c430; padding:.9rem 0;
}
.confetti-strip .track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.confetti-strip span{
  font-family:var(--font-display); font-size:1.2rem; text-transform:uppercase; color:#2c190f;
  padding:0 1.4rem; display:flex; align-items:center; gap:1.4rem;
  flex-shrink:0;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.woow-gallery{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:130px; gap:.9rem; margin-top:3rem;
}
.woow-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.woow-gallery .b1{ grid-column:span 2; grid-row:span 2; }
.woow-gallery .b2{ grid-column:span 2; grid-row:span 1; }
.woow-gallery .b3{ grid-column:span 2; grid-row:span 1; }
.woow-gallery .b4{ grid-column:span 2; grid-row:span 2; }
.woow-gallery .b5{ grid-column:span 2; grid-row:span 1; }
.woow-gallery .b6{ grid-column:span 2; grid-row:span 1; }

/* ================================================================
   CONTACTO
   ================================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:3rem; }
.contact-card{
  border:1px solid rgba(198,154,85,.3); border-radius:12px; padding:2.2rem;
  background:rgba(255,255,255,.02);
}
.contact-card h4{ font-family:var(--font-body); font-weight:600; text-transform:none; font-size:1.1rem; margin-bottom:.6rem;}
.contact-card a.big-link{
  font-family:var(--font-display); font-size:1.4rem; color:var(--accent-light);
}
.social-row{ display:flex; gap:1rem; margin-top:1.6rem; }
.social-row a{
  width:46px;height:46px;border-radius:50%; border:1.5px solid rgba(198,154,85,.4);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:background .25s, transform .25s;
}
.social-row a:hover{ background:var(--accent); color:var(--ink); transform:translateY(-3px); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px){
  .lines-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .g1{ grid-column:span 2; }
  .gallery .g2, .gallery .g3{ grid-column:span 1; }
  .woow-gallery{ grid-template-columns:repeat(4,1fr); }
  .woow-gallery .b1, .woow-gallery .b4{ grid-column:span 2; }
}
@media (max-width:860px){
  .tablet-nav{ display:none; }
  .burger{ display:block; }
  .brand-logo{ height:60px; }
  .footer-logo{ height:96px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-bottom:1px solid rgba(198,154,85,.2); }
  .contact-grid{ grid-template-columns:1fr; }
  .woow-flavors{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  
  
  .lines-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  
  .gallery{ grid-template-columns:1fr; }
  .gallery .g1{ grid-column:span 1; aspect-ratio:4/3; }
  .woow-gallery{ grid-template-columns:repeat(2,1fr); }
  .woow-gallery .b1,.woow-gallery .b2,.woow-gallery .b3,.woow-gallery .b4,.woow-gallery .b5,.woow-gallery .b6{ grid-column:span 1; grid-row:span 1; aspect-ratio:1/1; height:auto; }
}

/* ---------- Hero home: texto a la izquierda, packaging libre a la derecha ---------- */
.hero--split{ background-position:right center; }
.hero--split::before{
  background:
    linear-gradient(90deg, rgba(19,11,7,.94) 0%, rgba(19,11,7,.78) 38%, rgba(19,11,7,.12) 68%, rgba(19,11,7,0) 100%),
    linear-gradient(180deg, rgba(19,11,7,.35) 0%, rgba(19,11,7,0) 25%, rgba(19,11,7,0) 70%, rgba(19,11,7,.7) 100%);
}
.hero--split .hero-inner > *{ max-width:min(50%, 600px); }
.hero--split .h1{ font-size:clamp(2.6rem, 4.2vw, 4rem); }

@media (max-width:1024px){
  .hero--split .hero-inner > *{ max-width:none; }
  .hero--split::before{ background:linear-gradient(180deg, rgba(19,11,7,.55) 0%, rgba(19,11,7,.7) 55%, rgba(19,11,7,.96) 100%); }
  .hero--split .h1{ font-size:clamp(2.6rem, 9vw, 4rem); }
}
.hero--split{ justify-content:center; padding-top:9.5rem; padding-bottom:3.5rem; }
.hero--split .lede{ max-width:42ch; }
@media (max-width:1024px){ .hero--split{ justify-content:flex-end; } }
.hero-inner{ width:100%; }

.hero-bg{
  position:absolute; left:0; right:0; top:-14%; height:128%;
  background-size:cover; z-index:0; will-change:transform;
}
.hero-bg{ top:-6%; height:112%; }
.hero--split::before{
  background:
    linear-gradient(90deg, rgba(19,11,7,.94) 0%, rgba(19,11,7,.78) 38%, rgba(19,11,7,.12) 68%, rgba(19,11,7,0) 100%),
    linear-gradient(180deg, rgba(19,11,7,.75) 0%, rgba(19,11,7,0) 22%, rgba(19,11,7,0) 70%, rgba(19,11,7,.7) 100%);
}

/* Navbar en vidrio */
.tablet-nav{
  gap:4px; padding:5px; border-radius:16px; overflow:visible;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid transparent;
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:
    inset 0 -8px 16px rgba(0,0,0,.2),
    0 14px 30px -10px rgba(0,0,0,.65);
}
.tablet-nav::before{ /* velo oscuro para que el texto lea sobre cualquier foto */
  content:""; position:absolute; inset:0; border-radius:16px; z-index:-1;
  background:rgba(19,11,7,.42);
}
.tablet-nav{ position:relative; isolation:isolate; }
.tablet-nav a{
  border:none; border-radius:11px; color:var(--cream);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.tablet-nav a:hover{
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  color:#fff; transform:translateY(-2px);
  box-shadow:0 8px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tablet-nav a.active{
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 65%, transparent), color-mix(in srgb, var(--accent-dark) 55%, transparent));
  color:#fff;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.2), 0 6px 14px -6px color-mix(in srgb, var(--accent) 80%, transparent);
}
.tablet-nav a.active::after{ display:none; }

.hero-bg{ top:-6%; height:106%; }

/* ================================================================
   HOME — Nuestra empresa
   ================================================================ */
.empresa .grid-2{ grid-template-columns:1.1fr 1fr; }
.section--cream .script{ color:var(--accent-dark); }
.empresa .h2 .script{ font-size:.82em; }
.empresa > .container > div:first-child{ position:relative; }
.empresa-figure--xl{
  aspect-ratio:4/5; min-height:560px; border-radius:20px;
  box-shadow:0 40px 70px -28px rgba(19,11,7,.7), 0 0 0 1px rgba(19,11,7,.08);
}
.empresa-figure--xl img{ transition:transform 1.2s var(--ease); }
.empresa-figure--xl:hover img{ transform:scale(1.05); }
/* la tableta se "marca" sobre la foto */
.empresa-figure--xl::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(255,255,255,.16) calc(33.333% - 1px) 33.333%),
    repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.16) calc(25% - 1px) 25%);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.06), inset 0 0 60px rgba(0,0,0,.35);
}
/* sello de vidrio */
.empresa-figure--xl .frame-badge{
  right:auto; left:1.4rem; bottom:1.4rem; z-index:3;
  border-radius:16px; padding:1rem 1.3rem; font-size:2.4rem; color:#fff;
  background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 30px -10px rgba(0,0,0,.6);
  text-shadow:0 2px 8px rgba(0,0,0,.5); rotate:-4deg;
}
.empresa-figure--xl .frame-badge small{ color:var(--gold-light); font-size:.6rem; }
.empresa-inset{
  position:absolute; right:-2.6rem; top:-2rem; width:34%; aspect-ratio:1/1; object-fit:cover;
  border-radius:16px; rotate:5deg; z-index:4;
  border:6px solid var(--paper);
  box-shadow:0 26px 44px -16px rgba(19,11,7,.65);
}
/* números con degradé dorado */
.empresa .stat b{
  background:linear-gradient(180deg, #d8b06a 0%, #8a6423 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(2rem,4.4vw,3rem);
}

/* Botón de vidrio dorado (con formas detrás para que el vidrio se note) */
.btn-stage{ position:relative; display:inline-block; margin-top:2rem; }
.btn-stage::before,
.btn-stage::after{ content:""; position:absolute; z-index:0; pointer-events:none; }
.btn-stage::before{ /* bocado de chocolate */
  width:58px; height:58px; left:-14px; top:-16px; border-radius:12px; rotate:-14deg;
  background:linear-gradient(145deg, #5a3520, #2c190f);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), 0 10px 18px -6px rgba(19,11,7,.6);
}
.btn-stage::after{ /* orbe dorado */
  width:64px; height:64px; right:-16px; bottom:-18px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #f0d497, #c69a55 55%, #8a6423);
  box-shadow:0 12px 20px -8px rgba(138,100,35,.6);
}
.chunk-btn:not(.ghost){
  position:relative; z-index:1; overflow:hidden; color:var(--ink);
  background:linear-gradient(135deg, rgba(222,182,108,.88), rgba(198,154,85,.56));
  border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.7); backdrop-filter:blur(12px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -8px 14px rgba(138,100,35,.22),
    0 16px 30px -12px rgba(138,100,35,.6);
}
.chunk-btn:not(.ghost)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
.chunk-btn:not(.ghost):hover::after{ transform:translateX(130%); }
@media (max-width:1024px){
  .empresa .grid-2{ grid-template-columns:1fr; }
  .empresa-figure--xl{ min-height:0; aspect-ratio:4/3; }
  .empresa-inset{ right:-.5rem; top:-1.2rem; width:28%; }
}
.empresa-figure--xl .frame-badge{ line-height:.95; letter-spacing:.02em; }
.empresa-figure--xl .frame-badge small{ letter-spacing:.32em; margin-bottom:.35rem; }

/* "Ver línea" como botón de vidrio */
.line-card .go{
  position:relative; overflow:hidden; align-self:flex-start;
  padding:.85em 1.5em; border-radius:var(--radius-chunk);
  font-size:.85rem; letter-spacing:.05em; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5);
  background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.2), 0 14px 26px -12px rgba(0,0,0,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.line-card .go::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform:translateX(-130%); transition:transform .8s var(--ease);
}
.line-card:hover .go{ transform:translateY(-2px); }
.line-card:hover .go::before{ transform:translateX(130%); }
.line-card h3{ line-height:.98; }

/* ================================================================
   HOME — Ingredientes (misma personalidad que Empresa)
   ================================================================ */
.ingredientes .grid-2{ grid-template-columns:1fr 1.1fr; }
.ingredientes .h2 .script{ font-size:.82em; }
.empresa-figure--square{ aspect-ratio:1/1; min-height:0; }
.empresa-figure--square img{ object-position:46% center; }
.empresa-inset--left{ right:auto; left:-2.6rem; top:auto; bottom:-2rem; rotate:-5deg; }
.chips-glass .b{
  color:#4a3a28; padding:.7em 1.15em; border-radius:10px;
  background:linear-gradient(135deg, rgba(212,170,98,.4), rgba(212,170,98,.12));
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -4px 8px rgba(138,100,35,.12), 0 10px 18px -10px rgba(138,100,35,.5);
  transition:transform .3s var(--ease);
}
.chips-glass .b:hover{ transform:translateY(-3px) rotate(-1deg); }
@media (max-width:1024px){
  .ingredientes .grid-2{ grid-template-columns:1fr; }
  .empresa-inset--left{ left:-.5rem; bottom:-1.2rem; width:28%; }
}

/* Banner con parallax (background-attachment: fixed) + velo rojo */
.fixed-bg{
  min-height:520px; display:flex; align-items:center;
  background-image:linear-gradient(rgba(224,57,47,.78), rgba(200,40,32,.88)), url('../assets/img/home/woow-banner.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;
}
.fixed-bg > .container{ width:100%; }
@media (max-width:1023px){ .fixed-bg{ background-attachment:scroll; min-height:420px; } }
@media (prefers-reduced-motion:reduce){ .fixed-bg{ background-attachment:scroll; } }

/* Botón fantasma también en vidrio */
.chunk-btn.ghost{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 26px -12px rgba(0,0,0,.6);
}
.chunk-btn.ghost:hover{ background:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); }
.pop-block .btn-stage{ margin-top:0; }
.empresa-inset--left{ object-position:52% center; }

/* Redes: íconos en vidrio */
.social-icons{ display:flex; gap:.8rem; }
.footer-col .social-icons a,
.social-row a{
  width:48px; height:48px; padding:0; border-radius:14px;
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 22px -10px rgba(0,0,0,.7);
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.social-icons svg, .social-row svg{ width:22px; height:22px; }
.footer-col .social-icons a:hover, .social-row a:hover{
  transform:translateY(-4px) rotate(-3deg); color:var(--ink);
  background:linear-gradient(135deg, rgba(222,182,108,.95), rgba(198,154,85,.7));
}
.footer-bottom a{ transition:color .25s; }
.footer-bottom a:hover{ color:var(--accent-light); }

/* ================================================================
   CONTACTO
   ================================================================ */
.contact-stage{
  padding:clamp(4rem,9vw,7rem) 0;
  background:
    linear-gradient(rgba(19,11,7,.74), rgba(19,11,7,.9)),
    url('../assets/img/nosotros/hero-bg.jpg') center/cover no-repeat fixed;
}
.contact-stage .h2 .script{ font-size:.82em; }
.contact-stage .contact-grid{ grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.contact-stage .contact-card{
  position:relative; overflow:hidden; border-radius:20px; padding:2.2rem 2rem 2.4rem;
  background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -12px 24px rgba(0,0,0,.25), 0 26px 44px -18px rgba(0,0,0,.7);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.contact-stage .contact-card::before{ /* bocado biselado */
  content:""; position:absolute; inset:9px; border-radius:13px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 5px rgba(255,255,255,.1), inset 0 -3px 8px rgba(0,0,0,.28);
}
.contact-stage .contact-card::after{ /* destello */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 50%, transparent 68%);
  transform:translateX(-130%); transition:transform .9s var(--ease);
}
.contact-stage .contact-card:hover{ transform:translateY(-8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -12px 24px rgba(0,0,0,.22), 0 34px 54px -18px rgba(198,154,85,.4); }
.contact-stage .contact-card:hover::after{ transform:translateX(130%); }
.contact-card > *, .contact-card--wide > div{ position:relative; z-index:1; }
.contact-card .cc-num{ font-family:var(--font-display); font-size:.95rem; letter-spacing:.1em; color:var(--accent-light); display:block; margin-bottom:.8rem; }
.contact-stage .contact-card h4{ font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; font-weight:400; margin-bottom:.9rem; }
.contact-stage .contact-card .big-link{ display:block; font-size:1.25rem; word-break:break-word; color:var(--accent-light); }
.contact-stage .contact-card p{ color:var(--cream-soft); font-size:.92rem; margin-top:.9rem; }
.contact-card .social-row{ margin-top:1.4rem; }
.contact-card--wide{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.contact-card--wide p{ max-width:52ch; }
.contact-stage .btn-stage{ margin-top:0; }
@media (max-width:1023px){
  .contact-stage{ background-attachment:scroll; }
  .contact-stage .contact-grid{ grid-template-columns:1fr; }
}

/* Tableta de chocolate real: casillas biseladas con parallax (fixed) */
.values, #contactos{
  background-color:#1a0e08;
  background-image:
    linear-gradient(rgba(19,11,7,.72), rgba(19,11,7,.72)),
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 40%, rgba(13,7,5,.6) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23573220'/><stop offset='1' stop-color='%23402314'/></linearGradient></defs><rect width='160' height='160' fill='%231a0e08'/><polygon points='5,5 155,5 139,21 21,21' fill='%23744528'/><polygon points='155,5 155,155 139,139 139,21' fill='%23381d10'/><polygon points='155,155 5,155 21,139 139,139' fill='%232a160b'/><polygon points='5,155 5,5 21,21 21,139' fill='%23623822'/><rect x='21' y='21' width='118' height='118' fill='url(%23g)'/><rect x='21.5' y='21.5' width='117' height='117' fill='none' stroke='%23c69a55' stroke-opacity='.12'/></svg>");
  background-size:100% 100%, 100% 100%, 160px 160px;
  background-repeat:no-repeat, no-repeat, repeat;
  background-position:0 0, 0 0, 0 0;
  background-attachment:fixed;
}
@media (max-width:1023px){ .values, #contactos{ background-attachment:scroll; } }
@media (prefers-reduced-motion:reduce){ .values, #contactos{ background-attachment:scroll; } }
.values .contact-grid{ grid-template-columns:repeat(4,1fr); }
.values .contact-card h4{ font-size:1.2rem; }
@media (max-width:1100px){ .values .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .values .contact-grid{ grid-template-columns:1fr; } }

.story .h2 .script{ font-size:.82em; }
.tl-item b{
  display:inline-block; padding:.28em .95em; margin-bottom:.6rem; border-radius:10px;
  font-size:1.05rem; color:#fff;
  background:linear-gradient(135deg, rgba(222,182,108,.5), rgba(198,154,85,.16));
  border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 18px -10px rgba(0,0,0,.6);
}
.tl-item::before{ box-shadow:0 0 0 4px var(--cacao-950), 0 0 14px 2px rgba(198,154,85,.55); }
.story .empresa-inset{ right:auto; left:-2.4rem; top:auto; bottom:-2rem; rotate:-5deg; }
.fixed-bg--cacao{
  background-image:linear-gradient(rgba(19,11,7,.5), rgba(19,11,7,.72)), url('../assets/img/nosotros/cta-degustacion.jpg');
}

/* ================================================================
   PÁGINAS DE LÍNEAS
   ================================================================ */
.products-stage, .ficha{
  background:linear-gradient(rgba(19,11,7,.78), rgba(19,11,7,.93)), var(--stage-img) center/cover no-repeat fixed;
}
@media (max-width:1023px){ .products-stage, .ficha{ background-attachment:scroll; } }
.products-stage .h2 .script, .ficha .h2 .script{ font-size:.82em; }
.ficha .contact-grid{ grid-template-columns:repeat(2,1fr); margin-top:0; }
@media (max-width:1023px){ .ficha .contact-grid{ grid-template-columns:1fr; } }
.ficha .contact-card p + p{ margin-top:.8rem; }
.ficha .gallery{ margin-top:2rem; }
.gallery img{ border-radius:18px; box-shadow:0 26px 44px -20px rgba(0,0,0,.75); transition:transform .8s var(--ease); }
.gallery img:hover{ transform:scale(1.02); }

/* Cards de producto: foto sobre degradado de la línea + panel de vidrio */
body[data-line="amargo"]   .tableta-card{ --ta:#c9954a; --tb:#6e4420; }
body[data-line="honey"]    .tableta-card{ --ta:#e0a63a; --tb:#94600f; }
body[data-line="sinazucar"] .tableta-card{ --ta:#a3bb6c; --tb:#456130; }
.tableta-card{
  position:relative; overflow:hidden; aspect-ratio:4/5; padding:0; color:#fff;
  border-radius:22px;
  background:linear-gradient(160deg, var(--ta,#c9954a), var(--tb,#6e4420));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 30px 50px -22px rgba(0,0,0,.8);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tableta-card:hover{ transform:translateY(-10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 38px 58px -20px color-mix(in srgb, var(--ta) 65%, transparent); }
.tableta-card .img-wrap{ position:absolute; inset:0; margin:0; aspect-ratio:auto; display:block; z-index:0; }
.tableta-card .img-wrap img{
  width:100%; height:100%; max-height:none; object-fit:cover; object-position:center 30%;
  mix-blend-mode:multiply; transform:translateY(-6%) scale(.9); transition:transform .8s var(--ease);
}
.tableta-card:hover .img-wrap img{ transform:translateY(-8%) scale(.95) rotate(-1.5deg); }
.tableta-card .pct{
  position:absolute; top:1.1rem; left:1.4rem; z-index:3; color:#fff; font-size:3rem;
  text-shadow:0 4px 14px rgba(0,0,0,.45);
}
.tableta-card .pct span{ font-size:1.1rem; }
.tc-info{
  position:absolute; left:.8rem; right:.8rem; bottom:.8rem; z-index:2;
  padding:1rem 1.2rem 1.1rem; border-radius:16px;
  background:linear-gradient(135deg, rgba(19,11,7,.55), rgba(19,11,7,.3));
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -12px rgba(0,0,0,.6);
}
.tc-info h4{ font-size:1.15rem; margin-bottom:.35rem; color:#fff; }
.tc-info p{ font-size:.84rem; color:var(--cream-soft); line-height:1.45; }

/* Banners de cierre entre líneas */
.fixed-bg--link{ min-height:380px; }
.fixed-bg--link .h2{ color:#fff; }
.fixed-bg--honey{ background-image:linear-gradient(rgba(217,154,43,.74), rgba(122,85,24,.9)), url('../assets/img/honey/hero-bg.jpg'); }
.fixed-bg--amargo{ background-image:linear-gradient(rgba(110,68,32,.74), rgba(19,11,7,.9)), url('../assets/img/amargo/gallery1.jpg'); }
.fixed-bg--woow{ background-image:linear-gradient(rgba(224,57,47,.78), rgba(200,40,32,.9)), url('../assets/img/home/woow-banner.jpg'); }
.fixed-bg--link > .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

/* WooW! - vidrio dentro del mundo pop */
.glass-stat{
  flex:1; text-align:center; padding:1.6rem; border-radius:18px; color:#0e2530;
  background:linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -8px 16px rgba(14,37,48,.1), 0 20px 34px -16px rgba(14,37,48,.5);
}
.glass-stat b{ font-family:var(--font-display); font-size:2.2rem; display:block; font-weight:400; }
.glass-stat span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.woow-flavor{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff, inset 0 -10px 22px rgba(224,57,47,.08), 0 30px 46px -20px rgba(0,0,0,.5);
}
.woow-gallery img{ box-shadow:0 20px 36px -16px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.18); }

/* Tags en vidrio dentro de los heroes (fondo oscuro: texto claro) */
.hero .chips-glass .b{
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5);
  background:linear-gradient(135deg, rgba(222,182,108,.5), rgba(198,154,85,.16));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -4px 8px rgba(138,100,35,.18), 0 12px 22px -10px rgba(0,0,0,.6);
}

/* Galería WooW: columnas derecha e izquierda con el mismo alto */
@media (min-width:1025px){
  .woow-gallery .b1{ grid-column:1/3; grid-row:1/3; }
  .woow-gallery .b6{ grid-column:1/3; grid-row:3; }
  .woow-gallery .b2{ grid-column:3/5; grid-row:1; }
  .woow-gallery .b4{ grid-column:3/5; grid-row:2/4; }
  .woow-gallery .b3{ grid-column:5/7; grid-row:1/3; }
  .woow-gallery .b5{ grid-column:5/7; grid-row:3; }
}
.woow-gallery .b3{ object-position:center 92%; }

/* WooW!: logo blanco sobre el rojo (vuelve a dorado cuando el header se oscurece) */
body[data-line="woow"] .site-header:not(.scrolled) .brand-logo{
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.story .frame-badge{ bottom:auto; top:1.4rem; }

/* Todos los heroes de páginas internas con el mismo alto (el de home queda a 100svh) */
body:not([data-line="home"]) .hero{ min-height:92svh; }

/* ================================================================
   HEROES INTERNOS: un solo sistema (referencia: WooW!)
   mismo alto, mismo inicio del kicker, misma tipografía y columna
   ================================================================ */
:root{ --hero-top:clamp(8.5rem, 27svh, 15rem); }
body:not([data-line="home"]) .hero,
.woow-ref{
  min-height:92svh;
  padding-top:var(--hero-top);
  padding-bottom:clamp(3.5rem,8vw,6rem);
}
body:not([data-line="home"]) .hero{ justify-content:flex-start; }
.woow-ref{ display:flex; align-items:flex-start; }
.woow-ref .grid-2{ align-items:start; width:100%; }
.woow-ref .eyebrow{ display:block; margin-bottom:1rem; }
body:not([data-line="home"]) .hero::before{
  background:
    linear-gradient(90deg, rgba(19,11,7,.94) 0%, rgba(19,11,7,.78) 38%, rgba(19,11,7,.12) 68%, rgba(19,11,7,0) 100%),
    linear-gradient(180deg, rgba(19,11,7,.75) 0%, rgba(19,11,7,0) 22%, rgba(19,11,7,0) 70%, rgba(19,11,7,.7) 100%);
}
body:not([data-line="home"]) .hero .hero-inner > *{ max-width:calc(50% - 2.5rem); }
body:not([data-line="home"]) .hero .h1{ font-size:clamp(2.4rem,6vw,4.6rem); line-height:.95; }
body:not([data-line="home"]) .hero .lede{ max-width:44ch; }
body:not([data-line="home"]) .hero .badge-list{ margin-top:2rem; }
@media (max-width:1024px){
  body:not([data-line="home"]) .hero .hero-inner > *{ max-width:none; }
  body:not([data-line="home"]) .hero::before{ background:linear-gradient(180deg, rgba(19,11,7,.55) 0%, rgba(19,11,7,.72) 55%, rgba(19,11,7,.96) 100%); }
}
/* Menos zoom del fondo en heroes internos (home queda igual) */
body:not([data-line="home"]) .hero .hero-bg{ top:-3%; height:103%; }
/* WooW!: la foto vuelve a su tamaño grande, arrancando junto al header */
@media (min-width:1025px){
  .woow-ref .grid-2 > div:last-child{ margin-top:calc(7rem - var(--hero-top)); }
}

/* Cards con foto de escena completa (Amargo) */
.tableta-card--photo .img-wrap img{ mix-blend-mode:normal; transform:scale(1.01); object-position:center; }
.tableta-card--photo:hover .img-wrap img{ transform:scale(1.06); }
.tableta-card--photo .img-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(19,11,7,.6) 0%, rgba(19,11,7,0) 30%);
}
.tableta-card--photo .pct{ display:none; }
.tableta-card--photo .tc-info{ padding:.75rem 1rem .85rem; }
.tableta-card--photo .tc-info h4{ font-size:1.05rem; margin-bottom:.2rem; }
.tableta-card--photo .tc-info p{ font-size:.78rem; line-height:1.4; }
/* Sin reborde interno en las cards de vidrio */
.contact-stage .contact-card::before{ display:none; }

/* Sin Azúcar: alejar apenas la foto respecto de las otras dos */
.line-card[data-tone="sinazucar"] img{ transform:scale(.88); }
.line-card[data-tone="sinazucar"]:hover img{ transform:scale(.93) rotate(-2deg); }

/* Amargo Puro Cacao: alejar apenas la foto */
.line-card[data-tone="amargo"] img{ transform:scale(.88); }
.line-card[data-tone="amargo"]:hover img{ transform:scale(.96) rotate(-2deg); }

/* Honey Roasted: CTA "¿Buscás algo más intenso?" con foto cenital piedra y cacao */
.fixed-bg--piedra{ background-image:linear-gradient(rgba(19,11,7,.5), rgba(19,11,7,.75)), url('../assets/img/honey/cta-piedra-cacao.jpg'); }

/* Honey Roasted: "La línea" con velo dorado miel más liviano para separarla de la sección siguiente */
.products-stage--honey{
  background:linear-gradient(rgba(150,100,28,.5), rgba(48,28,10,.78)), var(--stage-img) center/cover no-repeat fixed;
}
@media (max-width:1023px){ .products-stage--honey{ background-attachment:scroll; } }

/* Honey Roasted: la foto de producto cubre toda la card */
body[data-line="honey"] .tableta-card .img-wrap img{
  mix-blend-mode:normal; object-position:center; transform:scale(1);
}
body[data-line="honey"] .tableta-card:hover .img-wrap img{ transform:scale(1.05); }

/* Sin Azúcar: la foto de producto cubre toda la card */
body[data-line="sinazucar"] .tableta-card .img-wrap img{
  mix-blend-mode:normal; object-position:center; transform:scale(1);
}
body[data-line="sinazucar"] .tableta-card:hover .img-wrap img{ transform:scale(1.05); }

/* Sin Azúcar: "La línea" con velo verde stevia más liviano para separarla de la sección siguiente */
.products-stage--sinazucar{
  background:linear-gradient(rgba(80,110,50,.5), rgba(24,36,16,.8)), var(--stage-img) center/cover no-repeat fixed;
}
@media (max-width:1023px){ .products-stage--sinazucar{ background-attachment:scroll; } }

/* Botón flotante de WhatsApp (glass, verde) */
.wa-float{
  position:fixed; right:clamp(1rem,2.4vw,1.8rem); bottom:clamp(1rem,2.4vw,1.8rem); z-index:90;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, rgba(60,220,110,.55), rgba(18,140,70,.6));
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -8px rgba(0,0,0,.6), 0 0 0 0 rgba(60,220,110,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  animation:wa-pulse 2.8s ease-out 2s infinite;
}
.wa-float:hover{ transform:translateY(-4px) scale(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 20px 36px -8px rgba(0,0,0,.65), 0 0 24px 2px rgba(60,220,110,.45); }
@keyframes wa-pulse{ 0%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -8px rgba(0,0,0,.6), 0 0 0 0 rgba(60,220,110,.5); } 70%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -8px rgba(0,0,0,.6), 0 0 0 18px rgba(60,220,110,0); } }
@media (prefers-reduced-motion:reduce){ .wa-float{ animation:none; } }
@media (max-width:640px){ .wa-float{ width:54px; height:54px; } }

/* Home: menos zoom en el hero (misma holgura mínima de parallax que las páginas internas) */
body[data-line="home"] .hero .hero-bg{ top:-3%; height:103%; }

/* Home: foto del hero a tamaño original (sin zoom), fija; el parallax lo hace el hero al deslizarse sobre ella */
.hero[data-fixed-bg]{
  background-color:#130b07; background-repeat:no-repeat;
  background-size:min(100%,1672px) auto; background-position:right top; background-attachment:fixed;
}
@media (max-width:1023px){ .hero[data-fixed-bg]{ background-size:cover; background-position:center; background-attachment:scroll; } }
@media (prefers-reduced-motion:reduce){ .hero[data-fixed-bg]{ background-attachment:scroll; } }
/* Heroes sin --split: foto centrada (como antes) */
.hero[data-fixed-bg]:not(.hero--split){ background-position:center top; }
@media (max-width:1023px){ .hero[data-fixed-bg]:not(.hero--split){ background-position:center; } }

/* Amargo: "La línea" con velo cacao cálido más liviano para separarla de la sección siguiente */
.products-stage--amargo{
  background:linear-gradient(rgba(125,72,34,.5), rgba(38,20,10,.8)), var(--stage-img) center/cover no-repeat fixed;
}
@media (max-width:1023px){ .products-stage--amargo{ background-attachment:scroll; } }

/* Mobile: botón "Conocé nuestra historia" centrado */
@media (max-width:767px){
  .empresa .btn-stage{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }
}

/* Mobile: "Nuestros mundos" como slider horizontal con snap */
@media (max-width:640px){
  .lines-grid{
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 1rem 1.2rem; scroll-padding:0 1rem;
    background:none; border:0; scrollbar-width:none;
  }
  .lines-grid::-webkit-scrollbar{ display:none; }
  .line-card{
    flex:0 0 84%; scroll-snap-align:center; min-height:440px;
    border-radius:22px; padding:2rem 1.6rem;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.7);
  }
  .line-card > div{ max-width:64%; }
  .line-card h3{ font-size:2.15rem; line-height:.96; }
  .line-card .line-eyebrow{ font-size:.72rem; }
  .line-card p{ font-size:1rem; }
  .lines-dots{ display:flex; justify-content:center; gap:8px; margin-top:.4rem; }
  .lines-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(198,154,85,.3); transition:all .3s var(--ease); }
  .lines-dots i.on{ width:26px; border-radius:8px; background:var(--accent); }
}
@media (min-width:641px){ .lines-dots{ display:none; } }
@media (max-width:640px){ .line-card .line-eyebrow{ white-space:nowrap; display:block; } }

/* Mobile: la foto chica "--left" pasa a la esquina inferior derecha para no pisar el badge de la foto grande */
@media (max-width:1024px){
  .empresa-inset--left{ left:auto; right:-.5rem; rotate:5deg; }
}

/* Mobile: banners con link centrados (texto + botón) */
@media (max-width:640px){
  .fixed-bg--link > .container{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center; gap:1.6rem !important; }
  .fixed-bg--link .reveal{ text-align:center; }
}
@media (max-width:640px){
  .pop-block.fixed-bg > .container{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center; gap:1.6rem !important; }
  .pop-block.fixed-bg .reveal{ text-align:center; }
}

/* Mobile: footer centrado, Líneas y Marca en dos columnas paralelas */
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:1.8rem 1rem; text-align:center; }
  .footer-brand, .footer-col:last-child{ grid-column:1 / -1; }
  .footer-brand{ display:flex; flex-direction:column; align-items:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-col .social-icons{ justify-content:center; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
}

/* Mobile: productos de las páginas de línea como slider horizontal con snap (igual que la home) */
@media (max-width:640px){
  .tableta-grid{
    display:flex !important; gap:14px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-left:-1rem; margin-right:-1rem; padding:0 1rem 1.6rem; scroll-padding:0 1rem;
    scrollbar-width:none; max-width:none !important;
  }
  .tableta-grid::-webkit-scrollbar{ display:none; }
  .tableta-grid .tableta-card{ flex:0 0 80%; scroll-snap-align:center; }
}
@media (max-width:640px){ .lines-grid, .tableta-grid{ position:relative; } }

/* Banner ámbar (Honey): kicker en cacao oscuro para que contraste con el fondo y se distinga del título blanco */
.fixed-bg--honey .eyebrow{ color:#2c190f; }

/* Amargo mobile: hero con la foto de la tableta 93% centrada */
@media (max-width:767px){
  .hero--amargo{ background-image:url('../assets/img/amargo/gallery-quiebre.jpg') !important; background-size:cover; background-position:center; }
}

/* Home mobile: hero con foto vertical 9:16 */
@media (max-width:767px){
  .hero--home{ background-image:url('../assets/img/home/hero-atelier-mobile.jpg') !important; background-size:cover; background-position:center; }
}

/* Honey Roasted mobile: hero con foto propia */
@media (max-width:767px){
  .hero--honey{ background-image:url('../assets/img/honey/hero-cacao-miel-mobile.jpg') !important; background-size:cover; background-position:center; }
}

/* Mobile: foto chica de las secciones "story" (Honey / Sin Azúcar) entera a la izquierda, sin salirse de la pantalla */
@media (max-width:1024px){
  .story .empresa-inset{ left:auto; right:.3rem; bottom:-1.4rem; width:30%; rotate:5deg; }
}

/* Sin Azúcar mobile: encuadre corrido hacia las dos tabletas */
@media (max-width:767px){
  .hero.hero--stevia[data-fixed-bg]:not(.hero--split){ background-size:cover; background-position:78% center; }
}

/* Mobile: kicker de los heroes más chico y en una sola línea */
@media (max-width:767px){
  .hero-inner > .eyebrow:first-child, .woow-ref .grid-2 .eyebrow:first-child{
    font-size:.6rem; letter-spacing:.16em; white-space:nowrap;
  }
}

/* Mobile: sabores de WooW! como slider horizontal con snap */
@media (max-width:640px){
  .woow-flavors{
    display:flex !important; gap:14px; overflow-x:auto; overflow-y:hidden; position:relative;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-left:-1rem; margin-right:-1rem; padding:.4rem 1rem 1.6rem; scroll-padding:0 1rem;
    scrollbar-width:none;
  }
  .woow-flavors::-webkit-scrollbar{ display:none; }
  .woow-flavors .woow-flavor{ flex:0 0 80%; scroll-snap-align:center; }
}

/* Mobile sliders: más aire arriba/abajo para que no se recorten la sombra ni la inclinación de las cards */
@media (max-width:640px){
  .woow-flavors, .tableta-grid, .lines-grid{ padding-top:1.4rem; padding-bottom:3.6rem; margin-bottom:-2.2rem; }
  .lines-dots{ position:relative; z-index:1; }
}

/* Mobile: los 3 datos de Presentación (WooW!) caben en el ancho de la pantalla, sin generar scroll horizontal */
@media (max-width:640px){
  .grid-2 > *{ min-width:0; }
  .glass-stat{ flex:1 1 0; min-width:0; padding-left:.7rem !important; padding-right:.7rem !important; }
  .glass-stat b{ font-size:1.9rem !important; }
  .glass-stat span{ font-size:.62rem !important; letter-spacing:.02em !important; }
}

/* Presentación (WooW!): los 3 datos nunca empujan el ancho de la página, en ningún tamaño */
.grid-2 > *{ min-width:0; }
.glass-stat{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px){
  .glass-stat{ flex:1 1 0; padding-left:.6rem !important; padding-right:.6rem !important; }
  .glass-stat b{ font-size:1.7rem !important; }
  .glass-stat span{ font-size:.58rem !important; letter-spacing:.01em !important; }
}
/* Red de seguridad: ninguna sección puede generar scroll horizontal de la página */
html, body{ overflow-x:clip; }

/* WooW! hero mobile: la foto de fondo a sangre, velo rojo, texto encima; mismo alto que los demás heroes */
@media (max-width:767px){
  .woow-ref{ position:relative; overflow:hidden; }
  .woow-ref .grid-2{ position:static; }
  .woow-ref .grid-2 > div:last-child{ position:absolute !important; inset:0; margin:0; z-index:0; }
  .woow-ref .grid-2 > div:last-child::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(224,57,47,.78) 0%, rgba(224,57,47,.72) 50%, rgba(200,40,32,.9) 100%); }
  .woow-ref .grid-2 > div:last-child img{
    display:block; width:100% !important; height:100% !important; max-height:none !important;
    object-fit:cover; margin:0 !important; rotate:0deg !important; border-radius:0 !important; box-shadow:none !important;
  }
  .woow-ref .grid-2 > div:first-child{ position:relative; z-index:1; }
}

/* Mobile: galería WooW sin filas fijas (las fotos cuadradas se pisaban) y con aire antes de la siguiente sección */
@media (max-width:640px){
  .woow-gallery{ grid-auto-rows:auto; }
  .section--dark:has(.woow-gallery){ padding-bottom:5rem; }
}
@media (max-width:640px){ .footer-logo{ height:72px; } }

/* Nosotros mobile: foto corrida a la izquierda para mostrar las tabletas */
@media (max-width:767px){
  .hero.hero--nosotros[data-fixed-bg]{ background-size:cover; background-position:75% center; }
}

/* Mobile: "Lo que nos define" (Nosotros) como slider horizontal con snap */
@media (max-width:640px){
  .values .contact-grid{
    display:flex !important; gap:14px; overflow-x:auto; overflow-y:hidden; position:relative;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter));
    padding:1.4rem var(--gutter) 3.6rem; margin-bottom:-2.2rem; scroll-padding:0 var(--gutter);
    scrollbar-width:none;
  }
  .values .contact-grid::-webkit-scrollbar{ display:none; }
  .values .contact-card{ flex:0 0 80%; scroll-snap-align:center; }
}

/* Timeline: el punto vive en el título y queda centrado verticalmente con él */
.tl-item::before{ display:none; }
.tl-item b{ position:relative; }
.tl-item b::before{
  content:""; position:absolute; left:calc(-2.42rem - 1px); top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--cacao-950), 0 0 14px 2px rgba(198,154,85,.55);
}

/* Contacto: saltos de línea del párrafo del hero solo en mobile (3 líneas) */
.br-m{ display:none; }
@media (max-width:767px){ .br-m{ display:inline; } }

/* Contacto mobile: botón de la card 4 centrado */
@media (max-width:767px){
  .contact-card--wide{ flex-direction:column; align-items:stretch; gap:1.4rem; }
  .contact-card--wide .btn-stage{ display:block; width:fit-content; margin-left:auto; margin-right:auto; }
}

/* Header: cápsula de vidrio para el logo al scrollear (mismo lenguaje que la nav) */
.brand{ position:relative; isolation:isolate; padding:.25rem .95rem; margin-left:-.95rem; border-radius:16px; }
.brand::before{
  content:""; position:absolute; inset:0; border-radius:16px; z-index:-1; pointer-events:none;
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(19,11,7,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.2), 0 14px 30px -10px rgba(0,0,0,.65);
  opacity:0; transition:opacity .4s var(--ease);
}
.site-header.scrolled .brand::before{ opacity:1; }
.site-header.scrolled .brand-logo{ height:52px; }

/* Mobile: "Somos más que chocolate," en una sola línea (cierre de Nosotros) */
@media (max-width:640px){
  .fixed-bg--cacao .script{ font-size:clamp(1.35rem,7vw,2.2rem) !important; white-space:nowrap; }
}


/* Hero de la home: dos CTA directos en lugar del selector de tabletas */
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.4rem; }
#lineas{ scroll-margin-top:5rem; }
@media (max-width:640px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .chunk-btn{ text-align:center; justify-content:center; }
}

/* Home mobile: más velo oscuro para que el texto no se pise con la foto de fondo */
@media (max-width:767px){
  .hero.hero--home::before{
    background:linear-gradient(180deg, rgba(19,11,7,.42) 0%, rgba(19,11,7,.66) 32%, rgba(19,11,7,.79) 55%, rgba(19,11,7,.92) 100%);
  }
}

/* Home mobile: CTA del hero con más transparencia (vidrio) */
@media (max-width:767px){
  .hero-cta .chunk-btn:not(.ghost){ background:linear-gradient(135deg, rgba(222,182,108,.55), rgba(198,154,85,.3)); color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }
  .hero-cta .chunk-btn.ghost{ background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); }
}

/* ===== Mobile: rendimiento y "hover pegado" en pantallas táctiles ===== */
/* el pulso del botón de WhatsApp animaba box-shadow (repintado constante sobre un elemento con blur): ahora es un anillo que solo escala y se desvanece */
.wa-float{ animation:none; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:2px solid rgba(60,220,110,.6); opacity:0; will-change:transform, opacity;
  animation:wa-ring 2.8s ease-out 2s infinite;
}
@keyframes wa-ring{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wa-float::after{ animation:none; } }

/* en táctil no hay hover: se anulan los levantados/zooms que quedaban "pegados" tras tocar */
@media (hover:none){
  .tableta-card:hover, .woow-flavor:hover, .contact-stage .contact-card:hover, .social-row a:hover,
  .chips-glass .b:hover, .gallery img:hover, .wa-float:hover{ transform:none; }
  .empresa-figure--xl:hover img, .tableta-card:hover .img-wrap img, .tableta-card--photo:hover .img-wrap img{ transform:none; }
  .line-card:hover img{ transform:scale(.92); }
  .line-card:hover .go, .line-card:hover .go::after{ transform:none; }
}

/* menos costo de render en celulares */
@media (max-width:767px){
  .chunk-btn, .glass-stat, .contact-card{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .site-header.scrolled .brand::before, .tablet-nav{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}

/* Home mobile: hero a pantalla completa con el contenido centrado en vertical */
@media (max-width:767px){ .hero--home .hero-cta{ margin-top:2rem; } }

/* Mobile: las cards de los sliders no usan el efecto de aparecer (reveal), se ven siempre */
@media (max-width:640px){
  .lines-grid .line-card, .tableta-grid .tableta-card, .woow-flavors .woow-flavor, .values .contact-card{
    opacity:1 !important; transform:none !important; transition:none;
  }
}

/* Mobile: todos los heroes con el mismo alto que el de la home (pantalla completa) */
@media (max-width:767px){
  body:not([data-line="home"]) .hero, .woow-ref{ min-height:100svh; }
}

/* Pantallas grandes (>1700px): la foto queda a tamaño original y su borde inferior se funde con el cacao */
@media (min-width:1701px){
  .hero[data-fixed-bg]::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    --ph:calc(min(100vw, 1672px) * 0.5628);
    background:linear-gradient(180deg, rgba(19,11,7,0) 0, rgba(19,11,7,0) calc(var(--ph) - 170px), #130b07 calc(var(--ph) - 6px));
    background-attachment:fixed; background-size:100% 100vh; background-repeat:no-repeat;
  }
}

/* Notebooks y monitores hasta 1700px: la foto llena el hero (cover, casi sin zoom porque la pantalla es más chica que la foto) */
@media (min-width:1024px) and (max-width:1700px){
  .hero[data-fixed-bg]{ background-size:cover; background-position:right center; }
  .hero[data-fixed-bg]:not(.hero--split){ background-position:center; }
}

/* Contacto (1024-1700px): foto un poco más arriba en el encuadre */
@media (min-width:1024px) and (max-width:1700px){
  .hero.hero--contacto[data-fixed-bg]{ background-position:right 85%; }
}

/* Home: el hero arranca en la misma posición y con la misma tipografía que los heroes de las demás páginas */
.hero.hero--home{ justify-content:flex-start; padding-top:var(--hero-top); padding-bottom:clamp(3.5rem,8vw,6rem); min-height:92svh; }
.hero.hero--home .hero-inner > *{ max-width:calc(50% - 2.5rem); }
.hero.hero--home .h1{ font-size:clamp(2.4rem,6vw,4.6rem); line-height:.95; }
.hero.hero--home .lede{ max-width:44ch; }
@media (max-width:1024px){ .hero.hero--home .hero-inner > *{ max-width:none; } }
@media (max-width:767px){ .hero.hero--home{ min-height:100svh; } }

/* Desktop: todos los heroes con el mismo alto que Nosotros (su contenido natural = espacio superior + ~563px) */
@media (min-width:1025px){
  body:not([data-line="home"]) .hero, .woow-ref, .hero.hero--home{ min-height:max(92svh, calc(var(--hero-top) + 563px)); }
  .woow-ref{ padding-bottom:1.75rem; }
}

/* Honey Roasted, 1024-1700px: menos zoom y sin franja. La foto se dimensiona al alto exacto del hero (un poco menos zoom que cover) y va anclada arriba */
@media (min-width:1024px) and (max-width:1700px){
  .hero.hero--honey[data-fixed-bg]:not(.hero--split){
    --hh:max(92svh, calc(var(--hero-top) + 563px));
    background-size:max(100vw, calc(var(--hh) * 1.7773)) auto; background-position:center top;
  }
}
/* Honey Roasted, más de 1700px: 88% del ancho (máx. 1500px) con los bordes fundidos en el cacao */
@media (min-width:1701px){
  .hero.hero--honey[data-fixed-bg]:not(.hero--split){ background-size:min(88vw,1500px) auto; background-position:center top; }
  .hero.hero--honey[data-fixed-bg]::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    --w:min(88vw,1500px); --ph:calc(var(--w) * 0.5628); --m:calc((100vw - var(--w)) / 2);
    background:
      linear-gradient(90deg, #130b07 0, #130b07 var(--m), rgba(19,11,7,0) calc(var(--m) + 180px)),
      linear-gradient(270deg, #130b07 0, #130b07 var(--m), rgba(19,11,7,0) calc(var(--m) + 180px)),
      linear-gradient(180deg, rgba(19,11,7,0) 0, rgba(19,11,7,0) calc(var(--ph) - 170px), #130b07 calc(var(--ph) - 6px));
    background-attachment:fixed; background-size:100% 100vh; background-repeat:no-repeat;
  }
}

/* >1700px: la foto fija vuelve a centrarse en vertical (como antes) y se funde arriba y abajo con el cacao, para que el menú no tape el producto */
@media (min-width:1701px){
  .hero[data-fixed-bg]:not(.hero--honey){ background-position:right center; }
  .hero[data-fixed-bg]:not(.hero--split):not(.hero--honey){ background-position:center center; }
  .hero[data-fixed-bg]:not(.hero--honey)::after{
    --ph:calc(min(100vw, 1672px) * 0.5628); --o:max(0px, calc((100vh - var(--ph)) / 2));
    background:
      linear-gradient(180deg, #130b07 0, #130b07 var(--o), rgba(19,11,7,0) calc(var(--o) + 100px)),
      linear-gradient(180deg, rgba(19,11,7,0) 0, rgba(19,11,7,0) calc(var(--o) + var(--ph) - 170px), #130b07 calc(var(--o) + var(--ph) - 6px));
    background-attachment:fixed; background-size:100% 100vh; background-repeat:no-repeat;
  }
}

/* WooW!: palabra destacada del título en amarillo (el mundo pop de la marca) */
.woow-ref .pop-title .wobble{ color:#ffd65a; }

/* WooW! hero: los dos botones con la misma sombra (la del botón secundario) */
.woow-ref .chunk-btn:not(.ghost){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -8px 14px rgba(138,100,35,.22), 0 14px 26px -12px rgba(0,0,0,.6);
}

/* Mobile: título de todos los heroes al mismo tamaño grande (el de la home) */
@media (max-width:767px){
  body:not([data-line="home"]) .hero .h1, .hero.hero--home .h1{ font-size:clamp(2.2rem,12vw,3.1rem); }
  .woow-ref .pop-title{ font-size:clamp(2.2rem,12vw,3.1rem) !important; }
}

/* Ficha técnica: más aire entre el kicker y las cards */
.ficha > .container > .eyebrow{ display:block; margin-bottom:1.8rem; }

/* WooW! sabores: el botón de kcal siempre alineado abajo, en la misma posición en las 3 cards */
.woow-flavor{ display:flex; flex-direction:column; align-items:center; }
.woow-flavor p{ flex:1; }
.woow-flavor .kcal{ align-self:center; }