/* ============================================================
   WANA DESIGN SYSTEM v1.0 — TOKENS + LENGUAJE DE COMUNICACIÓN
   ============================================================ */
@font-face { font-family:'Nunito'; src:url('fonts/Nunito-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('fonts/Nunito-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Nunito'; src:url('fonts/Nunito-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Caveat'; src:url('fonts/Caveat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --cream:#efeee7;
  --white:#ffffff;
  --navy:#06262d;
  --orange:#ff9000;
  --orange-hover:#e68000;
  --orange-rgb:255,144,0;
  --ink-soft:#4a5f64;
  --line:#d4d3cd;
  --sh-sm:0 1px 3px rgba(6,38,45,.10);
  --sh-md:0 4px 12px rgba(6,38,45,.12);
  --sh-lg:0 8px 24px rgba(6,38,45,.14);
  --sh-glow:0 4px 20px rgba(var(--orange-rgb),.35);
  --maxw:1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito',system-ui,sans-serif;font-weight:400;
  background:var(--cream);color:var(--navy);
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px;}
::selection{background:rgba(var(--orange-rgb),.32);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Tipografía display (modo comunicación) ---------- */
.display{
  font-weight:900;text-transform:uppercase;line-height:1.02;
  letter-spacing:-.005em;
}
.display .o{color:var(--orange);}
.display .n{color:var(--navy);}
.display .c{color:var(--cream);}
.display .w{color:#fff;}
h1.display{font-size:clamp(40px,5.6vw,72px);}
h2.display{font-size:clamp(30px,3.6vw,48px);line-height:1.06;}
.lead{font-size:clamp(16.5px,1.4vw,19px);color:var(--ink-soft);line-height:1.65;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:20px;color:var(--navy);
}
.eyebrow .num{color:var(--orange);}
.eyebrow.on-dark{color:var(--cream);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:900;font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:none;
  border-radius:9999px;padding:17px 32px;min-height:54px;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease,color .18s ease;
}
.btn:active{transform:scale(.97);}
.btn .arr{transition:transform .18s ease;}
.btn:hover .arr{transform:translateX(4px);}
.btn-orange{background:var(--orange);color:var(--navy);}
.btn-orange:hover{background:var(--orange-hover);box-shadow:var(--sh-glow);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:#0b3a44;box-shadow:var(--sh-md);}
.btn-cream{background:var(--cream);color:var(--navy);}
.btn-cream:hover{background:#fff;box-shadow:var(--sh-md);}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--orange);color:var(--orange);}

/* ============================================================
   HEADER — crema, nav con separadores //
   ============================================================ */
.header{
  position:sticky;top:0;z-index:120;background:var(--cream);
  border-bottom:1.5px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.header.scrolled{border-color:var(--line);box-shadow:0 4px 18px rgba(6,38,45,.07);}
.header-in{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header .logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.header .logo img{width:auto;}
.header .logo .logo-word{height:32px;}
.nav{display:flex;align-items:center;}
.nav a{
  color:var(--navy);text-decoration:none;font-weight:900;font-size:15px;
  padding:6px 2px;transition:color .15s ease;
}
.nav a:hover{color:var(--orange);}
.nav .sep{color:var(--orange);font-weight:900;margin:0 14px;user-select:none;}
.header .btn{padding:12px 24px;min-height:44px;font-size:13px;}

.burger{
  display:none;background:none;border:none;cursor:pointer;
  width:46px;height:46px;border-radius:10px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{width:24px;height:3px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.mobile-menu{display:none;background:var(--cream);border-top:1.5px solid var(--line);padding:12px 28px 30px;}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;color:var(--navy);text-decoration:none;font-weight:900;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em;padding:15px 0;border-bottom:1.5px solid var(--line);
}
.mobile-menu a:active{color:var(--orange);}
.mobile-menu .btn{margin-top:20px;width:100%;border-bottom:none;}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:56px 0 88px;position:relative;}
.hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;
}
.hero-copy .wordmark{height:34px;width:auto;margin-bottom:30px;}
.hero-copy h1{margin-bottom:22px;}
.hero-copy .lead{max-width:520px;margin-bottom:34px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.quick-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:30px;
}
.quick-links a{color:var(--ink-soft);text-decoration:none;transition:color .15s ease;padding:2px 0;}
.quick-links a:hover{color:var(--orange);}
.quick-links .sep{color:var(--orange);margin:0 10px;}
.hero-proof{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--navy);}
.hero-proof .heart{color:var(--orange);font-size:18px;}
.hero-proof b{font-weight:900;}

/* Foto hero con stickers */
.hero-photo{position:relative;}
.hero-photo .ph{
  border-radius:28px;overflow:hidden;position:relative;
  box-shadow:0 18px 50px rgba(6,38,45,.18);
  aspect-ratio:.88;
}
.hero-photo .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);}
.grain::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.stk{
  position:absolute;display:inline-flex;align-items:center;
  padding:11px 18px;border-radius:12px;
  font-weight:700;font-size:clamp(13px,1.15vw,16px);
  box-shadow:0 8px 22px rgba(6,38,45,.22);
  white-space:nowrap;z-index:3;
  animation:floaty 6s ease-in-out infinite;
}
.stk .ast{
  position:absolute;top:-13px;font-size:24px;line-height:1;font-weight:900;
  transform:rotate(8deg);
}
.stk-orange{background:var(--orange);color:var(--navy);}
.stk-orange .ast{color:var(--navy);right:-8px;}
.stk-navy{background:var(--navy);color:var(--cream);}
.stk-navy .ast{color:var(--orange);right:-8px;}
.stk-cream{background:#f7ece2;color:var(--navy);}
.stk-cream .ast{color:var(--orange);right:-8px;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}50%{transform:translateY(-7px) rotate(var(--rot,0deg));}}
.stk1{top:9%;right:-14px;--rot:2deg;}
.stk2{top:44%;left:-26px;--rot:-3deg;animation-delay:1.2s;}
.stk3{bottom:8%;right:8%;--rot:-2deg;animation-delay:2.4s;}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--navy);overflow:hidden;padding:16px 0;}
.ticker-track{display:flex;width:max-content;animation:tick 40s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes tick{to{transform:translateX(-50%);}}
.tk{
  color:var(--cream);font-weight:900;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;
}
.tk::after{content:'//';color:var(--orange);margin:0 22px;}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{padding:96px 0;}
.section-white{background:var(--white);}
.section-navy{background:var(--navy);}
.shead{max-width:780px;margin-bottom:52px;}
.shead h2{margin-bottom:18px;}
.shead .lead{max-width:620px;}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease;}
.reveal.in{opacity:1;transform:none;}
.rd1{transition-delay:.08s;}.rd2{transition-delay:.16s;}.rd3{transition-delay:.24s;}

/* ============================================================
   01 · TIENDA
   ============================================================ */
.marquee{overflow:hidden;margin:0 calc(50% - 50vw) 56px;padding:8px 0 14px;}
.marquee-track{display:flex;gap:22px;width:max-content;animation:marq 48s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}
.pcard{
  width:216px;flex:none;background:var(--cream);
  border:1.5px solid var(--line);border-radius:18px;
  padding:14px;text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(var(--orange-rgb),.55);}
.pcard .pimg{
  height:150px;border-radius:12px;margin-bottom:12px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pcard .pimg img{max-height:136px;width:auto;object-fit:contain;}
.pcard .pcat{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);display:block;margin-bottom:3px;}
.pcard .pname{font-weight:700;font-size:14.5px;line-height:1.35;display:block;min-height:39px;}
.pcard .pprice{font-weight:900;font-size:15.5px;margin-top:7px;display:block;}

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:48px;}
.benefit{display:flex;gap:16px;align-items:flex-start;}
.benefit .bico{
  width:50px;height:50px;flex:none;border-radius:12px;
  background:rgba(var(--orange-rgb),.13);display:flex;align-items:center;justify-content:center;
}
.benefit .bico svg{width:24px;height:24px;stroke:var(--orange);}
.benefit strong{display:block;font-size:16.5px;font-weight:900;margin-bottom:2px;}
.benefit span{font-size:14.5px;color:var(--ink-soft);}

/* ============================================================
   02 · SERVICIOS
   ============================================================ */
.situations{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:52px;}
.sit{
  background:rgba(6,38,45,.06);border-radius:9999px;
  padding:10px 20px;font-size:14.5px;font-weight:700;
}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:52px;}
.ccard{
  background:var(--white);border-radius:22px;overflow:hidden;
  border:1.5px solid var(--line);box-shadow:var(--sh-sm);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.ccard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.ccard .cimg{position:relative;aspect-ratio:1.18;overflow:hidden;}
.ccard .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(.95);}
.ccard:hover .cimg img{transform:scale(1.045);}
.ccard .ctag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--orange);color:var(--navy);
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  border-radius:9999px;padding:7px 14px;box-shadow:0 4px 12px rgba(6,38,45,.22);
}
.ccard .cbody{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex-grow:1;}
.ccard h3{font-weight:900;font-size:21px;text-transform:uppercase;letter-spacing:.01em;}
.ccard p{font-size:14.5px;color:var(--ink-soft);flex-grow:1;}
.ccard .cfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.ccard .cprice{font-size:13px;font-weight:700;color:var(--ink-soft);}
.ccard .cprice b{font-weight:900;color:var(--navy);font-size:15px;}
.ccard .cgo{
  width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;
  transition:transform .18s ease,background .18s ease;
}
.ccard:hover .cgo{transform:translateX(4px);background:var(--orange-hover);}
.care-trust{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:44px;}
.ct-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;}
.ct-item svg{width:20px;height:20px;flex:none;}

/* ============================================================
   Bloque app — la reserva se hace desde la app
   ============================================================ */
.app-cta{
  background:var(--navy);border-radius:26px;padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.app-cta h3{color:#fff;font-weight:900;font-size:clamp(20px,2vw,26px);text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px;}
.app-cta h3 .o{color:var(--orange);}
.app-cta p{color:rgba(255,255,255,.75);font-size:15px;max-width:520px;}
.badges{display:flex;gap:14px;flex-wrap:wrap;flex:none;}
.badge{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--cream);color:var(--navy);border-radius:14px;
  padding:12px 22px;text-decoration:none;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease;
}
.badge:hover{background:#fff;box-shadow:var(--sh-glow);}
.badge:active{transform:scale(.97);}
.badge svg{width:24px;height:24px;fill:var(--navy);flex:none;}
.badge .bt{line-height:1.15;}
.badge .bt small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.65;}
.badge .bt b{font-size:15.5px;font-weight:900;}

/* ============================================================
   03 · DÓNDE LLEGAMOS (cobertura + pickup)
   ============================================================ */
.cov-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start;}
.checker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.checker input{
  flex:1;min-width:230px;border:1.5px solid var(--line);border-radius:9999px;
  padding:15px 24px;font:inherit;font-size:15.5px;background:var(--cream);color:var(--navy);
}
.checker input::placeholder{color:var(--ink-soft);opacity:.75;}
.checker input:focus{outline:3px solid var(--orange);outline-offset:2px;}
.cov-hours{font-size:14px;color:var(--ink-soft);margin-bottom:34px;display:flex;align-items:center;gap:8px;}
.zones{list-style:none;display:flex;flex-direction:column;gap:13px;}
.zone{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--cream);border:1.5px solid var(--line);border-radius:16px;padding:17px 21px;
}
.zone svg{width:21px;height:21px;stroke:var(--orange);flex:none;margin-top:2px;}
.zone strong{font-weight:900;font-size:15.5px;display:block;}
.zone span{font-size:14px;color:var(--ink-soft);}
.zone .soon{
  display:inline-block;background:var(--orange);color:var(--navy);
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  border-radius:9999px;padding:3px 10px;margin-left:8px;vertical-align:2px;
}
.zone-nacional{background:rgba(var(--orange-rgb),.12);border-color:rgba(var(--orange-rgb),.5);}
.pu-box{background:var(--navy);border-radius:24px;padding:34px 34px 38px;}
.pu-box h3{color:#fff;font-weight:900;font-size:20px;text-transform:uppercase;margin-bottom:6px;}
.pu-box h3 .o{color:var(--orange);}
.pu-box > p{color:rgba(255,255,255,.72);font-size:14.5px;margin-bottom:26px;}
.pu-card{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;}
.pu-card:last-of-type{padding-bottom:0;}
.pu-card strong{color:#fff;font-weight:900;font-size:16px;display:block;}
.pu-card .pu-addr{color:var(--orange);font-weight:700;font-size:14.5px;display:block;margin:3px 0 10px;}
.pu-hours{display:flex;flex-wrap:wrap;gap:8px;}
.pu-hours span{
  border:1.5px solid rgba(255,255,255,.3);color:var(--cream);
  font-size:12px;font-weight:700;border-radius:9999px;padding:5px 13px;
}

/* ============================================================
   04 · RESTAURANTES
   ============================================================ */
.resto-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.resto-photo{position:relative;}
.resto-photo .ph{
  border-radius:28px;overflow:hidden;position:relative;
  box-shadow:0 18px 50px rgba(6,38,45,.18);aspect-ratio:.92;
}
.resto-photo .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);}
.resto-proof{
  display:inline-flex;align-items:center;gap:9px;margin:22px 0 30px;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);
  background:rgba(6,38,45,.07);border-radius:9999px;padding:9px 18px;
}
.resto-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Tags de testimonios ---------- */
.testi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.testi-tag{
  display:inline-flex;background:rgba(var(--orange-rgb),.15);color:var(--navy);
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
  border-radius:9999px;padding:6px 13px;
}

/* ============================================================
   05 · CÓMO FUNCIONA (navy)
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:56px;}
.step{position:relative;}
.step .snum{
  font-size:clamp(52px,5vw,72px);font-weight:900;color:var(--orange);line-height:1;
  display:block;margin-bottom:16px;
}
.step h3{color:#fff;font-weight:900;font-size:20px;text-transform:uppercase;margin-bottom:8px;letter-spacing:.02em;}
.step p{color:rgba(255,255,255,.72);font-size:15px;max-width:300px;}

/* ============================================================
   UNA SOLA MARCA — stats
   ============================================================ */
