/* ============ SISTEMA ============ */
:root{
  --bg:#09090e; --bg-2:#0f0f16; --bg-3:#15151f;
  --ink:#ffffff; --ink-2:#e8e8f2;
  --mute:#9c9cb4; --mute-2:#6b6b84;
  --accent:#b537f2; --accent-hover:#c964ff; --accent-soft:rgba(181,55,242,.14);
  --ok:#2fd6a5;                     /* solo semántico: dato publicado */
  --warn:#f2a03d;                   /* solo semántico: promesa sin respaldo */
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --r:14px; --r-lg:20px;
  --max:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fdisp:'Sora',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --fbody:'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--fbody); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3{font-family:var(--fdisp); color:var(--ink); margin:0; letter-spacing:-.035em; line-height:1.02; font-weight:800}
h1{font-size:clamp(2.4rem,5.8vw,4.5rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.18rem; letter-spacing:-.02em; line-height:1.25; font-weight:600}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px}
@media(min-width:760px){.wrap{padding-inline:40px}}
@media(min-width:1100px){.wrap{padding-inline:56px}}
section{padding-block:clamp(64px,9vw,120px)}
.eyebrow{
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-hover); font-weight:600; margin-bottom:var(--s2);
}
.lead{color:var(--mute); font-size:clamp(1rem,1.6vw,1.18rem); max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-hover); outline-offset:3px; border-radius:4px}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--fbody); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
  padding:17px 32px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  min-height:52px; transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 40px -12px rgba(181,55,242,.7)}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-2px)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.tlink{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:500; font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.24); padding-bottom:3px; transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tlink:hover{border-color:var(--accent-hover); color:var(--accent-hover)}
.tlink:hover .arw{transform:translateX(4px)}

/* ============ HEADER ============ */
.hdr{position:sticky; top:0; z-index:100; background:rgba(9,9,14,.72); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line-soft); transition:background .3s var(--ease),border-color .3s var(--ease)}
.hdr.scrolled{background:rgba(9,9,14,.96); border-color:var(--line)}
.hdr-in{display:flex; align-items:center; gap:var(--s4); height:72px}
.logo{font-family:var(--fdisp); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; line-height:1; color:#fff; display:flex; align-items:center; gap:10px}
/* el punto del logo es el testigo de "grabando": rojo y titilando */
.logo .dot{
  display:inline-block; width:9px;height:9px;border-radius:50%;background:#ff3b30;
  box-shadow:0 0 0 4px rgba(255,59,48,.16), 0 0 10px rgba(255,59,48,.7); flex:none;
  animation:rec 1.6s ease-in-out infinite;
}
@keyframes rec{
  0%,100%{opacity:1;   box-shadow:0 0 0 4px rgba(255,59,48,.16), 0 0 10px rgba(255,59,48,.7)}
  50%    {opacity:.35; box-shadow:0 0 0 4px rgba(255,59,48,.05), 0 0 4px rgba(255,59,48,.25)}
}
@media (prefers-reduced-motion:reduce){ .logo .dot{animation:none} }
.logo span{color:var(--accent-hover)}
.nav{display:none; gap:var(--s4); margin-left:auto; align-items:center}
.nav a{font-size:.94rem; color:var(--mute); font-weight:500; transition:color .25s var(--ease)}
.nav a:hover{color:var(--ink)}
.hdr-cta{display:none}
@media(min-width:1040px){ .nav{display:flex} .hdr-cta{display:inline-flex; padding:12px 22px; min-height:44px; font-size:.9rem} }
.burger{margin-left:auto; width:44px;height:44px; display:grid; place-items:center; background:none; border:1px solid var(--line); border-radius:11px; cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1040px){.burger{display:none}}
.mnav{
  position:fixed; inset:0; z-index:99; background:var(--bg); padding:96px 24px 40px;
  display:flex; flex-direction:column; gap:var(--s1); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mnav.open{opacity:1; visibility:visible; transform:none}
.mnav a{font-family:var(--fdisp); font-size:1.6rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); padding:14px 0; border-bottom:1px solid var(--line-soft)}
.mnav .btn{margin-top:var(--s3)}
body.locked{overflow:hidden}

/* ============ HERO ============ */
.hero{position:relative; overflow:hidden; padding-block:clamp(64px,10vw,116px) clamp(56px,7vw,88px)}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.ring{
  position:absolute; top:-24%; left:50%; transform:translateX(-50%);
  width:min(1180px,148vw); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(181,55,242,.22);
  background:radial-gradient(circle at 50% 42%, rgba(181,55,242,.20) 0%, rgba(181,55,242,.05) 38%, transparent 62%);
}
.ring::after{content:""; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(181,55,242,.14)}
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 74% 58% at 50% 34%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 74% 58% at 50% 34%,#000 20%,transparent 78%);
}
.hero-in{position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero h1{max-width:17ch; margin-bottom:var(--s3); text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--accent-hover)}
.hero .lead{margin-bottom:var(--s5); text-wrap:pretty}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:center; margin-bottom:var(--s6)}

