/* ═══ PAPEL ═══ Claro por defecto; el oscuro es elección explícita. */
:root{
  --paper:#F0EBE4; --lift:#FAF7F1; --tint:#E7E1D7; --deep:#DDD5C8;
  --ink:#2A251F; --ink2:#6B6355; --ink3:#9A9183;
  --rule:#D9D1C3; --hair:#E3DCCF;
  --clay:#A9795B; --sage:#87957D;
  --bezel:#1E1A17; --bezel2:#2C2723;
  --btn:#2A251F; --btnink:#F7F3EB;
  --ok:#6B8570; --few:#A9795B; --full:#A4685D;
  --ok-bg:#E4EBE2; --few-bg:#EFE3D8; --full-bg:#EFDEDA;
  --grain:.05; --blend:multiply;
  --ui:'Inter',system-ui,-apple-system,sans-serif;
  --dis:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --brand:#4E7F72; --brand-text:#3E6A5F;
  color-scheme:light;
}
:root[data-mode="dark"]{
  --paper:#151310; --lift:#1E1A16; --tint:#1A1713; --deep:#221E19;
  --ink:#ECE5D8; --ink2:#9A9183; --ink3:#6C6559;
  --rule:#332C24; --hair:#2A241E;
  --clay:#C6996F; --sage:#A2AF95;
  --bezel:#0C0A08; --bezel2:#1A1613;
  --btn:#ECE5D8; --btnink:#1A1712;
  --ok:#8FAF92; --few:#C6996F; --full:#C98F84;
  --ok-bg:#1E2A21; --few-bg:#2A2118; --full-bg:#2E1E1B;
  --grain:.055; --blend:screen;
  color-scheme:dark;
}
:root{--sh-card:0 2px 4px rgba(42,37,31,.04),0 34px 70px -28px rgba(42,37,31,.55);--sh-lift:0 4px 8px rgba(42,37,31,.04),0 60px 120px -40px rgba(42,37,31,.6);--sh-dev:0 60px 120px -36px rgba(20,16,12,.75);--sh-nav:0 18px 44px -20px rgba(42,37,31,.5);--bd:var(--rule)}
:root[data-mode="dark"]{--sh-card:0 34px 70px -24px rgba(0,0,0,.95);--sh-lift:0 60px 120px -40px rgba(0,0,0,1);--sh-dev:0 60px 120px -36px rgba(0,0,0,.95);--sh-nav:0 12px 34px -22px rgba(0,0,0,.7)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:var(--blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(110% 70% at 50% 0%,rgba(255,255,255,.5),transparent 60%),
             radial-gradient(70% 60% at 50% 110%,rgba(120,100,70,.10),transparent 60%)}
[data-mode="dark"] body::after{background:radial-gradient(110% 70% at 50% 0%,rgba(255,240,215,.04),transparent 60%)}
nav,main,footer{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
::selection{background:var(--brand);color:#fff}
p{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--dis);font-weight:500;margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-variation-settings:'opsz' 96;font-size:clamp(38px,5.8vw,66px);line-height:1.04;letter-spacing:-.04em}
h2{font-variation-settings:'opsz' 48;font-size:clamp(26px,3.2vw,38px);line-height:1.14;letter-spacing:-.03em}
h3{font-variation-settings:'opsz' 48;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.03em}
.lbl{font-size:11.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.lede{font-size:17.5px;color:var(--ink2);line-height:1.65;max-width:56ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.page{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.block{padding-block:clamp(60px,9vw,120px)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font:inherit;font-size:15px;font-weight:600;padding:13px 24px;border-radius:999px;border:1px solid var(--btn);background:var(--btn);color:var(--btnink);text-decoration:none;cursor:pointer;transition:opacity .15s,transform .15s,background-color .5s,border-color .5s,color .5s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.sm{padding:10px 19px;font-size:14px}
.btn:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ═══ nav en píldora flotante ═══ */
#topnav{position:sticky;top:14px;z-index:40;pointer-events:none}
.pill{pointer-events:auto;max-width:920px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:12px 12px 12px 26px;border-radius:999px;
  background:color-mix(in srgb,var(--lift) 72%,transparent);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid color-mix(in srgb,var(--bd) 70%,transparent);box-shadow:var(--sh-nav);transition:background-color .5s,border-color .5s}
.mark{font-family:var(--dis);font-variation-settings:'opsz' 40;font-weight:600;font-size:21.5px;letter-spacing:-.03em;margin-right:auto;text-decoration:none}
.mark i{font-style:normal;color:var(--acc-text,var(--acc));transition:color .5s}
#topnav a.lk{font-size:14.5px;color:var(--ink2);text-decoration:none}
#topnav a.lk:hover{color:var(--ink)}
@media (max-width:820px){#topnav a.lk{display:none}.pill{gap:12px}}
.tgl{width:36px;height:36px;border-radius:999px;border:1px solid var(--rule);background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink2);flex:none}
.tgl:hover{color:var(--ink);border-color:var(--ink3)}
.tgl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.tgl:hover svg{transform:rotate(18deg)}
.tgl .sun{display:none}
[data-mode="dark"] .tgl .sun{display:block}
[data-mode="dark"] .tgl .moon{display:none}

/* ═══ hero centrado ═══ */
.hero{padding-top:clamp(70px,9vw,110px);text-align:center}
.hero h1{max-width:19ch;margin:18px auto 0}
.hero h1 .ln{display:inline-block}
/* Mientras cicla, el titular deja de depender de la animación de entrada
   (que fija su opacidad con forwards) y pasa a cruzarse por transición. */
.hero.cyc h1 .ln,.hero.cyc .lede{animation:none!important;opacity:1}
.hero.cyc h1,.hero.cyc .lede{transition:opacity .34s ease,transform .34s ease}
.hero.cyc.out h1{opacity:0;transform:translateY(-6px)}
.hero.cyc.out .lede{opacity:0;transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.hero.cyc h1,.hero.cyc .lede{transition:none}}
.hero .fine b{color:var(--acc-text,var(--acc))}
.cat{font-size:clamp(18.5px,2.15vw,23px);line-height:1.35;letter-spacing:-.012em;color:var(--ink);margin:20px auto 0}
.hero .lede{margin:12px auto 0;max-width:50ch;font-size:clamp(15.5px,1.55vw,17px);line-height:1.6;text-wrap:pretty}
.acts{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.fine{font-size:13px;color:var(--ink3);margin-top:14px}

/* ═══ escenario: la app en el centro, el panel alrededor ═══ */
.stage{position:relative;perspective:1300px;text-align:left;height:640px;margin:clamp(36px,5vw,56px) auto 0;max-width:1000px}
.glow{position:absolute;left:50%;top:52%;width:820px;height:520px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sage) 22%,transparent),transparent 72%);filter:blur(30px);opacity:.9}
.glow2{position:absolute;left:62%;top:60%;width:520px;height:420px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--clay) 16%,transparent),transparent 72%);filter:blur(34px)}
.device{position:absolute;left:50%;top:0;margin-left:-150px;width:300px;border-radius:48px;padding:10px;background:var(--bezel);
  box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.08) inset;z-index:3}
.device .screen{position:relative;border-radius:38px;overflow:hidden;background:var(--b-field);min-height:598px;display:flex;flex-direction:column}
.device .island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:23px;border-radius:999px;background:var(--bezel);z-index:6}
.ph-top{display:flex;justify-content:space-between;padding:15px 24px 4px;font-size:11px;font-weight:600;color:var(--b-n70)}
.ph-top .sig{display:flex;gap:3px;align-items:center}.ph-top .sig i{width:4px;height:4px;border-radius:50%;background:var(--b-n70);display:block}
.ph-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 6px}
.ph-head b{font-family:var(--dis);font-variation-settings:'opsz' 30;font-weight:600;font-size:15px;letter-spacing:-.02em;color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-head i{width:26px;height:26px;border-radius:50%;background:var(--b-n15);display:block;flex:none}
.ph-hero{margin:4px 14px 14px;border-radius:22px;background:var(--b-grad);color:var(--b-on);padding:18px 19px;position:relative;overflow:hidden;isolation:isolate}
.ph-hero::after{content:'';position:absolute;right:-50px;top:-60px;width:160px;height:160px;border-radius:50%;border:1px solid currentColor;opacity:.18;z-index:3}
.ph-hero .e,.ph-hero .n,.ph-hero .m,.ph-hero .t{position:relative;z-index:2}
.ph-hero .e{font-size:8.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;opacity:.72}
.ph-hero .n{font-family:var(--dis);font-variation-settings:'opsz' 48;font-weight:600;font-size:22px;letter-spacing:-.03em;margin-top:7px;line-height:1.12}
.ph-hero .m{font-size:11.5px;opacity:.78;margin-top:3px}
.ph-hero .t{font-family:var(--dis);font-variation-settings:'opsz' 72;font-weight:600;font-size:29px;letter-spacing:-.04em;margin-top:13px;font-variant-numeric:tabular-nums}
.ph-sec{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--b-n50);padding:0 18px 8px}
.ph-row{display:flex;align-items:center;gap:8px;margin:0 12px 7px;padding:11px 10px;border-radius:15px;background:var(--b-card);border:1px solid var(--b-n15)}
.ph-row .h{font-family:var(--dis);font-weight:600;font-size:12.5px;color:var(--b-ink);font-variant-numeric:tabular-nums;width:34px;flex:none;letter-spacing:-.02em}
.ph-row .b{flex:1;min-width:0}
.ph-row .b b{display:block;font-size:12px;font-weight:600;color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .b span{font-size:10px;color:var(--b-n70)}
.ph-row .p{font-size:9px;font-weight:600;padding:3px 8px;border-radius:999px;flex:none}
.ph-row .p.go{background:var(--b-accent);color:var(--b-on)}
.ph-row .p.no{background:var(--b-n08);color:var(--b-n70)}
.ph-nav{margin-top:auto;display:flex;justify-content:space-around;padding:13px 16px 18px;border-top:1px solid var(--b-n15)}
.ph-nav i{display:block;width:19px;height:19px;border-radius:6px;background:var(--b-n15)}
.ph-nav i:first-child{background:var(--b-accent)}
.wash{position:absolute;inset:0;z-index:1;clip-path:circle(0% at 20% 82%);transition:clip-path .74s cubic-bezier(.28,.74,.22,1)}
.wash.go{clip-path:circle(148% at 20% 82%)}

/* tarjetas del panel, flotando */
.fc{position:absolute;z-index:2;transition:filter .4s ease;width:236px;background:var(--lift);border:1px solid var(--bd);border-radius:16px;padding:14px 16px;
  box-shadow:var(--sh-card);transition:background-color .5s,border-color .5s}
[data-mode="dark"] .device{box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.11) inset,0 1px 0 rgba(255,255,255,.14) inset}
.fc .k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.fc .v{font-family:var(--dis);font-variation-settings:'opsz' 72;font-weight:600;font-size:30px;letter-spacing:-.04em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.fc .d{font-size:12px;color:var(--ok);font-weight:600;margin-top:5px}
.fc.a{left:2%;top:92px}
.fc.b{right:2%;top:70px;width:250px}
.fc.c{left:0;top:326px;width:262px}
.fc.d{right:0;top:318px;width:268px}
.fc.e{left:50%;bottom:-8px;width:230px;z-index:4;margin-left:35px}
.alert{display:flex;align-items:center;gap:11px}
.alert .ic{width:28px;height:28px;border-radius:50%;background:var(--few-bg);display:grid;place-items:center;flex:none}
.alert .ic svg{width:14px;height:14px;stroke:var(--few);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alert b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.alert span{font-size:11.5px;color:var(--ink2)}
.fc.b .btn{margin-top:11px;width:100%;padding:8px 12px;font-size:12.5px}
.rail{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.slot{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--tint)}
.slot .h{font-family:var(--dis);font-weight:600;font-size:12.5px;width:36px;flex:none;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.slot .n{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .n span{display:block;font-size:10.5px;color:var(--ink2);font-weight:400}
.slot .m{width:44px;flex:none;text-align:right;font-size:11px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.slot .bar{display:block;height:3px;border-radius:2px;background:var(--rule);margin-top:3px;overflow:hidden}
.slot .bar i{display:block;height:100%;border-radius:2px;background:var(--ok)}
.slot[data-s="pocos"] .bar i{background:var(--few)}
.slot[data-s="lleno"] .bar i{background:var(--full)}
.slot[data-s="lleno"] .m{color:var(--full)}
.att{margin:10px 0 0;padding:0;list-style:none}
.att li{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--hair);font-size:12.5px}
.att li:first-child{border-top:0}
.att .av{width:24px;height:24px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--ink2);flex:none}
.att .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--rule);flex:none;display:grid;place-items:center;color:transparent}
.att .ck svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.att .ck.on{background:var(--btn);border-color:var(--btn);color:var(--btnink)}
.brand-card .k{margin-bottom:8px}
.brand-card input{width:100%;font-family:var(--dis);font-variation-settings:'opsz' 30;font-size:18px;font-weight:600;letter-spacing:-.02em;background:var(--tint);border:1px solid var(--hair);border-radius:9px;padding:8px 11px;color:var(--ink)}
.brand-card input::placeholder{color:var(--ink3);opacity:.7}
.swatches{display:flex;gap:7px;margin-top:11px;align-items:center}
.sw{width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;border:1px solid rgba(0,0,0,.16);transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .18s}
.sw:hover{transform:scale(1.16)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lift),0 0 0 3.5px var(--ink)}
.swatches .hint{font-size:10.5px;color:var(--ink3);margin-left:auto}
/* El riel no genera caja en escritorio: las tarjetas quedan como estaban,
   sueltas y absolutas alrededor del teléfono. */
