/* Estilos de la web comercial de Citalma (portada y páginas por tipo de negocio) */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root{
  --bg:#f3faf7; --paper:#fff; --tint:#e2f1eb; --ink:#0f2420; --ink-2:#34504a; --muted:#5a726d; --line:rgba(15,36,32,.1); --line-2:rgba(15,36,32,.16);
  --acc:#087a63; --acc-d:#066552; --acc-soft:#dbf3ea; --plum:#0c221d; --warm:#12945f; --warm-soft:#dcf4e6;
  --grad:linear-gradient(120deg,#0f9fae 0%,#0faa86 50%,#36b86c 100%); --grad-btn:linear-gradient(120deg,#0b8593 0%,#0a8a6c 55%,#1a8a4c 100%); --grad-claro:linear-gradient(120deg,#c6eff0 0%,#c3f1dc 50%,#d6f4c6 100%);
  --sage:#3f7d63; --sky:#3c6ea8; --sun:#c98a2b;
  --r:14px; --r-lg:22px; --wrap:1180px; --gut:clamp(20px,4vw,40px);
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --sh-1:0 1px 2px rgba(15,36,32,.06),0 0 0 1px rgba(15,36,32,.06);
  --sh-2:0 1px 2px rgba(15,36,32,.05),0 12px 32px -12px rgba(10,50,42,.22),0 0 0 1px rgba(15,36,32,.07);
}
*{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--warm);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
h1,h2,h3{margin:0;font-weight:560;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(28px,3.1vw,40px)} h3{font-size:18px;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:550;color:var(--acc);letter-spacing:.01em}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lead{font-size:clamp(16px,1.35vw,18px);color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;font-weight:550;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease),background-color .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn--p{background:var(--grad-btn);background-size:140% 100%;background-position:0 0;color:#fff;transition:background-position .4s var(--ease),box-shadow .2s;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -8px rgba(8,122,99,.7)}
.btn--g{background:var(--paper);color:var(--ink);box-shadow:var(--sh-1)}
.btn--sm{height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.btn svg{width:16px;height:16px}
@media (hover:hover){.btn--p:hover{background-position:100% 0}.btn--g:hover{box-shadow:0 0 0 1px var(--line-2),0 4px 12px -6px rgba(15,36,32,.2)}}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,250,247,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:620;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.logo img{display:block;height:30px;width:auto}
footer .logo img{height:34px}
.logo i svg{width:16px;height:16px;color:#fff}
.nav__links{display:flex;gap:4px;margin-left:8px}
.nav__links a{padding:8px 12px;border-radius:8px;font-size:15px;color:var(--ink-2);text-decoration:none}
.nav__links a:hover{background:rgba(15,36,32,.05);color:var(--ink)}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav__in{font-size:15px;color:var(--ink-2);text-decoration:none;padding:8px 12px}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:0;background:var(--paper);box-shadow:var(--sh-1);place-items:center;cursor:pointer}
.sheet{display:none}
@media (max-width:900px){
  .nav__links,.nav__in{display:none} .burger{display:grid}
  .nav__end .btn{height:40px;padding:0 14px;font-size:14px}
  .sheet{display:block;position:fixed;inset:64px 0 auto 0;z-index:49;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .sheet.open{opacity:1;transform:none;pointer-events:auto}
  .sheet a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px}
}
@media (max-width:420px){.nav__end .btn span.long{display:none}}

/* hero */
.hero{padding:56px 0 72px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(36px,4.1vw,54px);margin:18px 0 18px}
.hero h1 em.s{font-size:1.08em}
.hero .lead{margin-bottom:28px}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks svg{width:15px;height:15px;color:var(--sage)}

/* the demo stage in the hero */
.stage{position:relative}
.stage__tabs{display:inline-flex;gap:2px;padding:4px;background:var(--paper);border-radius:12px;box-shadow:var(--sh-1);margin-bottom:14px}
.stage__tabs button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;font-size:14px;font-weight:550;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:8px;position:relative}
.stage__tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.stage__tabs .bar{position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.35);transform-origin:left;transform:scaleX(0)}
.stage__tabs button[aria-selected=true] .bar{animation:fill 6s linear forwards}
.stage.paused .stage__tabs .bar{animation:none;opacity:0}
@keyframes fill{to{transform:scaleX(1)}}
.screen{position:relative;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;aspect-ratio:16/11}
.view{position:absolute;inset:0;opacity:0;transform:translateY(6px) scale(.995);transition:opacity .35s var(--ease),transform .45s var(--ease);pointer-events:none}
.view.on{opacity:1;transform:none;pointer-events:auto}
.win{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.win b{color:var(--ink);font-weight:560}.win .sp{flex:1}
.win .dots{display:flex;gap:5px}.win .dots i{width:9px;height:9px;border-radius:50%;background:rgba(15,36,32,.13)}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:550;white-space:nowrap;background:var(--tint);color:var(--ink-2)}
.pill--acc{background:var(--acc-soft);color:var(--acc-d)}.pill--ok{background:#e4f1e9;color:#2c6a4b}.pill--warn{background:#fbeedd;color:#8d5417}

/* agenda view */
.ag{position:relative;display:grid;grid-template-columns:48px repeat(3,minmax(0,1fr));grid-template-rows:38px 1fr;height:calc(100% - 44px);font-size:12.5px;overflow:hidden}
.ag__h{grid-column:1/-1;display:grid;grid-template-columns:inherit;border-bottom:1px solid var(--line);height:38px}
.ag__h span{display:flex;align-items:center;gap:7px;padding:0 10px;font-weight:560;border-left:1px solid var(--line)}
.ag__h span:first-child{border:0}
.av{width:20px;height:20px;border-radius:50%;color:#fff;display:grid;place-items:center;font:600 10px/1 var(--sans);flex:none}
.ag__t{display:grid;grid-auto-rows:54px;align-content:start;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ag__t span{padding:5px 0 0 10px;border-top:1px solid transparent}
.ag__c{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 53px,var(--line) 53px 54px)}
.ev{position:absolute;left:5px;right:5px;top:calc(var(--t)*54px + 3px);height:calc(var(--d)*54px - 6px);border-radius:8px;padding:5px 8px;overflow:hidden;background:color-mix(in oklab,var(--c) 12%,#fff);box-shadow:inset 3px 0 0 var(--c);display:flex;flex-direction:column;gap:1px}
.ev b{font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .pill{margin-top:3px;align-self:flex-start;height:19px;font-size:11px}
.ev--new{background:#fff;box-shadow:inset 3px 0 0 var(--c),0 0 0 1.5px var(--c),0 10px 22px -12px rgba(8,122,99,.6);animation:pop .6s var(--ease) 1s both}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.now{position:absolute;left:48px;right:0;top:calc(38px + 2.4*54px);border-top:1.5px solid var(--acc);z-index:2}
.now::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* booking view */
.bk{display:grid;grid-template-columns:1.1fr 1fr;height:calc(100% - 44px)}
.bk__side{padding:20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:13px}
.bk__salon{display:flex;align-items:center;gap:10px;margin-bottom:4px}.bk__salon .av{width:36px;height:36px;font-size:13px;background:var(--acc)}
.bk__salon b{display:block;font-size:15px;font-weight:580}
.svc{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.svc small{display:block;color:var(--muted);font-size:12px}.svc b{font-weight:560}
.svc.on{box-shadow:inset 0 0 0 1.5px var(--acc);background:var(--acc-soft)}
.bk__main{padding:20px;display:flex;flex-direction:column;gap:14px;font-size:13px}
.days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.days span{padding:7px 0;border-radius:10px;background:var(--tint);color:var(--muted);font-size:11.5px}.days b{display:block;font-size:15px;color:var(--ink);font-weight:560}
.days .on{background:var(--ink);color:rgba(255,255,255,.7)}.days .on b{color:#fff}
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hours span{height:34px;border-radius:10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);font-weight:550;font-variant-numeric:tabular-nums}
.hours .off{color:#b9b0b3;text-decoration:line-through;box-shadow:inset 0 0 0 1px var(--line)}
.hours .on{background:var(--acc);color:#fff;box-shadow:none}
.confirm{margin-top:auto;height:40px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:560}

/* file view */
.fi{padding:18px 20px;display:flex;flex-direction:column;gap:12px;height:calc(100% - 44px);font-size:13px}
.fi__top{display:flex;align-items:center;gap:12px}.fi__top .av{width:40px;height:40px;font-size:14px;background:var(--warm)}
.fi__top b{display:block;font-size:16px;font-weight:580}.fi__top .sp{flex:1}
.alert{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;border-radius:10px;background:#fdebeb;color:#8a2424}
.alert svg{width:15px;height:15px;flex:none;margin-top:2px}
.fi__g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{padding:11px 13px;border-radius:12px;background:var(--tint);display:flex;flex-direction:column;gap:3px}
.box small{color:var(--muted);font-size:11.5px}.box b{font-weight:560}
.box code{font:550 13px/1.4 ui-monospace,"SF Mono",Menlo,monospace}
.rows div{display:grid;grid-template-columns:62px 1fr auto;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.rows time{color:var(--muted);font-variant-numeric:tabular-nums}.rows em{font-style:normal;color:var(--muted)}

/* floating message over the stage */
.bubble{position:absolute;left:-28px;bottom:-26px;z-index:3;width:290px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--plum);color:#fff;box-shadow:0 20px 40px -18px rgba(5,20,17,.6);font-size:13px;line-height:1.4;animation:pop .7s var(--ease) 1.8s both}
.bubble img{width:22px;height:22px;flex:none;margin-top:1px}
.bubble small{display:block;color:rgba(255,255,255,.6);font-size:12px;margin-top:3px}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:40px}.hero{padding-top:32px}.bubble{left:12px}}
@media (max-width:640px){
  .hero h1{font-size:clamp(32px,9vw,40px)}
  .ctas .btn{flex:1 1 100%}
  .screen{aspect-ratio:auto;height:430px}
  .ag{grid-template-columns:40px repeat(2,minmax(0,1fr))}.ag__h span:nth-child(4),.ag__c:nth-child(5){display:none}
  .now{left:40px}
  .bk{grid-template-columns:1fr}.bk__side{display:none}
  .fi__g{grid-template-columns:1fr}
  .bubble{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-18px 12px 0}
  .win .pill,.fi__top .pill{display:none}
  .stage__tabs{display:flex}.stage__tabs button{flex:1;justify-content:center;padding:0 8px}
}

/* logos strip */
.works{padding:8px 0 64px}
.works .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px;color:var(--muted);font-size:14px}
.works span.m{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:550}
.works img{width:20px;height:20px}

/* sections */
.sec{padding:72px 0}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:40px}
.sec__head h2{margin-top:10px}
.sec__head p{color:var(--ink-2);max-width:48ch;justify-self:end}
@media (max-width:860px){.sec{padding:64px 0}.sec__head{grid-template-columns:1fr;margin-bottom:28px}.sec__head p{justify-self:start}}

/* the day scrubber */
.day{background:var(--paper);border-radius:28px;box-shadow:var(--sh-1);padding:clamp(20px,3vw,36px)}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:28px}
.rail::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line)}
.rail__fill{position:absolute;left:0;top:19px;height:2px;background:var(--acc);width:var(--p,0%);transition:width .5s var(--ease)}
.stop{position:relative;border:0;background:none;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:12px}
.stop .dot{width:40px;height:40px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;transition:background .25s,box-shadow .25s,transform .25s var(--ease);position:relative;z-index:1}
.stop .dot svg{width:18px;height:18px;color:var(--muted)}
.stop time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.stop strong{display:block;font-size:15px;font-weight:560;color:var(--ink-2);line-height:1.3}
.stop[aria-selected=true] .dot{background:var(--acc);box-shadow:none;transform:scale(1.06)}.stop[aria-selected=true] .dot svg{color:#fff}
.stop[aria-selected=true] strong{color:var(--ink)}
.stop.done .dot{box-shadow:inset 0 0 0 1.5px var(--acc)}.stop.done .dot svg{color:var(--acc)}
.panes{display:grid}
.pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .35s}
.pane.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pane h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;margin-bottom:12px}
.pane p{color:var(--ink-2);max-width:46ch}
.pane .mini{background:var(--bg);border-radius:20px;padding:18px;min-height:230px;display:flex;align-items:center;justify-content:center}
.card{background:var(--paper);border-radius:14px;box-shadow:var(--sh-2);padding:14px;width:min(360px,100%);font-size:13px;display:flex;flex-direction:column;gap:9px}
.card h5{margin:0;font-size:12.5px;font-weight:560;color:var(--muted);display:flex;align-items:center;gap:8px}
.li{display:flex;align-items:center;gap:10px;padding-top:9px;border-top:1px solid var(--line)}
.li:first-of-type{border-top:0;padding-top:0}
.li .tx{flex:1;min-width:0;display:flex;flex-direction:column}.li .tx small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li img{width:22px;height:22px}
.tot{display:flex;justify-content:space-between;font-weight:600;font-size:15px;padding-top:9px;border-top:1px solid var(--line-2)}
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pay span{height:30px;border-radius:8px;display:grid;place-items:center;background:var(--tint);font-size:12px}.pay .on{background:var(--ink);color:#fff}
.bars{display:flex;align-items:flex-end;gap:6px;height:84px}.bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--acc-soft)}.bars i.hi{background:var(--acc)}
@media (max-width:860px){
  .rail{grid-template-columns:repeat(5,minmax(0,1fr))}.stop strong{display:none}.stop{align-items:center;text-align:center}
  .pane{grid-template-columns:1fr;gap:20px}
}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat{background:var(--paper);border-radius:20px;box-shadow:var(--sh-1);padding:22px;display:flex;flex-direction:column;gap:8px}
.feat .ic{width:38px;height:38px;border-radius:11px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;margin-bottom:8px}
.feat .ic svg{width:19px;height:19px}
.feat p{color:var(--ink-2);font-size:15px}
.feat .tag{margin-top:auto;padding-top:6px}
.feat--wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}
.feat--wide .card{margin-left:auto}
.feat--span{grid-column:span 2}
@media (max-width:980px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}.feat--span{grid-column:auto}}
@media (max-width:640px){.feats{grid-template-columns:1fr;gap:10px}.feat:not(.feat--wide){display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 14px;padding:18px}.feat:not(.feat--wide) .ic{grid-row:span 3;margin:0}.feat:not(.feat--wide) > :not(.ic){grid-column:2}.feat--wide,.feat--span{grid-column:auto}.feat--wide{grid-template-columns:1fr}.feat--wide .card{margin:0}}

/* security */
.safe{background:var(--plum);color:#fff;border-radius:28px;padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 56px}
.safe h2{color:#fff}.safe .eyebrow{color:#b4edd2}
.safe > div:first-child p{color:rgba(255,255,255,.72);margin-top:14px}
.safe ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.safe li{padding:18px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.safe li svg{width:20px;height:20px;color:#b4edd2;margin-bottom:10px}
.safe li b{display:block;font-weight:560;margin-bottom:4px}
.safe li span{color:rgba(255,255,255,.7);font-size:14.5px}
.safe a{color:#fff}
@media (max-width:900px){.safe{grid-template-columns:1fr}}
@media (max-width:560px){.safe ul{grid-template-columns:1fr}}

/* pricing */
.calc{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;background:var(--paper);border-radius:18px;box-shadow:var(--sh-1);padding:18px 22px;margin-bottom:16px}
.calc label{font-weight:560}
.calc output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--acc);min-width:9ch}
.calc input[type=range]{flex:1 1 220px;accent-color:var(--acc);height:28px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan--free{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.offer{margin:-6px 0 0;font-size:13.5px;font-weight:550;color:var(--acc)}
.offer--muted{color:var(--muted);font-weight:500}
.plan{background:var(--paper);border-radius:20px;box-shadow:var(--sh-1);padding:24px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .3s,transform .3s var(--ease)}
.plan.fit{box-shadow:0 0 0 2px var(--acc),0 18px 40px -22px rgba(8,122,99,.55);transform:translateY(-3px)}
.plan header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan h3{font-size:20px}
.plan .fitlabel{opacity:0;transition:opacity .2s}.plan.fit .fitlabel{opacity:1}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:38px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:14px}
.plan .who{color:var(--ink-2);font-size:15px}
.plan ul{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--line);display:grid;gap:9px;font-size:15px}
.plan li{display:flex;gap:9px}.plan li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--sage)}
.plan .btn{margin-top:auto}
.fine{margin-top:16px;font-size:14px;color:var(--muted)}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans{grid-template-columns:1fr}.plan.fit{transform:none}}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 56px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:560;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:22px;height:22px;flex:none;border-radius:50%;background:var(--tint);display:grid;place-items:center;transition:transform .25s var(--ease)}
.faq summary i svg{width:12px;height:12px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--acc-soft);color:var(--acc)}
.faq details p{padding:0 0 18px;color:var(--ink-2);max-width:62ch}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:16px}}