/* buscador */
.finder{
  width:100%; max-width:940px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s2); backdrop-filter:blur(10px);
  display:grid; gap:var(--s2); text-align:left;
}
@media(min-width:860px){.finder{grid-template-columns:1fr 1fr auto; align-items:end; padding:var(--s3)}}
.field label{display:block; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-2); font-weight:600; margin-bottom:9px}
.field select{
  width:100%; appearance:none; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--fbody); font-size:1.02rem; font-weight:500; padding:10px 30px 12px 2px;
  cursor:pointer; transition:border-color .25s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c9cb4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}
.field select:hover,.field select:focus{border-color:var(--accent-hover)}
.field option{background:var(--bg-3); color:var(--ink)}
.finder .btn{width:100%}
@media(min-width:860px){.finder .btn{width:auto}}
.cities-quick{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; margin-top:var(--s4)}
.chip{
  font-size:.86rem; color:var(--mute); padding:9px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.02); transition:all .25s var(--ease);
  font-family:var(--fbody);
}
.chip:hover{color:var(--ink); border-color:rgba(181,55,242,.5); background:var(--accent-soft)}
.chip[aria-pressed="true"]{color:#fff; border-color:rgba(181,55,242,.7); background:var(--accent-soft)}

/* señales */
.signals{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s3); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line-soft); width:100%}
@media(min-width:760px){.signals{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:center}}
.signal{text-align:center; min-width:0}
.signal b{display:block; font-family:var(--fdisp); font-size:1.9rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1}
.signal span{font-size:.78rem; color:var(--mute-2); letter-spacing:.04em}

/* ============ SECCIÓN HEAD ============ */
.shead{max-width:70ch; margin-bottom:clamp(40px,5vw,64px)}
.shead.center{margin-inline:auto; text-align:center}
.shead h2{margin-bottom:var(--s3); text-wrap:balance}

/* ============ HALLAZGOS ============ */
.findings{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden}
@media(min-width:640px){.findings{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.findings{grid-template-columns:repeat(4,1fr)}}
/* seis ciudades caben en 3+3; con cuatro columnas la segunda fila queda coja */
@media(min-width:1000px){.findings.cols3{grid-template-columns:repeat(3,1fr)}}
.finding{background:var(--bg-2); padding:clamp(26px,3vw,34px)}
.finding b{display:block; font-family:var(--fdisp); font-size:clamp(2.4rem,4.4vw,3.1rem); font-weight:800; color:var(--ink); letter-spacing:-.045em; line-height:1; margin-bottom:12px}
.finding b i{font-style:normal; font-size:1.05rem; color:var(--mute-2); letter-spacing:-.01em}
.finding strong{display:block; color:var(--ink); font-weight:600; font-size:1rem; margin-bottom:6px}
/* en /ciudades/ el bloque encabeza con h3 (nombre de ciudad) en vez del número grande */
.finding h3{font-family:var(--fdisp); font-size:1.25rem; font-weight:700; color:var(--ink); letter-spacing:-.025em; line-height:1.2; margin-bottom:10px}
.finding .tlink{margin-top:14px}
.finding p{color:var(--mute); font-size:.92rem; line-height:1.55}
.note{margin-top:var(--s4); color:var(--mute-2); font-size:.9rem; max-width:78ch}

/* ============ QUÉ REVISAR ============ */
.criteria{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden}
@media(min-width:640px){.criteria{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.criteria{grid-template-columns:repeat(3,1fr)}}
.crit{background:var(--bg); padding:clamp(26px,3vw,36px); transition:background .3s var(--ease)}
.crit:hover{background:var(--bg-2)}
.crit .ic{width:38px;height:38px; color:var(--accent-hover); margin-bottom:var(--s3)}
.crit h3{margin-bottom:10px}
.crit p{color:var(--mute); font-size:.96rem; line-height:1.6}

/* ============ ESTUDIOS ============ */
.filters{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin-bottom:var(--s4)}
.count{color:var(--mute-2); font-size:.88rem; margin-left:auto}
.studios{display:grid; gap:var(--s3)}
@media(min-width:700px){.studios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.studios{grid-template-columns:repeat(3,1fr)}}
.card{
  position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3);
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.card:hover{transform:translateY(-6px); border-color:rgba(181,55,242,.42); background:var(--bg-3)}
.card[hidden]{display:none}
.card-top{display:flex; align-items:flex-start; gap:14px}
.mark{
  width:52px;height:52px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(181,55,242,.24),rgba(181,55,242,.06));
  border:1px solid rgba(181,55,242,.3);
  font-family:var(--fdisp); font-weight:800; font-size:1.02rem; color:#fff; letter-spacing:-.03em;
}
.card-top .meta{min-width:0}
.card h3{margin-bottom:4px; overflow-wrap:anywhere}
.loc{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--mute-2)}
.loc svg{width:14px;height:14px; flex:none}
.tscore{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--mute); font-weight:500}
.bars{display:flex; gap:3px; flex:none}
.bars i{width:13px; height:5px; border-radius:2px; background:rgba(255,255,255,.12)}
.bars i.on{background:var(--ok)}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); padding-block:var(--s3); border-block:1px solid var(--line-soft)}
.stat span{display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2); margin-bottom:5px}
.stat b{font-family:var(--fdisp); font-size:1.16rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.15; display:block}
.stat b.na{font-family:var(--fbody); font-size:.92rem; font-weight:500; color:var(--mute-2); letter-spacing:0}
.rowline{font-size:.9rem; color:var(--mute)}
.rowline b{color:var(--ink-2); font-weight:600}
.claim{display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:var(--mute); border-left:2px solid var(--warn); padding-left:12px}
.claim svg{width:15px;height:15px;color:var(--warn);flex:none;margin-top:4px}
.perks{display:flex; flex-wrap:wrap; gap:7px}
.perk{font-size:.75rem; color:var(--mute); border:1px solid var(--line); padding:5px 11px; border-radius:8px; background:rgba(255,255,255,.02)}
.src{margin-top:auto; padding-top:var(--s2); border-top:1px solid var(--line-soft); font-size:.76rem; color:var(--mute-2); line-height:1.5}
.card-links{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center}
.card-links .claimit{font-size:.8rem; color:var(--mute-2); border-bottom:1px dashed rgba(255,255,255,.2); padding-bottom:2px}
.card-links .claimit:hover{color:var(--accent-hover); border-color:var(--accent-hover)}
.empty{color:var(--mute); border:1px dashed var(--line); border-radius:var(--r-lg); padding:var(--s5); text-align:center}
.empty[hidden]{display:none}

