:root{
  --brand-primary:#38BDF8; /* azul claro (logo) */
  --brand-accent:#F472B6;  /* rosa (logo) */
  --brand-warning:#FACC15; /* amarillo (logo) */
  --brand-dark:#0F172A;    /* azul oscuro (logo / texto principal) */
}

html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.nav-blur{background:rgba(255,255,255,.88);backdrop-filter:blur(10px)}

/* ===== Header fijo (desktop + móvil) ===== */
#tfo-topnav{position:fixed;top:0;left:0;right:0;z-index:9999}
#tfo-nav-spacer{display:block}

.bg-brand-dark{background:var(--brand-dark)}
.text-brand-accent{color:var(--brand-accent)}
.bg-brand-cta{background:var(--brand-primary)}

/* ===== Secciones / layout ===== */
.tfo-section{padding:6rem 0}
@media (max-width: 768px){
  .tfo-section{padding:4rem 0}
}

/* ===== Cookie banner ===== */
#cookie-banner-overlay{
  position:fixed; inset:0;
  background:rgba(15, 23, 42, .45);
  z-index:9998;
  display:none;
}
#cookie-banner{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  max-width:520px;
  margin:0 auto;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(15, 23, 42, .18);
  z-index:9999;
  display:none;
}
#cookie-banner .tfo-cookie-inner{padding:18px 18px 14px}
#cookie-banner .tfo-cookie-title{font-weight:900;font-size:16px;margin-bottom:4px}
#cookie-banner .tfo-cookie-text{color:#475569;font-size:13px;line-height:1.45}
#cookie-banner .tfo-cookie-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
#cookie-banner .tfo-btn{
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  font-size:13px;
  border:1px solid #e2e8f0;
}
#cookie-banner .tfo-btn-primary{
  background:var(--brand-primary);
  border-color:transparent;
  color:#fff;
}
#cookie-banner .tfo-btn-ghost{background:#fff;color:#0f172a}
#cookie-banner .tfo-btn-muted{background:#f1f5f9;color:#0f172a;border-color:#e2e8f0}
#cookie-banner details{margin-top:10px}
#cookie-banner .tfo-cookie-box{
  margin-top:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px;
  font-size:13px;
  color:#334155;
}
#cookie-banner .tfo-cookie-row{display:flex;align-items:center;gap:10px;padding:6px 0}
#cookie-banner .tfo-cookie-row input{width:18px;height:18px}

/* --- Añadidos mínimos para panel móvil (compatibilidad iOS/scroll) --- */
#mobileMenu{-webkit-overflow-scrolling:touch}

/* ===== Menú móvil ===== */
@media (max-width: 768px) {
  /* Mantener el header fijo también en móvil (no convertirlo en relative) */
  #tfo-topnav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* Panel desplegable móvil (compatibilidad con otros patrones antiguos) */
  #site-header .mobile-menu,
  #site-header [data-mobile-menu],
  #site-header .mobile-panel {
    background:#ffffff;
    box-shadow:0 20px 40px rgba(15, 23, 42, 0.15);
    border-top:1px solid #e2e8f0;
  }
}

/* ===== FIX: menú móvil NO transparente (drawer/panel) ===== */
@media (max-width: 768px) {

  /* Cualquier panel/drawer típico que esté dentro del header inyectado */
  #site-header [id*="mobile"],
  #site-header [id*="menu"],
  #site-header [class*="mobile"],
  #site-header [class*="menu"],
  #site-header [class*="drawer"],
  #site-header [role="dialog"],
  #site-header [aria-modal="true"]{
    background:#ffffff !important;
  }

  /* Evitar filtros raros en iOS dentro del header */
  #site-header nav,
  #site-header nav *{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Enlaces del menú para que no “floten” */
  #site-header a{
    background:transparent !important;
  }

  /* Si tu panel concreto es este id (por si ya lo tienes) */
  #tfo-mobile-panel,
  #mobilePanel,
  #mobile-menu,
  #mobileMenu{
    background:#ffffff !important;
  }
}