/* ==========================================================================
   OMP · Tema personalizado
   Índice:
   1.  Fuentes
   2.  Variables
   3.  Elementos ocultos (agrupados)
   4.  Base y tipografía
   5.  Grupos de estilos compartidos
   6.  Layout general
   7.  Header y navegación
   8.  Botones
   9.  Home
   10. Migas de pan
   11. Catálogo y series
   12. Detalle del libro
   13. Acerca de
   14. Acordeón
   15. Carrusel de destacados (home)
   16. Footer
   17. Responsive
   18. Movimiento reducido
   ========================================================================== */


/* ==========================================================================
   1. FUENTES
   Solo se cargan los pesos que se usan (300, 500, 700 + itálicas).
   Thin (100) y XLight (200) se quitaron porque no se usan en ningún selector.
   Recomendado: convertir los .otf a .woff2 para reducir peso.
   ========================================================================== */

@font-face {
  font-family: 'Gotham';
  src: url('./Images/Gotham-Light_2.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('./Images/Gotham-Medium_5.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('./Images/Gotham-MediumItalic_2.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('./Images/Gotham-Bold_6.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('./Images/Gotham-BoldItalic_1.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Whyte Inktrap';
  src: url('./Images/WhyteInktrap-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. VARIABLES
   ========================================================================== */
:root {
  /* Colores */
  --c-primario: #1200a4;
  --c-primario-hover: #3752db;
  --c-oscuro: #00005d;
  --c-acento: #dd2171;
  --c-acento-hover: #ffcd4d;
  --c-serie: #541181;
  --c-celeste: #cff5ff;
  --c-gris: #6b6b6b;          /* antes #8c8c8c: ahora pasa contraste AA */
  --c-linea: #c9c9c9;
  --c-fondo: #f7f7f7;
  --c-blanco: #fff;
  --c-texto: #000;
  /* Tipografía */
  --f-base: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  --f-display: 'Whyte Inktrap', 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  /* Espaciado */
  --gutter: 11%;
}


/* ==========================================================================
   3. ELEMENTOS OCULTOS (todos en una sola regla)
   Los pseudo-elementos con prefijo -webkit- van aparte: si un navegador
   no reconoce un selector, descarta la regla completa (Firefox lo haría).
   ========================================================================== */

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_navigation_search_wrapper,
.page_catalog .pkp_series_nav_menu h2,
.pkp_series_nav_menu span,
.item.chapters,
.cmp_download_link::before,
body.pkp_page_index.pkp_op_index .cmp_monographs_list .row::before,
body.pkp_page_index.pkp_op_index .cmp_monographs_list .row::after,
body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .date,
body.pkp_page_index.pkp_op_index .monographs_carousel.is-static .monographs_carousel_nav,body.pkp_page_index.pkp_op_index .cmp_monographs_list .title {
  display: none !important;
}

.acordeon__titulo::-webkit-details-marker {
  display: none;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list::-webkit-scrollbar {
  display: none;
}

html,
body{
width:100%;
overflow-x:hidden;
} 


/* ==========================================================================
   4. BASE Y TIPOGRAFÍA
   ========================================================================== */

body {
  background: var(--c-fondo) !important;
}

/* Todos los elementos que necesitaban Gotham forzada, en un solo lugar */
body,
button,
input,
select,
textarea,
.btn.btn-primary,
.page-home-text span,
.cont-acordin-conoce,
.pkp_structure_main .page .monograph_count,
.cmp_breadcrumbs .current,
.cmp_breadcrumbs a,
.obj_monograph_summary .date,
.obj_monograph_summary .title,
.obj_monograph_summary .author,
.obj_monograph_full .autores_text,
.obj_monograph_full .value,
.item.authors .label,
.item.date_published .label,
.item.doi .label,
.item.keywords .label,
.item.abstract .label,
.sub_item .label,
.sub_item.identification_code h3,
.cmp_download_link,
.contenido_full_acerca {
  font-family: var(--f-base) !important;
}

/* Títulos de display (Whyte Inktrap) */
h1,
.pkp_structure_main .contenido_full_acerca h2 {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  color: var(--c-primario) !important;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 70px) !important;
  line-height: 0.9 !important;
  margin: 0 !important;
}

.pkp_structure_main h2 {
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Párrafos sin margen solo donde el diseño lo necesita
   (antes se aplicaba a TODO .pkp_structure_main p) */
.page_homepage p,
.home_contacto p,
.contenido_full_acerca p,
.cont-acordin-conoce p {
  margin: 0 !important;
}


/* ==========================================================================
   5. GRUPOS DE ESTILOS COMPARTIDOS
   ========================================================================== */

/* Texto light de 16px */
.page-home-text span,
.home_contacto p,
.cont-acordin-conoce,
.pkp_structure_main .page .monograph_count,
.cmp_breadcrumbs .current,
.cmp_breadcrumbs a,
.obj_monograph_summary .date,
.obj_monograph_summary .author,
.obj_monograph_full .value,
.item.authors .label,
.item.copyright,
.contenido_full_acerca,
.cmp_download_link {
  font-size: 16px !important;
  font-weight: 300 !important;
}

/* Texto gris secundario */
.pkp_structure_main .page .monograph_count,
.cmp_breadcrumbs .separator,
.cmp_breadcrumbs .current,
.cmp_breadcrumbs a,
.obj_monograph_summary .date,
.item.copyright {
  color: var(--c-gris) !important;
}

/* Texto negro */
.home_contacto p,
.obj_monograph_summary .author,
.contenido_full_acerca,
.obj_monograph_full .entry_details .label,
.obj_monograph_full .value a {
  color: var(--c-texto);
}

/* Márgenes laterales del contenido */
.page-home-tit,
.page-home-text,
.page-home-conoce,
.cmp_monographs_list {
  margin-left: var(--gutter) !important;
  margin-right: var(--gutter) !important;
}

.page-home-tit,
.page-home-conoce {
  margin-top: 10% !important;
}

/* Quitar bordes del tema por defecto (catálogo y detalle) */
.page_catalog .pkp_series_nav_menu,
.cmp_monographs_list,
.cmp_monographs_list .row,
.cmp_monographs_list .obj_monograph_summary.is_featured,
.cmp_monographs_list .obj_monograph_summary:first-child,
.cmp_monographs_list .obj_monograph_summary + .obj_monograph_summary,
.obj_monograph_full .row,
.obj_monograph_full .main_entry,
.obj_monograph_full .entry_details,
.obj_monograph_full .entry_details .item {
  border: 0 !important;
}

/* Foco visible y accesible para todos los enlaces y botones */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--c-primario);
  outline-offset: 2px;
}


/* ==========================================================================
   6. LAYOUT GENERAL
   ========================================================================== */

.pkp_structure_content {
  padding-top: 100px;
}

.pkp_page_index.pkp_op_index.has_site_logo .pkp_structure_content {
  padding-top: 0 !important;
  width: 100% !important;
}

.pkp_structure_main {
  width: 100%;
  padding: 0 !important;
}

.pkp_structure_main:first-child:last-child {
  margin: 0 !important;
}


/* ==========================================================================
   7. HEADER Y NAVEGACIÓN
   Colores en todos los tamaños; el layout en fila solo en escritorio,
   para no romper el menú hamburguesa de OMP en móvil.
   ========================================================================== */

.pkp_structure_head,
.pkp_site_nav_menu {
  background-color: var(--c-blanco);
}

.pkp_structure_head {
  border-bottom: 1px solid var(--c-oscuro);
}

.pkp_head_wrapper {
  padding-top: 20px;
  padding-bottom: 8px;
}

.pkp_navigation_primary > li > a {
  font-size: 16px;
  font-weight: 300;
  color: var(--c-oscuro) !important;
  border: 1px solid transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a.is_active,
.pkp_navigation_primary > li.is_active > a {
  background: transparent !important;
  border: 1px solid var(--c-primario) !important;
  color: var(--c-primario-hover) !important;
}

/* Enlace "perfil" del menú de usuario */
.pkp_navigation_user .profile {
  background: var(--c-primario);
  padding: 1px 22px !important;
}

.pkp_navigation_user .profile a,
.pkp_navigation_user .profile a:hover,
.pkp_navigation_user > li > a:focus {
  color: var(--c-blanco);
  background: transparent;
}

@media (min-width: 992px) {
  .pkp_structure_head .pkp_head_wrapper,
  .pkp_site_nav_menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 88%;
  }

  .pkp_site_name_wrapper {
    width: 14%;
    align-content: center;
  }

  .pkp_site_name_wrapper .pkp_site_name,
  .pkp_navigation_primary {
    width: 100%;
    max-width: 100% !important;
  }

  .pkp_navigation_primary_row {
    display: flex;
    justify-content: center;
    width: 80%;
  }

  .pkp_navigation_user_wrapper {
    display: flex;
    position: initial;
    transform: none;
    width: 20%;
    padding: 0 !important;
  }

  #navigationUser {
    display: flex;
    align-content: center;
    gap: 10px;
    font-size: 12px !important;
  }

  .pkp_navigation_primary > li > a {
    padding: 10px 35px !important;
  }
}


/* ==========================================================================
   8. BOTONES
   ========================================================================== */

.btn.btn-primary,
.cmp_download_link {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--c-blanco) !important;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  font-weight: 400;
  text-align: center;
  background-color: var(--c-primario);
}

.btn.btn-primary.btn-primary-2,
.cmp_download_link {
  background-color: var(--c-acento) !important;
}

.btn.btn-primary.btn-primary-2:hover {
  background-color: var(--c-acento-hover) !important;
  color: var(--c-texto) !important;
}

.cmp_download_link {
  line-height: 38px !important;
}


/* ==========================================================================
   9. HOME
   ========================================================================== */

.page.page_homepage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-home-container {
  max-width: 1140px;
}

.page-home-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 75px;
}

.page-home-text span {
  background: var(--c-blanco);
  padding: 40px 45px;
}

.page-home-conoce .acordeon_conoce {
  margin-top: 25px;
}

.cont-conoce-parra {
  display: flex;
  flex-direction: row;
  gap: 25px;
  margin-top: 8%;
}

.cont-conoce-parra img {
  max-width: 37% !important;
  height: 460px;
  object-fit: cover;
}

.home_contacto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  margin-top: 5em;
  margin-bottom: 7em;
  padding: 1em 47px;
  background-color: var(--c-celeste);
}

