/* ===== Chocolatte — Design tokens (manual de marca) ===== */
:root{
  --choco: #3B2418;
  --cream: #F5EDE4;
  --gold:  #C9A15C;
  --white: #FFFDF9;

  --choco-rgb: 59,36,24;
  --gold-rgb: 201,161,92;
  --yellow: #FFC93C;

  --phase-1: #C9A15C;
  --phase-2: #8A5A32;
  --phase-3: #3B2418;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--choco);
  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; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

h1,h2,h3{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing: -0.01em; }
h1{ font-size: clamp(2.1rem, 4vw, 3.1rem); line-height:1.1; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.15; }
h3{ font-size: 1.15rem; margin-bottom:.4em; }
em{ font-style: italic; color: var(--gold); }
strong{ font-weight:700; color: var(--choco); opacity:1; }
p{ margin:0 0 1em; }

.section-label{
  font-family: var(--font-body);
  font-weight:600;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9em;
}
.section-label--light{ color: var(--gold); }
.light{ color: var(--white); }
.section-intro{ max-width: 620px; font-size: 1.05rem; opacity:.85; }
.section-intro--tight{ margin-top:-.6em; font-weight:600; opacity:1; }

mark{
  background-color: transparent; color: inherit; padding:0;
  background-image: linear-gradient(transparent 62%, var(--yellow) 62%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s var(--ease) .35s;
}
.reveal.in mark{ background-size: 100% 100%; }

/* ===== grain / texture ===== */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-texture{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(59,36,24,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,36,24,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 20%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 60% 20%, black 0%, transparent 70%);
  animation: grid-breathe 10s ease-in-out infinite;
  transform-origin: 60% 20%;
}
@keyframes grid-breathe{
  0%, 100%{ opacity:.8; transform: scale(1) translate(0,0); }
  50%{ opacity:1; transform: scale(1.04) translate(-1.5%, 1%); }
}
.grid-texture--dark{
  background-image:
    linear-gradient(rgba(245,237,228,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,228,.06) 1px, transparent 1px);
}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-body);
  font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  text-align:center;
  padding: 1em 1.8em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-primary{ background: var(--choco); color: var(--white); }
.btn-primary:hover{ background:#2a1810; transform: translateY(-2px); }
.btn-primary:active{ background:#1f120c; }
.btn-yellow{ background: #FFC93C; color: var(--choco); box-shadow: 0 6px 20px rgba(255,201,60,.35); }
.btn-yellow:hover{ background:#FFD966; transform: translateY(-2px); }
.btn-yellow:active{ background:#F5B622; box-shadow: 0 3px 10px rgba(255,201,60,.35); }
.btn-lg{ padding: 1.15em 2.4em; font-size:.85rem; }
.btn-ghost{ border-color: rgba(59,36,24,.25); padding:.7em 1.3em; }
.btn-ghost:hover{ border-color: var(--choco); }
.btn-ghost:active{ background: rgba(59,36,24,.06); }
.btn:active{ transform: scale(.96); transition-duration: .12s; }
.btn-link{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; font-size:.85rem; letter-spacing:.04em;
  border-bottom: 1px solid currentColor; padding-bottom:2px;
}
/* ===== hairline ===== */
.hairline{ width:75%; max-width:900px; height:1px; margin:0 auto; background: rgba(59,36,24,.16); }

/* ===== header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(245,237,228,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(59,36,24,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.logo{ display:flex; align-items:center; gap:.5em; font-family: var(--font-display); font-weight:700; font-size:1.35rem; }
.logo-drop{ width:20px; height:20px; fill: var(--choco); }
.main-nav{ display:flex; align-items:center; gap: clamp(1em, 2.4vw, 2.1em); font-size:.86rem; font-weight:500; }
.main-nav a:not(.btn){ opacity:.8; transition: opacity .2s; }
.main-nav a:not(.btn):hover{ opacity:1; }
.nav-toggle{ display:none; }

/* ===== hero ===== */
.hero{ position:relative; padding: 88px 0 60px; overflow:hidden; }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 32px; align-items:center; }
.hero-sub{ font-size: 1.1rem; max-width: 480px; opacity:.85; margin-bottom: 1em; }
.hero-sub--highlight{
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  color: var(--choco); opacity:1; margin-bottom: 1.8em;
  padding-left: 14px; border-left: 2px solid var(--gold);
}
.hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.7em; }
.hero-risk{ font-size:.82rem; opacity:.6; margin:0; max-width: 380px; }
.hero-visual{
  perspective: 800px; opacity: 0;
  animation: hero-visual-in .8s var(--ease) .55s both, hero-float 6s ease-in-out 1.2s infinite;
}
.hero-visual img{
  width:100%; border-radius: var(--radius); display:block; cursor:grab;
  touch-action: none; transition: transform .5s var(--ease);
}
.hero-visual img.is-tilting{ transition: none; }
@keyframes hero-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes hero-visual-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* Entrance choreography: headline, copy and CTA rise into place in sequence
   on load, instead of the hero just being "there" the moment the page paints. */
.hero-in{ opacity:0; animation: hero-rise .75s var(--ease) both; }
.hero-in-2{ animation-delay: .05s; }
.hero-in-3{ animation-delay: .28s; }
.hero-in-4{ animation-delay: .38s; }
.hero-in-5{ animation-delay: .48s; }
.hero-in-6{ animation-delay: .58s; }
@keyframes hero-rise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Animated shine sweeping across the key word, once the entrance settles. */
.shimmer{
  background: linear-gradient(100deg, var(--gold) 30%, #f2ddac 45%, var(--gold) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 3.2s ease-in-out 1.5s infinite;
}
@keyframes shimmer-sweep{
  0%{ background-position: 200% 0; }
  55%, 100%{ background-position: -40% 0; }
}

/* Very soft nod to a hot-served latte: a warm glow (like a cup sitting just
   off-screen) with a couple of faint steam wisps drifting up from it.
   Anchored to the section's vertical center (not its bottom edge) so the
   brightest part of the gradient can never get clipped by .hero's
   overflow:hidden — that was cutting off the one part meant to be seen. */
.coffee-steam{
  position:absolute; left:50%; top:50%; width:460px; max-width:85%; height:460px;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(201,161,92,.24) 0%, transparent 72%);
}
.coffee-steam::before, .coffee-steam::after{
  content:""; position:absolute; bottom:42%; width:3px; height:150px; border-radius:3px;
  background: linear-gradient(to top, rgba(201,161,92,.32), transparent);
  filter: blur(4px);
  animation: coffee-steam-rise 6s ease-in-out infinite;
}
.coffee-steam::before{ left:44%; animation-delay:0s; }
.coffee-steam::after{ left:57%; animation-delay:2s; }
@keyframes coffee-steam-rise{
  0%{ transform: translate(0,0) scaleX(1); opacity:0; }
  35%{ opacity:.55; }
  70%{ transform: translate(6px,-70px) scaleX(1.4); opacity:.25; }
  100%{ transform: translate(-5px,-130px) scaleX(1.9); opacity:0; }
}

/* ===== services ===== */
.services{ padding: 110px 0; }

/* phases: mobile sticky tab tracker (hidden on desktop, where the side nav already scrollspies) */
.phases-mobile-bar{ display:none; }

/* phases: sticky scrollspy nav + detail blocks */
.phases-layout{ margin-top: 56px; display:grid; grid-template-columns: 260px 1fr; gap: 56px; align-items:start; }

.phases-nav{ position: sticky; top: 110px; }
.phases-nav-track{ display:flex; flex-direction:column; gap: 4px; }
.phase-nav-item{
  display:flex; align-items:flex-start; gap: .8em; text-align:left;
  background:none; border:none; cursor:pointer; padding: .9em 0 .9em 1.1em;
  border-left: 2px solid rgba(59,36,24,.12);
  transition: border-color .3s var(--ease);
}
.phase-nav-dot{ position:relative; width:7px; height:7px; border-radius:50%; background: rgba(59,36,24,.25); margin-top:.5em; flex-shrink:0; transition: background .3s var(--ease); }
.phase-nav-num{ display:block; font-family: var(--font-display); font-size:.95rem; font-weight:600; opacity:.5; transition: opacity .3s var(--ease); }
.phase-nav-name{ display:block; font-size:.8rem; opacity:.4; margin-top:.2em; line-height:1.35; transition: opacity .3s var(--ease); }
.phase-nav-item.active{ border-left-color: var(--phase-color, var(--gold)); }
.phase-nav-item.active .phase-nav-dot{ background: var(--phase-color, var(--gold)); }
.phase-nav-item.active .phase-nav-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border: 1.5px solid var(--phase-color, var(--gold));
  animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse{
  0%{ transform: scale(.6); opacity:.9; }
  100%{ transform: scale(1.6); opacity:0; }
}
.phase-nav-item.active .phase-nav-num{ opacity:1; color: var(--choco); }
.phase-nav-item.active .phase-nav-name{ opacity:.75; }

.phase-color-1{ --phase-color: var(--phase-1); }
.phase-color-2{ --phase-color: var(--phase-2); }
.phase-color-3{ --phase-color: var(--phase-3); }

.phases-content{ display:flex; flex-direction:column; gap: 20px; }
.phase-block{
  padding: 2.4em 2.2em; border-radius: var(--radius);
  background: color-mix(in srgb, var(--phase-color, var(--gold)) 7%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--phase-color, var(--gold)) 22%, transparent);
}
.phase-badge{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--phase-color, var(--gold)); background: color-mix(in srgb, var(--phase-color, var(--gold)) 14%, transparent);
  padding:.4em .9em; border-radius:999px; margin-bottom: 1em;
}
.phase-block h3{ font-size: 1.4rem; margin-bottom:.5em; }
.phase-block p{ opacity:.82; font-size:1rem; max-width: 640px; margin:0; }
.phase-sub{ margin-bottom: 1.8em !important; }

.block-list{ display:flex; flex-direction:column; gap: 1.6em; margin-bottom: 1.8em; }
.block-name{ font-family: var(--font-display); font-weight:600; font-size:1.02rem; margin:0 0 .3em; }
.block-item p:last-child{ margin:0; opacity:.8; font-size:.95rem; }

.phase-outcome{
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--phase-color, var(--gold)); opacity:1; margin: 0 0 1.4em;
  padding-left: 14px; border-left: 2px solid var(--phase-color, var(--gold));
}

.phase-videos{
  margin-top: 2em; padding-top: 1.8em; max-width: 480px;
  border-top: 1px solid color-mix(in srgb, var(--phase-color, var(--gold)) 25%, transparent);
}
.phase-video-slot{ cursor: default; }
.phase-video{
  width:100%; aspect-ratio: 16/9; border-radius: 12px; display:block;
  background: color-mix(in srgb, var(--phase-color, var(--gold)) 14%, var(--choco) 6%);
}
.phase-video-slot p{
  margin:.6em 0 0; font-size:.75rem; font-weight:600; text-align:center;
  color: rgba(59,36,24,.5); letter-spacing:.03em;
}

.logos-section{ padding: 8px 0 40px; }
.logos-heading{
  margin: 0; text-align:center; font-size:.85rem; font-weight:600; color: var(--gold);
  letter-spacing:.1em; text-transform:uppercase;
}
.logos-strip{
  margin-top: 28px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logos-track{
  display:flex; align-items:center; gap: 4.2em; width:max-content;
  animation: logos-scroll 22s linear infinite;
}
.logos-strip:hover .logos-track{ animation-play-state: paused; }
.logo-item{ display:flex; align-items:center; flex-shrink:0; }
.logo-item img{ height: 26px; width:auto; opacity:.55; filter: grayscale(1); transition: opacity .25s; }
.logo-item img:hover{ opacity:.9; }
.logo-item--text{
  font-family: var(--font-display); font-weight:600; font-size:1.05rem;
  color: var(--choco); opacity:.45; letter-spacing:.01em; white-space:nowrap;
}
@keyframes logos-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===== video feature ===== */
.video-feature{ position:relative; padding: 60px 0 56px; overflow:hidden; text-align:center; }
.choco-stage{
  position:relative; z-index:1; margin: 24px auto 0;
  max-width: 210px; display:flex; align-items:flex-end; justify-content:center;
}
.choco-stage::after{
  content:""; position:absolute; left:50%; bottom:2%; width:52%; height:28px;
  transform: translateX(-50%); border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(59,36,24,.16) 0%, rgba(59,36,24,0) 72%);
}
#chocoCanvas{ position:relative; width:100%; height:auto; display:block; }
.video-feature .btn-yellow{ margin-top: 22px; }

/* ===== about ===== */
.about{ padding: 120px 0; background: var(--choco); color: var(--white); position:relative; overflow:hidden; }
.about::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(245,237,228,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,228,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%);
}
.about-inner{ position:relative; z-index:1; display:grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items:center; }
.about-visual img{ border-radius: var(--radius); }
.about-copy{ color: var(--white); }
.about-copy h2{ color: var(--white); }
.about-copy .section-label{ color: var(--gold); }
.about-copy p{ color: rgba(245,237,228,.85); font-size: 1.02rem; }
.about-copy strong{ color: var(--white); font-weight:700; }
.about-copy em{ color: var(--gold); }
.about-copy .btn-link{ color: var(--gold); }