/* ============ COMPARADOR ============ */
.compare-wrap{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); overflow-x:auto; -webkit-overflow-scrolling:touch}
table.cmp{width:100%; min-width:880px; border-collapse:collapse; font-size:.93rem}
table.cmp th,table.cmp td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.cmp thead th{font-family:var(--fbody); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); font-weight:600; background:rgba(255,255,255,.025); position:sticky; top:0; white-space:nowrap}
table.cmp tbody th{font-family:var(--fdisp); font-weight:600; color:var(--ink); font-size:.98rem; letter-spacing:-.02em; white-space:nowrap}
table.cmp td{color:var(--ink-2)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:rgba(255,255,255,.02)}
table.cmp .yes{color:var(--ok); font-weight:600}
table.cmp .no{color:var(--mute-2)}
.scroll-hint{font-size:.78rem; color:var(--mute-2); margin-top:12px; display:flex; align-items:center; gap:7px}
@media(min-width:940px){.scroll-hint{display:none}}

/* ============ METODOLOGÍA ============ */
.method{background:var(--bg-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.method-in{display:grid; gap:clamp(40px,5vw,72px); align-items:start}
@media(min-width:940px){.method-in{grid-template-columns:1fr 1.08fr}}
.steps{display:flex; flex-direction:column; gap:var(--s3)}
.step{display:flex; gap:16px; align-items:flex-start}
.step .n{
  width:30px;height:30px;flex:none;border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(181,55,242,.4); background:var(--accent-soft); color:var(--accent-hover);
  font-family:var(--fdisp); font-weight:800; font-size:.82rem;
}
.step b{display:block; color:var(--ink); font-weight:600; font-size:1rem; margin-bottom:3px}
.step p{color:var(--mute); font-size:.93rem; line-height:1.55}
.databox{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,40px); background:var(--bg-3)}
.databox h3{margin-bottom:var(--s2)}
.databox p{color:var(--mute); font-size:.95rem; margin-bottom:var(--s3)}
.databox p:last-of-type{margin-bottom:0}
.databox .mail{color:var(--accent-hover); font-weight:600; overflow-wrap:anywhere}

/* ============ CTA DUAL ============ */
.dual{display:grid; gap:var(--s3)}
@media(min-width:860px){.dual{grid-template-columns:1.05fr .95fr}}
.panel{border-radius:var(--r-lg); padding:clamp(32px,4vw,56px); border:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start}
.panel.a{background:linear-gradient(150deg,rgba(181,55,242,.2),rgba(181,55,242,.04) 58%),var(--bg-2); border-color:rgba(181,55,242,.35)}
.panel.b{background:var(--bg-2)}
.panel h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.panel p{color:var(--mute); font-size:1rem}
.panel .free{font-size:.8rem; color:var(--mute-2)}

/* ============ FAQ ============ */
.faq{max-width:860px; margin-inline:auto; border-top:1px solid var(--line-soft)}
.q{border-bottom:1px solid var(--line-soft)}
.q button{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  background:none; border:0; color:var(--ink); font-family:var(--fdisp); font-weight:600; font-size:1.04rem;
  letter-spacing:-.02em; text-align:left; padding:26px 0; cursor:pointer;
}
.q .ind{width:22px;height:22px;flex:none;position:relative;margin-top:3px}
.q .ind::before,.q .ind::after{content:"";position:absolute;background:var(--accent-hover);border-radius:2px;transition:transform .3s var(--ease)}
.q .ind::before{top:10px;left:2px;width:18px;height:1.5px}
.q .ind::after{left:10.2px;top:2px;height:18px;width:1.5px}
.q[data-open="true"] .ind::after{transform:scaleY(0)}
.q .a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.q .a p{color:var(--mute); font-size:.97rem; padding-bottom:26px; max-width:68ch}
.q .a p+p{padding-bottom:26px; margin-top:-14px}

/* ============ FOOTER ============ */
footer{background:var(--bg-2); border-top:1px solid var(--line); padding-block:var(--s6) var(--s4)}
.fgrid{display:grid; gap:var(--s5); margin-bottom:var(--s6)}
@media(min-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.fgrid{grid-template-columns:1.5fr repeat(4,1fr)}}
.fcol h4{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2); margin:0 0 var(--s3); font-weight:600; font-family:var(--fbody)}
.fcol a{display:block; color:var(--mute); font-size:.92rem; padding:6px 0; transition:color .25s var(--ease); overflow-wrap:anywhere}
.fcol a:hover{color:var(--ink)}
.fcol .logo{margin-bottom:var(--s3)}
/* .fcol a{display:block} pisaba a .logo{display:flex} por especificidad y el punto
   rojo se quedaba inline: sin ancho ni alto, solo se veía su sombra como un cuadro. */
