:root{
  --paper:#F4F4F2;
  --card:#FBFBFA;
  --ink:#0B0B0D;
  --pizarra:#1C1C1C;
  --ceniza:#2E2E2E;
  --humo:#6B6F75;
  --line:#D9D9D5;
  --line-soft:#E8E8E4;
  --oro:#8C7A5B;
  --oro-soft:#EFEAE0;
  --display:"Oswald","Arial Narrow","Helvetica Neue",sans-serif;
  --label:"Cinzel","Trajan Pro","Times New Roman",serif;
  --body:"Cormorant Garamond","EB Garamond",Garamond,Georgia,serif;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.42;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px;padding-block:36px 88px;display:grid;gap:64px}
h1,h2,h3{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.02em;margin:0;text-wrap:balance;line-height:1.02}
p{margin:0}
.eyebrow{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--humo)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- cabecera ---------- */
.top{display:grid;gap:18px;max-width:760px}
.top__logo{width:132px;height:auto;display:block}
.top h1{font-size:clamp(56px,10vw,112px)}
.lead{font-size:24px;line-height:1.32;max-width:34em}
.note{font-style:italic;color:var(--humo);font-size:17px}

/* ---------- controles ---------- */
.panel{display:grid;gap:22px}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.panel__head h2{font-size:34px}
.panel__head p{color:var(--ceniza);font-size:18px;max-width:40em}
.controls{display:flex;flex-wrap:wrap;gap:18px 28px;padding-block:18px;border-block:1px solid var(--line)}
.ctl{display:grid;gap:8px;align-content:start}
.ctl__lbl{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);display:flex;gap:8px;align-items:baseline}
.ctl__lbl output{font-family:var(--display);font-size:15px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{font-family:var(--label);font-size:12px;letter-spacing:.06em;padding:9px 14px;background:transparent;border:0;cursor:pointer;white-space:nowrap}
.seg button + button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg small{font-family:var(--body);font-style:italic;font-size:13px;letter-spacing:0;opacity:.75}
.swatches{display:flex;gap:10px;padding-block:4px}
.swatches button{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink);cursor:pointer;padding:0}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
input[type=range]{accent-color:var(--ink);width:200px;max-width:100%}

/* ---------- tres estilos ---------- */
.styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.style{background:var(--card);border:1px solid var(--line);display:grid;grid-template-rows:auto 310px auto auto 1fr}
.style__head{display:flex;gap:14px;align-items:center;padding:18px 20px 14px}
.style__key{font-family:var(--display);font-size:40px;line-height:1;width:44px}
.style__head h3{font-size:22px}
.style__head p{font-style:italic;color:var(--humo);font-size:17px}
.tag{margin-left:auto;font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);border:1px solid var(--oro);padding:4px 8px;border-radius:999px;white-space:nowrap}
.stage{display:grid;place-items:center;background:var(--paper);border-block:1px solid var(--line-soft);overflow:hidden;position:relative}
.stage__when{position:absolute;left:12px;top:10px;font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo)}
.nameline{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.nameline b{font-family:var(--body);font-weight:700;font-size:18px}
.nameline small{font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);width:100%}
.gaps{padding:12px 20px 0;font-size:16px;color:var(--ceniza);min-height:52px}
.gaps b{font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro);display:block;margin-bottom:2px}
.facts{list-style:none;margin:0;padding:12px 20px 20px;display:grid;gap:8px;font-size:17px;align-content:start}
.facts li{padding-left:16px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink)}

/* avatares */
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.stage canvas.px{width:320px;max-width:100%;height:auto}
.respira{animation:respira 1.6s steps(1) infinite}
@keyframes respira{0%{transform:none}50%{transform:translateY(-4px)}}
.stage svg{width:300px;max-width:92%;height:auto;display:block}
.estatua{height:286px;width:auto;display:block}
.mini{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.mini canvas.px{width:40px;height:40px}
.mini svg{width:40px;height:40px;display:block}
.mini--img{background-repeat:no-repeat;background-size:230% auto;background-position:50% 4%}

/* medallas */
.medals{display:inline-flex;gap:6px}
.medal{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ink);background:var(--card);color:var(--ink);flex:none}
.medal svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.medal--rara{border-color:var(--oro);background:var(--oro-soft);color:var(--oro)}
.medal--unica{border-color:var(--ink);background:var(--ink);color:var(--oro)}
.medal--lg{width:34px;height:34px}
.medal--lg svg{width:19px;height:19px}

