/* ========================================
   PAGE HEADER — hero compartido por las plantillas
   custom (institucional, asesoramiento, PROCOOP, etc.)
   Colores vía variables globales del kit de Elementor,
   para quedar sincronizado si se editan desde el admin.
   Medidas según diseño de Figma (node 705-15267, PROCOOP).
   ======================================== */

.inacoop-page-header {
  background-color: var(--e-global-color-2d26496, #401e5e);
  padding: 1.5rem 2.5rem 2.5rem;
}

.inacoop-page-header__inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* Breadcrumb */
.inacoop-page-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Asap, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
}

.inacoop-page-header__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inacoop-page-header .inacoop-page-header__breadcrumb-link {
  font-family: Asap, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
}

.inacoop-page-header .inacoop-page-header__breadcrumb-link:hover {
  text-decoration: underline;
}

.inacoop-page-header .inacoop-page-header__breadcrumb-current {
  font-family: Asap, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.inacoop-page-header .inacoop-page-header__breadcrumb img {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}

/* Título */
.inacoop-page-header .inacoop-page-header__title {
  margin: 1rem 0 0;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.15;
  color: #fff;
}

/* Bajada (opcional) */
.inacoop-page-header__subtitle {
  margin: 1rem 0 0;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.456;
  color: rgba(255, 255, 255, 0.85);
  max-width: 38.75rem;
}

@media (max-width: 767px) {
  .inacoop-page-header {
    padding: 1.25rem 1rem 2rem;
  }

  .inacoop-page-header .inacoop-page-header__title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .inacoop-page-header__subtitle {
    font-size: 1rem;
    line-height: 1.4;
  }
}

/* ========================================
   Variant "light" — fondo claro, breadcrumb con separador "/" y barra de
   acento en el título. Mismo markup que la variant "hero" (ver
   includes/page-header.php); sólo cambia el estilo vía clase modificadora
   .inacoop-page-header--light.
   Medidas según Figma (archivo "Web-INACOOP", node 768-2 desktop / 768-6
   mobile).
   ======================================== */

.inacoop-page-header--light {
  background-color: #fff;
  padding: 1.25rem 2.5rem 2.5rem;
}

/* Breadcrumb: oculta el ícono heredado y agrega "/" por CSS, así el markup
   queda idéntico entre variantes. */
.inacoop-page-header--light .inacoop-page-header__breadcrumb {
  font-size: 0.8125rem;
  line-height: 1.5rem;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb img {
  display: none;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb li:not(:last-child)::after {
  content: "/";
  color: #aaa;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb-link {
  color: #666;
  text-decoration: none;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb-link:hover {
  text-decoration: underline;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb-link--home {
  color: #0077a3;
}

.inacoop-page-header--light .inacoop-page-header__breadcrumb-current {
  color: #333;
}

/* Título: barra de acento a la izquierda en vez de blanco sobre fondo de
   color. El color de la barra sale del param "color" (mismo mecanismo que
   la bajada en "hero"); sin color explícito usa el azul por defecto. */
.inacoop-page-header--light .inacoop-page-header__title {
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 4px solid #0077a3;
  color: #401e5e;
  font-size: 2.25rem;
  line-height: 1.25;
}

.inacoop-page-header--light .inacoop-page-header__subtitle {
  margin-top: 0.75rem;
  max-width: 39rem;
  color: #555;
  font-size: 1.125rem;
  line-height: 1.625;
}

@media (max-width: 767px) {
  .inacoop-page-header--light {
    padding: 1.25rem 1rem 2rem;
  }

  .inacoop-page-header--light .inacoop-page-header__title {
    margin-top: 1rem;
    border-left-width: 3px;
    font-size: 1.625rem;
    line-height: 1.25;
  }

  .inacoop-page-header--light .inacoop-page-header__subtitle {
    max-width: none;
    font-size: 1rem;
    line-height: 1.625;
  }
}