/* ============================================================
   DON QUESILLO — by El Rey del Postre
   Warm, artisanal, franchise-ready one-page site
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --red:    #E5421C;
  --orange: #F4811E;
  --gold:   #F9A828;
  --caramel:#8A4A22;
  --syrup:  #5C3415;
  --ink:    #2A1B11;
  --ink-soft:#5B4636;
  --cream:  #FBF4E7;
  --cream-2:#F4E6CE;
  --cream-3:#EFD9B6;
  --white:  #FFFFFF;

  --swoosh: linear-gradient(100deg, var(--red) 0%, #F1631C 38%, var(--orange) 64%, var(--gold) 100%);
  --swoosh-soft: linear-gradient(100deg, rgba(229,66,28,.14), rgba(249,168,40,.14));

  --shadow-sm: 0 2px 10px rgba(92,52,21,.08);
  --shadow-md: 0 18px 50px -20px rgba(92,52,21,.35);
  --shadow-lg: 0 40px 90px -40px rgba(72,40,16,.55);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 22px;

  --font-display: 'Anton', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

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

/* alternate palettes (tweaks) */
body[data-palette="ember"]{ --red:#D8371A; --orange:#EF6E16; --gold:#F59E1E; --cream:#FBF1E2; --cream-2:#F1DCBE; }
body[data-palette="dulce"]{ --red:#E8561F; --orange:#F59331; --gold:#FBC04A; --cream:#FDF7EC; --cream-2:#F7E9D2; }

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[data-texture="on"]{
  background-image:
    radial-gradient(rgba(138,74,34,.045) 1px, transparent 1px);
  background-size:5px 5px;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

::selection{ background:var(--gold); color:var(--syrup); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,10vw,140px); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); font-weight:700;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--swoosh); border-radius:2px; }
.kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--caramel); font-weight:700;
}
h1,h2,h3{ line-height:.96; letter-spacing:-.01em; }
.display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.005em; line-height:.92;
}
.h-sec{ font-family:var(--font-display); text-transform:uppercase; line-height:.94;
  font-size:clamp(34px,5.2vw,62px); color:var(--ink); }