/* ===== testimonials (cases) ===== */
.testimonials{ padding: 120px 0; background: rgba(59,36,24,.04); overflow:hidden; }

.cases-wrap{ position:relative; margin-top: 48px; }
.cases-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  z-index: 5; width:52px; height:52px; border-radius:50%;
  background: #FFC93C; color: var(--choco); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: 0 8px 20px rgba(59,36,24,.18);
  transition: opacity .25s, transform .2s, background .2s;
}
.cases-arrow:hover{ background:#FFD966; transform: translateY(-50%) scale(1.06); }
.cases-arrow:active{ transform: translateY(-50%) scale(.94); }
.cases-arrow[disabled]{ opacity:0; pointer-events:none; }
.cases-arrow svg{ width:22px; height:22px; }
.cases-arrow--prev{ left: -22px; }
.cases-arrow--next{ right: -22px; }

.cases-scroller{
  display:flex; gap: 24px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type: x proximity;
  padding: 0 0 16px 0; margin-left: -28px; margin-right: -28px;
  padding-left: 28px; padding-right: 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(59,36,24,.2) transparent;
}
.cases-scroller::-webkit-scrollbar{ height:6px; }
.cases-scroller::-webkit-scrollbar-track{ background: transparent; }
.cases-scroller::-webkit-scrollbar-thumb{ background: rgba(59,36,24,.2); border-radius:3px; }
.cases-scroller::-webkit-scrollbar-thumb:hover{ background: rgba(59,36,24,.4); }

.case-card{
  scroll-snap-align: start; flex-shrink:0; width:320px;
  background: var(--white); border-radius: var(--radius); overflow:hidden;
  border: 1px solid rgba(59,36,24,.1); transition: box-shadow .25s;
}
.case-card:hover{ box-shadow: 0 8px 24px rgba(59,36,24,.12); }

.case-media{
  position:relative; aspect-ratio:3/2; background: linear-gradient(135deg, rgba(59,36,24,.08), rgba(59,36,24,.04));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.case-video{ width:100%; height:100%; display:block; object-fit:cover; background: var(--choco); }

.case-card h3{ font-size:1.05rem; margin: 16px 16px 4px; line-height:1.3; }
.case-card p{ font-size:.9rem; color: rgba(59,36,24,.75); margin: 0 16px 16px; line-height:1.4; }
.case-card .case-result{ font-size:.88rem; font-weight:700; color: var(--gold); margin: 0 16px 8px; line-height:1.35; }

.cases-hint{
  margin-top: 20px; text-align:center; font-size:.85rem; opacity:.55; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:.8em;
}
.hint-arrow{
  display:inline-block; font-size:1.1rem; color: var(--choco);
  transition: opacity .3s ease;
  animation: hint-bob-right 1.8s ease-in-out infinite;
}
.hint-arrow.is-hidden{ opacity:0; }
.hint-arrow--left{ animation-name: hint-bob-left; animation-delay: .9s; }
@keyframes hint-bob-right{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(3px); }
}
@keyframes hint-bob-left{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(-3px); }
}

