/* ═══════════════════════════════════════════════════════════════
   FRENESSÍ — páginas interiores (blog y 404)
   ---------------------------------------------------------------
   El landing tiene su styles.css de 64 KB, casi todo escena y
   animación (el cosmos, el astronauta, las capas). Estas páginas son
   para LEER, así que llevan solo lo necesario con la misma voz:
   negro del vacío, magenta, cian y Space Grotesk.

   Las clases son las mismas que usa Sombras (.pg-*, .bl-*, .ar-*):
   el HTML del blog lo arma seratta-admin (src/lib/sitios/plantilla.ts)
   igual para todas las marcas, y cada sitio lo viste con su propio
   paginas.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --void:#04040a;
  --ink:#08080f;
  --ink-2:#0d0d18;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.24);
  --magenta:#e6007e;
  --magenta-soft:#ff3d9e;
  --cyan:#6ff2ff;
  --violet:#8b5cf6;
  --paper:#f2f2f5;
  --body:rgba(242,242,245,.78);
  --mute:rgba(242,242,245,.60);   /* ≈ 6:1 sobre el vacío: pasa AA */
  --pad:clamp(1.1rem,4vw,3.4rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ff:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--body); font-family:var(--ff); font-weight:300; line-height:1.7;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgba(230,0,126,.16), transparent 60%),
    radial-gradient(50rem 30rem at -10% 20%, rgba(111,242,255,.08), transparent 60%),
    var(--void);
  background-attachment:fixed;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--magenta); color:#fff}

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:999; transform:translateY(-160%);
  background:var(--paper); color:var(--void); padding:.7rem 1.1rem; font-weight:600; text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
main:focus{outline:none}

/* ── cabecera ─────────────────────────────────────────────────── */
.pg-hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.5rem;
  padding:.9rem var(--pad); background:rgba(4,4,10,.82);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.pg-brand{display:flex; align-items:center; min-height:44px}
.pg-brand img{height:18px; width:auto}
.pg-nav{display:flex; align-items:center; flex-wrap:wrap; gap:.2rem clamp(1rem,2.4vw,2rem)}
.pg-nav a:not(.pg-btn){
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--mute); padding:.75rem 0; transition:color .3s var(--ease);
}
.pg-nav a:not(.pg-btn):hover,.pg-nav a[aria-current="page"]{color:var(--paper)}
.pg-nav a[aria-current="page"]{box-shadow:inset 0 -2px var(--magenta)}
@media (max-width:640px){ .pg-nav a[href="/#voces"]{display:none} }

/* ── botones ──────────────────────────────────────────────────── */
.pg-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.85rem 1.9rem;
  border-radius:999px; background:var(--magenta); color:#fff; border:1px solid var(--magenta);
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 6px 30px -10px rgba(230,0,126,.85); cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.pg-btn:hover{background:var(--paper); border-color:var(--paper); color:var(--void)}
.pg-btn--ghost{background:transparent; border-color:var(--line-2); color:var(--paper); box-shadow:none}
.pg-btn--ghost:hover{background:var(--paper); color:var(--void)}
.pg-btn--sm{min-height:42px; padding:.6rem 1.3rem; font-size:.64rem}
.pg-acciones{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem}

/* ── tipografía de página ─────────────────────────────────────── */
.pg-main{padding:clamp(3rem,9vh,6rem) var(--pad) 0; max-width:1360px; margin:0 auto}
.pg-eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); margin:0 0 1.1rem;
}
.pg-h1{
  color:var(--paper); font-weight:600; margin:0 0 1.3rem; max-width:17ch; text-transform:uppercase;
  font-size:clamp(2.2rem,1.2rem + 4.2vw,5rem); line-height:.98; letter-spacing:-.03em;
}
.pg-h1 em{font-style:normal; color:transparent; -webkit-text-stroke:1px var(--magenta-soft); text-shadow:0 0 30px rgba(230,0,126,.35)}
.pg-h1--ar{max-width:none; text-transform:none; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); line-height:1.08; letter-spacing:-.02em}
.pg-lead{max-width:60ch; font-size:1.08em; margin:0; color:var(--body)}
.hint{font-size:.86rem; color:var(--mute); line-height:1.55; margin:0}