.fcol a.logo{display:flex; width:fit-content}
.fnote{color:var(--mute-2); font-size:.88rem; max-width:46ch; line-height:1.6}
.age{display:inline-flex; align-items:center; gap:9px; margin-top:var(--s3); border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:.78rem; color:var(--mute); font-weight:600; letter-spacing:.04em}
.age b{color:var(--ink); font-family:var(--fdisp)}
.fbot{border-top:1px solid var(--line-soft); padding-top:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); justify-content:space-between; color:var(--mute-2); font-size:.82rem}
.fbot span{max-width:62ch}

/* ============ REVEAL ============ */
/* menú según sesión. Solo se OCULTA, nunca se fuerza un display: así el enlace
   conserva el suyo (el del móvil es un botón). La clase la pone el script del head
   leyendo la cookie wc_rol, que lib.php escribe al entrar y borra al salir. */
html:not(.sesion) [data-auth="in"],
html:not(.rol-estudio) [data-auth="estudio"],
html.sesion [data-auth="anon"]{display:none !important}
.nav a.acc-on{color:var(--accent)}
.nav a.acc-on::before{content:""; display:inline-block; width:6px; height:6px; margin-right:7px;
  border-radius:50%; background:var(--accent); vertical-align:middle}

.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============ FICHA DE ESTUDIO ============ */
.crumb{font-size:.84rem; color:var(--mute-2); margin-bottom:var(--s4); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crumb a{color:var(--mute); border-bottom:1px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)}
.crumb a:hover{color:var(--ink); border-color:var(--accent-hover)}
.crumb b{color:var(--ink-2); font-weight:500}
.fhero{position:relative; padding-block:clamp(32px,5vw,52px) clamp(40px,5vw,64px); border-bottom:1px solid var(--line-soft);
  background:radial-gradient(ellipse 70% 130% at 12% 0%,rgba(181,55,242,.16),transparent 62%),var(--bg)}
.fhero h1{font-size:clamp(2.1rem,5vw,3.6rem); margin-bottom:var(--s3); text-wrap:balance}
.fhero .lead{margin-bottom:var(--s3)}
.tscore{display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--mute); font-weight:500}
.tscore.big{font-size:.92rem; color:var(--ink-2)}
.tscore.big .bars i{width:19px; height:7px}
.bars{display:flex; gap:3px; flex:none}
.bars i{width:13px; height:5px; border-radius:2px; background:rgba(255,255,255,.12)}
.bars i.on{background:var(--ok)}
.claim.big{margin-top:var(--s4); font-size:.95rem; max-width:70ch; border-left-width:3px; padding-block:4px}
.claim.big svg{width:18px;height:18px}
.dl{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2)}
.drow{display:grid; gap:6px; padding:clamp(20px,2.6vw,26px) clamp(20px,3vw,32px); border-bottom:1px solid var(--line-soft)}
@media(min-width:760px){.drow{grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:var(--s3); align-items:baseline}}
.drow:last-child{border-bottom:0}
.drow>span{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); font-weight:600}
.drow b{font-family:var(--fdisp); font-size:1.1rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; display:block; overflow-wrap:anywhere}
.drow p{color:var(--mute); font-size:.93rem; margin-top:6px; line-height:1.55}
.drow.no{background:rgba(255,255,255,.012)}
.drow.no b{font-family:var(--fbody); font-size:.98rem; font-weight:500; color:var(--mute-2)}
.fask{background:var(--bg-2); border-block:1px solid var(--line-soft)}
.askbox{max-width:78ch}
.askbox h2{margin-bottom:var(--s3)}
.asklist{margin:var(--s4) 0 0; padding:0; list-style:none; counter-reset:a; display:flex; flex-direction:column; gap:var(--s3)}
.asklist li{counter-increment:a; position:relative; padding-left:46px; color:var(--mute); font-size:.98rem; line-height:1.6}
.asklist li::before{
  content:counter(a); position:absolute; left:0; top:1px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(181,55,242,.4); background:var(--accent-soft);
  color:var(--accent-hover); font-family:var(--fdisp); font-weight:800; font-size:.82rem;
}
.asklist li b{color:var(--ink); font-weight:600}
.tiny{margin-top:var(--s4); color:var(--mute-2); font-size:.88rem; max-width:70ch}
.fgrid2{display:grid; gap:clamp(36px,5vw,64px); align-items:start}
@media(min-width:940px){.fgrid2{grid-template-columns:1fr 1fr}}
.clist{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2)}
.crow{display:grid; gap:4px; padding:16px 22px; border-bottom:1px solid var(--line-soft)}
@media(min-width:520px){.crow{grid-template-columns:130px 1fr; gap:var(--s2); align-items:baseline}}
.crow:last-child{border-bottom:0}
.crow>span{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); font-weight:600}
.crow b{color:var(--ink-2); font-weight:500; font-size:.95rem; overflow-wrap:anywhere}
.crow b a{border-bottom:1px solid rgba(255,255,255,.24)}
.crow b a:hover{color:var(--accent-hover); border-color:var(--accent-hover)}
.databox{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,40px); background:var(--bg-3)}
.databox h3{margin-bottom:var(--s2)}
.databox p{color:var(--mute); font-size:.95rem; margin-bottom:var(--s3)}
.databox p:last-of-type{margin-bottom:0}
.databox b{color:var(--ink-2)}
.databox .mail{color:var(--accent-hover); font-weight:600; overflow-wrap:anywhere}
.fotros{background:var(--bg-2); border-top:1px solid var(--line-soft)}
.ogrid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:640px){.ogrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ogrid{grid-template-columns:repeat(4,1fr)}}
.ocard{display:flex; flex-direction:column; gap:6px; min-width:0; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); transition:all .3s var(--ease)}
.ocard:hover{border-color:rgba(181,55,242,.45); background:var(--bg-3); transform:translateY(-3px)}
.ocard b{font-family:var(--fdisp); font-weight:600; font-size:1rem; color:var(--ink); letter-spacing:-.02em; overflow-wrap:anywhere}
.ocard span{font-size:.8rem; color:var(--mute-2)}
.card h3 a{border-bottom:1px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)}
.card h3 a:hover{color:var(--accent-hover); border-color:var(--accent-hover)}
table.cmp tbody th a{border-bottom:1px solid rgba(255,255,255,.2)}
table.cmp tbody th a:hover{color:var(--accent-hover); border-color:var(--accent-hover)}