.lede{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:60ch; }
.muted{ color:var(--ink-soft); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* gradient text */
.grad{ background:var(--swoosh); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-wa{ background:#25D366; color:#06330f; box-shadow:0 12px 26px -12px rgba(37,211,102,.8); }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(37,211,102,.9); }
.btn-primary{ background:var(--swoosh); color:#fff; box-shadow:0 14px 30px -14px rgba(229,66,28,.85); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(229,66,28,.9); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid rgba(138,74,34,.28); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-lg{ padding:19px 34px; font-size:18px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .4s, box-shadow .4s, padding .4s;
  padding-block:18px;
}
.nav.scrolled{
  background:rgba(251,244,231,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(138,74,34,.12), 0 10px 30px -22px rgba(92,52,21,.5);
  padding-block:11px;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-weight:600; font-size:15px; color:var(--ink); position:relative; padding:4px 0; opacity:.85; transition:opacity .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--swoosh); transition:width .28s var(--ease); border-radius:2px; }
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; color:var(--ink); }
.nav-burger span{ width:22px; height:2px; background:currentColor; position:relative; border-radius:2px; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; border-radius:2px; transition:.3s; }
.nav-burger span::before{ top:-7px; }
.nav-burger span::after{ top:7px; }

/* ---------- Logo (real brand mark) ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; background:var(--cream); border-radius:18px; padding:6px 14px 6px 8px; box-shadow:var(--shadow-sm); }
.logo-img{ height:160px; width:auto; flex:none; display:block; }
.logo-sub{ display:none; }
.nav.scrolled .logo-img{ height:140px; }
.footer .logo-sub{ color:rgba(251,244,231,.5); }

/* ============================================================
   HERO (shared)
   ============================================================ */
.hero{ position:relative; padding-top:clamp(200px,22vh,250px); padding-bottom:clamp(40px,7vw,90px); overflow:hidden; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border-radius:999px; padding:7px 8px 7px 16px;
  box-shadow:var(--shadow-sm); font-size:13px; font-weight:600; color:var(--ink-soft);
}
.hero-badge b{ color:var(--ink); }
.hero-badge .pill{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--swoosh); padding:5px 11px; border-radius:999px; text-transform:uppercase; }
.hero h1{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(48px,8.2vw,104px); color:var(--ink); margin-top:22px;
}
.hero h1 .grad{ display:inline-block; }
.hero-slogan{
  font-family:var(--font-mono); font-style:normal; font-weight:700;
  font-size:clamp(15px,1.8vw,19px); letter-spacing:.02em; color:var(--red);
  margin-top:18px;
}
.hero-text{ font-size:clamp(16px,1.45vw,19px); color:var(--ink-soft); max-width:44ch; margin-top:14px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:22px 30px; margin-top:34px; }
.hero-trust .t{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.hero-trust .dot{ width:9px; height:9px; border-radius:50%; background:var(--swoosh); flex:none; box-shadow:0 0 0 4px rgba(249,168,40,.18); }

/* decorative swoosh ribbons */
.ribbon{ position:absolute; height:46px; width:160%; left:-30%; background:var(--swoosh); opacity:.9; filter:blur(.2px); border-radius:40px; }
.ribbon.r1{ top:14%; transform:rotate(-7deg); opacity:.16; }
.ribbon.r2{ top:21%; transform:rotate(-7deg); height:18px; opacity:.12; }

/* ---- Variant A: editorial split ---- */
body[data-hero="a"] .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center; }
body[data-hero="a"] .hero-figure{ position:relative; }

/* ---- Variant B: full-bleed immersive ---- */
body[data-hero="b"] .hero{ padding-bottom:0; }
body[data-hero="b"] .hero-inner{ display:grid; grid-template-columns:1fr; }
body[data-hero="b"] .hero-copy{ position:relative; z-index:3; max-width:680px; }
body[data-hero="b"] .hero-figure{ position:relative; margin-top:40px; }
body[data-hero="b"] .hero h1{ font-size:clamp(52px,9.5vw,120px); }
body[data-hero="b"] .hero-text{ max-width:52ch; }

/* ---- Variant C: artisanal poster (centered) ---- */
body[data-hero="c"] .hero{ text-align:center; }
body[data-hero="c"] .hero-inner{ display:flex; flex-direction:column; align-items:center; }
body[data-hero="c"] .hero-copy{ display:flex; flex-direction:column; align-items:center; max-width:900px; }
body[data-hero="c"] .hero-text{ max-width:54ch; }
body[data-hero="c"] .hero-cta{ justify-content:center; }
body[data-hero="c"] .hero-trust{ justify-content:center; }
body[data-hero="c"] .hero-figure{ margin-top:8px; width:min(760px,100%); }
body[data-hero="c"] .hero h1{ font-size:clamp(56px,11vw,128px); }
body[data-hero="c"] .hero-poster-wordmark{ display:block; }

.hero-poster-wordmark{ display:none; }
.hero-logo-img{ height:clamp(170px,24vw,300px); width:auto; margin:0 auto 6px; display:block; }

/* hide secondary figure depending on variant handled in markup with classes */
.show-a,.show-b,.show-c{ display:none; }
body[data-hero="a"] .show-a{ display:block; }
body[data-hero="b"] .show-b{ display:block; }
body[data-hero="c"] .show-c{ display:block; }

/* ============================================================
   PRODUCT PLACEHOLDER (elegant)
   ============================================================ */
.ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--cream-2) 0 14px, var(--cream) 14px 28px);
  border:1.5px dashed rgba(138,74,34,.32);
  display:grid; place-items:center; text-align:center;
  color:var(--caramel);
}
.ph .ph-ring{ position:absolute; inset:14% ; border-radius:50%; border:2px dashed rgba(138,74,34,.22); }
.ph .ph-note{
  position:relative; z-index:2; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.04em; line-height:1.5; padding:14px 18px; max-width:80%;
  background:rgba(251,244,231,.78); border-radius:12px; backdrop-filter:blur(2px);
}
.ph .ph-note b{ display:block; color:var(--syrup); font-size:12px; margin-bottom:3px; letter-spacing:.1em; text-transform:uppercase; }
.ph-tag{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); padding:5px 10px; border-radius:999px;
}

