/* =========================================================================
   ESENCIA · pieza CABECERA
   La franja de arriba: barra de anuncio + menú · logo · Buscar/Bolsa.
   Plantilla de Elementor nueva (ver piezas/cabecera.json) y, en el pago,
   otra solo con el logo (piezas/cabecera-pago.json).

   Medidas EXACTAS de la maqueta (p1-esencia.html, .anuncio / .nav-fila /
   .menu / .logo / .util), medidas con el navegador a 1180 px:
     - anuncio: 33 px de alto, letra 10.5 px, peso 300, espaciado .26em;
     - fila: 26 px arriba y abajo, logo de 58 px de alto, línea abajo;
     - menú: 12 px, espaciado .17em, 34 px entre opciones; la opción que
       se está viendo lleva una raya debajo (3 px de aire + 1 px de raya);
     - Buscar · Bolsa: 11 px, espaciado .14em, gris #75747A, 26 px
       entre ellos.
   Igual que en el PDF, el menú y la Bolsa van pegados a los bordes de la
   caja de 1180 px y el logo queda entre los dos (no en el centro exacto:
   el menú es más ancho que Buscar/Bolsa).

   Todo cuelga de ".esc-cab" (la caja que envuelve la cabecera) para no
   pisar nada de otras pantallas.
   ========================================================================= */

/* ------------------------------------------- las cajas de Elementor, en cero */

/* "header.elementor-location-header" delante sube la fuerza de la regla:
   el tema Botiga pone 15 px de relleno a los lados de las cajas de
   Elementor en tableta y celular (body[class*="elementor-page"] .e-con.e-parent),
   y la barra de anuncio ya no llegaba de borde a borde. */
header.elementor-location-header .esc-cab.e-con.e-flex,
header.elementor-location-header .esc-cab .e-con.e-flex {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --min-height: 0px;
}
.esc-cab .elementor-widget { margin: 0 !important; }
.esc-cab .elementor-widget-container { margin: 0; padding: 0; }

.esc-cab {
  position: relative;            /* el buscador se abre colgado de aquí */
  background: var(--esc-porcelana);
  font-family: var(--esc-sans);
  letter-spacing: normal;
  font-weight: 400;
  color: var(--esc-tinta);
}
.esc-cab a { color: inherit; text-decoration: none; }

/* Texto solo para lectores de pantalla */
.esc-cab .esc-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------- barra de anuncio */

.esc-cab .esc-cab__anuncio.e-con {
  background: var(--esc-tinta);
  padding: 9px;
}
/* Con !important y la caja de la cabecera delante, porque hay reglas de la
   portada (".home .elementor-widget-text-editor p") que ponen 15.5 px a
   todo "Editor de texto" de la página, y también le llegarían a este. */