/* ============ LOGOS DE ESTUDIO ============ */
/* el logo manda en ancho, no en alto: muchos son apaisados y en una caja
   cuadrada quedaban ilegibles */
.card-top{flex-direction:column; align-items:flex-start; gap:14px}
.mark.haslogo{
  width:auto; max-width:170px; height:46px; flex:none;
  padding:0; border:0; background:none; border-radius:0; display:block;
}
.mark.haslogo img{
  width:auto; max-width:170px; height:100%;
  object-fit:contain; object-position:left center; display:block;
}
.mark.haslogo.claro{
  background:rgba(255,255,255,.93); border-radius:9px; padding:5px 11px;
  max-width:186px; box-shadow:0 2px 14px -6px rgba(0,0,0,.6);
}
.mark.big{width:72px; height:72px; border-radius:16px; font-size:1.35rem}
.mark.big.haslogo{width:auto; max-width:250px; height:66px; padding:0}
.mark.big.haslogo img{max-width:250px}
.mark.big.haslogo.claro{padding:8px 14px; max-width:266px}
.fhead{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap}
.fhead h1{margin-bottom:0}
.fhead .eyebrow{margin-bottom:8px}

/* ============ PÁGINAS LEGALES ============ */
.legal{padding-block:clamp(48px,6vw,80px)}
.prose{max-width:76ch}
.prose h2{
  font-size:clamp(1.25rem,2.1vw,1.55rem); margin:var(--s6) 0 var(--s2);
  padding-top:var(--s4); border-top:1px solid var(--line-soft);
}
.prose h2:first-child{margin-top:0; padding-top:0; border-top:0}
.prose p{color:var(--mute); margin-bottom:var(--s2); line-height:1.7}
.prose p b{color:var(--ink-2)}
.prose ul{color:var(--mute); margin:0 0 var(--s3); padding-left:22px; line-height:1.7}
.prose li{margin-bottom:10px}
.prose li b{color:var(--ink-2)}
.prose a:not(.btn):not(.mail){color:var(--ink-2); border-bottom:1px solid rgba(255,255,255,.24)}
.prose a:not(.btn):not(.mail):hover{color:var(--accent-hover); border-color:var(--accent-hover)}
.prose .btn{margin-top:var(--s2)}