.fcrail{display:contents}

@media (max-width:980px){
  .stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
  .glow,.glow2{display:none}
  .device{position:static;margin-left:0;margin-bottom:10px}
  .fc{position:static;transform:none!important;margin-left:0}

  /* Apiladas, las cinco tarjetas eran metro y medio de scroll antes de llegar
     al resto de la página, y lo que muestran es una sola idea: el panel te va
     contando cosas. De costado se recorren en un gesto y ocupan una. */
  .fcrail{
    /* `flex-start` y no el estirado de fábrica: emparejadas a la más alta, la
       de "Clientas activas" quedaba con 300px de blanco adentro del borde. */
    /* De borde a borde sacándole el padding a la página, y no con `100vw`:
       en un navegador con barra de scroll clásica, `100vw` la incluye, así que
       el riel quedaba unos píxeles más ancho que la ventana y aparecía scroll
       horizontal en toda la página. Los márgenes negativos son exactos. */
    display:flex;align-items:flex-start;gap:12px;
    /* El ancho tiene que ser definido: sin él la caja flex se estira a lo que
       midan las diez tarjetas en vez de recortarlas y scrollear. `100%` es el
       ancho de la página sin su padding, y sumándoselo queda el ancho entero. */
    width:calc(100% + 2 * clamp(20px,5vw,44px));
    margin-inline:calc(-1 * clamp(20px,5vw,44px));
    padding:4px clamp(20px,5vw,44px) 14px;
    /* Sin snap: pelea con el deslizamiento continuo, que frena cada tarjeta
       en seco en vez de dejarla pasar. */
    overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .fcrail::-webkit-scrollbar{display:none}
  .fcrail > .fc{
    flex:0 0 auto;width:min(78vw,340px);
    /* Sin la animación de entrada escalonada: acá entran de costado y no
       flotando, y el `--d` de cada una las dejaba apareciendo de a una
       mientras uno ya está deslizando. */
    animation:none!important;opacity:1!important;
  }
}

/* logos */
.logos{margin-top:clamp(44px,6vw,68px);padding-top:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:center;align-items:center}
.logos .lg{font-size:16px;color:var(--ink3);letter-spacing:.02em;white-space:nowrap;opacity:.85}
.logos .lg.s{font-family:var(--dis);font-variation-settings:'opsz' 30;font-weight:600;font-size:17px;letter-spacing:-.02em}
.logos .lg.c{font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.logos .lg.i{font-family:var(--dis);font-style:italic;font-weight:400;font-size:18px}

/* ═══ panel grande ═══ */
.panelshot{margin-top:38px;border-radius:14px;overflow:hidden;border:1px solid var(--rule);background:var(--lift);box-shadow:0 40px 90px -46px rgba(42,37,31,.55)}
[data-mode="dark"] .panelshot{box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.ps-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--tint);border-bottom:1px solid var(--hair)}
.ps-bar i{width:8px;height:8px;border-radius:50%;background:var(--rule);display:block}
.ps-bar code{font-family:var(--ui);font-size:11px;color:var(--ink3);margin-left:8px}
.ps-body{display:flex;min-height:420px}
.ps-side{width:180px;flex:none;background:var(--tint);border-right:1px solid var(--hair);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.ps-side .h{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-family:var(--dis);font-weight:600;font-size:14px}
.ps-side .h i{width:24px;height:24px;border-radius:7px;background:var(--b-grad);display:block}
.ps-side .g{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:12px 8px 5px}
.ps-side .it{font-size:12.5px;color:var(--ink2);padding:6px 8px;border-radius:7px}
.ps-side .it.on{background:var(--deep);color:var(--ink);font-weight:600}
.ps-main{flex:1;min-width:0;padding:18px;display:flex;flex-direction:column;gap:14px}
.ps-hero{border-radius:14px;background:var(--btn);color:var(--btnink);padding:16px 18px}
.ps-hero .k{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.ps-hero .v{font-family:var(--dis);font-weight:500;font-size:22px;letter-spacing:-.03em;margin-top:4px}
.ps-stats{display:flex;gap:14px;margin-top:14px;border-top:1px solid color-mix(in srgb,currentColor 26%,transparent);padding-top:12px}
.ps-stats div{flex:1}
.ps-stats b{display:block;font-family:var(--dis);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ps-stats span{font-size:9.5px;opacity:.72}
.ps-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.ps-card{border:1px solid var(--hair);border-radius:12px;padding:14px;background:var(--lift)}
.ps-card .t{font-family:var(--dis);font-weight:600;font-size:14px;margin-bottom:10px}
.ps-act{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--hair);border-radius:9px;font-size:12.5px;margin-bottom:6px}
.ps-act i{width:22px;height:22px;border-radius:6px;background:var(--tint);display:block;flex:none}
@media (max-width:760px){.ps-side{display:none}.ps-cols{grid-template-columns:1fr}}

/* ═══ filas de producto ═══ */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(36px,5vw,64px)}
.feat + .feat{border-top:1px solid var(--hair)}
.feat.flip .txt{order:2}
@media (max-width:860px){.feat{grid-template-columns:1fr;gap:28px}.feat.flip .txt{order:0}}
.feat .txt h2{margin-top:12px;font-size:clamp(24px,2.6vw,31px)}
.feat .txt .lede{margin-top:14px;font-size:16px;max-width:42ch}
.frag{border-radius:14px;border:1px solid var(--bd);background:var(--lift);box-shadow:var(--sh-lift);overflow:hidden}
.frag .fh{padding:12px 16px;border-bottom:1px solid var(--hair);font-family:var(--dis);font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px}
.frag .fh span{margin-left:auto;font-family:var(--ui);font-size:11px;color:var(--ink3);font-weight:400}
.cal{display:grid;grid-template-columns:44px repeat(3,1fr);font-size:11px}
.cal .ch{padding:9px 6px;text-align:center;border-bottom:1px solid var(--hair);border-left:1px solid var(--hair);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.cal .ch b{display:block;font-family:var(--dis);font-size:14px;letter-spacing:-.02em;color:var(--ink);margin-top:1px}
.cal .ch.today b{color:var(--brand-text)}
.cal .hh{padding:6px 6px 0 0;text-align:right;font-size:9.5px;color:var(--ink3);border-top:1px solid var(--hair);font-variant-numeric:tabular-nums}
.cal .cc{border-top:1px solid var(--hair);border-left:1px solid var(--hair);min-height:50px;padding:3px}
.cal .ev{border-radius:7px;background:var(--tint);padding:5px 7px;min-height:44px}
.cal .ev b{display:block;font-size:10.5px;font-weight:600;line-height:1.25}
.cal .ev span{font-size:9.5px;color:var(--ink2)}
.cal .ev em{display:block;font-style:normal;font-size:9.5px;font-weight:600;color:var(--ink3);margin-top:2px}
.cal .ev em i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:4px;vertical-align:1px}
.cal .ev[data-s="pocos"] em i{background:var(--few)}
.cal .ev[data-s="lleno"]{background:var(--full-bg)}
.cal .ev[data-s="lleno"] em{color:var(--full)}
.cal .ev[data-s="lleno"] em i{background:var(--full)}
table.pay{border-collapse:collapse;width:100%;font-size:12.5px}
table.pay th{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--hair)}
table.pay td{padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:middle}
table.pay tr:last-child td{border-bottom:0}
table.pay td.n{font-variant-numeric:tabular-nums;text-align:right}
table.pay td.d{color:var(--ink2)}
.pl{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px}
.pl.ok{background:var(--ok-bg);color:var(--ok)}.pl.few{background:var(--few-bg);color:var(--few)}.pl.full{background:var(--full-bg);color:var(--full)}
.chart{padding:18px 16px 14px 34px;position:relative}
.bars{display:flex;align-items:flex-end;gap:7px;height:160px;position:relative;padding-bottom:18px}
.bars .grid{position:absolute;left:0;right:0;top:0;bottom:18px;pointer-events:none}
.bars .gl{position:absolute;left:0;right:0;height:1px;background:var(--hair)}
.bars .gl em{position:absolute;left:-30px;top:-7px;width:24px;text-align:right;font-style:normal;font-size:9px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;padding-bottom:18px;z-index:1}
.bars .b i{display:block;background:var(--btn);border-radius:3px 3px 0 0;opacity:.85}
.bars .b:last-child i{opacity:1;background:var(--brand)}
.bars .b em{position:absolute;bottom:0;left:0;right:0;text-align:center;font-style:normal;font-size:9px;color:var(--ink3)}
.bars .b strong{font-size:9.5px;font-weight:600;text-align:center;margin-bottom:4px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,48px);margin-top:36px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:26px}}
.steps .lbl{color:var(--clay);font-size:10.5px}
.steps h3{margin-top:9px;font-weight:500;font-variation-settings:'opsz' 30}
.steps p{font-size:15px;color:var(--ink2);margin-top:7px}