/* ===== qualify ===== */
.qualify{ position:relative; padding: 110px 0; background: var(--choco); overflow:hidden; }
.qualify-intro{ color: rgba(245,237,228,.7); }
.qualify-grid{ position:relative; z-index:1; margin-top: 48px; display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.qualify-card{ padding: 2.6em; border-radius: var(--radius); }
.qualify-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap: 1em; }
.qualify-card li{
  position:relative; padding-left: 1.7em; font-size:.98rem; line-height:1.5;
  opacity:0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.qualify-card.in li{ opacity:.88; transform: translateX(0); }
.qualify-card.in li:nth-child(1){ transition-delay: .05s; }
.qualify-card.in li:nth-child(2){ transition-delay: .15s; }
.qualify-card.in li:nth-child(3){ transition-delay: .25s; }
.qualify-card.in li:nth-child(4){ transition-delay: .35s; }
.qualify-card li::before{ position:absolute; left:0; top:.05em; font-weight:700; }
.qualify-title{ font-family: var(--font-display); font-size:1.25rem; margin-bottom: 1em; }
.qualify-card--yes{
  background: linear-gradient(160deg, rgba(201,161,92,.16), rgba(201,161,92,.04));
  border: 1px solid rgba(201,161,92,.35); color: var(--white);
}
.qualify-card--yes .qualify-title{ color: var(--gold); }
.qualify-card--yes li::before{ content:"✓"; color: var(--gold); }
.qualify-card--no{ background: var(--cream); border: 1px solid rgba(59,36,24,.1); }
.qualify-card--no li::before{ content:"✕"; color: rgba(59,36,24,.35); }

.qualify-card--yes.reveal{ transform: translateX(-56px); }
.qualify-card--no.reveal{ transform: translateX(56px); }
.qualify-card--yes.reveal.in, .qualify-card--no.reveal.in{ transform: translateX(0); }

/* ===== faq ===== */
.faq{ padding: 110px 0; }
.faq-list{ margin-top: 44px; max-width: 760px; }
.faq-item{
  border-top: 1px solid rgba(59,36,24,.12);
  padding: 1.6em 0;
}
.faq-list .faq-item:last-child{ border-bottom: 1px solid rgba(59,36,24,.12); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1em;
  font-family: var(--font-display); font-size: 1.1rem; font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex-shrink:0; font-family: var(--font-body); font-weight:400; font-size:1.4rem; color: var(--gold);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin: 1em 0 0; opacity:.8; max-width: 640px; line-height:1.6; }

/* ===== lead magnet ===== */
.lead-magnet{ padding: 70px 0; background: color-mix(in srgb, var(--gold) 8%, var(--cream)); }
.lead-magnet-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap:wrap;
}
.lead-magnet-copy{ flex: 1 1 420px; }
.lead-magnet-copy .section-label{ margin-bottom:.5em; }
.lead-magnet-copy h2{ font-size: 1.5rem; margin:0; }
.lead-magnet-copy em{ color: var(--choco); opacity:.6; font-style: italic; }
.lead-magnet-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7em;
  width: 100%;
  max-width: 420px;
}
.lead-magnet-form input {
  width: 100%;
  padding: 1em 1.2em;
  border-radius: 999px;
  border: 1px solid rgba(59, 36, 24, 0.18);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--choco);
}
.lead-magnet-form input::placeholder{ color: rgba(59,36,24,.4); }
.lead-magnet-form input:focus{ outline: 2px solid var(--gold); outline-offset:1px; }
.lead-magnet-form .btn {
  width: 100%;
}

