/* ==========================================================================
   Project Modules - Hoja de estilos refactorizada
   - Reglas consolidadas, con nombres y sin duplicados.
   - Compatibilidad con las clases que genera PHP (pm-*, rw-*)
   - Variables CSS para tokens y para cambiar comportamiento (fit de imagen, gaps, altura del slider).
   ========================================================================== */

/* --------------------
   Tokens / valores por defecto
   -------------------- */
:root{
  /* tokens de espaciado */
  --pm-spacing-none: 0px;
  --pm-spacing-xs: 32px;
  --pm-spacing-sm: 48px;
  --pm-spacing-md: 64px;
  --pm-spacing-lg: 80px;

  /* module paddings (vertical) - central variable to ease global adjustments */
  --pm-module-vertical-padding: 60px;

  /* module margin-bottom presets - selectable per module in backend */
  --pm-module-margin-lg: 120px;   /* default for Visual tab */
  --pm-module-margin-md: 100px;   /* default for Technical tab */
  --pm-module-margin-sm: 40px;    /* default for Conceptual tab */
  --pm-module-margin-xs: 20px;    /* extra small margin */

  /* tokens de grid */
  --pm-grid-gap-xs: .5rem;
  --pm-grid-gap-sm: 1rem;
  --pm-grid-gap-md: 1.5rem;
  --pm-grid-gap-lg: 2.5rem;
  --pm-grid-columns: 12;

  /* valores por defecto para imágenes */
  --pm-image-fit: cover;     /* comportamiento por defecto; usar .pm-image--contain para cambiar */
  --pm-image-max-width: 100%;

  /* valores por defecto del slider */
  --pm-slider-height: 420px;
  --pm-slider-max-height: 520px;
}

/* ==========================================================================
   Contenedor principal y módulos
   ========================================================================== */
.rw-pm-wrapper {
  display: flex;
  flex-direction: column;
  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Asegurar box-model predecible en módulos */
.project-module {
  box-sizing: border-box;
  margin: 0 0 var(--pm-module-margin-lg, 120px) 0; /* default margin-bottom: 120px */
  width: 100%;
  /* Padding vertical centralizado via variable */
  
}

/* Margin-bottom modifiers - apply to individual modules via backend selector */
.project-module.pm-margin-lg { margin-bottom: var(--pm-module-margin-lg, 120px); }
.project-module.pm-margin-md { margin-bottom: var(--pm-module-margin-md, 100px); }
.project-module.pm-margin-sm { margin-bottom: var(--pm-module-margin-sm, 40px); }
.project-module.pm-margin-xs { margin-bottom: var(--pm-module-margin-xs, 20px); }

/* Ajuste para pantallas pequeñas */
@media (max-width: 600px){
   /* increase module margin-bottom values on mobile */
  .project-module.pm-margin-lg { margin-bottom: 200px; } /* 120px → 200px */
  .project-module.pm-margin-md { margin-bottom: 160px; } /* 100px → 160px */
  .project-module.pm-margin-sm { margin-bottom: 60px; }  /* 40px → 60px */
  .project-module.pm-margin-xs { margin-bottom: 8px; }   /* 20px → 8px */
}

/* ==========================================================================
   Imagen única (pm--type-image-single)
   - Mantiene las clases de alineación existentes: .pm-image-align-*
   ========================================================================== */
.pm--type-image-single {
  display: flex;               /* permite controlar con justify-content */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.pm--type-image-single .pm-image-single-wrapper {
  margin: 0;
  max-width: 100%;
  width: 100%;
}

/* helpers de alineación */
.pm--type-image-single.pm-image-align-left    { justify-content: flex-start; }
.pm--type-image-single.pm-image-align-center  { justify-content: center; }
.pm--type-image-single.pm-image-align-right   { justify-content: flex-end; }

/* full: romper el flex para dejar que el hijo ocupe 100% */
.pm--type-image-single.pm-image-align-full {
  display: block;
  width: 100%;
}
.pm--type-image-single.pm-image-align-full .pm-image-single-wrapper,
.pm--type-image-single.pm-image-align-full .pm-image-single-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Grid (pm--type-grid)
   - Base de 12 columnas; PHP debe generar inline: grid-column: span N
   - Modificadores: pm-cols-*, pm-gap-*, pm-axis-*
   - Evitar !important salvo en overrides justificados.
   ========================================================================== */

/* Reglas con mayor especificidad: asegurar que la clase wrapper (.project-module.pm--type-grid)
   controla el comportamiento del .pm-grid hijo (evita que resets externos pisen display:grid) */
.project-module.pm--type-grid .pm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-grid-gap, 18px);
  width: 100%;
  /* Cambiado a stretch para que los items puedan crecer y rellenar la altura del wrapper */
  align-items: stretch;
  box-sizing: border-box;
  min-height: 0;
}

