/* Estilos compartidos de las landings por rubro (/peluquerias, /tienda-online…). Mismos tokens que la home. */
:root{
  --pine-950:#03140F; --pine-900:#06261D; --pine-850:#08362A; --pine-800:#0A4736; --pine-700:#0E5E48; --pine:#167160;
  --mint:#34AC7E; --mint-300:#67C7A0; --mint-100:#CDEEE0; --mint-50:#EAF7F1;
  --cream:#F6F2EC; --paper:#FBF9F5; --sand:#EFE9DF; --line:#E4DDD1;
  --ink:#0F1F1A; --ink-2:#56655F; --ink-3:#8A958F;
  --on-dark:#F6F2EC; --on-dark-2:rgba(246,242,236,.7); --on-dark-3:rgba(246,242,236,.45); --line-dark:rgba(246,242,236,.12);
  --wa:#25D366; --wa-bg:#E7DDD3; --wa-out:#D9FDD3;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:16px; --r-lg:24px; --r-xl:32px;
  --shadow:0 2px 6px rgba(15,31,26,.05), 0 18px 40px -18px rgba(15,31,26,.22);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Página de marca clara con secciones oscuras, igual que la home: sin cambio automático a modo oscuro */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3{ margin:0; font-weight:750; letter-spacing:-.03em; line-height:1.06; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:6px; }
.shell{ width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .shell{ padding:0 16px; } }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pine); }
.eyebrow i{ width:22px; height:1px; background:currentColor; opacity:.6; }
.dark .eyebrow{ color:var(--mint-300); }
.accent{ color:var(--mint-300); }