/* ===== final cta ===== */
.final-cta{ position:relative; background: var(--choco); color: var(--white); padding: 130px 0; text-align:center; overflow:hidden; }
.final-cta-sub{ max-width: 520px; margin: 0 auto 2em; opacity:.75; font-size: 1.05rem; }
.cta-note{ margin-top: 1.4em; font-size:.82rem; opacity:.5; letter-spacing:.03em; }
.final-cta .btn-yellow{ animation: cta-glow 3s ease-in-out infinite; }
@keyframes cta-glow{
  0%, 100%{ box-shadow: 0 6px 20px rgba(255,201,60,.35); }
  50%{ box-shadow: 0 6px 34px rgba(255,201,60,.65); }
}

/* ===== footer ===== */
.site-footer{ padding: 40px 0 0; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(59,36,24,.1);
}
.footer-brand{ display:flex; align-items:center; gap:.9em; flex-wrap:wrap; }
.footer-email{ font-size:.88rem; opacity:.75; transition: opacity .2s; }
.footer-email:hover{ opacity:1; }
.footer-bottom{
  padding: 20px 0; display:flex; align-items:center; justify-content:space-between;
  gap: 16px; flex-wrap:wrap;
}
.footer-legal{ display:flex; gap: 1.4em; font-size:.8rem; }
.footer-legal a{ opacity:.5; transition: opacity .2s; }
.footer-legal a:hover{ opacity:.85; }

