/* Roas Seeker — páginas internas (Nosotros + Blog) · estilo claro alineado con el home
   Paleta: Fondo #F1F3F5 / #FAFAF8 / #FFFFFF · Navy #05070F #0A1020 #0E1730 · Dorado #D4AF37 #FFD158 #E9B949 · Tech #2E7DFF #38E0FF
   Tipografía: Inter (400–800). Solo estilos: no altera textos ni estructura. */
:root{
  --bg:#f1f3f5;--bg-warm:#fafaf8;--white:#fff;
  --navy:#0a1020;--navy-0:#05070f;--navy-2:#0e1730;
  --text:#3a4458;--muted:#566174;--muted-2:#6b7488;
  --line:#dfe4ec;--line-2:#eef1f5;
  --gold:#d4af37;--gold-bright:#ffd158;--amber:#e9b949;--gold-ink:#8a6915;--gold-deep:#927016;
  --blue:#2e7dff;--cyan:#38e0ff;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--navy);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--gold-bright);color:var(--navy-0)}
a{color:var(--gold-ink);text-decoration-color:rgba(212,175,55,.55);text-underline-offset:3px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
a:hover{color:var(--navy);text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* Fondo: retícula y luces suaves, como el home */
.grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(10,16,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,16,32,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 45% at 50% 0%,#000 25%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 45% at 50% 0%,#000 25%,transparent 80%)}
.orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:-2;pointer-events:none}
.o1{width:520px;height:520px;background:radial-gradient(circle,rgba(255,209,88,.38),transparent 65%);top:-200px;left:-160px;opacity:.7}
.o2{width:440px;height:440px;background:radial-gradient(circle,rgba(46,125,255,.14),transparent 65%);top:18%;right:-180px;opacity:.8}

/* Cabecera del artículo */
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.hero{padding:64px 0 36px;border-bottom:1px solid var(--line)}
.crumbs{font-size:12.5px;font-weight:500;color:var(--muted-2);margin-bottom:22px;letter-spacing:.01em}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--gold-ink)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0))}
h1{font-family:"Inter",sans-serif;font-weight:800;font-size:clamp(32px,5.4vw,52px);line-height:1.08;letter-spacing:-.04em;color:var(--navy);margin-bottom:20px;text-wrap:balance}
h1 .g{color:var(--gold-deep);background:none;-webkit-background-clip:initial;background-clip:initial}
.meta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--muted-2);font-size:13px;font-weight:500;margin-top:10px}

/* Cuerpo del artículo */
.article{padding:44px 0 20px;font-size:17px;color:var(--text)}
.article p{margin:0 0 22px;color:var(--text)}
.article h2{font-family:"Inter",sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,30px);letter-spacing:-.03em;line-height:1.2;color:var(--navy);margin:48px 0 16px;scroll-margin-top:96px;text-wrap:balance}
.article h3{font-family:"Inter",sans-serif;font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.3;color:var(--navy-2);margin:30px 0 12px;scroll-margin-top:96px}
.article ul{margin:0 0 22px;padding-left:4px;list-style:none}
.article li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--text)}
.article li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:11px;top:6px}
.article strong{color:var(--navy);font-weight:600}
.lead{font-size:19px;line-height:1.7;color:var(--muted)!important}

.callout{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;background:var(--white);padding:20px 24px;margin:30px 0;font-size:16px;color:var(--text);box-shadow:0 6px 24px rgba(24,40,65,.04)}