.caveat-note{
  font-family:'Caveat',cursive;font-weight:700;font-size:clamp(28px,3vw,38px);
  color:var(--orange);display:inline-block;transform:rotate(-1.5deg);margin-bottom:44px;
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:52px;}
.stat{border-top:3px solid var(--orange);padding-top:18px;}
.stat .n{font-weight:900;font-size:clamp(34px,3.4vw,46px);line-height:1;display:block;color:var(--navy);}
.stat .l{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-top:8px;display:block;}
.why-chips{display:flex;flex-wrap:wrap;gap:12px;}
.why-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(6,38,45,.06);border-radius:9999px;
  padding:11px 20px;font-size:14px;font-weight:700;
}
.why-chip svg{width:17px;height:17px;stroke:var(--orange);flex:none;}

/* ============================================================
   04 · COMUNIDAD
   ============================================================ */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.testi{
  background:var(--white);border-radius:20px;padding:28px;
  border:1.5px solid var(--line);box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;gap:20px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.testi .stars{color:var(--orange);font-size:15px;letter-spacing:2px;}
.testi p{font-size:15px;flex-grow:1;}
.testi-who{display:flex;align-items:center;gap:14px;}
.testi-who img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2.5px solid var(--orange);}
.testi-who strong{font-size:15px;font-weight:900;display:block;}
.testi-who span{font-size:13px;color:var(--ink-soft);display:block;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px;}
.faq-item{border-bottom:1.5px solid var(--line);}
.faq-q{
  width:100%;background:none;border:none;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 4px;min-height:60px;
  font-weight:900;font-size:17px;color:var(--navy);
  transition:color .15s ease;
}
.faq-q:hover{color:var(--orange);}
.faq-q .chev{flex:none;width:22px;height:22px;stroke:var(--orange);transition:transform .25s ease;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 24px;color:var(--ink-soft);font-size:15.5px;max-width:680px;}

/* ============================================================
   SUMATE — banda naranja
   ============================================================ */
.band-orange{background:var(--orange);padding:88px 0;}
.band-orange .band-in{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:44px;
}
.band-orange h2{color:var(--navy);margin-bottom:14px;}
.band-orange p{color:var(--navy);font-weight:700;font-size:17px;max-width:540px;opacity:.88;}
.band-orange .proof{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);
  background:rgba(6,38,45,.1);border-radius:9999px;padding:9px 18px;
}

/* ============================================================
   CIERRE + FOOTER (navy)
   ============================================================ */
.closing{background:var(--navy);padding:110px 0 0;}
.closing-in{text-align:center;max-width:820px;margin:0 auto;padding:0 28px 96px;}
.closing h2{margin-bottom:18px;}
.closing-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.footer{border-top:1px solid rgba(255,255,255,.12);padding:64px 0 36px;color:rgba(255,255,255,.72);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px;}
.footer .wordmark{height:30px;width:auto;margin-bottom:18px;}
.footer p{font-size:14px;max-width:300px;}
.footer h4{color:#fff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px;}
.footer ul{list-style:none;}
.footer li{margin-bottom:10px;}
.footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px;transition:color .15s ease;}
.footer a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.footer-bottom .copy{font-size:12.5px;color:rgba(255,255,255,.45);}
.footer-bottom .tagline{
  font-size:12.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{gap:40px;}
  .benefits{grid-template-columns:1fr;gap:26px;}
  .care-grid{grid-template-columns:1fr 1fr;}
  .testis{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;gap:36px;}
  .steps{grid-template-columns:1fr;gap:40px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cov-grid{grid-template-columns:1fr;gap:44px;}
  .resto-grid{grid-template-columns:1fr;gap:44px;}
  .app-cta{flex-direction:column;align-items:flex-start;padding:36px;}
}
@media (max-width:860px){
  .nav,.header .btn-desktop{display:none;}
  .burger{display:flex;}
  .hero{padding:36px 0 72px;}
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .hero-photo{order:-1;max-width:520px;margin:0 auto;width:100%;}
  .hero-copy .wordmark{display:none;}
  .stk2{left:-10px;}
  .section{padding:72px 0;}
  .care-grid{grid-template-columns:1fr;}
  .testis{grid-template-columns:1fr;}
  .band-orange .band-in{flex-direction:column;align-items:flex-start;}
  .closing-btns .btn{width:100%;max-width:360px;}
  .hero-ctas .btn{width:100%;}
  .resto-photo{max-width:520px;margin:0 auto;width:100%;}
  .resto-ctas .btn{width:100%;}
  .badges{width:100%;}
  .badge{flex:1;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}

/* ============================================================
   COBERTURA compacta (home)
   ============================================================ */
.cov-slim{padding:72px 0;}
.cov-line{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.cov-title{font-size:clamp(26px,2.8vw,38px);margin-bottom:12px;}
.cov-line .lead{max-width:520px;}
.cov-line .cov-hours{margin-bottom:0;}

/* ============================================================
   SERVICIOS — hero de página propia + mockup de teléfono
   ============================================================ */
.page-hero{padding:64px 0 88px;}
.phone{
  width:min(320px,86%);margin:0 auto;position:relative;
  background:var(--navy);border-radius:44px;padding:14px;
  box-shadow:0 24px 60px rgba(6,38,45,.28);
}
.phone .phone-notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:110px;height:24px;background:var(--navy);border-radius:0 0 16px 16px;z-index:3;
}
.phone .screen{
  background:var(--cream);border-radius:32px;overflow:hidden;
  display:flex;flex-direction:column;
}
.scr-head{background:var(--orange);padding:34px 20px 16px;display:flex;align-items:center;gap:10px;}
.scr-head img{height:22px;width:auto;}
.scr-head span{font-weight:900;font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.08em;}
.scr-search{
  margin:14px 16px 4px;background:#fff;border:1.5px solid var(--line);border-radius:9999px;
  padding:10px 16px;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;
}
.scr-filters{display:flex;gap:6px;margin:10px 16px;flex-wrap:wrap;}
.scr-filters span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border-radius:9999px;padding:5px 11px;background:rgba(6,38,45,.07);color:var(--navy);}
.scr-filters span.on{background:var(--navy);color:#fff;}
.scr-card{
  background:#fff;border:1.5px solid var(--line);border-radius:18px;
  margin:6px 16px 18px;padding:16px;box-shadow:var(--sh-sm);
}
.scr-who{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.scr-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);}
.scr-who strong{font-size:14.5px;font-weight:900;display:block;color:var(--navy);}
.scr-who small{font-size:11.5px;color:var(--ink-soft);display:block;}
.scr-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(var(--orange-rgb),.15);color:var(--navy);
  font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  border-radius:9999px;padding:4px 9px;margin-bottom:8px;
}
.scr-badge svg{width:11px;height:11px;stroke:var(--orange);}
.scr-meta{display:flex;gap:10px;font-size:11px;color:var(--ink-soft);margin-bottom:12px;flex-wrap:wrap;}
.scr-meta b{color:var(--navy);}
.scr-btn{
  display:block;text-align:center;background:var(--orange);color:var(--navy);
  font-weight:900;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  border-radius:9999px;padding:11px;
}
.phone-caption{
  display:block;text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:16px;
}

