/* Color y reset mínimo */
body {
  background-color: #EDF6F9;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #083238;
  -webkit-font-smoothing:antialiased;
}

/* contenedor general */
.novedades-root { background-color: transparent; }

/* encabezado */
.novedades-header .display-5 {
  color: #006D77;
  font-weight: 700;
}

/* cada feature (separación entre bloques) */
.feature {
  margin-bottom: 2rem;
}

/* Divisor sutil entre features (reduce espacio) */
.feature + .feature {
  border-top: 1px solid rgba(3,50,56,0.04);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

/* GRID base: 3 columnas lógicas (4fr + 8fr) mediante grid-areas.
   Definimos filas para colocar title/imagen/desc en las posiciones que necesitemos. */
.feature-grid {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  /* valor por defecto: image left */
  grid-template-columns: 4fr 8fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "media title"
    "media desc";
}

/* LEFT (imagen a la izquierda, texto a la derecha)
   si usamos .feature__content la columna de texto se llama 'content' y ocupa ambas filas */
.feature-grid--left {
  grid-template-columns: 4fr 8fr;
  grid-template-areas:
    "media content"
    "media content";
}

/* RIGHT (imagen a la derecha, texto a la izquierda)
   content ocupa la 1ª columna (8fr) y media la 2ª (4fr) */
.feature-grid--right {
  grid-template-columns: 8fr 4fr;
  grid-template-areas:
    "content media"
    "content media";
}

/* STACK (imagen entre título y descripción o imagen arriba) */
.feature-grid--stack {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "title"
    "media"
    "desc";
}

/* Asignación de areas a los elementos */
.feature__title {
  grid-area: title;
  margin: 0;
  color: #006D77;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.feature__media {
  grid-area: media;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(3,50,56,0.06);
}

/* imagen: adaptable */
.feature__media img {
  width: 100%;
  height: 320px;         /* altura por defecto en desktop */
  object-fit: cover;
  display: block;
}

/* descripción (cuando se usa como grid-item normal) */
.feature__desc {
  grid-area: desc;
  margin: 0;
  color: #0b4444;
  line-height: 1.45;
  font-size: 1rem;
  max-width: 56ch;
  text-align: center;
  align-self: start;
  justify-self: center;
  padding: 0.5rem 0;
}

/* Wrapper: .feature__content (la solución estable)
   Esta clase ocupa el área 'content' definida más arriba */
.feature__content {
  grid-area: content;             /* <- clave: asignamos el área del grid */
  display: flex;
  flex-direction: column;
  justify-content: center;        /* centra verticalmente dentro de la celda */
  align-items: center;            /* centra horizontalmente dentro de la celda */
  align-self: stretch;            /* asegurar que la celda ocupe la altura del grid */
  padding: 1rem;
  max-width: 56ch;
  width: 100%;
}

/* Si prefieres alineación a la izquierda en escritorio: cambiar align-items y text-align */
@media (min-width: 768px) {
  .feature__content {
    /* align-items: flex-start; text-align: left; */
    align-items: center;
    text-align: center;
  }
}

/* Centramos el texto verticalmente en el espacio de la columna texto (solo cuando hay columnas) */
@media (min-width: 768px) {
  /* Para layouts con dos columnas, los artículos sin wrapper siguen centrados */
  .feature-grid--left .feature__title,
  .feature-grid--left .feature__desc,
  .feature-grid--right .feature__title,
  .feature-grid--right .feature__desc {
    justify-self: center;
    align-self: center;
    text-align: center;
    max-width: 56ch;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Aumentar imagen en pantallas grandes */
  .feature__media img {
    height: 380px;
  }
}

/* MOBILE: apilar siempre y forzar orden: título -> imagen -> descripción */
@media (max-width: 767.98px) {
  .feature-grid,
  .feature-grid--left,
  .feature-grid--right,
  .feature-grid--stack {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title"
      "media"
      "desc";
  }

  /* reducir imagen en móvil */
  .feature__media img {
    height: 220px;
  }

  /* centrar todo en móvil */
  .feature__title,
  .feature__desc {
    text-align: center;
    justify-self: center;
  }

  /* en móvil, .feature__content seguirá ocupando su espacio apilado naturalmente */
}

/* pequeñas mejoras visuales: espaciado interno */
.feature__title { padding: 0.25rem 0; }
.feature__desc { padding-bottom: 0.5rem; }

.feature__media {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(3,50,56,0.06);
  background: #f6f7f8;
}

.feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
  max-height: 100%;
}

/* clase aplicada por JS cuando la imagen es más pequeña que su contenedor */
.feature__media.no-upscale img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/*CAMBIOS*/
/* 1) Evitar que contenido imponga un ancho mínimo (clave para grid) */
.feature__content,
.feature__media {
  min-width: 0;          /* permite que las columnas 4fr/8fr se respeten */
}

/* 2) Asegurar que la imagen no fuerce anchos (usa object-fit para mantener recorte) */
.feature__media img {
  display: block;
  width: 100%;
  height: auto;         /* en mobile / flow natural */
  max-width: 100%;
  object-fit: cover;
}

/* en desktop mantenemos altura fija si la quieres */
@media (min-width: 768px) {
  .feature__media img {
    height: 380px;      /* o 320px si prefieres */
    width: 100%;
    object-fit: cover;
  }
}

/* 3) Forzar gap horizontal consistente (si quieres más o menos, modifica) */
.feature-grid {
  column-gap: 1.25rem;   /* refuerza separación horizontal */
  gap: 1.25rem;
}

/* 4) Alineación del bloque de texto según variante: */
/* - en la variante RIGHT (texto a la izquierda), pegamos el bloque hacia la derecha de su columna
   - en la variante LEFT (texto a la derecha), pegamos el bloque hacia la izquierda de su columna
   Esto evita que el bloque quede "centrado" en una columna enorme. */
.feature-grid--right .feature__content {
  justify-self: end;     /* sitúa el bloque en el borde derecho de la columna texto */
  align-items: flex-end; /* dentro del flex, alinear los hijos hacia ese borde */
  text-align: right;
  padding-right: 1rem;
}

.feature-grid--left .feature__content {
  justify-self: start;   /* sitúa el bloque en el borde izquierdo de la columna texto */
  align-items: flex-start;
  text-align: left;
  padding-left: 1rem;
}

/* 5) limitar el ancho visual del bloque de texto (opcional) */
.feature__content {
  max-width: 56ch; /* ya lo tenías; lo mantenemos */
  width: 100%;
}

/* 6) Si quieres reducir el espacio total entre columnas en vistas muy anchas:
   puedes cambiar las fracciones o limitar el ancho máximo del contenedor padre. */
.feature {
  max-width: 1200px;     /* opcional: evita columnas enormes en pantallas muy anchas */
  margin-left: auto;
  margin-right: auto;
}

/* Ampliar imágenes */
/* indicador de interactividad en las imágenes de la página */
img.feature__media {
  cursor: zoom-in;
}

/* limpiar fondo y sombra del modal base */
#imageModal .modal-dialog,
#imageModal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* modal-body centra el wrapper */
#imageModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
}