.home_contacto p {
  line-height: 23px;
}


/* ==========================================================================
   10. MIGAS DE PAN
   ========================================================================== */

.cmp_breadcrumbs {
  padding-top: 8px;
}

.cmp_breadcrumbs .separator {
  padding: 0 !important;
}


/* ==========================================================================
   11. CATÁLOGO Y SERIES
   ========================================================================== */
/* Menú de series */
.page_catalog .pkp_series_nav_menu {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_series_nav_menu ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 6px;
  margin: 0;
}

.pkp_series_nav_menu li {
  margin-right: 10px;
  padding: 8px 24px;
  font-size: 12px !important;
  background: var(--c-serie) !important;
}

.pkp_series_nav_menu a {
  color: var(--c-blanco) !important;
  font-weight: 400;
  text-decoration: none;
}

/* Listado */
.cmp_monographs_list {
  margin-top: 4% !important;
}

.cmp_monographs_list .obj_monograph_summary {
  position: initial !important;
  float: none !important;
  width: 100% !important;
}

.obj_monograph_summary {
  margin-top: 40px;
  padding: 0 !important;
}

.obj_monograph_summary .cover {
  width: 330px !important;
  height: 470px !important;
  margin-right: 45px;
}

.obj_monograph_summary .cover img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}

.obj_monograph_summary .date {
  margin-top: 12% !important;
}