/* precio */
.tipped{background:var(--tint);border-block:1px solid var(--hair);transition:background-color .5s}
.tipped .page{padding-block:clamp(56px,8vw,96px)}
/* La cabecera de sección va un escalón por encima del h2 corrido: es lo
   único que hay en el ancho de la página antes de la pieza grande, y al lado
   de una ventana de 1200px el tamaño de un titular de bloque quedaba corto. */
.head{max-width:60ch;margin-inline:auto;text-align:center}
.head .lbl{font-size:12.5px;color:var(--acc-text,var(--acc))}
.head .lbl.frase{text-transform:none;letter-spacing:.01em;font-size:14px;font-weight:500}
.head h2{margin-top:13px;font-size:clamp(29px,3.7vw,44px)}
.head .lede{margin:16px auto 0;font-size:19px;line-height:1.6;max-width:54ch}
.ptop{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:26px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--lift)}
.seg button{font:inherit;font-size:13.5px;border:0;background:none;color:var(--ink2);padding:9px 18px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.ab{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--ink3)}
.ptable{margin-top:28px;overflow-x:auto;background:var(--lift);border:1px solid var(--bd);border-radius:14px}
table.pr{border-collapse:collapse;width:100%;min-width:560px}
table.pr th,table.pr td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--hair);vertical-align:baseline}
table.pr thead th{border-bottom:1px solid var(--rule);padding-top:20px}
th .rec{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:6px}
th .pn{font-family:var(--dis);font-variation-settings:'opsz' 36;font-weight:600;font-size:17px;letter-spacing:-.02em;display:block}
th .amt{display:block;margin-top:8px;font-family:var(--dis);font-variation-settings:'opsz' 96;font-weight:500;font-size:32px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
th .per{display:block;font-family:var(--ui);font-size:11.5px;font-weight:400;color:var(--ink3);margin-top:6px;letter-spacing:0}
th .save{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-top:7px}
table.pr tbody th{font-weight:400;font-family:var(--ui);font-size:14.5px;color:var(--ink2);letter-spacing:0}
table.pr tbody td{font-size:14.5px;font-variant-numeric:tabular-nums}
tr.lim td,tr.lim th{background:var(--tint)}
td.yes svg{width:15px;height:15px;stroke:var(--sage);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
td.no{color:var(--ink3);opacity:.55}
table.pr tfoot td{border-bottom:0;padding-top:20px;padding-bottom:22px}
/* ── planes en tarjetas ──
   La tabla comparativa obliga a leer en cruz doce filas para entender qué
   cambia entre dos planes. Las tarjetas lo dicen de una: cada una arranca
   en "todo lo del anterior, más" y sólo lista su diferencia. */
/* Las tres del mismo alto: en una grilla los ítems se estiran solos, así
   que alcanza con no pedirles align-items:start. Y para que los botones
   queden a la misma altura, lo único que varía arriba de ellos es la
   descripción: se le reserva el alto de dos líneas. */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media (max-width:920px){.pcards{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}.pc .who{min-height:0}}
.pc{position:relative;background:var(--lift);border:1px solid var(--rule);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;box-shadow:var(--sh-card)}
.pc.hi{border-color:var(--btn)}
.pc .rec{position:absolute;top:-11px;left:26px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--btn);color:var(--btnink);padding:4px 11px;border-radius:999px}
.pc .pn{font-family:var(--dis);font-variation-settings:'opsz' 36;font-weight:600;font-size:21px;letter-spacing:-.025em}
.pc .who{font-size:13.5px;color:var(--ink3);line-height:1.5;margin-top:5px;min-height:3em}
.pc .amt{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.pc .amt b{font-family:var(--dis);font-variation-settings:'opsz' 96;font-weight:600;font-size:44px;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.pc .amt span{font-size:13px;color:var(--ink3)}
/* En mensual no hay nada que decir acá, así que la fila no existe: la
   grilla de una sola fila va de 0fr a 1fr, que es lo que sí se puede
   transicionar (height:auto no). Las tarjetas crecen con ella. */
.pc .save{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.2,.7,.25,1),margin-top .42s cubic-bezier(.2,.7,.25,1),opacity .28s ease}
.pc .save > span{overflow:hidden;min-height:0;display:block;font-size:12.5px;color:var(--acc-text,var(--acc))}
.pcards.anual .pc .save{grid-template-rows:1fr;margin-top:7px;opacity:1}
.pc .lim{font-size:13.5px;font-weight:600;margin-top:16px}
.pc .btn{margin-top:18px;width:100%}
.pc .inc{margin:22px 0 0;align-self:start;padding:20px 0 0;border-top:1px solid var(--hair);list-style:none;display:flex;flex-direction:column;gap:11px}
.pc .mas{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 -2px}
.pc .inc li{display:flex;gap:10px;font-size:14px;color:var(--ink2);line-height:1.45}
.pc .inc svg{width:14px;height:14px;flex:none;margin-top:4px;stroke:var(--acc-text,var(--acc));fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pnote{font-size:13.5px;color:var(--ink3);margin:18px auto 0;max-width:60ch;text-align:center}

/* cita */
.quoteblk{max-width:30ch;margin:26px auto 0;text-align:center}
.quoteblk blockquote{margin:0;font-family:var(--dis);font-variation-settings:'opsz' 96;font-weight:400;font-size:clamp(23px,3.2vw,36px);line-height:1.24;letter-spacing:-.025em}
.quoteblk figcaption{margin-top:20px;font-size:14px;color:var(--ink2)}
.quoteblk figcaption b{font-weight:600;color:var(--ink)}
.smq{display:flex;gap:36px;flex-wrap:wrap;margin:48px auto 0;padding-top:26px;border-top:1px solid var(--hair);max-width:820px}
.smq figure{flex:1;min-width:240px;margin:0}
.smq blockquote{margin:0;font-size:15px;color:var(--ink2);line-height:1.58}
.smq figcaption{margin-top:10px;font-size:13px;color:var(--ink3)}
.smq figcaption b{font-weight:600;color:var(--ink);display:block}

/* pie */
footer{border-top:1px solid var(--hair);background:var(--tint);position:relative;z-index:1;transition:background-color .5s}
.fin{display:flex;gap:42px;flex-wrap:wrap;padding-block:38px 34px;align-items:flex-start}
.fin .abt{flex:1;min-width:230px;max-width:32ch}
.fin .abt p{font-size:13.5px;color:var(--ink2);margin-top:11px}
.fcol{display:flex;flex-direction:column;gap:8px}
.fcol b{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.fcol a{font-size:14px;color:var(--ink2);text-decoration:none}
.fcol a:hover{color:var(--ink)}
.base{border-top:1px solid var(--hair);padding-block:18px 30px;font-size:13px;color:var(--ink3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ═══ movimiento ═══ */
@media (prefers-reduced-motion:no-preference){
  html.anim [data-a]{opacity:0}
  html.anim.ready [data-a]{animation:rise .9s cubic-bezier(.19,.72,.24,1) forwards;animation-delay:var(--d,0s)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html.anim.ready .device{animation:rise .9s cubic-bezier(.19,.72,.24,1) .42s forwards,breathe 8s ease-in-out 2.6s infinite}
  html.anim .device{opacity:0}
  @keyframes breathe{0%,100%{transform:var(--tx) translateY(0)}50%{transform:var(--tx) translateY(-6px)}}
  html.anim.ready .fc{animation:rise .9s cubic-bezier(.19,.72,.24,1) forwards,drift var(--dur,9s) ease-in-out var(--ph,3s) infinite;animation-delay:var(--d,0s),var(--ph,3s)}
  html.anim .fc{opacity:0}
  @keyframes drift{0%,100%{translate:0 0}50%{translate:0 -5px}}
  .pre{opacity:0;transform:translateY(13px)}
  .pre.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.19,.72,.24,1);transition-delay:var(--d,0s)}
  body,.fc,.frag,.panelshot,.ptable{transition:background-color .5s ease,border-color .5s ease,color .5s ease}
  .ph-row.settle{animation:settle .55s cubic-bezier(.19,.72,.24,1) both;animation-delay:var(--d,0s)}
  @keyframes settle{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
}
/* ═══ presets de paleta (para decidir) ═══ */
:root{--acc:#7E8F79;--acc-bg:#E6EBE2}
:root[data-mode="light"]{--paper:#F0EBE4;--lift:#FAF7F1;--tint:#E7E1D7;--deep:#DDD5C8;--rule:#D9D1C3;--hair:#E3DCCF;--acc:#A9795B;--acc-bg:#EFE3D8}
:root[data-mode="dark"]{--acc:#A2AF95;--acc-bg:#232A22}
.steps .lbl,th .rec,.cal .ch.today b{color:var(--acc-text,var(--acc))}
td.yes svg{stroke:var(--acc)}

/* ═══ snapshots más grandes ═══ */
.feat{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.feat.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
@media (max-width:860px){.feat,.feat.flip{grid-template-columns:1fr}}
table.pay{font-size:13px}
table.pay td,table.pay th{white-space:nowrap;padding:12px 16px}
.cal{grid-template-columns:48px repeat(3,1fr);font-size:12px}
.cal .cc{min-height:58px}
.cal .ev{min-height:52px;padding:6px 8px}
.cal .ev b{font-size:11.5px}.cal .ev span,.cal .ev em{font-size:10px}

/* ═══ iconos de la navbar del teléfono ═══ */
.ph-nav{padding:11px 22px 16px}
.ph-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--b-n50);text-decoration:none;font-size:8.5px;font-weight:600}
.ph-nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ph-nav a.on{color:var(--b-accent)}

/* ═══ proof strip ═══ */
.proof{margin-top:clamp(44px,6vw,68px);padding-top:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:16px 44px;justify-content:center;align-items:center}
.proof .lg{font-family:var(--dis);font-variation-settings:'opsz' 30;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink3);white-space:nowrap}
/* La ventana por la que desfilan los estudios.
   La máscara es lo que hace el efecto: los nombres no se cortan contra un
   borde duro, se desvanecen justo antes de la línea, y el de la derecha
   parece meterse atrás de la métrica. Sin la máscara esto es un marquee
   cualquiera. */
.proof .lgs{position:relative;overflow:hidden;height:30px;width:clamp(210px,27vw,360px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 13%,#000 74%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 13%,#000 74%,transparent)}
.proof .track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;
  will-change:transform;animation:desfile var(--dur,26s) linear infinite}
/* Va de -50% a 0, o sea hacia la derecha. Cada nombre lleva su margen en
   vez de un gap del flex: así media pista mide exactamente una copia y el
   salto del loop cae en el mismo lugar que el original. */
.proof .track .lg{margin-right:56px}
@keyframes desfile{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.proof:hover .track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.proof .track{animation:none;transform:none}
  .proof .lgs{mask-image:none;-webkit-mask-image:none;width:auto}}
.proof .ph2{font-family:var(--ui);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--ink3)}
.proof .ph2.todo{border:1px dashed var(--rule);border-radius:6px;padding:4px 10px}
.todo-note{margin:14px auto 0;display:inline-block;font-size:12px;color:var(--ink3);border:1px dashed var(--rule);border-radius:6px;padding:5px 12px}
.proof .sep{width:1px;height:26px;background:var(--rule)}
.proof .met{display:flex;align-items:baseline;gap:8px}
.proof .met b{font-family:var(--dis);font-variation-settings:'opsz' 72;font-weight:600;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.proof .met span{font-size:13px;color:var(--ink2)}
.proof .met em{font-style:normal;font-size:10.5px;color:var(--acc-text,var(--acc));border:1px dashed var(--rule);border-radius:5px;padding:1px 6px;margin-left:4px}

/* ═══ testimonios con rating ═══ */
.rate{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.rate b{font-family:var(--dis);font-variation-settings:'opsz' 72;font-weight:600;font-size:38px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.rate .st{display:flex;gap:3px}
.st svg{width:16px;height:16px;fill:var(--acc);stroke:none}
.st svg.o{fill:none;stroke:var(--acc);stroke-width:1.6}
.rate span{font-size:13.5px;color:var(--ink2)}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:860px){.tcards{grid-template-columns:1fr}}
.tc{background:var(--lift);border:1px solid var(--bd);border-radius:16px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-card)}
.tc .st svg{width:13px;height:13px}
.tc blockquote{margin:0;font-family:var(--dis);font-variation-settings:'opsz' 30;font-size:16.5px;line-height:1.45;letter-spacing:-.01em}
.tc .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.tc .av{width:34px;height:34px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink2);flex:none}
.tc .who b{display:block;font-size:13.5px;font-weight:600}
.tc .who span{font-size:12px;color:var(--ink3)}

/* ═══ el panel, navegable — paleta del admin (FitStudio), no la de la página ═══ */
#adm{--f:#FBF7F4;--c:#FFFFFF;--i:#1F1A16;--n70:#6B635E;--n50:#9B938D;--n30:#CAC3BD;--n15:#E5DFD9;--n08:#F0EBE6;--n08b:#EFEAE5;--acc2:#31231B;--acc2s:#2C1F18;--on:#FFFFFF;--wash:#E9E7E5;--tint2:#F4F3F2;--at:#31231B;
  --ok:#4F6B59;--okbg:#EBF1EC;--few:#A0754A;--fewbg:#F2E7DA;--full:#A9564C;--fullbg:#F5EBEA;--warnbg:#FBF1E3;--warn:#8A5A1C;--warnl:#F0DFC4;
  margin-top:38px;border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:var(--f);color:var(--i);box-shadow:var(--sh-lift);font-size:13px;line-height:1.45}
[data-mode="dark"] #adm{--f:#100D0C;--c:#1C1815;--i:#F4EFEB;--n70:#A39A94;--n50:#7D756F;--n30:#4E4741;--n15:#2F2A26;--n08:#25211E;--n08b:#2A2522;--acc2:#5A9B8A;--acc2s:#4F8A7B;--on:#FFFFFF;--wash:#2B3A36;--tint2:#232B29;--at:#8FC4B6;
  --ok:#7FBE95;--okbg:#1B2721;--few:#D4A574;--fewbg:#2C2418;--full:#E08C82;--fullbg:#2C1D1B;--warnbg:#2A2118;--warn:#E3AC6B;--warnl:#3A2E20}
#adm .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--n08);border-bottom:1px solid var(--n15)}
#adm .bar i{width:8px;height:8px;border-radius:50%;background:var(--n30);display:block}
#adm .bar code{font-family:var(--ui);font-size:11px;color:var(--n50);margin-left:8px}
/* La ventana se sale del ancho de la página: es una captura de una app de
   escritorio y a 1080 el calendario entraba apretado. La cabecera de la
   sección sigue con su propio ancho de lectura. */
#panel{max-width:1320px}
/* El alto lo pone medirAdm(): mide las trece pantallas al arrancar y deja
   el marco en la más alta. El 716 de acá es sólo lo que se ve mientras el
   JS no corrió. Igual para todas las secciones, a propósito: un marco que
   se acomoda a cada una empuja media página al cambiar de sección. */
#adm .body{display:flex;height:716px;position:relative}
/* ── la ficha lateral ──
   La misma geometría que showAdminFormPanel() ya usa en la app: 440px
   entrando desde la derecha, con velo. Tocar una fila abre el detalle sin
   perder de vista la lista de la que salió. */
#adm-scrim{position:absolute;inset:0;background:rgba(31,26,22,.34);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;border:0;padding:0;cursor:default}
#adm[data-panel="1"] #adm-scrim{opacity:1;pointer-events:auto}
#adm-panel{position:absolute;top:0;right:0;bottom:0;width:440px;max-width:92%;background:var(--c);border-left:1px solid var(--n15);
  box-shadow:-30px 0 70px -34px rgba(0,0,0,.4);transform:translateX(101%);transition:transform .26s cubic-bezier(.22,.8,.3,1);
  z-index:24;display:flex;flex-direction:column;overflow:hidden}
#adm[data-panel="1"] #adm-panel{transform:none}
#adm-panel .ph2{display:flex;align-items:flex-start;gap:12px;padding:17px 18px 14px;border-bottom:1px solid var(--n15);flex:none}
#adm-panel .ph2 .t{flex:1;min-width:0}
#adm-panel .ph2 b{display:block;font-family:var(--dis);font-variation-settings:'opsz' 48;font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1.2}
#adm-panel .ph2 span{display:block;font-size:12px;color:var(--n70);margin-top:3px}
#adm-panel .x{width:30px;height:30px;border-radius:9px;border:1px solid var(--n15);background:none;cursor:pointer;display:grid;place-items:center;flex:none;color:var(--n70);font:inherit;font-size:14px;line-height:1}
#adm-panel .x:hover{background:var(--tint2);color:var(--i)}
#adm-panel .bd{flex:1;overflow-y:auto;padding:16px 18px}
#adm-panel .sec{font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--n50);margin:20px 0 9px}
#adm-panel .sec:first-child{margin-top:0}
#adm-panel .sum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n15);border:1px solid var(--n15);border-radius:12px;overflow:hidden}
#adm-panel .sum > div{background:var(--c);padding:10px 12px}
#adm-panel .sum .v{font-family:var(--dis);font-variation-settings:'opsz' 40;font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
#adm-panel .sum .k{font-size:10.5px;color:var(--n70);margin-top:2px}
#adm-panel .kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--n08b);font-size:12.5px}
#adm-panel .kv:last-child{border-bottom:0}
#adm-panel .kv dt{color:var(--n70);margin:0}
#adm-panel .kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
#adm-panel .lst{margin:0;padding:0;list-style:none}
#adm-panel .lst li{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--n08b)}
#adm-panel .lst li:last-child{border-bottom:0}
#adm-panel .lst .av{width:29px;height:29px;border-radius:50%;background:var(--tint2);color:var(--at);display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
#adm-panel .lst .nm2{flex:1;min-width:0;font-size:12.5px}
#adm-panel .lst .nm2 span{display:block;font-size:11px;color:var(--n70)}
#adm-panel .ft{flex:none;padding:13px 18px;border-top:1px solid var(--n15);display:flex;gap:9px}
#adm-panel .ft .btnp{flex:1}
#adm .tw tbody tr{cursor:pointer}
#adm .cal7 .ev{cursor:pointer}
#adm .side{pointer-events:auto;position:static;width:196px;flex:none;background:var(--f);border-right:1px solid var(--n15);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
#adm .sh{display:flex;align-items:center;gap:9px;padding:4px 8px 12px;font-family:var(--dis);font-weight:600;font-size:14px;color:var(--i)}
#adm .sh i{width:26px;height:26px;border-radius:8px;background:var(--b-grad);display:grid;place-items:center;color:var(--b-on);font-family:var(--dis);font-size:13px;font-style:normal}
#adm .g{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--n50);padding:13px 8px 5px}
#adm .nv{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:12.5px;color:var(--n70);border:0;background:none;font-family:inherit;width:100%;text-align:left;cursor:pointer}
#adm .nv svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#adm .nv:hover{background:var(--tint2);color:var(--i)}
#adm .nv[aria-current="page"]{background:var(--wash);color:var(--at);font-weight:600}
#adm .sf{margin-top:auto;padding-top:10px;border-top:1px solid var(--n15);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n70)}
#adm .sf i{width:24px;height:24px;border-radius:50%;background:var(--tint2);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--at);font-style:normal}
#adm .main{flex:1;min-width:0;padding:18px;display:flex;flex-direction:column;gap:16px;overflow:auto}
#adm .main > *{flex:none}
#adm .side{overflow:auto}
#adm .stack{display:flex;flex-direction:column;gap:16px}
#adm .warn{border-radius:14px;padding:14px 16px;background:var(--warnbg);border:1px solid var(--warnl)}
#adm .warn .k{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--warn)}
#adm .warn .v{font-family:var(--dis);font-weight:600;font-size:24px;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
#adm .warn p{font-size:12px;color:var(--n70);margin:3px 0 11px}
#adm .warn button{font:inherit;font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:999px;border:0;background:var(--warn);color:#fff;width:100%}
#adm .qrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--n08b)}#adm .qrow:last-child{border-bottom:0}
#adm .qrow .qi{width:28px;height:28px;border-radius:8px;background:var(--wash);display:grid;place-items:center;flex:none}#adm .qrow .qi svg{width:13px;height:13px;stroke:var(--at);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#adm .qrow .qt{flex:1;min-width:0}#adm .qrow .qt b{display:block;font-size:12.5px;font-weight:600}#adm .qrow .qt span{font-size:11px;color:var(--n70)}
#adm .qrow .qv{font-size:11px;color:var(--n70);text-align:right;white-space:nowrap}
#adm .opt{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--n08b)}#adm .opt:last-child{border-bottom:0}
#adm .opt .ot{flex:1}#adm .opt .ot b{display:block;font-size:12.5px;font-weight:600}#adm .opt .ot span{font-size:11px;color:var(--n70)}
#adm .sw2{flex:none;width:34px;height:19px;border-radius:999px;background:var(--n15);border:1px solid var(--n30);position:relative}#adm .sw2::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--n50)}
#adm .sw2.on{background:var(--acc2s);border-color:transparent}#adm .sw2.on::after{left:auto;right:2px;background:#fff}
#adm .nps{display:flex;align-items:center;gap:16px;flex-wrap:wrap}#adm .nps .big{font-family:var(--dis);font-weight:600;font-size:44px;letter-spacing:-.04em;color:var(--ok);line-height:1}
#adm .npb{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:6px}#adm .npb .l{width:74px;color:var(--n70)}#adm .npb .t{flex:1;height:7px;border-radius:4px;background:var(--n08);overflow:hidden}#adm .npb .t i{display:block;height:100%;border-radius:4px}#adm .npb .v{width:32px;text-align:right;color:var(--n70)}
#adm .note{background:var(--n08);border-radius:10px;padding:10px 12px;font-size:11.5px;color:var(--n70);line-height:1.5}#adm .note b{color:var(--i);display:block;margin-bottom:2px}
#adm .tl{margin:0;padding:0;list-style:none}#adm .tl li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--n08b)}#adm .tl li:last-child{border-bottom:0}#adm .tl .w{width:46px;flex:none;font-size:11px;color:var(--n50)}#adm .tl .x{font-size:12px}#adm .tl .x b{display:block;font-weight:600}#adm .tl .x span{color:var(--n70);font-size:11px}
#adm .modes{display:flex;gap:8px}#adm .mc{flex:1;border:1px solid var(--n15);border-radius:10px;padding:7px}#adm .mc.on{border-color:var(--acc2s);box-shadow:0 0 0 3px var(--wash)}#adm .mc .pv{height:34px;border-radius:6px;margin-bottom:6px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 7px;border:1px solid}#adm .mc .pv i{display:block;height:3px;border-radius:2px}#adm .mc .mn{font-size:11px;font-weight:600}
#adm .emp2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:36px 20px;border:1px dashed var(--n15);border-radius:12px;color:var(--n70);font-size:12px}
#adm .h1{font-family:var(--dis);font-variation-settings:'opsz' 72;font-weight:600;font-size:22px;letter-spacing:-.03em}
#adm .ph{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
#adm .ph .h1{flex:1;min-width:160px}
#adm .btnp{font:inherit;font-size:12px;font-weight:600;padding:8px 15px;border-radius:999px;border:0;background:var(--acc2s);color:var(--on)}
#adm .btng{font:inherit;font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--n30);background:transparent;color:var(--at)}
#adm .chip{font-size:11.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--n15);background:var(--c);color:var(--n70)}
#adm .chip.on{background:var(--wash);border-color:transparent;color:var(--at);font-weight:600}
#adm .hero{border-radius:16px;padding:16px 18px;background:var(--b-hero-grad, var(--acc2));color:var(--on);position:relative;overflow:hidden}
#adm .hero::after{content:'';position:absolute;right:-60px;top:-70px;width:180px;height:180px;border-radius:50%;border:1px solid currentColor;opacity:.16}
#adm .hero .e{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;font-weight:600}
#adm .hero .t{font-family:var(--dis);font-weight:600;font-size:21px;letter-spacing:-.03em;margin-top:4px}
#adm .stats{display:flex;gap:14px;margin-top:14px;border-top:1px solid color-mix(in srgb,currentColor 26%,transparent);padding-top:11px}
#adm .stats div{flex:1}
#adm .stats b{display:block;font-family:var(--dis);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#adm .stats span{font-size:9.5px;opacity:.72}
#adm .al{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;background:var(--warnbg);border:1px solid var(--warnl)}
#adm .al i{width:26px;height:26px;border-radius:50%;background:var(--warn);display:grid;place-items:center;flex:none}
#adm .al i svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
#adm .al p{flex:1;font-size:12.5px}
#adm .al p b{font-weight:600}
#adm .al button{font:inherit;font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:999px;border:0;background:var(--warn);color:#fff}
#adm .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
#adm .cd{background:var(--c);border:1px solid var(--n15);border-radius:14px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
#adm .cd h4{margin:0 0 10px;font-family:var(--dis);font-weight:600;font-size:14.5px;letter-spacing:-.02em;display:flex;align-items:baseline}
#adm .cd h4 a{margin-left:auto;font-family:var(--ui);font-weight:500;font-size:11px;color:var(--at);text-decoration:none}
#adm .dm{font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--n50);margin-bottom:9px}
#adm .rail{display:flex;flex-direction:column;gap:7px}
#adm .slot{display:flex;align-items:stretch;gap:9px}
#adm .slot .hr{width:40px;flex:none;text-align:right;padding-top:11px;font-family:var(--dis);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
#adm .slot .tk{position:relative;width:8px;flex:none}
#adm .slot .tk::before{content:'';position:absolute;left:3.5px;top:0;bottom:0;width:1px;background:var(--n15)}
#adm .slot:first-child .tk::before{top:16px}#adm .slot:last-child .tk::before{bottom:calc(100% - 16px)}
#adm .slot .tk::after{content:'';position:absolute;left:1px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--c);border:1.5px solid var(--n30)}
#adm .slot[data-s="pocos"] .tk::after{background:var(--few);border-color:var(--few)}
#adm .slot[data-s="lleno"] .tk::after{background:var(--full);border-color:var(--full)}
#adm .slot .cr{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--n08);cursor:pointer}
#adm .slot .cr b{display:block;font-size:12.5px;font-weight:600}
#adm .slot .cr span{display:block;font-size:11px;color:var(--n70)}
#adm .slot .cr .tx{flex:1;min-width:0}
#adm .mt{width:52px;flex:none}
#adm .mt .nm{font-size:11px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--n70)}
#adm .mt .tr{height:3px;border-radius:2px;background:var(--n15);margin-top:4px;overflow:hidden}
#adm .mt .tr i{display:block;height:100%;background:var(--ok)}
#adm .slot[data-s="pocos"] .mt .tr i{background:var(--few)}
#adm .slot[data-s="lleno"] .mt .tr i{background:var(--full)}
#adm .slot[data-s="lleno"] .mt .nm{color:var(--full)}
#adm .acts{display:flex;flex-direction:column;gap:6px}
#adm .act{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;border:1px solid var(--n15);font-size:12.5px;color:var(--i)}
#adm .act i{width:26px;height:26px;border-radius:7px;background:var(--wash);display:grid;place-items:center;flex:none}
#adm .act svg{width:13px;height:13px;stroke:var(--at);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#adm .tw{background:var(--c);border:1px solid var(--n15);border-radius:14px;overflow:auto}
#adm table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:560px}
#adm th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--n50);padding:11px 13px;border-bottom:1px solid var(--n15);white-space:nowrap}
#adm td{padding:11px 13px;border-bottom:1px solid var(--n08b);white-space:nowrap}
#adm tr:last-child td{border-bottom:0}
#adm td.nm{font-weight:500}#adm td.dm2{color:var(--n70)}#adm td.nu{text-align:right;font-variant-numeric:tabular-nums;color:var(--n70)}
#adm .pl{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px}
#adm .pl.ok{background:var(--okbg);color:var(--ok)}#adm .pl.few{background:var(--fewbg);color:var(--few)}#adm .pl.full{background:var(--fullbg);color:var(--full)}#adm .pl.ne{background:var(--n08);color:var(--n70)}
#adm .tb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#adm .srch{flex:1;min-width:150px;max-width:260px;padding:7px 12px;border-radius:999px;background:var(--c);border:1px solid var(--n15);font-size:12px;color:var(--n50)}
#adm .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#adm .tile{background:var(--c);border:1px solid var(--n15);border-radius:12px;padding:12px 14px}
#adm .tile .k{font-size:11px;color:var(--n70)}
#adm .tile .v{font-family:var(--dis);font-weight:600;font-size:20px;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
#adm .tile .d{font-size:10.5px;font-weight:600;margin-top:3px;color:var(--ok)}
#adm .tile .d.dn{color:var(--full)}#adm .tile .d.fl{color:var(--n50)}
#adm .cal7{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));font-size:10.5px;background:var(--c);border:1px solid var(--n15);border-radius:14px;overflow:hidden}
#adm .cal7 .ch{padding:9px 4px;text-align:center;border-bottom:1px solid var(--n15);border-left:1px solid var(--n08b)}
#adm .cal7 .ch .dn{font-size:8.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--n50)}
#adm .cal7 .ch .dd{font-family:var(--dis);font-weight:600;font-size:14px;letter-spacing:-.02em}
#adm .cal7 .ch.tod .dn,#adm .cal7 .ch.tod .dd{color:var(--at)}
#adm .cal7 .hh{padding:4px 6px 0 0;text-align:right;font-size:9px;color:var(--n50);border-top:1px solid var(--n08b);font-variant-numeric:tabular-nums}
#adm .cal7 .cc{border-top:1px solid var(--n08b);border-left:1px solid var(--n08b);min-height:46px;padding:2px;display:flex;flex-direction:column;gap:2px}
#adm .cal7 .ev{flex:1;min-height:42px;border-radius:6px;background:var(--n08);padding:4px 6px;overflow:hidden;border:1px solid transparent}
#adm .cal7 .ev b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;font-weight:600;line-height:1.2}
#adm .cal7 .ev span{display:block;font-size:9px;color:var(--n70)}
#adm .cal7 .ev em{display:block;font-style:normal;font-size:9px;font-weight:600;color:var(--n50)}
#adm .cal7 .ev em i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ok);margin-right:3px;vertical-align:1px}
#adm .cal7 .ev[data-s="pocos"] em i{background:var(--few)}
#adm .cal7 .ev[data-s="lleno"]{background:var(--fullbg);border-color:color-mix(in srgb,var(--full) 26%,transparent)}
#adm .cal7 .ev[data-s="lleno"] em{color:var(--full)}#adm .cal7 .ev[data-s="lleno"] em i{background:var(--full)}
#adm .cal7 .sk{min-height:0;padding:2px 6px 2px 0;color:var(--n30);letter-spacing:.2em}
#adm .cal7 .sk2{min-height:0;background:var(--n08b);border-left:1px solid var(--n08b)}
#adm .lgd{display:flex;gap:14px;font-size:11px;color:var(--n70);align-items:center}
#adm .lgd i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
#adm .bars{display:flex;align-items:flex-end;gap:5px;height:150px;position:relative;padding:0 0 18px 28px}
#adm .bars .grid{position:absolute;left:28px;right:0;top:0;bottom:18px;pointer-events:none}
#adm .bars .gl{position:absolute;left:0;right:0;height:1px;background:var(--n08b)}
#adm .bars .gl em{position:absolute;left:-28px;top:-7px;width:24px;text-align:right;font-style:normal;font-size:8.5px;color:var(--n50)}
#adm .bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;padding-bottom:18px;z-index:1}
#adm .bars .b i{display:block;background:var(--acc2s);border-radius:3px 3px 0 0}
#adm .bars .b em{position:absolute;bottom:0;left:0;right:0;text-align:center;font-style:normal;font-size:8.5px;color:var(--n50)}
#adm .bars .b strong{font-size:9px;font-weight:600;text-align:center;margin-bottom:3px;white-space:nowrap}
#adm .hb{display:flex;align-items:center;gap:9px;font-size:11px;margin-bottom:8px}
#adm .hb .l{width:40px;flex:none;color:var(--n70);font-variant-numeric:tabular-nums}
#adm .hb .t{flex:1;height:13px;border-radius:4px;background:var(--n08);overflow:hidden}
#adm .hb .t i{display:block;height:100%;border-radius:4px;background:var(--ok)}
#adm .hb[data-s="pocos"] .t i{background:var(--few)}#adm .hb[data-s="lleno"] .t i{background:var(--full)}
#adm .hb .v{width:80px;flex:none;text-align:right;color:var(--n70);font-variant-numeric:tabular-nums;white-space:nowrap}
#adm .swr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--n08b)}
#adm .swr:last-child{border-bottom:0}
#adm .swr .cw{width:30px;height:30px;border-radius:9px;border:1px solid var(--n15);flex:none}
#adm .swr .ct{flex:1}#adm .swr .ct b{display:block;font-size:12.5px;font-weight:600}#adm .swr .ct span{font-size:11px;color:var(--n50)}
#adm .swr .sw{width:20px;height:20px}
#adm .field{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
#adm .field label{font-size:11px;font-weight:600;color:var(--n70)}
#adm .field .inp{background:var(--n08);border:1px solid var(--n15);border-radius:9px;padding:8px 11px;font-size:12.5px}
#adm .split{display:flex;gap:16px;align-items:flex-start}
#adm .split .grow{flex:1;min-width:0}
#adm .mini-phone{width:176px;flex:none;border-radius:24px;padding:6px;background:var(--bezel);box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
#adm .mini-phone .scr{border-radius:19px;overflow:hidden;background:var(--b-field);min-height:300px;display:flex;flex-direction:column}
#adm .mini-phone .ph-hero{margin:10px 9px 9px;padding:11px 12px;border-radius:13px}
#adm .mini-phone .ph-hero .n{font-size:14px}#adm .mini-phone .ph-hero .t{font-size:18px;margin-top:7px}#adm .mini-phone .ph-hero .e{font-size:6.5px}#adm .mini-phone .ph-hero .m{font-size:8.5px}
#adm .mini-phone .ph-sec{font-size:7px;padding:0 11px 5px}
#adm .mini-phone .ph-row{margin:0 9px 5px;padding:7px 8px;border-radius:10px;gap:6px}
#adm .mini-phone .ph-row .h{font-size:9.5px;width:26px}#adm .mini-phone .ph-row .b b{font-size:9px}#adm .mini-phone .ph-row .b span{font-size:7.5px}#adm .mini-phone .ph-row .p{font-size:7px;padding:2px 6px}
#adm .mini-phone .ph-nav{padding:8px 12px 10px}#adm .mini-phone .ph-nav a{font-size:0;gap:0}#adm .mini-phone .ph-nav a svg{width:14px;height:14px}
#adm .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:50px 20px;border:1px dashed var(--n15);border-radius:14px;color:var(--n70);font-size:13px}
#adm .empty b{font-family:var(--dis);font-weight:600;font-size:16px;color:var(--i)}
/* La cabecera, la barra de estado, la isla y la barrita de abajo del panel
   existen sólo en el celular. */
.admtop,.admstat,.admhome,#adm .island{display:none}

/* ── el panel adentro de un teléfono (sólo celular) ──
   En la web se muestra una ventana de navegador porque es donde se usa. En un
   celular esa ventana es una mentira: nadie abre el panel en 375px con barra
   de direcciones, y encima obligaba a leer una grilla de escritorio achicada.
   Acá es el panel como se ve en un celular, metido en un teléfono.

   El scroll queda adentro del marco y cuando se termina sigue el de la
   página. Eso lo hace el navegador solo: el encadenado es el comportamiento
   de fábrica mientras nadie ponga `overscroll-behavior: contain`. */
@media (max-width:820px){
  /* Los mismos números que `.device`: 10px de bisel, 48 y 38 de radio, la
     misma sombra y los mismos brillos internos. Con valores propios el
     teléfono del panel se veía de otra familia que los otros dos. */
  #adm{
    /* Los mismos números que `.mdevice`, el teléfono de la app: 300 de ancho,
       10 de bisel, 48 y 38 de radio y 626 de pantalla. Con valores propios
       este quedaba 20px más ancho y 46px más bajo que el de arriba, y dos
       teléfonos de distinto tamaño en la misma página se leen como un error. */
    width:min(300px,86vw);max-width:100%;margin-left:auto;margin-right:auto;
    border:0;padding:10px;border-radius:48px;
    background:var(--bezel);
    box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.08) inset;
  }
  /* En oscuro los brillos del bisel suben, igual que en los otros dos. */
  [data-mode="dark"] #adm{
    box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.11) inset,0 1px 0 rgba(255,255,255,.14) inset;
  }
  /* La barra del navegador se va: un teléfono no la tiene. */
  #adm .bar{display:none}
  #adm .body{
    display:flex;flex-direction:column;position:relative;
    border-radius:38px;overflow:hidden;background:var(--f);
    /* El mismo alto de pantalla que `.mdevice`, y fijo. `medirAdm()` lo pisa
       con el alto de la pantalla más alta para que nada scrollee, que es
       justo lo contrario de lo que queremos acá; por eso en el celular no
       corre. */
    height:626px!important;
  }
  #adm .island{
    display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:84px;height:23px;border-radius:999px;background:var(--bezel);z-index:14;
  }
  /* La hora y la señal, como en los otros teléfonos. */
  .admstat{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 22px 2px;font-size:11px;font-weight:600;color:var(--n70);
    flex:none;position:relative;z-index:13;
  }
  .admstat .sig{display:flex;gap:3px;align-items:center}
  .admstat .sig i{width:4px;height:4px;border-radius:50%;background:var(--n70);display:block}
  /* La barrita del gesto, abajo de todo. */
  .admhome{
    display:block;flex:none;height:16px;position:relative;background:var(--f);
  }
  .admhome::after{
    content:'';position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
    width:104px;height:4px;border-radius:999px;background:var(--n30);
  }

  .admtop{
    display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;
    border-bottom:1px solid var(--n15);background:var(--f);
    font-family:var(--dis);font-weight:600;font-size:14px;color:var(--i);
    position:relative;z-index:12;flex:none;
  }
  .admburg{display:grid;gap:3.5px;width:30px;height:30px;place-content:center;
    border:1px solid var(--n15);border-radius:9px;background:transparent;cursor:pointer}
  .admburg i{width:13px;height:1.6px;border-radius:2px;background:var(--n70);display:block;transition:transform .2s,opacity .2s}
  .admburg[aria-expanded="true"] i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
  .admburg[aria-expanded="true"] i:nth-child(2){opacity:0}
  .admburg[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

  /* El menú, como cajón. Sale de adentro del marco y no de la ventana: el
     teléfono de la página no puede tapar la página. */
  /* El cajón arranca debajo de la barra de estado y la cabecera. Como el
     marco es flex, ese alto es variable: sale de la suma de las dos. */
  #adm .side{
    display:flex;position:absolute;left:0;top:75px;bottom:0;width:78%;
    z-index:11;border-right:1px solid var(--n15);
    transform:translateX(-101%);transition:transform .26s cubic-bezier(.2,.8,.3,1);
    overflow-y:auto;
  }
  #adm[data-nav="1"] .side{transform:none}
  #adm[data-nav="1"] #adm-scrim{opacity:1;pointer-events:auto}
  #adm-scrim{top:75px;z-index:10}

  #adm .main{flex:1;min-height:0;padding:14px;gap:13px}
  #adm .cols{grid-template-columns:1fr}
  #adm .tiles{grid-template-columns:1fr 1fr}
  #adm .split{flex-direction:column}
  #adm .mini-phone{margin:0 auto}
  /* La ficha lateral, a lo ancho: 440px adentro de un marco de 312 no entra. */
  #adm-panel{width:100%!important}

  /* Las cuatro cifras en dos filas de dos. En una sola fila, "Reservas de la
     semana" se partía en tres renglones y la cabecera medía el doble. */
  #adm .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  #adm .hero{padding:14px}
  #adm .hero .t{font-size:19px}

  /* El renglón de una clase, apilado: el nombre y la profesora arriba, el
     cupo abajo. De costado, "Vera · Sede Centro" se partía en dos y la barra
     de ocupación quedaba de 30px. */
  #adm .slot .cr{flex-wrap:wrap;gap:4px 10px;padding:9px 11px}
  #adm .slot .cr .tx{flex:1 0 100%}
  #adm .mt{width:100%;display:flex;align-items:center;gap:8px}
  #adm .mt .nm{order:2;text-align:left}
  #adm .mt .tr{order:1;flex:1;margin-top:0}
}

