:root{
  --bg:#f5f6fb; --surface:#ffffff; --surface-2:#fafbff;
  --line:#e4e7f2; --line-soft:#edeff7;
  --ink:#1b1d2b; --ink-2:#565d78; --ink-3:#8a90a8;
  --brand:#5b60d6; --brand-2:#8065ea; --brand-soft:#eef0ff; --brand-line:#d9ddfb;
  --teal:#0f9e7c; --teal-soft:#e5f7f1;
  --amber:#d78a2c; --amber-soft:#fdf4e7;
  --rose:#dd5d7c; --rose-soft:#fdeef2;
  --err:#c0392f;
  --radius:16px;
  --shadow:0 1px 2px rgba(27,29,43,.04), 0 6px 20px rgba(27,29,43,.05);
  --shadow-lg:0 2px 4px rgba(27,29,43,.04), 0 14px 40px rgba(27,29,43,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background-color:var(--bg);
  background-image:
    radial-gradient(760px 420px at 12% -8%, rgba(128,101,234,.13), transparent 62%),
    radial-gradient(700px 400px at 88% -6%, rgba(15,158,124,.10), transparent 60%),
    radial-gradient(620px 360px at 50% -14%, rgba(221,93,124,.08), transparent 62%);
  background-attachment:fixed;background-repeat:no-repeat;
  font-size:16px;line-height:1.65;
}
img{max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 20px}

/* ---------- Cabecera ---------- */
.site-head{
  position:sticky;top:0;z-index:60;height:66px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{height:66px;display:flex;align-items:center;gap:14px}
.brandmark{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink);text-decoration:none}
.brandmark svg{width:31px;height:31px;display:block;flex:0 0 auto}
.brandmark b{font-size:16px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brandmark span{display:block;font-size:10.5px;color:var(--ink-3);line-height:1;margin-top:1px;letter-spacing:.02em}
.brandmark:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  color:var(--ink-2);font-size:14px;font-weight:600;padding:8px 11px;border-radius:9px;
  text-decoration:none;white-space:nowrap;
}
.nav a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
.burger{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:10px;width:38px;height:34px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink-2)}

/* selector de idioma */
.lang{position:relative;flex:0 0 auto}
.lang-btn{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 11px 6px 9px;font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.lang-btn:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.lang-btn .flag{font-size:15px;line-height:1}
.lang-btn .caret{font-size:9px;color:var(--ink-3)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:178px;
  background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);
  padding:6px;display:none;z-index:80;
}
.lang-menu.open{display:block}
.lang-menu button{
  width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:8px 10px;border-radius:9px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink-2);text-align:left;
}
.lang-menu button:hover{background:var(--brand-soft);color:var(--brand)}
.lang-menu button[aria-selected="true"]{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}