.obj_monograph_summary .title {
  margin-top: 15px !important;
  font-size: 22px !important;
  line-height: 1.8rem !important;
}

.obj_monograph_summary .title a {
  color: var(--c-primario) !important;
  font-weight: 400;
}

.obj_monograph_summary .author {
  margin-top: 15px !important;
}


/* ==========================================================================
   12. DETALLE DEL LIBRO
   ========================================================================== */
.obj_monograph_full .main_entry {
  width: 62% !important;
}

.obj_monograph_full .entry_details {
  width: 38% !important;
  margin: 0 !important;
}

/* Etiquetas grandes (22px) */
.obj_monograph_full .autores_text,
.item.date_published .label,
.item.doi .label,
.item.keywords .label,
.item.abstract .label,
.sub_item .label,
.sub_item.identification_code h3 {
  font-size: 22px !important;
  margin: 0;
}

/* En la columna lateral las etiquetas vuelven a 16px */
.obj_monograph_full .entry_details .label {
  font-size: 16px !important;
  font-weight: 400;
}

.obj_monograph_full .main_entry .item {
  padding-top: 30px;
  padding-bottom: 0;
}

.obj_monograph_full .main_entry .label {
  margin: 0;
}

.csl-entry i {
  font-size: 12px !important;
  font-style: normal !important;
}