/* ============ FORMULARIO ============ */
.cform{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3)}
.ffield label{display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); font-weight:600; margin-bottom:9px}
.ffield input,.ffield textarea,.ffield select{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font-family:var(--fbody); font-size:.98rem; padding:13px 15px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.ffield textarea{resize:vertical; min-height:96px; line-height:1.55}
.ffield select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c9cb4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.ffield input:focus,.ffield textarea:focus,.ffield select:focus{border-color:var(--accent-hover); background:rgba(255,255,255,.06); outline:none}
.ffield input::placeholder,.ffield textarea::placeholder{color:var(--mute-2)}
.cform .btn{align-self:flex-start}
.cform .tiny{margin-top:0}

/* ============ CÓMO FUNCIONA ============ */
.how{display:grid; gap:var(--s3)}
@media(min-width:820px){.how{grid-template-columns:repeat(3,1fr)}}
.hstep{
  position:relative; padding:clamp(26px,3vw,34px); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--bg); display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.hstep:hover{border-color:rgba(181,55,242,.4); transform:translateY(-4px)}
.hstep .n{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px;
  border:1px solid rgba(181,55,242,.42); background:var(--accent-soft); color:var(--accent-hover);
  font-family:var(--fdisp); font-weight:800; font-size:.95rem;
}
.hstep p{color:var(--mute); font-size:.96rem; line-height:1.6}
.scope{
  margin-top:var(--s4); padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  border:1px solid var(--line-soft); border-left:3px solid var(--accent); border-radius:var(--r);
  background:rgba(181,55,242,.05); display:flex; flex-direction:column; gap:12px;
}
.scope p{color:var(--mute); font-size:.96rem; line-height:1.65; max-width:88ch}
.scope b{color:var(--ink-2)}
.hero .lead b{color:var(--ink-2); font-weight:600}

/* ============ SECCIONES ALTERNAS ============ */
section.alt{background:var(--bg-2); border-block:1px solid var(--line-soft)}

/* ============ CIUDADES ============ */
.citygrid{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:620px){.citygrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.citygrid{grid-template-columns:repeat(3,1fr)}}
.citycard{
  display:flex; flex-direction:column; gap:6px; min-width:0; padding:clamp(24px,3vw,32px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.citycard:hover{border-color:rgba(181,55,242,.45); background:var(--bg-3); transform:translateY(-4px)}
.citycard .ic{width:34px; height:34px; color:var(--accent-hover); margin-bottom:10px}
.citycard b{font-family:var(--fdisp); font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.citycard .n{font-size:.95rem; color:var(--ink-2); font-weight:500}
.citycard .sub{font-size:.85rem; color:var(--mute-2)}
.minisignals{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:var(--s4)}
.minisignals span{font-size:.9rem; color:var(--mute)}
.minisignals b{font-family:var(--fdisp); font-size:1.15rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-right:4px}

/* ============ PLATAFORMAS ============ */
.plats{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.plat{
  display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 10px;
  border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.94);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.plat img{height:18px; width:auto; max-width:104px; object-fit:contain; display:block}
.plat:hover{border-color:var(--accent-hover); transform:translateY(-2px); box-shadow:0 6px 20px -10px rgba(181,55,242,.8)}
.plat.txt{background:rgba(255,255,255,.03); color:var(--mute); font-size:.8rem; font-weight:500}
.plat.txt:hover{color:var(--ink)}
.plat.more{background:none; border-style:dashed; color:var(--mute-2); font-size:.8rem; cursor:default}
.plat.more:hover{transform:none; border-color:var(--line); box-shadow:none}
.plats.big{gap:12px}
.plats.big .plat{height:56px; padding:0 16px; border-radius:12px}
.plats.big .plat img{height:28px; max-width:150px}
.pgrid{display:grid; gap:var(--s2); grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pcard{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0;
  padding:var(--s3); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.pcard:hover{border-color:rgba(181,55,242,.45); transform:translateY(-4px)}
.pcard .pl{
  display:flex; align-items:center; justify-content:center; height:44px; width:100%;
  background:rgba(255,255,255,.94); border-radius:10px; padding:6px 12px; margin-bottom:6px;
}
.pcard .pl img{height:26px; width:auto; max-width:100%; object-fit:contain}
.pcard .pl.txt{background:rgba(255,255,255,.05); color:var(--ink); font-family:var(--fdisp); font-weight:600; font-size:1rem}
.pcard b{font-family:var(--fdisp); font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; overflow-wrap:anywhere}
.pcard .n{font-size:.82rem; color:var(--mute-2)}

/* ============ ACCESOS A SECCIONES ============ */
.seccs{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:760px){.seccs{grid-template-columns:repeat(2,1fr)}}
.secc{
  display:flex; flex-direction:column; gap:8px; padding:clamp(24px,3vw,32px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.secc:hover{border-color:rgba(181,55,242,.45); background:var(--bg-3); transform:translateY(-4px)}
.secc b{font-family:var(--fdisp); font-size:1.22rem; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.secc span{color:var(--mute); font-size:.95rem; line-height:1.6}
.nav a[aria-current="page"]{color:var(--ink)}
.method-in{display:grid; gap:clamp(40px,5vw,72px); align-items:start}
@media(min-width:940px){.method-in{grid-template-columns:1.05fr .95fr}}

/* ============ TEXTO LARGO (resumen de la revisión en la portada) ============ */
.rich{max-width:74ch; margin-inline:auto}
.rich h3{
  font-family:var(--fdisp); font-size:1.32rem; font-weight:700; color:var(--ink);
  letter-spacing:-.03em; line-height:1.15; margin:var(--s5) 0 12px;
}
.rich h3:first-child{margin-top:0}
.rich p{color:var(--mute); font-size:1.02rem}
.rich p+h3{margin-top:var(--s5)}
.rich b{color:var(--ink); font-weight:600}
.rich em{color:var(--accent-hover); font-style:normal}

/* ============ ZONA CON CUENTAS (planes, registro, paneles) ============ */
.hero.corto{padding-block:clamp(48px,7vw,84px) clamp(32px,4vw,52px)}
.wrap.estrecho{max-width:780px}
.aviso{border:1px solid rgba(47,214,165,.35); background:rgba(47,214,165,.08); color:var(--ink-2);
  padding:16px 20px; border-radius:12px; margin-bottom:var(--s4); font-size:.97rem}
.aviso.error{border-color:rgba(242,160,61,.4); background:rgba(242,160,61,.09)}
.aviso ul{margin:8px 0 0; padding-left:18px}
.aviso a{color:var(--accent-hover); border-bottom:1px solid rgba(201,100,255,.4)}

/* formularios */
.formulario{display:flex; flex-direction:column; gap:var(--s3); max-width:820px; margin-inline:auto}
.card-form{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px); margin-bottom:var(--s4)}
.card-form h2{font-size:1.5rem; margin-bottom:6px}
.formulario label{display:flex; flex-direction:column; gap:8px; font-size:.92rem; color:var(--mute); font-weight:500}
.formulario input,.formulario select,.formulario textarea{
  font-family:var(--fbody); font-size:1rem; color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line); border-radius:11px; padding:14px 16px; width:100%;
}
.formulario textarea{resize:vertical; line-height:1.55}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:none; border-color:var(--accent-hover)}
.formulario small{color:var(--mute-2); font-size:.82rem; font-weight:400}
.fgrid2{display:grid; grid-template-columns:1fr; gap:var(--s3)}
@media(min-width:720px){.fgrid2{grid-template-columns:1fr 1fr}}
.filefield input[type=file]{padding:11px; background:var(--bg-3)}
.consent{display:flex; flex-direction:column; gap:14px; background:var(--bg-3); border:1px solid var(--line);
  border-radius:14px; padding:20px}
.check{flex-direction:row !important; align-items:flex-start; gap:12px; color:var(--ink-2); font-size:.92rem; line-height:1.5}
.check input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--accent)}
.roles{display:flex; gap:var(--s3); flex-wrap:wrap}
.roles .check{background:var(--bg-3); border:1px solid var(--line); border-radius:999px; padding:10px 18px; align-items:center}

/* ---- acceso: pestañas entrar / crear cuenta ----
   Sin JS a propósito (radios + ~): si el script falla, la gente tiene que poder
   entrar igual. El hero va MUY corto porque el formulario debe verse sin scroll:
   antes el título ocupaba la pantalla entera y la página parecía vacía. */
.hero.acceso,.hero.mini{padding-block:clamp(30px,4vw,46px) 0}
.hero.acceso h1,.hero.mini h1{font-size:clamp(1.9rem,4vw,2.7rem); max-width:20ch; margin-bottom:10px}
.hero.acceso .lead,.hero.mini .lead{margin-bottom:0; font-size:1rem}
.hero.mini .hero-actions{margin-top:var(--s3); margin-bottom:0}
/* Un <button class="tlink"> se pintaba como botón GRIS del sistema: `.tlink` se
   escribió para <a> y no resetea la apariencia nativa. */
button.tlink{appearance:none; -webkit-appearance:none; background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.24); cursor:pointer; font-family:var(--fbody)}
.acc-tabs{position:relative; max-width:820px; margin-inline:auto}
.hero.acceso+section,.hero.mini+section{padding-top:var(--s4)}
.vtab{position:absolute; width:1px; height:1px; opacity:0; clip-path:inset(50%)}
.tabbar{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:999px; padding:6px; margin-bottom:var(--s4)}
.tabbar label{text-align:center; padding:12px 10px; border-radius:999px; cursor:pointer;
  font-weight:600; font-size:.98rem; color:var(--mute); transition:background .18s, color .18s}
.tabbar label:hover{color:var(--ink-2)}
.tabpanel{display:none}
#v-entrar:checked~.tabbar label[for=v-entrar],
#v-crear:checked~.tabbar label[for=v-crear]{background:var(--accent); color:#fff}
#v-entrar:focus-visible~.tabbar label[for=v-entrar],
#v-crear:focus-visible~.tabbar label[for=v-crear]{outline:2px solid var(--accent-hover); outline-offset:2px}
#v-entrar:checked~#p-entrar,
#v-crear:checked~#p-crear{display:block}
/* elegir camino dentro de «crear cuenta» */
.via{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:720px){.via{grid-template-columns:1fr 1fr}}
.via-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:10px}
.via-card h2{font-size:1.22rem; margin:0}
.via-card p{color:var(--mute); font-size:.95rem; margin:0; flex:1}
.via-card .btn{margin-top:6px; width:100%; justify-content:center}
.tabpanel .via-card{margin-bottom:var(--s4)}

/* planes */
.planes{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:820px){.planes{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:10px}
.plan.destacado{border-color:rgba(181,55,242,.55); box-shadow:0 20px 60px -30px rgba(181,55,242,.9)}
.plan .tag{position:absolute; top:-11px; left:24px; background:var(--accent); color:#fff; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px; font-weight:600}
.plan h3{font-size:1.05rem; color:var(--mute); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.plan .precio{font-family:var(--fdisp); font-size:2.4rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1}
.plan .unit{color:var(--ink-2); font-size:.95rem}
.plan .nota{color:var(--mute); font-size:.9rem; flex:1}
.plan .btn{margin-top:10px}
.planes-pie{color:var(--mute); font-size:.92rem; margin-top:var(--s4); max-width:70ch}

/* perfiles y solicitudes */
.perfiles{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:760px){.perfiles{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.perfiles{grid-template-columns:repeat(3,1fr)}}
.perfil{display:flex; gap:16px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px; align-items:flex-start}
.perfil .pf{width:72px; height:72px; border-radius:16px; object-fit:cover; flex:none; background:var(--bg-3)}
.pfwrap{position:relative; flex:none; width:72px; height:72px}
.pfmas{position:absolute; right:-6px; bottom:-6px; background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; padding:3px 7px; border-radius:999px; border:2px solid var(--bg-2)}
/* el CTA al fondo: si no, cada tarjeta lo dejaba a una altura distinta según
   cuántos chips o cuánto «sobre» tuviera el perfil */
.pinfo>.solicitar,.pinfo>a.btn,.pinfo>.ok-txt,.pinfo>.esp-txt{margin-top:auto; padding-top:8px}
.pinfo>a.btn{text-align:center}
.perfil .pf.sin{display:grid; place-items:center; font-family:var(--fdisp); font-weight:800; color:var(--accent-hover)}
.pinfo{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.pinfo h3{font-size:1.1rem; font-weight:700}
.pinfo .meta{color:var(--mute); font-size:.88rem}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chipx{font-size:.76rem; color:var(--mute); border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.sobre{color:var(--ink-2); font-size:.92rem}
.solicitar{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.solicitar input{font-family:var(--fbody); font-size:.9rem; color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.solicitar .btn{padding:12px 20px; min-height:44px; font-size:.9rem}
.ok-txt{color:var(--ok); font-weight:600; font-size:.92rem}
.esp-txt{color:var(--warn); font-size:.9rem}
.solic{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:12px; background:var(--bg-2)}
.solic .fecha{color:var(--mute-2); font-size:.82rem; margin-left:10px}
.solic .msg{color:var(--mute); font-size:.92rem; margin-top:6px; max-width:60ch}
.acciones{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.acciones .btn{padding:12px 22px; min-height:44px; font-size:.9rem}
.pill{display:inline-block; font-size:.78rem; padding:5px 12px; border-radius:999px; border:1px solid var(--line); margin-right:8px}
.pill.ok{color:var(--ok); border-color:rgba(47,214,165,.4)}
.pill.no{color:var(--mute); }
.pill.esp{color:var(--warn); border-color:rgba(242,160,61,.4)}
.bloque{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px); margin-bottom:var(--s4)}
.bloque h2{font-size:1.5rem; margin-bottom:10px}
.bloque.peligro{border-color:rgba(242,160,61,.32)}
.datos{list-style:none; padding:0; margin:0 0 var(--s3); display:grid; gap:2px}
.datos li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.datos span{color:var(--mute); font-size:.9rem}
.hist{list-style:none; padding:0; margin:0; color:var(--mute); font-size:.93rem}
.hist li{padding:10px 0; border-bottom:1px solid var(--line-soft)}
.vacio{color:var(--mute-2); font-size:.95rem}

/* ---- panel del estudio: estado de la cuenta ---- */
.cuenta{display:grid; gap:var(--s2); grid-template-columns:repeat(2,1fr); margin-bottom:var(--s4)}
@media(min-width:860px){.cuenta{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px}
.kpi b{display:block; font-family:var(--fdisp); font-size:2rem; line-height:1.1; color:var(--ink)}
.kpi span{font-size:.85rem; color:var(--mute)}
.kpi.destacado{border-color:rgba(181,55,242,.5); background:rgba(181,55,242,.07)}
.kpi.destacado b{color:var(--accent-hover)}
.dos-col{display:grid; gap:var(--s3); grid-template-columns:1fr; margin-bottom:var(--s5)}
@media(min-width:980px){.dos-col{grid-template-columns:1fr 1fr; align-items:start}}
.lista-est{display:flex; flex-direction:column; gap:2px; margin-top:var(--s3)}
.lista-est li{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  padding:12px 0; border-top:1px solid var(--line-soft); font-size:.94rem}
.lista-est li:first-child{border-top:0}
.lista-est .mut{color:var(--mute-2); font-size:.85rem}
.lista-est .quien{display:flex; align-items:center; gap:11px; min-width:0}
.lista-est .av{width:40px; height:40px; border-radius:11px; object-fit:cover; flex:none; background:var(--bg-3)}
.lista-est .av.sin{display:grid; place-items:center; font-family:var(--fdisp); font-weight:800;
  font-size:.8rem; color:var(--accent-hover)}
.lista-est .tlink{font-size:.85rem}
.tit-catalogo{margin-bottom:var(--s3)}
/* los filtros iban sueltos a todo lo ancho, sin caja y desalineados */
.filtros-form{display:grid; gap:var(--s3); background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s3); margin-bottom:var(--s4)}
@media(min-width:860px){.filtros-form{grid-template-columns:1fr 1fr auto; align-items:end}}
.filtros-form .btn{width:100%}
@media(min-width:860px){.filtros-form .btn{width:auto}}
.perfil-foto{width:120px; height:120px; border-radius:18px; object-fit:cover; margin-bottom:var(--s3)}
.inline{display:flex; gap:8px; align-items:center}
.inline input{background:var(--bg-3); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px}
.inline .btn{padding:9px 16px; min-height:38px; font-size:.85rem}

/* ---------- Book de fotos (panel de la modelo y vista del estudio) ---------- */
.bkgrid{display:flex;flex-wrap:wrap;gap:10px}
.bkitem{position:relative}
.bkitem img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.bkph{width:92px;height:92px;border-radius:12px;border:1px dashed var(--line);display:flex;align-items:center;
  justify-content:center;font-size:.68rem;color:var(--warn);text-align:center;background:var(--bg-3);padding:6px}
.bkitem form{position:absolute;top:-8px;right:-8px;margin:0}
.bkdel{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--bg-3);
  color:#ff9db0;cursor:pointer;font-size:.85rem;line-height:1;padding:0}
.bkgrid.mini img{width:64px;height:64px;border-radius:10px}