/* ==========================================================================
   Costasol Seguridad — header.css
   Cabecera blanca con el logotipo original sin modificar.
   ========================================================================== */

.cs-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--costasol-line);
}

.cs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

.cs-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; flex: none; }
.cs-header__brand img { display: block; height: 62px; width: auto; }

/* Descriptor de marca: evita que «Costasol Seguridad» se confunda con una
   empresa de alarmas. Solo cabe en pantallas anchas; en el resto, el mismo
   texto aparece en el pie y en la antetítulo de cada página. */
.cs-header__tagline {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--costasol-muted);
  white-space: nowrap;
  line-height: 1;
}
/* Con «Dirección de Seguridad» en el menú principal, el descriptor solo cabe
   a partir de 1480 px. Por debajo se oculta y la cabecera respira. */
@media (max-width: 1479px) { .cs-header__tagline { display: none; } }

.cs-nav { display: flex; align-items: center; gap: .1rem; }
.cs-nav a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--costasol-ink);
  text-decoration: none;
  padding: .6rem .58rem;
  border-radius: 6px;
  transition: background var(--costasol-transition), color var(--costasol-transition);
}
/* Las entradas del menú principal no parten en dos líneas: con etiquetas
   largas («Dirección de Seguridad», «Segunda opinión») la cabecera se veía
   rota. Por debajo de 1200 px el menú ya es un desplegable y esto no aplica. */
.cs-nav > ul > li > a { white-space: nowrap; }

/* Servicio principal destacado en el menú.
   La clase se asigna a la entrada del menú desde Apariencia > Menús
   («Clases CSS»), de modo que puede moverse o retirarse sin tocar el tema. */
.cs-nav > li.cs-nav-destacado > a,
.cs-nav > ul > li.cs-nav-destacado > a { color: var(--costasol-navy-deep); }
.cs-nav > ul > li.cs-nav-destacado > a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--costasol-orange);
}
.cs-nav > ul > li.cs-nav-destacado > a:hover { background: rgba(243, 154, 24, .1); }

/* Indicador de desplegable. WordPress marca por su cuenta las entradas que
   tienen hijos con la clase menu-item-has-children, así que no hay que tocar
   el menú: si mañana se añade o se quita una subentrada, la flecha se ajusta
   sola. Sin este indicador, nadie sabe que hay más hasta que pasa el ratón. */
.cs-nav > ul > li.menu-item-has-children > a::after {
  content: "";
  width: .34em;
  height: .34em;
  flex: none;
  margin-left: .12em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.16em) rotate(45deg);
  opacity: .5;
  transition: transform var(--costasol-transition), opacity var(--costasol-transition);
}
.cs-nav > ul > li.menu-item-has-children:hover > a::after,
.cs-nav > ul > li.menu-item-has-children:focus-within > a::after {
  opacity: 1;
  transform: translateY(.06em) rotate(225deg);
}

/* Puente invisible sobre el hueco de 6 px que separa la entrada del
   desplegable. Sin él, al bajar el ratón se sale del elemento padre, se
   pierde el :hover y el submenú se cierra antes de que dé tiempo a pulsar
   ninguna de sus opciones. Es un descendiente del <li>, de modo que mantiene
   vivo el hover mientras el cursor cruza el hueco. */
.cs-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.55rem;
  height: .55rem;
}
.cs-nav a:hover { background: var(--costasol-light); color: var(--costasol-navy-deep); }
.cs-nav .current-menu-item > a,
.cs-nav a[aria-current="page"] { color: var(--costasol-turquoise); }

.cs-nav__caret { font-size: .62em; opacity: .55; }

.cs-header__actions { display: flex; align-items: center; gap: .85rem; flex: none; }

.cs-lang {
  display: flex;
  gap: .1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--costasol-muted);
  letter-spacing: .04em;
}
.cs-lang a { color: var(--costasol-muted); text-decoration: none; padding: .2rem .3rem; }
.cs-lang a[aria-current="true"] { color: var(--costasol-navy-deep); }

.cs-header__cta { padding: .72rem 1.15rem; font-size: .88rem; }

/* Submenú */
.cs-nav li { position: relative; list-style: none; }
.cs-nav > ul { display: flex; gap: .25rem; margin: 0; padding: 0; }
.cs-nav .sub-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  min-width: 17rem;
  background: #fff;
  border: 1px solid var(--costasol-line);
  border-radius: var(--costasol-radius-card);
  box-shadow: var(--costasol-shadow-menu);
  padding: .5rem;
  margin: 0;
  display: none;
  z-index: 20;
}
.cs-nav li:hover > .sub-menu,
.cs-nav li:focus-within > .sub-menu { display: block; }
.cs-nav .sub-menu a { display: block; padding: .55rem .7rem; font-weight: 500; }

/* Botón de menú (solo móvil y tableta) */
.cs-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--costasol-line);
  border-radius: var(--costasol-radius-control);
  cursor: pointer;
}
.cs-header__toggle span { position: relative; display: block; width: 19px; height: 2px; background: var(--costasol-navy-deep); border-radius: 2px; }
.cs-header__toggle span::before,
.cs-header__toggle span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: inherit; border-radius: 2px; transition: transform var(--costasol-transition), opacity var(--costasol-transition); }
.cs-header__toggle span::before { top: -6px; }
.cs-header__toggle span::after { top: 6px; }
.cs-header__toggle[aria-expanded="true"] span { background: transparent; }
.cs-header__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--costasol-navy-deep); }
.cs-header__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--costasol-navy-deep); }

/* Etiqueta corta del CTA en pantallas estrechas */
.cs-header__cta .is-short { display: none; }

@media (max-width: 1199px) {
  .cs-header__inner { min-height: 72px; gap: .6rem; }
  .cs-header__brand img { height: 48px; }
  .cs-header__toggle { display: inline-flex; }
  .cs-header__cta .is-long { display: none; }
  .cs-header__cta .is-short { display: inline; }
  .cs-header__cta { padding: .68rem 1rem; }

  /* La navegación pasa a ser un panel desplegable a ancho completo */
  .cs-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--costasol-line);
    box-shadow: var(--costasol-shadow-menu);
    padding: .75rem var(--costasol-gutter) 1.25rem;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .cs-nav.is-open { display: block; }
  .cs-nav > ul { flex-direction: column; gap: 0; }
  .cs-nav > ul > li > a { font-size: 1.05rem; padding: .8rem .25rem; border-bottom: 1px solid var(--costasol-line); border-radius: 0; }
  .cs-nav__caret { display: none; }
  /* En el panel desplegable las subentradas ya están todas a la vista:
     ni flecha (sería engañosa) ni puente de hover (no hay hover). */
  .cs-nav > ul > li.menu-item-has-children > a::after { display: none; }
  .cs-nav .sub-menu::before { display: none; }
  .cs-nav .sub-menu {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    padding: .35rem 0 .6rem .9rem;
    min-width: 0;
    border-left: 2px solid var(--costasol-line);
    margin: .4rem 0 .5rem .25rem;
  }
  .cs-nav .sub-menu a { padding: .45rem .25rem; color: var(--costasol-muted); }
}

@media (max-width: 544px) {
  .cs-header__inner { gap: .4rem; }
  .cs-header__brand img { height: 40px; }
  .cs-header__actions { gap: .45rem; }
  .cs-lang { font-size: .74rem; }
  .cs-lang a { padding: .2rem .12rem; }
  .cs-header__cta { padding: .62rem .8rem; font-size: .82rem; }
  .cs-header__toggle { width: 40px; height: 40px; }
}