/* Desenchufe · estilos de la web (portada y negocios).
   Verde profundo + acento arena (el conector del logo). Celulares con marco realista, sombras en capas
   y aparición suave al bajar (solo si el navegador lo permite y la persona no pidió menos movimiento). */
:root{
  --verde:#0F3F35; --verde-2:#14503F; --verde-app:#1B6B5A; --menta:#5FD0B0; --menta-suave:#E6F4EE;
  --arena:#FFDDB0; --arena-osc:#3A2400; --tinta:#10201B; --gris:#52615B; --linea:#DCE5E0; --fondo:#F5FAF7; --blanco:#FFFFFF;
  --disp:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif; --body:'Figtree',system-ui,-apple-system,sans-serif;
  --ancho:1160px;
  --sombra-1:0 1px 2px rgba(16,32,27,.05),0 4px 10px rgba(16,32,27,.05),0 14px 34px rgba(16,32,27,.07);
  --sombra-2:0 2px 4px rgba(16,32,27,.06),0 10px 24px rgba(16,32,27,.09),0 30px 60px rgba(16,32,27,.12);
  --suave:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--tinta); background:var(--fondo); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp); font-weight:800; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0}
.envolver{max-width:var(--ancho); margin:0 auto; padding-inline:24px}
.seccion{padding-block:110px; position:relative}
.oscura{background:var(--verde); color:#fff}
.etiqueta{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde-app)}
.etiqueta::before{content:""; width:18px; height:2px; background:currentColor; border-radius:2px}
.oscura .etiqueta{color:var(--menta)}
.titulo{font-size:clamp(34px,5vw,58px); line-height:1.02; margin-top:12px}
.bajada{font-size:19px; color:var(--gris); max-width:60ch; margin-top:18px}
.oscura .bajada{color:#CFE3DB}
.resalto{color:var(--arena)}
.resalto-v{color:var(--verde-app)}
:focus-visible{outline:3px solid var(--menta); outline-offset:3px; border-radius:8px}

/* ---------- Barra ---------- */
.barra{position:sticky; top:0; z-index:20; background:rgba(245,250,247,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid rgba(220,229,224,.7); transition:box-shadow .3s}
.barra.con-sombra{box-shadow:0 6px 24px rgba(16,32,27,.08)}
.barra .envolver{display:flex; align-items:center; gap:28px; height:70px}
.marca{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:23px; text-decoration:none; letter-spacing:-.02em}
.marca i{font-style:normal; color:var(--verde-app)}
.marca svg{width:34px; height:34px; filter:drop-shadow(0 3px 6px rgba(16,32,27,.25))}
.links{display:flex; gap:24px; font-size:15px; font-weight:600; color:var(--gris)}
.links a{text-decoration:none; position:relative; padding:4px 0}
.links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--verde-app); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--suave)}
.links a:hover{color:var(--tinta)} .links a:hover::after,.links a[aria-current="page"]::after{transform:scaleX(1)}
.links a[aria-current="page"]{color:var(--tinta)}
.barra .acciones{margin-left:auto; display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 22px; font:700 15px var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .25s var(--suave), box-shadow .25s var(--suave), background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-arena{background:var(--arena); color:var(--arena-osc); box-shadow:0 6px 18px rgba(255,221,176,.35), inset 0 -2px 0 rgba(58,36,0,.08)}
.btn-arena:hover{box-shadow:0 10px 26px rgba(255,200,130,.5)}
.btn-linea{border-color:var(--linea); color:var(--tinta); background:#fff}
.btn-linea-clara{border-color:rgba(255,255,255,.35); color:#fff}
.btn-grande{padding:16px 28px; font-size:16.5px}
@media (max-width:900px){ .links{display:none} .barra .btn-linea{display:none} }

/* ---------- Celular realista ---------- */
.cel-escena{position:relative; justify-self:center; width:min(320px,78vw)}
.cel-escena::before{content:""; position:absolute; inset:8% -18% 4%; background:radial-gradient(closest-side,rgba(95,208,176,.45),rgba(95,208,176,0)); filter:blur(30px); z-index:0}
.cel-escena.arena::before{background:radial-gradient(closest-side,rgba(255,221,176,.55),rgba(255,221,176,0))}
.cel{position:relative; z-index:1; border-radius:52px; padding:11px; aspect-ratio:9/19.3;
  background:linear-gradient(150deg,#3a4643 0%,#151c1a 35%,#0b100f 70%,#2a3431 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 3px #050807, 0 2px 4px rgba(0,0,0,.2), 0 26px 50px -12px rgba(8,30,24,.45), 0 60px 110px -30px rgba(8,30,24,.55)}
.cel::before{content:""; position:absolute; right:-3px; top:22%; width:4px; height:11%; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#1b2321,#3b4744)}   /* encendido */
.cel::after{content:""; position:absolute; right:-3px; top:37%; width:4px; height:17%; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#1b2321,#3b4744)}   /* volumen */
.cel-pantalla{position:relative; height:100%; border-radius:42px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.cel-pantalla::before{content:""; position:absolute; top:11px; left:50%; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:#0b0f0e; box-shadow:inset 0 0 0 2px #1d2624; z-index:3}  /* cámara */
.cel-pantalla::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%); pointer-events:none; z-index:2}  /* reflejo */
.cel-estado{display:flex; justify-content:space-between; align-items:center; padding:12px 26px 4px; font:600 12.5px var(--body); color:#10201B; flex:none}
.cel-estado .iconos{display:flex; gap:5px; align-items:center}
.cel-estado svg{height:11px; width:auto}
.cel-pantalla img{width:100%; flex:1; object-fit:cover; object-position:top}
.flotar{animation:flotar 7s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* Etiquetas que flotan alrededor del celular */
.globo{position:absolute; z-index:2; background:#fff; color:var(--tinta); border-radius:16px; padding:10px 14px; font-size:13.5px; font-weight:700; box-shadow:var(--sombra-2); display:flex; align-items:center; gap:8px; white-space:nowrap}
.globo small{display:block; font-weight:500; color:var(--gris); font-size:11.5px}
.globo .ico{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--menta-suave); font-size:16px}
@media (max-width:560px){ .globo{display:none} }

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1200px 600px at 85% 30%,rgba(95,208,176,.18),transparent 60%),radial-gradient(900px 500px at 0% 100%,rgba(255,221,176,.10),transparent 60%),var(--verde); color:#fff; overflow:hidden; position:relative}
.hero .envolver{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-block:84px 90px}
.hero h1{font-size:clamp(46px,7.2vw,90px); line-height:.95}
.hero .bajada{color:#D6E9E1; font-size:20px; margin-top:24px; max-width:30em}
.tiendas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.tienda{display:flex; align-items:center; gap:10px; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04); border-radius:16px; padding:11px 18px; text-decoration:none; color:#fff; min-width:200px; transition:transform .25s var(--suave), background .25s, border-color .25s}
.tienda:hover{transform:translateY(-2px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45)}
.tienda small{display:block; font-size:11.5px; opacity:.75; font-weight:500}
.tienda b{display:block; font-size:16px}
.tienda svg{width:24px; height:24px; flex:none}
.tienda.pronto{cursor:default}
.chico{font-size:13.5px; color:#A9C7BB; margin-top:16px}
@media (max-width:900px){ .hero .envolver{grid-template-columns:1fr; padding-top:52px} }

/* Entrada del hero (al cargar) */
.entra{animation:entrar .9s var(--suave) both; animation-delay:var(--d,0s)}
@keyframes entrar{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

/* ---------- Aparición al bajar ---------- */
html.js .r{opacity:0; transform:translateY(34px); transition:opacity .9s var(--suave), transform .9s var(--suave); transition-delay:var(--d,0s)}
html.js .r.izq{transform:translateX(-40px)} html.js .r.der{transform:translateX(40px)} html.js .r.zoom{transform:scale(.94)}
html.js .r.visible{opacity:1; transform:none}

/* ---------- Franja de datos ---------- */
.datos{background:var(--verde-2); color:#fff; position:relative}
.datos .envolver{display:grid; grid-template-columns:repeat(4,1fr); padding-block:38px}
.dato{padding:6px 22px; border-left:1px solid rgba(255,255,255,.16)}
.dato:first-child{border-left:0; padding-left:0}
.dato b{display:block; font-family:var(--disp); font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.02em; color:var(--arena)}
.dato span{display:block; font-size:14.5px; color:#BFD9CF; margin-top:8px}
@media (max-width:760px){ .datos .envolver{grid-template-columns:repeat(2,1fr); row-gap:26px} .dato:nth-child(3){border-left:0; padding-left:0} }

/* ---------- Tarjetas ---------- */
.grilla-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px}
.grilla-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
.tarjeta{background:#fff; border-radius:24px; padding:28px; box-shadow:var(--sombra-1); display:flex; flex-direction:column; gap:10px; transition:transform .35s var(--suave), box-shadow .35s var(--suave); border:1px solid rgba(220,229,224,.6)}
.tarjeta:hover{transform:translateY(-6px); box-shadow:var(--sombra-2)}
.tarjeta .ico{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:23px; background:linear-gradient(140deg,var(--menta-suave),#d3efe4); box-shadow:inset 0 0 0 1px rgba(27,107,90,.08)}
.tarjeta .grande{font-family:var(--disp); font-weight:800; font-size:34px; line-height:1; color:var(--verde-app)}
.tarjeta h3{font-size:22px; line-height:1.12}
.tarjeta p{color:var(--gris); font-size:15.5px}
@media (max-width:980px){ .grilla-4{grid-template-columns:repeat(2,1fr)} .grilla-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grilla-4,.grilla-3{grid-template-columns:1fr} }

/* ---------- Pasos ---------- */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px}
.paso{border-radius:22px; padding:26px; background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); box-shadow:0 20px 40px -20px rgba(0,0,0,.4); transition:transform .35s var(--suave), border-color .35s}
.paso:hover{transform:translateY(-6px); border-color:rgba(255,221,176,.35)}
.paso .n{display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--arena); color:var(--arena-osc); font-family:var(--disp); font-weight:800; font-size:22px; box-shadow:0 8px 20px rgba(255,221,176,.25)}
.paso h3{font-size:23px; margin-top:16px}
.paso p{color:#CFE3DB; font-size:15.5px; margin-top:8px}
.claro .paso{background:#fff; border-color:rgba(220,229,224,.7); box-shadow:var(--sombra-1)}
.claro .paso p{color:var(--gris)}
@media (max-width:900px){ .pasos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .pasos{grid-template-columns:1fr} }

/* ---------- Bloques con celular ---------- */
.dos{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.dos.invertido .texto{order:2}
.lista{display:flex; flex-direction:column; gap:14px; margin-top:26px; padding:0; list-style:none}
.lista li{display:flex; gap:12px; font-size:16.5px}
.lista li::before{content:"✓"; display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:var(--menta-suave); color:var(--verde-app); font-weight:800; font-size:13px; flex:none; margin-top:1px}
.oscura .lista li::before{background:rgba(255,221,176,.15); color:var(--arena)}
.medallas{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.medalla{display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:6px 16px 6px 6px; font-weight:700; font-size:14px; box-shadow:var(--sombra-1)}
.medalla i{width:30px; height:30px; border-radius:50%; display:block; border:5px solid; background:var(--verde-app); box-shadow:0 3px 8px rgba(0,0,0,.18)}
@media (max-width:900px){ .dos{grid-template-columns:1fr; gap:48px} .dos.invertido .texto{order:0} }

/* ---------- Bandas y chips ---------- */
.banda{border-radius:32px; padding:56px; background:radial-gradient(700px 300px at 100% 0%,rgba(95,208,176,.22),transparent 60%),var(--verde); color:#fff; box-shadow:var(--sombra-2); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; overflow:hidden}
.banda .titulo{color:#fff}
.banda .bajada{color:#CFE3DB}
.banda .etiqueta{color:var(--menta)}
.hero h1.chico-h1{font-size:clamp(44px,6.2vw,80px)}
@media (max-width:900px){ .banda{grid-template-columns:1fr; padding:36px 26px} }
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.chip{border:1.5px solid var(--linea); background:#fff; border-radius:999px; padding:10px 18px; font-weight:700; font-size:15px; box-shadow:0 2px 6px rgba(16,32,27,.05)}
.chip.pronto{border-style:dashed; color:var(--gris); background:transparent; box-shadow:none}
.chip.no{background:#FFF3F1; border-color:#F3D4CF; color:#8E3B2E}

/* ---------- Reglas ---------- */
.reglas{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.reglas ol{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; background:#fff; border-radius:24px; box-shadow:var(--sombra-1); padding:8px 26px}
.reglas li{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--linea); font-size:16.5px}
.reglas li:last-child{border-bottom:0}
.reglas li b{font-family:var(--disp); color:var(--verde-app); font-size:20px; min-width:28px}
@media (max-width:900px){ .reglas{grid-template-columns:1fr; gap:24px} }

/* ---------- Preguntas ---------- */
.preguntas{max-width:820px; margin:44px auto 0; display:flex; flex-direction:column; gap:12px}
details{background:#fff; border-radius:20px; padding:4px 24px; box-shadow:var(--sombra-1); transition:box-shadow .3s}
details[open]{box-shadow:var(--sombra-2)}
summary{cursor:pointer; list-style:none; font-weight:700; font-size:17.5px; padding:18px 0; display:flex; justify-content:space-between; gap:12px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--menta-suave); color:var(--verde-app); font-family:var(--disp); font-size:20px; flex:none; transition:transform .3s var(--suave)}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--gris); padding-bottom:20px; font-size:16px}

/* ---------- Cierre y pie ---------- */
.cierre{text-align:center; background:radial-gradient(900px 400px at 50% 0%,rgba(95,208,176,.2),transparent 60%),var(--verde)}
.cierre h2{font-size:clamp(40px,6vw,74px); line-height:.98}
.cierre .tiendas{justify-content:center}
.pie{background:#0A2C25; color:#BFD9CF; font-size:14.5px}
.pie .envolver{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px; padding-block:52px}
.pie h4{color:#fff; font-size:15px; margin:0 0 10px}
.pie a{display:block; text-decoration:none; padding:3px 0} .pie a:hover{color:#fff}
.pie .legal{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:13px; color:#86A99B}
@media (max-width:760px){ .pie .envolver{grid-template-columns:1fr} }
@media (max-width:640px){ .seccion{padding-block:76px} body{font-size:16px} }

/* ---------- Panel de ejemplo (página de negocios) ---------- */
.panel-demo{background:#fff; color:var(--tinta); border-radius:24px; padding:22px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); display:flex; flex-direction:column; gap:14px}
.panel-demo .met{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.panel-demo .met div{background:var(--fondo); border-radius:14px; padding:12px}
.panel-demo .met b{display:block; font-family:var(--disp); font-size:30px; line-height:1; color:var(--verde-app)}
.panel-demo .met span{font-size:12px; color:var(--gris)}
.panel-demo .fila{display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--linea); border-radius:14px; padding:12px 14px}
.panel-demo .fila small{display:block; color:var(--gris); font-size:12.5px}
.panel-demo .corazon{color:#D9485F; font-weight:700; font-size:13px; white-space:nowrap}
.pin{font-family:var(--disp); font-size:34px; letter-spacing:.3em; color:var(--verde-app)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flotar,.entra{animation:none}
  html.js .r{opacity:1; transform:none; transition:none}
  .btn,.tarjeta,.paso,.tienda{transition:none}
}