/* ===== sticky mobile CTA ===== */
.sticky-cta{
  display:none; position: fixed; left:16px; right:16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  align-items:center; gap:.7em;
  background: rgba(var(--choco-rgb), .88); backdrop-filter: blur(10px); color: var(--white);
  border-radius: 999px; padding: 8px 8px 8px 16px;
  border: 1px solid rgba(var(--gold-rgb), .45);
  box-shadow: 0 14px 32px rgba(59,36,24,.4);
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.sticky-cta.is-hidden{ transform: translateY(140%); opacity:0; pointer-events:none; }
.sticky-cta-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center;
}
.sticky-cta-icon svg{ width:19px; height:19px; stroke: var(--gold); fill:none; }
.sticky-cta-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sticky-cta-label{ font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }
.sticky-cta-title{ font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta-arrow{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background: #FFC93C; display:flex; align-items:center; justify-content:center;
}
.sticky-cta-arrow svg{ width:17px; height:17px; stroke: var(--choco); fill:none; }
@media (max-width: 900px){
  .sticky-cta{ display:flex; }
}
.footer-bottom p{ margin:0; font-size:.8rem; opacity:.5; }

/* ===== legal pages ===== */
.legal{ padding: 60px 0 100px; }
.legal .wrap{ max-width: 780px; }
.legal-updated{ opacity:.55; font-size:.85rem; margin-bottom: 2.4em; }
.legal h2{ font-size: 1.4rem; margin-top: 1.8em; }
.legal h2:first-of-type{ margin-top: 0; }
.legal p, .legal li{ opacity:.85; line-height:1.7; margin-bottom: 1em; }
.legal ul{ padding-left: 1.3em; margin-bottom: 1.4em; }
.legal a{ text-decoration: underline; text-underline-offset: 2px; }

/* ===== reveal on scroll ===== */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ===== responsive ===== */
/* Hero-only breakpoint: narrower than the general mobile one below, so real
   tablets (iPad-width portrait, ~680-900px) keep the desktop-style hero —
   side-by-side layout, circular photo on the right — and only phones switch
   to the stacked layout with the wide "NO IGUAL" banner image. */
@media (max-width: 680px){
  .hero{ padding: 18px 0 20px; }
  .hero-inner{ grid-template-columns: minmax(0,1fr); gap: 16px; }
  .hero-visual{ order:-1; }
  .hero-visual img{ max-width: 360px; margin: 0 auto; display:block; }
  .hero-copy{ display:flex; flex-direction:column; }
  .hero-copy h1{ display:block; font-size: 1.9rem; line-height:1.12; order:0; margin-bottom:.4em; }
  .hero-sub-mobile-hide{ display:none; }
  .hero-sub{ font-size: .98rem; margin-bottom: .9em; order:2; }
  .hero-sub--highlight{
    order:1; font-size: 1.05rem; font-weight:500; line-height:1.4; margin: 0 0 .8em;
    padding-left:12px; border-left:2px solid var(--gold);
  }
  .hero-actions{ order:3; }
  .hero-actions .btn{ padding: .8em 1.4em; }
}

@media (max-width: 900px){
  .logos-section{ padding: 8px 0 64px; }
  .phases-layout{ grid-template-columns: 1fr; gap: 12px; }
  .phases-nav{ display:none; }
  .phase-block{ padding: 1.8em 1.3em; }
  .phase-videos{ max-width: none; }

  .video-feature{ padding: 44px 0 40px; }
  .video-feature h2{ font-size: 1.4rem; margin-top:.4em; }
  .choco-stage{ max-width: 170px; margin-top: 18px; }
  .video-feature .btn-yellow{ margin-top: 18px; }

  .phases-mobile-bar{
    display:block; position: sticky; top: 78px; z-index: 20;
    margin: 28px -28px 0; padding: 12px 28px 10px;
    background: rgba(245,237,228,.94); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(59,36,24,.1);
  }
  .phases-mobile-tabs{ display:flex; gap:.5em; overflow-x:auto; scrollbar-width:none; }
  .phases-mobile-tabs::-webkit-scrollbar{ display:none; }
  .phase-tab{
    flex-shrink:0; display:flex; align-items:center; gap:.4em;
    padding: .5em 1em; border-radius:999px; border:1px solid rgba(59,36,24,.14);
    background: rgba(59,36,24,.03); color: rgba(59,36,24,.55);
    font-size:.78rem; font-weight:700; letter-spacing:.03em;
    cursor:pointer; transition: all .25s var(--ease);
  }
  .phase-tab-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; font-size:.65rem;
    background: rgba(59,36,24,.1); color:inherit;
  }
  .phase-tab.active{
    background: var(--phase-color, var(--choco)); color: var(--white);
    border-color: var(--phase-color, var(--choco));
  }
  .phase-tab.active .phase-tab-num{ background: rgba(255,255,255,.25); }

  .phases-progress-track{ margin-top:10px; height:2px; background: rgba(59,36,24,.1); border-radius:2px; overflow:hidden; }
  .phases-progress-fill{
    height:100%; width:0%; border-radius:2px;
    background: linear-gradient(90deg, var(--phase-1), var(--phase-2), var(--phase-3));
    transition: width .2s linear;
  }
  .about-inner{ grid-template-columns: 1fr; }
  .about-visual{ max-width: 360px; margin: 0 auto; }
  .lead-magnet{ padding: 48px 0; }
  .lead-magnet-copy h2{ font-size: 1.3rem; }
  .lead-magnet-form{ flex-direction:column; max-width:none; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap: 14px; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; gap: 10px; }
}