/* wrapper que rodea la imagen: fondo + sombra + padding adaptable */
#imageModal .img-wrap {
  display: inline-block;
  background: rgba(255,255,255,0.98);   /* color del panel; ajusta si lo quieres más oscuro */
  border-radius: 8px;
  padding: 6px;                         /* espacio entre imagen y borde */
  box-shadow: 0 18px 40px rgba(3,50,56,0.14); /* sombra suave alrededor */
  -webkit-backdrop-filter: blur(2px);  /* ligero blur detrás si el navegador lo soporta */
  backdrop-filter: blur(2px);
}

/* la imagen dentro del wrapper se adapta al viewport sin recortar */
#imageModal .img-wrap #modalImage {
  display: block;
  max-width: calc(90vw - 12px);   /* restamos padding total del wrapper */
  max-height: calc(90vh - 12px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px; /* si quieres esquinas en la imagen */
  cursor: zoom-out;
}

/* eliminar cualquier sombra remanente en el <img> */
#imageModal .img-wrap #modalImage,
#imageModal .img-wrap {
  box-shadow: none;
}

/* ocultar el footer (caption) si no lo vas a usar */
#imageModal .modal-footer { display: none !important; }

/* accesibilidad: transición suave al abrir/cerrar (opcional) */
#imageModal .img-wrap,
#imageModal .img-wrap #modalImage {
  transition: opacity 150ms ease, transform 150ms ease;
}
/* Asegurar modal por encima de todo (evita clipping/z-index) */
#imageModal {
  z-index: 2080; /* encima del backdrop */
}
.modal-backdrop {
  z-index: 2070;
}

/* limpiar fondo y sombra del modal base */
#imageModal .modal-dialog,
#imageModal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible; /* importante: que no recorte la imagen */
}

/* modal-body centra el wrapper */
#imageModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
}

/* wrapper que rodea la imagen: fondo + sombra + padding adaptable */
#imageModal .img-wrap {
  display: inline-block;
  background: rgba(255,255,255,0.98);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(3,50,56,0.14);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: relative;
  z-index: 2090; /* por encima del modal si fuera necesario */
}

/* la imagen dentro del wrapper se adapta al viewport sin recortar */
#imageModal .img-wrap #modalImage {
  display: block;
  max-width: calc(90vw - 12px);
  max-height: calc(90vh - 12px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: zoom-out;
}

/* ocultar footer (caption) si no se utiliza */
#imageModal .modal-footer { display: none !important; }

/* transiciones suaves */
#imageModal .img-wrap,
#imageModal .img-wrap #modalImage {
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Versión Móvil */
/* --- MOBILE CARDS (solo para el contenedor #featuresMobile) --- */
.features-mobile {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

/* tarjeta simple para cada feature en móvil */
.feature-mobile-card {
  background: #eaf6f8;            /* mismo tono de fondo ligero */
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(3,50,56,0.06);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* imagen dentro de la tarjeta móvil */
.feature-mobile-card .mobile-img {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 88vw;      /* deja márgenes laterales agradables */
  width: 100%;
  height: auto;
  max-height: 40vh;     /* evita ocupar toda la pantalla */
  object-fit: contain;
  border-radius: 6px;
}

/* título y texto centrados */
.feature-mobile-card .mobile-title {
  color: #006D77;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 1rem 0;
}
.feature-mobile-card .mobile-desc {
  color: #0b4444;
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}

/* pequeños ajustes responsive extra (smaller phones) */
@media (max-width: 360px) {
  .feature-mobile-card { padding: 1rem; }
  .feature-mobile-card .mobile-title { font-size: 1.15rem; }
  .feature-mobile-card .mobile-desc { font-size: 0.92rem; max-width: 90vw; margin: 0 auto; }
}