/* ═══════════════════════════════════════════════════════════
   YouPlanFit · Design System V2 — Grupo G: páginas legales
   ═══════════════════════════════════════════════════════════
   Ver LEGAL_V2_MAP.md. Mismo patrón que index.html/portada-v2.css:
   se SUPERPONE a portada.css + legal.css (que siguen cargados, no se
   quitan) — todo aquí escopado a body.legal-v2, para no romper la
   barra de cookies que track.js pinta con clases de portada.css
   (.consent, .consent__panel, .btn--ghost…) ni contaminar index.html,
   que no carga esta hoja.

   PROTECCIÓN DE CONTENIDO: esta hoja NO añade, quita ni envuelve
   ningún nodo de texto. Es reestilo puro sobre el marcado existente
   (main.legal, .legal__cab, .legal__cuerpo, .legal__nota,
   .legal__salud, .legal__tabla*, .legal__hermanas, footer.pie, nav).
   Cero cambios de HTML salvo los 3 <link> nuevos y class="legal-v2"
   en <body> en cada una de las 4 páginas — ver el mapa para la lista
   de qué NO se toca (fechas, numeración, .legal__salud como aviso
   médico, data-abrir-consent ×7, #navEntrar, .nav .btn--claro).
   ═══════════════════════════════════════════════════════════ */

body.legal-v2{
  background:var(--v2-bg);color:var(--v2-text);
}

/* ── Nav — mismo marcado (.nav.nav--solida), solo se oscurece ── */
body.legal-v2 .nav--solida{
  background:rgba(7,16,22,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(90,184,222,.16);
}
body.legal-v2 .nav--solida .logo__img{content:url('../img/logo-ypf.webp')}
body.legal-v2 .nav--solida .nav__menu a{color:var(--v2-muted)}
body.legal-v2 .nav--solida .nav__menu a:hover{color:var(--v2-cyan2)}
body.legal-v2 .nav--solida .nav__entrar{color:var(--v2-text)}
body.legal-v2 .nav--solida .nav__entrar:hover,
body.legal-v2 .nav--solida .nav__entrar--pro{color:var(--v2-cyan2)}
body.legal-v2 .nav--solida .btn--claro{
  background:linear-gradient(135deg,var(--v2-blue),var(--v2-cyan));
  color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(13,147,176,.25);
}

/* ── Lienzo de lectura ── */
body.legal-v2 main.legal{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 0%,rgba(19,185,231,.06),transparent 32%),
    linear-gradient(180deg,var(--v2-bg),var(--v2-bg2) 65%,var(--v2-bg));
}
body.legal-v2 .legal__cab .marca{
  display:inline-block;color:#81dff8;font-size:.68rem;letter-spacing:.2em;
  font-weight:700;text-transform:uppercase;margin:0 0 14px;
}
body.legal-v2 .legal__cab .t{
  font-family:var(--v2-display);color:var(--v2-text);
  letter-spacing:-.02em;line-height:1.08;
}
body.legal-v2 .legal__cab .t i{color:var(--v2-cyan2);font-style:normal}
body.legal-v2 .legal__fecha{
  display:inline-block;color:var(--v2-muted);
  background:rgba(13,28,39,.6);border:1px solid var(--v2-line);
  border-radius:999px;padding:6px 14px;margin-top:6px;
}

/* ── Cuerpo del texto ── */
body.legal-v2 .legal__cuerpo{color:var(--v2-text)}
body.legal-v2 .legal__cuerpo p,
body.legal-v2 .legal__cuerpo li{color:var(--v2-text)}
body.legal-v2 .legal__cuerpo h2{
  font-family:var(--v2-display);color:var(--v2-text);
  border-top-color:var(--v2-line);
}
body.legal-v2 .legal__cuerpo h3{color:var(--v2-text)}
body.legal-v2 .legal__cuerpo a{color:var(--v2-cyan2)}
body.legal-v2 .legal__cuerpo a:hover{color:var(--v2-cyan)}
body.legal-v2 .legal__cuerpo code{
  background:rgba(10,25,33,.7);color:var(--v2-cyan2);
}

/* Aviso destacado de privacidad (solo aparece en privacidad.html) —
   sigue siendo un callout, con acento cyan en vez del rosa editorial. */
body.legal-v2 .legal__nota{
  background:rgba(13,28,39,.6);border-left-color:var(--v2-cyan);
  border-radius:0 14px 14px 0;color:var(--v2-text);
}

/* Aviso de salud (solo terminos.html) — debe seguir siendo MÁS
   prominente que el cuerpo, es un descargo médico, no un aparte. */
body.legal-v2 .legal__salud{
  background:linear-gradient(180deg,rgba(247,184,68,.1),rgba(247,184,68,.04));
  border-left-color:var(--v2-amber);border-radius:0 16px 16px 0;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
body.legal-v2 .legal__salud p{color:var(--v2-text)}

/* Tabla de terceros (solo privacidad.html) — re-tematizada para
   fondo oscuro, con cabecera fija visualmente marcada. */
body.legal-v2 .legal__tabla-wrap{
  border:1px solid var(--v2-line);border-radius:14px;padding:4px 16px;
  background:rgba(13,28,39,.45);
}
body.legal-v2 .legal__tabla th,
body.legal-v2 .legal__tabla td{border-bottom-color:var(--v2-line);color:var(--v2-text)}
body.legal-v2 .legal__tabla th{color:var(--v2-cyan2)}

/* Enlaces a las páginas legales hermanas — mismos hrefs, mismo
   data-abrir-consent, solo la pastilla se rehace en glass oscuro. */
body.legal-v2 .legal__hermanas{border-top-color:var(--v2-line)}
body.legal-v2 .legal__hermanas a{
  color:var(--v2-muted);border-color:var(--v2-line);background:rgba(13,28,39,.5);
}
body.legal-v2 .legal__hermanas a:hover{border-color:var(--v2-cyan);color:var(--v2-cyan2)}

/* ── Pie ── */
body.legal-v2 footer.pie{
  background:#050b0f;border-top:1px solid #122934;color:#8199a5;
}
body.legal-v2 footer.pie a{color:#8199a5;border-bottom-color:rgba(129,159,165,.35)}
body.legal-v2 footer.pie a:hover{color:var(--v2-cyan2)}
body.legal-v2 .firma__nombre{color:#8199a5}
body.legal-v2 .firma__nombre:hover{color:var(--v2-cyan2)}

/* La barra de cookies (#consent) la pinta track.js con clases de
   portada.css — no se toca aquí. Solo se asegura que su blur no la
   deje ilegible sobre el fondo ya oscuro (portada.css:781 ya usa un
   fondo casi negro con blur, que sigue funcionando bien sobre este
   lienzo también más oscuro; no hace falta override). */