/* Confianza en dos capas (página servicios) */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:8px;}
.trust-card{background:var(--white);border:1.5px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--sh-sm);}
.trust-card .tico{width:46px;height:46px;border-radius:12px;background:rgba(var(--orange-rgb),.13);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.trust-card .tico svg{width:22px;height:22px;stroke:var(--orange);}
.trust-card h3{font-weight:900;font-size:16.5px;margin-bottom:6px;}
.trust-card p{font-size:14px;color:var(--ink-soft);}

@media (max-width:1080px){
  .cov-line{grid-template-columns:1fr;gap:28px;}
  .trust-grid{grid-template-columns:1fr;}
}

/* ============================================================
   AJUSTES 26/08 — firma sin Caveat, bento, phone dark, floats
   ============================================================ */
.brand-note{
  display:inline-block;font-weight:900;font-size:clamp(14px,1.3vw,17px);
  text-transform:uppercase;letter-spacing:.14em;color:var(--orange);margin-bottom:38px;
}

/* ---------- ¿Por qué Wana? — bento + foto ---------- */
.why-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:stretch;margin-bottom:36px;}
.why-photo{position:relative;}
.why-photo .ph{border-radius:28px;overflow:hidden;position:relative;height:100%;min-height:400px;box-shadow:0 18px 50px rgba(6,38,45,.16);}
.why-photo .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);}
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.bcard{border:1.5px solid var(--line);border-radius:20px;padding:22px 24px;background:var(--cream);}
.bcard .bico{width:42px;height:42px;border-radius:11px;background:rgba(var(--orange-rgb),.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.bcard .bico svg{width:20px;height:20px;stroke:var(--orange);}
.bcard .bn{font-weight:900;font-size:clamp(28px,2.6vw,40px);display:block;line-height:1;color:var(--navy);}
.bcard .bl{font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-top:9px;display:block;color:var(--ink-soft);}
.bcard-navy{background:var(--navy);border-color:var(--navy);}
.bcard-navy .bn{color:#fff;}
.bcard-navy .bl{color:var(--orange);}
.bcard-navy .bico{background:rgba(var(--orange-rgb),.2);}
.bcard-orange{background:var(--orange);border-color:var(--orange);}
.bcard-orange .bn,.bcard-orange .bl{color:var(--navy);}
.bcard-orange .bico{background:rgba(6,38,45,.12);}
.bcard-orange .bico svg{stroke:var(--navy);}

/* ---------- Así funciona — steps + escenario de app ---------- */
.how-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.steps-col{display:flex;flex-direction:column;gap:32px;margin-top:0;}
.steps-col .step p{max-width:440px;}
.how-stage{position:relative;padding:26px 0;}
.phone-dark{background:#0b3a44;}
.phone-dark .screen{background:var(--navy);}
.scr-dark-head{display:flex;align-items:center;justify-content:space-between;padding:38px 20px 8px;}
.scr-dark-head strong{color:#fff;font-size:15.5px;font-weight:900;display:block;letter-spacing:.05em;}
.scr-dark-head small{color:rgba(255,255,255,.55);font-size:11.5px;display:block;}
.scr-dark-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);}
.scr-q{color:#fff;font-weight:900;font-size:17.5px;line-height:1.28;padding:10px 20px 16px;}
.scr-tile{display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:16px;margin:0 16px 12px;padding:13px 15px;}
.scr-tile-alt{background:#dfe9e4;}
.scr-tile .scr-tile-ico{width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;}
.scr-tile strong{font-size:13px;font-weight:900;display:block;color:var(--navy);line-height:1.25;}
.scr-tile small{font-size:10.5px;color:var(--ink-soft);display:block;}
.scr-tile-arr{margin-left:auto;color:var(--navy);font-weight:900;}
.scr-nav{display:flex;justify-content:space-around;padding:13px 10px 17px;border-top:1px solid rgba(255,255,255,.12);margin-top:4px;}
.scr-nav span{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);}
.scr-nav .on{color:var(--orange);}
.float-card{position:absolute;display:flex;align-items:center;gap:11px;background:#fff;border-radius:16px;padding:13px 17px;box-shadow:0 14px 34px rgba(6,38,45,.28);z-index:4;}
.float-card strong{font-size:13px;font-weight:900;display:block;color:var(--navy);line-height:1.3;}
.float-card small{font-size:11px;color:var(--ink-soft);display:block;}
.float-card img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);flex:none;}
.fc-confirm{top:4%;right:-2px;background:var(--orange);transform:rotate(2deg);}
.fc-confirm strong{color:var(--navy);}
.fc-confirm small{color:rgba(6,38,45,.72);}
.fc-check{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;flex:none;}
.fc-profile{bottom:5%;left:-2px;transform:rotate(-2deg);}

/* ---------- Escenario naranja para el teléfono (servicios) ---------- */
.phone-stage{position:relative;background:var(--orange);border-radius:32px;padding:56px 24px;display:flex;justify-content:center;}
.phone-stage .phone{box-shadow:0 30px 70px rgba(6,38,45,.35);}
.phone-stage .fc-confirm{top:9%;right:4%;background:#fff;transform:rotate(3deg);}
.phone-stage .fc-profile{bottom:9%;left:4%;}

/* ---------- Confianza: 4 variables + tip ---------- */
.trust-grid{grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-note{font-size:15px;color:var(--ink-soft);max-width:680px;margin:26px 0 0;}
.tip-note{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(var(--orange-rgb),.1);border:1.5px solid rgba(var(--orange-rgb),.45);border-radius:16px;
  padding:18px 22px;margin-top:30px;font-size:14.5px;color:var(--navy);max-width:760px;
}
.tip-note b{font-weight:900;}

/* ---------- Stickers extra (hero servicios) ---------- */
.stk4{top:24%;left:-18px;--rot:2deg;animation-delay:.8s;}
.stk5{top:60%;right:-14px;--rot:3deg;animation-delay:1.8s;}
.stk6{bottom:22%;left:5%;--rot:-2deg;animation-delay:3s;}

@media (max-width:1080px){
  .why-grid{grid-template-columns:1fr;}
  .why-photo .ph{min-height:300px;}
  .how-grid{grid-template-columns:1fr;gap:44px;}
  .how-stage{max-width:440px;margin:0 auto;width:100%;}
  .trust-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .trust-grid{grid-template-columns:1fr;}
  .stk5,.stk6{display:none;}
  .fc-confirm{right:0;}
  .fc-profile{left:0;}
}

/* ============================================================
   PÁGINA /TIENDA — componentes propios (26/08/2026)
   ============================================================ */

/* ---------- Link discreto con flecha (home → tienda) ---------- */
.link-more{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--navy);text-decoration:none;padding:6px 2px;
  transition:color .15s ease;
}
.link-more:hover{color:var(--orange);}
.link-more .arr{transition:transform .18s ease;}
.link-more:hover .arr{transform:translateX(4px);}

/* ---------- 01 · Qué elegimos: tiles de categorías ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:56px;}
.cat-tile{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--cream);border:1.5px solid var(--line);border-radius:18px;
  padding:24px 24px 22px;text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(var(--orange-rgb),.55);}
.cat-tile .tico{
  width:46px;height:46px;border-radius:12px;background:rgba(var(--orange-rgb),.13);
  display:flex;align-items:center;justify-content:center;
}
.cat-tile .tico svg{width:22px;height:22px;stroke:var(--orange);}
.cat-tile strong{font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cat-tile p{font-size:14px;color:var(--ink-soft);flex-grow:1;}
.cat-tile .tgo{
  align-self:flex-end;width:34px;height:34px;border-radius:50%;
  background:rgba(6,38,45,.07);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.cat-tile:hover .tgo{background:var(--orange);transform:translateX(3px);}
.cat-frost{
  display:inline-flex;align-items:center;gap:4px;
  background:#dcebee;color:#0b4a58;border-radius:9999px;
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;
}
.statement-line{
  text-align:center;font-weight:900;text-transform:uppercase;line-height:1.1;
  font-size:clamp(24px,3vw,40px);color:var(--navy);margin:0 auto;max-width:760px;
}
.statement-line .o{color:var(--orange);}

/* ---------- 04 · Snacks: momentos ---------- */
.chip-note{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--navy);color:var(--cream);border-radius:12px;
  padding:10px 18px;font-weight:900;font-size:14px;
  transform:rotate(-1.5deg);box-shadow:var(--sh-sm);margin-bottom:34px;
}
.chip-note .ast{color:var(--orange);}
.snack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px;}
.snack-grid .cat-tile{background:var(--white);}
@media (max-width:1080px){
  .snack-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .snack-grid{gap:12px;}
  .snack-grid .cat-tile{padding:18px 16px;}
}

/* ---------- 02 · Manifiesto (navy) ---------- */
.manifesto{max-width:860px;}
.manifesto .lead{color:rgba(255,255,255,.75);}
.manifesto-quote{
  position:relative;font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,3.4vw,46px);line-height:1.08;color:var(--cream);
  padding:18px 0 0 46px;margin:44px 0 30px;
}
.manifesto-quote .qmark{
  position:absolute;left:-6px;top:-14px;font-size:110px;line-height:1;
  color:var(--orange);font-weight:900;opacity:.9;
}
.manifesto-quote .o{color:var(--orange);}
.manifesto-remate{color:rgba(255,255,255,.62);font-size:15px;max-width:560px;}

/* ---------- 03 · El plato completo: escenario de chips ---------- */
.plate-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;}
.plate-stage{
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:center;gap:14px 12px;
  padding:4px 0;
}
/* Chips naranjas (solo en el bloque del plato; restaurantes reusa .plate-chip sobre fondo claro) */
.plate-stage .plate-chip{
  background:var(--orange);color:var(--navy);
  box-shadow:0 8px 20px rgba(var(--orange-rgb),.3);
}
.plate-stage .plate-chip .ast{color:var(--navy);}
.plate-stage .plate-chip:hover{background:var(--orange-hover);}
.plate-stage .plate-chip-navy{background:var(--navy);color:var(--cream);box-shadow:0 8px 22px rgba(6,38,45,.22);}
.plate-stage .plate-chip-navy .ast{color:var(--orange);}
.plate-stage .plate-chip-navy:hover{background:#0b3a44;}
.plate-chip{
  display:inline-flex;align-items:center;position:relative;
  background:#f7ece2;color:var(--navy);border-radius:12px;
  padding:11px 18px;font-weight:900;font-size:clamp(13px,1.15vw,16px);
  box-shadow:0 8px 22px rgba(6,38,45,.18);text-decoration:none;white-space:nowrap;
  transform:rotate(var(--rot,0deg));
  transition:transform .18s ease,background .18s ease;
}
.plate-chip:hover{transform:rotate(0deg) scale(1.05);background:#fff;}
.plate-chip .ast{margin-left:7px;color:var(--orange);font-weight:900;}
.plate-chip-navy{background:var(--navy);color:var(--cream);}
.plate-chip-navy:hover{background:#0b3a44;}
.plate-chip:nth-child(odd){--rot:-2.5deg;}
.plate-chip:nth-child(even){--rot:2deg;}
.plate-chip:nth-child(3n){--rot:-1deg;}
.plate-note{font-size:13.5px;color:var(--ink-soft);margin-top:18px;}
.plate-note b{font-weight:900;color:var(--navy);}

/* ---------- 04 · Todo en una compra: comparativa ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:44px;align-items:stretch;}
.cmp-card{border-radius:22px;padding:30px 30px 26px;}
.cmp-off{background:rgba(6,38,45,.045);border:1.5px solid var(--line);}
.cmp-off h3{color:var(--ink-soft);}
.cmp-on{background:var(--cream);border:2px solid var(--orange);box-shadow:var(--sh-md);position:relative;}
.cmp-card h3{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;}
.cmp-tag{
  position:absolute;top:-15px;right:24px;background:var(--orange);color:var(--navy);
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  border-radius:9999px;padding:6px 15px;box-shadow:var(--sh-sm);
}
.cmp-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.cmp-card li{
  display:flex;gap:12px;align-items:flex-start;font-size:15px;
  border-radius:12px;padding:10px 12px;
}
.cmp-off li{color:var(--ink-soft);}
.cmp-on li{font-weight:700;color:var(--navy);}
.cmp-x,.cmp-c{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
}
.cmp-x{background:rgba(6,38,45,.09);color:var(--ink-soft);}
.cmp-c{background:var(--orange);color:var(--navy);}
.cmp-ice{background:#dcebee;}
.cmp-on .cmp-ice{background:#d2e7ec;}

/* ---------- 06 · Garantía del congelado (fondo hielo) ---------- */
.section-ice{background:#e2edf0;}
.ice-grid{display:grid;grid-template-columns:.42fr .58fr;gap:56px;align-items:center;}
.seal-wrap{display:flex;justify-content:center;}
.seal{width:min(300px,72vw);height:auto;position:relative;}
.seal .seal-ring{animation:sealspin 30s linear infinite;transform-origin:50% 50%;}
@keyframes sealspin{to{transform:rotate(360deg);}}
.g-statement{
  font-weight:900;font-size:clamp(20px,2.2vw,28px);line-height:1.3;
  color:var(--navy);max-width:560px;margin:22px 0 30px;
}
.g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px;}
.g-card{background:#fff;border:1.5px solid rgba(6,38,45,.12);border-radius:18px;padding:22px;}
.g-card .tico{width:44px;height:44px;border-radius:12px;background:#dcebee;display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.g-card .tico svg{width:21px;height:21px;stroke:#0b4a58;}
.g-card strong{font-weight:900;font-size:15px;display:block;margin-bottom:5px;}
.g-card p{font-size:13.5px;color:var(--ink-soft);}

/* ---------- 07 · Atención: conversación ilustrativa ---------- */
.talk-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.talk-card{
  background:var(--cream);border:1.5px solid var(--line);border-radius:24px;
  padding:26px;box-shadow:var(--sh-md);max-width:480px;margin:0 auto;width:100%;
}
.talk-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1.5px solid var(--line);margin-bottom:18px;}
.talk-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);}
.talk-head strong{font-size:15px;font-weight:900;display:block;}
.talk-head small{font-size:12px;color:var(--ink-soft);display:block;}
.bubble{
  max-width:82%;border-radius:16px;padding:12px 16px;font-size:14.5px;
  margin-bottom:12px;line-height:1.5;
}
.bubble-in{background:#fff;border:1.5px solid var(--line);border-bottom-left-radius:4px;}
.bubble-out{background:var(--navy);color:var(--cream);margin-left:auto;border-bottom-right-radius:4px;}
.talk-caption{display:block;text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:14px;}
.disclaimer{
  background:rgba(6,38,45,.05);border:1.5px solid var(--line);border-radius:16px;
  padding:16px 20px;font-size:13.5px;color:var(--ink-soft);max-width:560px;margin-top:26px;
}

/* ---------- 08 · Web y App ---------- */
.channels{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;}
.ch-card{
  background:var(--white);border:1.5px solid var(--line);border-radius:22px;
  padding:32px 32px 30px;display:flex;flex-direction:column;gap:0;position:relative;
}
.ch-card h3{font-weight:900;font-size:20px;text-transform:uppercase;margin-bottom:6px;}
.ch-card .ch-sub{font-size:14px;color:var(--ink-soft);margin-bottom:20px;}
.ch-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex-grow:1;}
.ch-card li{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:700;}
.ch-card li .cmp-c{width:22px;height:22px;font-size:12px;}
.ch-app{border:2px solid var(--orange);box-shadow:var(--sh-md);}
.ch-tag{
  position:absolute;top:-15px;left:28px;background:var(--orange);color:var(--navy);
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  border-radius:9999px;padding:6px 15px;box-shadow:var(--sh-sm);
}

/* ---------- 09 · WanaCash: calculadora ---------- */
.wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.wc-grid .lead{color:rgba(255,255,255,.75);}
.wc-calc{display:flex;flex-direction:column;gap:16px;}
.wc-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 26px;
}
.wc-row .wc-in small,.wc-row .wc-out small{
  display:block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.55);margin-bottom:4px;
}
.wc-row .wc-in b{color:#fff;font-size:clamp(19px,1.8vw,24px);font-weight:900;}
.wc-row .wc-out b{color:var(--orange);font-size:clamp(21px,2vw,27px);font-weight:900;}
.wc-out{text-align:right;}
.wc-bonus{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  background:var(--orange);color:var(--navy);border-radius:9999px;
  font-size:13px;font-weight:900;padding:8px 16px;
}
.wc-remate{color:#fff;font-weight:900;font-size:17px;margin-top:26px;}
.wc-remate .o{color:var(--orange);}
.wc-note{color:rgba(255,255,255,.55);font-size:13.5px;margin-top:8px;}

/* ============================================================
   PÁGINA /RESTAURANTES — componentes propios (26/08/2026)
   ============================================================ */

/* ---------- Kicker manuscrito sobre el H1 ---------- */
.kicker-note{
  font-family:'Caveat',cursive;font-weight:700;font-size:clamp(26px,2.6vw,36px);
  color:var(--orange);display:inline-block;transform:rotate(-2deg);margin-bottom:10px;
}

/* ---------- Placeholder de foto (para diseño) ---------- */
.ph-todo{
  position:absolute;inset:0;z-index:1;
  background:
    repeating-linear-gradient(45deg,rgba(6,38,45,.05) 0 14px,rgba(6,38,45,.02) 14px 28px),
    #e9e7de;
  border:2px dashed rgba(6,38,45,.3);border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:26px;text-align:center;
}
.ph-todo .cam{font-size:26px;line-height:1;}
.ph-todo strong{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);}
.ph-todo p{font-size:13px;line-height:1.5;color:var(--ink-soft);max-width:320px;}

/* ---------- 01 · Pet friendly vs. Pet Lovers ---------- */
.pl-compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:36px;align-items:stretch;}
.pl-card{border-radius:22px;overflow:hidden;display:flex;flex-direction:column;position:relative;}
.pl-off{background:rgba(6,38,45,.045);border:1.5px solid var(--line);}
.pl-on{background:var(--cream);border:2px solid var(--orange);box-shadow:var(--sh-md);}
.pl-img{position:relative;aspect-ratio:1.72;overflow:hidden;flex:none;}
.pl-img img{width:100%;height:100%;object-fit:cover;}
.pl-off .pl-img img{filter:grayscale(.5) saturate(.6) contrast(.98);}
.pl-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:0;flex-grow:1;}
.pl-body h3{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
.pl-off .pl-body h3{color:var(--ink-soft);}
.pl-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.pl-card li{display:flex;gap:12px;align-items:flex-start;font-size:15px;border-radius:12px;padding:9px 12px;}
.pl-off li{color:var(--ink-soft);}
.pl-on li{font-weight:700;color:var(--navy);}
.pl-on li.pl-hl{background:rgba(var(--orange-rgb),.18);font-weight:900;}
.pl-remate{font-weight:900;font-size:clamp(17px,1.7vw,21px);color:var(--navy);text-transform:uppercase;letter-spacing:.01em;}
.pl-remate .o{color:var(--orange);}

/* ---------- 02 · Escenas ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:40px;}
.scene{
  background:var(--white);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.scene:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.scene .simg{position:relative;aspect-ratio:.86;overflow:hidden;}
.scene .simg img{width:100%;height:100%;object-fit:cover;filter:saturate(.95);}
.schip{
  position:absolute;top:16px;left:16px;z-index:3;
  display:inline-flex;align-items:center;
  background:#f7ece2;color:var(--navy);border-radius:12px;
  padding:9px 15px;font-weight:900;font-size:13.5px;
  box-shadow:0 8px 22px rgba(6,38,45,.22);transform:rotate(-2deg);
}
.schip .ast{position:absolute;top:-12px;right:-7px;font-size:22px;line-height:1;font-weight:900;color:var(--orange);transform:rotate(8deg);}
.scene p{padding:20px 24px 24px;font-size:14.5px;color:var(--ink-soft);}
.scene p b{color:var(--navy);font-weight:900;}
.scene-cierre{text-align:center;font-weight:900;text-transform:uppercase;line-height:1.2;font-size:clamp(18px,2vw,26px);color:var(--navy);max-width:680px;margin:0 auto;}
.scene-cierre .o{color:var(--orange);}

/* ---------- 03 · El menú ---------- */
.menu-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:56px;align-items:center;}
.menu-photo{position:relative;}
.menu-photo .ph{border-radius:28px;overflow:hidden;position:relative;aspect-ratio:.92;box-shadow:0 18px 50px rgba(6,38,45,.16);}
.menu-pairs{display:flex;flex-direction:column;gap:20px;margin:28px 0 30px;}
.mpair{display:flex;gap:16px;align-items:flex-start;}
.mpair .mpn{
  flex:none;width:40px;height:40px;border-radius:50%;background:rgba(var(--orange-rgb),.15);
  color:var(--orange);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:17px;
}
.mpair strong{display:block;font-size:16.5px;font-weight:900;margin-bottom:2px;}
.mpair span{font-size:14.5px;color:var(--ink-soft);}
.menu-chips{display:flex;flex-wrap:wrap;gap:14px 12px;margin-bottom:24px;}
.menu-note{font-size:14.5px;color:var(--ink-soft);}
.menu-note b{font-weight:900;color:var(--navy);}

