/* === HOJA COMPARTIDA DE LAS PAGINAS LEGALES ===============================
   La usan aviso-legal.html, politica-privacidad.html y
   politica-cookies.html. El bloque de cabecera y el pie estan copiados de
   index.css VALOR A VALOR: si se retoca la cabecera de la portada, hay que
   retocar este fichero igual (la divergencia anterior nacio de duplicar
   estilos por pagina y dejar que evolucionaran por separado). */

/* === Fuentes auto-alojadas (GDPR: 0 llamadas a Google/CDN). Origen: Fontsource. === */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url('/fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/opendyslexic-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-display:swap;font-weight:700;src:url('/fonts/opendyslexic-latin-700-normal.woff2') format('woff2');}

:root{
  --page:#022052; --panel:#0A2168; --panel-2:#0B2150;
  --surface:#FFFFFF; --text:#E9EDF8; --muted:#AEB8D6; --heading:#FFFFFF;
  --gold:#FCDE57; --green:#37AC83; --blue:#2A84CB; --red:#C8102E;
  --border:#23356F; --border-light:#E2E8EF;
  --radius:14px; --radius-sm:10px; --radius-lg:22px; --maxw:1240px;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --dur:180ms;
}
body.dys{ --font-body:'OpenDyslexic',sans-serif; }
/* El aro del logo hereda el mecanismo de la portada; aqui no hay JS de actos,
   asi que se queda en su valor inicial: el dorado de marca. El fallback del
   var() cubre navegadores sin @property. */
@property --acto-actual{syntax:'<color>'; inherits:true; initial-value:#FCDE57;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--page);}
body{margin:0; background:transparent; color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0;}
p{margin:0 0 12px;}
a{color:var(--gold); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a:focus-visible, button:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}

/* Tinte de ambiente: la version estatica de la capa de color vivo de la
   portada, fija en el dorado inicial y a media intensidad para no restar
   contraste a paginas que son todo lectura. */
.nca-tinte{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(125% 85% at 50% 0%,  color-mix(in srgb, #FCDE57 42%, transparent), transparent 72%),
    radial-gradient(100% 70% at 88% 100%, color-mix(in srgb, #FCDE57 30%, transparent), transparent 76%),
    radial-gradient(80% 55% at 5% 60%,   color-mix(in srgb, #FCDE57 18%, transparent), transparent 70%);}

/* Top bar — la de la portada */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--page) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); transition:box-shadow .35s ease-out, border-color .35s ease-out;}
.topbar.is-scrolled{box-shadow:0 8px 26px rgba(0,0,0,.30); border-bottom-color:color-mix(in srgb,var(--gold) 34%, var(--border));}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:104px; gap:16px;}
.brand{display:flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:700; font-size:23px; color:var(--gold);}
.brand:hover{text-decoration:none;}
.brand img{height:92px; width:92px; border-radius:50%; display:block;
  box-shadow:0 0 0 var(--aro,3px) var(--acto-actual,#FCDE57); transition:scale .35s ease-out;}
.topbar.is-scrolled .brand img{scale:.88;}
.a11y{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.toggle{font-family:var(--font-body); font-size:13.5px; color:var(--text); background:transparent; border:1px solid var(--border); border-radius:999px; padding:8px 14px; cursor:pointer; min-height:40px; transition:background var(--dur) ease-out, border-color var(--dur) ease-out;}
.toggle:hover{border-color:var(--gold);}
.toggle[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#5a4a05; font-weight:700;}

/* Cuerpo de la pagina legal */
.legal-page{padding:48px 0 80px;}
.legal-page .content{max-width:760px; margin:0 auto;}
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; color:var(--muted); margin-bottom:24px;}
.back-link:hover{color:var(--gold);}
.legal-page h1{font-size:clamp(28px,4vw,40px); color:var(--heading);}
.h1bar{width:56px; height:3px; background:var(--gold); border-radius:2px; margin:18px 0 0;}
.lead-meta{color:var(--muted); font-size:15px; margin:14px 0 0;}
.notice{background:rgba(252,222,87,.12); border:1px dashed rgba(252,222,87,.45); border-radius:var(--radius); padding:14px 16px; font-size:14.5px; color:#ffe9a8; margin:26px 0 0; line-height:1.5;}

.legal-toc{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 28px; margin:32px 0 0;}
.legal-toc h2{font-size:17px; color:var(--gold); margin-bottom:12px;}
.legal-toc ul,.legal-toc ol{margin:0; padding-left:22px;}
.legal-toc li{margin:7px 0; color:var(--muted); font-size:15.5px;}
.legal-toc a{font-weight:700;}

.legal-section{padding-top:36px; margin-top:36px; border-top:1px solid var(--border); scroll-margin-top:130px;}
.legal-section h2{font-size:clamp(22px,3vw,28px); color:var(--heading); margin-bottom:14px;}
.legal-section h3{font-size:17px; color:var(--gold); margin:22px 0 10px;}
.legal-section p,.legal-section li,.legal-section dd{color:var(--muted); font-size:16px; line-height:1.65;}
.legal-section strong{color:var(--text);}
.legal-section ul,.legal-section ol{margin:10px 0 14px; padding-left:22px;}
.legal-section li{margin:6px 0;}
.legal-section blockquote{margin:14px 0; padding:14px 18px; border-left:3px solid var(--gold); background:rgba(252,222,87,.08); border-radius:0 var(--radius) var(--radius) 0; color:var(--text); font-size:15.5px; line-height:1.55;}
.legal-section .checklist{list-style:none; padding-left:0;}
.legal-section .checklist li{padding-left:1.6em; position:relative;}
.legal-section .checklist li::before{content:"☐"; position:absolute; left:0; color:var(--gold);}
.mt14{margin-top:14px;}
.mt16{margin-top:16px;}

.datos-basicos{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:16px; color:var(--muted); margin:12px 0 0;}
.datos-basicos dt{font-weight:700; color:#fff;}
.datos-basicos dd{margin:0;}
.nota-legal{margin-top:14px; font-size:14px; opacity:.85;}

/* Dato pendiente de aportar: visible a proposito, nunca relleno inventado. */
.pend{display:inline-block; background:rgba(252,222,87,.14); border:1px dashed rgba(252,222,87,.5); border-radius:6px; padding:0 8px; color:#ffe9a8; font-size:.88em; font-weight:700; overflow-wrap:anywhere;}
/* Los emails y URLs largos parten donde haga falta: en 390 px un mailto de 31
   caracteres es mas ancho que la columna y provocaba scroll horizontal. */
.legal-page a, footer .legal{overflow-wrap:anywhere;}
/* Nota que espera validacion profesional (abogado/DPO). */
.avalidar{background:rgba(252,222,87,.08); border:1px dashed rgba(252,222,87,.45); border-radius:var(--radius); padding:14px 16px; margin:14px 0 0; font-size:14.5px; color:#ffe9a8; line-height:1.55;}
/* Clausula esencial o bloque que la norma exige presentar destacado y
   separado (p. ej. oposicion al marketing directo, art. 21.4 RGPD). */
.clausula,.destacado{background:var(--panel); border:1.5px solid rgba(252,222,87,.55); border-radius:var(--radius); padding:20px 22px; margin:14px 0 0;}
.clausula p,.destacado p{color:var(--text);}
.destacado h3{font-size:16px; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px;}

.tabla-scroll{overflow-x:auto; margin:14px 0 0; border:1px solid var(--border); border-radius:var(--radius);}
.tabla-scroll table{width:100%; border-collapse:collapse; font-size:14.5px; color:var(--muted); background:var(--panel);}
.tabla-scroll th{font-family:var(--font-body); color:#fff; text-align:left; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; padding:12px 14px; border-bottom:1px solid var(--border); background:rgba(2,32,82,.5);}
.tabla-scroll td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.5;}
.tabla-scroll tr:last-child td{border-bottom:none;}
.tabla-scroll td strong{color:var(--text);}

/* Footer — el de la portada */
footer{padding:50px 24px 40px; color:var(--muted); font-size:14.5px; border-top:1px solid var(--border);}
footer .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px 64px; align-items:start;}
footer .brand{display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:18px; font-family:var(--font-display); font-weight:700; color:var(--gold);}
footer .brand img{height:56px; width:56px; --aro:2.5px;}
footer .tag{max-width:38ch;}
footer nav{display:grid; grid-template-columns:repeat(2,auto); gap:11px 34px; align-content:start;}
footer nav a{color:var(--text); font-size:14.5px;}
footer .legal{grid-column:1/-1; border-top:1px solid var(--border); margin-top:18px; padding-top:18px; font-size:12.5px; line-height:1.55; color:var(--muted);}

@media (max-width:880px){
  footer .wrap{grid-template-columns:1fr;}
  .brand img{height:68px; width:68px; --aro:2.5px;}
  .topbar .wrap{min-height:84px; flex-wrap:wrap; row-gap:10px;}
  .legal-page{padding:36px 0 56px;}
}
@media (max-width:560px){
  .topbar .wrap{min-height:0; padding-top:12px; padding-bottom:12px;}
  .brand{font-size:18px; gap:10px;}
  .brand img{height:52px; width:52px; --aro:2px;}
  .a11y{width:100%; justify-content:flex-start;}
  .toggle{font-size:12.5px; padding:7px 11px; min-height:36px;}
  /* La rejilla etiqueta+valor no cabe en dos columnas a este ancho: se apila,
     igual que en la maqueta movil del lienzo de diseno. */
  .datos-basicos{grid-template-columns:1fr; gap:2px 0;}
  .datos-basicos dt{margin-top:10px;}
}