/* Bloque CTA: momento navy con acento dorado */
.cta-box{margin:48px 0;border-radius:22px;background:radial-gradient(ellipse 90% 130% at 50% -25%,rgba(255,209,88,.22),transparent 60%),linear-gradient(180deg,var(--navy-2),var(--navy));padding:42px 30px;text-align:center;color:#fff;box-shadow:0 24px 60px rgba(10,16,32,.18)}
.cta-box h3{font-family:"Inter",sans-serif;font-weight:700;font-size:26px;letter-spacing:-.025em;color:#fff;margin-bottom:10px}
.cta-box p{color:#b7c0d1;margin-bottom:24px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Inter",sans-serif;font-weight:600;font-size:15px;text-decoration:none;color:#1a1405;background:var(--gold-bright);padding:15px 26px;border-radius:10px;box-shadow:0 8px 22px rgba(178,139,25,.18);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.btn:hover{color:#1a1405;background:#ffc93f;transform:translateY(-2px);box-shadow:0 14px 30px rgba(178,139,25,.28)}
.btn:active{transform:translateY(0)}

/* Índice */
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);padding:22px 26px;margin:10px 0 34px;box-shadow:0 6px 24px rgba(24,40,65,.04)}
.toc b{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-2);display:block;margin-bottom:12px}
.toc a{display:block;color:var(--navy);font-weight:500;text-decoration:none;padding:8px 0;font-size:15px;border-bottom:1px solid var(--line-2);transition:color .2s var(--ease),padding-left .2s var(--ease)}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--gold-ink);padding-left:6px}

/* Tablas, listas numeradas y artículos relacionados (blog) */
.article .tbl{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.article table{width:100%;border-collapse:collapse;font-size:.94em}
.article th,.article td{border-bottom:1px solid var(--line-2);padding:12px 14px;text-align:left;vertical-align:top}
.article th{background:var(--bg-warm);color:var(--navy);font-weight:600;border-bottom:1px solid var(--line)}
.article tr:last-child td{border-bottom:0}
.article ol{padding-left:1.3em;margin:0 0 1.2em}
.article ol li{margin:.45em 0;padding-left:.2em}
.article ol li::before{content:none}
.article ol li::marker{color:var(--gold-ink);font-weight:600}
.related{display:grid;gap:10px;margin:18px 0}
.related a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--white);text-decoration:none;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.related a:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.6);box-shadow:0 12px 30px rgba(24,40,65,.08)}
.related a b{display:block;color:var(--navy);font-weight:600;letter-spacing:-.01em}
.related a span{font-size:.9em;color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--line);background:var(--white);margin-top:40px;padding:34px 24px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--navy)}
footer a:hover{color:var(--gold-ink)}

