/* Nuevos estilos

Ver: 1.0.4
Fecha: 2025-11-26
Autor: Aguadigital
Descrip: Estilos para la plantilla de NOVO

*/

/* ============================================
   Estilos para Plantilla Nosotros
   ============================================ */

/* Título de la página NOVO Nosotros */
.titulo-pagina-novo {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Principios Guía - Grid y Cards */
.principios-guia-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.principio-guia-card {
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
}

.principio-guia-card:hover {
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
}

.principio-guia-descripcion {
  transition: opacity 0.3s ease;
}

.principio-guia-card .card-title {
  text-align: center !important;
}

.principio-guia-card .principio-guia-titulo {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

.principio-guia-card .principio-guia-descripcion {
  text-align: center !important;
}

.principio-guia-card .principio-guia-descripcion p {
  text-align: center !important;
}

@media (max-width: 768px) {
  .principios-guia-grid {
    grid-template-columns: 1fr !important;
  }
  .principio-guia-card {
    min-height: 250px !important;
  }
  .principio-guia-titulo {
    font-size: 1.2em !important;
  }
  .principios-guia-section-title {
    font-size: 1.5em !important;
  }
}

@media (max-width: 480px) {
  .principio-guia-card {
    min-height: 200px !important;
    padding: 1.5rem !important;
  }
  .principio-guia-titulo {
    font-size: 1.1em !important;
  }
  .principios-guia-section-title {
    font-size: 1.3em !important;
  }
}

/* Timeline - Slider */
.nosotros-timeline-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.nosotros-timeline-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1180px;
  flex: 1;
  padding: 1rem 0;
  margin: 0 auto;
}

.nosotros-timeline-slider {
  position: relative;
  width: 100%;
}

.nosotros-timeline-slide {
  display: none;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nosotros-timeline-slide.active {
  display: block;
  opacity: 1;
}

.nosotros-timeline-image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 1rem;
}

.nosotros-timeline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.nosotros-timeline-slide.active .nosotros-timeline-image {
  transform: scale(1);
}

.nosotros-timeline-content {
  text-align: center;
  padding: 0 1rem;
  max-width: 1180px;
  margin: 0 auto;
}

.nosotros-timeline-fecha {
  font-size: 1em;
  font-weight: bold;
  color: #042354;
  margin-bottom: 0.75rem;
}

.nosotros-timeline-titulo {
  margin-bottom: 0.75rem;
  color: #042354;
  font-size: 1.1em;
}

.nosotros-timeline-descripcion {
  color: #333;
  line-height: 1.5;
  font-size: 0.9em;
}

.nosotros-timeline-nav {
  position: relative;
  background: rgba(200, 200, 200, 0.5);
  color: #042354;
  border: none;
  width: 55px;
  height: 55px;
  min-width: 55px;
  min-height: 55px;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  flex-shrink: 0;
}

.nosotros-timeline-nav:hover {
  background: rgba(200, 200, 200, 0.7);
  transform: scale(1.05);
}

.nosotros-timeline-nav .material-icons {
  font-size: 2rem;
  color: #042354;
  font-weight: normal;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nosotros-timeline-prev {
  order: 1;
}

.nosotros-timeline-slider-wrapper {
  order: 2;
}

.nosotros-timeline-next {
  order: 3;
}

.nosotros-timeline-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.nosotros-timeline-bullet {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  border: 2px solid #042354;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nosotros-timeline-bullet span {
  display: none;
}

.nosotros-timeline-bullet.active,
.nosotros-timeline-bullet:hover {
  background: #042354;
}

@media (max-width: 768px) {
  .nosotros-timeline-container {
    flex-direction: row;
    gap: 0;
  }
  
  .nosotros-timeline-slider-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative;
  }
  
  .nosotros-timeline-nav {
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    background: rgba(200, 200, 200, 0.5);
  }
  
  .nosotros-timeline-nav:hover {
    background: rgba(200, 200, 200, 0.7);
    transform: translateY(-50%) scale(1.05);
  }
  
  .nosotros-timeline-nav .material-icons {
    font-size: 1.5rem;
    font-weight: normal;
  }
  
  .nosotros-timeline-prev {
    left: 10px;
  }
  
  .nosotros-timeline-next {
    right: 10px;
  }
  
  .nosotros-timeline-content {
    padding: 0 1rem;
    max-width: 100%;
  }
  
  .nosotros-timeline-image-wrapper {
    margin-bottom: 0.75rem;
  }
  
  .nosotros-timeline-container {
    max-width: 100%;
  }
  
  .nosotros-timeline-slider-wrapper {
    max-width: 100%;
  }
  
  .nosotros-timeline-pagination {
    display: none !important;
  }
}

/* Jefes de Departamento - Slider (Nuevo diseño mejorado) */
.jefes-depto-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.jefes-depto-slider-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
  min-height: 500px;
}

