/* Barra superior (Contáctanos · Blog · Idioma · lupa) y panel de búsqueda. Lo inserta topbar.js */
:root { --tb-shift: 0px; --tb-h: 32px; }
.topbar { display: none; }

@media all {
  html.has-topbar body { padding-top: var(--tb-h); }
  html.has-topbar .editorial-header { top: var(--tb-shift); }
  .topbar { display: block; position: absolute; top: 0; left: 0; right: 0; height: var(--tb-h); z-index: 998; background: #FFFFFF; transition: background-color 300ms ease; font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
  .topbar__in { height: 100%; display: flex; align-items: center; padding: 0 var(--page-gutter, 42px); }
  .topbar__link { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; font-size: 13px; font-weight: 500; line-height: 1; color: #111111; text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: inherit; transition: color 300ms ease; }
  .topbar__in > .topbar__link:first-child { padding-left: 0; }
  .topbar__link:hover { color: #0D9488; }
  .topbar__link--accent { font-weight: 700; color: #0D6B63; }
  .topbar__sep { width: 1px; height: 14px; background: rgba(17, 17, 17, 0.16); transition: background-color 300ms ease; }
  .topbar__chev { transition: transform 200ms ease; }
  .topbar__lang { position: relative; }
  .is-lang-open .topbar__chev { transform: rotate(180deg); }
  .topbar__menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 3; min-width: 150px; margin: 0; padding: 6px; list-style: none; background: #FFFFFF; border-radius: 8px; box-shadow: 0 14px 36px rgba(10, 30, 36, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06); }
  .topbar__menu[hidden] { display: none; }
  .topbar__menu a { display: block; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #111111; text-decoration: none; }
  .topbar__menu a:hover { background: #E6F7F5; color: #0D6B63; }
  .topbar__menu a[aria-current="true"] { font-weight: 700; color: #0D6B63; }
  .topbar__search { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 6px; padding: 0; border: 0; background: transparent; color: #111111; border-radius: 4px; cursor: pointer; transition: color 200ms ease; }
  .topbar__search:hover { color: #0D9488; }
  .topbar__search--mobile { display: none; }
}
@media (max-width: 899px) {
  .topbar__search--mobile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #111111; cursor: pointer; }
}

/* Panel de búsqueda: desliza bajo el encabezado */
html.ss-open { overflow: hidden; }
.site-search { position: fixed; inset: 0; z-index: 990; pointer-events: none; font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.site-search.is-open { pointer-events: auto; }
.site-search__veil { position: absolute; inset: 0; background: rgba(10, 30, 36, 0); transition: background-color 300ms ease; }
.site-search.is-open .site-search__veil { background: rgba(10, 30, 36, 0.5); }
.site-search__panel { position: absolute; z-index: 1; left: 0; right: 0; top: var(--ss-top, 88px); max-height: calc(100vh - var(--ss-top, 88px)); overflow: auto; background: #14323B; color: #FFFFFF; transform: translateY(-14px); opacity: 0; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1), opacity 260ms ease; }
.site-search.is-open .site-search__panel { transform: none; opacity: 1; }
.site-search__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(32px, 5vw, 96px); max-width: 1500px; margin: 0 auto; padding: clamp(32px, 4vw, 64px) var(--page-gutter, 42px) clamp(36px, 4vw, 64px); }
.site-search__title { margin: 0 0 22px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; letter-spacing: -0.03em; color: #FFFFFF; }
.site-search__form { position: relative; display: flex; align-items: center; gap: 14px; border-bottom: 2px solid rgba(255, 255, 255, 0.5); transition: border-color 200ms ease; }
.site-search__form:focus-within { border-color: #14B8A6; }
.site-search__form > svg { order: 2; flex: 0 0 auto; color: rgba(255, 255, 255, 0.8); }
.site-search__input { order: 1; flex: 1 1 auto; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; font: 400 clamp(18px, 1.6vw, 24px)/1.2 inherit; font-family: inherit; color: #FFFFFF; -webkit-appearance: none; appearance: none; }
.site-search__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.site-search__input::-webkit-search-cancel-button { display: none; }
.site-search__close { order: 3; flex: 0 0 auto; display: inline-flex; padding: 6px; border: 0; background: transparent; color: #FFFFFF; cursor: pointer; transition: transform 220ms ease, color 160ms ease; }
.site-search__close:hover { color: #14B8A6; transform: rotate(90deg); }
.site-search__out { min-height: 180px; margin-top: 24px; }
.site-search__hint { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.site-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.site-search__chip { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: transparent; color: #FFFFFF; font: 500 15px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.site-search__chip:hover { background: rgba(20, 184, 166, 0.22); border-color: #14B8A6; }
.site-search__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-search__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 3px; padding: 14px 12px; margin: 0 -12px; border-radius: 6px; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 160ms ease; }
.site-search__item:hover, .site-search__item.is-active { background: rgba(255, 255, 255, 0.08); }
.site-search__type { grid-row: 1 / span 2; align-self: start; padding-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5EEAD4; }
.site-search__t { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.site-search__d { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.site-search__promo[hidden] { display: none; }
.site-search__promoimg { display: block; margin-bottom: 14px; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; background: #0F2229; }
.site-search__promoimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.site-search__promoimg:hover img { transform: scale(1.05); }
.site-search__promot { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #FFFFFF; text-decoration: none; }
.site-search__promot:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-search__promod { margin: 8px 0 14px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.site-search__promocta { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
.site-search__promocta:hover { color: #5EEAD4; border-color: #5EEAD4; }

@media (max-width: 899px) {
  .site-search__grid { grid-template-columns: 1fr; gap: 28px; padding: 22px 18px 32px; }
  .site-search__promo { display: none; }
  .site-search__item { grid-template-columns: 1fr; }
  .site-search__type { grid-row: auto; padding: 0; }
}
@media print { .topbar, .site-search { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .site-search__panel, .site-search__veil { transition: none; } }

/* El menú de idioma debe quedar por encima del encabezado (que tiene desenfoque de fondo) */
@media (min-width: 900px) { .topbar.is-lang-open { z-index: 1001; } }

/* ── Con la búsqueda abierta: barra, encabezado y panel forman una sola superficie oscura (como la referencia) ── */
.editorial-header, .editorial-logo img, .editorial-login, .editorial-hamburger, .eh-line { transition: background-color 300ms ease, filter 300ms ease, color 300ms ease, border-color 300ms ease; }
html.ss-open .editorial-header { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; }
html.ss-open .editorial-logo img { filter: brightness(0) invert(1); }
html.ss-open .editorial-login, html.ss-open .editorial-hamburger { color: #FFFFFF; }
html.ss-open .editorial-login svg { stroke: #FFFFFF; }
html.ss-open .eh-line { background: #FFFFFF !important; }
@media all {
  html.ss-open .topbar { background: transparent; z-index: 998; }
  html.ss-open .topbar__link { color: #FFFFFF; }
  html.ss-open .topbar__link:hover { color: #5EEAD4; }
  html.ss-open .topbar__link--accent { color: #5EEAD4; }
  html.ss-open .topbar__sep { background: rgba(255, 255, 255, 0.4); }
  html.ss-open .topbar__search { color: #FFFFFF; }
}
.site-search__panel { top: 0; max-height: none; height: 100%; padding-top: 0; }
.site-search__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); padding-top: calc(var(--ss-top, 88px) + clamp(56px, 6.2vw, 110px)); }
.site-search__veil { display: none; }
.site-search__form { border-bottom: 1px solid rgba(255, 255, 255, 0.55); }
.site-search__form:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }
.site-search__promot { font-size: 26px; line-height: 1.3; font-weight: 600; }
.site-search__promod { font-size: 18px; line-height: 1.55; margin: 10px 0 20px; color: #FFFFFF; }
.site-search__promocta { font-size: 18px; font-weight: 600; padding-bottom: 6px; border-bottom: 2px solid #FFFFFF; }
.site-search__promoimg { aspect-ratio: 16 / 9; border-radius: 0; margin-bottom: 22px; }
.site-search__hint { font-size: 15px; }
.site-search__promo > .site-search__hint { display: none; }
@media (max-width: 899px) { .site-search__grid { padding-top: calc(var(--ss-top, 64px) + 28px); grid-template-columns: 1fr; } }

/* ── Panel en modo Idioma (igual que la referencia: título, opciones con globo y subrayado en la actual, X) ── */
.site-search__lang[hidden], .site-search__main[hidden] { display: none; }
.site-search__langrow { display: flex; align-items: center; gap: clamp(24px, 3.6vw, 64px); margin-top: 52px; }
.site-search__opt { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 4px solid transparent; color: #FFFFFF; font-size: clamp(18px, 1.6vw, 24px); font-weight: 400; text-decoration: none; transition: border-color 200ms ease, color 200ms ease; }
.site-search__opt:hover { color: #5EEAD4; }
.site-search__opt.is-current { border-bottom-color: #14B8A6; }
.site-search__close--lang { margin-left: auto; margin-bottom: 8px; }

/* Móvil y tableta: buscar e idioma dentro del menú */
.mm-utils { display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid #E5E5E5; }
.mm-utils__search { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid #CFCFCF; border-radius: 6px; background: #FFFFFF; color: #111111; font: 500 16px/1 'Inter', Arial, sans-serif; cursor: pointer; }
.mm-utils__lang { display: flex; gap: 8px; }
.mm-utils__lang a { flex: 1; text-align: center; padding: 12px 10px; border: 1px solid #CFCFCF; border-radius: 6px; color: #111111; font: 500 15px/1 'Inter', Arial, sans-serif; text-decoration: none; }
.mm-utils__lang a[aria-current="true"] { border-color: #14B8A6; background: #E6F7F5; color: #0D6B63; font-weight: 700; }
@media (min-width: 900px) { .mm-utils { display: none; } }
/* Con el menú móvil, el contacto queda a la vista en el encabezado como en la referencia */
@media (max-width: 899px) {
  .editorial-actions .topbar__contact-m { display: inline-flex; align-items: center; margin-right: 6px; padding: 0 6px; font: 700 14px/1 'Inter', Arial, sans-serif; color: #0D6B63; text-decoration: none; }
}
@media (min-width: 900px) { .topbar__contact-m { display: none; } }

/* La barra superior también se ve en celular y tableta: se retiran los accesos duplicados del encabezado y del menú */
.topbar__search--mobile, .topbar__contact-m, .mm-utils { display: none !important; }
@media (max-width: 899px) {
  .topbar__in { padding: 0 16px; }
  .topbar__link { padding: 0 11px; font-size: 13px; }
  .topbar__in > .topbar__link:first-child { padding-left: 0; }
  .topbar__search { width: 32px; height: 32px; margin-left: auto; }
  .site-search__langrow { flex-wrap: wrap; gap: 18px 28px; margin-top: 30px; }
  .site-search__close--lang { margin-left: auto; }
  .site-search__opt { font-size: 18px; }
}
@media (max-width: 380px) { .topbar__link { padding: 0 8px; font-size: 12.5px; } .topbar__in > .topbar__link:first-child { padding-left: 0; } }