/* ── blog: listado ────────────────────────────────────────────── */
.bl-grid{
  list-style:none; margin:clamp(2.8rem,7vh,4.5rem) 0 0; padding:0;
  display:grid; gap:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
}
.bl-card a{
  display:block; height:100%; text-decoration:none; color:inherit; padding:.75rem;
  border:1px solid var(--line); border-radius:18px; background:rgba(13,13,24,.55);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.bl-card a:hover,.bl-card a:focus-visible{border-color:rgba(230,0,126,.55); transform:translateY(-4px); box-shadow:0 18px 50px -24px rgba(230,0,126,.6)}
.bl-card figure{margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:12px; background:var(--ink-2)}
.bl-card img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.bl-card a:hover img{transform:scale(1.05)}
.bl-sin{background:radial-gradient(circle at 50% 40%,rgba(111,242,255,.22),transparent 55%),var(--ink-2)!important}
.bl-card h2{font-size:1.1rem; font-weight:500; line-height:1.3; color:var(--paper); margin:1rem .3rem .5rem}
.bl-card p{font-size:.92rem; color:var(--mute); margin:0 .3rem; line-height:1.55}
.bl-meta{font-size:.66rem!important; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)!important; margin:.9rem .3rem .3rem!important}

/* ── blog: artículo ───────────────────────────────────────────── */
.ar{max-width:46rem; margin:0 auto}
.ar-back{
  display:inline-block; margin-bottom:2rem; padding:.5rem 0; font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--mute); transition:color .3s;
}
.ar-back:hover{color:var(--magenta-soft)}
.ar-cover{margin:clamp(2.2rem,5vh,3rem) 0; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.ar-cover img{width:100%; max-height:34rem; object-fit:cover}
.ar-body{margin-top:2rem}
.ar-body h2{color:var(--paper); font-weight:600; font-size:clamp(1.4rem,1.1rem + 1.1vw,1.95rem); line-height:1.2; letter-spacing:-.01em; margin:2.6rem 0 1rem}
.ar-body h3{color:var(--paper); font-weight:500; font-size:1.22rem; line-height:1.3; margin:2.1rem 0 .8rem}
.ar-body p{margin:0 0 1.25rem}
.ar-body strong{color:var(--paper); font-weight:600}
.ar-body a{color:var(--cyan); text-underline-offset:3px}
.ar-body a:hover{color:var(--magenta-soft)}
.ar-body ul{margin:0 0 1.5rem; padding-left:1.2rem}
.ar-body li{margin-bottom:.5rem; padding-left:.3rem}
.ar-body li::marker{color:var(--magenta)}
.ar-body figure{margin:2.4rem 0; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.ar-body blockquote{margin:2.4rem 0; padding:1.1rem 1.4rem; border-left:2px solid var(--magenta); background:rgba(230,0,126,.06); border-radius:0 12px 12px 0}
.ar-body blockquote p{color:var(--paper); font-size:1.25rem; line-height:1.45; margin:0}
.ar-faq{margin:3rem 0 0; border-top:1px solid var(--line)}
.ar-faq h2{font-size:.7rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); margin:2rem 0 .6rem}
.ar-faq details{border-bottom:1px solid var(--line)}
.ar-faq summary{cursor:pointer; color:var(--paper); font-weight:500; padding:1.1rem 2rem 1.1rem 0; list-style:none; position:relative}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after{content:"+"; position:absolute; right:0; top:1rem; color:var(--magenta-soft); font-size:1.2rem}
.ar-faq details[open] summary::after{content:"−"}
.ar-faq details p{margin:0 0 1.2rem}
.ar-cta{
  max-width:46rem; margin:clamp(3.5rem,9vh,5rem) auto 0; padding:clamp(1.8rem,4vw,2.6rem); text-align:center;
  border:1px solid rgba(230,0,126,.35); border-radius:22px;
  background:radial-gradient(circle at 50% 0,rgba(230,0,126,.18),transparent 65%),rgba(13,13,24,.6);
}
.ar-cta h2{color:var(--paper); font-weight:600; text-transform:uppercase; font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem); line-height:1.1; margin:0 0 .7rem}
.ar-cta p{margin:0 auto 1.7rem; max-width:42ch}
.ar-ciudades{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem}
.ar-rel{max-width:1360px; margin:clamp(4rem,10vh,6rem) auto 0}
.ar-rel .bl-grid{margin-top:1.2rem}

/* ── pie ──────────────────────────────────────────────────────── */
.pg-ft{
  margin-top:clamp(4.5rem,12vh,7rem); padding:clamp(2.4rem,6vh,3.4rem) var(--pad) 1.6rem;
  background:#020205; border-top:1px solid var(--line);
  display:grid; gap:2.2rem 3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.pg-ft img{height:14px; width:auto; margin-bottom:.9rem; opacity:.9}
.pg-ft p{max-width:34ch; font-size:.8rem; color:var(--mute); margin:0; line-height:1.6}
.pg-ft .pg-legal{margin-top:1rem; font-size:.7rem; letter-spacing:.06em}
.pg-ft h2{font-size:.6rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); margin:0 0 .9rem}
.pg-ft ul{list-style:none; margin:0; padding:0}
.pg-ft li a{display:inline-block; padding:.4rem 0; font-size:.84rem; color:var(--body); text-decoration:none; transition:color .35s var(--ease),transform .35s var(--ease)}
.pg-ft li a:hover{color:var(--magenta-soft); transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
}