/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ceb9c187-ec4b-466b-b4a9-d0e638864854.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/89236271-3c3c-4d01-834c-9b95fae2059a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b9524a43-7503-4298-942b-396098b67885.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ceb9c187-ec4b-466b-b4a9-d0e638864854.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/89236271-3c3c-4d01-834c-9b95fae2059a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b9524a43-7503-4298-942b-396098b67885.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ceb9c187-ec4b-466b-b4a9-d0e638864854.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/89236271-3c3c-4d01-834c-9b95fae2059a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b9524a43-7503-4298-942b-396098b67885.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ceb9c187-ec4b-466b-b4a9-d0e638864854.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/89236271-3c3c-4d01-834c-9b95fae2059a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/b9524a43-7503-4298-942b-396098b67885.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/159500e3-04bf-4e96-aabc-b58f198af850.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/ee6310fd-0c79-48e8-99dc-f33b451bbbc7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/159500e3-04bf-4e96-aabc-b58f198af850.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ee6310fd-0c79-48e8-99dc-f33b451bbbc7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/159500e3-04bf-4e96-aabc-b58f198af850.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ee6310fd-0c79-48e8-99dc-f33b451bbbc7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/159500e3-04bf-4e96-aabc-b58f198af850.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ee6310fd-0c79-48e8-99dc-f33b451bbbc7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/159500e3-04bf-4e96-aabc-b58f198af850.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ee6310fd-0c79-48e8-99dc-f33b451bbbc7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --bg:#0a0e1a; --card:#151a28; --card2:#1a2032; --line:rgba(147,178,255,.09);
  --txt:#f4f2f6; --mut:rgba(244,242,246,.62); --dim:rgba(244,242,246,.42);
  --acc:#c9184a; --acc2:#6ea8ff; --gold:#e3b34c;
  --flag-blue:#003686; --flag-blue2:#3f7fd6;
  --exc:#4ade80; --bue:#f472b6; --reg:#fb923c; --nor:#f87171;
  --r:18px; --hh:112px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 600px at 88% -12%,rgba(201,24,74,.1),transparent 60%),radial-gradient(1000px 540px at -10% -6%,rgba(63,127,214,.09),transparent 56%),radial-gradient(1100px 520px at 50% 112%,rgba(227,179,76,.045),transparent 62%),var(--bg);color:var(--txt);font-family:'Outfit',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc2);text-decoration:none}
a:hover{color:#8fbcff}
h1,h2,h3{font-family:'Bricolage Grotesque','Outfit',sans-serif;line-height:1.15;text-wrap:balance}
img{display:block;max-width:100%}
.wrap{max-width:920px;margin:0 auto;padding:0 14px}

/* ---------- Header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;background:linear-gradient(180deg,rgba(16,22,38,.9),rgba(10,14,26,.86));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(147,178,255,.13);box-shadow:0 14px 34px -20px rgba(0,0,0,.85)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;background:linear-gradient(90deg,rgba(201,24,74,.9),rgba(201,24,74,.45) 34%,rgba(63,127,214,.55) 62%,rgba(63,127,214,0) 94%)}
.head-in{max-width:920px;margin:0 auto;padding:10px 14px;display:grid;gap:8px}
.head-row{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.45)}
.brand b{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.02em}
.brand b span{color:var(--acc)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{color:var(--mut);font-size:13.5px;font-weight:500;padding:7px 9px;border-radius:8px;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a.cta{background:linear-gradient(180deg,#e02358,#b8153f);color:#fff;font-weight:600;padding:7px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -5px rgba(201,24,74,.65);transition:transform .16s,box-shadow .16s,filter .16s}
.nav a.cta:hover{background:linear-gradient(180deg,#ee2f63,#c91847);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 18px -6px rgba(201,24,74,.75)}
.nav a.cta:active{transform:translateY(0);filter:brightness(.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 8px -4px rgba(201,24,74,.6)}
.search{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(18,23,37,.92),rgba(15,20,33,.92));border:1px solid rgba(147,178,255,.12);border-radius:12px;padding:9px 13px;box-shadow:inset 0 1.5px 4px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.03);transition:border-color .18s,box-shadow .18s}
.search:focus-within{border-color:rgba(63,127,214,.55);box-shadow:inset 0 1.5px 4px rgba(0,0,0,.25),0 0 0 3px rgba(63,127,214,.16)}
.search svg{flex:none;opacity:.5}
.search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:15px;min-width:0}
.search input::placeholder{color:var(--dim)}
main.wrap{padding-top:calc(var(--hh) + 18px)}

/* ---------- Hero ---------- */
.hero{padding:14px 0 26px}
.hero h1{font-size:clamp(27px,7vw,52px);font-weight:800;letter-spacing:-.03em}
.hero h1::before{content:"";display:block;width:58px;height:5px;border-radius:99px;margin-bottom:14px;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%);box-shadow:0 0 16px rgba(63,127,214,.4)}
.hero h1 em{font-style:normal;color:var(--acc2);text-shadow:0 0 24px rgba(110,168,255,.3)}
.hero .vp{margin-top:12px;color:var(--mut);font-size:clamp(15px,4vw,17.5px);max-width:620px;font-weight:300}
.hero .vp b{color:var(--txt);font-weight:600}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.stat{display:flex;align-items:center;gap:7px;background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--mut);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 10px -6px rgba(0,0,0,.6)}
.stat b{color:var(--txt);font-weight:700}
.stat .dot{width:7px;height:7px;border-radius:50%;background:var(--exc);flex:none}

/* ---------- Secciones ---------- */
section{margin:0 0 34px}
.sec-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h2{font-size:clamp(20px,5.2vw,28px);font-weight:800;letter-spacing:-.02em}
.sec-head h2::after{content:"";display:block;height:4px;width:38px;margin-top:7px;border-radius:99px;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%);opacity:.85}
.chip-premium{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,rgba(227,179,76,.18),rgba(227,179,76,.1));color:var(--gold);border:1px solid rgba(227,179,76,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 10px -5px rgba(227,179,76,.35)}
.premium-note{font-size:12px;color:var(--dim);margin-top:12px;max-width:640px;line-height:1.5}