@media (max-width: 1040px){
  .main-nav{
    position:absolute; top:78px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background: var(--cream); border-bottom:1px solid rgba(59,36,24,.08);
    max-height:0; overflow:hidden; transition: max-height .35s var(--ease);
  }
  .main-nav.open{ max-height: 420px; }
  .main-nav a{ width:100%; padding: 16px 28px; border-top: 1px solid rgba(59,36,24,.06); }
  .main-nav a.btn{ margin: 16px 28px; width:calc(100% - 56px); }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{ display:block; width:100%; height:2px; background: var(--choco); transition: transform .3s, opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .qualify-grid{ grid-template-columns: 1fr; }
  .case-card{ width:260px; }
  .cases-arrow{ width:44px; height:44px; }
  .cases-arrow--prev{ left: 6px; }
  .cases-arrow--next{ right: 6px; }
  .services, .video-feature, .about, .testimonials, .final-cta, .qualify, .faq{ padding: 76px 0; }
}

@media (prefers-reduced-motion: reduce){
  .grid-texture, .hero-visual, .phase-nav-dot::after, .final-cta .btn-yellow,
  .logos-track, .btn-yellow, .coffee-steam::before, .coffee-steam::after,
  .hero-in, .shimmer{
    animation: none !important;
  }
  .hero-visual, .hero-in{ opacity:1 !important; }
  .shimmer{ background-position: 0 0 !important; }
  .reveal, .qualify-card li{ transition-duration: .01ms !important; }
}