/* final */
.end{background:var(--acc);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px 40px;align-items:center;position:relative;overflow:hidden}
.end::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.end h2{color:#fff;font-size:clamp(28px,3.2vw,42px)}
.end h2 em.s{background:var(--grad-claro);-webkit-background-clip:text;background-clip:text}
.end p{color:rgba(255,255,255,.82);margin-top:10px}
.end .btn--g{height:52px;padding:0 24px;font-size:16px;position:relative;z-index:1}
@media (max-width:760px){.end{grid-template-columns:1fr}.end .btn{width:100%}}

footer{padding:56px 0 40px}
.foot{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px}
.foot p{color:var(--muted);font-size:14px;margin-top:12px;max-width:34ch}
.foot h4{margin:0 0 12px;font-size:13px;font-weight:560;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.foot li a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;font-size:15px;color:var(--ink-2)}
.foot li a:hover{color:var(--acc)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:1000px){.foot{grid-template-columns:repeat(4,minmax(0,1fr))}.foot > div:first-child{grid-column:1/-1}}
@media (max-width:640px){.foot{grid-template-columns:1fr 1fr}}

.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- Menú «Tipos de negocio» ---------- */
.dd{position:relative}
.dd__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:8px;background:none;font-size:15px;color:var(--ink-2);cursor:pointer}
.dd__btn svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.dd__btn:hover,.dd.open .dd__btn{background:rgba(15,36,32,.05);color:var(--ink)}
.dd__btn.on{color:var(--acc);font-weight:550}
.dd.open .dd__btn svg{transform:rotate(180deg)}
.dd__panel{position:absolute;left:-8px;top:calc(100% + 10px);width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--paper);border-radius:20px;box-shadow:0 1px 2px rgba(15,36,32,.06),0 24px 48px -20px rgba(10,50,42,.35),0 0 0 1px rgba(15,36,32,.07);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .18s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.dd.open .dd__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd__item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none;color:var(--ink)}
.dd__item:hover,.dd__item.on{background:var(--bg)}
.dd__item b{display:block;font-weight:580;font-size:15px}
.dd__item small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.dd__ic{width:36px;height:36px;flex:none;border-radius:11px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center}
.dd__ic svg{width:19px;height:19px}
.sheet__label{display:block;padding:14px 0 6px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sheet__tipos{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-bottom:6px}
.sheet__tipos a{gap:10px;font-size:15px!important}
.sheet__tipos svg{width:18px;height:18px;color:var(--acc);flex:none}

/* ---------- Páginas por tipo de negocio ---------- */
.eyebrow--ic::before{display:none}
.eyebrow--ic svg{width:16px;height:16px}
.tipo-hero .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.tipo-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.phone{width:min(380px,100%);background:var(--paper);border-radius:30px;box-shadow:var(--sh-2);overflow:hidden}
.phone__bar{height:42px;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);background:var(--bg)}
.phone__bar b{color:var(--ink);font-weight:560}
.phone__body{padding:18px 18px 34px;display:flex;flex-direction:column;gap:9px;font-size:13px}
.phone .bk__salon .av{background:var(--acc)}
.phone .hours{margin-top:6px}
.phone .confirm{margin-top:6px}
.bubble--tipo{position:relative;left:auto;right:auto;bottom:auto;width:min(330px,calc(100% - 24px));margin-top:-20px;animation-delay:.9s}
.bubble__ic{width:28px;height:28px;flex:none;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#b4edd2}
.bubble__ic svg{width:16px;height:16px}
.feats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.feats--4 .ic svg{width:19px;height:19px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.split__h{font-size:clamp(24px,2.4vw,32px)}
.ticks--col{flex-direction:column;gap:8px}
.li__t{min-width:44px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.precio-strip{display:grid;grid-template-columns:minmax(0,1.3fr) auto auto;gap:24px 40px;align-items:center;background:var(--paper);border-radius:28px;box-shadow:var(--sh-1);padding:clamp(24px,3.5vw,44px)}
.precio-strip h2{margin-top:10px;font-size:clamp(24px,2.4vw,32px)}
.precio-strip p{color:var(--ink-2);margin-top:10px;max-width:52ch}
.precio-strip__nums{display:flex;gap:28px}
.precio-strip__nums div{display:flex;flex-direction:column}
.precio-strip__nums b{font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.precio-strip__nums span{font-size:13px;color:var(--muted)}
.otros{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:28px}
.otros > span{font-size:14px;color:var(--muted);margin-right:6px}
.otros a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:99px;background:var(--paper);box-shadow:var(--sh-1);text-decoration:none;font-size:14px;font-weight:550}
.otros a svg{width:16px;height:16px;color:var(--acc)}
.otros a:hover{box-shadow:0 0 0 1px var(--line-2),0 4px 12px -6px rgba(15,36,32,.2)}
@media (max-width:1100px){.feats--4{grid-template-columns:repeat(2,minmax(0,1fr))}.precio-strip{grid-template-columns:1fr}.precio-strip .btn{justify-self:start}}
@media (max-width:980px){.tipo-hero .wrap{grid-template-columns:1fr}}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){
  .feats--4{grid-template-columns:1fr}
  .feats--4 .feat{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 14px;padding:18px}
  .feats--4 .feat .ic{grid-row:span 2;margin:0}
  .tipo-stage{align-items:stretch}
  .bubble--tipo{width:auto;margin:-20px 12px 0}
  .phone{width:100%}
  .precio-strip__nums{gap:18px}.precio-strip__nums b{font-size:22px}
  .precio-strip .btn{width:100%}
}

/* ---------- Fotos reales en páginas por tipo ---------- */
.tipo-stage--foto{display:block;min-height:560px;padding:40px 0 24px}
.tipo-foto{position:absolute;top:0;right:0;bottom:24px;width:74%;margin:0;border-radius:30px;overflow:hidden;background:var(--tint);box-shadow:var(--sh-2)}
.tipo-foto__img{width:100%;height:100%;object-fit:cover;display:block}
.tipo-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,34,29,0) 55%,rgba(10,34,29,.28));pointer-events:none}
.tipo-stage--foto .phone{position:relative;z-index:2;width:min(290px,58%);margin-top:30px}
.tipo-stage--foto .phone__body{padding:16px 16px 26px;gap:8px}
.tipo-stage--foto .bubble--tipo{position:absolute;z-index:3;right:-14px;top:-14px;bottom:auto;margin:0;width:min(270px,46%)}
.mini--foto{position:relative;border-radius:28px;overflow:hidden;min-height:500px;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(18px,3vw,32px);background:var(--tint)}
.mini__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini--foto::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(10,34,29,0) 35%,rgba(10,34,29,.35))}
.mini--foto .card{position:relative;z-index:2;width:min(372px,74%);box-shadow:var(--sh-2)}
.creditos{margin-top:18px;font-size:12.5px;color:var(--muted)}
.creditos a{color:inherit}
@media (max-width:980px){
  .tipo-stage--foto{min-height:0;padding:0;display:flex;flex-direction:column;align-items:center}
  .tipo-foto{position:relative;inset:auto;width:100%;aspect-ratio:16/10;bottom:auto}
  .tipo-stage--foto .phone{width:min(360px,calc(100% - 32px));margin-top:-90px}
  .tipo-stage--foto .bubble--tipo{position:relative;right:auto;top:auto;bottom:auto;width:min(330px,calc(100% - 24px));margin-top:-20px}
}
@media (max-width:640px){
  .tipo-foto{aspect-ratio:4/3;border-radius:22px}
  .tipo-stage--foto .phone{width:calc(100% - 24px);margin-top:-70px}
  .tipo-stage--foto .bubble--tipo{width:auto;margin:-20px 18px 0}
  .mini--foto{min-height:0;padding:0;display:block;border-radius:22px;background:none}
  .mini--foto .mini__img{position:relative;aspect-ratio:4/3;height:auto;border-radius:22px}
  .mini--foto::before{display:none}
  .mini--foto .card{width:auto;margin:-48px 12px 0}
  .mini--foto{min-height:0}
}