/* hero main figure card */
.hero-card{
  position:relative; border-radius:30px; overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
  background:#fff;
}
.hero-card .ph{ position:absolute; inset:0; border:none; border-radius:0; }
.hero-card .ph .ph-ring{ inset:18%; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-figure .float-badge{
  position:absolute; z-index:5; background:#fff; border-radius:18px; padding:13px 17px;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:11px;
}
.hero-figure .fb-1{ right:-14px; top:30px; }
.hero-figure .fb-2{ left:-18px; bottom:46px; }
.float-badge .fb-ic{ width:38px; height:38px; border-radius:11px; background:var(--swoosh-soft); display:grid; place-items:center; color:var(--red); flex:none; }
.float-badge .fb-ic svg{ width:20px; height:20px; }
.float-badge .fb-txt b{ display:block; font-size:14px; color:var(--ink); }
.float-badge .fb-txt span{ font-size:12px; color:var(--ink-soft); }

/* full bleed figure (variant B) */
.hero-bleed{
  position:relative; width:100vw; left:50%; margin-left:-50vw;
  height:clamp(360px,48vw,620px); margin-top:0;
}
.hero-bleed .ph{ position:absolute; inset:0; border:none; border-radius:0; }
.hero-bleed::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--cream) 0%, transparent 22% 78%, var(--cream) 100%); }

/* poster figure (variant C) */
.poster-card{
  position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:16/10;
}
.poster-card .ph{ position:absolute; inset:0; border:none; border-radius:0; }

/* ============================================================
   MARCA (brand statement)
   ============================================================ */
.marca{ background:var(--ink); color:var(--cream); border-radius:36px; }
.marca-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center; }
.marca .eyebrow{ color:var(--gold); }
.marca .eyebrow::before{ background:var(--gold); }
.marca h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(30px,4vw,52px); line-height:.98; }
.marca h2 .grad{ background:var(--swoosh); -webkit-background-clip:text; background-clip:text; color:transparent; }
.marca p{ color:rgba(251,244,231,.78); font-size:clamp(16px,1.4vw,19px); margin-top:18px; max-width:48ch; }
.quote-card{
  background:rgba(251,244,231,.05); border:1px solid rgba(249,168,40,.25);
  border-radius:24px; padding:clamp(26px,3.5vw,42px);
  position:relative;
}
.quote-card .qmark{ font-family:var(--font-display); font-size:90px; line-height:.6; color:var(--gold); opacity:.55; }
.quote-card p{ font-size:clamp(19px,2vw,26px); color:var(--cream); line-height:1.25; font-weight:500; margin-top:4px; }
.quote-card .who{ margin-top:22px; display:flex; align-items:center; gap:13px; }
.quote-card .who .av{ width:42px; height:42px; border-radius:50%; background:var(--swoosh); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-size:18px; }
.quote-card .who b{ display:block; font-size:14px; color:var(--cream); }
.quote-card .who span{ font-size:13px; color:rgba(251,244,231,.6); }

