/* ============================================================
   Páginas sueltas con la identidad v2 «el sabio» (27 sep 2026)
   ============================================================
   Fuente de verdad: docs/brief-marca.md. Lo usan:
     - sobre-nosotros.html y about.html      → body.pv2.pv2-blog
     - legal/terms, privacy-policy, disclaimer → body.pv2.pv2-legal
     - delete-account.html                   → body.pv2.pv2-cuenta
   Se enlaza AL FINAL del <head> de cada página y pisa los estilos
   viejos (inline o de blog.css) sin borrarlos. Todo va acotado a
   body.pv2 para que no se filtre a ninguna otra pantalla.

   Tema Tinta (oscuro). Tinta sobre papel para la acción principal,
   celadón para los enlaces, oro sólo para advertir. Sin rojo: ni la
   pérdida ni una advertencia son una alarma. Sin franjas de color a
   la izquierda, sin sombras, sin degradados. Filetes finos en vez de
   tarjetas. */

@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-latin.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/static/fonts/Newsreader-Italic-latin.woff2") format("woff2"); font-weight:200 800; font-style:italic; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url("/static/fonts/ZenKakuGothicNew-400-latin.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url("/static/fonts/ZenKakuGothicNew-500-latin.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Zen Kaku Gothic New"; src:url("/static/fonts/ZenKakuGothicNew-700-latin.woff2") format("woff2"); font-weight:600 800; font-display:swap; }

:root{
  --pv-bg:#13131f;
  --pv-surface:#1a1a28;
  --pv-surface-2:#212132;
  --pv-border:#2c2c40;
  --pv-border-strong:#6a6a82;
  --pv-text:#ece9e1;
  --pv-ink:#d8d4c9;          /* texto de lectura larga (igual que el blog) */
  --pv-text-2:#a9a8a3;
  --pv-text-3:#8f8e8a;
  --pv-celadon:#7ebea5;
  --pv-oro:#e6b422;
  --pv-perdida:#8fa6ae;
  --pv-serif:Newsreader, Georgia, "Times New Roman", serif;
  --pv-sans:"Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base común ---------- */
body.pv2{
  background:var(--pv-bg) !important;
  color:var(--pv-text) !important;
  font-family:var(--pv-sans) !important;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
  overflow-wrap:break-word;
}
body.pv2-legal a, body.pv2-cuenta a{ color:var(--pv-celadon); text-underline-offset:3px; }
body.pv2 :focus-visible{ outline:2px solid var(--pv-celadon); outline-offset:3px; }
body.pv2 ::selection{ background:var(--pv-celadon); color:var(--pv-bg); }

/* Marca: el sello BT + el nombre en serifa, en una sola tinta */
body.pv2 .marca-v2{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--pv-text) !important; text-decoration:none;
  font-family:var(--pv-serif) !important; font-weight:400 !important;
  font-size:20px !important; letter-spacing:0 !important; line-height:1;
}
body.pv2 .marca-v2 img{ display:block; width:32px; height:32px; flex-shrink:0; }
body.pv2 .marca-v2 span{ color:inherit !important; }

/* Selector de idioma: texto, el activo subrayado. Sin píldoras. */
body.pv2 .lang-toggle{ gap:2px !important; }
body.pv2 .lang-toggle button{
  background:none !important; border:0 !important; border-radius:0 !important;
  color:var(--pv-text-2) !important; font-family:var(--pv-sans) !important;
  font-size:13px !important; font-weight:500 !important;
  padding:6px 8px !important; min-height:32px; cursor:pointer;
}
body.pv2 .lang-toggle button:hover{ color:var(--pv-text) !important; }
body.pv2 .lang-toggle button.active{
  color:var(--pv-text) !important;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
}

/* Pie: gris, sin subrayado hasta pasar el mouse */
body.pv2 .footer{ color:var(--pv-text-3) !important; font-size:13px !important; }
body.pv2 .footer a{ color:var(--pv-text-2) !important; text-decoration:none; }
body.pv2 .footer a:hover{ color:var(--pv-text) !important; text-decoration:underline; }

/* Banner de cookies: el mismo componente, con la paleta v2 */
body.pv2 .bt-consent-root{
  --bt-cc-bg:#1a1a28; --bt-cc-bg-alt:#212132; --bt-cc-border:#2c2c40;
  --bt-cc-fg:#ece9e1; --bt-cc-fg-mute:#a9a8a3;
  --bt-cc-accent:#ece9e1; --bt-cc-accent-fg:#13131f;
  --bt-cc-danger:#8fa6ae; --bt-cc-shadow:none;
}
body.pv2 .bt-consent-root, body.pv2 .bt-consent-root *{ font-family:var(--pv-sans) !important; }