/* ---------- Grillas: SIEMPRE 2 columnas ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.grid2{gap:18px}}

/* ---------- Tarjeta ---------- */
.card{position:relative;border-radius:var(--r);background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 32px -20px rgba(0,0,0,.9)}
.card:hover{transform:translateY(-4px);border-color:rgba(147,178,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -18px rgba(0,0,0,.75),0 10px 26px -14px rgba(201,24,74,.28)}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.ph-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(165deg,#1c2237,#10141f)}
.ph-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ph-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 58%);transform:translateX(-130%);transition:transform .7s ease}
.card:hover .ph-wrap::after{transform:translateX(130%)}
@media(prefers-reduced-motion:reduce){.ph-wrap::after{display:none}}
.card:hover .ph-wrap img{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){.ph-wrap img{transition:none}.card:hover .ph-wrap img{transform:none}}
.card-body{padding:11px 12px 13px;display:grid;gap:7px}
.card-name{font-size:clamp(17px,4.5vw,22px);font-weight:700;letter-spacing:-.01em}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;line-height:1.25;padding:4px 9px;border-radius:999px;border:1px solid}
.pill.sm{font-size:10.5px;padding:3px 8px}
.pemoji{font-size:10px;line-height:1}
.p-exc{background:rgba(74,222,128,.1);color:var(--exc);border-color:rgba(74,222,128,.35)}
.p-bue{background:rgba(244,114,182,.1);color:var(--bue);border-color:rgba(244,114,182,.35)}
.p-reg{background:rgba(251,146,60,.1);color:var(--reg);border-color:rgba(251,146,60,.35)}
.p-nor{background:rgba(248,113,113,.1);color:var(--nor);border-color:rgba(248,113,113,.35)}
.reps{font-size:12px;color:var(--mut);font-weight:500}
.comuna{font-size:12.5px;color:var(--dim)}
.tier{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:4px 8px;border-radius:7px}
/* Estrella Premium (version final v2): circulo oscuro + estrella que cicla colores */
.tier-elite{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;background:rgba(10,12,20,.84);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.tier-elite svg{width:15px;height:15px;display:block;animation:star-cycle 4s linear infinite}
@keyframes star-cycle{
  0%,100%{fill:var(--acc);filter:drop-shadow(0 0 4px rgba(201,24,74,.9))}
  25%{fill:var(--acc2);filter:drop-shadow(0 0 4px rgba(255,92,138,.9))}
  50%{fill:var(--flag-blue2);filter:drop-shadow(0 0 4px rgba(63,127,214,.9))}
  75%{fill:var(--gold);filter:drop-shadow(0 0 4px rgba(227,179,76,.9))}
}
@media(prefers-reduced-motion:reduce){.tier-elite svg{animation:none;fill:var(--acc)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.card-age{color:var(--mut);font-weight:400;font-size:.85em}
.fresh{z-index:2;font-size:9px;font-weight:700;letter-spacing:.07em;padding:4px 7px;border-radius:7px;background:rgba(13,13,18,.78);color:#fff;border:1px solid rgba(255,255,255,.25)}
/* Esquina superior derecha de la foto (decision D1): punto verde SIEMPRE en la esquina,
   NUEVA inmediatamente a su izquierda. Nada se mueve cuando hay solo uno. */
.corner-tr{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:6px}
.corner-tr .avail{position:static;border-color:rgba(0,0,0,.55)}
.avail{width:16px;height:16px;border-radius:50%;background:#22c55e;border:2.5px solid var(--bg);animation:availpulse 1.8s ease-out infinite;flex:none}
@keyframes availpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.avail{animation:none}}
/* Sin reportes aun (ambar, NUNCA rojo: rojo = No Recomendable) */
.p-sin{background:rgba(227,179,76,.1);color:var(--gold);border-color:rgba(227,179,76,.35)}
.t-std{border:1.5px solid rgba(201,24,74,.30)}
.t-prio{border:1.5px solid rgba(201,24,74,.62)}
.t-dest{border:2px solid var(--acc);box-shadow:0 0 0 1px rgba(201,24,74,.22),0 10px 28px rgba(201,24,74,.16)}

/* ---------- Halo Elite ---------- */
/* Glow "platino" Premium (version final v2): anillo + resplandor que cicla colores */
.elite-card{background:none;border:0;overflow:visible;padding:0;border-radius:var(--r);animation:platinum-glow 4s linear infinite}
.elite-card .halo{display:none}
.elite-card .card-in{position:relative;z-index:1;background:var(--card);border-radius:var(--r);overflow:hidden}
@keyframes platinum-glow{
  0%,100%{box-shadow:0 0 0 2px var(--acc),0 0 18px rgba(201,24,74,.55)}
  25%{box-shadow:0 0 0 2px var(--acc2),0 0 18px rgba(255,92,138,.55)}
  50%{box-shadow:0 0 0 2px var(--flag-blue2),0 0 18px rgba(63,127,214,.55)}
  75%{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(227,179,76,.55)}
}
@media(prefers-reduced-motion:reduce){.elite-card{animation:none;box-shadow:0 0 0 2px var(--acc),0 0 18px rgba(201,24,74,.5)}}

/* ---------- Publicidad ---------- */
.ad{display:block;position:relative;height:118px;border-radius:var(--r);border:1px dashed rgba(147,178,255,.24);background:linear-gradient(180deg,#1b2136,#161b2c);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.ad .ad-in{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;padding:0 18px}
.ad .ad-t{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(16px,4.4vw,21px);font-weight:700;color:var(--txt)}
.ad .ad-s{font-size:13px;color:var(--mut)}
.ad-tag{position:absolute;top:0;left:0;font-size:9px;font-weight:700;letter-spacing:.14em;padding:3px 9px;background:rgba(255,255,255,.1);color:var(--dim);border-radius:0 0 8px 0}
.ad:hover{border-color:rgba(147,178,255,.42);box-shadow:0 10px 28px -16px rgba(0,0,0,.7);color:inherit}
.ad2{display:none;height:150px}
@media(min-width:700px){.ad2{display:block}}
.ad2 .ad-in{align-items:flex-start;text-align:left;padding:0 28px}
/* Carrusel publicitario (5s por slide, clickeable, con puntos) */
.ad-slider{position:relative}
.ad-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r)}
.ad-track::-webkit-scrollbar{display:none}
.ad-track .ad{flex:0 0 100%;scroll-snap-align:start;border-radius:var(--r)}
.ad-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.ad-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);border:0;padding:0;cursor:pointer;transition:.2s}
.ad-dot.active{background:var(--acc);width:16px;border-radius:3px}
/* Anuncio con imagen real (CPT anuncio): el banner llena la caja */
.ad-img{border-style:solid}
.ad-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Banners de autopromocion (graficas de Claude Design, 1800x240).
   El velo oscuro encima blinda la legibilidad del texto blanco.
   Ojo: la ruta es relativa a beta.css, que vive en la RAIZ del tema. */
body.beta-theme .ad.promo-1,
body.beta-theme .ad.promo-2{
  border-style:solid;border-color:rgba(255,255,255,.12);
  background-size:cover;background-position:center;background-repeat:no-repeat
}
body.beta-theme .ad.promo-1{background-image:linear-gradient(rgba(8,10,20,.35),rgba(8,10,20,.35)),url(img/banner-ads-carmesi.jpg)}
body.beta-theme .ad.promo-2{background-image:linear-gradient(rgba(8,10,20,.35),rgba(8,10,20,.35)),url(img/banner-ads-azul.jpg)}
/* La etiqueta PUBLICIDAD cae sobre zonas claras del banner en escritorio:
   se oscurece para que siga legible. */
body.beta-theme .ad.promo-1 .ad-tag,
body.beta-theme .ad.promo-2 .ad-tag{background:rgba(8,10,20,.6);color:rgba(255,255,255,.75)}
/* Titulo "✦ Premium": la estrella Y la palabra ciclan color con glow,
   en sintonia con el borde platinum-glow de las tarjetas (misma duracion). */
body.beta-theme .premium-title{animation:premium-text-glow 4s linear infinite}
@keyframes premium-text-glow{
  0%,100%{color:var(--acc);text-shadow:0 0 14px rgba(201,24,74,.7)}
  25%{color:var(--acc2);text-shadow:0 0 14px rgba(255,92,138,.7)}
  50%{color:var(--flag-blue2);text-shadow:0 0 14px rgba(63,127,214,.7)}
  75%{color:var(--gold);text-shadow:0 0 14px rgba(227,179,76,.7)}
}
@media(prefers-reduced-motion:reduce){
  body.beta-theme .premium-title{animation:none;color:var(--gold);text-shadow:0 0 14px rgba(227,179,76,.55)}
}

/* ⚠️ BLINDAJE DEL FILTRO (bug encontrado por Nico, 23-jul).
   El JS marcaba las tarjetas con el atributo [hidden], pero el CSS viejo del tema
   (Bulma) forzaba display:block y las seguia mostrando: el contador decia "10 de 76"
   y en pantalla seguian las 76. Medir c.hidden NO sirve para verificar esto:
   hay que medir getComputedStyle(card).display. */
body.beta-theme .card[hidden],
body.beta-theme .grid2 .card[hidden]{display:none !important}

/* Esqueleto de carga de la foto (medido 23-jul: al filtrar solo ~7 de 76 fotos
   estaban cargadas, asi que aparecian huecos oscuros sin explicacion y parecia
   que la pagina se colgaba). El brillo avisa DONDE esta la espera. */
body.beta-theme .ph-wrap:not(.cargada){
  background:linear-gradient(100deg,#151a28 30%,#1f2942 50%,#151a28 70%);
  background-size:200% 100%;
  animation:ph-shimmer 1.15s linear infinite
}
@keyframes ph-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  body.beta-theme .ph-wrap:not(.cargada){animation:none;background:#1a2032}
}
/* OJO: NO poner opacity:0 en la foto esperando que JS la revele. Si el JS falla,
   quedarian TODAS las fotos invisibles (la pagina debe funcionar sin JS - Biblia SEO).
   La foto tapa sola al esqueleto cuando termina de pintarse. */

/* Contador de resultados + salida rapida del filtro.
   Nace de una prueba real de Nico: al filtrar no habia ninguna senal de que algo
   habia pasado, y si el usuario dejaba el filtro puesto veia 10 perfiles en vez
   de 76 (perdiendo la exposicion que se monetiza). */
body.beta-theme .filter-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;font-size:12.5px;color:var(--mut);min-height:32px}
body.beta-theme .filter-status b{color:var(--txt);font-weight:700}
body.beta-theme .filter-status.filtrando{color:var(--acc2)}
body.beta-theme .filter-status.filtrando b{color:var(--acc2)}
body.beta-theme .fs-reset{flex:none;font:inherit;font-size:12.5px;font-weight:700;color:#fff;background:var(--acc);border:0;border-radius:999px;padding:7px 15px;cursor:pointer;transition:background .15s;box-shadow:0 4px 14px -6px rgba(201,24,74,.7)}
body.beta-theme .fs-reset:hover{background:#e02258}
body.beta-theme .fs-reset[hidden]{display:none}

/* Fila tematica de filtros (azul de marca, para diferenciarla de la evaluacion) */
.tema-row{margin-bottom:9px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tchip[aria-pressed="true"],.tchip[aria-current="true"]{background:var(--flag-blue2);border-color:var(--flag-blue2);color:#fff;font-weight:600}

/* ---------- Filtros ---------- */
.filters{position:sticky;top:var(--hh);z-index:40;background:rgba(10,14,26,.88);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);padding:10px 0;margin-bottom:16px;border-bottom:1px solid rgba(147,178,255,.12)}
.filter-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center;padding-bottom:2px}
.filter-row::-webkit-scrollbar{display:none}
.fchip{flex:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--mut);background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);border-radius:999px;padding:8px 14px;cursor:pointer;transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.fchip:hover{color:#fff;border-color:rgba(147,178,255,.32);transform:translateY(-1px)}
.fchip[aria-pressed="true"]{background:linear-gradient(180deg,#e02358,#b8153f);border-color:#e0356a;color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -5px rgba(201,24,74,.6)}
.fsel{flex:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--mut);background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);border-radius:999px;padding:8px 12px;cursor:pointer;appearance:none;-webkit-appearance:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:color .15s,border-color .15s}
.fsel:hover{color:#fff;border-color:rgba(147,178,255,.32)}
.no-results{display:none;padding:34px 10px;text-align:center;color:var(--dim);font-size:14.5px;grid-column:1/-1}

/* ---------- Cargar más / paginación ---------- */
.more-wrap{display:grid;gap:16px;justify-items:center;margin-top:22px}
.pager{display:flex;gap:6px;align-items:center}
.pager a{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(147,178,255,.13);background:linear-gradient(180deg,#181e30,#141927);color:var(--mut);font-size:13.5px;font-weight:500;padding:0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:color .15s,border-color .15s,transform .15s}
.pager a[aria-current="page"]{background:linear-gradient(180deg,#e02358,#b8153f);border-color:#e0356a;color:#fff;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -5px rgba(201,24,74,.6)}
.pager a:hover{border-color:rgba(147,178,255,.34);color:#fff;transform:translateY(-1px)}

/* ---------- Últimos reportes ---------- */
.rep-list{display:grid;gap:10px}
@media(min-width:700px){.rep-list{grid-template-columns:1fr 1fr;gap:14px}}
.rep-item{background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:14px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 26px -20px rgba(0,0,0,.85);transition:border-color .18s}
.rep-item:hover{border-color:rgba(147,178,255,.2)}
.rep-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.rep-head time{font-size:11.5px;color:var(--dim);font-weight:500;letter-spacing:.02em}
.rep-model{font-weight:700;font-size:15px;color:var(--txt)}
.rep-model:hover{color:var(--acc2)}
.rep-ext{font-size:13.5px;color:var(--mut);font-weight:300;line-height:1.6}

/* ---------- SEO text ---------- */
.seo{color:var(--mut);font-weight:300;font-size:15px;max-width:680px}
.seo h2{color:var(--txt);font-size:20px;margin:22px 0 8px}
.seo h2:first-child{margin-top:0}
.seo p{margin-bottom:10px}
.seo a{font-weight:500}

/* ---------- FAQ ---------- */
.faq{background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .18s}
.faq[open]{border-color:rgba(147,178,255,.22)}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:15.5px;font-weight:600;font-family:'Outfit',sans-serif}
.faq .chev{color:var(--dim);transition:transform .2s;flex:none;font-size:18px;line-height:1}
.faq[open] .chev{transform:rotate(180deg)}
.faq p{padding:0 17px 16px;color:var(--mut);font-size:14px;font-weight:300;max-width:640px}

/* ---------- Comunas ---------- */
.cities{display:flex;flex-wrap:wrap;gap:8px}
.cities a{font-size:13px;font-weight:500;color:var(--mut);background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);border-radius:999px;padding:8px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:color .15s,border-color .15s,transform .15s}
.cities a:hover{color:#fff;border-color:var(--acc);transform:translateY(-1px)}
.soon{margin-top:12px;font-size:13px;color:var(--dim)}
.soon b{color:var(--mut);font-weight:600}

/* ---------- Footer ---------- */
footer{border-top:1px solid transparent;border-image:linear-gradient(90deg,rgba(201,24,74,.55),rgba(63,127,214,.5) 55%,transparent 95%) 1;margin-top:44px;padding:28px 0 90px;color:var(--dim);font-size:12.5px}
.f-in{display:grid;gap:14px}
.f-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.f-links a{color:var(--mut);font-size:12.5px}
.f-links a:hover{color:#fff}
.f-18{display:inline-flex;align-items:center;gap:8px}
.badge18{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--nor);color:var(--nor);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800}

/* ---------- Modal +18 ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,11,.9);backdrop-filter:blur(14px)}
.gate[hidden]{display:none}
.gate-card{background:linear-gradient(180deg,#1d2438,#171c2c);border:1px solid rgba(147,178,255,.16);border-radius:22px;max-width:400px;width:100%;padding:30px 26px;text-align:center;display:grid;gap:14px;justify-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 34px 80px -24px rgba(0,0,0,.85)}
.gate-card::before{content:"";width:56px;height:4px;border-radius:99px;justify-self:center;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%)}
.gate-card img{width:58px;height:58px;border-radius:14px}
.gate-card h2{font-size:23px;font-weight:800;letter-spacing:-.02em}
.gate-card p{font-size:14px;color:var(--mut);font-weight:300}
.gate-btns{display:grid;gap:9px;width:100%;margin-top:4px}
.gate-btns button{font:inherit;font-size:15.5px;font-weight:600;border-radius:12px;padding:14px;cursor:pointer;border:0}
.g-yes{background:linear-gradient(180deg,#e02358,#b8153f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -8px rgba(201,24,74,.65);transition:transform .16s,box-shadow .16s,filter .16s}
.g-yes:hover{background:linear-gradient(180deg,#ee2f63,#c91847);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 11px 26px -9px rgba(201,24,74,.75)}
.g-yes:active{transform:translateY(0);filter:brightness(.96)}
.g-no{background:none;border:1px solid var(--line);color:var(--mut)}
.g-no:hover{border-color:rgba(147,178,255,.34);color:#fff}
body.gated{overflow:hidden}

/* ---------- Historias (estilo Instagram, Zuck.js ya existe en el sitio real) ---------- */
.stories-wrap{max-width:920px;margin:0 auto 34px;padding:4px 14px 0}
/* ⚠️ El tema original le pone class="mt-4" al contenedor de Zuck (16px de margen extra),
   pensada para cuando las historias iban DEBAJO de otro bloque. En este diseño son lo
   primero de la página, así que ese margen solo sumaba aire de sobra encima del anillo
   (medido: 22px de hueco antes de la foto). No se puede editar el .php original
   (content-historias.php), así que se pisa por CSS. Bug reportado por Nico, 24-jul. */
body.beta-theme #zuck-container{margin-top:2px !important}

/* Historias movidas debajo del hero (24-jul): .hero es un <section>, así que
   traía el margen genérico de 34px entre secciones — quedaba MUCHO espacio
   arriba de la historia y (por el margin:0 de .stories-wrap de arriba) CERO
   espacio abajo, pegada a Premium. Nico pidió lo opuesto: pegada a las pills
   de arriba, con más aire antes de Premium. Se corrige SOLO cuando el hero
   tiene historias justo después (:has), sin afectar otras páginas. */
body.beta-theme .hero:has(+ .stories-wrap){margin-bottom:5px}
.stories{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;text-decoration:none}
.story-ring{width:64px;height:64px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,rgba(147,178,255,.38),rgba(147,178,255,.12));display:block}
.story-ring.elite{background:linear-gradient(135deg,var(--flag-blue2) 0 50%,var(--acc) 50% 100%);box-shadow:0 0 14px -3px rgba(63,127,214,.4)}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--bg)}
.story-name{font-size:.68rem;color:var(--mut);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* ============================================================
   HISTORIAS REALES (Zuck.js) — 24-jul
   El mockup usaba .story-ring/.story-name, pero en WordPress el HTML lo genera
   Zuck.js con OTRA estructura: .story > .item-link > .item-preview img + .info
   (.name + .time). Mis reglas de arriba y las de zuck.css/snapgram.css se
   peleaban: foto cuadrada, nombre azul de enlace y "1 minute ago" en ingles.
   Aca se re-viste el HTML REAL de Zuck para que calce con el diseno aprobado.
   Se prefija con body.beta-theme para ganarle a zuck.css/snapgram.css.
   ============================================================ */
body.beta-theme #zuck-container{display:flex;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;margin:0}
body.beta-theme #zuck-container::-webkit-scrollbar{display:none}
/* Tamaño subido el 24-jul (Nico, comparando con Instagram y sexosur.cl):
   circulo 64->80px, columna 68->88px, nombre 10.9px->13px y peso 600->700,
   color mut->txt para que "firme" con mas protagonismo. Que quepan menos
   historias sin scroll no importa (ya es igual en Instagram/sexosur). */
body.beta-theme #zuck-container .story{flex:0 0 auto;width:88px;margin:0;padding:0;background:none;border:0}
body.beta-theme #zuck-container .story .item-link{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
/* El anillo se dibuja sobre el contenedor de la foto */
body.beta-theme #zuck-container .story .item-preview{
  display:block;width:80px;height:80px;border-radius:50%;padding:2.5px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 0 14px -3px rgba(201,24,74,.45);overflow:visible
}
body.beta-theme #zuck-container .story .item-preview img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--bg);margin:0;max-width:none
}
body.beta-theme #zuck-container .story .info{
  display:block;max-width:88px;text-align:center;font-size:13px;line-height:1.25;
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
body.beta-theme #zuck-container .story .info .name{
  display:block;font-size:13px;font-weight:700;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* El diseno aprobado NO muestra la hora (ademas Zuck la escribe en ingles) */
body.beta-theme #zuck-container .story .info .time{display:none}
/* Historia ya vista: el anillo se apaga, como en Instagram */
body.beta-theme #zuck-container .story.seen .item-preview{
  background:linear-gradient(135deg,rgba(147,178,255,.30),rgba(147,178,255,.12));box-shadow:none
}
/* ⚠️ .items es la lista de DATOS que Zuck usa para armar el visor a pantalla completa;
   NO debe dibujarse en la fila. Se estaba viendo como un icono de imagen rota bajo el
   nombre, porque su <img> interno no trae src (queda en "undefined").
   Los datos siguen ahí para el visor: solo se ocultan visualmente.
   Bug encontrado por Nico el 24-jul al publicar la primera historia. */
body.beta-theme #zuck-container .story > .items{display:none !important}

/* ---------- Menú hamburguesa (móvil) — refleja el menú real del sitio ---------- */
.menu-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;margin-left:8px;flex-shrink:0}
.menu-btn span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1039px){
  .nav{position:fixed;top:var(--hh);left:0;right:0;height:calc(100vh - var(--hh));background:var(--bg);flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 18px 24px;overflow-y:auto;z-index:70;transform:translateX(100%);transition:transform .25s ease}
  .nav.is-open{transform:translateX(0)}
  .nav a{padding:16px 4px;font-size:16.5px;border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
  body.nav-open{overflow:hidden}
}

/* ---------- Desktop header en una fila ---------- */
@media(min-width:1040px){
  :root{--hh:66px}
  .head-in{max-width:1180px;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
  .nav a{padding:7px 8px;font-size:13px}
  .search{max-width:300px;padding:8px 13px}
  .menu-btn{display:none}
}
@media(min-width:1240px){
  .head-in{max-width:1320px}
  .search{max-width:340px}
}


.perfil{max-width:640px;margin:0 auto;padding:calc(var(--hh) + 8px) 0 96px}
.crumbs{font-size:12.5px;color:var(--mut);padding:8px 16px}
.crumbs a{color:var(--flag-blue2);text-decoration:none}.crumbs span{margin:0 5px;opacity:.5}
.hero-p{position:relative;margin:6px 14px 0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-height:70vh;box-shadow:0 0 0 1px rgba(147,178,255,.1),0 26px 60px -28px rgba(0,0,0,.85)}
.hero-ph,.hero-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,16,.94) 6%,rgba(8,10,16,.56) 28%,rgba(8,10,16,.18) 50%,transparent 68%)}
.hero-info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px}
.hero-info h1{font-size:clamp(26px,7vw,34px);font-weight:800;letter-spacing:-.02em}
.hero-info .edad{font-weight:500;color:rgba(255,255,255,.8)}
.hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.hero-com{color:rgba(255,255,255,.82);font-size:14px;margin-top:8px}
.p-desc{padding:18px 16px 4px}.p-desc p{color:var(--mut);line-height:1.65}
.p-serv{padding:14px 16px 4px}.p-serv h2,.p-gal h2,.p-reps h2,.explore h2,.more h2{font-size:20px;font-weight:800;margin-bottom:12px}
.p-serv h2::after,.p-reps h2::after,.explore h2::after,.more h2::after{content:"";display:block;height:3px;width:30px;margin-top:6px;border-radius:99px;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%);opacity:.8}
.serv-list{display:flex;flex-wrap:wrap;gap:8px}
.serv{background:linear-gradient(180deg,rgba(63,127,214,.18),rgba(63,127,214,.1));color:#9cc4ff;border:1px solid rgba(63,127,214,.34);padding:7px 13px;border-radius:20px;font-size:13.5px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.p-gal{padding:18px 0 4px}.gal-head{display:flex;justify-content:space-between;align-items:center;padding:0 16px}
.gal-count{font-size:13px;color:var(--mut)}
.gal-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 72%;max-width:280px;scroll-snap-align:center;border:none;padding:0;background:none;cursor:pointer;border-radius:14px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 0 0 1px rgba(147,178,255,.1),0 14px 32px -22px rgba(0,0,0,.9)}
.g-slide img{width:100%;height:100%;object-fit:cover;display:block}
.p-reps{padding:20px 16px 4px}.reps-head,.sug-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.reps-sub{font-size:12.5px;color:var(--mut)}
.rep{background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:16px;padding:15px;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 30px -24px rgba(0,0,0,.9);transition:border-color .18s}
.rep.open{border-color:rgba(147,178,255,.2)}
.rep-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.rep-date{font-size:12px;color:var(--dim)}
.rep-text{color:var(--mut);line-height:1.6;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rep.open .rep-text{-webkit-line-clamp:unset;display:block}
.rep-toggle{margin-top:8px;background:none;border:none;color:var(--acc2);font-weight:600;font-size:13.5px;cursor:pointer;padding:2px 0;transition:color .15s}
.rep-toggle:hover{color:#8fbcff}
.rep-fields{display:none;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rep.open .rep-fields{display:grid}
.rep-fields dt{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}
.rep-fields dd{font-size:14px;color:var(--txt);font-weight:500}
.rf-cap{grid-column:1/-1;font-size:11.5px;color:var(--dim);font-style:italic;margin-bottom:3px}
.suggest{margin:6px -16px 18px;padding:16px;background:linear-gradient(180deg,rgba(63,127,214,.08),transparent);border-top:1px solid rgba(147,178,255,.12);border-bottom:1px solid rgba(147,178,255,.12)}
.suggest h3{font-size:16px;font-weight:700}.sug-all{font-size:13px;color:var(--flag-blue2);text-decoration:none}
.sug-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.sug-track::-webkit-scrollbar{display:none}
.mini{flex:0 0 132px;scroll-snap-align:start;text-decoration:none;color:inherit}
.mini-ph{aspect-ratio:3/4;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(147,178,255,.1),0 10px 24px -18px rgba(0,0,0,.9)}.mini-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mini-b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.mini-b h3{font-size:14px;font-weight:600;width:100%}
.pill-sm{padding:3px 7px}.mini-com{font-size:11.5px;color:var(--mut)}
.explore{padding:22px 16px 8px}.cat-list{display:flex;flex-wrap:wrap;gap:9px}
.cat-chip{padding:9px 15px;border-radius:22px;background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);color:var(--txt);text-decoration:none;font-size:13.5px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:border-color .15s,transform .15s}
.cat-chip:hover{border-color:var(--acc);transform:translateY(-1px)}
.more{padding:22px 16px 10px}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.more-grid .mini{flex:none;width:auto}
.contact-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;flex-wrap:wrap;gap:10px;padding:9px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(10,14,26,.96),rgba(10,14,26,.88));-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid rgba(147,178,255,.14);box-shadow:0 -14px 34px -24px rgba(0,0,0,.9)}
.contact-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:13px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .16s,box-shadow .16s,filter .16s}
.contact-bar a:active{transform:translateY(1px);filter:brightness(.97)}
.cb-who{flex:0 0 100%;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.cb-name{font-weight:700;font-size:14px;color:var(--txt)}
.cb-eval{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.eval-exc{color:var(--exc);background:rgba(74,222,128,.14)}
.eval-bue{color:var(--bue);background:rgba(244,114,182,.14)}
.eval-reg{color:var(--reg);background:rgba(251,146,60,.14)}
.eval-nor{color:var(--nor);background:rgba(248,113,113,.14)}
.cb-wa{background:linear-gradient(180deg,#31da72,#1fc35c);color:#04350f;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px -9px rgba(37,211,102,.55)}
.cb-wa:hover{background:linear-gradient(180deg,#43e386,#25c162);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 11px 26px -10px rgba(37,211,102,.65);color:#04350f}.cb-call{background:linear-gradient(180deg,#1e2438,#181d2e);color:#fff;border:1px solid rgba(147,178,255,.16);flex:0 0 40%;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cb-call:hover{border-color:rgba(147,178,255,.3);color:#fff;transform:translateY(-1px)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,8,12,.97);display:none}
.lightbox.open{display:block}
.lb-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:20px}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;top:14px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:none;font-size:20px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-count{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-size:14px}
.report-gone{display:flex;gap:11px;align-items:flex-start;margin:22px 16px 6px;padding:14px 16px;background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-left:3px solid var(--flag-blue2);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.report-gone .rg-ico{flex:none;font-size:17px}
.report-gone p{font-size:13.5px;color:var(--mut);line-height:1.55}
.report-gone b{color:var(--txt)}
.report-gone a{color:var(--acc2);font-weight:600;text-decoration:underline}
.site-foot{text-align:center;color:var(--dim);font-size:12px;padding:20px 20px 120px}
@media(min-width:1040px){
  .perfil{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start;padding:calc(var(--hh) + 20px) 16px 40px}
  .perfil>*{min-width:0}
  .crumbs,.hero-p,.p-desc,.p-serv,.p-gal,.p-reps,.report-gone{grid-column:1;padding-left:0;padding-right:0}
  .report-gone{margin-left:0;margin-right:0;padding:14px 16px}
  .hero-p{margin-left:0;margin-right:0;max-height:80vh}
  .contact-bar{position:sticky;top:calc(var(--hh) + 20px);grid-column:2;grid-row:2 / span 5;flex-direction:column;background:none;border:none;backdrop-filter:none;padding:0;align-self:start}
  .contact-bar a{flex:none;width:100%}
  .suggest{margin-left:0;margin-right:0}
  .explore,.more{grid-column:1 / -1;padding-left:0;padding-right:0}
}

/* item extra del menu: visible solo en hamburguesa movil */
@media(min-width:1040px){.nav-extra{display:none}}

.head-cta{display:none}
@media(min-width:1040px){
  .head-cta{display:inline-flex;align-items:center;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--gold);background:rgba(227,179,76,.12);border:1px solid rgba(227,179,76,.35);border-radius:999px;padding:8px 14px;text-decoration:none;transition:.15s;flex:none}
  .head-cta:hover{background:rgba(227,179,76,.22);border-color:var(--gold)}
}

/* ---------- Pulido premium: focus visible, seleccion y scrollbar ---------- */
::selection{background:rgba(201,24,74,.5);color:#fff}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
@media(min-width:1040px){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:#242d47;border:3px solid var(--bg);border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:#2f3a5c}
}


/* ============================================================
   BLINDAJE ANTI-BULMA (WordPress)
   El tema carga Bulma y otros CSS que pisan el diseño.
   Este bloque va al final para asegurar la identidad visual.
   ============================================================ */
html.beta-html{background:#0a0e1a !important}
body.beta-theme{
  background:
    radial-gradient(1200px 600px at 88% -12%,rgba(201,24,74,.10),transparent 60%),
    radial-gradient(1000px 540px at -10% -6%,rgba(63,127,214,.09),transparent 56%),
    #0a0e1a !important;
  color:var(--txt) !important;
  font-family:'Outfit',system-ui,sans-serif !important;
}
body.beta-theme h1,body.beta-theme h2,body.beta-theme h3,
body.beta-theme h4,body.beta-theme h5,body.beta-theme h6{color:var(--txt)}
body.beta-theme .perfil p,body.beta-theme .p-desc p{color:var(--mut)}
body.beta-theme strong,body.beta-theme b{color:inherit}
body.beta-theme a{text-decoration:none}
/* el contenido de WP (the_content) dentro de la descripcion */
body.beta-theme .p-desc p{margin:0 0 10px}
body.beta-theme .p-desc p:last-child{margin-bottom:0}
/* formulario "escort no disponible" */
body.beta-theme .report-gone-form textarea{
  width:100%;font:inherit;font-size:14.5px;color:var(--txt);
  background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px 12px
}
body.beta-theme .report-gone-form textarea:focus{outline:none;border-color:var(--flag-blue2)}
body.beta-theme .report-gone-form .label{color:var(--txt)}
body.beta-theme .report-gone-form .submit-btn{
  font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--acc);
  border:none;border-radius:12px;padding:13px 20px;cursor:pointer
}
body.beta-theme .report-gone-form .mensaje{font-size:13px;color:var(--mut);margin-top:8px}


/* ============================================================
   AJUSTES v4 — ruta de navegación + "Disponible ahora"
   ============================================================ */

/* Breadcrumb más legible (antes 12.5px se veía muy chico en móvil) */
body.beta-theme .crumbs{font-size:14px;padding:11px 16px 9px;gap:7px;flex-wrap:wrap}
body.beta-theme .crumbs a{color:var(--flag-blue2);font-weight:600}
body.beta-theme .crumbs a:hover{color:var(--acc2)}

/* Punto verde pulsante: señal de "está activa ahora mismo" */
.avail-dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  background:#22c55e;flex:none;
  animation:availpulse 1.8s ease-out infinite
}
@keyframes availpulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@media(prefers-reduced-motion:reduce){.avail-dot{animation:none}}

/* Badge en el hero, bajo el nombre */
.avail-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin:8px 0 2px;padding:6px 13px;border-radius:999px;
  background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.45);
  color:#4ade80;font-size:13px;font-weight:700;letter-spacing:.01em;
  backdrop-filter:blur(4px);width:fit-content
}

/* Refuerzo en la barra de contacto (momento de decisión) */
.cb-avail{
  font-size:11.5px;font-weight:700;color:#4ade80;
  background:rgba(34,197,94,.15);padding:2px 9px;border-radius:999px;white-space:nowrap
}
.cb-who .avail-dot{width:9px;height:9px}


/* ============================================================
   AJUSTES v5 — ruta MAS grande + punto verde en la foto
   ============================================================ */

/* Ruta de navegacion: 14px era demasiado sutil, subimos a 15.5px */
body.beta-theme .crumbs{
  font-size:15.5px !important;
  padding:13px 16px 10px !important;
  color:var(--mut) !important
}
body.beta-theme .crumbs a{color:var(--flag-blue2) !important;font-weight:600 !important}

/* Punto verde en la ESQUINA SUPERIOR DERECHA de la foto (patron "en linea") */
.avail-corner{
  position:absolute;top:14px;right:14px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(10,14,26,.55);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.28)
}
.avail-corner .avail-dot{width:15px;height:15px}


/* ============================================================
   AJUSTES v6 — corregir alto del header
   El diseno original reservaba 112px porque tenia buscador.
   En WordPress el header mide 61px reales => sobraban ~51px
   de espacio muerto bajo el header. Ajustamos la variable.
   ============================================================ */
html.beta-html{--hh:62px}
@media(min-width:1040px){html.beta-html{--hh:66px}}

/* Un poco menos de aire arriba de la ruta, ahora que el calculo es correcto */
body.beta-theme .perfil{padding-top:calc(var(--hh) + 6px)}
body.beta-theme .crumbs{padding-top:10px !important}


/* ============================================================
   AJUSTES v7 — compactar la franja de la ruta
   La ruta medía 44px de alto para un texto de ~19px:
   demasiado padding interno hacía ver la franja vacía.
   ============================================================ */
body.beta-theme .perfil{padding-top:calc(var(--hh) + 2px)}
body.beta-theme .crumbs{
  padding-top:6px !important;
  padding-bottom:4px !important;
  line-height:1.25 !important
}
body.beta-theme .hero-p{margin-top:2px}


/* ============================================================
   AJUSTES v8 — menu hamburguesa a la derecha
   Antes quedaba pegado al logo. Ahora va al extremo derecho:
   convencion universal + coincide con el sitio real (float:right).
   ============================================================ */
body.beta-theme .head-row{justify-content:space-between;width:100%}
body.beta-theme .menu-btn{margin-left:auto !important}
/* En desktop el menu es inline: la nav toma el espacio y el boton no se ve */
@media(min-width:1040px){
  body.beta-theme .head-row{justify-content:flex-start}
  body.beta-theme .nav{margin-left:auto}
}


/* ============================================================
   HOME — selector de ciudades
   Ojo: .cities tambien existe para las comunas del index,
   por eso aca todo va anidado bajo .home para no chocar.
   ============================================================ */
body.beta-theme .home{max-width:760px;margin:0 auto;padding:calc(var(--hh) + 34px) 16px 60px;text-align:center}
body.beta-theme .home-h1{font-size:clamp(30px,8vw,50px);margin-bottom:10px}
body.beta-theme .home-h1::before{content:"";display:block;width:58px;height:5px;border-radius:99px;margin:0 auto 14px;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%);box-shadow:0 0 16px rgba(63,127,214,.4)}
body.beta-theme .home-h1 em{font-style:normal;color:var(--acc2)}
body.beta-theme .home-sub{color:var(--mut);font-size:clamp(14.5px,4vw,17px);max-width:540px;margin:0 auto 34px;line-height:1.55}
body.beta-theme .home-sub b{color:var(--txt)}
body.beta-theme .home .pick-label{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:14px}
body.beta-theme .home .cities{display:grid;gap:12px;margin-bottom:34px}
body.beta-theme .home .city{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:var(--r);padding:18px;text-align:left;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 30px -22px rgba(0,0,0,.9)}
body.beta-theme .home .city .ico{font-size:26px;flex:none}
body.beta-theme .home .city b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;color:var(--txt)}
body.beta-theme .home .city span{font-size:13px;color:var(--mut)}
body.beta-theme .home .city .go{margin-left:auto;color:var(--acc2);font-size:20px;flex:none;transition:transform .18s}
body.beta-theme .home .city.on:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 44px -20px rgba(0,0,0,.8),0 8px 22px -12px rgba(201,24,74,.3)}
body.beta-theme .home .city.on:hover .go{transform:translateX(3px)}
body.beta-theme .home .city.soon{opacity:.55;cursor:default}
body.beta-theme .home .soon-tag{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--gold);background:rgba(227,179,76,.12);border:1px solid rgba(227,179,76,.3);padding:4px 10px;border-radius:999px}
body.beta-theme .home .age-line{font-size:12.5px;color:var(--dim);line-height:1.5;max-width:440px;margin:0 auto}
body.beta-theme .home .age-line b{color:var(--mut)}