.esc-cab .esc-cab__anuncio .esc-cab__anuncio-txt,
.esc-cab .esc-cab__anuncio .esc-cab__anuncio-txt p {
  margin: 0 !important;
  color: #EDEBE6 !important;
  text-align: center;
  font-family: var(--esc-sans) !important;
  font-size: 10.5px !important;
  font-weight: 300 !important;
  letter-spacing: .26em !important;
  line-height: normal !important;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- la fila */

.esc-cab .esc-cab__nav.e-con {
  border-bottom: 1px solid var(--esc-linea);
  position: static;
}
.esc-cab .esc-cab__fila.e-con {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 0;
}
.esc-cab .esc-cab__fila > .elementor-widget {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  position: static;
}

/* el logo: el archivo real del cliente, 58 px de alto */
.esc-cab .esc-cab__logo a,
.esc-cab .esc-cab__logo img { display: block; }
.esc-cab .esc-cab__logo img {
  height: 58px !important;
  width: auto !important;
  max-width: none !important;
  border: 0;
}

/* el menú de colecciones */
.esc-cab .esc-menu {
  display: flex;
  gap: 34px;
}
.esc-cab .esc-menu__a {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .17em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--esc-tinta);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.esc-cab .esc-menu__a:hover { border-bottom-color: var(--esc-linea-sv); }
.esc-cab .esc-menu__a.is-on { border-bottom-color: var(--esc-tinta); }

/* Buscar · Bolsa */
.esc-cab .esc-util {
  display: flex;
  align-items: center;
  gap: 26px;
}
.esc-cab .esc-util__a,
.esc-cab button.esc-util__a {
  display: block;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  color: var(--esc-grafito-pdf) !important;
  cursor: pointer;
  transition: color .18s ease;
}
.esc-cab .esc-util__a:hover,
.esc-cab .esc-util__a[aria-expanded="true"] { color: var(--esc-tinta) !important; }

/* --------------------------------------------------------- el buscador (computador) */

.esc-cab .esc-buscador {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 1000;                 /* por encima de la página */
  background: var(--esc-porcelana);
  border-bottom: 1px solid var(--esc-linea);
}
.esc-cab .esc-buscador[hidden],
.esc-cab .esc-panel[hidden] { display: none !important; }
.esc-cab .esc-buscador__env {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 0;
  display: flex;
  align-items: center;
  gap: 26px;
}
.esc-cab .esc-buscador__form {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 0;
}
.esc-cab input.esc-buscador__q {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 13px 15px !important;
  background: var(--esc-nieve) !important;
  border: 1px solid var(--esc-linea-sv) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: var(--esc-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: .02em;
  color: var(--esc-tinta) !important;
}
.esc-cab input.esc-buscador__q:focus { border-color: var(--esc-tinta) !important; }
.esc-cab input.esc-buscador__q::placeholder { color: var(--esc-grafito-pdf); opacity: 1; }
.esc-cab .esc-buscador__ir { flex: 0 0 auto; }
.esc-cab button.esc-buscador__cerrar,
.esc-cab button.esc-panel__cerrar {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: var(--esc-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
  line-height: normal !important;
  text-transform: uppercase !important;
  color: var(--esc-grafito-pdf) !important;
  cursor: pointer;
}
.esc-cab button.esc-buscador__cerrar:hover,
.esc-cab button.esc-panel__cerrar:hover { color: var(--esc-tinta) !important; }

/* el botón de menú y su panel no salen en computador */
.esc-cab .esc-burger { display: none; }

/* ------------------------------------------- pantallas medianas (1025–1179 px) */
/* La maqueta pega el menú y la bolsa al borde de la caja de 1180 px. Si la
   pantalla es más angosta, se deja un margen para que no toquen el borde. */
@media (max-width: 1179px) {
  .esc-cab .esc-cab__fila.e-con,
  .esc-cab .esc-buscador__env { padding-left: 24px; padding-right: 24px; }
}

/* ===================================================== tableta y celular (≤ 1024 px)
   [≡]            [logo]            BOLSA (0)
   El botón abre un panel con las 4 colecciones y el buscador.
   ========================================================================= */
@media (max-width: 1024px) {
  .esc-cab .esc-cab__fila.e-con {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 24px;
  }
  .esc-cab .esc-cab__menu { justify-self: start; }
  .esc-cab .esc-cab__logo { justify-self: center; }
  .esc-cab .esc-cab__util { justify-self: end; }
  .esc-cab .esc-cab__logo img { height: 50px !important; }

  .esc-cab .esc-menu,
  .esc-cab .esc-util__buscar,
  .esc-cab .esc-buscador { display: none !important; }

  .esc-cab .esc-util__bolsa { padding: 12px 0 !important; }

  /* el botón de menú: tres rayitas finas */
  .esc-cab button.esc-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin: 0 0 0 -11px;
    padding: 0 11px !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer;
  }
  .esc-cab .esc-burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--esc-tinta);
  }

  /* el panel */
  .esc-cab .esc-panel {
    position: fixed;
    inset: 0;
    z-index: 100000;
  }
  .esc-cab .esc-panel__fondo {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 22, .38);
  }
  .esc-cab .esc-panel__caja {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: min(88vw, 380px);
    overflow-y: auto;
    background: var(--esc-porcelana);
    border-right: 1px solid var(--esc-linea);
    padding: 0 24px 34px;
    animation: esc-panel-entra .22s ease-out;
  }
  .esc-cab .esc-panel__cab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid var(--esc-linea);
  }
  .esc-cab .esc-panel__titulo {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--esc-tinta);
  }
  .esc-cab .esc-panel__lista {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
  }
  .esc-cab .esc-panel__lista li { margin: 0; padding: 0; }
  .esc-cab .esc-panel__col {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 19px 0;
    border-bottom: 1px solid var(--esc-linea);
  }
  .esc-cab .esc-panel__nombre {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--esc-tinta);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
  }
  .esc-cab .esc-panel__col.is-on .esc-panel__nombre { border-bottom-color: var(--esc-tinta); }
  .esc-cab .esc-panel__cuenta {
    font-size: 11.5px;
    font-weight: 300;
    color: var(--esc-grafito-pdf);
  }
  .esc-cab .esc-panel__bloque { padding: 30px 0 26px; border-bottom: 1px solid var(--esc-linea); }
  .esc-cab .esc-panel__bloque .esc-panel__titulo { margin-bottom: 14px; }
  .esc-cab .esc-panel .esc-buscador__form { flex-direction: column; gap: 10px; }
  .esc-cab .esc-panel .esc-buscador__ir { width: 100%; }

  /* con el panel abierto, la página de atrás no se mueve */
  html.esc-con-esc-panel,
  html.esc-con-esc-panel body { overflow: hidden; }
}

@keyframes esc-panel-entra {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-cab .esc-panel__caja { animation: none; }
}

/* ---------------------------------------------------------------- celular */
@media (max-width: 767px) {
  .esc-cab .esc-cab__anuncio.e-con { padding: 9px 16px; }
  .esc-cab .esc-cab__anuncio .esc-cab__anuncio-txt,
  .esc-cab .esc-cab__anuncio .esc-cab__anuncio-txt p {
    font-size: 10px !important;
    letter-spacing: .2em !important;
    line-height: 1.6 !important;
    text-wrap: balance;
  }
  .esc-cab .esc-cab__fila.e-con { padding: 12px 16px; }
  .esc-cab .esc-cab__logo img { height: 42px !important; }
  .esc-cab .esc-panel__caja { padding: 0 20px 30px; }
}

/* ===================================================== la cabecera del pago
   Solo el logo, al centro, con 30 px arriba y abajo y una línea debajo
   (maqueta, pantalla 4). */

.esc-cab--pago .esc-cab__fila.e-con,
.esc-cab.esc-cab--pago .esc-cab__fila.e-con {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
@media (max-width: 1024px) {
  .esc-cab.esc-cab--pago .esc-cab__fila.e-con { padding: 24px 24px; }
  .esc-cab.esc-cab--pago .esc-cab__logo img { height: 50px !important; }
}
@media (max-width: 767px) {
  .esc-cab.esc-cab--pago .esc-cab__fila.e-con { padding: 18px 16px; }
  .esc-cab.esc-cab--pago .esc-cab__logo img { height: 42px !important; }
}