/* ============================================================
   Legales (términos, privacidad, aviso financiero)
   ============================================================ */
body.pv2-legal{ line-height:1.6 !important; padding:40px 16px 56px !important; }
body.pv2-legal .container{ max-width:68ch !important; }

body.pv2-legal .topbar{
  margin-bottom:56px !important; padding-bottom:20px;
  border-bottom:1px solid var(--pv-border);
  gap:12px 16px !important;
}
body.pv2-legal .topbar-actions{ gap:8px !important; flex-wrap:wrap; }
body.pv2-legal .back-link{
  color:var(--pv-text-2) !important; border:0 !important;
  font-size:14px !important; padding:6px 4px !important;
}
body.pv2-legal .back-link:hover{ color:var(--pv-text) !important; }

/* Sin tarjeta: el documento es la página */
body.pv2-legal .card{
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important;
}

/* Nota de idioma: aviso sereno, un filete fino, sin fondo amarillo */
body.pv2-legal .auth-note{
  background:none !important;
  border:0 !important; border-bottom:1px solid var(--pv-border) !important;
  border-radius:0 !important;
  padding:0 0 20px !important; margin:-24px 0 48px !important;
  color:var(--pv-text-2) !important; font-size:14px !important; line-height:1.6 !important;
}
body.pv2-legal .auth-note strong{ color:var(--pv-text) !important; font-weight:500; }
body.pv2-legal .auth-note a{ color:var(--pv-celadon) !important; }

body.pv2-legal .container h1{
  font-family:var(--pv-serif) !important; font-weight:300 !important;
  font-size:44px !important; line-height:1.1 !important; letter-spacing:-.015em;
  color:var(--pv-text) !important;
  border:0 !important; padding:0 !important; margin:0 0 12px !important;
}
body.pv2-legal .container h2{
  font-family:var(--pv-serif) !important; font-weight:400 !important;
  font-size:26px !important; line-height:1.25 !important; letter-spacing:-.01em;
  color:var(--pv-text) !important;
  margin:56px 0 14px !important; padding-top:24px;
  border-top:1px solid var(--pv-border);
}
body.pv2-legal .container h3{
  font-family:var(--pv-sans) !important; font-weight:500 !important;
  font-size:16px !important; color:var(--pv-text) !important;
  margin:28px 0 8px !important;
}
body.pv2-legal .container p,
body.pv2-legal .container ul,
body.pv2-legal .container ol{
  font-family:var(--pv-serif);
  font-size:18px !important; line-height:1.65 !important;
  color:var(--pv-ink) !important; margin-bottom:14px !important;
}
body.pv2-legal .container ul, body.pv2-legal .container ol{ padding-left:1.3em !important; }
body.pv2-legal .container li{ margin-bottom:6px; }
body.pv2-legal .container li::marker{ color:var(--pv-text-3); }
body.pv2-legal .container strong{ color:var(--pv-text) !important; font-weight:600; }
body.pv2-legal .container em{ color:var(--pv-text-2) !important; font-size:16px !important; }
body.pv2-legal .container h1 + p em{ font-family:var(--pv-sans); font-style:normal; font-size:14px !important; }

/* Mayúsculas legales: se mantienen (deben ser visibles), en la sans y con aire */
body.pv2-legal .container .caps{
  font-family:var(--pv-sans) !important; font-size:13px !important;
  letter-spacing:.03em; line-height:1.8 !important; color:var(--pv-text-2) !important;
}

/* Bloques de advertencia: superficie apenas elevada + filete. Sin rojo, sin franja. */
body.pv2-legal .warning,
body.pv2-legal .critical,
body.pv2-legal .highlight{
  background:var(--pv-surface) !important;
  border:1px solid var(--pv-border) !important;
  border-radius:12px !important;
  padding:20px 22px !important; margin:24px 0 !important;
  color:var(--pv-ink) !important;
}
body.pv2-legal .warning p,
body.pv2-legal .critical p{ font-size:17px !important; margin-bottom:10px !important; }
body.pv2-legal .warning p:last-child,
body.pv2-legal .critical p:last-child{ margin-bottom:0 !important; }
body.pv2-legal .container .highlight{ font-size:17px !important; }

body.pv2-legal .footer{ margin-top:72px !important; padding-top:24px; border-top:1px solid var(--pv-border); text-align:left !important; }
body.pv2-legal .footer p{ font-family:var(--pv-sans) !important; font-size:13px !important; color:var(--pv-text-3) !important; margin-bottom:0 !important; line-height:2 !important; }
body.pv2-legal .footer a{ margin:0 2px !important; }