/* ============================================================
   FORMULARIOS — fundación compartida
   Usada por Anúnciate y (a futuro) Publícate / Ingresar / Subir-reporte.
   Todo bajo body.beta-theme para ganarle a Bulma.
   ============================================================ */
body.beta-theme .form-wrap{max-width:620px;margin:0 auto;padding:calc(var(--hh) + 26px) 16px 60px}
body.beta-theme .form-h1{font-size:clamp(26px,7vw,34px);margin-bottom:8px;color:var(--txt)}
body.beta-theme .form-intro{color:var(--mut);font-size:15px;margin-bottom:20px;line-height:1.55}
body.beta-theme .form-intro b{color:var(--txt)}
body.beta-theme .why{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
body.beta-theme .why div{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 12px;text-align:center}
body.beta-theme .why b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:20px;color:var(--gold)}
body.beta-theme .why span{font-size:11.5px;color:var(--mut)}
body.beta-theme .form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;margin-bottom:16px}
body.beta-theme .field{margin-bottom:15px}
body.beta-theme .field:last-child{margin-bottom:0}
body.beta-theme .field>label{display:block;font-size:13.5px;font-weight:600;color:var(--txt);margin-bottom:6px}
body.beta-theme .hint{font-size:12px;color:var(--dim);margin-top:5px}
body.beta-theme .inp,body.beta-theme .sel,body.beta-theme .ta{width:100%;font:inherit;font-size:15px;color:var(--txt);background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .15s,background .15s}
body.beta-theme .inp:focus,body.beta-theme .sel:focus,body.beta-theme .ta:focus{outline:none;border-color:var(--flag-blue2);background:#1c2434}
body.beta-theme .inp::placeholder,body.beta-theme .ta::placeholder{color:var(--dim)}
body.beta-theme .sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808a9e' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center}
body.beta-theme .ta{resize:vertical;min-height:90px;line-height:1.5}
body.beta-theme .phone-wrap{display:flex}
body.beta-theme .phone-pre{display:flex;align-items:center;padding:0 13px;background:#1c2434;border:1px solid var(--line);border-right:none;border-radius:11px 0 0 11px;font-size:15px;color:var(--mut);font-weight:600;white-space:nowrap}
body.beta-theme .phone-wrap .inp{border-radius:0 11px 11px 0}
body.beta-theme .submit-btn{width:100%;font:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--acc);border:none;border-radius:13px;padding:16px;cursor:pointer;transition:.15s}
body.beta-theme .submit-btn:hover{background:#e01a52}
body.beta-theme .form-note{text-align:center;font-size:12.5px;color:var(--dim);margin-top:14px;line-height:1.5}
body.beta-theme .form-ok{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.4);color:var(--exc);border-radius:12px;padding:13px 15px;margin-bottom:18px;font-size:14.5px;font-weight:600}
body.beta-theme .form-err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:var(--nor);border-radius:12px;padding:13px 15px;margin-bottom:18px;font-size:14.5px;font-weight:600}