/* ---------- 04 · Mapa / directorio ---------- */
.map-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;margin-bottom:26px;}
.map-canvas{
  position:relative;border-radius:24px;border:1.5px solid var(--line);overflow:hidden;min-height:480px;
  background:
    linear-gradient(rgba(6,38,45,.05) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(6,38,45,.05) 1.5px,transparent 1.5px),
    #e7ece9;
  background-size:56px 56px,56px 56px,auto;
}
.map-pin{position:absolute;z-index:2;transform:translate(-50%,-100%);}
.map-pin svg{width:34px;height:34px;filter:drop-shadow(0 6px 12px rgba(6,38,45,.3));}
.map-pin.big svg{width:44px;height:44px;}
.map-pop{
  position:absolute;z-index:3;display:flex;align-items:center;gap:11px;
  background:#fff;border-radius:14px;padding:11px 15px;box-shadow:0 14px 34px rgba(6,38,45,.24);
}
.map-pop strong{font-size:13px;font-weight:900;display:block;color:var(--navy);line-height:1.3;}
.map-pop small{font-size:11px;color:var(--ink-soft);display:block;}
.map-badge{
  position:absolute;left:18px;bottom:16px;z-index:3;
  background:rgba(6,38,45,.85);color:var(--cream);border-radius:9999px;
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:7px 14px;
}
.map-list{display:flex;flex-direction:column;gap:14px;}
.place{
  display:flex;gap:15px;align-items:center;
  background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.place:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(var(--orange-rgb),.55);}
.place .pthumb{
  flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;position:relative;
  background:#e9e7de;border:1.5px dashed rgba(6,38,45,.25);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.place strong{font-size:15.5px;font-weight:900;display:block;}
.place small{font-size:13px;color:var(--ink-soft);display:block;margin:2px 0 8px;}
.ptags{display:flex;gap:6px;flex-wrap:wrap;}
.ptags span{
  background:rgba(var(--orange-rgb),.14);color:var(--navy);border-radius:9999px;
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;
}
.place .pgo{
  margin-left:auto;flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(6,38,45,.07);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;
}
.place:hover .pgo{background:var(--orange);}
.map-note{font-size:13px;color:var(--ink-soft);margin-bottom:34px;}
.map-logos{margin-top:52px;}
.map-logos-label{
  display:block;font-size:12px;font-weight:900;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);margin-bottom:18px;
}
.logo-row{display:flex;gap:14px;flex-wrap:wrap;}
.logo-slot{
  flex:1;min-width:150px;max-width:210px;height:64px;border-radius:14px;
  border:2px dashed rgba(6,38,45,.25);background:rgba(6,38,45,.03);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:700;color:var(--ink-soft);padding:8px 14px;line-height:1.35;
}

/* ---------- Para locales (banda naranja propia) ---------- */
.local-band{background:var(--orange);padding:96px 0;}
.local-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;}
.local-band .eyebrow{color:var(--navy);}
.local-band .eyebrow .num{color:#fff;}
.local-band h2{color:var(--navy);margin-bottom:16px;}
.local-band .lead{color:rgba(6,38,45,.82);font-weight:700;}
.local-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:26px 0 28px;}
.local-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:700;color:var(--navy);}
.local-list .lc{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:var(--navy);color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
}
.local-cierre{font-size:15px;color:rgba(6,38,45,.82);max-width:520px;margin-bottom:30px;}
.btn-wsp svg{width:19px;height:19px;fill:currentColor;flex:none;}
.local-micro{display:block;font-size:13.5px;font-weight:700;color:rgba(6,38,45,.75);margin-top:14px;}
.kit-stage{position:relative;background:#f7ece2;border-radius:28px;overflow:hidden;aspect-ratio:.96;box-shadow:0 18px 50px rgba(6,38,45,.2);}

/* ---------- FAQ: label de audiencia ---------- */
.faq-label{
  display:block;font-size:12px;font-weight:900;text-transform:uppercase;
  letter-spacing:.14em;color:var(--orange);margin:36px 0 4px;
}

/* ---------- Cierre: link secundario discreto ---------- */
.closing-link{
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.75);text-decoration:none;
  font-weight:900;font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;
  transition:color .15s ease;
}
.closing-link:hover{color:var(--orange);}

/* ---------- Responsive restaurantes ---------- */
@media (max-width:1080px){
  .pl-compare{grid-template-columns:1fr;}
  .menu-grid,.local-grid{grid-template-columns:1fr;gap:44px;}
  .map-shell{grid-template-columns:1fr;}
  .map-canvas{min-height:380px;}
  .kit-stage{max-width:520px;margin:0 auto;width:100%;}
}
@media (max-width:860px){
  .scene-grid{
    display:flex;overflow-x:auto;gap:16px;margin:0 -28px 40px;padding:4px 28px 14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .scene{flex:0 0 280px;scroll-snap-align:start;}
  .local-grid .btn{width:100%;}
  .logo-slot{min-width:130px;}
}

/* ---------- Responsive tienda ---------- */
@media (max-width:1080px){
  .plate-grid,.talk-grid,.ice-grid,.wc-grid{grid-template-columns:1fr;gap:44px;}
  .compare{grid-template-columns:1fr;}
  .g-cards{grid-template-columns:1fr;}
  .channels{grid-template-columns:1fr;}
  .ch-app{order:-1;}
  .seal{width:min(240px,60vw);}
}
@media (max-width:860px){
  .plate-stage{padding:0;justify-content:center;}
  .plate-chip{white-space:normal;text-align:center;}
  .cmp-card{padding:24px 20px;}
  .wc-row{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:12px;}
  .wc-row .wc-out{
    grid-column:1 / -1;text-align:left;
    border-top:1px solid rgba(255,255,255,.12);padding-top:12px;
  }
}

/* ============================================================
   ASÍ FUNCIONA — pasos interactivos + app que cambia (27/08/2026)
   ============================================================ */
.how-grid-i{align-items:center;}

/* ---------- Lista de pasos = tabs ---------- */
.steps-i{position:relative;display:flex;flex-direction:column;gap:10px;}
.steps-rail{
  position:absolute;left:27px;top:var(--rt,36px);bottom:var(--rb,36px);
  width:2px;background:rgba(255,255,255,.15);border-radius:2px;
}
.steps-rail-fill{
  position:absolute;left:0;top:0;width:100%;height:0;
  background:var(--orange);border-radius:2px;
  box-shadow:0 0 14px rgba(var(--orange-rgb),.55);
  transition:height .55s cubic-bezier(.4,0,.2,1);
}
.step-i{
  position:relative;z-index:1;display:grid;grid-template-columns:56px 1fr;gap:18px;
  align-items:start;text-align:left;width:100%;
  background:transparent;border:none;cursor:pointer;
  padding:16px 20px 16px 0;border-radius:22px;
  transition:background .22s ease,padding .22s ease;
}
.step-i .snum{
  width:56px;height:56px;flex:none;margin:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:900;line-height:1;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.step-txt{display:block;}
.step-h{
  display:block;color:#fff;font-weight:900;font-size:19px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.2;margin-bottom:6px;
  transition:color .22s ease;
}
.step-p{
  display:block;color:rgba(255,255,255,.6);font-size:15px;line-height:1.55;max-width:400px;
  transition:color .22s ease;
}
.step-i:hover .snum{color:#fff;box-shadow:inset 0 0 0 2px rgba(var(--orange-rgb),.75);transform:scale(1.04);}
.step-i:hover .step-p{color:rgba(255,255,255,.78);}
.step-i.is-on{background:rgba(255,255,255,.055);margin-left:-14px;padding-left:14px;padding-right:24px;}
.step-i.is-on .snum{
  background:var(--orange);color:var(--navy);
  box-shadow:inset 0 0 0 2px var(--orange),0 6px 22px rgba(var(--orange-rgb),.4);
}
.step-i.is-on .step-h{color:var(--orange);}
.step-i.is-on .step-p{color:rgba(255,255,255,.85);}
.step-i:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

.how-hint{
  font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:var(--orange);
  transform:rotate(-1.2deg);margin:22px 0 0 16px;
}

/* ---------- Escenario: pantallas que se intercambian ---------- */
.scr-stack{position:relative;min-height:330px;}
.scr-view{
  position:absolute;inset:0;
  opacity:0;transform:translateY(12px) scale(.985);pointer-events:none;
  transition:opacity .34s ease,transform .34s ease;
}
.scr-view.is-on{opacity:1;transform:none;pointer-events:auto;}
.scr-view[hidden]{display:none;}
@keyframes stgIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.scr-view.is-on .stg{animation:stgIn .44s cubic-bezier(.2,.7,.3,1) both;}
.scr-view.is-on .stg:nth-child(1){animation-delay:.04s;}
.scr-view.is-on .stg:nth-child(2){animation-delay:.10s;}
.scr-view.is-on .stg:nth-child(3){animation-delay:.16s;}
.scr-view.is-on .stg:nth-child(4){animation-delay:.22s;}
.scr-view.is-on .stg:nth-child(5){animation-delay:.28s;}
.scr-view.is-on .stg:nth-child(6){animation-delay:.34s;}
.scr-view.is-on .stg:nth-child(7){animation-delay:.40s;}

.scr-tile-ghost{background:rgba(255,255,255,.09);}
.scr-tile-ghost strong{color:#fff;}
.scr-tile-ghost small{color:rgba(255,255,255,.6);}
.scr-tile-ghost .scr-tile-arr{color:var(--orange);}
.scr-tile-ghost .scr-tile-ico{background:var(--orange);color:var(--navy);}

/* Paso 2 · comparar */
.scr-q-sm{font-size:16px;padding-bottom:10px;}
.scr-q-sm span{display:block;font-size:11.5px;font-weight:400;color:rgba(255,255,255,.55);margin-top:4px;letter-spacing:0;}
.scr-chips{display:flex;gap:6px;padding:0 16px 12px;flex-wrap:wrap;}
.scr-chips span{
  font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  border-radius:9999px;padding:5px 10px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.7);
}
.scr-chips span.on{background:var(--orange);color:var(--navy);}
.scr-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;}
.mini{
  position:relative;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.13);
  border-radius:16px;padding:11px 11px 13px;display:flex;flex-direction:column;gap:4px;
}
.mini.is-pick{border-color:var(--orange);background:rgba(var(--orange-rgb),.12);}
.mini-pick{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:var(--navy);font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(6,38,45,.35);
}
.mini-img{display:block;height:64px;background:#fff;border-radius:11px;padding:5px;margin-bottom:4px;}
.mini-img img{height:100%;width:100%;object-fit:contain;}
.mini-face{display:block;margin-bottom:6px;}
.mini-face img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);}
.mini-name{font-size:12px;font-weight:900;color:#fff;line-height:1.25;}
.mini-rate{font-size:10px;color:rgba(255,255,255,.6);}
.mini-rate b{color:var(--orange);font-weight:900;}
.mini-price{font-size:14px;font-weight:900;color:var(--orange);margin-top:auto;}
.mini-badge{
  margin-top:auto;font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:var(--navy);background:var(--orange);border-radius:9999px;padding:4px 8px;align-self:flex-start;
}
.scr-note{padding:12px 18px 0;font-size:10.5px;color:rgba(255,255,255,.5);text-align:center;}

/* Paso 3 · resuelto */
.scr-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 24px 0;}
@keyframes popIn{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
.done-check{
  width:62px;height:62px;border-radius:50%;background:var(--orange);color:var(--navy);
  font-size:29px;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(var(--orange-rgb),.4);margin-bottom:14px;
}
.scr-view.is-on .done-check{animation:popIn .5s cubic-bezier(.2,.8,.3,1) both;}
.done-h{font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#fff;margin-bottom:6px;}
.done-p{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:14px;}
.done-row{
  display:flex;align-items:center;gap:8px;width:100%;
  background:rgba(255,255,255,.07);border-radius:12px;padding:9px 12px;margin-bottom:8px;
  font-size:11.5px;color:rgba(255,255,255,.78);
}
.done-row b{color:#fff;font-weight:900;}
.done-ico{font-size:14px;}
.trk{display:flex;align-items:center;width:100%;margin-top:8px;}
.trk-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);flex:none;}
.trk-dot.on{background:var(--orange);box-shadow:0 0 0 4px rgba(var(--orange-rgb),.18);}
.trk-line{height:2px;flex:1;background:rgba(255,255,255,.16);}
.trk-line.on{background:var(--orange);}
.trk-labels{display:flex;justify-content:space-between;width:100%;margin-top:7px;}
.trk-labels span{font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45);}
.trk-labels span:first-child{color:var(--orange);}

/* ---------- Floating cards por paso ---------- */
.how-stage-i .float-card{
  opacity:0;pointer-events:none;
  transition:opacity .32s ease,transform .38s cubic-bezier(.2,.8,.3,1);
}
.how-stage-i .float-card.is-on{opacity:1;}
.how-stage-i .fc-need{top:6%;left:-10px;transform:rotate(-2deg) translateY(10px);}
.how-stage-i .fc-need.is-on{transform:rotate(-2deg);}
.how-stage-i .fc-profile{bottom:8%;left:-2px;transform:rotate(-2deg) translateY(10px);}
.how-stage-i .fc-profile.is-on{transform:rotate(-2deg);}
.how-stage-i .fc-confirm{top:4%;right:-2px;transform:rotate(2deg) translateY(10px);}
.how-stage-i .fc-confirm.is-on{transform:rotate(2deg);}
.fc-paw{
  width:32px;height:32px;border-radius:50%;background:rgba(var(--orange-rgb),.18);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;
}

@media (max-width:1080px){
  .how-stage-i{max-width:430px;margin:0 auto;width:100%;}
}
@media (max-width:760px){
  .steps-i{flex-direction:row;gap:8px;}
  .steps-rail{display:none;}
  .step-i{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;
    padding:14px 8px;background:rgba(255,255,255,.05);flex:1;min-width:0;
  }
  .step-i.is-on{margin-left:0;padding:14px 8px;background:rgba(var(--orange-rgb),.14);box-shadow:inset 0 0 0 1.5px var(--orange);}
  .step-i .snum{width:42px;height:42px;font-size:18px;}
  .step-h{font-size:11.5px;letter-spacing:.03em;margin-bottom:0;}
  .step-p{display:none;}
  .how-hint{margin:18px 0 0;text-align:center;font-size:21px;}
  .scr-stack{min-height:346px;}
  .how-stage-i .fc-need{left:0;}
  .how-stage-i .fc-profile{left:0;}
  .how-stage-i .fc-confirm{right:0;}
}
@media (prefers-reduced-motion:reduce){
  .scr-view,.how-stage-i .float-card,.steps-rail-fill{transition:none;}
  .scr-view.is-on .stg,.scr-view.is-on .done-check{animation:none;}
}