/* ---------- Banner del encabezado ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(560px 300px at 82% 8%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(520px 320px at 14% 94%, rgba(128,101,234,.46), transparent 62%),
    linear-gradient(145deg,#0f1640 0%,#1d2d80 36%,#3a5bd0 74%,#5a7cec 100%);
  padding:54px 0 46px;
}
.hero h1{
  margin:0 0 12px;font-size:clamp(27px,4.6vw,44px);line-height:1.12;letter-spacing:-.028em;font-weight:800;
  background:linear-gradient(180deg,#ffffff 0%,#dde7ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{margin:0 auto;max-width:680px;font-size:clamp(15px,2vw,17.5px);color:rgba(255,255,255,.84);line-height:1.6}
.hero .wrap{text-align:center}
.badges{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:rgba(255,255,255,.95);
}
.badge i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto}
.badge.v i{background:#9b8cff}.badge.t i{background:#5ee0b4}
.badge.a i{background:#ffc46f}.badge.r i{background:#ff9fb6}

/* ---------- Tarjetas y tipografía ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:22px}
h2{font-size:clamp(21px,3vw,28px);line-height:1.25;letter-spacing:-.02em;margin:0 0 12px;font-weight:800}
h3{font-size:19px;line-height:1.35;letter-spacing:-.015em;margin:26px 0 8px;font-weight:700}
.muted{color:var(--ink-2)}
.small{font-size:13.5px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--font);font-size:14.5px;font-weight:700;padding:11px 18px;border-radius:11px;
  border:1px solid transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 14px rgba(91,96,214,.28);transition:filter .15s,background .15s,border-color .15s;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.06);text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--ink-2);border-color:var(--line);box-shadow:none}
.btn.sec:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line);filter:none}
.btn.sm{padding:8px 13px;font-size:13.5px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Espacios publicitarios ---------- */
.adslot{
  margin:30px 0;border:1.5px dashed var(--brand-line);border-radius:14px;
  background:linear-gradient(160deg,#fbfcff,#f4f6ff);
  min-height:104px;display:flex;align-items:center;justify-content:center;
  color:#b3b8cd;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:18px;text-align:center;
}

/* ---------- Preguntas frecuentes ---------- */
.faq{counter-reset:faq}
.faq details{
  counter-increment:faq;background:#fff;border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);margin-bottom:11px;overflow:hidden;transition:background .18s,border-color .18s;
}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:13px;
  padding:16px 18px;font-weight:700;font-size:16px;line-height:1.4;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:counter(faq);flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.faq details:nth-of-type(6n+2) summary::before{background:linear-gradient(135deg,#0f9e7c,#33bd9a)}
.faq details:nth-of-type(6n+3) summary::before{background:linear-gradient(135deg,#d78a2c,#e8a94f)}
.faq details:nth-of-type(6n+4) summary::before{background:linear-gradient(135deg,#dd5d7c,#ef8098)}
.faq details:nth-of-type(6n+5) summary::before{background:linear-gradient(135deg,#3f7fd6,#63a0ea)}
.faq details:nth-of-type(6n+0) summary::before{background:linear-gradient(135deg,#7d55c7,#9a78dd)}
.faq summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;font-size:22px;font-weight:400;color:var(--ink-3);line-height:1;
}
.faq details[open]{background:linear-gradient(180deg,#f7f8ff,#ffffff);border-color:var(--brand-line)}
.faq details[open] summary{color:var(--brand)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 18px 17px 63px;color:var(--ink-2);font-size:15px}
.faq .a p{margin:0 0 9px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Franja de privacidad ---------- */
.privacy-band{
  margin-top:56px;color:#fff;padding:44px 0;
  background:
    radial-gradient(520px 280px at 84% 10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(480px 300px at 12% 92%, rgba(91,96,214,.30), transparent 62%),
    linear-gradient(145deg,#5a6274 0%,#3c4354 40%,#282d3a 75%,#191c26 100%);
}
.privacy-band h2{color:#fff;margin-bottom:10px}
.privacy-band p{color:rgba(255,255,255,.76);margin:0 0 10px;max-width:760px}
.privacy-band p:last-child{margin-bottom:0}
.privacy-band a{color:#bcc6ff}

/* ---------- Pie ---------- */
.site-foot{
  position:relative;color:rgba(255,255,255,.62);
  background:linear-gradient(150deg,#141a3c 0%,#1b2555 55%,#2a3878 100%);
  padding:38px 0 30px;font-size:14px;
}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#5b60d6 0%,#0f9e7c 26%,#d78a2c 52%,#dd5d7c 76%,#3f7fd6 100%);
}
.site-foot a{color:rgba(255,255,255,.86)}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between}
.foot-grid h4{margin:0 0 9px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:800}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:5px}
.foot-sign{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);font-size:13px}

/* ---------- Tarjetas de guías ---------- */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.gcard{
  display:block;background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;
  box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;
}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--brand-line);text-decoration:none}
.gcard .tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin-bottom:10px;
}
.gcard h3{margin:0 0 7px;font-size:17px;line-height:1.35}
.gcard p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.t-v{background:var(--brand-soft);color:var(--brand)}
.t-t{background:var(--teal-soft);color:var(--teal)}
.t-a{background:var(--amber-soft);color:var(--amber)}
.t-r{background:var(--rose-soft);color:var(--rose)}
.t-b{background:#e8f0fc;color:#3f7fd6}
.t-p{background:#f0eafb;color:#7d55c7}

@media(max-width:760px){
  .nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:8px;box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:11px 12px}
  .burger{display:flex}
  .lang{order:3}
  .hero{padding:40px 0 34px}
  .foot-grid{gap:20px 28px}
}
@media print{
  .site-head,.hero,.site-foot,.adslot,.privacy-band,.no-print{display:none !important}
  body{background:#fff}
}

/* ---------- Páginas de contenido ---------- */
.page{padding-block:38px 10px}
.crumbs{font-size:13px;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand)}
.art h1{font-size:clamp(26px,4.2vw,40px);line-height:1.15;letter-spacing:-.028em;margin:0 0 12px;font-weight:800}
.art .standfirst{font-size:clamp(16px,2.2vw,19px);color:var(--ink-2);line-height:1.6;margin:0 0 20px}
.art .meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--ink-3);
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:26px;
}
.art .meta a{color:var(--brand);font-weight:600}
.art{font-size:16.5px;line-height:1.75}
.art p{margin:0 0 16px}
.art h2{margin:34px 0 12px}
.art h3{margin:26px 0 8px;font-size:18.5px}
.art ul,.art ol{margin:0 0 16px;padding-left:22px}
.art li{margin-bottom:8px}
.art strong{font-weight:700;color:var(--ink)}
.art blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:3px solid var(--brand-line);color:var(--ink-2);font-style:italic}

.toc{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:var(--shadow);margin:0 0 28px;
}
.toc h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand);margin:0 0 10px;font-weight:800}
.toc ol{margin:0;padding-left:20px;font-size:15px}
.toc li{margin-bottom:5px}
.toc a{color:var(--ink-2);font-weight:600}
.toc a:hover{color:var(--brand)}

.box{
  border-radius:14px;padding:17px 19px;margin:22px 0;border:1px solid var(--brand-line);
  background:linear-gradient(160deg,#f7f8ff,#eef0ff);font-size:15.5px;line-height:1.65;
}
.box p:last-child{margin-bottom:0}
.box b.lbl{
  display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;font-weight:800;
}
.box.t{border-color:#bfe8da;background:linear-gradient(160deg,#f2fcf8,#e5f7f1)}
.box.t b.lbl{color:var(--teal)}
.box.a{border-color:#f3dcb6;background:linear-gradient(160deg,#fdf9f1,#fdf4e7)}
.box.a b.lbl{color:var(--amber)}
.box.r{border-color:#f6cdd8;background:linear-gradient(160deg,#fdf5f7,#fdeef2)}
.box.r b.lbl{color:var(--rose)}

.tbl-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow)}
table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
table.data th{
  background:linear-gradient(135deg,#eef0ff,#f6f7ff);text-align:left;padding:11px 13px;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
table.data td{padding:10px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
table.data td.n{text-align:right;font-family:var(--mono);font-size:13.5px;color:#0b7d61;font-weight:700;white-space:nowrap}

.readmore{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.readmore h2{font-size:19px;margin:0 0 14px}
.cta-tool{
  margin:32px 0;padding:24px;border-radius:16px;color:#fff;text-align:center;
  background:radial-gradient(420px 220px at 80% 10%, rgba(255,255,255,.16), transparent 60%),
             linear-gradient(145deg,#0f1640 0%,#1d2d80 40%,#3a5bd0 80%,#5a7cec 100%);
}
.cta-tool h2{color:#fff;margin:0 0 8px;font-size:21px}
.cta-tool p{color:rgba(255,255,255,.82);margin:0 0 16px;font-size:15.5px}
.cta-tool .btn{background:#fff;color:#1d2d80;box-shadow:0 4px 16px rgba(0,0,0,.22)}
.cta-tool .btn:hover{color:#1d2d80;filter:brightness(.97)}
.sign{
  margin-top:34px;display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:17px 19px;box-shadow:var(--shadow);font-size:14.5px;color:var(--ink-2);line-height:1.6;
}
.sign .av{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,#5b60d6,#8f63ec);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;
}
.sign b{color:var(--ink);display:block;margin-bottom:2px}
@media(max-width:760px){.page{padding-block:26px 6px}.art{font-size:16px}}