.btn{ --bg:var(--pine-850); --fg:var(--cream); display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 24px; border-radius:999px; background:var(--bg); color:var(--fg); font-weight:650; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(8,54,42,.6); }
.btn:active{ transform:none; }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.btn-cream{ --bg:var(--cream); --fg:var(--pine-900); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.dark .btn-ghost{ color:var(--on-dark); border-color:rgba(246,242,236,.25); }
.btn-ghost:hover{ box-shadow:none; border-color:currentColor; }
.btn-sm{ height:40px; padding:0 16px; font-size:14px; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.nav{ position:absolute; top:0; left:0; right:0; z-index:20; color:var(--on-dark); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:650; font-size:19px; letter-spacing:-.03em; }
.brand img{ width:32px; height:32px; border-radius:9px; }
.nav-right{ display:flex; align-items:center; gap:8px; }
.auth-area{ display:flex; align-items:center; }
.auth-btn{ display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; font-size:14px; opacity:.85; }
.auth-btn:hover{ opacity:1; background:rgba(255,255,255,.08); }
.auth-user{ display:flex; align-items:center; gap:8px; font-size:14px; }
.auth-user img{ width:28px; height:28px; border-radius:50%; }
.auth-user button{ font-size:13px; opacity:.65; text-decoration:underline; text-underline-offset:3px; }
.auth-user .auth-name{ font-weight:600; }
@media (max-width:560px){ .nav .auth-area, .nav .hide-s{ display:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; background:radial-gradient(1000px 520px at 80% -10%, rgba(52,172,126,.22), transparent 60%), var(--pine-900); color:var(--on-dark); padding:120px 0 72px; border-radius:0 0 var(--r-xl) var(--r-xl); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }
.hero h1{ font-size:clamp(38px, 6vw, 66px); margin:18px 0 20px; }
.hero .lead{ font-size:clamp(16.5px, 1.6vw, 19px); color:var(--on-dark-2); max-width:560px; }
.hero .lead b{ color:var(--on-dark); font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.chip{ height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line-dark); background:rgba(246,242,236,.04); color:var(--on-dark-2); font-size:14.5px; font-weight:600; transition:background-color .2s, color .2s, border-color .2s; }
.chip:hover{ color:var(--on-dark); border-color:rgba(246,242,236,.3); }
.chip[aria-pressed="true"]{ background:var(--cream); color:var(--pine-900); border-color:var(--cream); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ticks{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:22px; font-size:13.5px; color:var(--on-dark-3); }
.ticks span{ display:inline-flex; align-items:center; gap:7px; }
.ticks svg{ color:var(--mint-300); }
@media (max-width:560px){ .hero-cta .btn{ width:100%; } }

/* Celular con el recordatorio de WhatsApp */
.phone{ position:relative; width:min(330px, 100%); margin:0 auto; aspect-ratio:9/18.5; border-radius:44px; background:#0B0F0E; padding:11px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset; }
.screen{ position:relative; height:100%; border-radius:34px; overflow:hidden; background:var(--wa-bg); display:flex; flex-direction:column; }
.wa-top{ background:#075E54; color:#fff; display:flex; align-items:center; gap:10px; padding:30px 14px 12px; }
.wa-av{ width:34px; height:34px; border-radius:50%; background:var(--cream); color:var(--pine-900); display:grid; place-items:center; font-weight:750; font-size:13px; }
.wa-top b{ display:block; font-size:14.5px; font-weight:600; }
.wa-top small{ font-size:11.5px; opacity:.8; }
.wa-body{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.42; }
.wa-date{ align-self:center; background:#fff; color:#54656F; font-size:11px; padding:4px 10px; border-radius:8px; box-shadow:0 1px .5px rgba(0,0,0,.12); }
.bubble{ max-width:88%; background:#fff; color:#111B21; border-radius:10px; border-top-left-radius:2px; padding:8px 10px 6px; box-shadow:0 1px .5px rgba(0,0,0,.13); }
.bubble small{ display:block; text-align:right; font-size:10.5px; color:#667781; margin-top:2px; }
.bubble.out{ align-self:flex-end; background:var(--wa-out); border-radius:10px; border-top-right-radius:2px; }
.wa-btns{ display:grid; gap:4px; max-width:88%; }
.wa-btns span{ background:#fff; color:#027EB5; text-align:center; font-weight:600; font-size:13px; padding:9px; border-radius:10px; box-shadow:0 1px .5px rgba(0,0,0,.13); }
.wa-btns span.tapped{ background:#F0F2F5; }
.toast{ position:absolute; left:10px; right:10px; top:10px; z-index:2; display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.96); color:var(--ink); border-radius:18px; padding:10px 12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.45); font-size:12.5px; line-height:1.35; transform:translateY(-130%); transition:transform .6s var(--ease); }
.toast.show{ transform:none; }
.toast img{ width:30px; height:30px; border-radius:8px; }
.toast b{ display:block; font-size:12.5px; }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }
@media (max-width:920px){ .phone{ width:min(290px, 100%); } }

/* ---------- Secciones ---------- */
section{ padding:96px 0; }
@media (max-width:700px){ section{ padding:72px 0; } }
.sec-head{ max-width:720px; margin-bottom:44px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{ font-size:clamp(30px, 4.4vw, 48px); margin:14px 0 14px; }
.sec-head p{ color:var(--ink-2); font-size:17.5px; }

/* Calculadora */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:860px){ .calc{ grid-template-columns:1fr; } }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow); }
.field{ margin-bottom:26px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:600; font-size:15px; margin-bottom:12px; }
.field output{ font-size:22px; font-weight:750; letter-spacing:-.02em; color:var(--pine); font-variant-numeric:tabular-nums; }
input[type=range]{ width:100%; accent-color:var(--pine); height:28px; }
.result{ background:var(--pine-900); color:var(--on-dark); border:0; display:flex; flex-direction:column; justify-content:center; }
.result .big{ font-size:clamp(40px, 6vw, 58px); font-weight:800; letter-spacing:-.04em; line-height:1; margin:10px 0 14px; font-variant-numeric:tabular-nums; }
.result p{ color:var(--on-dark-2); }
.result p b{ color:var(--on-dark); }
.result .vs{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-dark); font-size:15px; }
.result .vs b{ color:var(--mint-300); }
.fine{ font-size:12.5px; color:var(--ink-3); margin-top:14px; }

/* Cómo funciona */
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; counter-reset:s; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; }
.step .n{ width:40px; height:40px; border-radius:12px; background:var(--mint-50); color:var(--pine); display:grid; place-items:center; font-weight:800; margin-bottom:18px; }
.step h3{ font-size:21px; margin-bottom:8px; }
.step p{ color:var(--ink-2); font-size:15.5px; }

/* Funciones */
.features{ background:var(--sand); border-radius:var(--r-xl); }
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:960px){ .grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr; } }
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.feat .ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--pine-850); color:var(--cream); margin-bottom:14px; }
.feat.star .ic{ background:var(--wa); color:#fff; }
.feat h3{ font-size:18px; letter-spacing:-.02em; margin-bottom:6px; }
.feat p{ color:var(--ink-2); font-size:15px; }

/* Servicios de la plantilla */
.svc-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center; }
@media (max-width:860px){ .svc-wrap{ grid-template-columns:1fr; } }
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.svc-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px; font-weight:600; }
.svc-list li span{ color:var(--ink-3); font-weight:500; font-size:14px; white-space:nowrap; }
.link-pill{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:#fff; border:1px dashed var(--mint-300); color:var(--pine-800); border-radius:999px; padding:10px 16px; font-weight:600; font-size:14.5px; word-break:break-all; }

/* Plan */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; margin:0 auto; align-items:stretch; }
@media (max-width:820px){ .plans{ grid-template-columns:1fr; } }
.plan-box{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow); }
.plan-box.featured{ border:2px solid var(--pine); }
.plan-box ul{ flex:1; }
.badge{ position:absolute; top:-13px; left:28px; background:var(--pine); color:var(--cream); font-size:12px; font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:999px; }
.ck.no{ background:var(--sand); color:var(--ink-3); }
li.off{ color:var(--ink-3); }
.plan-box .btn-ghost{ border-color:var(--line); }
.plan-box .pname{ font-weight:750; font-size:20px; }
.plan-box .pfor{ color:var(--ink-2); margin-top:4px; }
.price{ display:flex; align-items:baseline; gap:6px; margin:22px 0 4px; }
.price .amt{ font-size:52px; font-weight:800; letter-spacing:-.045em; }
.price .per{ color:var(--ink-3); font-size:16px; }
.perday{ color:var(--ink-3); font-size:14px; }
.plan-box ul{ list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:11px; }
.plan-box li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; }
.ck{ flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--mint-50); color:var(--pine); display:grid; place-items:center; }
.plan-alt{ text-align:center; color:var(--ink-2); font-size:15px; margin-top:22px; }
.plan-alt a{ color:var(--pine); font-weight:650; text-decoration:underline; text-underline-offset:3px; }