/* ============================================================
   ¿POR QUÉ WANA? — stats con contador + razones interactivas (27/08/2026)
   ============================================================ */
.bento-row{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:64px;}
.bento-row .bcard{transition:transform .22s ease,box-shadow .22s ease;}
.bento-row .bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.bento-row .bn{font-variant-numeric:tabular-nums;}

.why-kicker{
  font-family:'Caveat',cursive;font-weight:700;font-size:clamp(24px,2.4vw,30px);
  color:var(--orange);transform:rotate(-1deg);margin-bottom:22px;
}

/* ---------- Layout lista + panel ---------- */
.why-why{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:start;}

/* ---------- Lista de razones ---------- */
.reasons{display:flex;flex-direction:column;gap:8px;}
.reason{
  display:grid;grid-template-columns:46px 1fr 18px;gap:16px;align-items:center;
  width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1.5px solid transparent;border-radius:20px;
  padding:16px 18px;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.reason .rico{
  width:46px;height:46px;border-radius:13px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,38,45,.06);
  transition:background .22s ease,transform .22s ease;
}
.reason .rico svg{width:21px;height:21px;stroke:var(--orange);transition:stroke .22s ease;}
.rtxt{display:block;min-width:0;}
.rh{
  display:block;font-weight:900;font-size:16.5px;line-height:1.25;color:var(--navy);
  text-transform:uppercase;letter-spacing:.02em;
}
.rp{
  display:block;font-size:14.5px;color:var(--ink-soft);line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s ease,margin-top .38s ease;
}
.rarr{color:var(--line);font-weight:900;transition:color .22s ease,transform .22s ease;}

.reason:hover{background:rgba(6,38,45,.04);}
.reason:hover .rico{background:rgba(var(--orange-rgb),.16);transform:scale(1.05);}
.reason:hover .rarr{color:var(--orange);transform:translateX(3px);}
.reason:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

.reason.is-on{
  background:var(--cream);border-color:rgba(var(--orange-rgb),.55);
  box-shadow:0 10px 30px rgba(6,38,45,.08);
}
.reason.is-on .rico{background:var(--orange);}
.reason.is-on .rico svg{stroke:var(--navy);}
.reason.is-on .rh{color:var(--navy);}
.reason.is-on .rp{max-height:190px;opacity:1;margin-top:7px;}
.reason.is-on .rarr{color:var(--orange);transform:rotate(90deg);}

/* ---------- Panel visual ---------- */
.why-panel{
  position:relative;border-radius:28px;overflow:hidden;
  min-height:456px;background:var(--cream);
  box-shadow:0 18px 50px rgba(6,38,45,.16);
}
.wp-view{
  position:absolute;inset:0;
  opacity:0;transform:scale(1.015);pointer-events:none;
  transition:opacity .38s ease,transform .5s ease;
}
.wp-view.is-on{opacity:1;transform:none;pointer-events:auto;}
.wp-view[hidden]{display:none;}
.wp-view.is-on .stg{animation:stgIn .46s cubic-bezier(.2,.7,.3,1) both;}
.wp-view.is-on .stg:nth-child(1){animation-delay:.06s;}
.wp-view.is-on .stg:nth-child(2){animation-delay:.14s;}
.wp-view.is-on .stg:nth-child(3){animation-delay:.22s;}

.wp-photo{position:absolute;inset:0;display:block;}
.wp-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);}
.wp-photo-cream{background:var(--white);}
.wp-photo-cream img{object-fit:contain;padding:34px;filter:none;}

/* Card flotante del panel */
.wp-card{
  position:absolute;left:22px;bottom:22px;z-index:3;
  display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:18px;padding:14px 18px;
  box-shadow:0 14px 34px rgba(6,38,45,.26);
}
.wp-card strong{display:block;font-size:13.5px;font-weight:900;color:var(--navy);line-height:1.3;}
.wp-card small{display:block;font-size:11.5px;color:var(--ink-soft);}
.wp-card img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);flex:none;}
.wp-card-orange{background:var(--orange);}
.wp-card-orange small{color:rgba(6,38,45,.72);}
.wp-tick{
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
}
.wp-pill{
  position:absolute;top:22px;left:22px;z-index:3;
  background:rgba(6,38,45,.86);color:#fff;
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;
  border-radius:9999px;padding:8px 15px;backdrop-filter:blur(4px);
}

/* Zonas (razón 4) */
.wp-zones{position:absolute;left:22px;right:22px;bottom:22px;z-index:3;display:flex;flex-wrap:wrap;gap:8px;}
.wz{
  background:rgba(255,255,255,.94);color:var(--navy);
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  border-radius:9999px;padding:9px 15px;box-shadow:0 6px 18px rgba(6,38,45,.18);
}
.wz.on{background:var(--orange);}

/* Mocks (razones 1 y 5) */
.wp-mock{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:34px;}
.wp-mock-navy{background:var(--navy);}
.wp-mock-cream{background:var(--cream);}
.wp-note{font-size:13.5px;line-height:1.55;}
.wp-mock-navy .wp-note{color:rgba(255,255,255,.72);}
.wp-mock-navy .wp-note b{color:#fff;font-weight:900;}
.wp-mock-cream .wp-note{color:var(--ink-soft);}
.wp-mock-cream .wp-note b{color:var(--navy);font-weight:900;}

.wp-track{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:22px;padding:24px;}
.wpt-tag{display:block;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);margin-bottom:10px;}
.wpt-h{display:block;font-size:26px;font-weight:900;text-transform:uppercase;color:#fff;line-height:1;}
.wpt-sub{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:7px;}
.wpt-bar{display:block;height:6px;border-radius:9999px;background:rgba(255,255,255,.16);margin:22px 0 10px;overflow:hidden;}
.wpt-fill{display:block;height:100%;width:0;border-radius:9999px;background:var(--orange);box-shadow:0 0 12px rgba(var(--orange-rgb),.6);}
.wp-view.is-on .wpt-fill{animation:barGrow 1.1s .3s cubic-bezier(.3,.8,.3,1) forwards;}
@keyframes barGrow{from{width:0;}to{width:66%;}}
.wpt-labels{display:flex;justify-content:space-between;}
.wpt-labels span{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.4);}
.wpt-labels span.on{color:var(--orange);}

.cash-card{
  background:var(--navy);border-radius:22px;padding:26px;
  box-shadow:0 18px 44px rgba(6,38,45,.28);position:relative;overflow:hidden;
}
.cash-card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(var(--orange-rgb),.18);
}
.cash-mark{height:20px;width:auto;margin-bottom:26px;position:relative;}
.cash-label{display:block;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);}
.cash-amount{display:block;font-size:36px;font-weight:900;color:#fff;line-height:1.1;margin:4px 0 8px;}
.cash-bonus{display:inline-block;font-size:12.5px;color:rgba(255,255,255,.7);}
.cash-bonus b{color:var(--orange);font-weight:900;}

/* Chat (razón 6) */
.wp-chat{position:absolute;left:22px;right:22px;bottom:22px;z-index:3;display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.chat-in,.chat-out{max-width:86%;font-size:13px;line-height:1.45;border-radius:18px;padding:12px 16px;box-shadow:0 10px 26px rgba(6,38,45,.22);}
.chat-in{background:#fff;color:var(--navy);border-bottom-left-radius:6px;}
.chat-out{align-self:flex-end;background:var(--orange);color:var(--navy);font-weight:700;border-bottom-right-radius:6px;display:flex;align-items:center;gap:10px;}
.chat-out img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--navy);}

@media (max-width:1080px){
  .bento-row{grid-template-columns:repeat(2,1fr);margin-bottom:48px;}
  .why-why{grid-template-columns:1fr;gap:28px;}
  .why-panel{order:-1;min-height:340px;}
  .reasons{order:1;}
  .rp{max-height:none;opacity:1;overflow:visible;}
  .reason.is-on .rp{max-height:none;}
}
@media (max-width:620px){
  .bento-row{grid-template-columns:1fr;}
  .why-panel{min-height:300px;}
  .reason{grid-template-columns:40px 1fr;padding:14px;gap:13px;}
  .reason .rico{width:40px;height:40px;border-radius:11px;}
  .rarr{display:none;}
  .rh{font-size:15px;}
  .rp{font-size:14px;}
  .wp-mock{padding:22px;}
  .cash-amount{font-size:30px;}
  .wpt-h{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
  .wp-view,.rp{transition:none;}
  .wp-view.is-on .stg{animation:none;}
  .wp-view.is-on .wpt-fill{animation:none;width:66%;}
}

/* ============================================================
   COMUNIDAD — testimonios que corren en horizontal (27/08/2026)
   ============================================================ */
.testi-run{
  position:relative;overflow:hidden;
  margin:0 calc(50% - 50vw);padding:6px 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.testi-track{display:flex;width:max-content;animation:testiRun 26s linear infinite;}
.testi-track>.testi{
  width:min(384px,80vw);flex:none;margin-right:26px;
  white-space:normal;
}
.testi-run:hover .testi-track,
.testi-run:focus-within .testi-track,
.testi-run.is-paused .testi-track{animation-play-state:paused;}
@keyframes testiRun{to{transform:translateX(var(--shift,-50%));}}

/* Sin JS o con motion reducido: tira deslizable a mano */
.testi-run.is-manual{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.testi-run.is-manual::-webkit-scrollbar{display:none;}
.testi-run.is-manual .testi-track{animation:none;}
.testi-run.is-manual>.testi-track>.testi{scroll-snap-align:center;}

@media (max-width:620px){
  .testi-run{padding:4px 0 12px;}
  .testi-track>.testi{width:min(320px,84vw);margin-right:16px;padding:24px;}
}
@media (prefers-reduced-motion:reduce){
  .testi-track{animation:none;}
}

/* ============================================================
   FOOTER MOBILE — más compacto (27/08/2026)
   ============================================================ */
@media (max-width:860px){
  .footer{padding:44px 0 26px;}
  /* marca arriba a lo ancho; Wana a la izquierda, Ayuda + Legal apilados a la derecha */
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px 22px;margin-bottom:30px;}
  .footer-grid>div:nth-child(1){grid-column:1 / -1;}
  .footer-grid>div:nth-child(2){grid-column:1;grid-row:2;}
  .footer-grid>div:nth-child(3){grid-column:2;grid-row:2;}

  .footer .wordmark{height:25px;margin-bottom:11px;}
  .footer p{font-size:13px;max-width:none;line-height:1.55;}
  .footer h4{font-size:10.5px;letter-spacing:.12em;margin-bottom:10px;}
  .footer li{margin-bottom:6px;}
  .footer a{font-size:13.5px;}
  .footer-bottom{padding-top:18px;gap:6px;}
  .footer-bottom .copy,.footer-bottom .tagline{font-size:11.5px;}
  .footer-bottom .tagline{letter-spacing:.12em;}
}
@media (max-width:400px){
  .footer-grid{gap:22px 16px;}
  .footer a{font-size:12.8px;}
  .footer p{font-size:12.5px;}
}

/* Snacks — tiles más cuadradas en mobile (la flecha sube al ángulo y libera una fila) */
@media (max-width:620px){
  .snack-grid{gap:12px;}
  .snack-grid .cat-tile{padding:16px 14px;gap:7px;border-radius:16px;}
  .snack-grid .cat-tile .tico{width:36px;height:36px;border-radius:10px;}
  .snack-grid .cat-tile .tico svg{width:18px;height:18px;}
  .snack-grid .cat-tile strong{font-size:13.5px;line-height:1.2;}
  .snack-grid .cat-tile p{font-size:12.2px;line-height:1.45;flex-grow:0;}
  .snack-grid .cat-tile .tgo{
    position:absolute;top:13px;right:12px;
    width:26px;height:26px;font-size:12px;align-self:auto;
  }
}
@media (max-width:400px){
  .snack-grid{gap:10px;}
  .snack-grid .cat-tile{padding:14px 12px;}
  .snack-grid .cat-tile strong{font-size:12.8px;}
  .snack-grid .cat-tile p{font-size:11.8px;}
}

/* ============================================================
   QUÉ ELEGIMOS — tira horizontal en mobile y tablet (27/08/2026)
   ============================================================ */
.cat-swipe{
  display:none;font-family:'Caveat',cursive;font-weight:700;font-size:21px;
  color:var(--orange);transform:rotate(-1deg);margin:-24px 0 34px;
}
@media (max-width:1080px){
  .cat-grid{
    display:flex !important;
    overflow-x:auto;overflow-y:hidden;
    gap:12px;margin:0 -28px 40px;padding:4px 28px 16px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);
  }
  .cat-grid::-webkit-scrollbar{display:none;}
  .cat-grid .cat-tile{
    flex:0 0 clamp(178px,46vw,240px);scroll-snap-align:start;
    padding:18px 16px 15px;gap:8px;border-radius:16px;
  }
  /* sin fade de entrada acá: si no, las tiles de la derecha quedan invisibles
     y no se ve que hay más para deslizar */
  .cat-grid .cat-tile.reveal{opacity:1;transform:none;}

  .cat-grid .cat-tile strong{font-size:14.5px;gap:6px;line-height:1.2;}
  .cat-grid .cat-tile p{font-size:12.8px;line-height:1.5;}
  .cat-grid .cat-tile .tgo{width:28px;height:28px;font-size:13px;}
  .cat-grid .cat-frost{font-size:8.5px;padding:3px 7px;letter-spacing:.06em;}

  .cat-swipe{display:block;}
}
@media (max-width:430px){
  .cat-grid{gap:10px;}
  .cat-grid .cat-tile{padding:16px 14px 13px;}
  .cat-grid .cat-tile strong{font-size:13.5px;}
  .cat-grid .cat-tile p{font-size:12.2px;}
}

/* ============================================================
   SERVICIOS · 01 — carrusel horizontal en mobile (27/08/2026)
   (mismo tratamiento en servicios.html y en el home)
   ============================================================ */
.care-dots{display:none;}
@media (max-width:860px){
  #los-servicios .care-grid,
  #servicios .care-grid{
    display:flex;overflow-x:auto;overflow-y:hidden;
    gap:14px;margin:0 -28px 16px;padding:4px 28px 14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #los-servicios .care-grid::-webkit-scrollbar,
  #servicios .care-grid::-webkit-scrollbar{display:none;}
  #los-servicios .ccard,
  #servicios .ccard{
    flex:0 0 min(78vw,330px);scroll-snap-align:start;
    border-radius:18px;
  }
  /* sin fade de entrada: las cards de la derecha quedarían invisibles */
  #los-servicios .ccard.reveal,
  #servicios .ccard.reveal{opacity:1;transform:none;}
  /* foto más baja: era el 60% del alto de la card */
  #los-servicios .ccard .cimg,
  #servicios .ccard .cimg{aspect-ratio:1.62;}
  #los-servicios .ccard .ctag,
  #servicios .ccard .ctag{font-size:10px;padding:6px 12px;top:11px;left:11px;}
  #los-servicios .ccard .cbody,
  #servicios .ccard .cbody{padding:16px 18px 18px;gap:6px;}
  #los-servicios .ccard h3,
  #servicios .ccard h3{font-size:17px;line-height:1.2;}
  #los-servicios .ccard p,
  #servicios .ccard p{font-size:13.5px;line-height:1.5;}
  #los-servicios .ccard .cprice,
  #servicios .ccard .cprice{font-size:12px;}
  #los-servicios .ccard .cprice b,
  #servicios .ccard .cprice b{font-size:14px;}
  #los-servicios .ccard .cgo,
  #servicios .ccard .cgo{width:34px;height:34px;}

  /* Puntitos de posición */
  .care-dots{
    display:flex;justify-content:center;align-items:center;gap:9px;
    margin:0 0 40px;padding:0;
  }
  .care-dots button{
    width:9px;height:9px;padding:0;border:none;border-radius:50%;
    background:rgba(6,38,45,.18);cursor:pointer;
    transition:background .2s ease,width .25s ease,border-radius .25s ease;
  }
  .care-dots button.on{background:var(--orange);width:26px;border-radius:9999px;}
}

/* ============================================================
   ASÍ FUNCIONA · paso 2 — ramas Productos / Servicios (27/08/2026)
   ============================================================ */
.scr-seg{
  display:flex;gap:4px;margin:0 16px 12px;padding:4px;
  background:rgba(255,255,255,.09);border-radius:9999px;
}
.scr-seg button{
  flex:1;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.6);border-radius:9999px;padding:8px 6px;
  transition:background .2s ease,color .2s ease;
}
.scr-seg button:hover{color:#fff;}
.scr-seg button.is-on{background:var(--orange);color:var(--navy);}
.scr-seg button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

.scr-sub{opacity:0;transform:translateY(6px);transition:opacity .26s ease,transform .3s ease;}
.scr-sub.is-on{opacity:1;transform:none;}
.scr-sub[hidden]{display:none;}

.mini-price small{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.55);margin-left:2px;}