/* ---------- cuidado diario ---------- */
.care{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start}
.care__text{display:grid;gap:16px}
.care__text h2{font-size:34px}
.care__text ul{margin:0;padding-left:20px;display:grid;gap:8px}
.care__panel{background:var(--card);border:1px solid var(--line);display:grid}
.care__stage{height:250px;display:grid;place-items:center;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.care__stage canvas.px{width:256px;max-width:100%;height:auto}
.care__stage svg{width:230px;height:auto}
.care__stage .estatua{height:230px}
.care__body{padding:18px 20px 20px;display:grid;gap:12px}
.care__status{font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;min-height:1.4em}
.care__btns{display:grid;gap:8px}
.care__btns button{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:1px solid var(--ink);background:var(--card);padding:11px 14px;cursor:pointer;font-size:18px}
.care__btns button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.care__btns button span{font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.linkbtn{justify-self:start;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--ceniza);font-size:17px}
.help{font-size:15px;color:var(--humo);border-top:1px solid var(--line-soft);padding-top:10px}
.help b{color:var(--ink);font-variant-numeric:tabular-nums;user-select:all}

/* ---------- canal + ficha ---------- */
.ctx{display:grid;gap:22px}
.tabs{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.tabs button{font-family:var(--label);font-size:12px;letter-spacing:.08em;padding:9px 16px;background:var(--card);border:0;cursor:pointer}
.tabs button + button{border-left:1px solid var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ctx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.feed{background:var(--card);border:1px solid var(--line)}
.chans{display:flex;gap:4px 14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--label);font-size:12px;letter-spacing:.06em;color:var(--humo)}
.chans .on{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink)}
.post{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.post:last-child{border-bottom:0}
.post__who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post__who b{font-weight:700}
.post__who time{font-size:15px;color:var(--humo)}
.post__txt{margin-top:4px;font-size:18px}
.post__act{margin-top:8px;display:flex;gap:10px}
.pluma-btn{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;font-size:15px;display:inline-flex;gap:6px;align-items:center}
.pluma-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pluma-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.feed__foot{padding:12px 18px;font-size:15px;color:var(--humo);font-style:italic;border-top:1px solid var(--line)}

.ficha{background:var(--card);border:1px solid var(--ink);display:grid}
.ficha__when{padding:10px 18px;border-bottom:1px solid var(--line);font-family:var(--label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo)}
.ficha__top{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:18px;align-items:center}
.ficha__angel{height:210px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line-soft)}
.ficha__angel canvas.px{width:192px;max-width:100%;height:auto}
.ficha__angel svg{width:190px;height:auto}
.ficha__angel .estatua{height:196px}
.ficha__user{font-family:var(--display);font-size:26px;text-transform:none;letter-spacing:.01em}
.ficha__num{font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-top:2px}
.ficha dl{margin:12px 0 0;display:grid;gap:6px}
.ficha dl div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:baseline}
.ficha dt{font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.ficha dd{margin:0;font-size:18px}
.ficha dd em{font-size:14px;color:var(--humo)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.stats div{padding:12px 18px;display:grid;gap:2px}
.stats div + div{border-left:1px solid var(--line)}
.stats b{font-family:var(--display);font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.stats span{font-family:var(--label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.ficha__sec{padding:16px 18px;display:grid;gap:12px}
.ficha__sec + .ficha__sec{border-top:1px solid var(--line)}
.sec__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sec__head h4{margin:0;font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.earned{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.earned li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;font-size:16px;line-height:1.2}
.earned small{display:block;color:var(--humo);font-size:14px;font-variant-numeric:tabular-nums}
.earned .onname{font-family:var(--label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.switch{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-size:15px;color:var(--ceniza);padding:0}
.switch i{width:38px;height:22px;border-radius:999px;border:1px solid var(--ink);position:relative;background:var(--paper);transition:background .2s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .2s}
.switch[aria-pressed="true"] i{background:var(--ink)}
.switch[aria-pressed="true"] i::after{transform:translateX(16px);background:var(--paper)}
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.prod{display:grid;gap:6px;font-size:15px;line-height:1.2}
.prod img{width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line-soft);background:#fff}
.prod small{color:var(--humo);font-size:13px}
.hidden-msg{font-style:italic;color:var(--humo);font-size:16px}

/* ---------- catálogo ---------- */
.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px 36px}
.group h3{font-size:18px;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:6px}
.group ul{list-style:none;margin:0;padding:0}
.group li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.group li b{font-weight:700;font-size:18px;display:block;line-height:1.15}
.group li span.how{font-size:16px;color:var(--ceniza);line-height:1.25;display:block}
.group li em{font-size:14px;color:var(--humo)}
.rar{font-family:var(--label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid var(--ink);white-space:nowrap}
.rar--rara{border-color:var(--oro);color:var(--oro)}
.rar--unica{background:var(--ink);color:var(--paper)}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:16px;color:var(--ceniza);align-items:center}
.legend span{display:inline-flex;gap:8px;align-items:center}

/* ---------- comparación ---------- */
.tablebox{overflow-x:auto;border:1px solid var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:17px}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
thead th{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:17px;border-bottom:1px solid var(--ink)}
tbody th{font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo);font-weight:600;width:170px}
td.win{background:var(--oro-soft)}
.reco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.reco__main{border-left:2px solid var(--oro);padding-left:22px;display:grid;gap:12px}
.reco__main h2{font-size:30px}
.reco__main ul{margin:0;padding-left:20px;display:grid;gap:8px}
.reco__side{display:grid;gap:12px;font-size:18px;color:var(--ceniza)}
.next{border-top:1px solid var(--ink);padding-top:20px;display:grid;gap:8px;max-width:760px}
.next h2{font-size:24px}

@media (max-width:980px){
  .styles{grid-template-columns:minmax(0,1fr)}
  .style{grid-template-rows:auto 290px auto auto auto}
  .care,.ctx__grid,.reco{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  body{font-size:18px}
  .lead{font-size:21px}
  .ficha__top{grid-template-columns:minmax(0,1fr)}
  .ficha__angel{height:220px}
  .earned{grid-template-columns:minmax(0,1fr)}
  .ficha dl div{grid-template-columns:104px minmax(0,1fr)}
  .stats b{font-size:24px}
  .seg button{padding:8px 11px}
}
@media (prefers-reduced-motion:reduce){.respira{animation:none}.switch i,.switch i::after{transition:none}}

/* ── Tu ángel (producción) ── */
.angel-estado[hidden]{display:none}
.angel-cta{display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;border:1px solid currentColor;font-family:Oswald,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:none;color:inherit;cursor:pointer;text-decoration:none}
.angel-cta[disabled]{opacity:.5;cursor:default}
.angel-form{display:grid;gap:1rem;max-width:34rem}
.angel-form label{display:grid;gap:.35rem;font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.angel-form input[type=text]{padding:.7rem .8rem;border:1px solid #0B0B0D33;font:inherit;text-transform:none;letter-spacing:0}
.angel-opciones{display:flex;gap:.6rem;flex-wrap:wrap}
.angel-opciones button{padding:.5rem .9rem;border:1px solid #0B0B0D55;background:none;cursor:pointer;font:inherit}
.angel-opciones button[aria-pressed=true]{background:#0B0B0D;color:#fff}
.angel-msg{min-height:1.4em;font-size:.95rem}.angel-msg[data-tipo=error]{color:#A80512}
.angel-lista{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.angel-lista li{display:flex;gap:.8rem;align-items:center}
.medal--bloqueada{opacity:.35;filter:grayscale(1)}
.angel-medalla-elegir{display:flex;gap:.8rem;align-items:center;padding:.6rem;border:1px solid #0B0B0D22;background:none;width:100%;text-align:left;cursor:pointer;font:inherit}
.angel-medalla-elegir[aria-pressed=true]{border-color:#0B0B0D;background:#0B0B0D0D}
.angel-linea-vida{font-size:.85rem;opacity:.75;margin-top:2rem}
@media (prefers-reduced-motion:reduce){.respira{animation:none!important}}

#eAngel:not([hidden]){display:grid;gap:64px}
.angel-etq{display:block;font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
#vistaAdoptar,#vistaAngel{display:grid;place-items:center;padding:1.5rem 0}
#vistaAdoptar canvas.px,#vistaAngel canvas.px{width:256px;max-width:100%;height:auto}

/* ---------- entrar / crear cuenta en la página (marcado de cuenta.js, igual que la home y La Porte) ---------- */
.cuenta-inline .ptabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.cuenta-inline .ptabs__tab{border:0;border-bottom:2px solid transparent;background:none;padding:.6rem .9rem;cursor:pointer;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--humo)}
.cuenta-inline .ptabs__tab.is-on{border-bottom-color:var(--ink);color:var(--ink)}
.cuenta-inline .pform{display:grid;gap:14px;max-width:34rem}
.cuenta-inline .pform[hidden],.cuenta-inline .pform__hp{display:none!important}
.cuenta-inline .pfield{display:grid;gap:.35rem}
.cuenta-inline .pform__label{font-family:var(--display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.cuenta-inline .pfield input{width:100%;padding:.7rem .8rem;border:1px solid #0B0B0D33;font:inherit;background:var(--card)}
.cuenta-inline .pfield__pass{display:flex;gap:6px}
.cuenta-inline .pfield__ver,.cuenta-inline .pform__link{border:0;background:none;cursor:pointer;color:var(--humo);text-decoration:underline;font:inherit;font-size:16px}
.cuenta-inline .pconsent{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.35}
.cuenta-inline .pconsent input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--ink)}
.cuenta-inline .pform__submit{justify-self:start;padding:.8rem 1.4rem;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.cuenta-inline .pform__submit[disabled]{opacity:.5;cursor:default}
.cuenta-inline .pform__msg{min-height:1.4em;font-size:.95rem}
.cuenta-inline .pform__msg.is-error{color:#A80512}
.cuenta-inline .pform__msg.is-ok{color:#1F6B3A}
.cuenta-inline .pform__help{font-size:16px;color:var(--humo)}

/* ---------- menú de la comunidad (Tu ángel · Canales · Mi cuenta) ---------- */
.com-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.com-nav a{color:var(--ceniza)}
.com-nav a[aria-current=page]{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
/* Playeras de la tienda aún no compradas (11-nov-2026) */
.angel-ropa-bloq{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .9rem;border:1px dashed #0B0B0D55;color:inherit;opacity:.6;text-decoration:none;font:inherit}
.angel-ropa-bloq:hover{opacity:1;border-style:solid}
.hoja .angel-ropa-bloq{border-radius:999px}