@media (max-width:520px){
  body.pv2-legal{ padding:24px 16px 40px !important; }
  body.pv2-legal .topbar{ margin-bottom:40px !important; }
  body.pv2-legal .container h1{ font-size:34px !important; }
  body.pv2-legal .container h2{ font-size:23px !important; margin-top:44px !important; }
  body.pv2-legal .container p, body.pv2-legal .container ul, body.pv2-legal .container ol{ font-size:17px !important; }
  body.pv2-legal .warning, body.pv2-legal .critical, body.pv2-legal .highlight{ padding:16px 16px !important; }
}

/* ============================================================
   Eliminar cuenta (formulario que exige Google Play)
   ============================================================ */
body.pv2-cuenta{ padding:32px 16px 48px !important; }
body.pv2-cuenta .container{ max-width:520px !important; }

body.pv2-cuenta .lang-toggle{ justify-content:flex-end !important; margin-bottom:24px !important; }

body.pv2-cuenta .header{ text-align:left !important; margin-bottom:40px !important; }
body.pv2-cuenta .header .marca-v2{ font-size:22px !important; }
body.pv2-cuenta .header p{ margin-top:12px !important; color:var(--pv-text-2) !important; font-size:14px !important; }

body.pv2-cuenta .card{
  background:none !important; border:0 !important; border-top:1px solid var(--pv-border) !important;
  border-radius:0 !important; padding:32px 0 0 !important; box-shadow:none !important;
}
body.pv2-cuenta .card h1{
  font-family:var(--pv-serif) !important; font-weight:300 !important;
  font-size:38px !important; line-height:1.1 !important; letter-spacing:-.015em;
  color:var(--pv-text) !important; margin-bottom:14px !important;
}
body.pv2-cuenta .card .subtitle{
  font-family:var(--pv-serif); font-size:18px !important; line-height:1.6 !important;
  color:var(--pv-ink) !important; margin-bottom:32px !important;
}

/* Lo que se borra: una lista sobria. La advertencia es un dato, no una alarma. */
body.pv2-cuenta .warning{
  background:var(--pv-surface) !important; border:1px solid var(--pv-border) !important;
  border-radius:12px !important; padding:20px 22px !important; margin-bottom:32px !important;
}
body.pv2-cuenta .warning-title{ color:var(--pv-text) !important; font-weight:500 !important; font-size:15px !important; margin-bottom:10px !important; }
body.pv2-cuenta .warning li{ color:var(--pv-text-2) !important; font-size:14px !important; padding:4px 0 4px 18px !important; }
body.pv2-cuenta .warning li::before{ content:"–" !important; color:var(--pv-text-3) !important; font-weight:400 !important; font-size:14px !important; }

body.pv2-cuenta .form-group{ margin-bottom:22px !important; }
body.pv2-cuenta .form-group label{ color:var(--pv-text-2) !important; font-size:14px !important; font-weight:500 !important; margin-bottom:8px !important; }
body.pv2-cuenta .form-group input[type="email"],
body.pv2-cuenta .form-group textarea{
  background:var(--pv-surface) !important; color:var(--pv-text) !important;
  border:1px solid var(--pv-border-strong) !important; border-radius:10px !important;
  font-family:var(--pv-sans) !important; font-size:16px !important;
  box-shadow:none !important;
}
body.pv2-cuenta .form-group input::placeholder,
body.pv2-cuenta .form-group textarea::placeholder{ color:var(--pv-text-3); opacity:1; }
body.pv2-cuenta .form-group input:focus,
body.pv2-cuenta .form-group textarea:focus{ border-color:var(--pv-text) !important; box-shadow:none !important; }

body.pv2-cuenta .confirm-group{
  background:none !important; border:0 !important;
  border-top:1px solid var(--pv-border) !important; border-bottom:1px solid var(--pv-border) !important;
  border-radius:0 !important; padding:16px 0 !important; margin:28px 0 !important; gap:12px !important;
}
body.pv2-cuenta .confirm-group input[type="checkbox"]{ accent-color:var(--pv-text) !important; width:18px; }
body.pv2-cuenta .confirm-group label{ color:var(--pv-ink) !important; font-size:14px !important; line-height:1.6 !important; }

