/* Layout: soft rounded panels on a tinted ground; pastel service tiles, black pill actions, one violet accent. */
:root{
  /* sampled from the reference screenshot; single light theme by choice */
  --bg:#fcf8ed; --panel:#fcf8ed; --card:#ede8d6; --line:#e0d9c3;
  --fg:#2d2c2c; --muted:#6f6b60; --ink:#2d2c2c; --on-ink:#ffffff;
  --accent:#8369b8; --accent-soft:#f6f2e9;
  --peach:#f6bd47; --sky:#8369b8; --mist:#ede8d6; --mint:#f6f2e9;
  --on-yellow:#2d2c2c; --on-accent:#ffffff;
  --ok:#2d2c2c; --warn:#c63d30;
  --display:"Instrument Sans","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
  --r-lg:0px; --r-md:0px;
}
:root{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;padding-inline:16px;padding-block:16px 48px}
.wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.875rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.panel{background:var(--panel);border-radius:var(--r-lg);padding:clamp(18px,3vw,32px)}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:0;padding:12px 22px;font:600 1rem var(--body);cursor:pointer;background:var(--ink);color:var(--on-ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.sm{padding:8px 16px;font-size:.9rem}
.arrow{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:1rem;flex:none}

header.panel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:14px}
.logo{font:700 1.25rem var(--display);display:flex;align-items:center;gap:10px}
.logo i{width:30px;height:30px;border-radius:0;background:var(--accent);display:grid;place-items:center;color:var(--on-ink);font-style:normal;font-size:.95rem}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:8px 14px;border-radius:0;text-decoration:none;font-weight:500;font-size:.95rem}
nav a:hover{background:var(--accent-soft)}
.userbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center}
.hero>*{min-width:0}
.hero .lead{font-size:1.1rem;color:var(--muted);max-width:52ch;margin-block:14px 22px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.track{background:var(--card);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:12px}
.pill-dark{background:var(--ink);color:var(--on-ink);border-radius:0;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;transform:rotate(-2deg);font-weight:600}
.pill-dark span:last-child{font-weight:400;font-size:.85rem;opacity:.8}
.steps-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps-mini li{display:flex;gap:10px;align-items:center;font-size:.95rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.done .dot{background:var(--ok)} .now .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:0;padding:3px 10px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font:500 .9rem var(--body);border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:0;padding:7px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:18px}
.tile{border:0;text-align:left;font:inherit;color:var(--fg);cursor:pointer;border-radius:var(--r-lg);padding:18px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.tile.c0{background:var(--peach)} .tile.c1{background:var(--sky)} .tile.c2{background:var(--mist)} .tile.c3{background:var(--mint)}
.tile .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.price{font:700 1.5rem var(--display);font-variant-numeric:tabular-nums}
.tile.sel{outline:3px solid var(--accent);outline-offset:2px}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:18px;list-style:none;padding:0;counter-reset:s}
.how li{background:var(--card);border-radius:var(--r-md);padding:18px;counter-increment:s;display:flex;flex-direction:column;gap:6px}
.how li::before{content:counter(s);font:700 1.1rem var(--display);width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}

.wiz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.prog{display:flex;gap:6px;margin-block:16px 20px}
.prog span{flex:1;height:6px;border-radius:0;background:var(--line)}
.prog span.on{background:var(--accent)}
.step{background:var(--card);border-radius:var(--r-md);padding:clamp(16px,3vw,26px);display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.92rem}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:0;padding:11px 12px;width:100%}
textarea{min-height:80px;resize:vertical}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.docs li{border:1px dashed var(--line);border-radius:0;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.docs li>div{min-width:0;flex:1 1 200px}
.docs input{font:inherit;font-size:.85rem;max-width:100%}
.fname{color:var(--ok);font-size:.85rem;overflow-wrap:anywhere}
.bizum{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.bizum div{background:var(--mint);border-radius:0;padding:14px}
.bizum b{display:block;font:700 1.25rem var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.err{color:var(--warn);font-size:.9rem;font-weight:500}
.notice{background:var(--accent-soft);border-radius:0;padding:12px 16px;font-size:.92rem}
.sum{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.95rem;margin:0}
.sum dt{color:var(--muted)} .sum dd{margin:0;font-weight:500;overflow-wrap:anywhere}

.auth{max-width:520px}
.tabs{display:flex;gap:6px;background:var(--panel);border-radius:0;padding:4px;align-self:flex-start}
.tabs button{font:600 .92rem var(--body);border:0;border-radius:0;padding:8px 18px;cursor:pointer;background:transparent;color:var(--fg)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}

.reqs{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.req{background:var(--card);border-radius:var(--r-md);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.req>div{min-width:0}
.status{font-size:.85rem;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:0;padding:5px 12px;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.stats div{border-radius:var(--r-md);padding:14px 16px;background:var(--peach)}
.stats div:nth-child(2){background:var(--sky)} .stats div:nth-child(3){background:var(--mist)}
.stats b{display:block;font:700 1.6rem var(--display);font-variant-numeric:tabular-nums}

details{background:var(--card);border-radius:var(--r-md);padding:14px 18px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--muted);max-width:65ch}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.875rem;color:var(--muted);padding-inline:8px}

@media (max-width:820px){ .hero{grid-template-columns:1fr} }
@media (prefers-reduced-motion:no-preference){ .tile{transition:transform .15s} .tile:hover{transform:translateY(-3px)} }
/* flat editorial look: cream ground, beige blocks, hairlines, square corners, yellow + violet blocks */
.panel{border:1px solid var(--line)}
.hero{background:var(--card);border-color:var(--card)}
.track{background:var(--bg)}
h1,h2,h3{font-weight:500;letter-spacing:-.03em}
.logo{font-weight:600;letter-spacing:-.03em}
.price,.stats b,.bizum b{font-weight:500}
.arrow,.how li::before{border-radius:0}
.tile.c0,.tile.c0 .muted,.tile.c0 .tag,.stats div:first-child{color:var(--on-yellow)}
.tile.c1,.tile.c1 .muted,.tile.c1 .tag,.stats div:nth-child(2){color:var(--on-accent)}
.tile .tag{border-color:currentColor}
.tile.c3{background:var(--bg);border:1px solid var(--line)}
.bizum div{background:var(--peach);color:var(--on-yellow)}
.status{background:var(--bg);color:var(--fg);border:1px solid var(--line)}
.tile{text-align:start}
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] body{line-height:1.7}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.35}
[dir=rtl] .arrow,[dir=rtl] .btn>span[aria-hidden]{transform:scaleX(-1);display:inline-grid}
[dir=rtl] .bizum b,[dir=rtl] .pill-dark span:last-child{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .bizum b{text-align:right}

/* panel del cliente: barra lateral fija + bloque de saludo con tres tarjetas + línea de tiempo */
#side{position:fixed;inset-block:16px;inset-inline-start:16px;width:220px;background:var(--bg);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.in .wrap{margin-inline:252px 0;max-width:none}
.in header nav{display:none}
.navb{display:flex;gap:12px;align-items:center;background:none;border:0;font:500 1rem var(--body);color:var(--fg);padding:11px 10px;cursor:pointer;text-align:start}
.navb::before{content:"";width:12px;height:12px;background:var(--accent);flex:none}
.navb[aria-current="true"]{background:var(--card);font-weight:600}
.side-card{margin-top:auto;background:var(--peach);color:var(--on-yellow);padding:16px;display:flex;flex-direction:column;gap:4px}
.side-card b{font-size:1.15rem;letter-spacing:-.02em}
#cuenta{display:flex;flex-direction:column;gap:20px}
.dash-hero{background:var(--card);padding:clamp(18px,3vw,32px);display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
.dash-hero>*{min-width:0}
.dash-txt{display:flex;flex-direction:column;gap:14px;justify-content:center}
#dashHead{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.dash-hero .stats{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-hero .stats div{min-height:200px;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.dash-hero .stats b{font-size:2.8rem}
.stats div:first-child{background:var(--mint);color:var(--fg)}
.stats div:nth-child(2){background:var(--peach);color:var(--on-yellow)}
.stats div:nth-child(3){background:var(--sky);color:var(--on-accent)}
.dash-cols{display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--line)}
.dash-cols>div{padding:clamp(16px,3vw,28px);min-width:0}
.dash-cols>div+div{border-inline-start:1px solid var(--line)}
.tl{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column}
.tl li{display:flex;gap:16px;align-items:center;padding-block:10px;position:relative;font-weight:500}
.tl i{width:38px;height:38px;border:1px solid var(--ink);display:grid;place-items:center;font-style:normal;flex:none;position:relative;z-index:1;background:var(--ink);color:var(--on-ink)}
.tl li.done i{background:var(--peach);color:var(--on-yellow)}
.tl li.now i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tl li+li::before{content:"";position:absolute;inset-inline-start:18px;top:-10px;height:20px;width:2px;background:var(--peach)}
@media (max-width:900px){
  #side{position:static;width:auto;flex-direction:row;flex-wrap:wrap}
  .side-card{display:none}
  .in .wrap{margin-inline:auto}
  .dash-hero,.dash-cols{grid-template-columns:1fr}
  .dash-cols>div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .dash-hero .stats div{min-height:120px}
}

/* acabado: arcos amarillos, cabecera fija, foco y selección */
::selection{background:var(--peach);color:var(--on-yellow)}
header.panel{position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.02}
.hero,.dash-hero{position:relative;overflow:hidden}
.hero>*,.dash-hero>*{position:relative}
.hero::before,.dash-hero::before{content:"";position:absolute;width:560px;height:560px;border:2px solid var(--peach);border-radius:50%;inset-inline-start:-240px;top:-380px;pointer-events:none}
.hero::after{content:"";position:absolute;width:420px;height:420px;border:2px solid var(--peach);border-radius:50%;inset-inline-end:28%;bottom:-360px;pointer-events:none}
.track{box-shadow:10px 10px 0 var(--peach)}
[dir=rtl] .track{box-shadow:-10px 10px 0 var(--peach)}
.stats div,.tile{position:relative;overflow:hidden}
.stats div::after,.tile::after{content:"";position:absolute;width:130px;height:130px;border:1.5px solid currentColor;border-radius:50%;opacity:.18;inset-inline-end:-44px;top:-44px;pointer-events:none}
.tile .price{font-size:1.9rem}
input:not([type=checkbox]):not([type=file]),select,textarea{transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=file]):focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:3px 3px 0 var(--accent)}
.how li{border:1px solid var(--card)}
.req{border-inline-start:4px solid var(--peach)}
.btn,.chip,.navb,.tile,.req,.how li,.stats div,.arrow,.btn>span,.prog span,.dot,.tl i{transition:translate .2s cubic-bezier(.2,.7,.2,1),rotate .2s,background-color .2s,color .2s,box-shadow .2s,border-color .2s}

@media (prefers-reduced-motion:no-preference){
  @keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes side{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes arc{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
  @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
  @keyframes floaty{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-1deg) translateY(-3px)}}
  @keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:none;opacity:1}}
  .wrap>header,.wrap>section,.wrap>footer{animation:up .55s cubic-bezier(.2,.7,.2,1) both}
  .wrap>section:nth-of-type(2){animation-delay:.06s}.wrap>section:nth-of-type(3){animation-delay:.12s}
  .wrap>section:nth-of-type(4){animation-delay:.18s}.wrap>section:nth-of-type(n+5){animation-delay:.24s}
  #side{animation:side .5s cubic-bezier(.2,.7,.2,1) both}
  .hero::before,.hero::after,.dash-hero::before{animation:arc 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero h1,.dash-txt>*{animation:up .6s .1s cubic-bezier(.2,.7,.2,1) both}
  .hero .lead,.dash-txt>*:nth-child(2){animation-delay:.18s}.hero .cta,.dash-txt>*:nth-child(3){animation-delay:.26s}
  .track{animation:up .6s .3s cubic-bezier(.2,.7,.2,1) both}
  .pill-dark{animation:floaty 5s ease-in-out infinite}
  .steps-mini li,.tl li,.how li,.req,.stats div,.tile,.step:not([hidden]),details[open] p,.notice,.err{animation:up .45s cubic-bezier(.2,.7,.2,1) both}
  .steps-mini li:nth-child(1),.tl li:nth-child(1),.how li:nth-child(1),.stats div:nth-child(1),.tile:nth-child(1){animation-delay:.08s}
  .steps-mini li:nth-child(2),.tl li:nth-child(2),.how li:nth-child(2),.stats div:nth-child(2),.tile:nth-child(2){animation-delay:.16s}
  .steps-mini li:nth-child(3),.tl li:nth-child(3),.how li:nth-child(3),.stats div:nth-child(3),.tile:nth-child(3){animation-delay:.24s}
  .steps-mini li:nth-child(4),.tl li:nth-child(4),.how li:nth-child(4),.tile:nth-child(4){animation-delay:.32s}
  .steps-mini li:nth-child(5),.tl li:nth-child(5),.how li:nth-child(5),.tile:nth-child(n+5){animation-delay:.4s}
  .tl li+li::before{transform-origin:top;animation:grow .4s both}
  .tl li:nth-child(2)::before{animation-delay:.2s}.tl li:nth-child(3)::before{animation-delay:.3s}
  .tl li:nth-child(4)::before{animation-delay:.4s}.tl li:nth-child(5)::before{animation-delay:.5s}
  .tl li.done i{animation:pop .5s .2s both}
  .tl li.now i,.now .dot{animation:pulse 1.6s ease-out infinite}
  .btn:hover{translate:0 -2px;box-shadow:0 6px 0 var(--peach)}
  .btn.ghost:hover{box-shadow:0 6px 0 var(--card)}
  .btn:active{translate:0 1px;box-shadow:none}
  .btn:hover>span[aria-hidden]{translate:3px -3px}
  .tile:hover{translate:0 -6px;box-shadow:0 10px 0 var(--ink)}
  .tile:hover .arrow{rotate:45deg}
  .chip:hover{background:var(--card)}
  .navb:hover{translate:4px 0}[dir=rtl] .navb:hover{translate:-4px 0}
  .navb[aria-current="true"]::before{rotate:45deg}
  .navb::before{transition:rotate .3s}
  .req:hover,.how li:hover{translate:0 -3px}
  .how li:hover{border-color:var(--accent)}
  .stats div:hover{translate:0 -6px}
  .avatar{animation:pop .5s both}
}
section[id]{scroll-margin-top:104px}
nav a{transition:background-color .25s,color .25s}
nav a[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* página de cuenta y foto de perfil */
#authPage{display:grid;grid-template-columns:1fr 1.15fr;min-height:72vh;border:1px solid var(--line)}
#authPage>*{min-width:0}
.auth-side{background:var(--sky);color:var(--on-accent);padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;width:460px;height:460px;border:2px solid var(--peach);border-radius:50%;inset-inline-end:-200px;bottom:-220px}
.auth-side>*{position:relative}
.auth-side .dot{background:var(--peach)}
.auth-side .steps-mini li{font-size:1.05rem}
.auth-main{padding:clamp(20px,4vw,56px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.auth-main .auth{background:transparent;padding:0;max-width:460px;width:100%;margin-inline:auto}
.avatar{background-size:cover;background-position:center;flex:none}
.avatar.pic{color:transparent}
.avatar.lg{width:96px;height:96px;font-size:2rem}
.pic-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pic-ctl{display:flex;flex-direction:column;gap:8px}
.pic-row label.btn{flex-direction:row;cursor:pointer}
.pic-row label.btn:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.vh{position:absolute;opacity:0;width:1px;height:1px}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:8px;min-width:0}
.side-user b{overflow-wrap:anywhere;font-weight:600}
@media (max-width:900px){#authPage{grid-template-columns:1fr;min-height:0}.auth-side h1{font-size:2rem}.side-user{border:0;margin:0;padding:6px}}
@media (prefers-reduced-motion:no-preference){.auth-side>*,.auth-main>*{animation:up .5s cubic-bezier(.2,.7,.2,1) both}.auth-main>*{animation-delay:.12s}}
/* ===== piel "soft": fondo cálido con resplandor amarillo, tarjetas translúcidas redondeadas, tinta casi negra ===== */
:root{
  --bg:#f7f5ef; --panel:#fffefad9; --card:#efede6; --line:#1f1f2417;
  --fg:#1f1f24; --muted:#5d5b5a; --ink:#1f1f24; --on-ink:#f4f3ee;
  --accent:#f4c24a; --accent-soft:#fbe4a6; --acc-text:#86600a; --on-accent:#f4f3ee;
  --peach:#f4c24a; --sky:#1f1f24; --mist:#efede6; --mint:#fdf3d6; --on-yellow:#1f1f24;
  --ok:#25693e; --warn:#b9392f;
  --display:"Bricolage Grotesque","IBM Plex Sans Arabic","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:24px; --r-md:16px;
  --edge:#ffffffe6; --shadow:0 1px 0 #ffffffd9 inset,0 18px 40px -26px #28244659;
}
body{background:radial-gradient(900px 520px at 100% 0,#f4c24a59,transparent 62%),radial-gradient(700px 420px at 0 100%,#f4c24a26,transparent 60%),var(--bg);background-attachment:fixed;font-size:15.5px}
[dir=rtl] body{background:radial-gradient(900px 520px at 0 0,#f4c24a59,transparent 62%),radial-gradient(700px 420px at 100% 100%,#f4c24a26,transparent 60%),var(--bg);background-attachment:fixed}
h1,h2,h3{font-weight:600;letter-spacing:-.02em}
.logo{font-family:var(--display);font-weight:600}
.logo i{border-radius:9px;color:var(--ink)}
:focus-visible{outline-color:var(--ink)}
.panel,#side,.dash-cols,#authPage{background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:var(--r-lg)}
header.panel{border-radius:20px;backdrop-filter:blur(10px)}
.hero,.dash-hero{background:linear-gradient(135deg,#fffefa 30%,#fdf3d6);border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:var(--r-lg)}
.hero::before,.hero::after,.dash-hero::before{display:none}
.btn{border-radius:12px}
.btn.ghost{background:#fffefa;border-color:var(--line)}
.chip,.tag,.status,.prog span{border-radius:999px}
.chip{background:#fffefa}
.arrow,.tl i{border-radius:10px}
.how li::before{border-radius:10px;color:var(--acc-text)}
.avatar{color:var(--acc-text)}
.track,.step,.how li,.req,details,.docs li,.bizum div,.notice,.side-card{border-radius:var(--r-md)}
.track{background:#fffefa;box-shadow:var(--shadow);border:1px solid var(--edge)}
[dir=rtl] .track{box-shadow:var(--shadow)}
.pill-dark{border-radius:14px;transform:none;animation:none}
.step,.how li,.req,details{background:#fffefa;border:1px solid var(--line)}
.auth-main .auth{border:0}
.req{border-inline-start:1px solid var(--line)}
.notice{background:var(--mint);color:var(--acc-text)}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{border-radius:12px;background:#fffefa;border-color:#1f1f2429}
input:not([type=checkbox]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px #f4c24a73}
.check input{accent-color:var(--ink)}
.tabs{border-radius:12px;background:var(--card)}
.tabs button{border-radius:9px}
nav a{border-radius:10px}
nav a:hover{background:#1f1f240d}
.tile{border-radius:var(--r-lg);border:1px solid var(--edge)}
.tile.c0{background:#fbe4a6}.tile.c1{background:#cdd9f3}.tile.c2{background:#c9e4d4}.tile.c3{background:#f3c9c4;border-color:var(--edge)}
.tile.c0,.tile.c1,.tile.c2,.tile.c3,.tile .muted,.tile.c1 .muted,.tile.c1 .tag,.tile .tag{color:var(--ink)}
.tile .muted{opacity:.72}
.tile.sel{outline-color:var(--ink)}
.stats div{border-radius:var(--r-lg);border:1px solid var(--edge);box-shadow:var(--shadow)}
.stats div:first-child{background:#fffefa;color:var(--ink)}
.stats div:nth-child(2){background:var(--accent-soft);color:var(--ink)}
.stats div:nth-child(3){background:var(--ink);color:var(--on-ink);border-color:#34343c}
.stats b,.price,.bizum b{font-family:var(--display);font-weight:600}
.bizum div{background:var(--accent-soft)}
#side{background:#fffefa8c;backdrop-filter:blur(10px);padding:14px}
.navb{border-radius:12px;padding:11px 12px}
.navb::before{border-radius:4px;background:transparent;border:1.5px solid var(--muted)}
.navb[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
.navb[aria-current="true"]::before{background:var(--accent);border-color:var(--accent)}
.side-card{background:var(--accent-soft)}
.dash-cols{overflow:hidden}
.tl i{border-color:var(--line);background:var(--card);color:var(--muted)}
.tl li.done i{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.tl li.now i{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.tl li+li::before{background:var(--accent-soft)}
.now .dot{background:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
#authPage{overflow:hidden}
.auth-side{background:radial-gradient(520px 360px at 100% 100%,#f4c24a40,transparent 65%),var(--ink)}
[dir=rtl] .auth-side{background:radial-gradient(520px 360px at 0 100%,#f4c24a40,transparent 65%),var(--ink)}
.auth-side::before{display:none}
::selection{background:var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){
  @keyframes pulse{0%{box-shadow:0 0 0 0 #f4c24a99}100%{box-shadow:0 0 0 12px transparent}}
  .btn:hover{box-shadow:0 12px 24px -14px #1f1f2480}
  .btn.ghost:hover{box-shadow:0 12px 24px -16px #1f1f2459}
  .btn:active{box-shadow:none}
  .tile:hover,.stats div:hover{box-shadow:0 22px 40px -24px #28244680}
  .navb[aria-current="true"]::before{rotate:none}
  .how li:hover{border-color:var(--ink)}
}
/* tarjeta de citas reservadas: verde y con brillo cuando hay al menos una */
.stats div.won{background:#1f7a45;color:#fff;border-color:#35a162;box-shadow:0 0 0 0 #3fbf6f,0 18px 40px -18px #1f7a45}
.stats div.won::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.status.ok{background:#e1f1e4;color:#25693e;border-color:transparent}
@media (prefers-reduced-motion:no-preference){
  @keyframes glow{0%,100%{box-shadow:0 0 0 0 #3fbf6fb3,0 18px 40px -18px #1f7a45}50%{box-shadow:0 0 0 12px #3fbf6f00,0 0 44px 4px #3fbf6f99}}
  @keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
  .stats div.won{animation:glow 1.8s ease-in-out infinite}
  .stats div.won::before{animation:sheen 2.6s ease-in-out infinite}
}
/* página de cuenta estilo "huddle": arte a un lado, formulario limpio al otro */
#authPage{grid-template-columns:1fr 1fr;border-radius:28px;min-height:76vh}
.auth-side,[dir=rtl] .auth-side{background:linear-gradient(180deg,#f2f0e9,#e4e1d8);color:var(--ink);padding-bottom:0;justify-content:space-between}
.auth-side h1{font-size:clamp(1.5rem,2.6vw,2.2rem);max-width:14ch}
.auth-main{background:#fffefa}
.auth-main .auth{max-width:380px;gap:18px}
.auth-title{text-align:center;font-size:1.75rem}
.auth-title::before{content:"✦";display:block;font-size:1.5rem;margin-bottom:12px}
.auth-sub{text-align:center;color:var(--muted);margin-top:-10px}
#authPage .tabs{display:none}
#authPage label{position:relative;color:var(--muted);font-size:.85rem}
#authPage input:not([type=checkbox]){border:0;border-bottom:1.5px solid #1f1f2429;border-radius:0;background:transparent;padding:10px 0;font-size:1.02rem;color:var(--ink)}
#authPage input:not([type=checkbox]):focus{border-bottom-color:var(--ink);box-shadow:0 1.5px 0 var(--ink)}
#authPage input[data-pw]{padding-inline-end:36px}
.peek{position:absolute;inset-inline-end:0;bottom:4px;background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;display:grid;border-radius:8px}
.peek[aria-pressed="true"]{color:var(--ink)}
#authPage form>.btn[type=submit]{border-radius:999px;align-self:stretch!important;justify-content:center;padding:15px 22px;margin-top:6px}
#authPage .actions .btn{border-radius:999px}
#authPage #forgotLink{border:0;background:none;padding:0;color:var(--muted);align-self:flex-end!important;font-size:.9rem;text-decoration:underline;margin-top:-6px}
.auth-foot{text-align:center;color:var(--muted);font-size:.92rem}
.linkb{background:none;border:0;font:700 1em var(--body);color:var(--acc-text);cursor:pointer;padding:0;text-decoration:underline}
.huddle{position:relative;height:300px;width:380px;max-width:100%;margin-inline:auto;--px:0;--py:0;--dir:1;direction:ltr}
[dir=rtl] .huddle{--dir:-1}
.mate{position:absolute;bottom:0;transform-origin:bottom center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.m-tall{left:24%;width:112px;height:252px;background:#8ea2e8;border-radius:14px 14px 0 0;transform:rotate(-5deg);z-index:1}
.m-ink{left:50%;width:84px;height:182px;background:#1f1f24;border-radius:18px 18px 0 0;z-index:2}
.m-sun{left:68%;width:104px;height:142px;background:#f4c24a;border-radius:52px 52px 0 0;z-index:3}
.m-front{left:0;width:246px;height:123px;background:#f1a27e;border-radius:246px 246px 0 0;z-index:4}
.face{position:absolute;top:30px;left:50%;display:flex;gap:16px;transform:translate(calc(-50% + var(--px)*14px),calc(var(--py)*9px));transition:transform .2s ease-out,opacity .25s}
.m-front .face{top:44px;gap:26px}
.eye{display:block;width:11px;height:11px;border-radius:50%;background:#1f1f24;transition:height .18s,border-radius .18s,transform .18s}
.m-ink .eye{background:#fffefa}
.mouth{position:absolute;top:74px;left:50%;width:26px;height:12px;border:2.5px solid #1f1f24;border-top:0;border-radius:0 0 26px 26px;transform:translate(calc(-50% + var(--px)*10px),calc(var(--py)*6px));transition:transform .2s ease-out,height .2s,width .2s}
[data-mood=nosy] .mate{transform:skewX(calc(var(--dir)*-7deg))}
[data-mood=nosy] .m-tall{transform:rotate(calc(-5deg + var(--dir)*9deg)) skewX(calc(var(--dir)*-5deg))}
[data-mood=nosy] .mouth{width:14px;height:14px;border:2.5px solid #1f1f24;border-radius:50%}
[data-mood=shy] .eye{height:3px;border-radius:3px;transform:translateY(5px)}
[data-mood=shy] .mouth{height:6px}
[data-mood=exposed] .mate{transform:skewX(calc(var(--dir)*6deg))}
[data-mood=exposed] .m-tall{transform:rotate(calc(-5deg - var(--dir)*7deg))}
[data-mood=exposed] .m-ink .face{opacity:0}
[data-mood=exposed] .mouth{width:16px;height:0;border-bottom-width:2.5px;border-radius:0}
[data-mood=wrong] .eye{height:3px;border-radius:3px;transform:translateY(5px) rotate(12deg)}
[data-mood=wrong] .mouth{border:2.5px solid #1f1f24;border-bottom:0;border-radius:26px 26px 0 0;height:10px}
@media (max-width:900px){#authPage{grid-template-columns:1fr;min-height:0}.auth-side{padding-bottom:0}.huddle{height:200px;transform:scale(.66);transform-origin:bottom center;margin-top:-90px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes blink{0%,92%,100%{scale:1 1}95%{scale:1 .1}}
  @keyframes nope{0%,100%{translate:0}25%{translate:-8px 0}75%{translate:8px 0}}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
  [data-mood=idle] .eye,[data-mood=nosy] .eye{animation:blink 5s infinite}
  .m-ink .eye{animation-delay:.7s!important}.m-sun .eye{animation-delay:1.6s!important}.m-front .eye{animation-delay:2.4s!important}
  [data-mood=wrong] .huddle{animation:nope .35s 2}
  .m-sun{animation:bob 4s ease-in-out infinite}.m-tall{animation:bob 5s .8s ease-in-out infinite}
}
.logo-mark{flex:none}
.logo span{display:flex;flex-direction:column;line-height:1.05}
.logo small{font:600 .56rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:520px){.logo small{display:none}}
/* hero: titular con subrayado, sello de confianza, composición con personajes, tarjeta y cinta de organismos */
a.logo{text-decoration:none;color:inherit;border-radius:12px}
.hero{grid-template-columns:1.15fr 1fr;gap:clamp(20px,4vw,56px);padding:clamp(24px,4.5vw,60px);padding-bottom:0;align-items:center;background:radial-gradient(520px 380px at 82% 38%,#f4c24a40,transparent 70%),linear-gradient(135deg,#fffefa 30%,#fdf3d6)}
[dir=rtl] .hero{background:radial-gradient(520px 380px at 18% 38%,#f4c24a40,transparent 70%),linear-gradient(225deg,#fffefa 30%,#fdf3d6)}
.hero h1{font-size:clamp(2.5rem,5.8vw,4.4rem);line-height:1}
[dir=rtl] .hero h1{line-height:1.3}
.hero mark{background:linear-gradient(transparent 58%,var(--accent) 58%,var(--accent) 92%,transparent 92%);color:inherit;padding-inline:.08em;border-radius:4px}
.hero .lead{font-size:1.15rem;max-width:46ch}
.hero .cta .btn{padding:15px 26px;font-size:1.05rem}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:500;font-size:.95rem}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg,.float-chip svg{color:var(--ok);flex:none}
.hero-art{position:relative;padding:110px 0 46px;min-width:0}
.hero-art .track{position:relative;z-index:2;rotate:-1.5deg;max-width:420px;margin-inline:auto}
.sun{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--accent);opacity:.9;inset-inline-end:-30px;top:30px;z-index:0}
.huddle.mini{position:absolute;left:50%;top:124px;margin:-300px 0 0 -150px;transform:scale(.5);transform-origin:bottom center;z-index:1}
.float-chip{position:absolute;z-index:3;top:74px;inset-inline-start:-8px;display:flex;align-items:center;gap:6px;background:#fffefa;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.9rem;rotate:-5deg}
.ticket{position:absolute;z-index:3;bottom:8px;inset-inline-end:-14px;background:var(--ink);color:var(--on-ink);border-radius:18px;padding:14px 18px;display:grid;gap:2px;rotate:4deg;box-shadow:0 22px 40px -20px #1f1f24;min-width:190px}
.ticket .tag{justify-self:start;color:#a6a6b0;border-color:#ffffff2e;margin-bottom:4px}
.ticket b{display:flex;align-items:center;gap:8px;font-weight:600}
.ticket b::before{content:"";width:9px;height:9px;border-radius:50%;background:#5fd08a;box-shadow:0 0 0 4px #5fd08a33}
.ticket strong{font:600 2.3rem var(--display);line-height:1.1;color:var(--accent)}
[dir=rtl] .ticket strong{text-align:right}
.ticket span:last-child{font-size:.85rem;color:#cfcdc5}
.ticker{grid-column:1/-1;overflow:hidden;direction:ltr;border-top:1px solid var(--line);margin-inline:calc(clamp(24px,4.5vw,60px)*-1);padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker div{display:flex;gap:14px;width:max-content;padding-inline:7px}
.ticker span{white-space:nowrap;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:#fffefa99}
@media (max-width:820px){.hero-art{padding-top:96px}.ticket{inset-inline-end:0}.float-chip{inset-inline-start:0}.sun{width:200px;height:200px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes tick{to{transform:translateX(-50%)}}
  @keyframes drift{0%,100%{translate:0 0}50%{translate:0 -8px}}
  @keyframes sunin{from{scale:.4;opacity:0}to{scale:1;opacity:.9}}
  @keyframes peek{from{translate:0 120px}to{translate:0 0}}
  .ticker div{animation:tick 34s linear infinite}
  .ticker:hover div{animation-play-state:paused}
  .sun{animation:sunin .9s .15s cubic-bezier(.2,.8,.2,1) both}
  .huddle.mini{animation:peek .8s .7s cubic-bezier(.2,.9,.3,1.2) both}
  .ticket{animation:up .6s .55s cubic-bezier(.2,.7,.2,1) both,drift 5s 1.2s ease-in-out infinite}
  .float-chip{animation:up .6s .75s cubic-bezier(.2,.7,.2,1) both,drift 6s 1.6s ease-in-out infinite}
  .trust li{animation:up .5s cubic-bezier(.2,.7,.2,1) both}
  .trust li:nth-child(1){animation-delay:.4s}.trust li:nth-child(2){animation-delay:.5s}.trust li:nth-child(3){animation-delay:.6s}
  .hero mark{background-size:0 100%;background-repeat:no-repeat;animation:markin .7s .6s ease-out forwards}
  @keyframes markin{to{background-size:100% 100%}}
}
@media (max-width:820px){.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(2.2rem,10vw,3rem)}.hero-art{max-width:440px;width:100%;margin-inline:auto}.trust{flex-direction:column}}
@media (max-width:820px){header.panel{position:static}section[id]{scroll-margin-top:16px}}
/* chat de soporte flotante, abajo a la derecha */
.chat-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;width:58px;height:58px;border-radius:50%;border:0;background:var(--ink);color:var(--accent);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -10px #1f1f2499;transition:translate .2s,scale .2s}
.chat-fab[aria-expanded="true"]{background:var(--accent);color:var(--ink)}
.chat-pop{position:fixed;right:20px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:30;width:min(360px,calc(100vw - 32px));height:min(500px,calc(100vh - 130px));background:#fffefa;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -24px #1f1f2480;display:flex;flex-direction:column;overflow:hidden}
.chat-head{background:var(--ink);color:var(--on-ink);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-head div{display:flex;flex-direction:column;min-width:0}
.chat-head .small{color:#a6a6b0}
.chat-head .chip{background:transparent;color:var(--on-ink);border-color:#ffffff2e}
.chat-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.msg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:.95rem;overflow-wrap:anywhere}
.msg p{margin:0}
.msg.them{align-self:flex-start;background:#fffefa;border:1px solid var(--line);border-end-start-radius:4px}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--on-ink);border-end-end-radius:4px}
.msg time{display:block;font-size:.7rem;opacity:.6;margin-top:2px}
.chat-note{font-size:.75rem;color:var(--muted);text-align:center;margin-top:auto;padding-top:10px}
#chatForm{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
#chatForm input{flex:1;min-width:0}
.chat-guest{padding:16px;border-top:1px solid var(--line);display:grid;gap:10px}
@media (min-width:901px){[dir=rtl] #side{padding-bottom:92px}}
@media (prefers-reduced-motion:no-preference){
  @keyframes ring{0%{box-shadow:0 14px 30px -10px #1f1f2499,0 0 0 0 #f4c24a99}100%{box-shadow:0 14px 30px -10px #1f1f2499,0 0 0 16px transparent}}
  .chat-fab{animation:ring 2.4s ease-out 3}
  .chat-fab:hover{translate:0 -3px;scale:1.05}
  .chat-pop:not([hidden]){animation:up .3s cubic-bezier(.2,.7,.2,1) both}
  .msg{animation:up .25s cubic-bezier(.2,.7,.2,1) both}
}
/* pie de página */
footer.foot{display:block;background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg);padding:clamp(24px,4vw,52px);padding-bottom:20px;font-size:.95rem}
.f-cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px 28px}
.f-cols>*{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.f-cols b{font:600 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a6a6b0;margin-bottom:4px}
.foot a,.foot button{color:var(--on-ink);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:start;transition:color .2s,translate .2s}
.foot nav{flex-direction:column;flex-wrap:nowrap}
.foot nav a{padding:0;border-radius:4px;font-weight:400;font-size:inherit}
.foot nav a:hover,.foot a:hover,.foot button:hover{color:var(--accent);background:none}
.foot .logo{font-size:1.4rem}
.foot .logo small{color:#a6a6b0}
.f-brand p{color:#cfcdc5;max-width:30ch}
.f-legal span{color:#cfcdc5}
.f-legal i{font-style:normal;font-size:.68rem;border:1px solid #ffffff2e;border-radius:999px;padding:1px 8px;margin-inline-start:6px;color:#a6a6b0;white-space:nowrap}
.f-bottom{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:36px;padding-top:18px;padding-right:64px;border-top:1px solid #ffffff1f;color:#a6a6b0;font-size:.85rem}
.in .f-cols{display:none}
.in .f-bottom{margin-top:0;padding-top:0;border-top:0}
.in footer.foot{padding-top:20px}
@media (max-width:820px){.f-cols{grid-template-columns:1fr 1fr}.f-brand{grid-column:1/-1}}
@media (prefers-reduced-motion:no-preference){.foot nav a:hover,.f-legal a:hover,.foot nav button:hover{translate:4px 0}[dir=rtl] .foot nav a:hover,[dir=rtl] .f-legal a:hover,[dir=rtl] .foot nav button:hover{translate:-4px 0}}
/* mis documentos */
.docs-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.doc-group{background:#fffefa;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.dg-head{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:14px 18px;background:var(--card)}
.doc-row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.doc-row>div{flex:1 1 180px;min-width:0}
.doc-row b{display:block;font-weight:600}
.doc-row small{display:block;color:var(--muted);overflow-wrap:anywhere}
.doc-ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--acc-text);display:grid;place-items:center;flex:none}
@media (prefers-reduced-motion:no-preference){.doc-group{animation:up .4s cubic-bezier(.2,.7,.2,1) both}.doc-group:nth-child(2){animation-delay:.08s}.doc-group:nth-child(n+3){animation-delay:.16s}}
.doc-row.cita{background:#e1f1e4}
.doc-row.cita .doc-ico{background:#1f7a45;color:#fff}
.doc-row.gone{opacity:.6}
.doc-row.gone b{text-decoration:line-through}

/* ===== añadidos: notificaciones, detalle, cita, legal, avisos ===== */
.offline,.demo-bar{border-radius:14px;padding:10px 16px;font-size:.9rem;font-weight:500}
.offline{background:var(--warn);color:#fff;position:sticky;top:8px;z-index:40}
.demo-bar{background:var(--mint);color:var(--acc-text);border:1px dashed #c58d10}
.bell-wrap{position:relative;display:inline-flex}
.bell{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fffefa;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.bell-n{position:absolute;top:-4px;inset-inline-end:-4px;min-width:20px;height:20px;border-radius:999px;background:var(--warn);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 5px}
.notif-pop{position:absolute;top:48px;inset-inline-end:0;z-index:20;width:min(340px,calc(100vw - 40px));max-height:420px;overflow:auto;background:#fffefa;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -24px #1f1f2480;padding:14px;display:flex;flex-direction:column;gap:8px}
.notif{display:block;width:100%;text-align:start;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;color:inherit;cursor:pointer}
.notif.new{background:var(--mint);border-color:#f4c24a}
.notif small{display:block;color:var(--muted);margin-top:2px}
.cita-card{background:#1f7a45;color:#fff;border-radius:var(--r-md);padding:16px 18px;display:grid;gap:4px;margin-bottom:18px}
.cita-card .tag{justify-self:start;color:#fff;border-color:#ffffff66}
.cita-card strong{font:600 clamp(1.5rem,3.4vw,2.1rem) var(--display);line-height:1.15}
[dir=rtl] .cita-card strong{text-align:right}
.req{cursor:pointer;width:100%;font:inherit;color:inherit;text-align:start}
.req:hover{border-color:var(--ink)}
.status.off{background:var(--card);color:var(--muted);border-color:transparent}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
.det-grid>*{min-width:0}
.btn.danger{background:var(--warn);color:#fff}
#legal article{max-width:70ch;margin-top:18px;display:flex;flex-direction:column;gap:14px}
#legal h1{font-size:clamp(1.8rem,4vw,2.6rem)}
#legal .titular{background:var(--card);border-radius:var(--r-md);padding:14px 18px}
mark.todo{background:#fbe4a6;color:#553b06;padding:1px 6px;border-radius:6px;font-weight:600}
.foot .f-legal button{color:var(--on-ink)}
.btn[disabled]{opacity:.55;cursor:progress}
@media (max-width:820px){.det-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.notif-pop:not([hidden]){animation:up .25s cubic-bezier(.2,.7,.2,1) both}.cita-card{animation:up .45s cubic-bezier(.2,.7,.2,1) both}}

/* mensajes importantes */
.pill-n{background:var(--warn);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;padding:1px 8px;margin-inline-start:auto}
.ask-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;width:100%;text-align:start;font:inherit;color:#fff;background:var(--warn);border:0;border-radius:var(--r-md);padding:14px 18px;cursor:pointer}
.ask-banner .btn{background:#fff;color:var(--ink)}
.asks{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.ask{background:#fffefa;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:12px}
.ask.open{border:2px solid var(--warn);background:#fff8f6}
.ask-text{white-space:pre-wrap;font-size:1.05rem;overflow-wrap:anywhere}
.ask-ans{font-weight:600}
@media (prefers-reduced-motion:no-preference){.ask,.ask-banner{animation:up .4s cubic-bezier(.2,.7,.2,1) both}}
.ask .wiz-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}

/* portada: chica con su tarjeta de residencia */
.girl-art{padding:20px 0 0;display:grid;justify-items:center}
.girl-art .sun{width:300px;height:300px;top:36px;inset-inline-end:auto;left:50%;margin-left:-170px}
.girl{position:relative;z-index:1;width:min(100%,360px);height:auto;display:block}
.girl-art .ticket{bottom:96px;inset-inline:auto;left:-14px;right:auto;rotate:-4deg;min-width:170px}
.girl-art .float-chip{top:34px;inset-inline:auto;left:0;right:auto;rotate:-5deg}
.girl-note{position:relative;z-index:3;margin:-18px 0 0;background:#fffefa;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:14px 18px;max-width:400px;font-size:1rem;line-height:1.45}
.girl-note b{display:block;font:600 1.15rem var(--display)}
@media (max-width:820px){.girl-art .sun{width:230px;height:230px;margin-left:-130px}.girl-art .ticket{display:none}}
@media (prefers-reduced-motion:no-preference){.girl .arm{transform-origin:270px 330px;animation:wave 3.2s 1s ease-in-out infinite}.girl-note{animation:up .6s .9s cubic-bezier(.2,.7,.2,1) both}@keyframes wave{0%,100%{rotate:0deg}50%{rotate:-4deg}}}

/* ===== registro compacto ===== */
#authPage{min-height:0;grid-template-columns:.8fr 1.2fr}
.auth-main{padding:clamp(18px,2.4vw,32px) clamp(18px,3vw,44px);gap:10px;justify-content:flex-start}
.auth-main .auth{max-width:520px;gap:12px}
.auth-title{font-size:1.45rem}
.auth-title::before{font-size:1.05rem;margin-bottom:4px}
.auth-sub{margin-top:-6px;font-size:.95rem}
#authPage form{gap:10px}
#authPage input:not([type=checkbox]){padding:5px 0 7px;font-size:1rem}
#authPage form>.btn[type=submit]{padding:12px 20px;margin-top:2px}
.auth-side{padding:clamp(18px,2.4vw,32px);padding-bottom:0;min-height:0}
.auth-side .huddle{transform:scale(.72);transform-origin:bottom center;margin-top:-80px}
@media (min-width:901px){#authPage #authForm{display:grid!important;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:12px;align-items:end}#authPage #authForm>:not(label){grid-column:1/-1}}

/* ===== móvil: menú plegable arriba y pantallas ajustadas ===== */
.navtog{display:none}
@media (max-width:820px){
  body{padding-inline:10px;padding-block:10px 40px}
  header.panel{flex-wrap:wrap;padding:10px 12px;gap:8px;position:sticky;top:6px;z-index:20}
  header.panel .logo{order:1;margin-inline-end:auto}
  header.panel .userbox{display:contents}
  header.panel .bell-wrap{order:2}
  .navtog{order:3;display:grid;gap:5px;place-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fffefa;cursor:pointer;padding:0}
  .navtog span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:translate .2s,rotate .2s,opacity .2s}
  header.open .navtog span:nth-child(1){translate:0 7px;rotate:45deg}header.open .navtog span:nth-child(2){opacity:0}header.open .navtog span:nth-child(3){translate:0 -7px;rotate:-45deg}
  header.panel nav{order:4;width:100%;flex-direction:column;align-items:stretch;gap:2px;border-top:1px solid var(--line);padding-top:8px;margin:0}
  header.panel nav a{padding:12px 12px;border-radius:12px;font-size:1.05rem}
  header.panel .userbox>*:not(.bell-wrap){order:5}
  header.panel .userbox>.btn{flex:1 1 30%;justify-content:center;text-align:center;min-height:44px}
  header.panel:not(.open) nav,header.panel:not(.open) .userbox>*:not(.bell-wrap){display:none}
  .in header.panel nav{display:none}
  .notif-pop{position:fixed;inset-inline:10px;top:70px;width:auto;max-width:none}
  .panel{padding:18px 16px}
  .hero{gap:8px}
  .hero h1{font-size:clamp(2.1rem,9.5vw,2.8rem)}
  .hero .cta{flex-direction:column;align-items:stretch}.hero .cta .btn{justify-content:center}
  .girl-art{padding-top:8px}.girl{width:min(86%,300px)}
  #side{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:none;position:static}
  #side::-webkit-scrollbar{display:none}
  #side .side-user{display:none}
  #side .navb{width:auto;white-space:nowrap;flex:none;padding:10px 14px}
  #side .navb::before{display:none}
  #authPage{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:18px 16px 22px}
  .actions{flex-wrap:wrap}.actions .btn{flex:1 1 auto;justify-content:center}
  input,select,textarea{font-size:16px}
  .chat-pop{inset-inline:10px;width:auto;bottom:84px;max-height:70vh}
  html,body{overflow-x:clip}
  .dash-hero .stats{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.dash-hero .stats div{min-width:0;overflow-wrap:anywhere}
}

#delForm[hidden]{display:none!important}
.sure{background:var(--warn)!important;color:#fff!important;border-color:transparent!important}

/* ===== modo oscuro de la web del cliente ===== */
html[data-theme=dark]{color-scheme:dark;--bg:#131317;--panel:#1c1c22e6;--card:#2a2a33;--line:#ffffff1f;--fg:#ecebe6;--muted:#a9a8ae;--edge:#ffffff12;--shadow:0 18px 40px -26px #000;--ink:#f4c24a;--on-ink:#1f1f24;--accent-soft:#4a3c12;--mint:#332b14;--acc-text:#f4c24a;--warn:#e56a5e;--ok:#7fd09a;--mist:#2a2a33;--sky:#0c0c0f}
html[data-theme=dark] body,html[data-theme=dark][dir=rtl] body{background:radial-gradient(900px 520px at 100% 0,#f4c24a1f,transparent 62%),var(--bg);background-attachment:fixed}
html[data-theme=dark] :is(.btn.ghost,.chip,.ask,.kpi,.req,.th,.conv,.navtog,.float-chip,.girl-note,.notif-pop,.chat-pop,details,.step,.how li,.doc-group,.doc-row,.docs li,.track,.tl i,.dash-cols,.bizum div,.stats div,.auth-main,.bell){background-color:#24242c;color:var(--fg);border-color:var(--line)}
html[data-theme=dark] :is(input,select,textarea){background-color:#24242c!important;color:var(--fg)!important;border-color:#ffffff29!important}
html[data-theme=dark] .hero{background:linear-gradient(135deg,#1c1c22,#262214)}
html[data-theme=dark] .tile{color:#1f1f24}html[data-theme=dark] .tile :is(.muted,.tag,h3,.price){color:#1f1f24}html[data-theme=dark] .tile .arrow{background:#1f1f24;color:#f4f3ee}
html[data-theme=dark] :is(.ticket,footer.panel,.site-foot,.chat-head,.cita-card,.pill-dark){background:#0c0c0f;color:#f4f3ee}
html[data-theme=dark] .ticket strong{color:#f4c24a}
html[data-theme=dark] .chip[aria-pressed=true],html[data-theme=dark] .navb[aria-current=true]{background:var(--ink);color:var(--on-ink)}
html[data-theme=dark] .status.ok{background:#1d3a28;color:#8fdcaa}
html[data-theme=dark] .msg:not(.me){background:#34343f;color:#f4f3ee}
html[data-theme=dark] .hero h1 mark{color:inherit;background:linear-gradient(transparent 62%,#f4c24a66 0)}html[data-theme=dark] mark.todo{color:#1f1f24}
html[data-theme=dark] .ticker span{background:#24242c;color:var(--fg);border-color:var(--line)}
html[data-theme=dark] footer.foot{background:#0c0c0f;color:#f4f3ee}html[data-theme=dark] footer.foot :is(a,button){color:#f4f3ee}html[data-theme=dark] footer.foot :is(.muted,small,h4,p){color:#a9a8ae}
html[data-theme=dark] #side{background:#1c1c22e6;border-color:var(--edge)}html[data-theme=dark] .side-card{background:#332b14;color:var(--fg)}html[data-theme=dark] .side-card .small{color:var(--muted)}
html[data-theme=dark] .avatar{background:#f4c24a;color:#1f1f24}
@media (min-width:1101px){header.panel{flex-wrap:nowrap}header.panel nav{gap:2px}header.panel nav a{padding-inline:12px;white-space:nowrap}.userbox{flex-wrap:nowrap}}
#themeBtn{min-width:40px;padding-inline:10px;font-size:1.05rem;line-height:1}
html[data-theme=dark] .auth-side,html[data-theme=dark][dir=rtl] .auth-side{background:linear-gradient(180deg,#24242c,#1a1a1f);color:var(--fg)}
html[data-theme=dark] .m-ink{background:#3a3a46}
html[data-theme=dark] .logo-mark rect,html[data-theme=dark] .logo-mark path{stroke:#1f1f24}
html[data-theme=dark] .demo-bar{background:#332b14;color:#f4c24a}
html[data-theme=dark] .chat-fab{background:#f4c24a;color:#1f1f24}
html[data-theme=dark] .sure{color:#1f1f24!important}
@media (max-width:820px){header.panel #themeBtn{flex:1 1 30%}}
header.panel nav a[aria-current="true"],header.panel nav a[aria-current="true"]:hover{background:var(--ink);color:var(--on-ink)}
html[data-theme=dark] .dash-hero{background:linear-gradient(135deg,#1c1c22,#262214)}
html[data-theme=dark] .cita-card.ok,html[data-theme=dark] .stats .ok{color:#1f1f24}

/* ===== ventana del código de verificación ===== */
.otp-back{position:fixed;inset:0;z-index:80;background:#1f1f2480;backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.otp-back[hidden]{display:none}
.otp{position:relative;width:min(460px,100%);background:#fffefa;border:1px solid var(--edge);border-radius:28px;box-shadow:0 40px 80px -30px #1f1f2499;padding:34px clamp(18px,5vw,36px) 26px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.otp h3{font-size:1.5rem}
.otp-x{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted)}
.otp-x:hover{color:var(--fg);border-color:var(--fg)}
.otp-row{display:flex;gap:8px;justify-content:center;margin:14px 0 6px;height:60px;align-items:center}
.otp-row input{width:clamp(40px,12vw,52px);height:60px;padding:0;text-align:center;font:600 1.7rem var(--display);border-radius:16px;border:1.5px solid #1f1f2429;background:var(--bg);color:var(--fg);caret-color:var(--acc-text)}
.otp-row input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.otp-row input.on{background:var(--accent-soft);border-color:var(--accent)}
.otp-seal{position:absolute;top:128px;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:20px;background:#25693e;color:#fff;display:grid;place-items:center;scale:0;opacity:0;pointer-events:none}
.otp-foot{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:28px}
.otp.busy .otp-row input{opacity:.6}
.otp.bad .otp-row input{border-color:var(--warn);background:#fbe6e3}
.otp.ok h3{color:#25693e}
.otp.ok .otp-row input{background:#e1f1e4;border-color:#25693e;color:#25693e;translate:var(--dx) 0;scale:.3;opacity:0}
.otp.ok .otp-seal{scale:1;opacity:1}
.otp.ok :is(.otp-foot,.otp-x,#otpDemo){visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .otp-back:not([hidden]) .otp{animation:otpIn .32s cubic-bezier(.2,.8,.2,1) both}
  .otp-row input{transition:translate .5s cubic-bezier(.6,0,.2,1),scale .5s cubic-bezier(.6,0,.2,1),opacity .35s .2s,background-color .2s,border-color .2s,box-shadow .2s}
  .otp-seal{transition:scale .45s .38s cubic-bezier(.2,1.4,.4,1),opacity .2s .38s}
  .otp.bad .otp-row{animation:otpShake .4s}
  @keyframes otpIn{from{opacity:0;translate:0 18px;scale:.96}}
  @keyframes otpShake{20%,60%{translate:-8px 0}40%,80%{translate:8px 0}}
}
html[data-theme=dark] .otp{background:#1c1c22;border-color:var(--line)}
html[data-theme=dark] .otp.bad .otp-row input{background:#3a1f1d!important}
html[data-theme=dark] .otp.ok .otp-row input{background:#1d3a28!important;color:#8fdcaa!important;border-color:#8fdcaa!important}

/* ===== seguimiento público ===== */
.track-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(18px,4vw,48px);align-items:start}
.track-grid>*{min-width:0}
.track-out{background:var(--card);border-radius:var(--r-md);padding:clamp(16px,2.4vw,26px);min-height:260px}
.track-empty{display:grid;place-items:center;align-content:center;gap:8px;min-height:210px;text-align:center}
.track-num{font:600 clamp(1.8rem,4vw,2.6rem) var(--display);letter-spacing:.04em;color:var(--muted);opacity:.55}
.track-out .tl{margin-top:10px}
@media (max-width:820px){.track-grid{grid-template-columns:1fr}}
html[data-theme=dark] .track-out{background:#24242c}
.trk-box{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-soft);border:1px dashed var(--accent);border-radius:var(--r-md);padding:14px 18px}
.trk-box b{display:block;font:600 clamp(1.6rem,5vw,2.1rem) var(--display);letter-spacing:.03em}

/* WhatsApp, descuentos, trae a un amigo, opiniones y contador */
.wa-fab{position:fixed;right:23px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:30;width:52px;height:52px;border-radius:50%;background:#128c4a;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -10px #0b3d2399;transition:translate .2s,scale .2s}
.wa-fab:hover{translate:0 -3px;scale:1.05}.wa-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
html[dir=rtl] .wa-fab{right:auto;left:23px}
.hero-count{margin-top:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:1rem}.hero-count b{font-size:1.6rem;font-weight:800;letter-spacing:-.5px}.hero-rate{color:var(--muted)}
.svc-links{margin-top:22px;font-size:.92rem;line-height:2;color:var(--muted)}.svc-links b{color:var(--ink);font-weight:700}.svc-links a{display:inline-block;margin:0 4px;padding:0 2px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.promo{display:flex;flex-direction:column;gap:8px;margin:14px 0}.promo-row{display:flex;gap:8px;margin-top:6px}.promo-row input{flex:1;min-width:0;text-transform:uppercase}
.ref-card{border-radius:var(--r-lg);margin-top:22px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px 28px;align-items:center;padding:22px 24px;background:#fbe4a6;color:#1f1f24;border:1px solid #f4c24a}
.ref-card .tag{background:#1f1f24;color:#f4c24a}.ref-card h3{color:#1f1f24}.ref-card .small{color:#3a3936;margin-top:6px}
.ref-code{display:flex;flex-direction:column;gap:8px}.ref-code b{font-size:1.7rem;letter-spacing:3px;font-weight:800}
.ref-card .btn.ghost{color:#1f1f24;border-color:#1f1f24}
@media (max-width:760px){.ref-card{grid-template-columns:1fr}}
.rev-sec.none{display:none!important}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}
.rev{border-radius:var(--r-md);margin:0;display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);background:var(--card)}
.rev blockquote{margin:0;line-height:1.55;white-space:pre-wrap}.rev figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:auto}
.stars{color:#b97a00;letter-spacing:2px}
.star-in{display:flex;gap:4px}.star-in button{width:46px;height:46px;border:0;background:none;font-size:2rem;line-height:1;color:#c9c2ab;cursor:pointer;border-radius:10px}.star-in button.on{color:#e0a100}.star-in button:focus-visible{outline:3px solid var(--ink)}
html[data-theme=dark] .stars{color:#f4c24a}html[data-theme=dark] .star-in button{color:#55555e}html[data-theme=dark] .star-in button.on{color:#f4c24a}