.jefes-depto-slider {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}

.jefes-depto-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

/* Desktop: cada slide ocupa 33.33% (tres cards visibles) */
@media (min-width: 769px) {
  .jefes-depto-slide {
    width: 33.333%;
    padding: 0 0.5rem;
  }
}

.jefes-depto-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}

.jefes-depto-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.jefes-depto-image-wrapper {
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  position: relative;
}

.jefes-depto-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
}

.jefes-depto-card:hover .jefes-depto-image {
  transform: scale(1.02);
}

.jefes-depto-content {
  width: 100%;
  background-color: #042354;
  color: #FFFFFF;
  padding: 1.5rem 1.25rem;
  margin: 0;
  text-align: center;
  min-height: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.jefes-depto-nombre {
  color: #FFFFFF;
  margin: 0 0 0.5rem 0;
  font-size: 1.25em;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.jefes-depto-periodo {
  font-size: 0.9em;
  color: #FFFFFF;
  margin: 0 0 0.75rem 0;
  font-style: italic;
  opacity: 0.95;
  text-align: center;
}

.jefes-depto-descripcion {
  color: #FFFFFF;
  line-height: 1.6;
  font-size: 0.9em;
  text-align: center;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

.jefes-depto-descripcion p {
  color: #FFFFFF;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.jefes-depto-descripcion p:last-child {
  margin-bottom: 0;
}

/* Navegación - Flechas azul oscuro sobre rectángulo gris transparente */
.jefes-depto-nav {
  position: relative;
  background: rgba(200, 200, 200, 0.5);
  color: #042354;
  border: none;
  width: 55px;
  height: 55px;
  min-width: 55px;
  min-height: 55px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.jefes-depto-nav:hover {
  background: rgba(200, 200, 200, 0.7);
  transform: scale(1.05);
}

.jefes-depto-nav:active {
  transform: scale(0.95);
}

.jefes-depto-nav .material-icons {
  font-size: 2.2rem;
  color: #042354;
  line-height: 1;
  font-weight: normal;
  pointer-events: none;
  user-select: none;
}

.jefes-depto-prev {
  order: 1;
  margin-right: 0;
}

.jefes-depto-slider-wrapper {
  order: 2;
}

.jefes-depto-next {
  order: 3;
  margin-left: 0;
}

/* Paginación */
.jefes-depto-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
  padding: 0;
}

.jefes-depto-bullet {
  width: 8px;
  height: 8px;
  min-width: 25px;
  min-height: 25px;
  border-radius: 50%;
  border: 1.5px solid #042354;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.jefes-depto-bullet span {
  display: none;
}

.jefes-depto-bullet.active,
.jefes-depto-bullet:hover {
  background: #042354;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .jefes-depto-slider-container {
    flex-direction: row;
    gap: 0;
    position: relative;
  }
  
  .jefes-depto-slider-wrapper {
    min-height: 450px;
  }
  
  .jefes-depto-slide {
    width: 100%;
    padding: 0 0.5rem;
  }
  
  .jefes-depto-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    background: rgba(200, 200, 200, 0.5);
    z-index: 100;
    border-radius: 0;
    pointer-events: auto;
  }
  
  .jefes-depto-nav:hover {
    background: rgba(200, 200, 200, 0.7);
    transform: translateY(-50%) scale(1.05);
  }
  
  .jefes-depto-nav:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .jefes-depto-nav .material-icons {
    font-size: 1.75rem;
  }
  
  .jefes-depto-prev {
    left: 10px;
    order: 1;
  }
  
  .jefes-depto-slider-wrapper {
    order: 2;
  }
  
  .jefes-depto-next {
    right: 10px;
    order: 3;
  }
  
  .jefes-depto-pagination {
    display: none !important;
  }
  
  .jefes-depto-content {
    min-height: auto;
    height: auto;
    padding: 1.25rem 1rem;
  }
  
  .jefes-depto-nombre {
    font-size: 1.1em;
  }
  
  .jefes-depto-descripcion {
    font-size: 0.85em;
  }
}

.section-novo-labs {
  width: 100%;
  padding: 0;
  margin: 0;
}

.container-novo-full {
  width: 100%;
  padding: 0;
  margin: 0;
}

.grid-link-cards-novo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.link-card-novo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 300px;
  padding: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  text-decoration: none;
  transition: background-image 0.3s ease, color 0.3s ease;
  overflow: hidden;
}