/* Preguntas */
.faq{ max-width:780px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:650; font-size:17.5px; letter-spacing:-.015em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; flex:none; width:30px; height:30px; border-radius:50%; background:var(--sand); display:grid; place-items:center; font-weight:500; font-size:20px; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--ink-2); padding:0 0 20px; max-width:680px; }

/* Final */
.final{ background:var(--pine-900); color:var(--on-dark); border-radius:var(--r-xl) var(--r-xl) 0 0; text-align:center; }
.final h2{ font-size:clamp(32px, 5vw, 54px); margin:16px auto 16px; max-width:760px; }
.final p{ color:var(--on-dark-2); max-width:560px; margin:0 auto; font-size:17.5px; }
.final .hero-cta{ justify-content:center; }
.share{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line-dark); font-size:15px; color:var(--on-dark-2); }
.share a{ color:var(--mint-300); font-weight:650; text-decoration:underline; text-underline-offset:3px; }
footer{ background:var(--pine-950); color:var(--on-dark-3); font-size:13.5px; padding:28px 0 96px; }
.foot{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; }
.foot nav{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot a:hover{ color:var(--on-dark); }
@media (min-width:761px){ footer{ padding-bottom:28px; } }

/* Barra fija en el celular */
.dock{ position:fixed; left:12px; right:12px; bottom:12px; z-index:30; display:none; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 18px; border-radius:999px; background:rgba(6,38,29,.94); color:var(--on-dark); box-shadow:0 18px 40px -16px rgba(0,0,0,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transform:translateY(140%); transition:transform .45s var(--ease); }
.dock b{ display:block; font-size:14px; }
.dock small{ color:var(--on-dark-3); font-size:12px; }
.dock.show{ transform:none; }
@media (max-width:760px){ .dock{ display:flex; } }

/* ═════════ Animaciones y detalles compartidos (home y landings) ═════════ */
.hero, .final{ isolation:isolate; }
.final{ position:relative; overflow:hidden; }
.aurora{ position:absolute; inset:-20% -10% auto; height:120%; z-index:-1; pointer-events:none; filter:blur(70px); opacity:.75; }
.aurora i{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.aurora i:nth-child(1){ width:46vw; height:46vw; left:-6vw; top:-8vw; background:radial-gradient(circle, rgba(52,172,126,.55), transparent 65%); animation:drift1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2){ width:40vw; height:40vw; right:-8vw; top:-4vw; background:radial-gradient(circle, rgba(22,113,96,.7), transparent 65%); animation:drift2 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3){ width:34vw; height:34vw; left:32vw; top:18vw; background:radial-gradient(circle, rgba(205,238,224,.22), transparent 65%); animation:drift3 30s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(8vw, 6vw) scale(1.15); } }
@keyframes drift2{ to{ transform:translate(-10vw, 8vw) scale(.9); } }
@keyframes drift3{ to{ transform:translate(-6vw, -6vw) scale(1.2); } }
.gridbg{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(246,242,236,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,242,236,.05) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
.hero .accent{ background:linear-gradient(100deg, var(--mint-300) 20%, #E8FFF4 45%, var(--mint) 60%, var(--mint-300) 80%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
@keyframes shine{ to{ background-position:-250% 0; } }
/* Aparición al bajar (la clase js la pone el <head>; sin JS se ve todo) */
html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d, 0s); }
html.js .rv.in{ opacity:1; transform:none; }
/* El celular de la portada flota */
.hero .phone{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-10px); } }
/* Detalles al pasar el mouse */
.step, .feat, .pain, .plan-box, .card:not(.result){ transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.step:hover, .feat:hover, .pain:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mint-100); }
.plan-box:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(15,31,26,.35); }
.plan-box.featured{ box-shadow:0 0 0 6px rgba(52,172,126,.10), var(--shadow); }
.feat .ic, .step .n{ transition:transform .4s var(--ease); }
.feat:hover .ic, .step:hover .n{ transform:scale(1.08) rotate(-4deg); }
.chip{ transition:background-color .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.chip:hover{ transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){
  .aurora i, .hero .accent, .hero .phone{ animation:none !important; }
  html.js .rv{ opacity:1; transform:none; transition:none; }
}