/* ============================================================
   LOGIN — página Ingresar (reutiliza .field/.inp/.submit-btn/.form-err)
   ============================================================ */
body.beta-theme .login-wrap{max-width:420px;margin:0 auto;padding:calc(var(--hh) + 34px) 16px 60px}
body.beta-theme .login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 20px}
body.beta-theme .login-h1{font-size:26px;text-align:center;margin-bottom:6px;color:var(--txt)}
body.beta-theme .login-sub{text-align:center;color:var(--mut);font-size:14px;margin-bottom:22px}
body.beta-theme .pw-wrap{position:relative}
body.beta-theme .pw-wrap .inp{padding-right:78px}
body.beta-theme .pw-tog{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:12px;font-weight:600;color:var(--flag-blue2);background:none;border:none;cursor:pointer;padding:8px 10px}
body.beta-theme .login-links{margin-top:18px;text-align:center;font-size:13.5px;color:var(--mut);display:grid;gap:9px}
body.beta-theme .login-links a{color:var(--acc2);font-weight:600}
body.beta-theme .login-note{margin-top:20px;text-align:center;font-size:12.5px;color:var(--dim);line-height:1.5}


/* ============================================================
   MI CUENTA — panel de la escort/agencia
   ============================================================ */
/* ---------- Mi Cuenta: layout panel ---------- */
.acct{max-width:1180px;margin:0 auto;padding:calc(var(--hh) + 18px) 16px 60px}
/* ⚠️ Faltaba: .btn-ghost se usa desde Mi Cuenta (23-jul) pero nunca se definio aca,
   asi que salia como link azul subrayado sin estilo. Encontrado el 24-jul al construir
   Mi Perfil / Mis Fotos / Mis Historias, que lo reusan varias veces. */