.link-card-novo[data-bg-image]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4, 35, 84, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.link-card-novo[data-bg-image]:hover::before {
  opacity: 1;
}

.texto-card-novo {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.heading-4-novo {
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  margin: 0;
  color: #FFFFFF; /* Color por defecto para azul oscuro y azulino */
  transition: color 0.3s ease;
  
}

/* Color específico para cards amarillas y celestes - texto azul oscuro cuando es plano */
.link-card-novo.card-amarillo .heading-4-novo,
.link-card-novo[style*="background-color: #FAD634"] .heading-4-novo,
.link-card-novo[style*="background-color: #41B9E4"] .heading-4-novo {
  color: #042354;
}

/* Cuando hay hover con imagen, el texto debe ser blanco para todas las cards */
.link-card-novo[data-bg-image]:hover .heading-4-novo {
  color: #FFFFFF !important;
}

.link-card-novo:focus,
.link-card-novo:focus-visible {
  outline: 2px solid rgba(250, 214, 52, 0.4);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Responsive - Tablet */
@media screen and (max-width: 991px) {
  .grid-link-cards-novo {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .link-card-novo {
    min-height: 280px;
  }
}

/* Responsive - Mobile */
@media screen and (max-width: 767px) {
  .grid-link-cards-novo {
    grid-template-columns: 1fr;
  }
  
  .link-card-novo {
    min-height: 120px;
  }
}

/* Estilos para Equipo de Trabajo NOVO */

/* Contenedor sin menú lateral */
.content-right-equipo-novo {
  width: 100%;
  max-width: 100%;
}

/* Títulos centrados */
.heading-equipo-novo {
  text-align: center;
  margin-bottom: 2rem;
}

/* Grid para las cards de equipo - 3 columnas */
.grid-equipo-novo-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* Grid para las cards de equipo - 2 columnas */
.grid-equipo-novo-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}

/* Cards de equipo con colores - sin bisel, padding pequeño */
.card-equipo-novo-color {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  padding: 0.5rem;
  min-height: auto;
  box-sizing: border-box;
  overflow: hidden;
}

.card-equipo-novo-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

/* Foto pequeña al lado izquierdo - tamaño de retrato pequeño */
.card-equipo-novo-foto {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  margin-right: 0.75rem;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  flex-shrink: 0;
  
}

.card-equipo-novo-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Nombre con letra pequeña */
.card-equipo-novo-nombre {
  margin: 0;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  font-family: inherit;
}

/* Datos con letra pequeña e iconos */
.card-equipo-novo-dato {
  margin: 0;
  margin-bottom: 0.25rem;
  font-size: 0.625rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-family: inherit;
}

.card-equipo-novo-dato i {
  font-size: 0.625rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  width: 0.625rem;
}

.card-equipo-novo-link {
  text-decoration: underline;
  transition: opacity 0.2s ease;
  word-break: break-word;
}

.card-equipo-novo-link:hover {
  opacity: 0.8;
}

/* Asegurar que los estilos de equipo NOVO no afecten otras cards */
.card-equipo-novo-color .card-equipo-novo-link {
  text-decoration: underline;
  transition: opacity 0.2s ease;
  word-break: break-word;
}

.card-equipo-novo-color .card-equipo-novo-link:hover {
  opacity: 0.8;
}

/* Card jefe de departamento NOVO */
.card-jefe-dpto-novo {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e4eb;
  background-color: transparent;
}

.card-jefe-dpto-novo .div-portrait-small {
  width: 7rem;
  height: 7rem;
  min-width: 7rem;
  margin-bottom: 0;
  margin-right: 1rem;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background-color: #fff !important;
  background-image: none !important;
}

.card-jefe-dpto-novo .card-horizontal-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 1rem;
}

.card-jefe-dpto-novo .card-title {
  margin-bottom: 0.5rem;
}

.card-jefe-dpto-novo .heading {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
}

.card-jefe-dpto-novo .body-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.card-jefe-dpto-novo .body-text.s {
  font-size: 1rem;
  text-align: justify;
}

.card-jefe-dpto-novo .body-text.s i {
  font-size: 1rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.card-jefe-dpto-novo .body-text.s[style*="display: flex"] i {
  margin-right: 0;
  margin-top: 0.125rem;
}

/* Responsive - Tablet */
@media screen and (max-width: 991px) {
  .grid-equipo-novo-3col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-equipo-novo-2col {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .card-equipo-novo-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .card-equipo-novo-foto {
    margin-right: 0.75rem;
    margin-bottom: 0;
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
  }
  
  .card-equipo-novo-info {
    text-align: left;
    align-items: flex-start;
  }
  
  .card-jefe-dpto-novo {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  
  .card-jefe-dpto-novo .div-portrait-small {
    width: 7rem;
    height: 7rem;
    min-width: 7rem;
    max-width: 7rem;
    margin-right: 0;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }
  
  .card-jefe-dpto-novo .card-horizontal-text-wrapper {
    text-align: center;
    align-items: center;
    width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
    padding-left: 0;
  }
}

/* Responsive - Tablet (segunda sección - para botones de profesores) */
@media screen and (max-width: 991px) {
  .grid-equipo-novo-3col {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  
  .grid-equipo-novo-2col {
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  
  .card-equipo-novo-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .card-equipo-novo-foto {
    margin-right: 0.75rem;
    margin-bottom: 0;
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
  }
  
  .card-equipo-novo-info {
    text-align: left;
    align-items: flex-start;
  }
  
  .card-equipo-novo-buttons {
    justify-content: flex-start;
    width: 100%;
  }
  
  .button-profesores-novo {
    flex: 0 0 auto;
    min-width: 0;
  }
  
  .card-jefe-dpto-novo {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }
  
  .card-jefe-dpto-novo .div-portrait-small {
    width: 7rem;
    height: 7rem;
    min-width: 7rem;
    max-width: 7rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }
  
  .card-jefe-dpto-novo .card-horizontal-text-wrapper {
    text-align: center;
    align-items: center;
    width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
    padding-left: 0;
  }
}

/* Responsive - Mobile */
@media screen and (max-width: 767px) {
  .grid-equipo-novo-3col {
    grid-template-columns: 1fr;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  
  .grid-equipo-novo-2col {
    grid-template-columns: 1fr;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }
  
  .heading-equipo-novo {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .card-equipo-novo-color {
    padding: 0.5rem;
  }
  
  .card-equipo-novo-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .card-equipo-novo-foto {
    margin-right: 0.75rem;
    margin-bottom: 0;
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
  }
  
  .card-equipo-novo-info {
    text-align: left;
    align-items: flex-start;
  }
  
  .card-equipo-novo-buttons {
    flex-direction: column;
    gap: 0.375rem;
  }
  
  .button-profesores-novo {
    width: auto;
    flex: 0 0 auto;
  }
  
}

/* Estilos para botones de profesores - horizontal */
.card-equipo-novo-buttons {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.375rem;
  width: 100%;
}

.button-profesores-novo {
  background-color: #FFFFFF;
  color: #2841DD;
  border: none;
  padding: 0.375rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: color 0.3s ease;
  text-align: center;
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  height: auto;
}

.button-profesores-novo:hover {
  background-color: #FFFFFF;
}

.button-profesores-novo-text {
  color: #042354;
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.button-profesores-novo:hover .button-profesores-novo-text {
  color: #2841DD;
}

/* ============================================
   Estilos para NOVO Ingeniería 2030
   ============================================ */

/* Grid de cards NOVO con márgenes */
.grid-407-novo {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

/* Cards NOVO */
.novo-card {
  padding: 2rem;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.novo-card-image {
  margin-bottom: 1.5rem;
}

.novo-card-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.novo-card-title {
  margin-bottom: 1rem;
}

.novo-card-button-wrapper {
  margin-top: 1.5rem;
}

.novo-card-button {
  background-color: inherit;
  color: inherit;
  border: 2px solid currentColor;
}

/* Contenedor full width para secciones a sangre */
.container-novo-full-width {
  max-width: 100%;
  padding: 0;
}

/* Grid de principios guía */
.principios-guia-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

/* Cards de principios guía */
.principio-guia-card {
  padding: 2rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: none !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.principio-guia-card:hover {
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
}

/* Overlay de principios guía */
.principio-guia-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4, 35, 84, 0.75);
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Text wrapper de principios guía */
.principio-guia-text-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.principio-guia-card-title {
  width: 100%;
  text-align: center;
}

/* Título de principios guía */
.principio-guia-titulo {
  font-size: 1.6em;
  margin: 0;
  transition: transform 0.3s ease, color 0.3s ease;
  text-align: center;
  width: 100%;
}

/* Descripción de principios guía */
.principio-guia-descripcion {
  transition: opacity 0.3s ease;
  text-align: center;
}

.principio-guia-descripcion p {
  text-align: center !important;
}

/* Cards de misión y visión */
.mision-vision-card {
  padding: 2rem;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 8px;
}

.mision-vision-card.mision {
  background-color: #042354;
  color: #fff;
}

.mision-vision-card.vision {
  background-color: #2841DD;
  color: #fff;
}

.mision-vision-card .heading {
  color: #fff;
  margin-bottom: 1rem;
}

.mision-vision-card .w-richtext {
  color: #fff;
}

/* Grid de misión y visión */
.grid-mision-vision {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}

/* Responsive - Tablet y Mobile */
@media (max-width: 768px) {
  .grid-407-novo {
    grid-template-columns: 1fr !important;
  }
  
  .principios-guia-grid {
    grid-template-columns: 1fr !important;
  }
  
  .principio-guia-card {
    min-height: 250px !important;
  }
  
  .principio-guia-titulo {
    font-size: 1.2em !important;
  }
  
  .principios-guia-section-title {
    font-size: 1.5em !important;
  }
}

@media (max-width: 480px) {
  .principio-guia-card {
    min-height: 200px !important;
    padding: 1.5rem !important;
  }
  
  .principio-guia-titulo {
    font-size: 1.1em !important;
  }
  
  .principios-guia-section-title {
    font-size: 1.3em !important;
  }
}

/* ============================================
   Estilos para Plantilla Cards
   ============================================ */

.grid-cards-custom {
  grid-template-columns: repeat(3, 1fr) !important;
  -ms-grid-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Asegurar 3 columnas en desktop y tablet */
@media screen and (min-width: 769px) {
  .grid-407.grid-cards-custom {
    grid-template-columns: repeat(3, 1fr) !important;
    -ms-grid-columns: 1fr 1fr 1fr !important;
  }
}

@media screen and (min-width: 992px) {
  .grid-407.grid-cards-custom {
    grid-template-columns: repeat(3, 1fr) !important;
    -ms-grid-columns: 1fr 1fr 1fr !important;
  }
}

.link-card-custom {
  transform: none !important;
  transition: background-image 0.3s ease, background-color 0.3s ease !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding: 0 !important;
  padding-bottom: 100% !important;
  min-height: 320px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  text-decoration: none !important;
  background-image: none !important;
}

.link-card-custom .texto-card-custom {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 30px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.link-card-custom::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

.link-card-custom:hover::before {
  opacity: 1 !important;
}

.link-card-custom:hover {
  transform: none !important;
  scale: 1 !important;
}

.texto-card-custom {
  z-index: 2 !important;
}

.texto-card-custom .heading-4 {
  font-size: 1rem !important;
  margin-bottom: 15px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.contenido-card-custom {
  font-size: 14px !important;
  line-height: 1.6 !important;
  width: 100% !important;
}
.contenido-card-custom ul {
  color:inherit !important;
}
.contenido-card-custom p {
  margin: 5px 0 !important;
  color:inherit !important;
}

/* Si la card tiene imagen de fondo, en hover el texto debe ser blanco para mantenerse visible */
.link-card-custom[data-has-image="true"]:hover .texto-card-custom .heading-4,
.link-card-custom[data-has-image="true"]:hover .contenido-card-custom,
.link-card-custom[data-has-image="true"]:hover .contenido-card-custom p {
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .grid-cards-custom {
    grid-template-columns: 1fr !important;
  }
  
  .link-card-custom {
    height: auto !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
  
  .link-card-custom .texto-card-custom {
    position: relative !important;
    padding: 20px 15px !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .contenido-card-custom {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* ============================================
   Estilos para Grupos de Investigación
   ============================================ */

.grid-grupos-custom {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
}

.link-grupo-custom {
  transform: none !important;
  transition: background-image 0.3s ease !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  min-height: 400px !important;
  padding: 30px 20px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  text-decoration: none !important;
}

.link-grupo-custom::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(4, 35, 84, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

.link-grupo-custom:hover::before {
  opacity: 1 !important;
}

.link-grupo-custom:hover {
  transform: none !important;
  scale: 1 !important;
}

.texto-grupo-custom {
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  z-index: 2 !important;
}

.texto-grupo-custom .heading-4 {
  font-size: 1.25em !important;
  margin-bottom: 15px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/* Título azul oscuro para cards amarillos y celestes sin imagen */
.link-grupo-custom[data-bg-color="#FAD634"]:not([data-has-image="true"]) .texto-grupo-custom .heading-4,
.link-grupo-custom[data-bg-color="#41B9E4"]:not([data-has-image="true"]) .texto-grupo-custom .heading-4 {
  color: #042354 !important;
}

.contenido-grupo-custom {
  font-size: 14px !important;
  line-height: 1.6 !important;
  width: 100% !important;
}

.contenido-grupo-custom p {
  margin: 5px 0 !important;
}

.contenido-grupo-custom .text-inline {
  font-size: 13px !important;
}

.contenido-grupo-custom .text-inline.smr-25 {
  font-weight: 600 !important;
}

.contenido-grupo-custom .c-t-link {
  text-decoration: underline !important;
}

.contenido-grupo-custom .c-t-link:hover {
  opacity: 0.8 !important;
}

/* Cuando hay imagen de fondo y se hace hover, TODO el texto debe ser blanco */
.link-grupo-custom[data-has-image="true"]:hover .texto-grupo-custom .heading-4,
.link-grupo-custom[data-has-image="true"]:hover .contenido-grupo-custom,
.link-grupo-custom[data-has-image="true"]:hover .contenido-grupo-custom p,
.link-grupo-custom[data-has-image="true"]:hover .contenido-grupo-custom .text-inline,
.link-grupo-custom[data-has-image="true"]:hover .contenido-grupo-custom .c-t-link {
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .grid-grupos-custom {
    grid-template-columns: 1fr !important;
  }
  .link-grupo-custom {
    min-height: 300px !important;
  }
}

/* ============================================
   Estilos para Plantilla Secciones
   ============================================ */

.grid-secciones-custom {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
}

.link-seccion-custom {
  transform: none !important;
  transition: background-image 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 250px !important;
  padding: 20px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}

.link-seccion-custom::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #042354 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

.link-seccion-custom:hover::before {
  opacity: 0.7 !important;
}

.link-seccion-custom:hover {
  transform: none !important;
  scale: 1 !important;
}

.texto-seccion-custom {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.texto-seccion-custom .heading-4 {
  font-size: 1.25em !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.contenido-seccion-custom {
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.contenido-seccion-custom p {
  margin: 5px 0 !important;
}

/* Título azul oscuro para cards amarillas y celestes sin imagen */
.link-seccion-custom[data-bg-color="#FAD634"]:not([data-has-image="true"]) .texto-seccion-custom .heading-4,
.link-seccion-custom[data-bg-color="#FAD634"]:not([data-has-image="true"]) .contenido-seccion-custom,
.link-seccion-custom[data-bg-color="#FAD634"]:not([data-has-image="true"]) .contenido-seccion-custom p,
.link-seccion-custom[data-bg-color="#41B9E4"]:not([data-has-image="true"]) .texto-seccion-custom .heading-4,
.link-seccion-custom[data-bg-color="#41B9E4"]:not([data-has-image="true"]) .contenido-seccion-custom,
.link-seccion-custom[data-bg-color="#41B9E4"]:not([data-has-image="true"]) .contenido-seccion-custom p {
  color: #042354 !important;
}

/* Cuando hay imagen de fondo y se hace hover, TODO el texto debe ser blanco */
.link-seccion-custom[data-has-image="true"]:hover .texto-seccion-custom .heading-4,
.link-seccion-custom[data-has-image="true"]:hover .contenido-seccion-custom,
.link-seccion-custom[data-has-image="true"]:hover .contenido-seccion-custom p {
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .grid-secciones-custom {
    grid-template-columns: 1fr !important;
  }
  .link-seccion-custom {
    height: 120px !important;
  }
}

/* ============================================
   Estilos para Botón SITE
   ============================================ */

/* Botón SITE - Desktop (fixed) - Independiente del navbar */
/* Posicionado de forma absoluta respecto al viewport */
.site-button-fixed {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 1002 !important;
  background-color: #FFFFFF;
  color: #042354;
  padding: 0.29rem 1.5rem;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 2px 5px 0 rgba(24, 29, 37, 0.15);
  pointer-events: auto !important;
}

/* Ajuste cuando existe el botón de Weglot para evitar superposición */
/* El botón de Weglot tiene aproximadamente 80px de ancho, así que movemos el botón DI+ 80px más a la izquierda */
/* Manteniendo los 40px desde la esquina derecha + espacio para el botón de Weglot = 120px total */
body:has(.country-selector) .site-button-fixed {
  right: calc(40px + 80px);
}

.container-navbar-l {
  position: relative;
}

.site-button-fixed:hover {
  background-color: #FAD634;
  color: #042354;
}

.site-button-fixed:focus,
.site-button-fixed:focus-visible {
  outline: 2px solid rgba(250, 214, 52, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
  background-color: rgba(250, 214, 52, 0.9);
  color: #042354;
}

/* Botón SITE - Mobile (dentro del menú hamburguesa) */
.site-button-mobile {
  display: none;
  background-color: #FFFFFF;
  color: #042354;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  text-align: center;
  margin: 0.5rem auto;
  width: calc(100% - 2rem);
  max-width: 200px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(24, 29, 37, 0.15);
  border-radius: 0;
}

.site-button-mobile:hover {
  background-color: #FAD634;
  color: #042354;
}

.site-button-mobile:focus,
.site-button-mobile:focus-visible {
  outline: 2px solid rgba(250, 214, 52, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
  background-color: rgba(250, 214, 52, 0.9);
  color: #042354;
}

/* Responsive - Mostrar botón móvil y ocultar fixed */
@media screen and (max-width: 991px) {
  .site-button-fixed {
    display: none;
  }
  
  .site-button-mobile {
    display: block;
  }
  
  /* Asegurar que el botón móvil se vea bien dentro del overlay del menú */
  .w-nav-overlay .site-button-mobile,
  [data-nav-menu-open] .site-button-mobile {
    display: block;
  }
}

/* ============================================
   Grid de 3 columnas para cifras de investigación
   ============================================ */
.grid-306-novo {
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

@media screen and (max-width: 991px) {
  .grid-306-novo {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .grid-306-novo {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Estilos para Plantilla SCards
   ============================================ */

/* Grid de SCards */
.scards-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

/* Cards SCards */
.scard-card {
  padding: 2rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: none !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.scard-card:hover {
  transform: none !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
}

/* Overlay de SCards */
.scard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(4, 35, 84, 0.75);
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* Text wrapper de SCards */
.scard-text-wrapper {
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.scard-title-wrapper {
  width: 100%;
  text-align: center;
}

/* Título de SCards */
.scard-titulo {
  font-size: 1.6em;
  margin: 0;
  transition: transform 0.3s ease, color 0.3s ease;
  text-align: center;
  width: 100%;
}

/* Descripción de SCards */
.scard-descripcion {
  transition: opacity 0.3s ease;
  text-align: center;
  margin-top: 1rem;
}

.scard-descripcion p {
  text-align: center !important;
  margin: 0;
}

/* Título de sección SCards */
.scards-section-title {
  font-size: 2em;
  margin-bottom: 2rem;
}

/* Responsive - Tablet y Mobile */
@media (max-width: 768px) {
  .scards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .scard-card {
    min-height: 250px !important;
  }
  
  /* En responsive: ocultar overlay y mostrar color de fondo directamente */
  .scard-card .scard-overlay {
    display: none !important;
    opacity: 0 !important;
  }
  
  /* En responsive: siempre mostrar descripción */
  .scard-card .scard-descripcion {
    display: block !important;
    opacity: 1 !important;
  }
  
  /* En responsive: si tiene imagen, mostrar el color de fondo en su lugar */
  .scard-card[data-bg-color]:not([data-bg-color="transparent"]) {
    background-image: none !important;
  }
  
  /* Ajustar colores de texto en responsive según el fondo */
  .scard-titulo {
    font-size: 1.2em !important;
    transform: none !important;
  }
  
  .scards-section-title {
    font-size: 1.5em !important;
  }
}

@media (max-width: 480px) {
  .scard-card {
    min-height: 200px !important;
    padding: 1.5rem !important;
  }
  
  .scard-titulo {
    font-size: 1.1em !important;
  }
  
  .scards-section-title {
    font-size: 1.3em !important;
  }
}

/* ============================================
   Estilos para Plantilla Linking
   ============================================ */

/* Título centrado para Linking - asegurar centrado completo */
.section-title.long-content.centered {
  display: block !important;
  text-align: center !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Cards de Linking - mismo ancho que long-content-regular */
.linking-card {
  padding: 2rem;
  border-radius: 0;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.linking-card-azul {
  background-color: #042354;
  color: #FFFFFF;
}

.linking-card-azul * {
  color: #FFFFFF !important;
}

.linking-card-amarillo {
  background-color: #FAD634;
  color: #042354;
}

.linking-card-amarillo * {
  color: #042354 !important;
}

.linking-card-amarillo h2,
.linking-card-amarillo h3,
.linking-card-amarillo h4 {
  color: #042354 !important;
}

.linking-card-gris {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 0;
  margin-bottom: 2rem;
}

/* Estilos para formulario de contacto en Linking - 2 columnas en desktop */
.linking-form-contacto {
  display: flex;
  flex-direction: column;
}

.linking-form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

.linking-form-col {
  width: 100%;
  margin-bottom: 0.75rem;
}

.linking-form-col .ErrorForm {
  margin-bottom: 0;
}

.linking-form-col .input,
.linking-form-col .select {
  width: 100%;
  margin-bottom: 0;
}

/* Desktop: 2 columnas */
@media (min-width: 768px) {
  .linking-form-row {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 0;
  }
  
  .linking-form-col {
    flex: 1;
    margin-bottom: 0.75rem;
  }
}

.linking-card-azul video {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border-radius: 0;
  margin-top: 1rem;
}

/* Estilos para galería slider */
.linking-galeria-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.linking-galeria-slider-wrapper {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
  min-height: 500px;
}

.linking-galeria-slider {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}

.linking-galeria-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.linking-galeria-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}

.linking-galeria-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.linking-galeria-image-wrapper {
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  position: relative;
}

.linking-galeria-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
}

.linking-galeria-card:hover .linking-galeria-image {
  transform: scale(1.02);
}

/* Navegación - Flechas */
.linking-galeria-nav {
  position: relative;
  background: rgba(200, 200, 200, 0.5);
  color: #042354;
  border: none;
  width: 55px;
  height: 55px;
  min-width: 55px;
  min-height: 55px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
}

.linking-galeria-nav:hover {
  background: rgba(200, 200, 200, 0.7);
  transform: scale(1.05);
}

.linking-galeria-nav:active {
  transform: scale(0.95);
}

.linking-galeria-nav .material-icons {
  font-size: 2.2rem;
  color: #042354;
  line-height: 1;
  font-weight: normal;
}

.linking-galeria-prev {
  order: 1;
  margin-right: 0;
}

.linking-galeria-slider-wrapper {
  order: 2;
}

.linking-galeria-next {
  order: 3;
  margin-left: 0;
}

/* Paginación */
.linking-galeria-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
  padding: 0;
}

.linking-galeria-bullet {
  width: 8px;
  height: 8px;
  min-width: 25px;
  min-height: 25px;
  border-radius: 50%;
  border: 1.5px solid #042354;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.linking-galeria-bullet.active,
.linking-galeria-bullet:hover {
  background: #042354;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .linking-galeria-slider-container {
    flex-direction: row;
    gap: 0;
    position: relative;
    max-width: 100%;
  }
  
  .linking-galeria-slider-wrapper {
    min-height: auto;
    height: auto;
  }
  
  .linking-galeria-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    background: rgba(200, 200, 200, 0.5);
    z-index: 20;
    border-radius: 0;
  }
  
  .linking-galeria-nav:hover {
    background: rgba(200, 200, 200, 0.7);
    transform: translateY(-50%) scale(1.05);
  }
  
  .linking-galeria-nav:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .linking-galeria-nav .material-icons {
    font-size: 1.75rem;
  }
  
  .linking-galeria-prev {
    left: 10px;
    order: 1;
  }
  
  .linking-galeria-slider-wrapper {
    order: 2;
  }
  
  .linking-galeria-next {
    right: 10px;
    order: 3;
  }
  
  .linking-galeria-pagination {
    display: none !important;
  }
  
  .linking-card {
    padding: 1.5rem;
    max-width: 100%;
  }
}