/* ==========================================================================
   Barra de navegación v2 (se carga después de photo.css, premium.css y extras.css).
   - Logotipo original para el nombre + descriptor oficial «Productor Asesor de Seguros».
   - Píldora más fina, con tono ADAPTABLE: clara sobre secciones claras y oscura sobre las oscuras (js/header.js fija data-tone).
   - Menú desplegable de soluciones. «Para Productores» pasó al pie.
   Sin JavaScript la barra queda en tono claro (todas las páginas empiezan sobre fondo claro).
   ========================================================================== */
:root { --pill-h: 3.75rem; --logo-blue: #0B5CA3; }

/* ---------- tono: claro por defecto; oscuro sobre secciones oscuras; el menú abierto del celular siempre es oscuro ---------- */
.site-header:not([data-tone="dark"]):not(.nav-open) { color: var(--navy); }
.site-header[data-tone="dark"], .site-header.nav-open { color: #fff; }

/* ---------- píldora ---------- */
.site-header .container { min-height: var(--pill-h); padding: .35rem .5rem .35rem 1.1rem; }
.site-header .container::before { transition: background .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.site-header:not([data-tone="dark"]):not(.nav-open) .container::before {
  background: rgba(255, 255, 255, .82); border-color: rgba(10, 37, 67, .10); box-shadow: 0 18px 40px -26px rgba(6, 23, 42, .55);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.site-header.is-scrolled:not([data-tone="dark"]):not(.nav-open) .container::before { background: rgba(255, 255, 255, .92); }
.site-header[data-tone="dark"]:not(.nav-open) .container::before { background: rgba(9, 31, 58, .95); border-color: rgba(255, 255, 255, .10); box-shadow: 0 16px 36px -16px rgba(3, 12, 26, .7); }

/* ---------- logotipo: isotipo + nombre (logotipo original) + descriptor oficial ---------- */
.lockup { gap: .8rem; }
.lockup .lockup__iso { width: 46px; height: 46px; flex: none; }
.lockup__brand { display: grid; gap: .22rem; align-content: center; min-width: 0; }
.lockup img.lockup__name { width: auto; height: 24px; max-width: none; flex: none; }
.lockup__role { display: block; font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .09em; line-height: 1; white-space: nowrap; }
/* variantes según el fondo */
.lockup__iso--light, .lockup__name--light { display: none; }
.lockup__iso--dark, .lockup__name--dark { display: block; }
.site-header[data-tone="dark"]:not(.nav-open) .lockup__iso--light, .site-header.nav-open .lockup__iso--light,
.site-header[data-tone="dark"]:not(.nav-open) .lockup__name--light, .site-header.nav-open .lockup__name--light { display: block; }
.site-header[data-tone="dark"]:not(.nav-open) .lockup__iso--dark, .site-header.nav-open .lockup__iso--dark,
.site-header[data-tone="dark"]:not(.nav-open) .lockup__name--dark, .site-header.nav-open .lockup__name--dark { display: none; }
.site-header:not([data-tone="dark"]):not(.nav-open) .lockup__role { color: var(--logo-blue); }
.site-header[data-tone="dark"] .lockup__role, .site-header.nav-open .lockup__role { color: rgba(255, 255, 255, .92); }
@media (max-width: 520px) {
  .lockup { gap: .65rem; }
  .lockup .lockup__iso { width: 42px; height: 42px; }
  .lockup img.lockup__name { height: 21px; }
  .lockup__role { display: block; font-size: .7rem; letter-spacing: .075em; }
}

/* ---------- enlaces, botón y hamburguesa según el tono ---------- */
.site-header:not([data-tone="dark"]):not(.nav-open) .nav .btn { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.site-header[data-tone="dark"] .nav .btn, .site-header.nav-open .nav .btn { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.site-header:not([data-tone="dark"]):not(.nav-open) .menu-toggle { border-color: rgba(10, 37, 67, .24); color: var(--navy); }
.site-header[data-tone="dark"] .menu-toggle, .site-header.nav-open .menu-toggle { border-color: rgba(255, 255, 255, .22); color: #fff; }
.site-header .nav a:not(.btn) { font-weight: 500; }

/* ==========================================================================
   Menú desplegable de soluciones (escritorio ≥ 1240 px)
   ========================================================================== */
.nav__dd { position: relative; }
.nav__dd-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.nav__dd-toggle .chev { flex: none; opacity: .75; transition: transform .3s var(--ease-out); }
.nav .nav__panel a::after { display: none; }

@media (min-width: 1240px) {
  .nav__dd:hover .chev, .nav__dd:focus-within .chev, .nav__dd.is-open .chev { transform: rotate(180deg); }
  .nav__panel { position: absolute; top: 100%; left: 50%; z-index: 5; width: min(660px, 92vw); padding-top: 1.45rem;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px);
    transition: opacity .25s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s; }
  .nav__dd:hover .nav__panel, .nav__dd:focus-within .nav__panel, .nav__dd.is-open .nav__panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav__dd.is-closed .nav__panel { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav__panel-in { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1rem; padding: 1rem 1rem .6rem; border-radius: 22px; background: #fff; color: var(--ink);
    border: 1px solid rgba(10, 37, 67, .12); box-shadow: 0 44px 90px -40px rgba(6, 23, 42, .6), 0 12px 24px -16px rgba(6, 23, 42, .25); }
  .nav__col { display: grid; gap: .1rem; align-content: start; }
  .nav__h { margin: .3rem .75rem .45rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
  .nav .nav__panel a:not(.nav__all) { display: grid; gap: .12rem; padding: .62rem .75rem; border-radius: 12px; color: var(--ink); white-space: normal; transition: background .2s; }
  .nav .nav__panel a:not(.nav__all):hover, .nav .nav__panel a:not(.nav__all):focus-visible { background: var(--paper); }
  .nav__panel a b { font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; line-height: 1.2; }
  .nav__panel a span { font-size: .84rem; line-height: 1.35; color: var(--stone); }
  .nav .nav__panel a.nav__all { grid-column: 1 / -1; margin-top: .3rem; padding: .8rem .75rem .6rem; border-top: 1px solid var(--line); border-radius: 0; font-size: .9rem; font-weight: 600; color: var(--blue-ink); }
  .nav .nav__panel a.nav__all:hover { color: var(--navy); }
}

/* ==========================================================================
   Menú desplegable en celular y tablet (≤ 1239 px): las soluciones se listan dentro del menú
   ========================================================================== */
@media (max-width: 1239px) {
  .nav { overflow-y: auto; justify-content: flex-start; }
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  .nav a:not(.btn) { font-size: clamp(1.7rem, 6.4vw, 2.3rem); }
  .nav__dd { width: 100%; }
  .nav__dd-toggle .chev { display: none; }
  .nav__panel { position: static; width: auto; padding: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav__panel-in { display: block; padding: .1rem 0 .7rem .15rem; }
  .nav__col { display: grid; }
  .nav__h { margin: .5rem 0 .1rem; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-on-dark); font-weight: 600; }
  .nav .nav__panel a:not(.nav__all) { display: block; padding: .28rem 0; font-family: var(--font-body); font-size: 1.04rem; color: rgba(255, 255, 255, .84); }
  .nav__panel a b { font-family: var(--font-body); font-weight: 500; font-size: 1.04rem; }
  .nav__panel a span { display: none; }
  .nav .nav__panel a.nav__all { display: none; }
}

/* ---------- menú abierto en celular/tablet: el botón de WhatsApp tiene el mismo tamaño de texto que «Agendar una consulta» ---------- */
@media (max-width: 1239px) { .nav .nav__wa { font-size: .95rem; } }

/* ==========================================================================
   Modo liviano para celulares y tablets (≤ 1239 px o sin mouse): menos trabajo de dibujo al scrollear.
   Sin desenfoque de fondo (backdrop-filter), sin parallax ni animaciones de recorte de imágenes, sin capas de mezcla.
   En computadora no cambia nada.
   ========================================================================== */
@media (max-width: 1239px), (hover: none) {
  .site-header .container::before, .mbar, .phero__bar, .svc__media .chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header:not([data-tone="dark"]):not(.nav-open) .container::before,
  .site-header.is-scrolled:not([data-tone="dark"]):not(.nav-open) .container::before { background: rgba(255, 255, 255, .97); }
  .mbar { background: #fff; }
  .phero__bar { background: rgba(255, 255, 255, .92); }
  .svc__media img, .svc__media::before { translate: none; }
  .band__bg img, .school__bg img { inset: 0; height: 100%; translate: none; will-change: auto; }
  .js .svc__media.reveal img { clip-path: none; scale: 1; transition: none; }
  .js .svc__media.reveal::before { scale: 1; transition: opacity .6s var(--ease-out); }
  .js .reveal { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0s); }
  #metodo::after, #credenciales::after, .fx-tilt::after { display: none; }
}

/* ==========================================================================
   Logo fluido en celulares angostos: el logo se achica con el ancho para que el botón de menú SIEMPRE quede dentro de la barra
   (antes el logo medía ~265 px fijos y el botón se salía de la pantalla por debajo de 360 px).
   ========================================================================== */
@media (max-width: 520px) {
  .site-header .container { gap: .5rem; padding-left: clamp(.7rem, 3.6vw, 1.1rem); }
  .lockup { flex: 1 1 auto; min-width: 0; gap: clamp(.4rem, 2.4vw, .65rem); }
  .lockup__brand { min-width: 0; }
  .lockup .lockup__iso { width: clamp(30px, 10.4vw, 42px); height: clamp(30px, 10.4vw, 42px); }
  .lockup img.lockup__name { height: clamp(14px, 5.2vw, 21px); max-width: 100%; object-fit: contain; object-position: left center; }
  .lockup__role { font-size: clamp(.5rem, 1.95vw, .7rem); letter-spacing: clamp(.02em, .55vw, .075em); overflow: hidden; }
  .menu-toggle { flex: none; width: clamp(2.6rem, 11vw, 3rem); height: clamp(2.6rem, 11vw, 3rem); }
}