/* Paso a paso de cada rama */
.scr-flow{display:flex;align-items:center;gap:7px;padding:14px 16px 0;}
.scr-flow span{
  font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(255,255,255,.45);white-space:nowrap;
}
.scr-flow span.on{color:var(--orange);}
.scr-flow i{flex:1;height:1.5px;border-radius:2px;background:rgba(255,255,255,.18);}

.fc-tick{
  width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--navy);flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
}
.how-stage-i .fc-curated{bottom:8%;left:-2px;transform:rotate(-2deg) translateY(10px);}
.how-stage-i .fc-curated.is-on{transform:rotate(-2deg);}

/* Paso 3 en dos ramas: el bloque "resuelto" ahora vive dentro de .scr-sub */
.scr-sub.scr-done{padding:4px 22px 0;}
.scr-sub.scr-done .done-check{width:54px;height:54px;font-size:26px;margin-bottom:10px;}
.scr-sub.scr-done .done-h{font-size:16px;}
.scr-sub.scr-done .done-p{margin-bottom:12px;}
.scr-sub.scr-done .done-row{padding:8px 12px;margin-bottom:7px;}

/* ---------- La opción no elegida avisa que se puede tocar ---------- */
.scr-seg button{position:relative;}
.scr-seg button:not(.is-on){
  background:rgba(var(--orange-rgb),.13);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(var(--orange-rgb),.5);
}
.scr-seg button:not(.is-on):hover{background:rgba(var(--orange-rgb),.24);}
/* el pulso solo hasta que la persona elige por primera vez */
.how-stage-i:not(.seg-used) .scr-seg button:not(.is-on)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:segPulse 2.3s ease-out infinite;
}
@keyframes segPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--orange-rgb),.55);}
  70%{box-shadow:0 0 0 9px rgba(var(--orange-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--orange-rgb),0);}
}
@media (prefers-reduced-motion:reduce){
  .scr-seg button:not(.is-on)::after{animation:none;}
}

/* ---------- Aviso discreto: la pantalla de la derecha es interactiva ---------- */
.stage-hint{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:max-content;max-width:100%;margin:22px auto 0;padding:8px 17px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:9999px;
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.62);text-align:center;
}
.sh-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none;
  animation:segPulse 2.6s ease-out infinite;}
.how-stage-i.seg-used .sh-dot{animation:none;}
@media (max-width:620px){
  .stage-hint{font-size:9.5px;letter-spacing:.07em;padding:7px 14px;margin-top:18px;}
}

/* ============================================================
   MOCKUP DE CELULAR — marco realista (27/08/2026)
   Afecta a index (03 · Así funciona) y servicios (dos mockups)
   ============================================================ */
.phone{
  border-radius:50px;padding:11px;
  background:linear-gradient(155deg,#1a4c57 0%,#0a3138 34%,#06262d 68%,#0d363e 100%);
  box-shadow:
    0 36px 74px rgba(6,38,45,.42),
    0 8px 20px rgba(6,38,45,.26),
    inset 0 0 0 1.2px rgba(255,255,255,.12),
    inset 0 1.5px 0 rgba(255,255,255,.18);
}
.phone .screen{border-radius:40px;position:relative;}

/* Botones laterales */
.phone::before,.phone::after{content:"";position:absolute;background:linear-gradient(90deg,#0a2f36,#17454f);}
.phone::before{left:-3px;top:118px;width:3.5px;height:76px;border-radius:4px 0 0 4px;}
.phone::after{right:-3px;top:152px;width:3.5px;height:54px;border-radius:0 4px 4px 0;}

/* Dynamic island con lente */
.phone .phone-notch{
  top:22px;width:86px;height:26px;
  background:#04171c;border-radius:9999px;z-index:6;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.phone .phone-notch::after{
  content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#1d4a54,#061a1f 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Barra de gestos */
.phone .screen::after{
  content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:108px;height:4.5px;border-radius:9999px;z-index:7;pointer-events:none;
  background:rgba(255,255,255,.45);
}
.phone:not(.phone-dark) .screen::after{background:rgba(6,38,45,.3);}

/* Reflejo de vidrio */
.phone .screen::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 26%,transparent 46%);
}

/* Barra de estado (index · Así funciona) */
.scr-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 21px 3px;color:#fff;position:relative;z-index:4;
}
.scr-status .st-time{font-size:12.5px;font-weight:900;letter-spacing:.01em;}
.scr-status .st-ico{display:flex;align-items:center;gap:5px;}
.scr-status svg{height:11px;width:auto;fill:currentColor;display:block;}
.phone-dark .scr-dark-head{padding:8px 20px 6px;}

@media (max-width:620px){
  .phone{border-radius:44px;padding:10px;}
  .phone .screen{border-radius:35px;}
  .phone .phone-notch{top:20px;width:78px;height:23px;}
  .phone::before{top:98px;height:64px;}
  .phone::after{top:126px;height:46px;}
}

/* ============================================================
   SITUACIONES — tira que corre sola, desktop y mobile (27/08/2026)
   ============================================================ */
.sit-run{
  position:relative;overflow:hidden;
  margin:0 calc(50% - 50vw) 52px;padding:5px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sit-run .situations{
  display:flex;flex-wrap:nowrap;width:max-content;gap:0;margin-bottom:0;
  animation:sitRun 30s linear infinite;
}
.sit-run .sit{flex:none;margin-right:12px;white-space:nowrap;}
.sit-run:hover .situations,
.sit-run.is-paused .situations{animation-play-state:paused;}
@keyframes sitRun{to{transform:translateX(var(--shift,-50%));}}

/* Sin JS o con motion reducido: deslizable a mano */
.sit-run.is-manual{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.sit-run.is-manual::-webkit-scrollbar{display:none;}
.sit-run.is-manual .situations{animation:none;}

@media (max-width:620px){
  .sit-run{margin-bottom:40px;}
  .sit-run .sit{font-size:13.5px;padding:9px 17px;margin-right:10px;}
}
@media (prefers-reduced-motion:reduce){
  .sit-run .situations{animation:none;}
}

/* ============================================================
   SERVICIOS · 02 — pantallas del recorrido (27/08/2026)
   ============================================================ */
/* Filas de personas cerca */
.scr-row{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  border-radius:14px;margin:0 16px 8px;padding:9px 11px;
}
.scr-row>img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--orange);flex:none;}
.scr-row .rw-n{display:block;font-size:12.5px;font-weight:900;color:#fff;line-height:1.2;}
.scr-row .rw-m{display:block;font-size:10.5px;color:rgba(255,255,255,.58);}
.scr-row .rw-m b{color:var(--orange);font-weight:900;}
.scr-row .rw-p{margin-left:auto;text-align:right;font-size:12px;font-weight:900;color:var(--orange);white-space:nowrap;}
.scr-row .rw-p small{display:block;font-size:9px;font-weight:700;color:rgba(255,255,255,.45);}

/* Perfil */
.scr-prof{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 20px 0;}
.scr-prof>img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2.5px solid var(--orange);margin-bottom:9px;}
.prof-n{font-size:16px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;}
.prof-m{font-size:11px;color:rgba(255,255,255,.6);margin-top:4px;}
.prof-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.prof-badges span{
  font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  padding:5px 9px;border-radius:9999px;background:rgba(var(--orange-rgb),.2);color:var(--orange);
}
.prof-quote{
  margin-top:11px;background:rgba(255,255,255,.07);border-radius:14px;padding:11px 13px;
  font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.82);text-align:left;
}
.prof-quote b{display:block;margin-top:5px;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);}
.prof-btn{
  margin-top:12px;width:100%;background:var(--orange);color:var(--navy);
  font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  border-radius:9999px;padding:11px;text-align:center;
}

/* ============================================================
   PASOS EN ONDA — camino serpenteante (27/08/2026)
   Variante .steps-wave (servicios · 02). El home sigue recto.
   ============================================================ */
.steps-wave{position:relative;}
.steps-wave .steps-rail{display:none;}

/* cada paso corrido a distinta altura del eje X */
.steps-wave .step-i{width:auto;margin-left:var(--dx,0px);}
.steps-wave .step-i:nth-of-type(1){--dx:0px;}
.steps-wave .step-i:nth-of-type(2){--dx:36px;}
.steps-wave .step-i:nth-of-type(3){--dx:56px;}
.steps-wave .step-i:nth-of-type(4){--dx:20px;}
.steps-wave .step-i.is-on{margin-left:calc(var(--dx,0px) - 14px);}