/* ═══ el cursor como una mano cerca de papeles ═══
   Flotar, entrada y respuesta al mouse comparten transform, así que
   una vez pasada la entrada los maneja un solo bucle en JS. */
.stage.live .fc,.stage.live .device{animation:none!important;opacity:1}
.stage.live .fc,.stage.live .device,.stage.live .glow,.stage.live .glow2{will-change:transform}
.cat .fkey{display:inline-block;white-space:nowrap;font-weight:600;color:var(--acc-text,var(--acc));transition:opacity .42s ease,width .55s cubic-bezier(.2,.7,.25,1)}
.cat .fkey.out{opacity:0}
/* Dentro del h1 hereda peso y tamaño del titular; sólo cambia el color.
   Ancho animado, igual que el del eyebrow. */
.hero h1 .disc{display:inline-block;white-space:nowrap;color:var(--acc-text,var(--acc));transition:opacity .4s ease}
.hero h1 .disc.out{opacity:0}
.fc{transition:background-color .5s ease,border-color .5s ease,color .5s ease,filter .4s ease}
.fc.near{filter:drop-shadow(0 14px 20px rgba(42,37,31,.14))}
[data-mode="dark"] .fc.near{filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
/* ═══ la app de la clienta, navegable ═══
   No es una interpretación de la app: las medidas salen de design_tokens.dart
   (Sp, Rad, Type) y de los widgets de lib/features/member. Se dibuja a 390px
   lógicos —el ancho de un teléfono— y se escala hasta los 280 que mide la
   pantalla de la maqueta, así ninguna proporción se inventa por el camino. */
.appdemo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:38px}
@media (max-width:860px){.appdemo{grid-template-columns:1fr;justify-items:center;gap:32px}}
.mdevice{width:300px;max-width:100%;border-radius:48px;padding:10px;background:var(--bezel);flex:none;
  box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.08) inset}