/* ==========================================================================
   13. ACERCA DE
   ========================================================================== */
.page-content {
  margin-bottom: 3rem;
  padding-top: 3rem;
  font-size: 20px;
  line-height: 30px;
}

.container_acerca {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}

.contenido_full_acerca {
  width: 85.7%;
  margin-top: 0 !important;
}

.pkp_structure_main .contenido_full_acerca h2 {
  font-size: clamp(2.25rem, 5vw, 55px) !important;
  line-height: 1.1 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}


/* ==========================================================================
   14. ACORDEÓN
   La animación con ::details-content solo funciona en Chrome/Edge
   recientes; en Firefox y Safari abre sin animación.
   ========================================================================== */
.acordeon {
  --texto: #111;
  --texto-cerrado: var(--c-texto);
  --linea: var(--c-linea);
  --activo: var(--c-primario);
  interpolate-size: allow-keywords;
  width: 100%;
  margin: 2rem auto;
}

.acordeon__item {
  border-bottom: 1px solid var(--linea);
  margin-bottom: 16px;
}

.acordeon__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 10px;
  font-size: 18px;
  font-weight: 400;
  color: var(--texto-cerrado);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.acordeon__titulo:hover {
  color: var(--texto);
}

.acordeon__titulo:focus-visible {
  outline: 2px solid var(--activo);
  outline-offset: 2px;
}

.acordeon__titulo::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.25s;
}

.acordeon__item[open] > .acordeon__titulo {
  color: var(--activo);
}

.acordeon__item[open] > .acordeon__titulo::after {
  transform: rotate(45deg);
}

.acordeon__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}

.acordeon__item[open]::details-content {
  block-size: auto;
}

.acordeon__contenido p {
  margin: 0;
  padding: 10px 16px 26px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texto);
}


/* ==========================================================================
   15. CARRUSEL DE DESTACADOS (home)
   ========================================================================== */