/* la curva que los une */
.wave-path{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;}
.wv-geo{fill:none;stroke:none;}
.wv-fill{
  fill:none;stroke:rgba(var(--orange-rgb),.38);stroke-width:1.8;stroke-linecap:round;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.wv-paw{
  fill:rgba(255,255,255,.3);
  transition:fill .4s ease;
}
.wv-paw.on{fill:var(--orange);}

@media (max-width:900px){
  .steps-wave .step-i:nth-of-type(2){--dx:24px;}
  .steps-wave .step-i:nth-of-type(3){--dx:38px;}
  .steps-wave .step-i:nth-of-type(4){--dx:14px;}
}
/* En mobile mantiene la misma lectura que en desktop: columna en onda,
   con huellas y descripciones. Solo la variante .steps-wave (servicios · 02). */
@media (max-width:760px){
  .steps-wave{flex-direction:column;gap:4px;}
  .steps-wave .wave-path{display:block;}
  .steps-wave .step-i{
    grid-template-columns:44px 1fr;gap:13px;align-items:start;
    justify-items:start;text-align:left;
    padding:12px 10px 12px 0;background:transparent;box-shadow:none;
    flex:none;min-width:0;
  }
  .steps-wave .step-i .snum{width:44px;height:44px;font-size:18px;}
  .steps-wave .step-h{font-size:14.5px;line-height:1.2;margin-bottom:5px;}
  .steps-wave .step-p{display:block;font-size:12.8px;line-height:1.5;max-width:none;}
  .steps-wave .step-i:nth-of-type(1){--dx:0px;}
  .steps-wave .step-i:nth-of-type(2){--dx:20px;}
  .steps-wave .step-i:nth-of-type(3){--dx:32px;}
  .steps-wave .step-i:nth-of-type(4){--dx:12px;}
  .steps-wave .step-i.is-on{
    background:rgba(255,255,255,.055);box-shadow:none;
    padding:12px 12px 12px 10px;
    margin-left:calc(var(--dx,0px) - 10px);
  }
  .steps-wave+.how-hint,.steps-wave~.how-hint{margin-left:0;}
}
@media (max-width:400px){
  .steps-wave .step-i:nth-of-type(2){--dx:14px;}
  .steps-wave .step-i:nth-of-type(3){--dx:24px;}
  .steps-wave .step-i:nth-of-type(4){--dx:9px;}
  .steps-wave .step-i{grid-template-columns:40px 1fr;gap:11px;}
  .steps-wave .step-i .snum{width:40px;height:40px;font-size:17px;}
  .steps-wave .step-h{font-size:13.5px;}
  .steps-wave .step-p{font-size:12.2px;}
}
@media (prefers-reduced-motion:reduce){
  .wv-fill,.wv-paw{transition:none;}
}

/* ============================================================
   PALETA POR PÁGINA — servicios usa un naranja más rojo (27/08/2026)
   ============================================================ */
.page-servicios{
  --orange:#F65A00;
  --orange-hover:#d44e00;
  --orange-rgb:246,90,0;
}

/* ============================================================
   QUÉ ELEGIMOS — ilustración por viñeta (28/08/2026)
   ============================================================ */
.cat-grid .cat-tile{padding:22px 22px 20px;gap:12px;}
.cat-grid .cat-tile .tico{
  width:auto;height:88px;background:none;border-radius:0;
  display:flex;align-items:flex-end;justify-content:flex-start;
  margin-bottom:2px;
}
.cat-grid .cat-tile .tico img{
  height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left bottom;
  transition:transform .28s ease;
}
.cat-grid .cat-tile:hover .tico img{transform:translateY(-3px) scale(1.04);}
/* fallback mientras no está la ilustración: el ícono de línea, más grande */
.cat-grid .cat-tile .tico svg{width:52px;height:52px;stroke:var(--orange);}
.cat-grid .cat-tile .tico img ~ svg{display:none;}

@media (max-width:1080px){
  .cat-grid .cat-tile .tico{height:58px;margin-bottom:0;}
  .cat-grid .cat-tile .tico svg{width:38px;height:38px;}
}
@media (max-width:430px){
  .cat-grid .cat-tile .tico{height:50px;}
}

/* ---------- Sello con lengua asomando en la card de Wana ---------- */
.cmp-seal{
  position:absolute;top:-54px;left:54%;z-index:3;
  width:136px;height:auto;pointer-events:none;
  transform:translateX(-50%) rotate(-7deg);
  transition:transform .3s ease;
}
.cmp-on:hover .cmp-seal{transform:translateX(-50%) rotate(-3deg) scale(1.04);}
@media (max-width:1080px){
  .cmp-seal{width:106px;top:-58px;}
}
@media (max-width:520px){
  .cmp-seal{width:84px;top:-46px;}
}
@media (prefers-reduced-motion:reduce){
  .cmp-seal,.cmp-on:hover .cmp-seal{transition:none;}
}

/* ============================================================
   HERO HOME v2 — foto a sangre + stickers (28/08/2026)
   ============================================================ */
.hero-v2{position:relative;padding:0;overflow:hidden;background:var(--cream);}
.hero-band{display:block;height:34px;background:var(--orange);}

.hero-shot{position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;pointer-events:none;}
.hero-shot-img{
  width:100%;height:100%;object-fit:cover;object-position:64% center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%);
          mask-image:linear-gradient(90deg,transparent 0,#000 17%);
}
.hero-v2 .wrap{position:relative;z-index:2;}
.hero-v2 .hero-copy{max-width:600px;padding:74px 0 100px;}

.hstk{position:absolute;height:auto;z-index:3;transform:translate(-50%,-50%);}
.hstk-1{width:30%;left:34%;top:57%;}
.hstk-2{width:27%;left:67%;top:45%;}
.hstk-3{width:30%;left:60%;top:85%;}

@media (max-width:1240px){
  .hero-v2 .hero-copy{max-width:520px;padding:60px 0 86px;}
  .hstk-1{width:32%;left:38%;top:58%;}
}
@media (max-width:1080px){
  .hero-shot{position:relative;top:0;right:auto;bottom:auto;width:100%;aspect-ratio:1.3;}
  .hero-shot-img{
    object-position:64% center;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-v2 .hero-copy{max-width:none;padding:34px 0 64px;}
  .hstk-1{width:32%;left:28%;top:60%;}
  .hstk-2{width:29%;left:72%;top:24%;}
  .hstk-3{width:32%;left:58%;top:87%;}
}
@media (max-width:620px){
  .hero-band{height:26px;}
  .hero-shot{aspect-ratio:1.05;}
  .hstk-1{width:39%;left:30%;top:62%;}
  .hstk-2{width:35%;left:71%;top:21%;}
  .hstk-3{width:39%;left:57%;top:88%;}
}

/* ============================================================
   ¿POR QUÉ WANA? — las 6 razones como tira naranja (28/08/2026)
   ============================================================ */
#por-que{padding-bottom:0;}
.ticker-orange{background:var(--orange);padding:18px 0;margin-top:64px;}
.ticker-orange .ticker-track{animation:none;}   /* la maneja el JS: loop exacto */
.ticker-orange:hover .ticker-track,
.ticker-orange.is-paused .ticker-track{animation-play-state:paused;}
.ticker-orange .tk{color:var(--navy);font-size:14px;}
.ticker-orange .tk::after{color:var(--cream);opacity:.85;}
@media (max-width:620px){
  .ticker-orange{padding:14px 0;margin-top:44px;}
  .ticker-orange .tk{font-size:12.5px;letter-spacing:.1em;}
  .ticker-orange .tk::after{margin:0 15px;}
}

/* ============================================================
   ¿POR QUÉ WANA? v2 — composición con cards ilustradas (28/08/2026)
   ============================================================ */
#por-que .brand-note{margin-bottom:20px;}
.why-stats{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:16px;margin-top:8px;
}
/* el flex-grow de cada pieza es su relación de aspecto: así todas
   terminan con la misma altura renderizada, sin fijar píxeles */
.why-stats img{width:100%;height:auto;display:block;min-width:0;}
.ws-cat{flex:1.43 1 0;}
.ws-a{flex:.861 1 0;}
.ws-b{flex:1.388 1 0;}
.ws-c{flex:1.453 1 0;}

/* especificidad mayor que .why-stats img, si no toma width:100% */
.why-stats .why-seal{
  position:absolute;right:3%;top:-52%;width:15.5%;height:auto;z-index:3;
  transform:rotate(-6deg);
  transition:transform .5s cubic-bezier(.3,.8,.3,1);
}
.why-stats:hover .why-seal{transform:rotate(4deg);}

@media (max-width:900px){
  .why-stats{flex-wrap:wrap;gap:12px;}
  .ws-cat{flex:0 0 100%;max-width:340px;margin:0 auto 4px;}
  .ws-a{flex:.861 1 0;}
  .ws-b{flex:1.388 1 0;}
  .ws-c{flex:0 0 100%;max-width:420px;margin:0 auto;}
  .why-stats .why-seal{width:24%;max-width:132px;top:-56px;right:0;}
}
@media (max-width:520px){
  .why-stats{gap:10px;}
  .ws-a{flex:0 0 34%;}
  .ws-b{flex:0 0 60%;}
  .why-stats .why-seal{width:30%;max-width:106px;top:-44px;}
}
@media (prefers-reduced-motion:reduce){
  .why-stats .why-seal,.why-stats:hover .why-seal{transition:none;transform:rotate(-6deg);}
}

/* ============================================================
   HERO TIENDA — foto a sangre + stickers (31/08/2026)
   ============================================================ */
.hero-tienda .hero-shot{top:0;width:52%;}
.hero-tienda .hero-shot-img{object-position:center;}
.hero-tienda .hero-copy{max-width:640px;}
.hero-tienda .hstk-t1{width:38%;left:20%;top:31%;--wob:-1.3deg;animation-delay:.2s;}
.hero-tienda .hstk-t2{width:32%;left:71%;top:34%;--wob:1.2deg;animation-delay:1.1s;}
.hero-tienda .hstk-t3{width:33%;left:15%;top:71%;--wob:1.4deg;animation-delay:2s;}
.hero-tienda .hstk-t4{width:18%;left:72%;top:77%;--wob:-1.2deg;animation-delay:2.9s;}
.hero-tienda .hstk-t5{width:29%;left:23%;top:87%;--wob:-1.1deg;animation-delay:3.8s;}

@media (max-width:1240px){
  .hero-tienda .hero-copy{max-width:520px;}
}
@media (max-width:1080px){
  .hero-tienda .hero-shot{width:100%;aspect-ratio:.95;max-width:520px;margin:0 auto;}
  .hero-tienda .hstk-t1{width:44%;left:24%;top:30%;}
  .hero-tienda .hstk-t2{width:38%;left:73%;top:34%;}
  .hero-tienda .hstk-t3{width:39%;left:20%;top:70%;}
  .hero-tienda .hstk-t4{width:21%;left:74%;top:76%;}
  .hero-tienda .hstk-t5{width:34%;left:27%;top:87%;}
}
@media (max-width:620px){
  .hero-tienda .hero-shot{aspect-ratio:.9;}
  .hero-tienda .hstk-t1{width:48%;left:26%;top:29%;}
  .hero-tienda .hstk-t2{width:42%;left:72%;top:34%;}
  .hero-tienda .hstk-t3{width:43%;left:22%;top:70%;}
  .hero-tienda .hstk-t4{width:23%;left:74%;top:76%;}
  .hero-tienda .hstk-t5{width:37%;left:29%;top:88%;}
}

/* ============================================================
   HOME · 02 SERVICIOS — naranja propio de la sección (31/08/2026)
   ============================================================ */
#servicios{
  --orange:#F65A00;
  --orange-hover:#d44e00;
  --orange-rgb:246,90,0;
}

/* ============================================================
   HOME · 03 ASÍ FUNCIONA v3 — pasos con contorno + composición (31/08/2026)
   ============================================================ */
#como-funciona{overflow:hidden;}
.how3{display:grid;grid-template-columns:1fr 1.24fr;gap:24px;align-items:center;}
.how3-steps{list-style:none;display:flex;flex-direction:column;gap:30px;}
.how3-step{position:relative;padding-left:58px;}
.h3n{
  position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
  font-size:clamp(46px,4.4vw,64px);font-weight:900;line-height:1;color:var(--orange);
  width:58px;text-align:center;
}
.h3box{
  position:relative;
  padding:6px 34px 6px 4px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
}
.h3box h3{
  color:var(--orange);font-weight:900;font-size:17px;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
}
.h3box p{color:#fff;font-size:15px;line-height:1.55;}

.how3-shot{position:relative;z-index:3;}
.how3-shot img{width:126%;max-width:none;margin-left:-11%;display:block;}

@media (max-width:1080px){
  .how3{grid-template-columns:1fr;gap:36px;}
  /* la composición cierra la sección, después de los 3 pasos */
  .how3-shot{order:2;margin-top:-20px;margin-bottom:-96px;}
  .how3-shot img{width:112%;margin-left:-6%;}
}
@media (max-width:620px){
  .how3-step{padding-left:44px;}
  .h3n{width:44px;font-size:38px;}
  .h3box{padding:4px 6px 4px 2px;}
  .h3box h3{font-size:15px;}
  .h3box p{font-size:14px;}
  .how3-shot img{width:120%;margin-left:-10%;}
}

/* ============================================================
   HEADER NARANJA (31/08/2026)
   ============================================================ */
.header{background:var(--orange);}
.header.scrolled{border-color:rgba(6,38,45,.16);box-shadow:0 4px 18px rgba(6,38,45,.16);}

.nav a{color:var(--navy);}
.nav a:hover{color:#fff;}
.nav .sep{color:var(--cream);}
/* página actual */
.nav a.is-here{
  color:var(--navy);text-decoration:underline;
  text-decoration-thickness:2.5px;text-underline-offset:6px;
}

/* el CTA del header no puede ser naranja sobre naranja */
.header .btn-orange{background:var(--navy);color:#fff;}
.header .btn-orange:hover{background:#0b3a44;box-shadow:0 4px 16px rgba(6,38,45,.28);}

.burger span{background:var(--navy);}

.mobile-menu{background:var(--orange);border-top:1.5px solid rgba(6,38,45,.2);}
.mobile-menu a{color:var(--navy);border-bottom:1.5px solid rgba(6,38,45,.16);}
.mobile-menu a:active{color:#fff;}
.mobile-menu a.is-here{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:5px;}

/* ---------- Los stickers de los heroes flotan apenas ---------- */
@keyframes hstkFloat{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
  50%    {transform:translate(-50%,calc(-50% - 8px)) rotate(var(--wob,1.2deg));}
}
.hstk{animation:hstkFloat 6s ease-in-out infinite;will-change:transform;}
.hstk-1{--wob:1.2deg;animation-delay:0s;}
.hstk-2{--wob:-1.2deg;animation-delay:1.4s;}
.hstk-3{--wob:1deg;animation-delay:2.8s;}
.hero-tienda .hstk-t1{--wob:-1.4deg;animation-delay:.5s;}
.hero-tienda .hstk-t2{--wob:1.4deg;animation-delay:2.1s;}
@media (prefers-reduced-motion:reduce){
  .hstk{animation:none;transform:translate(-50%,-50%);}
}

/* ---------- Isotipo del header ---------- */
.header .logo .logo-mark{height:54px;width:auto;}
@media (max-width:620px){
  .header .logo .logo-mark{height:44px;}
  .header .logo .logo-word{height:26px;}
}

/* ============================================================
   MOBILE — en los heroes va primero el texto y la foto al final (31/08/2026)
   ============================================================ */
@media (max-width:1080px){
  /* index y tienda (hero nuevo): la foto está antes en el HTML,
     así que hay que reordenar con flex */
  .hero-v2{display:flex;flex-direction:column;}
  .hero-v2 .wrap{order:1;}
  .hero-v2 .hero-shot{order:2;}
  .hero-v2 .hero-copy{padding-bottom:40px;}
}
@media (max-width:860px){
  /* servicios y restaurantes (hero viejo): anulamos el order:-1 */
  .hero-photo{order:2;}
}

/* ============================================================
   HERO SERVICIOS — foto a todo el ancho + stickers (31/08/2026)
   ============================================================ */
.hero-serv .hero-shot{width:100%;}
.hero-serv .hero-shot-img{
  object-position:center;
  -webkit-mask-image:none;mask-image:none;
}
.hero-serv .hero-copy{max-width:620px;padding:88px 0 104px;}
.hero-serv .hero-copy .lead{max-width:540px;}

.hero-serv .hstk-s1{width:13.5%;left:74%;top:48%;--wob:-1.3deg;animation-delay:.3s;}
.hero-serv .hstk-s2{width:15.5%;left:60%;top:81%;--wob:1.3deg;animation-delay:1.7s;}
.hero-serv .hstk-s3{width:15%;left:87%;top:82%;--wob:-1.1deg;animation-delay:3s;}

@media (max-width:1240px){
  .hero-serv .hero-copy{max-width:520px;padding:64px 0 80px;}
}
@media (max-width:1080px){
  .hero-serv .hero-shot{aspect-ratio:1.42;}
  .hero-serv .hero-shot-img{object-position:100% center;}
  .hero-serv .hero-copy{max-width:none;padding-bottom:10px;}
  .hero-serv .hstk-s1{width:31%;left:46%;top:38%;}
  .hero-serv .hstk-s2{width:35%;left:34%;top:80%;}
  .hero-serv .hstk-s3{width:34%;left:75%;top:84%;}
}
@media (max-width:620px){
  .hero-serv .hero-shot{aspect-ratio:1.18;}
  .hero-serv .hstk-s1{width:40%;left:45%;top:34%;}
  .hero-serv .hstk-s2{width:45%;left:32%;top:80%;}
  .hero-serv .hstk-s3{width:43%;left:71%;top:86%;}
}

/* servicios · mobile: la foto sube (menos aire entre los botones y la imagen) */
@media (max-width:1080px){
  .hero-serv .hero-copy{padding-bottom:8px;}
}

/* ---------- Slot de logo ya cargado (lugares adheridos) ---------- */
.logo-slot.is-filled{
  border:1.5px solid rgba(6,38,45,.14);border-style:solid;
  background:#fff;padding:7px 12px;overflow:hidden;
}
.logo-slot.is-filled img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}

/* ---------- Los slots de logos pasan a formato casi cuadrado ---------- */
.logo-row{gap:16px;}
.logo-slot{min-width:140px;max-width:196px;height:150px;}
.logo-slot.is-filled{padding:6px;}
.logo-slot.is-filled img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
@media (max-width:860px){
  .logo-slot{min-width:calc(50% - 8px);height:130px;}
}

/* ---------- Logo con transparencia real: sin blend, con recuadro ---------- */
.logo-slot.is-filled{
  background:#fff;
  border:1.5px solid rgba(6,38,45,.16);border-style:solid;
  border-radius:14px;padding:8px;
}
.logo-slot.is-filled img{mix-blend-mode:normal;}

/* ---------- Thumb de lugar con logo cargado ---------- */
.place .pthumb{width:96px;}
.place .pthumb.is-filled{
  background:#fff;border:1.5px solid rgba(6,38,45,.14);border-style:solid;padding:6px;
}
.place .pthumb.is-filled img{
  width:100%;height:100%;object-fit:contain;display:block;
}
@media (max-width:520px){
  .place .pthumb{width:80px;}
}

/* ============================================================
   SERVICIOS · 02 — mockups reales de la app por paso (01/09/2026)
   ============================================================ */
.how-mock{
  position:relative;width:100%;max-width:352px;margin:0 auto;
  aspect-ratio:1010/2014;                 /* recorte exacto del celular */
}
.mock-view{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .38s ease,transform .5s cubic-bezier(.3,.8,.3,1);
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.34));
}
.mock-view.is-on{opacity:1;transform:none;}
.mock-view[hidden]{display:none;}
@media (max-width:620px){
  .how-mock{max-width:290px;}
}
@media (prefers-reduced-motion:reduce){
  .mock-view{transition:none;}
}

/* ---------- Paso 1: la pantalla scrollea sola mostrando más servicios ----------
   El rect de la pantalla se midió sobre el PNG original (850x1878 dentro de un
   recorte de 1010x2014), de ahí los porcentajes exactos. */
div.mock-view{position:absolute;inset:0;filter:none;}
/* celu-marco.png tiene la pantalla CALADA (y la isla conservada):
   va ARRIBA de la tira, así su propio bisel recorta las esquinas */
.mock-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  pointer-events:none;
}
.mock-screen{
  position:absolute;left:9.01%;top:3.327%;width:84.158%;height:93.247%;
  overflow:hidden;background:#fff;z-index:1;border-radius:16px;
}
/* la sombra del celular: un rectángulo detrás, tapado por el marco */
div.mock-view::after{
  content:"";position:absolute;left:7.5%;right:7.5%;top:1.5%;bottom:1.5%;
  border-radius:46px;box-shadow:0 24px 46px rgba(0,0,0,.34);
  z-index:0;pointer-events:none;
}
.mock-strip{transition:transform .95s cubic-bezier(.4,0,.2,1);will-change:transform;}
.mock-strip img{display:block;width:100%;height:auto;}

@media (prefers-reduced-motion:reduce){
  .mock-strip{transition:none;}
}

/* ============================================================
   AJUSTES MOBILE 01/09/2026
   ============================================================ */
/* 1 · tienda: la foto del hero corrida a la izquierda en mobile.
   El recorte tenía la misma relación que la imagen, así que no había
   margen para mover nada: angostamos la caja para ganarlo. */


/* 3 · servicios · 03 Elegir tranquilo: dos viñetas por fila en celular */


/* ---------- tienda · 05 en mobile: la card baja y el sello se corre ---------- */
@media (max-width:1080px){
  #una-compra .cmp-on{margin-top:30px;}
  #una-compra .cmp-seal{left:44%;}
}
@media (max-width:520px){
  #una-compra .cmp-on{margin-top:24px;}
  #una-compra .cmp-seal{left:41%;}
}

/* ============================================================
   07 · GARANTÍA — sello reubicable (01/09/2026)
   Los hijos de la columna derecha ahora son items directos del grid,
   así en mobile el sello puede ir entre las viñetas y el botón.
   ============================================================ */
#garantia .ice-grid{align-items:center;}
#garantia .seal-wrap{grid-column:1;grid-row:1 / span 3;}
#garantia .g-head,
#garantia .g-cards,
#garantia .g-cta{grid-column:2;}
#garantia .g-cta{justify-self:start;}
#garantia .g-cards{margin-bottom:0;}

@media (max-width:1080px){
  #garantia .ice-grid{grid-template-columns:1fr;gap:28px;justify-items:start;}
  #garantia .seal-wrap,
  #garantia .g-head,
  #garantia .g-cards,
  #garantia .g-cta{grid-column:1;grid-row:auto;}
  /* orden en mobile: título → viñetas → sello → botón */
  #garantia .g-head{order:1;}
  #garantia .g-cards{order:2;}
  #garantia .seal-wrap{order:3;width:100%;}
  #garantia .g-cta{order:4;}
  #garantia .seal{width:min(210px,52vw);}
}
@media (max-width:620px){
  #garantia .seal{width:min(180px,48vw);}
  #garantia .ice-grid{gap:24px;}
}

/* ============================================================
   10 · WANACASH — sticker "Wanacash da más cash" (02/09/2026)
   ============================================================ */
#wanacash .wc-calc{position:relative;}
#wanacash .wc-seal{
  position:absolute;left:47%;transform:translateX(-50%);
  bottom:calc(100% - 30px);
  width:38%;max-width:224px;height:auto;z-index:3;pointer-events:none;
}
@media (max-width:1080px){
  /* en una columna el sticker va en el flujo, centrado arriba de las cards */
  #wanacash .wc-seal{
    position:static;transform:none;
    width:min(172px,46vw);max-width:none;
    display:block;margin:0 auto -6px;
  }
}
@media (max-width:620px){
  #wanacash .wc-seal{width:min(146px,40vw);}
}