/* La acción: papel sobre tinta. Irreversible no quiere decir estridente. */
body.pv2-cuenta .btn-delete{
  background:var(--pv-text) !important; color:var(--pv-bg) !important;
  font-family:var(--pv-sans) !important; font-weight:500 !important; font-size:15px !important;
  border-radius:10px !important; padding:15px 16px !important; min-height:48px;
  transition:background .2s ease, opacity .2s ease !important;
}
body.pv2-cuenta .btn-delete:hover:not(:disabled){ background:#fff !important; }
body.pv2-cuenta .btn-delete:active:not(:disabled){ transform:none !important; }
body.pv2-cuenta .btn-delete:disabled{
  background:transparent !important; color:var(--pv-text-3) !important;
  border:1px solid var(--pv-border-strong) !important;
}

/* Mensajes de error del formulario: en oro, sin fondo rojo */
body.pv2-cuenta .error-msg{
  background:none !important; border:1px solid rgba(230,180,34,.45) !important;
  border-radius:10px !important; color:var(--pv-oro) !important; font-size:14px !important;
}

/* Procesando: el giro es lento y en papel; con reduce-motion, quieto */
body.pv2-cuenta .loading-spinner{
  border-color:var(--pv-border) !important; border-top-color:var(--pv-text) !important;
  animation-duration:1.2s !important;
}
body.pv2-cuenta #state-loading p{ color:var(--pv-text-2) !important; }
body.pv2-cuenta #state-loading p:first-of-type{ color:var(--pv-text) !important; }

/* Éxito: un aro celadón fino con la marca de hecho */
body.pv2-cuenta .success-card{ text-align:left !important; padding:8px 0 16px !important; }
body.pv2-cuenta .success-icon{
  background:none !important; border:1.5px solid var(--pv-celadon);
  color:var(--pv-celadon); width:52px !important; height:52px !important;
  font-size:22px !important; margin:0 0 24px !important;
}
body.pv2-cuenta .success-card h2{
  font-family:var(--pv-serif) !important; font-weight:300 !important; font-size:30px !important;
  line-height:1.15 !important; color:var(--pv-text) !important; margin-bottom:14px !important;
}
body.pv2-cuenta .success-card p{ font-family:var(--pv-serif); font-size:18px !important; color:var(--pv-ink) !important; }
body.pv2-cuenta .success-card strong{ color:var(--pv-text); font-weight:600; }

/* Error general: los estilos vienen inline en el HTML, por eso los !important */
body.pv2-cuenta #state-error > div{ text-align:left !important; padding:8px 0 16px !important; }
body.pv2-cuenta #state-error > div > div:first-child{
  background:none !important; border:1.5px solid var(--pv-oro) !important;
  color:var(--pv-oro) !important; width:52px !important; height:52px !important;
  font-family:var(--pv-serif); font-size:24px !important; margin:0 0 24px !important;
}
body.pv2-cuenta #state-error h2{
  font-family:var(--pv-serif) !important; font-weight:300 !important; font-size:30px !important;
  color:var(--pv-text) !important;
}
body.pv2-cuenta #error-detail{ font-family:var(--pv-serif); font-size:18px !important; color:var(--pv-ink) !important; }
body.pv2-cuenta #state-error button{
  background:none !important; color:var(--pv-text) !important;
  border:1px solid var(--pv-border-strong) !important; border-radius:10px !important;
  font-family:var(--pv-sans) !important; font-weight:500; padding:12px 24px !important; min-height:44px;
}
body.pv2-cuenta #state-error button:hover{ border-color:var(--pv-text) !important; }

body.pv2-cuenta .footer{ text-align:left !important; margin-top:56px !important; padding-top:20px; border-top:1px solid var(--pv-border); line-height:2; }

@media (max-width:520px){
  body.pv2-cuenta{ padding:20px 16px 40px !important; }
  body.pv2-cuenta .card h1{ font-size:32px !important; }
  body.pv2-cuenta .warning{ padding:16px !important; }
}

/* ============================================================
   Sobre nosotros / About (usan blog.css, que ya trae su bloque v2)
   Acá sólo se suma el sello BT al nombre y se ajusta el pie.
   ============================================================ */
body.pv2-blog .blog-brand.marca-v2{ font-size:20px !important; }
body.pv2-blog .blog-foot{ border-top:1px solid #2c2c40; color:var(--pv-text-3); }
@media (max-width:600px){
  body.pv2-blog .blog-brand.marca-v2{ font-size:18px !important; gap:8px; }
  body.pv2-blog .blog-brand.marca-v2 img{ width:28px; height:28px; }
}

/* ---------- Quietud: sin movimiento para quien lo pidió ---------- */
@media (prefers-reduced-motion: reduce){
  body.pv2 *, body.pv2 *::before, body.pv2 *::after{
    transition:none !important; scroll-behavior:auto !important;
  }
  body.pv2 .loading-spinner{ animation:none !important; }
}