@media(max-width:560px){
  .article{font-size:16px}
  .hero{padding:44px 0 28px}
  .wrap{padding:0 18px}
  .toc,.callout{padding:18px 18px}
  .cta-box{padding:34px 20px}
  .orb{filter:blur(60px)}
  .o1{width:70vw;height:70vw;left:-20vw}
  .o2{width:60vw;height:60vw;right:-25vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
/* ===== Barra de menú (idéntica al home; reglas tomadas de home-light.css y acotadas a #header) ===== */
#header .btn{position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; padding: 15px 26px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; will-change: transform;}
#header .btn svg{width: 17px; height: 17px;}
#header .btn-primary{color: rgb(26, 20, 5); background: linear-gradient(100deg,#ffd158,#e9b949); box-shadow: rgba(212, 175, 55, 0.4) 0px 10px 30px; animation: 4.5s ease-in-out 0s infinite normal none running floaty;}
#header .btn-primary:hover{transform: translateY(-4px) scale(1.02); box-shadow: rgba(255, 209, 88, 0.55) 0px 18px 46px;}
#header{position: fixed; top: 0px; left: 0px; right: 0px; z-index: 50; transition: background 0.3s, border-color 0.3s;}
#header.scrolled{background: rgba(5, 7, 15, 0.72); backdrop-filter: blur(16px); border-bottom: 1px solid #dfe4ec;}
#header .nav{display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1180px; margin: 0px auto;}
#header .brand{display: flex; align-items: center; gap: 11px; font-family: Inter, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: #0a1020; text-decoration: none;}
#header .brand .mark{width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: linear-gradient(135deg,#967115,#ffd158); box-shadow: rgba(212, 175, 55, 0.55) 0px 0px 18px;}
#header .nav-links{display: flex; gap: 30px; align-items: center;}
#header .nav-links a{color: #566174; text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color 0.2s;}
#header .nav-links a:hover{color: #0a1020;}
#header .nav-cta{padding: 11px 20px; font-size: 14px;}
#header .nav-links a.nav-cta{color: rgb(26, 20, 5); font-weight: 700;}
#header .nav-links a.nav-cta:hover{color: rgb(26, 20, 5);}
#header .burger{display: none; background: none; border: 0px; cursor: pointer; flex-direction: column; gap: 5px;}
#header .burger span{width: 24px; height: 2px; background: #0a1020; border-radius: 2px; transition: 0.3s;}
@media (max-width: 900px){#header .nav-links{position: fixed; top: 68px; left: 16px; right: 16px; flex-direction: column; gap: 8px; align-items: stretch; background: rgba(8, 12, 24, 0.96); backdrop-filter: blur(16px); border: 1px solid #dfe4ec; border-radius: 16px; padding: 16px; transform: translateY(-14px); opacity: 0; pointer-events: none; transition: 0.3s;}}
@media (max-width: 900px){#header .nav-links.open{transform: none; opacity: 1; pointer-events: auto;}}
@media (max-width: 900px){#header .nav-links a{padding: 10px 6px;}}
@media (max-width: 900px){#header .nav-drop{width: 100%;}}
@media (max-width: 900px){#header .nav-drop-btn{width: 100%; justify-content: space-between; padding: 10px 6px; font-size: 15px;}}
@media (max-width: 900px){#header .drop-panel{position: static; transform: none; width: 100%; opacity: 1; visibility: visible; display: none; box-shadow: none; margin-top: 6px; padding: 8px;}}
@media (max-width: 900px){#header .nav-drop.open .drop-panel{display: block; transform: none;}}
@media (max-width: 900px){#header .burger{display: flex;}}
#header .mark-img{width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: rgba(212, 175, 55, 0.45) 0px 0px 16px;}
#header .nav-drop{position: relative;}
#header .nav-drop-btn{background: none; border: 0px; color: #566174; font-family: Inter, sans-serif; font-size: 14.5px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0px; transition: color 0.2s;}
#header .nav-drop-btn:hover{color: #0a1020;}
#header .nav-drop .caret{font-size: 10px; transition: transform 0.25s;}
#header .nav-drop.open .caret{transform: rotate(180deg);}
#header .drop-panel{position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px); width: 310px; background: linear-gradient(180deg,#f1f3f5,#fff); border: 1px solid #dfe4ec; border-radius: 16px; padding: 14px; box-shadow: rgba(0, 0, 0, 0.55) 0px 24px 60px; opacity: 0; visibility: hidden; transition: 0.25s; z-index: 60;}
#header .nav-drop.open .drop-panel{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px);}
#header .drop-cat{padding: 6px;}
#header .drop-cat + .drop-cat{margin-top: 8px; border-top: 1px solid #dfe4ec; padding-top: 12px;}
#header .drop-cat-title{font-family: Inter, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #967115; display: block; margin-bottom: 8px;}
#header .drop-item{display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 11px; text-decoration: none; transition: background 0.2s;}
#header .drop-item:hover{background: rgba(212, 175, 55, 0.08);}
#header .drop-ic{font-size: 22px; flex-shrink: 0; line-height: 1;}
#header .drop-item b{font-family: Inter, sans-serif; font-size: 14.5px; color: #0a1020; display: block;}
#header .drop-item em{font-style: normal; font-size: 12.5px; color: #566174; display: block; margin-top: 2px; line-height: 1.4;}
@media (hover: hover) and (min-width: 901px){#header .nav-drop:hover .drop-panel{opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px);}}
@media (hover: hover) and (min-width: 901px){#header .nav-drop:hover .caret{transform: rotate(180deg);}}
#header,#header.scrolled{background: rgba(241, 243, 245, 0.97); border-bottom: 1px solid rgb(226, 230, 237); backdrop-filter: blur(14px);}
#header .btn{border-radius: 10px;}
#header .btn-primary{background: rgb(255, 209, 88); box-shadow: rgba(178, 139, 25, 0.125) 0px 8px 22px; animation: auto ease 0s 1 normal none running none;}
#header .btn-primary:hover{box-shadow: rgba(178, 139, 25, 0.19) 0px 10px 28px;}
#header .drop-panel{background: rgb(255, 255, 255); box-shadow: rgba(10, 16, 32, 0.094) 0px 18px 45px;}
#header .drop-item:hover{background: rgb(241, 245, 251);}
@media (max-width: 768px){#header .nav-links{background: rgb(255, 255, 255);}}
#header .brand{font-weight: 700;}
#header .btn,#header .drop-item b{font-weight: 600;}
#header .drop-cat-title{font-weight: 500;}
#header .nav{max-width: 1320px; gap: 24px; padding-block: 14px;}
#header .nav-links{gap: 4px; padding: 5px; background: rgba(255, 255, 255, 0.65); border: 1px solid rgb(223, 229, 237); border-radius: 18px; box-shadow: rgba(24, 40, 65, 0.024) 0px 5px 20px;}
#header .nav-links > a:not(.nav-cta),#header .nav-drop-btn{position: relative; padding: 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: rgb(78, 90, 112); transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;}
#header .nav-links > a:not(.nav-cta):hover,#header .nav-drop-btn:hover,#header .nav-drop.open .nav-drop-btn{background: rgb(234, 242, 255); color: rgb(22, 93, 194); box-shadow: rgb(214, 229, 252) 0px 0px 0px 1px inset; transform: translateY(-1px);}
#header .nav-links > a:not(.nav-cta)::after,#header .nav-drop-btn::after{content: ""; position: absolute; bottom: 6px; left: 50%; height: 2px; width: 0px; background: rgb(212, 175, 55); border-radius: 4px; transition: width 0.25s, left 0.25s;}
#header .nav-links > a:not(.nav-cta):hover::after,#header .nav-drop-btn:hover::after{width: 18px; left: calc(50% - 9px);}
#header .nav-links .nav-cta{padding: 12px 18px; margin-left: 6px; border-radius: 12px; box-shadow: rgba(212, 175, 55, 0.15) 0px 5px 16px; font-size: 13px;}
#header .nav-cta:hover{background: rgb(255, 218, 117); transform: translateY(-2px);}
#header .drop-panel{border-radius: 20px; padding: 17px; box-shadow: rgba(14, 23, 48, 0.12) 0px 20px 55px; top: calc(100% + 12px);}
#header .drop-item{border-radius: 12px;}
#header .drop-ic{background: rgb(238, 244, 255); border: 1px solid rgb(220, 231, 250); border-radius: 10px;}
@media (max-width: 1050px) and (min-width: 901px){#header .nav{gap: 12px;}}
@media (max-width: 1050px) and (min-width: 901px){#header .nav-links > a:not(.nav-cta),#header .nav-drop-btn{padding: 11px 9px; font-size: 12px;}}
@media (max-width: 1050px) and (min-width: 901px){#header .nav-links .nav-cta{padding: 11px 12px;}}
@media (max-width: 1050px) and (min-width: 901px){#header .brand{font-size: 17px;}}
@media (max-width: 900px){#header .nav{padding: 14px 24px;}}
@media (max-width: 900px){#header .nav-links{padding: 12px; gap: 5px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(14, 23, 48, 0.098) 0px 20px 45px;}}
@media (max-width: 900px){#header .nav-links > a:not(.nav-cta),#header .nav-drop-btn{padding: 13px 16px; font-size: 14px;}}
@media (max-width: 900px){#header .nav-drop-btn{width: 100%; justify-content: space-between;}}
@media (max-width: 900px){#header .nav-links .nav-cta{margin: 4px 0px 0px; padding: 14px 18px;}}
@media (max-width: 900px){#header .burger{padding: 10px; border: 1px solid rgb(220, 227, 236); border-radius: 11px; background: rgb(255, 255, 255);}}
@media (max-width: 900px){#header .drop-panel{box-shadow: none;}}
@media (prefers-reduced-motion: reduce){#header .nav-links > a,#header .nav-drop-btn{transition: none;}}
/* Ajustes para páginas internas */
#header{position:sticky;top:0}
#header .nav-links a[aria-current]{color:#0a1020;background:#fff;box-shadow:0 1px 4px rgba(24,40,65,.08)}