/* ============================================================
   Signal Perú · Estilos compartidos de páginas legales
   ============================================================ */
:root{
  --bg:#050016; --bg-elev:#0E0A2A; --bg-card:#0B0723;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --lime:#CBFC00; --lime-soft:rgba(203,252,0,.08); --lime-strong:rgba(203,252,0,.18);
  --indigo:#6357E8; --indigo-2:#9E93FF; --indigo-soft:rgba(99,87,232,.16); --indigo-strong:rgba(99,87,232,.42);
  --white:#FFFFFF; --text:#EDEAF7; --muted:#8E8AA8; --muted-2:#5C5879;
  --radius:18px; --maxw:900px; --gutter:clamp(20px,4vw,48px);
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{ font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; font-size:16px; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:var(--bg)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2148;border-radius:6px}

/* Header */
.l-header{ position:sticky; top:0; z-index:50; background:rgba(5,0,22,.8); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--border) }
.l-header-inner{ max-width:var(--maxw); margin:0 auto; padding:15px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:16px }
.l-brand img{ height:30px; width:auto }
.l-back{ font-size:14px; color:var(--muted); font-weight:500; display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:9px 15px; border:1px solid var(--border-strong); border-radius:100px; transition:color .2s, border-color .2s, background .2s }
.l-back:hover{ color:var(--lime); border-color:var(--lime-strong); background:var(--lime-soft) }
.l-back svg{ width:16px; height:16px }

/* Hero */
.l-hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,72px) var(--gutter) clamp(22px,4vw,34px) }
.l-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); padding:7px 13px; background:var(--lime-soft); border:1px solid var(--lime-strong); border-radius:100px; margin-bottom:20px }
.l-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.6vw,44px); letter-spacing:-.025em; line-height:1.1; color:var(--white); margin:0 0 14px }
.l-hero .l-meta{ color:var(--muted); font-size:13.5px; font-family:var(--font-mono); letter-spacing:.02em }

/* Contenido */
.l-content{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) clamp(56px,8vw,90px) }
.l-content h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(19px,2.4vw,24px); letter-spacing:-.015em; color:var(--white); margin:40px 0 14px; padding-top:26px; border-top:1px solid var(--border) }
.l-content section:first-of-type h2{ border-top:0; padding-top:8px; margin-top:8px }
.l-content h3{ font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--white); margin:22px 0 10px }
.l-content p{ margin:0 0 16px; color:var(--text) }
.l-content ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:10px }
.l-content li{ position:relative; padding-left:22px; color:var(--text) }
.l-content li::before{ content:''; position:absolute; left:4px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--lime) }
.l-content strong{ color:var(--white); font-weight:600 }
.l-content a{ color:var(--lime); text-decoration:none }
.l-content a:hover{ text-decoration:underline }
.l-callout{ background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--lime); border-radius:12px; padding:18px 20px; margin:22px 0; color:var(--muted); font-size:15px }
.l-callout strong{ color:var(--text) }
.l-content .l-note{ font-size:13.5px; color:var(--muted-2) }
.l-intro-box{ background:linear-gradient(120deg, var(--lime-soft), var(--indigo-soft)); border:1px solid var(--lime-strong); border-radius:16px; padding:20px 22px; margin:0 0 12px }
.l-intro-box .l-intro-tag{ display:block; color:var(--lime); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:9px }
.l-intro-box p{ margin:0; color:var(--white); font-size:15.5px; line-height:1.6 }

/* Navegación entre políticas */
.l-more{ max-width:var(--maxw); margin:0 auto; padding:4px var(--gutter) clamp(48px,7vw,72px) }
.l-more h2{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--white); margin:0 0 16px; padding-top:30px; border-top:1px solid var(--border) }
.l-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:640px){ .l-more-grid{ grid-template-columns:1fr } }
.l-more-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:18px 20px; color:var(--text); text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:15px; transition:border-color .25s ease, transform .25s ease, color .25s ease }
.l-more-card:hover{ border-color:var(--lime-strong); transform:translateY(-3px); color:var(--lime) }
.l-more-card svg{ width:18px; height:18px; flex-shrink:0; transition:transform .2s ease }
.l-more-card:hover svg{ transform:translateX(3px) }

/* Footer */
.l-footer{ border-top:1px solid var(--border); background:var(--bg-elev) }
.l-footer-inner{ max-width:var(--maxw); margin:0 auto; padding:34px var(--gutter); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted-2) }
.l-footer-links{ display:flex; flex-wrap:wrap; gap:12px 20px }
.l-footer-links a{ color:var(--muted); text-decoration:none; transition:color .2s }
.l-footer-links a:hover{ color:var(--lime) }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.001s !important } }