[data-mode="dark"] .mdevice{box-shadow:var(--sh-dev),0 0 0 1px rgba(255,255,255,.11) inset,0 1px 0 rgba(255,255,255,.14) inset}
.mdevice .screen{position:relative;border-radius:38px;overflow:hidden;background:var(--b-field);height:626px}
.mdevice .island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:23px;border-radius:999px;background:var(--bezel);z-index:8}
.appnotes{display:flex;flex-direction:column;gap:2px}
.appnote{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--hair)}
.appnote:last-child{border-bottom:1px solid var(--hair)}
.appnote .n{font-family:var(--dis);font-variation-settings:'opsz' 30;font-weight:600;font-size:13px;color:var(--ink3);width:20px;flex:none;padding-top:2px}
.appnote b{display:block;font-family:var(--dis);font-variation-settings:'opsz' 30;font-weight:600;font-size:16.5px;letter-spacing:-.02em}
.appnote p{font-size:14.5px;color:var(--ink2);margin-top:4px;max-width:44ch}
.applead{font-size:13px;color:var(--ink3);margin-top:14px}

/* ── el teléfono lógico ─────────────────────────────────────────
   390 × 872 escalados a 280 × 626. Fuentes fijas: la app usa Fraunces e
   Inter siempre, no las variantes que prueba la landing. */