/* ingredients (product-focused) */
.recipe-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.recipe-tags span{
  background:rgba(249,168,40,.12); border:1px solid rgba(249,168,40,.3);
  color:var(--gold); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
}
.ingredients{ display:flex; flex-direction:column; gap:12px; }
.ing{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(251,244,231,.05); border:1px solid rgba(249,168,40,.16);
  border-radius:18px; padding:18px 20px;
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.ing:hover{ transform:translateX(4px); border-color:rgba(249,168,40,.4); background:rgba(251,244,231,.08); }
.ing-ic{
  width:46px; height:46px; border-radius:13px; flex:none;
  background:var(--swoosh); display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 18px -8px rgba(229,66,28,.7);
}
.ing-ic svg{ width:24px; height:24px; }
.ing b{ display:block; font-size:16.5px; color:var(--cream); }
.ing span{ font-size:13.5px; color:rgba(251,244,231,.68); line-height:1.45; }

/* ============================================================
   SABORES
   ============================================================ */
.sabores-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:46px; }
.flavor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.flavor{
  position:relative; background:color-mix(in srgb, var(--tint, var(--gold)) 22%, #fff); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  border:1px solid color-mix(in srgb, var(--tint, var(--caramel)) 34%, transparent);
}
.flavor::before{ content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--tint, var(--swoosh)); }
.flavor:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); background:color-mix(in srgb, var(--tint, var(--gold)) 32%, #fff); }
.flavor-body{ padding:30px 24px 28px; }
.flavor-dot{ display:block; width:16px; height:16px; border-radius:50%; background:var(--tint, var(--gold)); box-shadow:0 0 0 5px color-mix(in srgb, var(--tint, var(--gold)) 26%, transparent); margin-bottom:18px; }
.flavor-body .fnum{ font-family:var(--font-mono); font-size:11px; color:color-mix(in srgb, var(--tint, var(--caramel)) 65%, var(--syrup)); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.flavor-body h3{ font-family:var(--font-display); text-transform:uppercase; font-size:28px; color:var(--ink); margin-top:7px; }
.flavor-body p{ font-size:14px; color:var(--ink-soft); margin-top:9px; line-height:1.5; }
.flavor .corner{ position:absolute; top:0; right:0; width:54px; height:54px; background:var(--tint, var(--swoosh)); clip-path:polygon(100% 0,0 0,100% 100%); opacity:0; transition:opacity .3s; }
.flavor:hover .corner{ opacity:.9; }

/* ============================================================
   CALIDAD
   ============================================================ */
.calidad{ background:linear-gradient(180deg, var(--cream-2), var(--cream)); border-radius:36px; }
.calidad-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.feat-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px; }
.feat{
  position:relative; background:#fff; border-radius:18px; padding:22px 20px; box-shadow:var(--shadow-sm);
  display:flex; gap:15px; align-items:flex-start; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  border:1px solid rgba(138,74,34,.07);
}
.feat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--swoosh); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.feat::after{
  content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
  background:var(--swoosh-soft); opacity:0; transform:scale(.6); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.feat:hover::before{ transform:scaleY(1); }
.feat:hover::after{ opacity:.5; transform:scale(1); }
.feat .fic{
  position:relative; z-index:1; width:46px; height:46px; border-radius:13px;
  background:var(--swoosh); display:grid; place-items:center; color:#fff; flex:none;
  box-shadow:0 8px 18px -8px rgba(229,66,28,.6);
  transition:transform .35s var(--ease);
}
.feat:hover .fic{ transform:rotate(-6deg) scale(1.06); }
.feat .fic svg{ width:23px; height:23px; }
.feat > div{ position:relative; z-index:1; }
.feat b{ display:block; font-size:16px; color:var(--ink); }
.feat span{ font-size:13px; color:var(--ink-soft); line-height:1.45; }
.calidad-figure{ position:relative; }
.calidad-figure .photo{ border-radius:26px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/5; }
.calidad-figure .photo img{ width:100%; height:100%; object-fit:cover; }
.stamp{
  position:absolute; bottom:-22px; right:-14px; width:122px; height:122px; border-radius:50%;
  background:var(--cream); border:2px solid var(--caramel); color:var(--syrup);
  display:grid; place-items:center; text-align:center; box-shadow:var(--shadow-md);
  font-family:var(--font-display); text-transform:uppercase; transform:rotate(-9deg);
}
.stamp b{ font-size:26px; line-height:.85; }
.stamp span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; display:block; margin-top:3px; }