/* Presets legados de columnas: (se pueden mantener como compatibilidad visual) */
.pm--type-grid.pm-cols-1 .pm-grid { grid-template-columns: 1fr; }
.pm--type-grid.pm-cols-2 .pm-grid { grid-template-columns: repeat(2, 1fr); }
.pm--type-grid.pm-cols-3 .pm-grid { grid-template-columns: repeat(3, 1fr); }

/* Presets de gap (mapeo desde la clase del wrapper) */
.project-module.pm--type-grid.pm-gap-none  .pm-grid { --pm-grid-gap: 0; }
.project-module.pm--type-grid.pm-gap-xs    .pm-grid { --pm-grid-gap: 8px; }
.project-module.pm--type-grid.pm-gap-sm    .pm-grid { --pm-grid-gap: 12px; }
.project-module.pm--type-grid.pm-gap-md    .pm-grid { --pm-grid-gap: 18px; }
.project-module.pm--type-grid.pm-gap-lg    .pm-grid { --pm-grid-gap: 28px; }

/* Mapeo horizontal de ejes (clases aplicadas al wrapper .project-module / pm--type-grid) */
.project-module.pm--type-grid.pm-axis-h-start .pm-grid  { justify-items: start; justify-content: start; }
.project-module.pm--type-grid.pm-axis-h-center .pm-grid { justify-items: center; justify-content: center; }
.project-module.pm--type-grid.pm-axis-h-end .pm-grid    { justify-items: end;   justify-content: end; }

/* space-between / around: estirar items en su área pero repartir globalmente */
.project-module.pm--type-grid.pm-axis-h-between .pm-grid { justify-items: stretch; justify-content: space-between; }
.project-module.pm--type-grid.pm-axis-h-around  .pm-grid { justify-items: stretch; justify-content: space-around; }

/* Mapeo vertical (clases en el wrapper aplican align-self a los items) */
.project-module.pm--type-grid.pm-axis-v-start .pm-grid > .pm-item { align-self: start; }
.project-module.pm--type-grid.pm-axis-v-center .pm-grid > .pm-item { align-self: center; }
.project-module.pm--type-grid.pm-axis-v-end .pm-grid > .pm-item { align-self: end; }

/* Item por defecto (envoltorio del área del grid) */
.pm--type-grid .pm-item {
  box-sizing: border-box;
  min-width: 0;
  width: auto;          /* el ancho real lo controla inline (flex-basis / max-width) */
  max-width: 100%;
  justify-self: stretch;
  display: block;
  padding: 0;           /* el espaciado entre items viene por gap */
}

/* Asegurar que los items ocupan toda la altura disponible del grid (para que las imágenes puedan rellenar) */
.project-module .pm-grid > .pm-item {
  display: flex;
  flex-direction: column;
  /* tomar la altura del contenedor (.pm-grid) cuando éste tenga height explícito */
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  justify-content: center;
}

/* Safari fix (no afecta a Chrome ni Firefox):
   @supports (-webkit-hyphens: none) selecciona únicamente Safari 10.1+.
   height:100% en un flex-child sin altura explícita en el padre colapsa a 0px en Safari,
   haciendo que los items (y sus imágenes) sean invisibles.
   Usamos align-self:stretch + height:auto como equivalente seguro solo para Safari. */