body.pkp_page_index.pkp_op_index .cmp_monographs_list {
  --carousel-gap: 50px;
  --carousel-visible: 3;
  --title-space: 3.5rem;

  display: flex;
  align-items: flex-start;
  gap: var(--carousel-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-top: 0 !important;
  margin-bottom: 2rem;

  /* Barra de scroll oculta (el swipe en móvil sigue funcionando) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Aplanar los .row: sus hijos pasan a ser ítems del flex */
body.pkp_page_index.pkp_op_index .cmp_monographs_list .row {
  display: contents;
}

/* Tarjeta */
body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary {
  flex: 0 0 calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
  max-width: 284px;
  margin: var(--title-space) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scroll-snap-align: start;
}

/* Portada */
body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .cover {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin-right: 0 !important;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .cover img {
  transition: transform 0.3s ease;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .cover:hover img {
  transform: scale(1.04);
}

/* Recorte de líneas: título 3, autores 2 */
body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .title,
body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .author {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .title {
  -webkit-line-clamp: 3;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .author {
  -webkit-line-clamp: 2;
  margin-left: 0 !important;
}

/* Flechas */
body.pkp_page_index.pkp_op_index .monographs_carousel {
  position: relative;
}

body.pkp_page_index.pkp_op_index .monographs_carousel_nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

body.pkp_page_index.pkp_op_index .monographs_carousel_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body.pkp_page_index.pkp_op_index .monographs_carousel_btn:disabled {
  opacity: 0.3;
  cursor: default;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.contenedor_footer .align-self-center {
  width: 80px;
}

.contenedor_footer,
.social_network {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-top: 35px;
  padding-bottom: 20px;
}

.contenedor_footer {
  border: 2px solid var(--c-primario);
}

.pkp_structure_footer_wrapper .align-self-center {
  width: 5%;
}

.text_footer.col-md-3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.social_network {
  width: 25%;
}

.social_network a {
  width: 30px;
}

.footer-brand-cedia {
  width: 90px;
  max-width: none;
}


/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
/* Tablet */
@media (max-width: 991px) {
  :root {
    --gutter: 6%;
  }

  .page-home-text {
    gap: 40px;
  }

  .home_contacto {
    gap: 30px;
    padding: 1em 24px;
  }

  .obj_monograph_full .main_entry,
  .obj_monograph_full .entry_details {
    float: none;
    width: 100% !important;
  }

  body.pkp_page_index.pkp_op_index .cmp_monographs_list {
    --carousel-visible: 2;
  }
}

/* Móvil */
@media (max-width: 767px) {
  :root {
    --gutter: 5%;
  }

  .pkp_structure_content {
    padding-top: 40px;
  }

  .page-home-text,
  .cont-conoce-parra,
  .home_contacto,
  .contenedor_footer {
    flex-direction: column;
    gap: 24px;
  }

  .page-home-text span {
    padding: 28px 24px;
  }

  .cont-conoce-parra img {
    max-width: 100% !important;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .home_contacto {
    margin-top: 3em;
    margin-bottom: 4em;
    padding: 24px;
  }

  .pkp_structure_footer_wrapper .align-self-center,
  .text_footer.col-md-3,
  .social_network {
    width: 100%;
  }

  .obj_monograph_summary .cover {
    float: none;
    width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
    aspect-ratio: 2 / 3;
  }

  .container_acerca {
    flex-direction: column;
  }

  .contenido_full_acerca {
    width: 100%;
  }

  .page-content {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 575px) {
  body.pkp_page_index.pkp_op_index .cmp_monographs_list {
    --carousel-visible: 1.25;
    --carousel-gap: 16px;
  }
}

/* ==========================================================================
   18. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .acordeon__item::details-content,
  .acordeon__titulo::after,
  body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary .cover img {
    transition: none;
  }

  body.pkp_page_index.pkp_op_index .cmp_monographs_list {
    scroll-behavior: auto;
  }
}

@media (max-width: 480px) {
  /**Foooter*/
.pkp_head_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* uno a cada extremo */
  flex-wrap: nowrap;
  width: 100%;
  padding: 10px 30px;
  box-sizing: border-box;
}


/* Logo primero (izquierda) */
.pkp_head_wrapper .pkp_site_name_wrapper {
  order: 1;
  position: static;
  width: auto;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
}

.pkp_head_wrapper .pkp_site_name {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
}

.pkp_head_wrapper .pkp_site_name img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Menú después (derecha) */
.pkp_head_wrapper .pkp_site_nav_menu {
  order: 2;
  position: static;
  width: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 0 0 auto;
}

.pkp_head_wrapper .pkp_navigation_primary_row,
.pkp_head_wrapper .pkp_navigation_primary_wrapper,
.pkp_head_wrapper .pkp_navigation_user_wrapper {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.pkp_head_wrapper .pkp_nav_list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pkp_head_wrapper .pkp_nav_list li {
  margin: 0 0 0 20px;
}

  .pkp_head_wrapper {
    padding: 15px 25px !important;
  }

  .pkp_head_wrapper .pkp_site_name img {
    max-width: 180px;
  }

  /* Botón hamburguesa a la derecha */
  .pkp_head_wrapper .pkp_site_nav_toggle {
    display: block;
    order: 2;
    margin-left: auto;
    position: relative;
    z-index: 10001; /* por encima del cajón */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  /* Ícono hamburguesa dibujado con CSS (oculta el texto "Open Menu") */
  .pkp_head_wrapper .pkp_site_nav_toggle span {
    position: absolute;
    left: -9999px;
  }

  .pkp_head_wrapper .pkp_site_nav_toggle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 3px;
    background: #333;
    transform: translate(-50%, -50%);
    box-shadow: 0 -8px 0 #333, 0 8px 0 #333;
  }

  /* Cajón lateral: oculto fuera de pantalla a la derecha */
  .pkp_head_wrapper .pkp_site_nav_menu {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 280px;
    max-width: 85%;
    height: 100vh;
    margin: 0;
    padding: 70px 20px 20px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow-y: auto;
    z-index: 10000;
    transform: translateX(100%);   /* escondido */
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  /* Cajón abierto (OJS agrega esta clase al pulsar el botón) */
.pkp_head_wrapper .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s ease-in-out,
              visibility 0s linear 0s;
}

  /* Anular el display:none que OJS aplica al menú en móvil */
  .pkp_head_wrapper .pkp_site_nav_menu,
  .pkp_head_wrapper .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
    display: flex;
  }

  /* Listas en columna dentro del cajón */
  .pkp_head_wrapper .pkp_navigation_primary_row,
  .pkp_head_wrapper .pkp_navigation_primary_wrapper,
  .pkp_head_wrapper .pkp_navigation_user_wrapper {
    display: block;
    width: 100%;
  }

  .pkp_head_wrapper .pkp_nav_list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .pkp_head_wrapper .pkp_nav_list li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #eee;
  }

  .pkp_head_wrapper .pkp_nav_list li a {
    display: block;
    padding: 14px 0;
  }

  .pkp_head_wrapper .pkp_navigation_search_wrapper {
    width: 100%;
    padding: 14px 0;
  }

  /* Estado CERRADO: se desliza hacia la derecha y recién al final se oculta */
.pkp_head_wrapper .pkp_site_nav_menu {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s ease-in-out,
              visibility 0s linear 0.35s; /* se oculta después de que termina la animación */
}

.pkp_page_index.pkp_op_index.has_site_logo .pkp_structure_content {
  padding: 0px !important;
}

.page-home-container {
  max-width: 100%;
}

h1{
  font-size: clamp(4.5rem, 6vw, 70px) !important;
  line-height: 0.9 !important;
  margin: 0 !important;
  text-align: center;
}

.page-home-text {
  margin-top: 75px;
}

.page-home-tit, .page-home-text, .page-home-conoce, .cmp_monographs_list {
  margin-left: 9% !important;
  margin-right: 9% !important;
}

.monographs_carousel_nav {
  margin-right: 9% !important;
  margin-top: 5%;
}

body.pkp_page_index.pkp_op_index .cmp_monographs_list .obj_monograph_summary{
  margin-top: 20% !important;
}

.cmp_breadcrumbs {
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  display: flex;
}

 .pkp_structure_content {
    padding-top: 100px;
  }

  .pkp_structure_content{
    padding-left: 9%;
    padding-right: 9%;
  }

  .pkp_structure_main .contenido_full_acerca h2 {
    font-size: clamp(3.25rem, 5vw, 55px) !important;
    margin-top: 15% !important;
    text-align: center;
  }

}