/* ---------- Un día en tu salón: paso automático ---------- */
.rail__prog{position:absolute;top:19px;height:2px;background:var(--acc);opacity:.45;transform-origin:left center;transform:scaleX(0);pointer-events:none;display:none}
.day.auto .rail__prog{display:block}
.rail__prog.run{animation:railProg 6s linear forwards}
@keyframes railProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.day__foot{display:flex;justify-content:flex-end;margin-top:18px}
.day__play{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:0;border-radius:99px;background:var(--bg);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.day__play:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.day__play:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.day__play svg{width:14px;height:14px;fill:currentColor}
.day__play .i-play{display:none}
.day__play[aria-pressed=true] .i-play{display:block}.day__play[aria-pressed=true] .i-pause{display:none}
@media (max-width:640px){.day__foot{justify-content:center;margin-top:14px}}

/* ---------- Aviso superior y opiniones (editables desde el superadmin) ---------- */
.topbanner { position: relative; z-index: 60; background: var(--plum); color: #e9f5f0; text-align: center; font-size: 14px; line-height: 1.4; padding: 10px 16px; }
.topbanner a { color: #8ff0c4; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbanner a:hover { text-decoration: underline; }
.opiniones__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.opinion { margin: 0; background: #fff; border: 1px solid rgba(15,36,32,.07); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px -22px rgba(15,36,32,.35); }
.opinion blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.opinion figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.opinion figcaption span { color: var(--muted, #5b6b67); }
@media (max-width: 639px) { .topbanner { font-size: 13px; padding: 9px 12px; } .opinion { padding: 18px; } .opinion blockquote { font-size: 16px; } }

/* ---------- App (descargar) ---------- */
.appsec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 56px;align-items:center;background:var(--paper);border-radius:28px;padding:clamp(28px,5vw,60px);box-shadow:var(--sh-2);overflow:hidden;position:relative}
.appsec::before{content:"";position:absolute;right:-160px;bottom:-200px;width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,170,134,.16),transparent);pointer-events:none}
.appsec__txt{position:relative;z-index:1;min-width:0}
.appsec__lead{color:var(--ink-2);margin-top:14px;max-width:46ch}
.appsec__ticks{flex-direction:column;gap:8px;margin-top:18px}
.tiendas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tienda{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:12px;background:#0b1512;color:#fff;text-decoration:none;line-height:1.1;transition:transform .16s var(--ease),box-shadow .2s;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.tienda svg{width:24px;height:24px;flex:none}
.tienda span{display:flex;flex-direction:column}
.tienda small{font-size:10.5px;opacity:.8;letter-spacing:.02em}
.tienda b{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
@media (hover:hover){a.tienda:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.55)}}
.tienda--pronto{background:var(--tint);color:var(--ink-2);box-shadow:none;cursor:default}
.tienda--pronto svg{opacity:.75}
.appsec__web{display:flex;gap:16px;align-items:center;margin-top:22px;padding:14px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.appsec__web p{margin:0;font-size:14px;color:var(--ink-2)}
.appsec__web a{color:var(--acc);font-weight:550;text-decoration:none;white-space:nowrap}
.appsec__qr{flex:none;width:92px;padding:6px;background:#fff;border-radius:12px;box-shadow:var(--sh-1)}
.appsec__qr .qr{width:100%;height:auto}
.appsec__bts{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.appsec__fine{margin-top:12px;max-width:52ch}
.appsec__vis{position:relative;min-height:440px;z-index:1}
.appsec__pc{position:absolute;right:-90px;top:20px;width:min(560px,115%);border-radius:14px;box-shadow:var(--sh-2);border:6px solid #0f1c19}
.appsec__tel{position:absolute;left:4%;top:0;width:200px;border-radius:34px;padding:9px;background:#0f1c19;box-shadow:0 30px 60px -24px rgba(10,50,42,.55),0 0 0 1px rgba(255,255,255,.06) inset}
.appsec__tel img{width:100%;height:auto;border-radius:26px;display:block}
.appsec__aviso{position:absolute;left:28%;bottom:6px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh-2);max-width:300px;animation:avisoApp 4.5s var(--ease) infinite}
.appsec__aviso-ic img{border-radius:9px}
.appsec__aviso b{display:block;font-size:13.5px}
.appsec__aviso small{display:block;font-size:12px;color:var(--muted)}
@keyframes avisoApp{0%,8%{opacity:0;transform:translateY(10px)}16%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.appsec__aviso{animation:none}}
@media (max-width:960px){
  .appsec{grid-template-columns:minmax(0,1fr)}
  .appsec__vis{min-height:400px;order:-1;margin:-6px 0 0}
  .appsec__pc{right:-40px;width:min(520px,95%)}
}
@media (max-width:620px){
  .appsec__vis{min-height:360px}
  .appsec__pc{display:none}
  .appsec__tel{left:50%;transform:translateX(-50%);width:180px}
  .appsec__aviso{left:50%;transform:translateX(-50%);bottom:-4px;animation:none;width:max-content;max-width:calc(100% - 20px)}
  .appsec__qr{display:none}
  .tienda{flex:1 1 calc(50% - 10px);justify-content:center}
}
/* Página /app */
.pag-app{min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,var(--acc-soft),transparent),var(--bg)}
.app-pag{max-width:620px;padding-top:28px;padding-bottom:40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.app-pag .logo{align-self:center;margin-bottom:24px}
.app-pag__card{background:var(--paper);border-radius:28px;padding:clamp(24px,5vw,44px);box-shadow:var(--sh-2);width:100%;display:flex;flex-direction:column;align-items:center}
.app-pag__ic{border-radius:22px;box-shadow:0 14px 30px -12px rgba(8,122,99,.55);margin-bottom:18px}
.app-pag h1{font-size:clamp(26px,5vw,34px);line-height:1.15;margin:0}
.app-pag .muted{color:var(--ink-2);margin:10px 0 0;max-width:40ch}
.app-pag__cta{margin-top:22px;height:52px;font-size:16px}
.app-pag .tiendas{justify-content:center}
.app-pag__web{margin-top:26px;padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);text-align:left;width:100%}
.app-pag__web p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2)}
.app-pag__bts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.app-pag__qr{margin-top:22px;display:flex;align-items:center;gap:14px;text-align:left;font-size:14px;color:var(--muted)}
.app-pag__qr .qr{width:96px;height:96px;padding:6px;background:#fff;border-radius:12px;box-shadow:var(--sh-1)}
.app-pag .fine{max-width:46ch}
@media (max-width:620px){.app-pag__qr{display:none}.app-pag__bts .btn{flex:1}}
.tienda b,.tienda small{white-space:nowrap}
@media (max-width:620px){.tienda{padding:0 12px;gap:8px;height:50px}.tienda b{font-size:15px}.tienda svg{width:22px;height:22px}}