/* SaboreOH! — Landing B2B distribuidores */

@font-face{
  font-family: 'Lonely Cake EON';
  src: url('../fonts/LonelyCakeEON-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* SaboreOH! Design System — v.alpha — paleta oficial de marca (manual de marca) */
  --yellow: #F9C800;
  --orange-light: #FEA406;
  --orange: #FF6A00;
  --red: #B90008;
  --maroon: #540A06;
  --red-gradient-core: #FF0303;
  --red-gradient-edge: #9B0303;

  /* Roles semánticos de marca */
  --primary: var(--red);
  --primary-deep: var(--maroon);
  --primary-soft: #F9D6D4;
  --secondary: var(--yellow);
  --secondary-soft: #FEF4CC;
  --accent: var(--orange);
  --accent-light: var(--orange-light);
  --accent-soft: #FEE7C6;

  /* Base / superficies */
  --canvas: #FFFFFF;
  --canvas-cream: #FFFBF2;
  --canvas-soft: #FFF3DA;
  --hairline: #F0E1C4;
  --hairline-strong: #E0C89A;

  /* Texto — el bordó de marca hace de "ink" */
  --ink: var(--maroon);
  --body: #27221E;
  --mute: #A98A78;
  --on-primary: #FFFFFF;
  --on-dark: #FFF6E6;
  --dark: #2B0805;

  /* Semánticos (formulario de leads) */
  --success: #3C9F5C;
  --success-soft: #DFF4E5;
  --error: #C81E1E;
  --error-soft: #FBE1DF;
  --link: var(--red);

  /* Degradados oficiales del manual */
  --gradient-linear: linear-gradient(135deg, var(--gradient-linear-start), var(--gradient-linear-end));
  --gradient-linear-start: var(--yellow);
  --gradient-linear-end: var(--orange-light);
  --gradient-radial: radial-gradient(circle, var(--gradient-radial-core), var(--gradient-radial-edge));
  --gradient-radial-core: var(--red-gradient-core);
  --gradient-radial-edge: var(--red-gradient-edge);

  /* Acentos por sabor (packaging Flow Pack / Mini) */
  --flavor-vainilla: var(--yellow);
  --flavor-chocolate: #57026B;
  --flavor-chip-chocolate: #004593;
  --flavor-acarameladas: #0086BB;

  /* Alias de compatibilidad con nombres previos usados en el resto del CSS */
  --cream: var(--canvas-cream);
  --ink-soft: var(--body);
  --white: var(--canvas);

  --radius: 20px;
  --container: 1200px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'effra', sans-serif;
  color: var(--ink);
  background: var(--canvas-soft);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family:'Lonely Cake EON', sans-serif; margin:0 0 .5em; line-height:1.1; }
h2{ color: #27221E; font-size: clamp(1.75rem, 4vw, 48px); }
p{ margin:0 0 1em; color: var(--ink-soft); line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Cursor personalizado: galletita + rastro de migas (solo dispositivos con mouse). La flecha nativa se mantiene visible. */
.cookie-cursor{
  position: fixed; top:0; left:0; width: 40px; height:40px; pointer-events:none; z-index: 9999;
  opacity:0; transition: opacity .25s ease; will-change: transform;
}
.cookie-cursor.is-visible{ opacity:1; }
.cookie-cursor img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 6px 10px rgba(84,10,6,.35)); }
.crumb-trail{ position: fixed; inset:0; pointer-events:none; z-index:9998; }
.crumb{
  position:absolute; top:0; left:0;
  opacity:0; transition: opacity .25s ease; will-change: transform, opacity;
}

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

/* Buttons — hover unificado: un único efecto en todos los botones, un glow radial que
   sigue al cursor (posicionado con --glow-x/--glow-y, seteadas por JS en mousemove) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 1rem 1.75rem; border-radius: 999px; font-weight:500; font-family:'effra',sans-serif;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition: transform .2s ease, box-shadow .2s ease, color .3s ease, border-color .3s ease;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background: radial-gradient(circle 90px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(249,200,0,.55), transparent 70%);
  opacity:0; transition: opacity .35s ease;
}
.btn:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .btn::after{ transition:none; } }

.btn--primary{ background: var(--red); color:#fff; box-shadow: 0 10px 24px -8px rgba(185,0,8,.5); }

.btn--outline{ border-color: var(--red); color: var(--red); background:transparent; }

.btn--outline-light{ border-color: rgba(255,255,255,.7); color:#fff; background:transparent; }

.btn--accent{ background: var(--yellow); color: var(--ink); }

.btn--dark{ background: var(--ink); color:#fff; }

.btn--sm{ padding:.65rem 1.25rem; font-size:.9rem; }
.btn--lg{ padding:1.15rem 2.25rem; font-size:1.05rem; }

/* Navbar — flotante, despegada de los bordes, sobre el hero. Transparente al cargar;
   al scrollear se vuelve blanca sin perder la forma de cápsula redondeada. */
.navbar{
  position: fixed; top: 16px; left:0; right:0; z-index: 60;
  padding: 0 clamp(14px, 2.4vw, 28px); background: transparent; pointer-events:none;
}
.navbar__inner{
  pointer-events:auto; max-width: 1420px; margin: 0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:14px; border-radius: 999px;
  padding: 10px 10px 10px clamp(18px, 2.4vw, 30px); background: transparent;
  box-shadow: 0 10px 34px rgba(84,10,6,0);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.navbar.navbar--scrolled .navbar__inner{
  background: var(--cream); box-shadow: 0 10px 34px rgba(84,10,6,.14);
}
.navbar__logo{ display:inline-flex; align-items:center; }
.navbar__logo-img{ height: 50px; width:auto; }

/* Hero — fondo tipo "shader" (degradé de marca en movimiento lento), título cómic protagonista, fotos "sticker" sangrando de los bordes */
.hero{
  position: relative; overflow:hidden;
  padding: clamp(120px, 15vh, 160px) 0 2.2rem;
  background: var(--red);
  text-align: center;
}
.hero__shader{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.hero__shader-fallback{
  position:absolute; inset:-25%; display:block;
  background:
    radial-gradient(circle at 22% 28%, var(--yellow) 0%, transparent 52%),
    radial-gradient(circle at 78% 18%, var(--orange) 0%, transparent 50%),
    radial-gradient(circle at 45% 85%, var(--red) 0%, transparent 60%),
    linear-gradient(160deg, var(--red) 0%, var(--orange) 65%, var(--yellow) 130%);
  filter: blur(70px) saturate(1.25);
  animation: hero-shader-drift 20s ease-in-out infinite alternate;
}
.hero__shader-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
@keyframes hero-shader-drift{
  0%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  100%{ transform: translate3d(-3%, 4%, 0) scale(1.12) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce){ .hero__shader-fallback{ animation: none; } }
.hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero__title{ font-size: clamp(2.6rem, 7vw, 5.4rem); color:#fff; max-width: 16ch; margin-bottom: .4em; }
.hero__title em{ font-style:italic; color: var(--yellow); }
.hero__subtitle{ font-size: clamp(1rem, 2vw, 1.15rem); max-width: 53ch; color: rgba(255,255,255,.95); margin: 0 0 3rem; }
p.hero__subtitle:first-of-type{ margin-bottom: 0; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.hero__ctas .btn--accent::after{ background: radial-gradient(circle 90px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,106,0,.55), transparent 70%); }
.hero__incentive-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(1rem, 4vw, 2.5rem);
  margin-top: 2.25rem; color: rgba(255,255,255,.92); font-size:.95rem; font-weight:400;
}
.hero__incentive-dot{ opacity:.6; }

.hero__sticker{
  position:absolute; z-index:1; height: 440px; width:auto; max-width: 34vw; object-fit:cover;
  border-radius: 28px; box-shadow: 0 20px 40px -14px rgba(84,10,6,.4);
  transform: rotate(var(--rot, 0deg));
}
.hero__sticker--left{ top: 8%; left: -6%; --rot: -6deg; display:none; }
.hero__sticker--right{ top: 24%; right: -10%; --rot: 6deg; display:none; }

.hero__sticker-glow{
  position:absolute; z-index:0; width: 420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,199,44,.55) 0%, rgba(255,199,44,0) 70%);
  filter: blur(10px); display:none;
  animation: hero-glow-pulse 4s ease-in-out infinite;
}
.hero__sticker-glow--left{ top: -4%; left: -10%; }
.hero__sticker-glow--right{ top: 2%; right: -10%; animation-delay: 1.4s; }
@keyframes hero-glow-pulse{
  0%, 100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:.9; transform: scale(1.12); }
}

@media (min-width: 700px){
  .hero__sticker{ display:block; }
  .hero__sticker-glow{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  .hero__sticker-glow{ animation: none; }
}

/* Hero marquee — cinta de sabores que recorre el pie del hero (import Claude Design) */
.hero__marquee{
  position: relative; z-index: 2; margin: clamp(2.5rem, 7vh, 5rem) calc(50% - 50vw) -1.5rem;
  background: var(--yellow); transform: rotate(-1deg); padding: .85rem 0; overflow: hidden;
}
.hero__marquee-track{ display:flex; width:max-content; animation: soh-marquee 30s linear infinite; }
.hero__marquee-set{
  display:flex; align-items:center; gap: 1.6rem; padding-right: 1.6rem;
  font-family:'Lonely Cake EON', sans-serif; font-size: 1.3rem; color: var(--ink);
}
.hero__marquee-dot{ color: var(--orange); font-family:'effra',sans-serif; font-weight:700; }
@keyframes soh-marquee{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .hero__marquee-track{ animation: none; } }

/* Trust — respaldo institucional de Trigal: stats + cadena "de la semilla al paquete" */
.trust{ padding: 6rem 0; background: var(--canvas-soft); }
.trust__inner{ display:grid; gap: 3rem; grid-template-columns: 1fr; align-items:start; }
@media (min-width: 900px){ .trust__inner{ grid-template-columns: 1fr 1fr; } }
.trust__copy h2{ font-size: clamp(1.75rem, 4vw, 48px); }
.trust__copy p{ margin: 0; }
.trust__backing{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; margin-top: 2rem; }
.trust__backing-label{ font-size:.85rem; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.trust__backing-logo{ height: 42px; width:auto; }

.trust__side{ display:flex; flex-direction:column; height: stretch; }
.trust__image{ border-radius: var(--radius); overflow:hidden; background: var(--canvas-soft); height: 100%; }
.trust__image img{ width:100%; display:block; }
@media (min-width: 700px){
  .trust__image img{ object-fit: cover; height: stretch; }
}

/* Cadena "de la semilla al paquete" — roadmap horizontal con línea conectora, ícono e hito por etapa */
.trust__chain{
  position:relative; list-style:none; margin: 5rem 0 0; padding:0;
  display:grid; grid-template-columns: 1fr; gap: 2.5rem; text-align:center;
}
@media (min-width: 700px){
  .trust__chain{ grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
  .trust__chain::before{
    content:''; position:absolute; top:26px; left: calc(12.5% + 4px); right: calc(12.5% + 4px);
    height:1px; background: #fea40659; z-index:0;
  }
}
.trust__chain-step{ position:relative; z-index:1; }
.trust__chain-icon{
  width:52px; height:52px; margin:0 auto .9rem; border-radius:50%;
  background: var(--orange-light); color: var(--canvas-soft);
  display:flex; align-items:center; justify-content:center;
  animation: chain-icon-glow 3.2s ease-in-out infinite;
}
.trust__chain-step:nth-child(2) .trust__chain-icon{ animation-delay: .5s; }
.trust__chain-step:nth-child(3) .trust__chain-icon{ animation-delay: 1s; }
.trust__chain-step:nth-child(4) .trust__chain-icon{ animation-delay: 1.5s; }
@keyframes chain-icon-glow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(254,164,6,.45); }
  50%{ box-shadow: 0 0 18px 6px rgba(254,164,6,.45); }
}
@media (prefers-reduced-motion: reduce){ .trust__chain-icon{ animation:none; } }
.trust__chain-num{
  display:inline-block; background: var(--canvas-cream); border: 1px solid rgba(84, 10, 6, .04);
  border-radius:999px; padding:.3rem .9rem; font-size:.8rem; font-weight:700; color: var(--orange); margin-bottom:.7rem;
}
.trust__chain-step h3{ font-size:1.1rem; margin:0 0 .4rem; color: var(--ink-soft); }
.trust__chain-step p{ margin:0; color: var(--ink-soft); font-size:.9rem; }
.trust__chain-cta{ display:flex; margin: 3rem auto 0; width:max-content; }
.trust__chain-cta,
.benefits__cta,
.incentive__copy .btn--dark.btn--lg,
#testimonios .btn--primary{ max-height:54px; font-size:1em; font-weight:400; }

/* Products — pulled up over Pain, covering its lower half as you scroll (jojo/Milu-style overlap) */
.products{
  position: relative; z-index: 2;
  padding: 6rem 0;
  background: var(--white);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -20px 45px -30px rgba(84,10,6,.35);
}
.products h2{ font-size: clamp(1.75rem, 4vw, 48px); max-width: 20ch; }

/* Selector de sabor — panel interactivo (import Claude Design), color y foto cambian por sabor */
.products__tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 2rem 0 1.25rem; }
.products__tab{
  border: 1px solid rgba(84,10,6,.25); background: transparent; color: var(--ink);
  padding:.7rem 1.4rem; border-radius:999px; font-weight:700; font-size:.95rem; cursor:pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.products__tab:hover{ border-color: #c4b699; background: #fff3da; }
.products__tab.is-active{ background: #fff3da; border-color: #c4b699; color: var(--ink); }

.products__showcase{
  border-radius: var(--radius); overflow:hidden; background: var(--flavor-vainilla);
  transition: background-color .5s cubic-bezier(.4,0,.2,1);
  display:grid; grid-template-columns: 1fr; min-height: 420px;
}
@media (min-width: 720px){ .products__showcase{ grid-template-columns: 1fr 1fr; min-height: 460px; } }
.products__showcase-copy{
  padding: clamp(1.75rem, 4vw, 3rem); color:#fff; display:flex; flex-direction:column; justify-content:space-between;
}
.products__showcase-label{ font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.products__showcase-name{ font-family:'Lonely Cake EON', sans-serif; font-size: clamp(2.2rem,5vw,3.5rem); margin: .5rem 0 1rem; color:#fff; line-height:1; }
.products__showcase-desc{ font-size:1.1rem; line-height:1.55; max-width:36ch; color: rgba(255,255,255,.95); }
.products__showcase-formats-label{ font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin: 1.5rem 0 .75rem; }
.products__showcase-formats{ display:flex; flex-wrap:wrap; gap:.5rem; }
.products__showcase-formats span{ background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); padding:.5rem 1rem; border-radius:999px; font-weight:700; font-size:.9rem; }
.products__showcase-media{ position:relative; min-height:220px; background: rgba(0,0,0,.06); }

/* Vainilla usa el amarillo de marca: texto blanco pierde contraste ahí, se pasa a tinta oscura */
.products__showcase--light .products__showcase-copy,
.products__showcase--light .products__showcase-name{ color: var(--ink); }
.products__showcase--light .products__showcase-desc{ color: var(--body); }
.products__showcase--light .products__showcase-formats span{ background: rgba(84,10,6,.1); border-color: rgba(84,10,6,.28); color: var(--ink); }
.products__showcase-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.products__grid{ display:grid; gap: 1.5rem; margin: 2.5rem 0; grid-template-columns: 1fr; }
@media (min-width: 900px){ .products__grid{ grid-template-columns: repeat(3,1fr); } }
.product-card{
  position:relative; overflow:hidden;
  background: var(--canvas-cream); border: 1px solid rgba(84,10,6,.14); border-radius: var(--radius);
  padding: 1.75rem; transition: border-color .2s ease;
}
.product-card:hover{ border-color: rgba(84,10,6,.3); }
.product-card__reveal{
  position:absolute; right:-2rem; bottom:-1rem; width: 220px; max-width:42%;
  pointer-events:none; opacity:0; transform: translateY(45%);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.product-card:hover .product-card__reveal{ opacity:1; transform: translateY(0); }
.product-card__reveal.is-inview{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .product-card__reveal{ transition: opacity .2s ease; } }
.product-card--featured{ background: var(--secondary-soft); border-color: var(--yellow); }
.product-card h3{ font-size:1.2rem; color:#27221E; }
.product-card p{ margin:0 0 1.25rem; }
.product-card__cta{
  font-weight:700; color: var(--red);
  position:relative; display:inline-flex; align-items:center; vertical-align:top;
}
.product-card__cta-arrow{
  display:inline-block; margin-left:.35rem; transition: transform .4s cubic-bezier(.65,0,.35,1), opacity .4s cubic-bezier(.65,0,.35,1);
}
.product-card__cta:hover .product-card__cta-arrow{
  animation: cta-arrow-slide .6s cubic-bezier(.65,0,.35,1);
}
@keyframes cta-arrow-slide{
  0%{ transform: translateX(0); opacity:1; }
  49%{ transform: translateX(10px); opacity:0; }
  50%{ transform: translateX(-10px); opacity:0; }
  100%{ transform: translateX(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .product-card__cta:hover .product-card__cta-arrow{ animation:none; } }

/* Benefits — "Lo que ganás cuando entrás como distribuidor": panel destacado (bordó, nunca negro) + 4 tarjetas */
.benefits{ position:relative; padding: 6rem 0; }
.benefits::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url('../images/patron-2.webp') repeat center; opacity:.08;
}
.benefits > .container{ position:relative; z-index:1; }
.benefits h2{ font-size: clamp(1.75rem, 4vw, 48px); max-width: 20ch; margin-bottom: 2.5rem; }
.benefits__grid{ display:grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px){ .benefits__grid{ grid-template-columns: repeat(4,1fr); align-items:stretch; } }
.benefits__cta{ display:flex; margin: 2.5rem auto 0; width:max-content; }
.benefits__panel{
  background: var(--canvas-cream);
  border: 1px solid rgba(84,10,6,.14); border-radius: var(--radius); padding: 1.75rem;
  display:flex; flex-direction:column; gap:.75rem;
  position:relative; overflow:hidden; isolation:isolate;
}
.benefits__panel::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background: radial-gradient(circle 160px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,106,0,.16), transparent 70%);
  opacity:0; transition: opacity .35s ease;
}
.benefits__panel:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .benefits__panel::after{ transition:none; } }
.benefits__panel h3{ font-size:1.15rem; color:#27221E; margin:0; }
.benefits__panel p{ margin:0; }
.benefits__panel--highlight{
  grid-column: 1 / -1; background: var(--maroon); border-color: var(--maroon); color:#fff;
  padding: 2.5rem; display:grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 700px){ .benefits__panel--highlight{ grid-template-columns: 1.4fr 1fr; align-items:end; } }
.benefits__panel--highlight h3{ font-size: clamp(1.5rem,3vw,2rem); color:#fff; }
.benefits__panel--highlight p{ color: rgba(255,255,255,.8); }
.benefits__panel-note{
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 1rem; font-size:.85rem; color: rgba(255,255,255,.65);
}
@media (min-width: 700px){ .benefits__panel-note{ border-top:none; border-left: 1px solid rgba(255,255,255,.2); padding-top:0; padding-left: 1.25rem; } }
.benefits__panel--accent{ background: var(--yellow); border-color: var(--yellow); }
.benefits__panel--accent p{ color: rgba(39,34,30,.75); }
.benefits__stack{ display:flex; flex-direction:column; gap:1.25rem; }
.benefits__stack .benefits__panel{ flex:1; }
.benefits__panel--list{ gap:1rem; }
@media (min-width: 900px){
  .benefits__stack{ grid-column: span 2; }
  .benefits__panel--list{ grid-column: span 2; }
}
.benefits__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.benefits__list li{ display:flex; gap:.85rem; align-items:flex-start; }
.benefits__list-icon{
  flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--orange-light); color:#fff;
}
.benefits__list strong{ display:block; font-size:.95rem; color:#27221E; line-height: 1.4em; }
.benefits__list p{ margin:.15rem 0 0; font-size:.9rem; }

/* Incentivo comercial — explícito y sin filtro, banner 2 columnas con foto de producto */
.incentive{
  position:relative; overflow:hidden; height:100vh; display:flex; align-items:center;
  padding: 4.5rem 0; color:#fff; background: var(--orange);
}
.incentive__shader{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.incentive__shader-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.incentive__inner{ position:relative; z-index:3; display:grid; gap: 2.5rem; grid-template-columns: 1fr; align-items:center; width:100%; }
@media (min-width: 800px){ .incentive__inner{ grid-template-columns: 1.15fr 1fr; } }
.incentive__copy h2{ color:#fff; font-size: clamp(1.75rem, 5vw, 56px); max-width: 18ch; margin-bottom: 1rem; }
.incentive__note{ color: rgba(255,255,255,.92); margin-bottom:1.75rem; max-width:52ch; }
.incentive__media{ border-radius: var(--radius); overflow:hidden; max-height: 380px; margin: 0 auto; display:flex; }
.incentive__media img{ width:100%; display:block; object-fit:cover; }

/* Simulador de rentabilidad — "¿Cuánto te rinde SaboreOH!?", la funcionalidad exclusiva del brief.
   Calcula todo en unidades (paquetes): no hay lista de precios confirmada todavía, así que no se
   inventa ninguna cifra en pesos (ver brief.md / README, sección de decisiones). */
.simulator{ padding: 6rem 0; background: var(--canvas-soft); }
.simulator__inner{ max-width: 1100px; margin:0 auto; text-align:center; }
.simulator__lead{ font-size:1.05rem; margin: 0 auto 2.5rem; max-width:56ch; }
.simulator__grid{ display:grid; gap: 1.5rem; grid-template-columns: 1fr; text-align:left; }
@media (min-width: 800px){ .simulator__grid{ grid-template-columns: 1.05fr 1fr; align-items:start; } }

.simulator__panel{
  background: var(--canvas); border: 1px solid rgba(84,10,6,.14); border-radius: 20px;
  padding: 2rem;
}
.simulator__question{ margin-bottom: 1.75rem; }
.simulator__question:last-child{ margin-bottom:0; }
.simulator__question-title{ font-weight:700; font-size:1rem; color: var(--ink); margin-bottom:.75rem; }
.simulator__btn-group{ display:flex; flex-wrap:wrap; gap:.5rem; }
.simulator__btn{
  border: 1px solid rgba(84,10,6,.22); background: transparent; color: var(--ink);
  padding:.6rem 1.1rem; border-radius:999px; font-weight:600; font-size:.9rem; cursor:pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.simulator__btn:hover{ border-color: var(--red); }
.simulator__btn.is-active{ background: var(--red); border-color: var(--red); color:#fff; }

.simulator__slider-value{ font-family:'Lonely Cake EON', sans-serif; font-size:1.7rem; color: var(--red); margin-bottom:.5rem; }
.simulator__range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background: rgba(84,10,6,.15); outline:none;
}
.simulator__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background: var(--red);
  border:4px solid var(--canvas); box-shadow: 0 4px 12px rgba(185,0,8,.4); cursor:grab;
}
.simulator__range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background: var(--red); border:4px solid var(--canvas); cursor:grab; }
.simulator__slider-hints{ display:flex; justify-content:space-between; font-size:.8rem; color: var(--ink-soft); margin-top:.4rem; }

.simulator__result{
  background: var(--maroon); color:#fff;
  border-radius: 20px; padding: 2rem; text-align:left;
}
.simulator__result-label{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.7); }
.simulator__result-block{ margin-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.simulator__result-block:last-of-type{ border-bottom:none; }
.simulator__result-sublabel{ font-size:.95rem; color: rgba(255,255,255,.8); }
.simulator__result-value{ font-family:'Lonely Cake EON', sans-serif; font-size: clamp(1.8rem,3.6vw,2.4rem); margin-top:.25rem; }
.simulator__result-value span{ font-size:.5em; color: rgba(255,255,255,.7); font-family:'effra',sans-serif; font-weight:700; }
.simulator__result-value--accent{ color: var(--yellow); }
.simulator__bar{ height:8px; border-radius:99px; background: rgba(255,255,255,.16); margin-top:.9rem; overflow:hidden; }
.simulator__bar-fill{ height:100%; background: var(--yellow); border-radius:99px; transition: width .5s cubic-bezier(.4,0,.2,1); width:0%; }
.simulator__result-hint{ display:block; font-size:.85rem; color: rgba(255,255,255,.7); margin-top:.5rem; }
.simulator__disclaimer{ font-size:.8rem; color: rgba(255,255,255,.65); margin: 1.5rem 0 1.25rem; }
.simulator__cta{ width:100%; text-align:center; }

/* Testimonials — calificación real de Google + casos B2B en desarrollo (sin citas inventadas) */
.testimonials{ padding: 6rem 0; text-align:center; background: var(--canvas-cream); }

.testimonials__header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap: 1.5rem; margin-bottom: 2.5rem; text-align:left;
}
.testimonials__header h2{
  font-family:'Lonely Cake EON', sans-serif; font-weight:800; font-size: clamp(1.75rem, 4vw, 48px);
  margin:0; max-width: 20ch;
}

.testimonials__gmb{
  display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0;
  padding:.85rem 1.25rem; border-radius:999px; background: var(--canvas-cream);
  border:1px solid rgba(84,10,6,.14);
}
.testimonials__gmb-score{ font-family:'effra',sans-serif; font-weight:800; font-size:1.3rem; color: var(--ink); }
.testimonials__gmb-stars{ color: var(--orange-light); letter-spacing:.08em; font-size:.95rem; }
.testimonials__gmb-label{ font-size:.85rem; font-weight:400; color: var(--ink-soft); }

/* Rotador de casos B2B — mismo componente animado que antes (avatar + cita + tabs),
   adaptado a "casos en desarrollo": logo real de cada empresa (no una foto de persona) en un
   badge rectangular con object-fit:contain, para no recortar wordmarks como el de Mariano Max.
   Fila de 5★ debajo del stage por pedido explícito del cliente (decisión 28/07/2026): la
   calificación real de Google sigue mostrándose arriba, en .testimonials__gmb. */
.testimonial-rotator{ margin: 1rem auto 2rem; max-width: 640px; }

.testimonial-rotator__stage{ position:relative; height: 110px; margin-bottom: .5rem; }
.testimonial-rotator__glow{
  position:absolute; top:-50px; left:50%; width:280px; height:280px; transform: translateX(-50%);
  border-radius:50%; z-index:0; pointer-events:none;
  background: radial-gradient(circle, rgb(185 85 0 / 45%) 0%, rgb(255 106 0 / 11%) 45%, rgba(255, 106, 0, 0) 75%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.testimonial-rotator__avatars{ position:relative; height:100%; z-index:1; }
.testimonial-rotator__avatar{
  position:absolute; top:0; left:50%; width:85px; height:85px; margin-left:-42.5px;
  object-fit: contain; padding:.6rem; box-sizing:border-box;
  border-radius:100px; box-shadow: 0 8px 20px -6px rgba(84,10,6,.3);
  background: var(--canvas);
  opacity:0; transform: rotate(-55deg); pointer-events:none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.testimonial-rotator__avatar.is-active{ opacity:1; transform: rotate(0deg); pointer-events:auto; }

.testimonial-rotator__stars-wrap{ position:relative; height: 1.2rem; }
.testimonial-rotator__stars{
  position:absolute; inset:0; margin:0; text-align:center; color: var(--orange-light);
  letter-spacing:.08em; font-size:.95rem; opacity:0; transition: opacity .45s ease;
}
.testimonial-rotator__stars.is-active{ position:relative; opacity:1; }

.testimonial-rotator__quote-wrap{ position:relative; min-height: 4.5rem; margin: 1rem 0 1.75rem; }
.testimonial-rotator__quote{
  position:absolute; inset: 0 0 auto 0; margin:0; font-size: 1.15rem; font-weight:700; color: var(--ink);
  opacity:0; transform: translateX(16px); transition: opacity .45s ease, transform .45s ease;
  quotes: '“' '”';
}
.testimonial-rotator__quote::before{ content: open-quote; }
.testimonial-rotator__quote::after{ content: close-quote; }
.testimonial-rotator__quote.is-active{ position:relative; opacity:1; transform: translateX(0); }

.testimonial-rotator__tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.testimonial-rotator__tab{
  border:none; border-radius:999px; padding:.55rem 1.1rem; font-size:.8rem; font-family:'effra',sans-serif;
  background: var(--canvas); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(84,10,6,.3); cursor:pointer;
  transition: background-color .15s ease, color .15s ease;
}
.testimonial-rotator__tab strong{ font-weight:700; }
.testimonial-rotator__tab span{ opacity:.65; }
.testimonial-rotator__tab.is-active{ background: linear-gradient(135deg, var(--yellow), var(--orange)); color:#fff; }
.testimonial-rotator__tab.is-active span{ opacity:.85; }

@media (prefers-reduced-motion: reduce){
  .testimonial-rotator__avatar, .testimonial-rotator__quote{ transition: opacity .2s ease; transform:none; }
}

/* Coverage — representantes activos en 15 provincias, y sumando */
.coverage{ padding: 6rem 0 6rem; }
.coverage__inner{ display:grid; gap: 2.5rem; grid-template-columns: 1fr; align-items:center; }
@media (min-width: 800px){ .coverage__inner{ grid-template-columns: 1fr 1.1fr; } }
.coverage__media{ border-radius: var(--radius); overflow:hidden; }
.coverage__media img{ width:100%; display:block; height: 420px; object-fit: cover; object-position: bottom; }
.coverage h2{ font-size: clamp(1.75rem, 4vw, 48px); max-width:16ch; margin: 1rem 0 1.25rem; }
.coverage__copy p{ max-width:54ch; margin-bottom: 1.5rem; }
.coverage__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; }
.coverage__chips li{
  border: 1px solid rgba(84,10,6,.2); padding:.5rem 1rem; border-radius:999px; font-size:.9rem; font-weight:400;
}

/* FAQ */
.faq{ padding: 6rem 0; background: var(--canvas-soft); }
.faq__inner{ display:grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 900px){ .faq__inner{ grid-template-columns: .8fr 1fr; } }
.faq__intro h2{ font-size: clamp(1.75rem, 4vw, 48px); margin-bottom:1.5rem; }
.faq__intro img{ border-radius: var(--radius); margin-top: 120px; max-width: 80%; max-height: 400px; }
.faq__content{ padding-top: 120px; }
.faq__lead{ font-size:1.1rem; margin-bottom:1.5rem; }
.accordion__item{ position:relative; border-bottom:1px solid rgba(84,10,6,.15); }
.accordion__item::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; z-index:1;
  background: linear-gradient(90deg, #FF6A00, var(--red)); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.accordion__item:hover::after{ transform: scaleX(1); }
.accordion__question{
  width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:1rem;
  background:none; border:none; padding: 1.25rem 0;
  font-family:'effra',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); cursor:pointer;
  transition: color .3s ease;
}
.accordion__question:hover{ color: var(--primary-deep); }
.accordion__icon{ flex-shrink:0; color: var(--red); transition: transform .3s ease; }
.accordion__item.is-open .accordion__icon{ transform: rotate(180deg); }
.accordion__answer{ overflow:hidden; max-height:0; transition: max-height .35s ease; }
.accordion__answer p{ margin:0; padding-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce){
  .accordion__item::after{ transition: none; }
  .accordion__answer{ transition: none; }
}

/* Contact — panel de info a la izquierda (degradé de marca) y "nota de pedido" con el
   formulario propio a la derecha (mismo lenguaje de contorno + sombra plana del resto del sitio).
   Sin GHL: el formulario es HTML propio, con confirmación simulada del lado del cliente. */
.contact{ position:relative; padding: 6rem 0; background: #27221E; overflow:hidden; }
.contact h2{ font-size: clamp(1.75rem, 4vw, 48px); }
.contact__grid{ position:relative; z-index:1; display:grid; gap: 3rem; grid-template-columns: 1fr; align-items:start; }
@media (min-width: 900px){ .contact__grid{ grid-template-columns: 1fr 1.2fr; } }

.contact__deco{
  position:absolute; z-index:0; left: -6%; bottom: -12%; width: clamp(200px, 39vw, 500px);
  height:auto; pointer-events:none; user-select:none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
  display:none;
}
@media (min-width: 700px){ .contact__deco{ display:block; } }

.contact__info{ color:#fff; padding: 0; }
.contact__info h2{ color:#fff; }
.contact__info p{ color: rgba(255,255,255,.7); max-width:40ch; }
@media (min-width: 1025px){
  .contact__info{ min-height: 600px; }
  .contact__panel{ min-height: 535px; }
}
.contact__details{ display:grid; gap: 1rem; margin-top: 1.5rem; }
.contact__details > div{ display:flex; gap:.75rem; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1rem; }
.contact__details dt{ min-width: 90px; color: rgba(255,255,255,.55); font-size:.9rem; }
.contact__details dd{ margin:0; color: rgba(255,255,255,.95); }
.contact__details a{ color: var(--orange); }

.contact__panel{
  position:relative; width:100%; background: #FBF6EE; padding: 2.5rem; border-radius: 18px;
  border: 1px solid rgba(84,10,6,.14);
}
.contact__embed{
  display:block; width:100%; border:none; border-radius:10px; background:transparent;
}


/* Footer — logo protagonista grande, degradé de marca de fondo */
.footer{ background: linear-gradient(180deg, var(--orange-light), var(--yellow)); color: rgba(255,255,255,.7); padding: 2.5rem 0 2rem; overflow:hidden; border-radius: 40px 40px 0 0; }
.footer__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer__link{ background:none; border:none; color: rgba(255,255,255,.7); cursor:pointer; font: inherit; padding:0; }
.footer__link:hover{ color:#fff; }
.footer__social{ display:flex; gap:1.25rem; }
.footer__social a{ color: rgba(255,255,255,.7); display:inline-flex; transition: color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.footer__social a:hover{ color:#fff; transform: translateY(-5px); }

.footer__brand{ display:block; padding: 0 24px; text-align:center; }
.footer__brand-img{ height: clamp(80px, 24vw, 280px); width:auto; margin: 0 auto; }
@media (min-width: 700px){
  .footer__brand-img{ margin-bottom: -32px; }
}

.footer__bottom{ display:flex; }
.footer__copy{ width:100%; font-size:.85rem; margin:0; text-align:center; color: #fafafaf2; }
.footer__copy a{
  color: rgba(255,255,255,.85); text-decoration: none; position:relative; display:inline-block;
}
.footer__copy a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background: currentColor;
  transition: right .35s cubic-bezier(.22,1,.36,1);
}
.footer__copy a:hover{ color:#fff; }
.footer__copy a:hover::after{ right:0; }

/* Privacy Modal */
.modal{ position:fixed; inset:0; z-index:100; display:none; }
.modal[data-open]{ display:block; }
.modal__overlay{ position:absolute; inset:0; background: rgba(84,10,6,.6); }
.modal__dialog{
  position:relative; max-width:640px; margin: 5vh auto; max-height:90vh; overflow-y:auto;
  background: var(--white); border-radius: var(--radius); padding: 2.5rem; z-index:1;
}
.modal__close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.75rem; cursor:pointer; color: var(--ink-soft); }
.modal__body h3{ font-size:1.05rem; margin-top:1.5rem; }

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

/* Ajustes mobile */
@media (max-width: 699px){
  .hero{ padding-top:320px; }
  .hero__sticker{ display:block; max-width:46vw; height:260px; }
  .hero__sticker--left{ top:4%; left:-4%; }
  .hero__sticker--right{ top:2%; right:-5%; }
  .hero__sticker-glow{ display:block; }

  .trust__chain-step{
    display:grid; grid-template-columns: auto 1fr; column-gap:.75rem; row-gap:.4rem;
    grid-template-areas: "icon h3" "text text";
    align-items:center; text-align:left;
  }
  .trust__chain-icon{ grid-area:icon; margin:0; width:40px; height:40px; }
  .trust__chain-num{ display:none; }
  .trust__chain-step h3{ grid-area:h3; margin:0; }
  .trust__chain-step p{ grid-area:text; margin:0; }

  .incentive{ height:auto; }
  .incentive__shader-canvas{ height:100% !important; }
  .incentive__media{ max-height: 260px; }

  .coverage__media{ display:none; }
  .coverage h2{ max-width:none; }

  .coverage__media img{ height:280px; }

  .faq__inner{ display:flex; flex-direction:column; gap:0rem; }
  .faq__content{ order:2; padding-top:0; }
  .faq__intro{ display:contents; }
  .faq__intro h2{ order:1; }
  .faq__intro img{
    order:3; margin-top:80px; max-width:100%; max-height:none;
    height:280px; width:100%; object-fit:cover;
  }

  .footer__top{ flex-direction:column; margin-top:20px; margin-bottom:20px; }

  .contact__details{ display:none; }

  .testimonials{ padding-bottom:4rem; }
}