.mvp{position:absolute;top:0;left:0;width:390px;height:872px;transform:scale(.717949);transform-origin:top left;
  background:var(--b-field);color:var(--b-ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mvp *{box-sizing:border-box}
.mstatus{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 30px 0 34px;z-index:6;font-size:14px;font-weight:600;letter-spacing:-.01em;pointer-events:none}
.mstatus .rt{display:flex;align-items:center;gap:5px}
.mstatus .sig{display:flex;align-items:flex-end;gap:2px}
.mstatus .sig i{width:3px;background:currentColor;border-radius:1px}
.mstatus .sig i:nth-child(1){height:4px}.mstatus .sig i:nth-child(2){height:6px}
.mstatus .sig i:nth-child(3){height:8px}.mstatus .sig i:nth-child(4){height:10px}
.mstatus .bat{position:relative;width:22px;height:11px;border:1.2px solid currentColor;border-radius:3.5px;opacity:.85}
.mstatus .bat::after{content:'';position:absolute;top:1.5px;bottom:1.5px;left:1.5px;right:6px;background:currentColor;border-radius:1.5px}
/* FloatingChrome: pastilla sólida, no esmerilada. Toma el color de la página
   hasta que algo pasa por debajo; recién ahí se vuelve blanca y proyecta. */
.mchrome{position:absolute;top:44px;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none}
.mchrome b{pointer-events:auto;max-width:74%;padding:7px 16px;border-radius:999px;background:var(--b-field);
  font-weight:700;font-size:12px;letter-spacing:2.4px;color:var(--b-accentText);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,box-shadow .2s ease}
.mvp.up .mchrome b{background:#fff;box-shadow:0 4px 14px rgba(var(--b-inkrgb),.07),0 1px 2px rgba(var(--b-inkrgb),.04)}
/* MemberNav floating: barra esmerilada con la pestaña activa en su propia
   pastilla. Inicio va al medio, que es donde está en la app. */
.mnav{position:absolute;left:16px;right:16px;bottom:30px;z-index:6;display:flex;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--b-n08);
  box-shadow:0 7px 20px rgba(var(--b-inkrgb),.06),0 1px 2px rgba(var(--b-inkrgb),.05)}
.mnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border:0;background:transparent;
  cursor:pointer;font-family:inherit;font-size:9px;font-weight:500;letter-spacing:0;color:var(--b-n50);border-radius:12px;
  transition:background-color .18s ease,color .18s ease,font-size .18s ease}
.mnav button:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px}
.mnav button:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px}
.mnav button[aria-current="page"]{background:var(--b-wash);color:var(--b-accentText);font-size:10px;font-weight:700;letter-spacing:.2px}
.mnav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.mnav button[aria-current="page"] svg{transform:scale(1.12);fill:currentColor;stroke-width:1.1}
.mhome{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:var(--b-ink);opacity:.22;z-index:7}
/* El cuerpo corre por debajo de las dos piezas de chrome, como en la app
   (extendBody / extendBodyBehindAppBar). */