@supports (-webkit-hyphens: none) {
  .project-module .pm-grid > .pm-item {
    height: auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    align-self: stretch;
  }
}

/* Figura y contenido del item (sin cambios importantes) */
.pm--type-grid .pm-item-figure {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  line-height: 0;
}

/* Los contenedores de imagen deben ser flexibles y permitir que la <img> rellene el hueco */
.pm--type-grid .pm-item-figure,
.pm-slider .pm-slider-image,
.pm--type-image-single .pm-image-single-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  line-height: 0;
}

/* Imágenes dentro de items siguen ocupando 100% del contenedor del item */
.pm--type-grid .pm-item-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Forzar que TODAS las imágenes dentro de items/sliders/image-single ocupen el ancho completo
   y se vean completas sin recorte, ajustando su altura proporcionalmente. */
.pm--type-grid .pm-item-figure img,
.pm-slider .pm-slider-image img,
.pm--type-image-single .pm-image-single-wrapper img,
.pm-item-figure img.pm-image--contain,
.pm-item-figure img.pm-image--cover,
.pm-item-figure img.rw-pm-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  box-sizing: border-box !important;
}

/* Clase para mostrar la imagen completa sin recortes */
.pm--type-grid .pm-item-figure.pm-image--contain img,
.pm--type-grid .pm-item-figure img.pm-image--contain {
  object-fit: contain;
}

/* Clase para forzar recorte (cover) */
.pm--type-grid .pm-item-figure.pm-image--cover img,
.pm--type-grid .pm-item-figure img.pm-image--cover {
  object-fit: cover;
}

/* ==========================================================================
   Slider (pm-slider)
   - El slider mantiene su propio scope y mínima dependencia con las reglas del grid
   - Clases modificadoras: pm-slider--contain (no recortar) y pm-slider--adaptive (altura variable)
   ========================================================================== */

/* Slider (pm-slider) - usar altura exacta basada en la variable --pm-slider-height */
.pm-slider {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  min-width: 0;
  box-sizing: border-box;
}

/* Asegurar contención de imágenes en el slider (evita que se salgan del div) */
.project-module .pm-slider,
.pm-slider {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  width: auto;
}

/* El wrapper de slides - se ajusta al contenido de la imagen */
.pm-slider .slides {
  flex: none;
  position: relative;
  width: auto;
  height: 100%;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor por slide: el activo es relative para dar altura a slides */
.pm-slider .interior-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.pm-slider .interior-container.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}


.project-module.pm--type-grid.pm-axis-h-start .pm-slider { margin-left: 0; margin-right: auto; }
.project-module.pm--type-grid.pm-axis-h-center .pm-slider { margin: 0 auto; }
.project-module.pm--type-grid.pm-axis-h-end .pm-slider { margin-left: auto; margin-right: 0; }

/* Si el wrapper de módulo solicita altura (full/half) forzamos las imágenes a rellenar verticalmente
   pero manteniendo object-fit: contain para evitar recortes */
.project-module.pm-height-mode-full .pm-slider .pm-slider-image img,
.project-module.pm-height-mode-half .pm-slider .pm-slider-image img {
  width: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Aplicar el mismo comportamiento a las imágenes del grid cuando tienen altura forzada */
.project-module.pm-height-mode-full .pm--type-grid .pm-item-figure img,
.project-module.pm-height-mode-half .pm--type-grid .pm-item-figure img,
.project-module.pm-height-mode-full .pm-item-figure img.rw-pm-image,
.project-module.pm-height-mode-half .pm-item-figure img.rw-pm-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Refuerzo: overlay del slider con flex-shrink 0 para que siempre sea visible */
.pm-slider .pm-slider-overlay,
.pm-slider-overlay {
  flex: 0 0 auto;
  align-self: flex-end;
}

/* Asegurar que las imágenes no tapan overlays */
.pm-slider .pm-slider-image { z-index: 1; }
.pm-slider .interior-container { z-index: 0; }
.pm-slider .interior-container.active { z-index: 2; }

/* Las imágenes mantienen su aspect ratio natural con contain */
.pm-slider .pm-slider-image img {
  display: block !important;
}

/* Posicionar captions dentro del marco de la imagen */
.pm-slider .pm-slider-image {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-sizing: border-box;
}

.pm-slider .pm-slider-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  z-index: 5;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: .5rem .75rem;
  border-radius: 6px;
  pointer-events: none;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  font-family: "NeueHelveticaPro55Roman", Arial, sans-serif;
  font-size: 14px;
}