/* el conjunto de la derecha (sticker + las dos filas) baja un poco */
#wanacash .wc-calc{margin-top:132px;}
@media (max-width:1080px){
  #wanacash .wc-calc{margin-top:56px;}
}

/* ---------- 01 · Tienda: los 3 beneficios con ilustración (02/09/2026) ---------- */
.benefit .bico{
  width:auto;height:auto;background:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.benefit .bico img{height:52px;width:auto;max-width:none;display:block;}
@media (max-width:620px){
  .benefit .bico img{height:44px;}
}

/* ---------- home · 03 en mobile: más aire abajo y composición más grande ---------- */
@media (max-width:1080px){
  #como-funciona{padding-bottom:96px;}
  /* el margen negativo la metía dentro del recorte de la sección y la cortaba */
  .how3-shot{margin-top:-8px;margin-bottom:0;}
  .how3-shot img{width:136%;margin-left:-18%;}
}
@media (max-width:620px){
  #como-funciona{padding-bottom:84px;}
  .how3-shot img{width:146%;margin-left:-23%;}
}

/* 3 · tienda · 07 Garantía: las tres viñetas más compactas en mobile */
@media (max-width:860px){
  #garantia .g-cards{gap:12px;}
  #garantia .g-card{padding:15px 14px;border-radius:15px;}
  #garantia .g-card .tico{width:34px;height:34px;border-radius:10px;margin-bottom:9px;}
  #garantia .g-card .tico svg{width:17px;height:17px;}
  #garantia .g-card strong{font-size:13.5px;line-height:1.25;margin-bottom:4px;}
  #garantia .g-card p{font-size:12.2px;line-height:1.45;}
}
@media (max-width:400px){
  #garantia .g-card{padding:13px 12px;}
  #garantia .g-card strong{font-size:12.8px;}
  #garantia .g-card p{font-size:11.8px;}
}

/* ============================================================
   09 · DÓNDE COMPRAR — celular asomando en la card de la app (02/09/2026)
   ============================================================ */
#donde-comprar .ch-app{overflow:visible;}
#donde-comprar .ch-phone{
  position:absolute;right:5%;top:-84px;z-index:3;
  width:35%;max-width:250px;height:auto;pointer-events:none;
}
@media (max-width:1080px){
  #donde-comprar .ch-app{margin-top:74px;}
  #donde-comprar .ch-phone{width:30%;max-width:190px;top:-64px;right:4%;}
}
@media (max-width:620px){
  #donde-comprar .ch-app{margin-top:62px;}
  #donde-comprar .ch-phone{width:36%;max-width:150px;top:-52px;right:3%;}
}

/* ---------- home · cobertura en mobile: pegada a la sección de arriba ---------- */
@media (max-width:860px){
  #cobertura.cov-slim{padding-top:16px;}
  #cobertura .cov-line{gap:22px;}
}

/* ============================================================
   SERVICIOS · 04 ASÍ SE VE — composición 3D de la app (02/09/2026)
   ============================================================ */
#descarga-app .app-mock{position:relative;}
#descarga-app .app-mock img{
  width:114%;max-width:none;margin-left:-7%;height:auto;display:block;
}
#descarga-app .phone-caption{margin-top:8px;}
@media (max-width:1080px){
  #descarga-app .app-mock img{width:106%;margin-left:-3%;}
}
@media (max-width:620px){
  #descarga-app .app-mock img{width:112%;margin-left:-6%;}
}

/* ============================================================
   SERVICIOS · 03 ELEGIR TRANQUILO — cards con contorno naranja
   y el ícono ilustrado montado sobre el borde (02/09/2026)
   ============================================================ */
#confianza .trust-grid{gap:22px;margin-top:34px;}
#confianza .trust-card{
  position:relative;overflow:visible;
  background:transparent;border:2px solid var(--orange);
  border-radius:18px;box-shadow:none;
  padding:86px 22px 24px;
}
#confianza .trust-card .tico{
  position:absolute;top:-44px;left:66%;transform:translateX(-50%);
  width:118px;height:auto;background:none;border-radius:0;margin:0;
  display:block;
}
/* max-width:none anula el img{max-width:100%} del reset, que era lo que
   frenaba el crecimiento */
#confianza .trust-card .tico img{width:100%;max-width:none;height:auto;display:block;}
#confianza .trust-card h3{font-size:16px;margin-bottom:8px;}
#confianza .trust-card p{font-size:14px;line-height:1.6;}

@media (max-width:1080px){
  #confianza .trust-grid{grid-template-columns:1fr 1fr;gap:18px;}
}
@media (max-width:860px){
  #confianza .trust-grid{gap:14px;margin-top:30px;}
  #confianza .trust-card{padding:60px 16px 18px;border-radius:16px;}
  #confianza .trust-card .tico{top:-32px;width:84px;}
  #confianza .trust-card h3{font-size:13.5px;line-height:1.25;margin-bottom:5px;}
  #confianza .trust-card p{font-size:12.2px;line-height:1.5;}
}
@media (max-width:400px){
  #confianza .trust-card{padding:52px 13px 15px;}
  #confianza .trust-card .tico{top:-26px;width:72px;}
  #confianza .trust-card h3{font-size:12.8px;}
  #confianza .trust-card p{font-size:11.8px;}
}

/* ============================================================
   TIENDA · 06 CÓMO LO ENTREGAMOS — cards con ilustración (02/09/2026)
   ============================================================ */
#entrega .bento{gap:16px;}
#entrega .bcard{
  position:relative;overflow:hidden;
  min-height:186px;padding:22px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
#entrega .bcard .bico{
  position:absolute;top:14px;right:14px;
  width:auto;height:auto;background:none;border-radius:0;margin:0;display:block;
}
#entrega .bcard .bico img{max-width:none;height:auto;display:block;}
#entrega .bcard .bn{font-size:clamp(34px,3.4vw,52px);}
#entrega .bcard .bl{margin-top:7px;}

/* tamaños por ilustración */
#entrega .bcard:nth-child(1) .bico img{width:172px;}   /* moto */
#entrega .bcard:nth-child(2) .bico img{width:74px;}    /* rayo */
#entrega .bcard:nth-child(4) .bico img{width:104px;}   /* pin */
#entrega .bcard:nth-child(2) .bico{top:10px;right:20px;}
#entrega .bcard:nth-child(4) .bico{top:38%;right:18px;transform:translateY(-50%);}

/* la card naranja: la ilustración ya trae el número */
#entrega .bcard-orange .bn{display:none;}
#entrega .bcard-orange .bico{position:static;margin-bottom:6px;}
#entrega .bcard-orange .bico img{width:74%;}

@media (max-width:1080px){
  #entrega .bcard{min-height:158px;}
  #entrega .bcard:nth-child(1) .bico img{width:132px;}
  #entrega .bcard:nth-child(2) .bico img{width:58px;}
  #entrega .bcard:nth-child(4) .bico img{width:80px;}
}
@media (max-width:520px){
  #entrega .bento{gap:12px;}
  #entrega .bcard{min-height:136px;padding:16px;}
  #entrega .bcard .bn{font-size:30px;}
  #entrega .bcard:nth-child(1) .bico img{width:104px;}
  #entrega .bcard:nth-child(2) .bico img{width:46px;}
  #entrega .bcard:nth-child(4) .bico img{width:62px;}
}

/* ---------- Footer sin columna Legal: 3 bloques (02/09/2026) ---------- */
.footer-grid{grid-template-columns:2.2fr 1fr 1fr;}
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1.7fr 1fr 1fr;}
}

/* mobile: el pin de "30 seg" un poco más arriba dentro de su card */
@media (max-width:1080px){
  #entrega .bcard:nth-child(4) .bico{top:28%;}
}
@media (max-width:520px){
  #entrega .bcard:nth-child(4) .bico{top:24%;}
}