.m-scroll{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:96px 20px 100px}
.m-scroll::-webkit-scrollbar{display:none}
.m-scroll.flush{padding-left:0;padding-right:0}
.m-scroll .gut{padding:0 20px}

/* ── tipos y piezas compartidas ── */
.m-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px;line-height:1.12;letter-spacing:-.33px;color:var(--b-ink)}
.m-band{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--b-n50)}
.m-meta{font-size:11.5px;line-height:1.3;color:var(--b-n70)}
/* RailBand: en acento, con la línea al costado. */
.m-rb{display:flex;align-items:center;gap:8px;padding-bottom:12px}
.m-rb b{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--b-accentText)}
.m-rb i{flex:1;height:1px;background:var(--b-n15)}
/* TimeRail: la hora en serif colgando de una línea de pelo. */
.m-rail{position:relative}
.m-rail::before{content:'';position:absolute;left:47.5px;top:0;bottom:12px;width:1px;background:var(--b-n15)}
.m-slot{display:flex;align-items:center;margin-bottom:12px}
.m-slot:last-child{margin-bottom:0}
.m-slot .hr{width:38px;flex:none;text-align:right;font-family:'Fraunces',Georgia,serif;font-weight:600}
.m-slot .hr b{display:block;font-size:15px;line-height:1.1;letter-spacing:-.34px;color:var(--b-ink)}
.m-slot .hr span{display:block;font-size:13px;line-height:1.1;letter-spacing:-.34px;color:var(--b-n70)}
.m-slot .dt{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;margin:0 6px;flex:none;background:#fff;border:1.5px solid var(--b-n30)}
.m-slot .dt.mine{background:var(--b-accent);border-color:var(--b-accent)}
.m-slot .cd{flex:1;min-width:0}
/* ClassCard: sin barrita de color al costado; el punto del rail ya dice de quién es. */
.m-cc{background:#fff;border-radius:16px;padding:13px 14px;box-shadow:var(--b-elev)}
.m-cc>b{display:block;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cc>span{display:block;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--b-n70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-cc .ft{display:flex;align-items:center;gap:8px;margin-top:11px}
.m-cc .ft .l{flex:3;min-width:0;display:flex}
.m-cc .ft .r{flex:2;min-width:0;text-align:right}
.m-cc .ft .r em{font-style:normal;font-size:11.5px;color:var(--b-n70)}
/* StatusPill: los colores de disponibilidad no dependen de la marca. */
.m-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap}
.m-pill svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-pill.exp{display:flex;width:100%;justify-content:center;padding:8px}
.m-pill.free{background:#EBF1EC;color:#5C7565}
.m-pill.few{background:var(--b-warmWash);color:var(--b-warmText)}
.m-pill.full{background:#F5EBEA;color:#A9564C}
.m-pill.mine{background:var(--b-accent);color:var(--b-on)}
.m-pill.day{background:var(--b-wash);color:var(--b-accentText)}
.m-rbtn{width:100%;font-family:inherit;font-size:11px;font-weight:600;padding:8px 10px;border-radius:999px;cursor:pointer;
  background:var(--b-accent);color:var(--b-on);border:1.4px solid transparent}
.m-rbtn.out{background:transparent;color:var(--b-accentText);border-color:var(--b-accentText)}
.m-rbtn.grey{background:transparent;color:var(--b-n70);border-color:var(--b-n15)}
/* NextClassHero: la única pieza fuerte de Inicio. */
.m-hero{position:relative;overflow:hidden;border-radius:24px;background:var(--b-grad);padding:16px 16px 16px 20px;color:var(--b-on)}
.m-hero .rings{position:absolute;right:-64px;top:-58px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(var(--b-onrgb),.16)}
.m-hero .rings::after{content:'';position:absolute;top:24px;left:24px;right:24px;bottom:24px;border-radius:50%;border:1px solid rgba(var(--b-onrgb),.12)}
.m-hero .in{position:relative}
.m-hero .e{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;opacity:.66}
.m-hero .n{margin-top:8px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px;line-height:1.12;letter-spacing:-.33px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-hero .mm{margin-top:4px;font-size:11.5px;opacity:.76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-hero .btm{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.m-hero .tt{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:34px;line-height:.95;letter-spacing:-.51px}
.m-hero .wn{margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;opacity:.64}
.m-hero .go{margin-left:auto;flex:none;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;background:var(--b-on);color:var(--b-on2)}
/* PlanRing: las clases que quedan, como anillo. */
.m-plan{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:16px;box-shadow:var(--b-elev)}
.m-plan .rg{position:relative;width:54px;height:54px;flex:none;border-radius:50%;
  background:conic-gradient(var(--b-accent) calc(var(--p) * 1turn),var(--b-n15) 0)}
.m-plan .rg::before{content:'';position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;background:#fff}
.m-plan .rg b{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17.2px;color:var(--b-ink)}
.m-plan .nm{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17.2px;line-height:1.12;letter-spacing:-.26px;color:var(--b-ink)}
.m-plan .sub{margin-top:2px;font-size:11.5px;color:var(--b-n70)}
/* ScheduleHeader + DayStrip */
.m-sh{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}
.m-sh .loc{display:inline-flex;align-items:center;gap:5px;margin-top:2px;padding:2px 0;font-size:11.5px;color:var(--b-n70);cursor:pointer}
.m-sh .loc svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--b-n50);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-sh .loc svg.cv{width:14px;height:14px}
.m-tog{margin-left:auto;flex:none;display:flex;padding:2.5px;border-radius:999px;background:var(--b-n08)}
.m-tog button{padding:5px 9px;border:0;background:transparent;border-radius:999px;cursor:pointer;line-height:0}
.m-tog svg{width:15px;height:15px;fill:none;stroke:var(--b-n50);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-tog button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(var(--b-inkrgb),.12)}
.m-tog button[aria-pressed="true"] svg{stroke:var(--b-accent)}
.m-mb{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.m-mb b{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--b-accentText)}
.m-mb i{flex:1;height:1px;background:var(--b-n15)}
.m-mb .hoy{padding:3px 10px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:1.6px;
  background:var(--b-wash);color:var(--b-accentText)}
.m-mb .hoy.now{background:var(--b-n08);color:var(--b-n50)}
.m-strip{display:flex;height:54px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
.m-strip::-webkit-scrollbar{display:none}
.m-strip button{flex:none;width:47.85px;margin:0 3px;border-radius:13px;border:0;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.m-strip .dn{font-size:9px;font-weight:600;letter-spacing:.54px;text-transform:uppercase;color:var(--b-n50)}
.m-strip .dd{margin-top:1px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;line-height:1.1;color:var(--b-ink);font-variant-numeric:tabular-nums}
.m-strip .dot{height:7px;padding-top:3px}
.m-strip .dot i{display:block;width:4px;height:4px;border-radius:50%;background:var(--b-warm)}
.m-strip button.today{box-shadow:inset 0 0 0 1.4px var(--b-line)}
.m-strip button.on{background:var(--b-accent)}
.m-strip button.on .dn{color:rgba(var(--b-onrgb),.7)}
.m-strip button.on .dd{color:var(--b-on)}
.m-strip button.on .dot i{background:rgba(var(--b-onrgb),.82)}
/* Mis reservas */
.m-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
.m-chips::-webkit-scrollbar{display:none}
.m-chips button{flex:none;padding:7px 14px;border-radius:999px;border:0;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:500;
  background:var(--b-n08);color:var(--b-n70)}
.m-chips button[aria-pressed="true"]{background:var(--b-accent);color:var(--b-on);font-weight:600}
.m-fija{position:relative;overflow:hidden;border-radius:24px;background:var(--b-grad);padding:16px;color:var(--b-on)}
.m-fija .hd{display:flex;align-items:center;gap:8px}
.m-fija .hd svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.m-fija .hd b{font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;opacity:.7}
.m-fija .hd span{margin-left:auto;font-size:11.5px;opacity:.66}
.m-fija .n{margin-top:8px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19.4px;line-height:1.12;letter-spacing:-.29px}
.m-fija .s{margin-top:2px;font-size:11.5px;opacity:.76}
.m-fija .dts{display:flex;align-items:center;gap:6px;margin-top:12px}
.m-fija .dts span{padding:5px 10px;border-radius:8px;background:rgba(var(--b-onrgb),.16);font-size:10px;font-weight:600;line-height:1.2}
.m-fija .dts em{font-style:normal;font-size:10px;font-weight:600;opacity:.58}
.m-bk{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--b-elev)}
.m-bk .tp{display:flex;align-items:baseline;gap:12px}
.m-bk .tp b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-bk .tp b,.m-bk .tp span{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17.6px;line-height:1.12;letter-spacing:-.26px;color:var(--b-ink)}
.m-bk .mm{margin-top:2px;font-size:11.5px;color:var(--b-n70)}
.m-bk .ft{display:flex;align-items:center;gap:8px;margin-top:12px}
.m-bk .ft .l{flex:3;min-width:0}
.m-bk .ft .r{flex:2;min-width:0}
/* Perfil */
.m-who{display:flex;align-items:center;gap:14px}
.m-who .av{width:56px;height:56px;flex:none;border-radius:50%;background:var(--b-wash);color:var(--b-accentText);
  display:grid;place-items:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px}
.m-who .id{min-width:0}
.m-who b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:18.5px;line-height:1.12;letter-spacing:-.28px;color:var(--b-ink)}
.m-who span{display:block;font-size:11.5px;color:var(--b-n70)}
.m-set{background:#fff;border-radius:18px;box-shadow:var(--b-elev);overflow:hidden}
.m-set .row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--b-n08);cursor:pointer}
.m-set .row:last-child{border-bottom:0}
.m-set .row>svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--b-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-set .row b{flex:1;min-width:0;font-size:14.2px;font-weight:500;color:var(--b-ink)}
.m-set .row .cv{width:18px;height:18px;flex:none;fill:none;stroke:var(--b-n30);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-set .row.danger>svg{stroke:#A9564C}
.m-set .row.danger b{color:#A9564C}

/* ═══ acordeón de funcionalidades ═══ */
/* Tres funciones se muestran y el resto se lista, y el corte entre las dos
   cosas tiene que verse: sin esta línea el acordeón parecía el cuarto
   bloque al que se le olvidó la captura. */
.accsep{display:flex;align-items:baseline;gap:14px;margin-top:clamp(52px,7vw,84px)}
.accsep i{flex:1;height:1px;background:var(--hair);transform:translateY(-4px)}
.acc{margin-top:20px;border-top:1px solid var(--hair)}
.accsep + .acc{margin-top:14px;border-top:0}
.acc details{border-bottom:1px solid var(--hair)}
.acc summary{display:flex;align-items:center;gap:14px;padding:17px 2px;cursor:pointer;list-style:none;font-family:var(--dis);font-variation-settings:'opsz' 36;font-weight:600;font-size:17.5px;letter-spacing:-.02em}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--acc-text,var(--acc))}
.acc summary .cnt{margin-left:auto;font-family:var(--ui);font-size:12px;font-weight:400;color:var(--ink3);letter-spacing:0}
.acc summary .chev{width:15px;height:15px;flex:none;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.2,.7,.25,1)}
.acc details[open] summary .chev{transform:rotate(180deg)}
.acc .body{padding:0 2px 20px;display:grid;grid-template-columns:1fr 1fr;gap:9px 28px}
@media (max-width:700px){.acc .body{grid-template-columns:1fr}}
.acc .body div{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.acc .body svg{width:14px;height:14px;flex:none;margin-top:4px;stroke:var(--acc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.acc .soon summary .cnt{color:var(--clay)}
.acc .soon .body svg{stroke:var(--clay);stroke-width:2}
.acc .soon .body div{color:var(--ink2)}
@media (prefers-reduced-motion:no-preference){
  .acc details[open] .body{animation:accIn .3s cubic-bezier(.2,.7,.25,1)}
  @keyframes accIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
}

/* ═══ menú de mano ═══
   Abajo de 820px los enlaces de la píldora se esconden. Esta hoja cae
   debajo del nav con el mismo vidrio, para no inventar una superficie
   nueva sólo para el celular. */
.burg{display:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--rule);background:none;cursor:pointer;color:var(--ink2);flex:none;padding:0;place-content:center;justify-items:center}
.burg:hover{color:var(--ink);border-color:var(--ink3)}
.burg i{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .18s}
.burg i+i{margin-top:4px}
.burg[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burg[aria-expanded="true"] i:nth-child(2){opacity:0}
.burg[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
#mnav,#mscrim{display:none}
@media (max-width:820px){
  .burg{display:grid}
  .pill{gap:10px;padding-left:20px}
  /* Fuera del flujo. Con `visibility:hidden` el menú seguía ocupando su
     lugar adentro de la barra, así que en el celular la barra medía 352px de
     alto —el pill más el menú invisible— y empujaba el título del hero media
     pantalla para abajo. Absoluto también es lo que corresponde para un
     desplegable: abierto tiene que taparle la página, no correrla. */
  #topnav .page{position:relative}
  #mnav{pointer-events:auto;display:grid;gap:2px;position:absolute;left:clamp(20px,5vw,44px);right:clamp(20px,5vw,44px);top:100%;max-width:920px;margin:8px auto 0;padding:10px;border-radius:22px;
    background:color-mix(in srgb,var(--lift) 94%,transparent);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
    border:1px solid color-mix(in srgb,var(--bd) 70%,transparent);box-shadow:var(--sh-lift);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .26s,transform .26s cubic-bezier(.2,.8,.3,1),visibility .26s}
  #mnav[data-open="1"]{opacity:1;visibility:visible;transform:none}
  #mnav a{padding:12px 14px;border-radius:14px;font-size:15.5px;color:var(--ink);text-decoration:none}
  #mnav a:active{background:var(--tint)}
  #mnav .btn{margin-top:6px;justify-content:center}
  #mscrim{display:block;position:fixed;inset:0;z-index:39;border:0;padding:0;cursor:default;
    background:color-mix(in srgb,var(--ink) 26%,transparent);
    opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s}
  #mscrim[data-open="1"]{opacity:1;visibility:visible}
}
@media (max-width:560px){#topnav .pill > .btn.sm{display:none}}

/* Bricolage tiene mucha personalidad para un párrafo largo: la cita del
   testimonio vuelve a la tipografía de interfaz. */
.tc blockquote{font-family:var(--ui);font-size:15.5px}