/* Mobile: overlay debajo de slides */
@media (max-width: 720px) {
  .pm-slider { 
    flex-direction: column;
    gap: 8px; 
  }
  .pm-slider { grid-template-columns: 1fr; gap: 8px; }

  /* Mostrar el overlay debajo de las slides pero centrar su contenido en móvil */
  .pm-slider .pm-slider-overlay,
  .pm-slider-overlay {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
    /* CENTER: centrar contenido en el bloque (vertical + horizontal) */
    display: flex !important;
    align-items: center !important;    /* centra verticalmente */
    justify-content: center !important;/* centra horizontalmente */
    text-align: center !important;
    padding: .6rem .8rem !important;
    box-sizing: border-box !important;
  }

  /* Asegurar que label y counter se apilen y queden centrados */
  .pm-slider .pm-slider-overlay .pm-slider-overlay-label,
  .pm-slider .pm-slider-overlay .pm-slider-overlay-counter,
  .pm-slider-overlay .pm-slider-overlay-label,
  .pm-slider-overlay .pm-slider-overlay-counter {
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Si el overlay antes estaba alineado a la derecha, eliminar ese comportamiento en móvil */
  .pm-slider .pm-slider-overlay { right: auto !important; bottom: auto !important; left: auto !important; }

  /* ajustes móviles para párrafos del módulo en móvil */
  .rw-leer-mas-wrap {
    font-size: 13px !important;
    line-height: 16.5px !important;
  }
}

/* ==========================================================================
   Sistema de Leer Más - Nuevo enfoque basado en líneas
   ========================================================================== */
.rw-leer-mas-wrap { 
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* Permite que el contenido se encoja */
  width: 100%;
  font-size: 14px;    /* tamaño de fuente requerido */
  line-height: 17px;   /* mantener legibilidad */
  color: #222;
  font-family: "NeueHelveticaPro55Roman", Arial, sans-serif;
}

.rw-leer-mas-texto-mostrado {
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.rw-leer-mas-texto-oculto {
  display: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.rw-leer-mas-wrap.mostrando-todo .rw-leer-mas-texto-mostrado {
  display: none;
}

.rw-leer-mas-wrap.mostrando-todo .rw-leer-mas-texto-oculto {
  display: block;
}

.rw-leer-mas-wrap.mostrando-todo .rw-leer-mas-btn {
  display: none;
}

.rw-leer-mas-wrap.mostrando-todo .rw-leer-menos-btn {
  display: block !important;
}

.rw-leer-mas-btn, .rw-leer-menos-btn {
  background: none;
  border: none;
  color: #222;
  text-decoration: underline!important;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  display: block;
  font-weight: bold;
  margin-top: 8px;
  text-align: left;
}

.rw-leer-mas-btn:hover, .rw-leer-menos-btn:hover {
  color: #000;
  background:none;
}


.rw-leer-menos-btn:hover { 
  opacity: .95; 
}

/* Títulos */
.pm--type-grid .pm-item-title {
    font-family: "NeueHelveticaPro65Medium", sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-block-start:0px!important;
}

.pm-readless-wrap { margin-top: .5rem; display: none; }
.pm-item-paragraph.expanded .pm-readless-wrap { display: block; }
.pm-item-paragraph.expanded .pm-readmore-link { display: none !important; }

/* ajustes móviles para read-more */
@media (max-width: 700px) {
  .pm-readmore-link,
  .pm-readless-link { font-size: .98rem; }
  .pm-readless-wrap { margin-top: .6rem; }
}

/* ==========================================================================
   Utilidades / overrides mínimos
   ========================================================================== */

/* neutralizar hover heredado en elementos con rw-no-hover */
.rw-no-hover,
.rw-no-hover:hover,
.rw-no-hover:focus,
.rw-no-hover:active {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  opacity: 1 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  border-color: transparent !important;
  cursor: pointer !important;
  transition: none !important;
  /* Permitir interacciones (clicks) — antes estaba disabled y bloqueaba botones como "Más" */
  pointer-events: auto !important;
}

/* overrides para controles de miniaturas */
.rw-pm-thumb-handle.rw-no-hover,
.rw-pm-thumb-remove.rw-no-hover,
.rw-pm-thumb-handle.rw-no-hover:hover,
.rw-pm-thumb-remove.rw-no-hover:hover {
  background: rgba(30,33,36,.65) !important;
  color: #fff !important;
  transition: none !important;
  box-shadow: none !important;
}

/* En pantallas pequeñas, forzar apilado en una sola columna */
@media (max-width: 700px) {
  .pm--type-grid .pm-grid { justify-content: flex-start; }
  .pm--type-grid .pm-grid > * { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Mobile: mantener posibilidad de mostrar 2 items por fila cuando el módulo declara 2 columnas
   Ahora controlado por la clase .pm-mobile-two aplicada al wrapper del módulo desde el backend.
   Usamos la variable --pm-gap-px (inyectada en el .pm-grid inline style) para incluir la separación. */
@media (max-width: 700px) {

  /* Si el módulo tiene la opción activada, mostrar dos items por fila (50% cada uno),
     teniendo en cuenta la separación interior (var(--pm-gap-px)). */
  .project-module.pm-mobile-two .pm-grid > .pm-item {
    flex: 0 0 calc((100% - var(--pm-gap-px, 18px)) * 0.5) !important;
    max-width: calc((100% - var(--pm-gap-px, 18px)) * 0.5) !important;
    box-sizing: border-box !important;
  }

  /* Asegurar que el contenido interno no desborde (imagen/figure) */
  .project-module.pm-mobile-two .pm-grid > .pm-item .pm-item-figure,
  .project-module.pm-mobile-two .pm-grid > .pm-item .pm-item-figure img,
  .project-module.pm-mobile-two .pm-grid > .pm-item .pm-image-single-wrapper,
  .project-module.pm-mobile-two .pm-grid > .pm-item .pm-slider-image,
  .project-module.pm-mobile-two .pm-grid > .pm-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

}

/* ==========================================================================
   Notas de compatibilidad
   - Si CSS externo aplica `display:contents` a figure/img o reset destructivo,
     usa el siguiente override:
       .pm--type-grid .pm-item,
       .pm--type-grid .pm-item-figure { display: block !important; }
   - Para evitar que imágenes se upscalen por encima de su tamaño natural,
     gestiona `--pm-image-max-width` o limita el tamaño vía JS al renderizar.
   ========================================================================== */

/* Altura por módulo / slider: modos seleccionables (usar height en lugar de min-height) */
.project-module.pm-height-mode-full {
  --pm-slider-height: calc(100vh - 107px);
  --pm-slider-max-height: calc(100vh - 107px);
}

.project-module.pm-height-mode-full .pm-slider {
  height: calc(100vh - 107px) !important;
  min-height: calc(100vh - 107px) !important;
  max-height: calc(100vh - 107px) !important;
  overflow: hidden !important;
}

.project-module.pm-height-mode-full .pm-slider .slides {
  height: 100% !important;
  min-height: 0 !important;
}

.project-module.pm-height-mode-full .pm-grid {
  height: var(--pm-slider-height);
  max-height: calc(100vh - 107px);
}

/* Modo mitad de pantalla */
.project-module.pm-height-mode-half {
  --pm-slider-height: calc(50vh - 107px);
  --pm-slider-max-height: calc(50vh - 107px);
}

.project-module.pm-height-mode-half .pm-slider {
  height: calc(50vh - 107px) !important;
  min-height: calc(50vh - 107px) !important;
  max-height: calc(50vh - 107px) !important;
  overflow: hidden !important;
}

.project-module.pm-height-mode-half .pm-slider .slides {
  height: 100% !important;
  min-height: 0 !important;
}

.project-module.pm-height-mode-half .pm-grid {
  height: 100%;
}

.project-module.pm-height-mode-half .pm-grid {
  height: 100%;
}

.project-module.pm-height-mode-half .pm-grid {
  height: var(--pm-slider-height);
  max-height: calc(50vh - 107px);
}

/* Asegurar que el slider no provoque solapamiento entre módulos:
   - Cada módulo se convierte en contexto de stacking (position:relative)
   - El slider contiene sus slides con overflow:hidden para que los .interior-container
     posicionados absolute no "salgan" y superpongan la siguiente fila.
   - Control de z-index para que el slide activo quede por encima dentro del mismo slider.
*/
.project-module { position: relative; }
.project-module .pm-slider {
  overflow: hidden; /* evita que slides absolutas se salgan y solapen otras filas */
  z-index: 0;
}

/* asegurar stacking interno de slides */
.pm-slider .interior-container { z-index: 0; }
.pm-slider .interior-container.active { z-index: 1; }



/* asegurar que label y contador ocupen su propia línea */
.pm-slider .pm-slider-overlay .pm-slider-overlay-label,
.pm-slider .pm-slider-overlay .pm-slider-overlay-counter,
.pm-slider-overlay .pm-slider-overlay-label,
.pm-slider-overlay .pm-slider-overlay-counter {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: "NeueHelveticaPro55Roman", Arial, sans-serif;
}

/* Mobile fallback: overlay debajo de slides, ancho completo pero texto a la derecha */
@media (max-width: 720px) {
  .pm-slider .pm-slider-overlay,
  .pm-slider-overlay { grid-column: 1 / -1 !important; width: 100% !important; justify-self: stretch !important; align-items: flex-end !important; }
}

/* ======================================================================
   Responsive fixes para módulos / grids / sliders (mobile & tablet tweaks)
   ====================================================================== */
@media (max-width: 900px) {


  .pm--type-grid .pm-grid { gap: 16px !important; }
}

@media (max-width: 834px) {


  .pm--type-grid .pm-grid { gap: 12px !important; }
}



/* SOLO apilar items en una columna si el módulo tiene 1 columna */
@media (max-width: 900px) {
  .pm--type-grid.pm-cols-1 .pm-grid > .pm-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: imágenes y overlays */
@media (max-width: 720px) {
  .pm--type-grid .pm-item-figure img,
  .pm_slider .pm-slider-image img,
  .pm--type-image-single .pm-image-single-wrapper img,
  .pm-item-figure img.rw-pm-image {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* En mobile desactivar height-mode: respetar padding pero no forzar 100vh */
  .project-module.pm-height-mode-full .pm-slider,
  .project-module.pm-height-mode_full .pm-grid,
  .project-module.pm-height-mode-half .pm-slider,
  .project-module.pm-height-mode-half .pm-grid {
    height: auto !important;
    max-height: none !important;
  }

  .pm-slider .slides { min-height: 220px; }

  .pm-slider .pm-slider-overlay,
  .pm-slider-overlay {
    font-family: "NeueHelveticaPro55Roman", Arial, sans-serif;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-self: stretch !important;
    align-self: start !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: .4rem .6rem !important;
  }

 
  .pm--type-grid .pm-item-title { font-size: 1rem; }
  .pm-paragraph-full, .pm-paragraph-excerpt { font-size: 14px; line-height: 1.5; }

  .project-module, .pm-grid, .pm-item { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
}

/* ===== MÓVIL 834px: Desactivar alturas forzadas pero conservar márgenes =====
   En dispositivos de 834px hacia abajo, los módulos se adaptan al contenido
   pero mantienen los márgenes bottom configurados (xs, sm, md, lg)
*/
@media (max-width: 834px) {
  /* Desactivar height modes: full y half pasan a ser auto */
  .project-module.pm-height-mode-full,
  .project-module.pm-height-mode-half {
    --pm-slider-height: auto !important;
  }

  .project-module.pm-height-mode-full .pm-slider,
  .project-module.pm-height-mode-full .pm-grid,
  .project-module.pm-height-mode-half .pm-slider,
  .project-module.pm-height-mode-half .pm-grid {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Neutralizar cualquier altura inline/variable que fuerce 100vh/50vh */
  .project-module[style*="100vh"],
  .project-module[style*="50vh"],
  .project-module[style*="--pm-slider-height"],
  .project-module.pm-height-mode-full[style],
  .project-module.pm-height-mode-half[style],
  .project-module[style] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    --pm-slider-height: auto !important;
    overflow: visible !important;
  }

  .pm-slider,
  .pm-slider[style*="100vh"],
  .pm-slider[style*="50vh"],
  .pm-slider[style*="--pm-slider-height"],
  .pm-slider[style] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    --pm-slider-height: auto !important;
    overflow: visible !important;
  }

  /* Contenedores internos del slider / slides / imágenes
     IMPORTANTE: no incluimos .interior-container aquí y no forzamos display.
     Dejar que .interior-container gestione su propio display (display:none por defecto,
     display:block solo cuando .active). */
  .pm-slider .slides,
  .pm-slider .slides[style],
  .pm-slider .pm-slider-image,
  .pm-slider .pm-slider-image img,
  .pm-slider .pm-slider-image > img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    /* No forzar display aquí para no contradecir .interior-container { display:none } */
  }

  /* Selector genérico por si el inline contiene calc(100vh ... / 50vh ...) o la var */
  [style*="calc(100vh"],
  [style*="calc(50vh"],
  [style*="--pm-slider-height"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Asegurar que .slides no deje un min-height residual */
  .pm-slider .slides { min-height: 0 !important; }

  /* MANTENER: Los márgenes bottom (xs, sm, md, lg) se conservan 
     porque están definidos en las clases .pm-margin-* que no se tocan aquí */
}

/* ==========================================================================
   Galería - Grid 2x2 con las 4 primeras imágenes
   ========================================================================== */

/* 🎯 Grid 2x2 con altura automática basada en las imágenes */
.pm-gallery-preview,
.pm-gallery.pm-gallery-preview {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto !important; /* 🎯 CAMBIO: auto en lugar de 1fr */
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Items de la galería - permitir altura automática */
.pm-gallery-preview .pm-gallery-item,
.pm-gallery.pm-gallery-preview .pm-gallery-item {
  width: 100% !important;
  height: auto !important; /* 🎯 CAMBIO: auto en lugar de 100% */
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Mostrar solo las 4 primeras */
.pm-gallery-preview .pm-gallery-item:nth-child(1),
.pm-gallery-preview .pm-gallery-item:nth-child(2),
.pm-gallery-preview .pm-gallery-item:nth-child(3),
.pm-gallery-preview .pm-gallery-item:nth-child(4) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ocultar de la 5ta en adelante */
.pm-gallery-preview .pm-gallery-item:nth-child(n+5) {
  display: none !important;
}

/* 🎯 Imágenes: mostrar completas sin recortar */
.pm-gallery-preview .pm-gallery-item img,
.pm-gallery.pm-gallery-preview .pm-gallery-item img {
  width: 100% !important;
  height: auto !important; /* 🎯 CAMBIO: auto en lugar de 100% */
  max-width: 100% !important;
  object-fit: contain !important; /* 🎯 CAMBIO: contain en lugar de cover */
  object-position: center !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Mobile: mantener grid 2x2 */
@media (max-width: 720px) {
  .pm-gallery-preview,
  .pm-gallery.pm-gallery-preview {
    gap: 8px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
  }
}