body.beta-theme .btn-ghost{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;cursor:pointer;transition:.15s;white-space:nowrap}
body.beta-theme .btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
body.beta-theme .btn-danger-ghost{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;color:var(--nor);background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);border-radius:999px;padding:9px 16px;text-decoration:none;cursor:pointer;transition:.15s}
body.beta-theme .btn-danger-ghost:hover{background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.5)}

.acct-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.acct-hi{font-size:clamp(23px,6vw,30px)}
.acct-hi::before{content:"";display:block;width:44px;height:4px;border-radius:99px;margin-bottom:10px;background:linear-gradient(90deg,var(--acc) 0 50%,var(--flag-blue2) 50% 100%)}
.acct-hi small{display:block;font-size:13px;color:var(--mut);font-weight:400;font-family:'Outfit',sans-serif;margin-top:3px}
/* tabs de navegacion del panel (mobile: scroll horizontal / desktop: sidebar) */
.acct-body{display:grid;gap:18px}
.acct-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.acct-nav::-webkit-scrollbar{display:none}
.acct-nav button{flex:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--mut);background:linear-gradient(180deg,#181e30,#141927);border:1px solid rgba(147,178,255,.13);border-radius:999px;padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:color .15s,border-color .15s,background .15s,box-shadow .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.acct-nav button:hover{color:#fff}
.acct-nav button[aria-selected="true"]{background:linear-gradient(180deg,#e02358,#b8153f);border-color:#e0356a;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -6px rgba(201,24,74,.6)}
/* pista de scroll horizontal en las pills (solo móvil) */
.nav-wrap{position:relative}
.nav-wrap::after{content:"";position:absolute;top:0;right:0;bottom:2px;width:54px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg) 78%);opacity:1;transition:opacity .2s}
.nav-wrap.at-end::after{opacity:0}
.nav-more{position:absolute;right:0;top:50%;transform:translateY(-56%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;line-height:1;color:#fff;background:var(--acc);border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 10px rgba(201,24,74,.5);transition:opacity .2s;animation:nudge 1.6s ease-in-out infinite;padding:0 0 2px}
.nav-wrap.at-end .nav-more{opacity:0;pointer-events:none}
/* cerrar sesión: fuera de las pills, abajo y separado */
.logout-row{display:flex;justify-content:center;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.logout-btn{font:inherit;font-size:13.5px;font-weight:600;color:var(--nor);background:none;border:1px solid rgba(248,113,113,.3);border-radius:11px;padding:11px 22px;cursor:pointer;transition:.15s}
.logout-btn:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.5)}
.view{display:none}
.view.active{display:block}
/* ---------- Estadisticas ---------- */
.period{display:flex;gap:6px;background:linear-gradient(180deg,#141927,#121623);border:1px solid rgba(147,178,255,.13);border-radius:12px;padding:5px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 1.5px 4px rgba(0,0,0,.3)}
.period::-webkit-scrollbar{display:none}
.period button{flex:1;min-width:64px;font:inherit;font-size:12.5px;font-weight:600;color:var(--mut);background:none;border:none;border-radius:8px;padding:9px 10px;cursor:pointer;transition:.15s;white-space:nowrap}
.period button[aria-selected="true"]{background:linear-gradient(180deg,#4a8ce0,#3068b8);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 10px -4px rgba(63,127,214,.6)}
.stat .ico{font-size:22px}
.stat span{font-size:12.5px;color:var(--mut)}
.stat.s-wa b{color:#25d366}
.stat.s-tel b{color:var(--flag-blue2)}
/* estado de publicacion */
.pubstate{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:var(--r);padding:16px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.pubstate .ico{font-size:26px}
.ps-t{font-weight:700;font-size:15px}
.ps-days{font-size:13.5px;color:var(--exc);font-weight:600}
.ps-exp{font-size:12px;color:var(--dim)}
.ps-bar{height:7px;border-radius:99px;background:var(--card2);margin-top:8px;overflow:hidden}
.ps-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--exc),#86efac);width:71%;box-shadow:0 0 10px rgba(74,222,128,.4)}
/* boost */
.boost{background:linear-gradient(135deg,rgba(201,24,74,.18),rgba(63,127,214,.12));border:1px solid rgba(201,24,74,.4);border-radius:var(--r);padding:18px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px -22px rgba(201,24,74,.45)}
.boost-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;margin-bottom:5px}
.boost p{font-size:13.5px;color:var(--mut);margin-bottom:13px}
.boost p b{color:var(--txt);font-size:16px}
.btn-boost{font:inherit;font-size:14.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,#e02358,#b8153f);border:none;border-radius:11px;padding:13px 22px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px -8px rgba(201,24,74,.6);transition:transform .16s,box-shadow .16s,filter .16s}
.btn-boost:active{transform:translateY(1px);filter:brightness(.96)}
.btn-boost:hover{background:linear-gradient(180deg,#ee2f63,#c91847);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 11px 24px -9px rgba(201,24,74,.7)}
.boost-hint{font-size:12px;color:var(--dim);margin-top:9px}
/* disponible ahora (2h renovables) */
.avail-card{background:linear-gradient(180deg,#171c2c,#131826);border:1px solid rgba(147,178,255,.12);border-radius:var(--r);padding:16px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .2s}
.avail-card.on{border-color:rgba(34,197,94,.35)}
.ac-head{display:flex;align-items:center;gap:9px;font-size:15.5px;margin-bottom:5px}
.ac-dot{width:13px;height:13px;border-radius:50%;background:var(--dim);flex:none;transition:background .2s}
.avail-card.on .ac-dot{background:#22c55e;animation:acpulse 1.8s ease-out infinite}
.ac-desc{font-size:13.5px;color:var(--mut);margin-bottom:13px;line-height:1.5}
.ac-desc b{color:var(--txt)}
.ac-timer{font-size:14px;color:var(--exc);font-weight:600;margin-bottom:13px}
.btn-avail{font:inherit;font-size:14.5px;font-weight:700;color:#04350f;background:linear-gradient(180deg,#2ed571,#1cb355);border:none;border-radius:11px;padding:13px 22px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px rgba(34,197,94,.55);transition:transform .16s,box-shadow .16s,filter .16s}
.btn-avail:active{transform:translateY(1px);filter:brightness(.97)}
.btn-avail:hover{background:linear-gradient(180deg,#43e386,#25c162);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 11px 24px -9px rgba(34,197,94,.65)}
.approve-note{display:flex;gap:9px;align-items:flex-start;background:rgba(227,179,76,.1);border:1px solid rgba(227,179,76,.3);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--gold);margin-bottom:14px;line-height:1.45}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.submit-btn:active{transform:translateY(1px);filter:brightness(.96)}
.btn-danger{font:inherit;font-size:14px;font-weight:600;color:var(--nor);background:none;border:1px solid rgba(248,113,113,.35);border-radius:12px;padding:15px 18px;cursor:pointer;transition:.15s}
.btn-danger:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.5)}
/* ---------- Mis Fotos ---------- */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.photo{position:relative;border-radius:14px;overflow:hidden;background:var(--card2);border:1px solid rgba(147,178,255,.13);aspect-ratio:3/4;box-shadow:0 10px 26px -20px rgba(0,0,0,.9);transition:border-color .18s,transform .18s}
.photo:hover{border-color:rgba(147,178,255,.24);transform:translateY(-2px)}
.photo img,.photo .ph{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph{display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px}
.photo.main{border:2px solid var(--acc)}
.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:26px 18px;border:1.5px dashed rgba(147,178,255,.22);border-radius:13px;background:var(--card2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.upload:hover{border-color:rgba(63,127,214,.55);background:#1b2234;box-shadow:0 0 0 3px rgba(63,127,214,.08)}
.up-t{font-size:14px;font-weight:600;color:var(--txt)}
.up-s{font-size:12px;color:var(--dim)}
.upload input{display:none}
/* ---------- Historias ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;text-align:center;background:linear-gradient(180deg,#161b2a,#131826);border:1px dashed rgba(147,178,255,.2);border-radius:var(--r)}
.empty .ico{font-size:34px;opacity:.6}
.empty p{color:var(--mut);font-size:14.5px}
.empty small{color:var(--dim);font-size:12.5px}
.story-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:16px}

/* ============================================================
   PUBLICAR HISTORIA — selector de fotos aprobadas (24-jul)
   La seleccion es 100% CSS (:checked + hermanos): funciona aunque el JS falle,
   que es la regla del proyecto. El radio se oculta pero SIGUE siendo focusable
   con teclado, y el borde de foco se dibuja sobre la foto.
   ============================================================ */
body.beta-theme .hist-intro{color:var(--mut);font-size:14px;line-height:1.55;margin-bottom:14px}
body.beta-theme .hist-intro b{color:var(--txt)}
body.beta-theme .hist-picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
body.beta-theme .hist-picker label{font-size:13.5px;font-weight:600;color:var(--txt)}
body.beta-theme .hist-picker .sel{width:auto;min-width:200px;flex:1}

body.beta-theme .pick-item{position:relative;display:block;cursor:pointer;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--card2)}
body.beta-theme .pick-item input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
body.beta-theme .pick-item img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;transition:transform .18s,filter .18s}
/* Sin elegir: la foto se atenua un poco para que resalte la elegida */
body.beta-theme .pick-item input:not(:checked) ~ img{filter:brightness(.62)}
body.beta-theme .pick-item:hover input:not(:checked) ~ img{filter:brightness(.8)}
/* Elegida: marco carmesi + tilde */
body.beta-theme .pick-item input:checked ~ img{box-shadow:inset 0 0 0 3px var(--acc);transform:scale(1.02)}
body.beta-theme .pick-item .pick-check{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  background:var(--acc);color:#fff;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;
  box-shadow:0 4px 12px -4px rgba(201,24,74,.8)
}
body.beta-theme .pick-item input:checked ~ .pick-check{opacity:1;transform:scale(1)}
/* Accesible con teclado: el foco se ve aunque el radio este oculto */
body.beta-theme .pick-item input:focus-visible ~ img{outline:3px solid var(--flag-blue2);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){
  body.beta-theme .pick-item img,body.beta-theme .pick-item .pick-check{transition:none}
  body.beta-theme .pick-item input:checked ~ img{transform:none}
}

/* ============================================================
   MIS FOTOS — grilla de gestion (24-jul)
   Reusa la grilla de .story-pick pero con TARJETA (no radio): cada foto trae
   sus propios botones (Principal/Eliminar), no es una eleccion unica.
   ============================================================ */
body.beta-theme .foto-card{position:relative;border-radius:14px;overflow:hidden;background:var(--card2);display:flex;flex-direction:column}
body.beta-theme .foto-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
body.beta-theme .foto-card form{margin:0}
body.beta-theme .foto-btn{width:100%;font:inherit;font-size:11.5px;font-weight:700;padding:7px 4px;border:0;cursor:pointer;color:#fff;background:rgba(0,0,0,.55);transition:background .15s}
body.beta-theme .foto-btn-principal{background:rgba(63,127,214,.55)}
body.beta-theme .foto-btn-principal:hover{background:var(--flag-blue2)}
body.beta-theme .foto-btn-eliminar{background:rgba(248,113,113,.5)}
body.beta-theme .foto-btn-eliminar:hover{background:var(--nor)}
body.beta-theme .foto-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(227,179,76,.16);color:var(--gold);border:1px solid rgba(227,179,76,.4);backdrop-filter:blur(4px)}
body.beta-theme .foto-en-revision{opacity:.7}
body.beta-theme .foto-tag-revision{background:rgba(63,127,214,.18);color:var(--flag-blue2);border-color:rgba(63,127,214,.4)}

/* Dropzone: re-vestido oscuro (la libreria trae su propio look claro) */
body.beta-theme .dropzone{min-height:auto;border:2px dashed rgba(147,178,255,.25) !important;border-radius:var(--r) !important;background:var(--card2) !important;padding:0 !important}
body.beta-theme .dropzone:hover{border-color:var(--flag-blue2) !important}
body.beta-theme .dropzone .dz-message{margin:0;padding:26px 16px;text-align:center}
body.beta-theme .dropzone .dz-ico{display:block;font-size:26px;margin-bottom:6px}
body.beta-theme .dropzone .dz-message p{color:var(--txt);font-size:14px;font-weight:600;margin-bottom:4px}
body.beta-theme .dropzone .dz-message small{color:var(--dim);font-size:12px}
body.beta-theme .dropzone .dz-preview .dz-image{border-radius:10px}
body.beta-theme .dropzone .dz-preview .dz-error-message{background:var(--nor)}

/* ============================================================
   MI PERFIL — editor TinyMCE + checkboxes de servicios (24-jul)
   El editor se deja con su blanco nativo DENTRO de una tarjeta oscura: reskinear
   el iframe interno de TinyMCE es fragil y no aporta (es una "isla" reconocible,
   como el selector nativo de archivos). Decision consciente, no un olvido.
   ============================================================ */
body.beta-theme .editor-card{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
body.beta-theme .editor-card .wp-editor-wrap{margin:0}
body.beta-theme .checks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
body.beta-theme .check-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;transition:.15s}
body.beta-theme .check-item:has(input:checked){color:var(--txt);border-color:var(--flag-blue2);background:rgba(63,127,214,.1)}
body.beta-theme .check-item input{accent-color:var(--acc);width:15px;height:15px;flex:none}

/* ============================================================
   MIS HISTORIAS — listado en tarjetas (24-jul)
   ============================================================ */
body.beta-theme .hist-lista{display:flex;flex-direction:column;gap:10px}
body.beta-theme .hist-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;flex-wrap:wrap}
body.beta-theme .hist-thumb{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--card2)}
body.beta-theme .hist-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:140px}
body.beta-theme .hist-info b{font-size:14.5px;color:var(--txt)}
body.beta-theme .hist-fecha{font-size:12px;color:var(--dim)}
body.beta-theme .hist-acciones{display:flex;gap:8px;flex:none;margin-left:auto}
@media(max-width:480px){body.beta-theme .hist-acciones{width:100%;margin-left:0}body.beta-theme .hist-acciones a{flex:1;justify-content:center}}
.sp-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;border:2px solid transparent;cursor:pointer;background:var(--card2)}
.sp-item input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:2}
.sp-item .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px}
.sp-item:has(input:checked){border-color:var(--acc)}
.sp-item:has(input:checked)::after{content:"✓";position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

/* ============================================================
   MI CUENTA — adaptaciones al tema oscuro
   Las tarjetas de Boost y "Disponible ahora" vienen de snippets
   con estilo claro (tema viejo). Aca se re-visten sin tocarlos.
   ============================================================ */
body.beta-theme .acct .period{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
body.beta-theme .acct .period::-webkit-scrollbar{display:none}
body.beta-theme .acct .period a{flex:1;min-width:64px;text-align:center;font-size:12.5px;font-weight:600;color:var(--mut);border-radius:8px;padding:9px 10px;text-decoration:none;white-space:nowrap;transition:.15s}
body.beta-theme .acct .period a[aria-selected="true"]{background:var(--flag-blue2);color:#fff}
body.beta-theme .acct .period a:hover{color:#fff}
body.beta-theme .acct-nav a{flex:none;font-size:13.5px;font-weight:600;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
body.beta-theme .acct-nav a:hover{color:#fff}
body.beta-theme .acct-nav a[aria-current="page"]{background:var(--acc);border-color:var(--acc);color:#fff}
body.beta-theme .stats-note{font-size:12.5px;color:var(--dim);text-align:center;margin:-6px 0 14px}
body.beta-theme .pubstate.is-alerta{border-color:rgba(248,113,113,.4)}
body.beta-theme .pubstate.is-alerta .ps-days{color:var(--nor)}
body.beta-theme .pubstate.is-sin .ps-t{color:var(--mut)}
body.beta-theme .logout-btn{display:inline-block;text-decoration:none}

/* --- Tarjeta de BOOST (viene del snippet, estilo claro) --- */
body.beta-theme .acct .cap-boost-card,
body.beta-theme .acct [class*="boost-card"]{
  background:linear-gradient(135deg,rgba(201,24,74,.16),rgba(63,127,214,.12)) !important;
  border:1px solid rgba(201,24,74,.35) !important;
  border-radius:var(--r) !important;
  color:var(--txt) !important;
  box-shadow:none !important
}
body.beta-theme .acct [class*="boost"] h2,
body.beta-theme .acct [class*="boost"] h3,
body.beta-theme .acct [class*="boost"] b,
body.beta-theme .acct [class*="boost"] strong{color:var(--txt) !important}
body.beta-theme .acct [class*="boost"] p{color:var(--mut) !important}
body.beta-theme .acct [class*="boost"] button,
body.beta-theme .acct [class*="boost"] .button{
  background:var(--acc) !important;border:none !important;color:#fff !important;
  border-radius:11px !important;font-weight:700 !important
}

/* --- Tarjeta "Disponible ahora" (snippet propio) --- */
body.beta-theme .ca-disp-card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r) !important
}
body.beta-theme .ca-disp-card.is-on{border-color:rgba(34,197,94,.4) !important}
body.beta-theme .ca-disp-head{color:var(--txt)}
body.beta-theme .ca-disp-head b{color:var(--txt)}
body.beta-theme .ca-disp-desc{color:var(--mut) !important}
body.beta-theme .ca-disp-desc b{color:var(--txt)}
body.beta-theme .ca-disp-timer{color:#4ade80 !important}
body.beta-theme .ca-disp-off{color:var(--dim) !important;border-color:var(--line) !important;background:none !important}
body.beta-theme .ca-disp-off:hover{color:var(--nor) !important;border-color:rgba(248,113,113,.4) !important}
body.beta-theme .ca-disp-msg{color:var(--mut) !important}
body.beta-theme .ca-disp-dot{background:var(--dim)}
body.beta-theme .ca-disp-card.is-on .ca-disp-dot{background:#22c55e}


/* ============================================================
   LOGIN — ayudas de usabilidad (jul-2026)
   ============================================================ */
body.beta-theme .caps-warn{
  margin-top:8px;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--gold);background:rgba(227,179,76,.12);border:1px solid rgba(227,179,76,.35)
}
body.beta-theme .pw-hint{margin-top:7px;font-size:12.5px;color:var(--dim);line-height:1.45}
body.beta-theme .pw-hint b{color:var(--mut)}
/* Tras un intento fallido: recuperar deja de ser un link chico */
body.beta-theme .recover-box{
  margin-top:18px;padding:15px;border-radius:13px;text-align:center;
  background:rgba(63,127,214,.09);border:1px solid rgba(63,127,214,.3)
}
body.beta-theme .recover-box p{font-size:13.5px;color:var(--mut);margin-bottom:11px;line-height:1.5}
body.beta-theme .recover-btn{
  display:block;width:100%;font-size:15px;font-weight:700;color:#fff;
  background:var(--flag-blue2);border-radius:11px;padding:13px;text-decoration:none;transition:.15s
}
body.beta-theme .recover-btn:hover{background:#5a94e0;color:#fff}

/* ============================================================
   CAMBIAR CONTRASEÑA — re-vestido oscuro (el snippet trae estilo claro)
   ============================================================ */
body.beta-theme .ca-clave-card{
  background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--r) !important
}
body.beta-theme .ca-clave-toggle{color:var(--txt)}
body.beta-theme .ca-clave-head b{color:var(--txt)}
body.beta-theme .ca-clave-chev{color:var(--mut)}
body.beta-theme .ca-clave-field label{color:var(--txt)}
body.beta-theme .ca-clave-wrap input{
  background:var(--card2) !important;border:1px solid var(--line) !important;
  color:var(--txt) !important;border-radius:11px !important
}
body.beta-theme .ca-clave-wrap input:focus{outline:none;border-color:var(--flag-blue2) !important}
body.beta-theme .ca-clave-ver{color:var(--flag-blue2) !important}
body.beta-theme .ca-clave-reglas{
  background:var(--card2) !important;border:1px solid var(--line);border-radius:11px !important
}
body.beta-theme .ca-clave-reglas li{color:var(--dim) !important}
body.beta-theme .ca-clave-reglas li.ok{color:#4ade80 !important}
body.beta-theme .ca-clave-reglas li.ok .ca-tick{color:#22c55e !important}
body.beta-theme .ca-clave-btn{
  background:var(--flag-blue2) !important;color:#fff !important;border-radius:11px !important
}
body.beta-theme .ca-clave-btn:disabled{background:var(--card2) !important;color:var(--dim) !important}
body.beta-theme .ca-clave-msg.err{color:var(--nor) !important}
body.beta-theme .ca-clave-msg.ok{color:#4ade80 !important}


/* ============================================================
   Mi Cuenta: menu lateral SOLO en escritorio
   ------------------------------------------------------------
   Bug jul-2026: estas reglas estaban sueltas, sin @media, asi que
   en el celular el menu se apilaba vertical (5 botones = media
   pantalla) Y quedaba fijo flotando encima del contenido al bajar.
   Ademas .acct-body nunca tuvo 2 columnas, asi que la "barra
   lateral" tampoco existia en escritorio: era una barra a todo el
   ancho por la que el contenido pasaba por debajo.
   En movil el menu vuelve a ser pills con scroll horizontal (que
   es lo que el JS de la flechita ya esperaba).
   ============================================================ */
@media(min-width:900px){
  body.beta-theme .acct-body{grid-template-columns:232px minmax(0,1fr);align-items:start}
  body.beta-theme .nav-wrap{position:sticky;top:calc(var(--hh) + 18px)}
  body.beta-theme .nav-wrap::after,
  body.beta-theme .nav-more{display:none}
  body.beta-theme .acct-nav{flex-direction:column;overflow:visible}
  body.beta-theme .acct-nav a{justify-content:flex-start;border-radius:12px;padding:12px 15px;width:100%}
}


/* ============================================================
   Perfil: aviso "Sin reportes / No verificada" (jul-2026)
   ------------------------------------------------------------
   Mismo ambar (--gold) que la etiqueta del listado (.p-sin) y el
   mismo patron visual que .approve-note, para hablar el mismo
   idioma en todo el sitio. NUNCA rojo: rojo es No Recomendable
   (le fue mal a alguien), esto es "nadie ha opinado aun".
   ============================================================ */
.p-noverif{display:flex;gap:11px;align-items:flex-start;background:rgba(227,179,76,.1);border:1px solid rgba(227,179,76,.3);border-radius:12px;padding:14px 16px;margin:0 16px 14px}
.pnv-ico{font-size:18px;line-height:1;flex:none;margin-top:1px}
/* Prefijo body.beta-theme .p-noverif (no solo .pnv-h): la regla generica
   "body.beta-theme .perfil p{color:var(--mut)}" (linea 673) tiene mas
   especificidad que un simple ".pnv-h" y lo pisaria. Detectado en vivo. */
body.beta-theme .p-noverif .pnv-h{font-size:14px;font-weight:700;color:var(--gold);margin:0 0 4px}
body.beta-theme .p-noverif .pnv-b{font-size:13px;color:var(--gold);opacity:.9;line-height:1.5;margin:0}


/* ============================================================
   Barra de administrador de WordPress (jul-2026)
   ------------------------------------------------------------
   Solo la ven usuarios logueados con la barra activada (Nico y
   cualquier escort/agencia que no la haya desactivado en su
   perfil) — nunca un visitante normal. Sin esto, la barra negra
   de WP (z-index mucho mas alto que el nuestro) tapa el header
   completo, porque ambos son position:fixed;top:0.
   WordPress ya empuja el contenido normal hacia abajo solo (por
   eso NO tocamos --hh ni el padding-top de main: haria doble
   espacio). Lo unico que necesita ajuste manual son los elementos
   fixed/sticky propios, que WP no sabe que existen.
   Alturas oficiales de la barra: 46px en movil (<=782px), 32px
   en escritorio (>782px) - mismo corte que usa WordPress mismo.
   ============================================================ */
body.admin-bar .site-head{top:46px}
body.admin-bar .filters{top:calc(var(--hh) + 46px)}
@media screen and (min-width:783px){
  body.admin-bar .site-head{top:32px}
  body.admin-bar .filters{top:calc(var(--hh) + 32px)}
}


/* ============================================================
   SUBIR REPORTE (jul-2026)
   ------------------------------------------------------------
   Formulario largo dividido en 4 tarjetas numeradas; la
   evaluacion detallada va plegada porque es opcional.
   Las clases base (.form-wrap .form-card .field .inp .sel .ta
   .submit-btn .hint .phone-wrap .phone-pre) YA existian de
   Anunciate/Ingresar: aqui solo van las nuevas.
   ============================================================ */
.form-card>h2,.eval-details summary{font-family:'Bricolage Grotesque','Outfit',sans-serif;font-size:16.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.fc-sub{font-size:12.5px;color:var(--dim);margin-bottom:15px}
.fc-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-size:13px;font-weight:700;flex:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Resultado de la busqueda por telefono. pr-found / pr-new son
   modificadores DEL CONTENEDOR (se aplican con :class de Vue). */
.phone-result{margin-top:10px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);font-size:13.5px}
.phone-result.pr-new{background:rgba(63,127,214,.08);border-color:rgba(63,127,214,.35)}
.phone-result.pr-found{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.35)}
.pr-msg{display:flex;align-items:center;gap:7px;font-weight:600;margin:0 0 10px}
.pr-msg:last-child{margin-bottom:0}
.pr-new .pr-msg{color:var(--flag-blue2)}
.pr-found .pr-msg{color:var(--exc)}
.pr-pills{display:flex;flex-wrap:wrap;gap:8px}
/* La pill es un <label> con el radio real adentro: se oculta el radio
   (sigue existiendo para el teclado y para el POST) y se pinta la pill. */
/* OJO: el modificador es .is-sel, NO .sel — .sel ya esta ocupado por los <select>
   (body.beta-theme .sel) y esa regla gana por especificidad. */
.pr-pill{position:relative;font:inherit;font-size:13.5px;font-weight:600;color:var(--txt);background:var(--card2);border:1.5px solid var(--exc);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center}
.pr-pill input{position:absolute;opacity:0;width:0;height:0;margin:0}
.pr-pill:hover{background:rgba(74,222,128,.15)}
.pr-pill.is-sel{background:var(--exc);color:#04350f;border-color:var(--exc)}
.pr-pill input:focus-visible+span{outline:2px solid var(--flag-blue2);outline-offset:3px;border-radius:4px}
.pr-pill-otra{border-color:var(--line);color:var(--mut)}
.pr-pill-otra:hover{background:rgba(147,178,255,.1)}
.pr-pill-otra.is-sel{background:var(--flag-blue2);color:#fff;border-color:var(--flag-blue2)}
.pr-name-hint{font-size:11.5px;color:var(--dim);margin-top:5px}

/* Evaluacion detallada: plegable */
.opt-tag{font-size:11px;font-weight:600;color:var(--flag-blue2);background:rgba(63,127,214,.15);padding:2px 9px;border-radius:999px}
.eval-details summary{list-style:none;cursor:pointer}
.eval-details summary::-webkit-details-marker{display:none}
.ed-chev{margin-left:auto;font-size:20px;line-height:1;color:var(--mut);transition:transform .2s}
.eval-details[open] .ed-chev{transform:rotate(180deg)}
.eval-list{margin-top:6px}
.eval-item{padding:12px 0;border-bottom:1px solid var(--line)}
.eval-item:last-child{border-bottom:none;padding-bottom:0}
.ei-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ei-label{font-size:14.5px;font-weight:500;flex:1}
/* PREFIJO body.beta-theme OBLIGATORIO: estos inputs llevan tambien la clase .inp,
   y "body.beta-theme .inp{width:100%}" (especificidad 0,2,1) le gana a ".ei-note"
   (0,1,0). Sin el prefijo el campo de nota se estira a todo el ancho y la fila
   queda descuadrada. Misma leccion que la colision de .sel — ver trampa #9. */
body.beta-theme .ei-note{width:80px;flex:none;text-align:center;padding:10px 8px}
body.beta-theme .ei-com{font-size:13.5px;padding:9px 11px}

@media(max-width:520px){
  .grid-2{grid-template-columns:1fr;gap:15px}
}


/* ============================================================
   PUBLICATE (jul-2026)
   ------------------------------------------------------------
   Selector escort/agencia + chips de servicios. El resto de las
   clases (.form-wrap .form-card .field .inp .sel .ta .grid-2
   .fc-num .fc-sub .phone-wrap) ya existian.
   El selector son radios reales: el resaltado lo hace el CSS con
   input:checked + span, sin depender de JavaScript.
   ============================================================ */
.utype{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;margin-bottom:22px}
.ut-opt{flex:1;position:relative}
.ut-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.ut-opt span{display:block;text-align:center;padding:13px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--mut);transition:background .15s,color .15s}
.ut-opt input:checked + span{background:var(--acc);color:#fff}
.serv-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.serv-chip{position:relative}
.serv-chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.serv-chip span{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card2);font-size:13.5px;color:var(--mut);transition:.15s;height:100%}
.serv-chip span::before{content:"";width:17px;height:17px;border-radius:5px;border:1.5px solid var(--dim);flex:none;transition:.15s;background-repeat:no-repeat;background-position:center;background-size:12px}
.serv-chip input:checked + span{border-color:var(--acc);color:var(--txt);background:#22182099}
.serv-chip input:checked + span::before{background-color:var(--acc);border-color:var(--acc);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")}
/* Aviso de imagenes demasiado pesadas: el backend las descarta en
   silencio sobre 1MB, asi que el aviso tiene que ser imposible de ignorar. */
.img-warn{margin-top:4px;padding:12px 14px;border-radius:11px;font-size:13px;line-height:1.5;color:var(--gold);background:rgba(227,179,76,.12);border:1px solid rgba(227,179,76,.35)}
@media(max-width:520px){
  .serv-grid{grid-template-columns:1fr}
}


/* ============================================================
   Campo "¿Donde la viste?" — ayuda de link (jul-2026)
   ------------------------------------------------------------
   El https:// se completa solo al salir del campo. Estos estilos
   son el semaforo visual mientras escribe.
   ============================================================ */
body.beta-theme .hint-ok{color:var(--exc)}
body.beta-theme .hint-mal{color:var(--gold)}
body.beta-theme .inp.ok{border-color:rgba(74,222,128,.55)}
body.beta-theme .inp.mal{border-color:rgba(227,179,76,.55)}


/* ============================================================
   "Disponible ahora" MAS NOTORIO (jul-2026)
   ------------------------------------------------------------
   El halo anterior (availpulse) era demasiado sutil: Nico lo
   describio como "tibio". Dura solo 2 horas y es lo que la
   escort activa para conseguir clientes AHORA, asi que tiene
   que ganarse la mirada. Se refuerza en 3 capas:
     1. el punto late (escala + halo mas amplio)
     2. un anillo verde que se expande y desvanece
     3. mayor contraste del punto
   Se respeta prefers-reduced-motion.
   ============================================================ */
.avail{position:relative}
body.beta-theme .avail{
  width:18px;height:18px;background:#22c55e;
  border:2.5px solid rgba(0,0,0,.5);
  box-shadow:0 0 10px rgba(34,197,94,.9);
  animation:availlate 1.5s ease-in-out infinite
}
/* Anillo que se expande: es lo que de verdad llama la atencion de reojo */
body.beta-theme .avail::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(74,222,128,.85);
  animation:availanillo 1.5s ease-out infinite;
  pointer-events:none
}
@keyframes availlate{
  0%,100%{transform:scale(1);box-shadow:0 0 10px rgba(34,197,94,.9)}
  50%{transform:scale(1.18);box-shadow:0 0 16px rgba(34,197,94,1)}
}
@keyframes availanillo{
  0%{transform:scale(.8);opacity:.9}
  80%{transform:scale(2.1);opacity:0}
  100%{transform:scale(2.1);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body.beta-theme .avail{animation:none}
  body.beta-theme .avail::after{animation:none;opacity:.5}
}

/* ---- Pill "Disponibles ahora" en la fila de temas ---- */
body.beta-theme .chip-disp{
  color:#4ade80;background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.45);
  display:inline-flex;align-items:center;gap:7px
}
body.beta-theme .chip-disp:hover{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.7)}
body.beta-theme .chip-disp[aria-pressed="true"]{
  background:#22c55e;border-color:#22c55e;color:#04350f
}
.cd-dot{
  width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 8px rgba(34,197,94,.9);
  animation:availlate 1.5s ease-in-out infinite
}
body.beta-theme .chip-disp[aria-pressed="true"] .cd-dot{background:#04350f;box-shadow:none}
.cd-n{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:rgba(34,197,94,.25);color:#4ade80
}
body.beta-theme .chip-disp[aria-pressed="true"] .cd-n{background:rgba(0,0,0,.22);color:#04350f}
@media(prefers-reduced-motion:reduce){.cd-dot{animation:none}}


/* ============================================================
   Modal de confirmacion del BOOST — re-vestido oscuro (jul-2026)
   ------------------------------------------------------------
   Viene del snippet "Sistema de Boosts - Frontend Panel Modelo"
   (id 18), que trae estilo CLARO: sobre el tema oscuro salia un
   cuadro blanco con el texto casi ilegible.
   NO se toca el snippet (es logica de negocio que da plata): solo
   se re-viste desde aqui, igual que la tarjeta de Boost.
   Se usa !important porque el snippet inyecta su propio <style>
   despues del nuestro.
   ============================================================ */
body.beta-theme .cap-boost-modal-box{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85) !important;
  color:var(--txt) !important;
  max-width:340px !important
}
body.beta-theme .cap-boost-modal-title{
  color:var(--txt) !important;
  font-size:17px !important
}
body.beta-theme .cap-boost-modal-title strong{color:var(--txt) !important}
body.beta-theme .cap-boost-modal-body{
  color:var(--mut) !important;
  font-size:13.5px !important;line-height:1.55 !important
}
body.beta-theme .cap-boost-modal-body strong{color:var(--txt) !important}
/* El overlay de fondo, por si el snippet lo deja claro */
body.beta-theme .cap-boost-modal{
  background:rgba(6,8,12,.82) !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}
/* Botones: cancelar en secundario (no debe competir), confirmar en la marca */
body.beta-theme .cap-boost-cancel{
  background:var(--card2) !important;
  color:var(--mut) !important;
  border:1px solid var(--line) !important;
  border-radius:11px !important;
  font-weight:600 !important
}
body.beta-theme .cap-boost-cancel:hover{
  background:#222a3d !important;color:var(--txt) !important
}
body.beta-theme .cap-boost-confirm{
  background:var(--acc) !important;
  color:#fff !important;
  border:1px solid var(--acc) !important;
  border-radius:11px !important;
  font-weight:700 !important
}
body.beta-theme .cap-boost-confirm:hover{filter:brightness(1.08)}


/* ============================================================
   Datos del hero del index: MENOS PROTAGONISMO (jul-2026)
   ------------------------------------------------------------
   Eran 3 pastillas con caja y borde, y quedaban como lo primero
   que se veia, compitiendo con el H1. Nico pidio bajarles el
   volumen sin sacarlas: el "N+ reportes verificados" es lo que
   diferencia el sitio de la competencia y sostiene la visita.
   Ahora es una linea de datos discreta, separada por puntos.
   ⚠️ TODO cuelga de .stats-hero: .stats/.stat SIN ese prefijo
   son las tarjetas de Mi Cuenta (visualizaciones, clics). No
   restilar .stat a secas: rompe el panel de las modelos.
   ============================================================ */
body.beta-theme .stats-hero{
  gap:0 14px;row-gap:4px;margin-top:12px;align-items:baseline
}
body.beta-theme .stats-hero .stat{
  background:none;border:none;border-radius:0;padding:0;
  font-size:12px;color:var(--dim);gap:5px
}
body.beta-theme .stats-hero .stat b{
  color:var(--mut);font-weight:600
}
/* Separador sutil entre datos, en vez de tres cajas */
body.beta-theme .stats-hero .stat + .stat::before{
  content:"·";color:var(--line);margin-right:9px
}
body.beta-theme .stats-hero .stat .dot{
  width:5px;height:5px;opacity:.75
}


/* ============================================================
   Mi Cuenta en MOVIL: corregir desborde horizontal (jul-2026)
   ------------------------------------------------------------
   Sintoma (Nico, 24-jul): dentro de la cuenta las cajas se salian
   de la pantalla del telefono y los textos quedaban cortados.
   CAUSA RAIZ, medida a 342px: no eran las tarjetas. Una columna de
   grid vale por defecto min-width:auto, o sea crece hasta el
   contenido mas ancho que tenga adentro. La fila de periodos
   (.period, con 5 botones de min-width:64px) mide 354px de
   contenido minimo, asi que estiraba TODA la columna a 356px
   dentro de una pantalla de 342 => se desbordaba el panel entero,
   incluidas las tarjetas de Boost y Disponible que vienen de
   snippets. El scrollWidth del documento daba 372 vs 342.
   FIX: minmax(0,1fr) deja que la columna se encoja; ahi el
   overflow-x:auto que .period ya tenia por fin funciona y la fila
   scrollea sola en vez de empujar el resto.
   ============================================================ */
body.beta-theme .acct-body{grid-template-columns:minmax(0,1fr)}
body.beta-theme .acct .period{min-width:0}

/* Las 3 metricas: en movil como grilla de 3 columnas compactas.
   Como pastillas horizontales median ~165px cada una y no cabian
   dos por fila (contenedor util = 310px). */
@media(max-width:560px){
  body.beta-theme .acct .stats{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px
  }
  body.beta-theme .acct .stat{
    flex-direction:column;align-items:center;justify-content:flex-start;
    text-align:center;gap:2px;padding:11px 5px;border-radius:13px;min-width:0
  }
  body.beta-theme .acct .stat .ico{font-size:19px}
  body.beta-theme .acct .stat b{font-size:16px;line-height:1.15}
  body.beta-theme .acct .stat span{font-size:10.5px;line-height:1.25}
}

/* Las tarjetas que vienen de snippets (Boost, Disponible ahora) traen
   sus propios anchos: se las obliga a respetar el ancho del panel para
   que no vuelvan a cortar el texto. */
body.beta-theme .acct .cap-boost-card,
body.beta-theme .acct .ca-disp-card,
body.beta-theme .acct .ca-clave-card{max-width:100% !important;box-sizing:border-box !important}
body.beta-theme .acct .cap-boost-card *,
body.beta-theme .acct .ca-disp-card *{max-width:100%;box-sizing:border-box}