/* =============================================================================
   DataThemes · chrome.css
   Header + Footer globales (diseño de la plantilla), adaptados a los tokens
   del theme. Las variables locales de la plantilla se mapean a var(--dt-*)
   para que hereden la identidad y el clonado siga funcionando.
   ========================================================================== */

.site-header, .site-footer, .mobile-panel, .search-overlay {
  /* Puente: variables de la plantilla -> tokens del theme */
  --ink: var(--dt-ink-deep, #0D0C10);
  --ink-2: var(--dt-ink, #17161A);
  --purple: var(--dt-purple, #413C58);
  --pink: var(--dt-primary, #F54576);
  --yellow: var(--dt-yellow, #FBD87F);
  --paper: var(--dt-paper, #FAFAF8);
  --lilac: var(--dt-lilac, #D4D0E4);
  --txt-light: var(--dt-paper, #FAFAF8);
  --txt-muted: #A7A3B2;
  --border-dark: rgba(255,255,255,.10);
  --maxw: var(--dt-content-width, 1200px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Logo fallback tipográfico dentro del header/footer oscuro */
.site-header .dt-logo--text, .mobile-panel .dt-logo--text, .footer-brand .dt-logo--text {
  font-family: var(--dt-font-heading, 'Playfair Display', serif);
  font-style: italic; font-weight: 700; font-size: 25px;
}
.site-header .dt-logo__a, .mobile-panel .dt-logo__a, .footer-brand .dt-logo__a { color: var(--dt-paper, #FAFAF8); font-style: normal; font-weight: 600; }
.site-header .dt-logo__b, .mobile-panel .dt-logo__b, .footer-brand .dt-logo__b { color: var(--dt-primary, #F54576); font-style: normal; }
.dt-logo img { height: 40px; width: auto; }
.footer-brand .dt-logo img { height: 34px; }

/* Reset de subrayado: los enlaces del header/footer nunca van subrayados
   (anula la regla global a:hover{text-decoration:underline} de base.css). */
.site-header a,
.site-header a:hover,
.mobile-panel a,
.mobile-panel a:hover,
.search-overlay a,
.search-overlay a:hover,
.site-footer a,
.site-footer a:hover { text-decoration: none; }

.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(13,12,16,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;   /* sin línea visible */
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:24px 28px;   /* + top */
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand-logo{height:40px;width:auto}
.brand-fallback{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:25px;color:var(--paper)}
.brand-fallback .dot{color:var(--pink);font-style:normal}
.brand-fallback .t{font-style:normal;font-weight:600;font-size:23px}

.nav{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav li{list-style:none}
.nav > li{position:relative}
.nav > li > a{font-size:15px;color:#D3D0DC;font-weight:500;transition:color .2s;display:inline-flex;align-items:center;gap:6px;padding:10px 0}
/* Puente invisible: evita que el mega-menú se cierre al cruzar el hueco */
.nav > li.has-mega::after{content:"";position:absolute;left:-40px;right:-40px;top:100%;height:26px;display:none}
.nav > li.has-mega:hover::after{display:block}
.nav > li > a:hover{color:var(--paper)}
.nav .caret{font-size:14px;transition:transform .25s var(--ease)}
.nav > li:hover .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
  width:820px;max-width:94vw;background:#141218;border:1px solid var(--border-dark);border-radius:18px;
  padding:28px;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:26px;
  opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 30px 70px rgba(0,0,0,.5);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav > li:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-col h6{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:16px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.mega-col h6::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.mega-col > a{display:flex;align-items:center;gap:12px;padding:10px 0;transition:transform .18s var(--ease)}
.mega-col > a:hover{transform:translateX(3px)}
.mega-col > a .mi{
  flex:0 0 38px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(245,69,118,.10);color:var(--pink);font-size:19px;transition:background .18s,color .18s;
}
.mega-col > a:hover .mi{background:var(--pink);color:#fff}
.mega-col > a b{font-size:15px;font-weight:600;color:#EDEBF2;line-height:1.25}
.mega-col.actions{display:flex;flex-direction:column;gap:20px}
.cta-wrap{display:flex;flex-direction:column;gap:8px}
.cta-label{font-size:12.5px;color:var(--txt-muted);line-height:1.35;padding-left:2px}
.mega-cta{display:flex;align-items:center;gap:13px;padding:16px 20px;border-radius:14px;font-size:15px;font-weight:700;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s}
.mega-cta .ic{flex:0 0 24px;font-size:24px;display:flex}
.mega-cta.audit{background:var(--pink);color:#fff;box-shadow:0 6px 20px rgba(245,69,118,.25)}
.mega-cta.audit:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(245,69,118,.5)}
.mega-cta.keys{background:rgba(251,216,127,.08);border:1px solid rgba(251,216,127,.30);color:var(--yellow)}
.mega-cta.keys:hover{transform:translateY(-3px);background:var(--yellow);color:#5a4a12;border-color:var(--yellow);box-shadow:0 14px 34px rgba(251,216,127,.35)}
.mega-cta.keys:hover .ic{color:#5a4a12}

.header-cta{display:flex;align-items:center;gap:18px}
.search-toggle{
  background:none;border:none;color:var(--lilac);cursor:pointer;font-size:22px;
  display:flex;align-items:center;transition:color .2s,transform .2s var(--ease);
}
.search-toggle:hover{color:var(--paper);transform:scale(1.08)}
.btn-eval{background:var(--pink);color:#fff;font-weight:600;font-size:14px;padding:13px 24px;border-radius:100px;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s}
.btn-eval:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(245,69,118,.4)}

.burger{display:none;background:none;border:none;color:var(--paper);cursor:pointer;font-size:28px;padding:0}

/* Panel de menú móvil */
.mobile-panel{
  position:fixed;inset:0;z-index:2100;background:var(--ink);
  display:flex;flex-direction:column;padding:26px 24px 40px;
  transform:translateX(100%);transition:transform .38s var(--ease);overflow-y:auto;
}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.mobile-panel-head .brand-fallback{font-size:23px}
.mobile-close{background:none;border:none;color:var(--paper);font-size:30px;cursor:pointer}
.mobile-links{display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.mobile-links > a,.mobile-acc-trigger{
  font-family:'Playfair Display',serif;font-size:26px;color:var(--paper);padding:15px 0;
  border-bottom:1px solid var(--border-dark);display:flex;align-items:center;justify-content:space-between;
  background:none;border-left:none;border-right:none;border-top:none;width:100%;cursor:pointer;text-align:left;
}
.mobile-acc-trigger i{font-size:22px;transition:transform .25s var(--ease)}
.mobile-acc.open .mobile-acc-trigger i{transform:rotate(180deg)}
.mobile-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.mobile-acc.open .mobile-sub{max-height:600px}
.mobile-sub a{display:block;font-size:18px;color:var(--lilac);padding:13px 0 13px 16px;font-family:'Poppins',sans-serif}
.mobile-sub .sub-h{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-muted);padding:16px 0 6px;font-weight:600}
.mobile-panel-cta{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.mobile-panel-cta a{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;border-radius:100px;font-weight:600;font-size:15px;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.mobile-panel-cta .pc-eval{background:var(--pink);color:#fff;box-shadow:0 8px 24px rgba(245,69,118,.32)}
.mobile-panel-cta .pc-eval:active{transform:scale(.98)}
.mobile-panel-cta .pc-audit{background:transparent;border:1.5px solid rgba(245,69,118,.45);color:var(--pink)}
.mobile-panel-cta .pc-audit:active{transform:scale(.98)}

@media(max-width:980px){
  .nav,.header-cta .btn-eval{display:none}
  .burger{display:block}
}

/* ============================================================
   SEARCH OVERLAY (modal centrado)
   ============================================================ */
.search-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(8,7,10,.86);backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:16vh;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.search-overlay.open{opacity:1;visibility:visible}
.search-box{width:640px;max-width:90vw;transform:translateY(-16px);transition:transform .3s var(--ease)}
.search-overlay.open .search-box{transform:translateY(0)}
.search-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-muted);margin-bottom:14px;display:block;text-align:center}
.search-field{display:flex;align-items:center;gap:14px;background:#141218;border:1px solid var(--border-dark);border-radius:16px;padding:20px 22px}
.search-field i{font-size:26px;color:var(--pink)}
.search-field input{flex:1;background:none;border:none;outline:none;color:var(--paper);font-family:'Poppins',sans-serif;font-size:19px}
.search-field input::placeholder{color:var(--txt-muted)}
.search-close{position:absolute;top:28px;right:32px;background:none;border:none;color:var(--lilac);font-size:30px;cursor:pointer;transition:color .2s,transform .2s}
.search-close:hover{color:var(--paper);transform:rotate(90deg)}
.search-hint{text-align:center;margin-top:16px;font-size:13px;color:var(--txt-muted)}
.search-hint kbd{background:rgba(255,255,255,.08);border:1px solid var(--border-dark);border-radius:6px;padding:2px 8px;font-size:12px}

.site-footer{background:var(--ink-2);color:var(--txt-light);border-top:1px solid var(--border-dark);padding:72px 0 30px}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--border-dark)}
.footer-logo{height:34px;margin-bottom:16px}
.footer-brand p{font-size:14px;color:var(--txt-muted);line-height:1.6;max-width:320px;margin-bottom:18px;font-weight:300}
.footer-nap{font-size:14px;color:var(--lilac);display:flex;flex-direction:column;gap:6px}
.footer-nap a:hover{color:var(--pink)}
.footer-col h5{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);margin-bottom:18px;font-weight:600}
.footer-col a{display:block;font-size:14px;color:var(--txt-muted);padding:6px 0;transition:color .18s var(--ease)}
.footer-col a:hover{color:var(--lilac)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px;flex-wrap:wrap}
.footer-bottom .copy{font-size:13px;color:var(--txt-muted)}
.footer-bottom .copy a{color:inherit}
.footer-bottom .copy a:hover{color:var(--pink)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--border-dark);color:var(--lilac);font-size:20px;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.footer-social a:hover{transform:translateY(-3px);background:var(--pink);color:#fff;border-color:var(--pink)}

/* Móvil: footer a 2 columnas */
@media(max-width:820px){
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1 / -1}
}
@media(max-width:520px){
  .footer-bottom{flex-direction:column;align-items:flex-start}
  /* Móvil: texto del footer más grande y legible */
  .footer-brand p{font-size:16px}
  .footer-nap{font-size:16px}
  .footer-col h5{font-size:15px;margin-bottom:14px}
  .footer-col a{font-size:16px;padding:9px 0}
  .footer-bottom .copy{font-size:15px}
  .footer-top{gap:34px}
}
@media(prefers-reduced-motion:reduce){
  .site-header *, .site-footer *, .mobile-panel *, .search-overlay * { transition:none!important }
}

/* Dropdown normal (ítems con hijos SIN clase dt-mega-menu) */
.nav > li.has-dropdown { position: relative; }
.nav > li.has-dropdown .dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
  background: #141218; border: 1px solid var(--border-dark); border-radius: 14px;
  padding: 10px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 1001;
}
.nav > li.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav > li.has-dropdown .dropdown li { margin: 0; list-style: none; }
.nav > li.has-dropdown .dropdown a { display: block; padding: 10px 12px; border-radius: 8px; color: #D3D0DC; font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.nav > li.has-dropdown .dropdown a:hover { background: rgba(245,69,118,.12); color: var(--paper); text-decoration: none; }