/* ============================================================
   NEGOCIOS (business)
   ============================================================ */
.negocios{ position:relative; color:#fff; border-radius:36px; overflow:hidden; }
.negocios .bg{ position:absolute; inset:0; }
.negocios .bg img{ width:100%; height:100%; object-fit:cover; }
.negocios .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(42,27,17,.94) 0%, rgba(42,27,17,.8) 42%, rgba(42,27,17,.25) 100%); }
.negocios-inner{ position:relative; z-index:2; max-width:620px; padding-block:clamp(56px,7vw,96px); }
.negocios .eyebrow{ color:var(--gold); }
.negocios .eyebrow::before{ background:var(--gold); }
.negocios h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(34px,5vw,60px); margin-top:16px; }
.negocios p{ color:rgba(255,255,255,.85); font-size:clamp(16px,1.45vw,19px); margin-top:18px; max-width:46ch; }
.neg-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.neg-tags span{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:600; }
.negocios .hero-cta{ margin-top:30px; }

/* ============================================================
   FRANQUICIAS
   ============================================================ */
.franq-head{ max-width:720px; }
.franq-models{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
.model{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid rgba(138,74,34,.08); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.model:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.model-img{ aspect-ratio:5/4; position:relative; overflow:hidden; }
.model-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.model:hover .model-img img{ transform:scale(1.05); }
.model-img--contain{ aspect-ratio:5/4; background:linear-gradient(160deg, var(--cream-2), var(--cream)); }
.model-img--contain img{ width:100%; height:100%; object-fit:contain; padding:0; }
.model:hover .model-img--contain img{ transform:scale(1.03); }
.model-img .ph{ position:absolute; inset:0; border:none; border-radius:0; }
.model-body{ padding:18px 20px 22px; }
.model-body .mnum{ font-family:var(--font-mono); font-size:11px; color:var(--gold); font-weight:700; letter-spacing:.1em; }
.model-body h3{ font-family:var(--font-display); text-transform:uppercase; font-size:21px; color:var(--ink); margin-top:5px; }
.model-body p{ font-size:13px; color:var(--ink-soft); margin-top:5px; }

.franq-benefits{ margin-top:32px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.benefit{ background:var(--cream-2); border-radius:16px; padding:18px 16px; }
.benefit .bic{ width:38px; height:38px; border-radius:11px; background:#fff; display:grid; place-items:center; color:var(--red); box-shadow:var(--shadow-sm); margin-bottom:12px; }
.benefit .bic svg{ width:20px; height:20px; }
.benefit b{ font-size:14px; color:var(--ink); display:block; line-height:1.2; }
.benefit span{ font-size:12.5px; color:var(--ink-soft); }

.franq-cta-bar{
  margin-top:42px; background:var(--ink); color:var(--cream); border-radius:26px;
  padding:clamp(26px,3.5vw,40px); display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.franq-cta-bar .swoosh-deco{ position:absolute; right:-60px; top:-40px; width:340px; height:340px; background:var(--swoosh); border-radius:50%; filter:blur(60px); opacity:.4; }
.franq-cta-bar h3{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(24px,3vw,36px); position:relative; }
.franq-cta-bar p{ color:rgba(251,244,231,.72); font-size:15px; margin-top:8px; max-width:42ch; position:relative; }

/* ============================================================
   HISTORIA / MISION / VISION
   ============================================================ */
.hmv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.hmv{
  background:#fff; border-radius:var(--radius); padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow-sm); border:1px solid rgba(138,74,34,.08);
  position:relative; overflow:hidden;
}
.hmv::before{ content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--swoosh); }
.hmv .num{ font-family:var(--font-display); font-size:54px; color:var(--cream-3); line-height:.8; }
.hmv h3{ font-family:var(--font-display); text-transform:uppercase; font-size:26px; color:var(--ink); margin-top:14px; }
.hmv p{ font-size:15px; color:var(--ink-soft); margin-top:12px; line-height:1.55; }

/* ============================================================
   TESTIMONIOS / PRUEBA SOCIAL
   ============================================================ */
.stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }

.testi-feature{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,52px);
  align-items:center; margin-top:50px;
}
.testi-collage{
  border-radius:26px; overflow:hidden; box-shadow:var(--shadow-lg);
  border:6px solid #fff; rotate:-1.2deg; transition:rotate .4s var(--ease), transform .4s var(--ease);
}
.testi-collage:hover{ rotate:0deg; transform:translateY(-4px); }
.testi-collage img{ width:100%; height:100%; object-fit:cover; display:block; }

.testi-side{ display:flex; flex-direction:column; gap:16px; }
.testi-rating{
  display:flex; align-items:center; gap:18px;
  background:var(--ink); color:var(--cream); border-radius:20px; padding:20px 24px;
  box-shadow:var(--shadow-md);
}
.rating-score{ font-family:var(--font-display); font-size:54px; line-height:.85; color:var(--gold); }
.rating-meta{ display:flex; flex-direction:column; gap:5px; }
.rating-meta .stars{ font-size:16px; }
.rating-label{ font-size:13.5px; color:rgba(251,244,231,.72); max-width:24ch; line-height:1.35; }

.review{
  margin:0; background:#fff; border-radius:18px; padding:20px 22px;
  box-shadow:var(--shadow-sm); border:1px solid rgba(138,74,34,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review:hover{ transform:translateX(4px); box-shadow:var(--shadow-md); }
.review blockquote{ margin:10px 0 0; font-size:15.5px; color:var(--ink); line-height:1.45; font-weight:500; }
.review figcaption{ display:flex; align-items:center; gap:11px; margin-top:15px; }
.review .av{ width:40px; height:40px; border-radius:50%; background:var(--swoosh); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-size:15px; flex:none; }
.review figcaption b{ display:block; font-size:14px; color:var(--ink); }
.review figcaption small{ font-size:12.5px; color:var(--ink-soft); }

.testi-videos{ text-align:center; margin-top:42px; }
.testi-videos-label{ font-size:15px; color:var(--ink-soft); }
.testi-videos-label a{ color:var(--red); font-weight:700; border-bottom:2px solid color-mix(in srgb, var(--red) 35%, transparent); transition:border-color .2s; }
.testi-videos-label a:hover{ border-color:var(--red); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{ position:relative; text-align:center; color:#fff; border-radius:36px; overflow:hidden; background:var(--syrup); }
.contacto .glow{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% -10%, rgba(249,168,40,.5), transparent 60%); }
.contacto .ribbon-deco{ position:absolute; left:-10%; width:120%; height:120px; background:var(--swoosh); opacity:.18; transform:rotate(-6deg); }
.contacto .rd1{ top:8%; }
.contacto .rd2{ bottom:6%; height:70px; opacity:.12; }
.contacto-inner{ position:relative; z-index:3; padding-block:clamp(64px,9vw,120px); }
.contacto h2{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(36px,6vw,76px); line-height:.94; }
.contacto p{ color:rgba(255,255,255,.82); font-size:clamp(17px,1.6vw,21px); margin-top:20px; max-width:50ch; margin-inline:auto; }
.contacto-actions{ display:flex; flex-direction:column; align-items:center; gap:26px; margin-top:38px; }
.wa-numbers{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; }
.wa-num-item{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.wa-num-item small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.wa-num-item b{ font-family:var(--font-mono); font-size:clamp(18px,2.4vw,26px); font-weight:700; letter-spacing:.03em; color:#fff; }
.wa-num-sep{ width:1px; height:34px; background:rgba(255,255,255,.25); }
.contacto-btns{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.wa-number{ font-family:var(--font-mono); font-size:clamp(22px,3vw,34px); font-weight:700; letter-spacing:.04em; color:#fff; display:inline-flex; align-items:center; gap:12px; }
.wa-number svg{ width:30px; height:30px; color:#25D366; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:rgba(251,244,231,.7); padding-block:54px 30px; }
.footer-top{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; align-items:flex-start; }
.footer .logo-sub{ color:rgba(251,244,231,.5); }
.footer-col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:rgba(251,244,231,.7); margin-bottom:9px; transition:color .2s; }
.footer-col a:hover{ color:var(--cream); }
.footer-cols{ display:flex; gap:clamp(36px,6vw,90px); flex-wrap:wrap; }
.footer-bottom{ margin-top:42px; padding-top:22px; border-top:1px solid rgba(251,244,231,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; font-family:var(--font-mono); color:rgba(251,244,231,.5); }
.ig-link{ display:inline-flex; align-items:center; gap:9px; color:var(--cream); font-weight:600; }
.ig-link svg{ width:20px; height:20px; }

/* sticky whatsapp fab */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; color:#fff; box-shadow:0 14px 30px -10px rgba(37,211,102,.8);
  transition:transform .3s var(--ease); animation:wapulse 2.6s infinite;
}
.wa-fab:hover{ transform:scale(1.08); }
.wa-fab svg{ width:30px; height:30px; }
@keyframes wapulse{ 0%,100%{ box-shadow:0 14px 30px -10px rgba(37,211,102,.8), 0 0 0 0 rgba(37,211,102,.45); } 50%{ box-shadow:0 14px 30px -10px rgba(37,211,102,.8), 0 0 0 14px rgba(37,211,102,0); } }

/* ---------- Reveal animation base ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .flavor-grid{ grid-template-columns:repeat(3,1fr); }
  .franq-models{ grid-template-columns:repeat(2,1fr); }
  .franq-benefits{ grid-template-columns:repeat(3,1fr); }
  .nav-cta .btn-ghost{ display:none; }
  .nav-links{ gap:20px; }
  .nav-links a{ font-size:14px; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta .btn-ghost{ display:none; }
  body[data-hero="a"] .hero-inner{ grid-template-columns:1fr; }
  body[data-hero="a"] .hero-figure{ order:-1; max-width:460px; }
  .marca-inner{ grid-template-columns:1fr; }
  .calidad-grid{ grid-template-columns:1fr; }
  .calidad-figure{ max-width:420px; }
  .hmv-grid{ grid-template-columns:1fr; }
  .testi-feature{ grid-template-columns:1fr; gap:30px; }
  .testi-collage{ rotate:0deg; max-width:560px; margin-inline:auto; }
  .feat-list{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  :root{ --radius:18px; }
  .flavor-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .franq-models{ grid-template-columns:1fr 1fr; gap:14px; }
  .franq-benefits{ grid-template-columns:1fr 1fr; }
  .feat-list{ grid-template-columns:1fr; }
  .marca, .calidad, .negocios, .franq-cta-bar, .contacto, .hmv, .flavor, .model{ border-radius:22px; }
  .sabores-head{ margin-bottom:30px; }
  .section{ padding-block:clamp(56px,12vw,80px); }
  .franq-cta-bar{ flex-direction:column; align-items:flex-start; }
  .stamp{ width:96px; height:96px; right:8px; }
  .hero-figure .fb-1{ right:6px; }
  .hero-figure .fb-2{ left:6px; }
  .nav-cta .logo-sub{ display:none; }
}
@media (max-width:380px){
  .flavor-grid{ grid-template-columns:1fr; }
  .franq-benefits{ grid-template-columns:1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .wa-fab{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Tweaks mount ---------- */
#tweaks-root{ position:fixed; z-index:90; }