/* =====================================================================
   Hero escalonado con 5 columnas (7 imágenes fusionadas en 5)
   - .hero-section: contenedor general
   - .banner-row: flex‑container horizontal
   - .banner-column: cada columna (simple o doble)
   - .banner-img-wrapper: wrapper para centrar/cortar imágenes
   - .size-0, .size-1, .size-2: alturas proporcionales
   - .banner-title-overlay: título superpuesto
   ===================================================================== */
  .parallax-img {
    transition: transform 0.35s ease; /* Transición suave */
    transform: scale(1.05); /* Estado base */
  }
   .region-content{
    padding: 0 !important;
  }
  .hero-section {
    position: relative;
    /* max-width: 1200px; */ /* Ancho máximo del banner */
    margin: 0 auto;
    padding: 20px 0;
  }
  .hero-section img{
    height: auto;
    width: auto;
  }
  .paragraph--type--home{
    background-color: #203E30;
  }
  .banner-title-overlay {
    font-family: "Big Caslon", serif;
    background-image: url('/sites/default/files/banner-principal/cabecera_background.png');
    background-size: cover;        /* Ajusta la imagen al contenedor */
    background-position: center;   /* Centra la imagen */
    background-repeat: no-repeat;  /* Evita que se repita */
  }

  /* Flex‑container que agrupa las columnas y las centra verticalmente */
  .banner-row {
    display: flex;
    justify-content: center;
    align-items: center; /* Todas las columnas centran sus imágenes */
    gap: 10px;           /* Separación entre columnas */
    position: relative;
    margin-bottom: -3%;
  }
  
  /* Cada columna puede tener 1 o 2 imágenes apiladas */
  .banner-column {
    display: flex;
    flex-direction: column; /* Apila las imágenes verticalmente */
    align-items: center;
    gap: 10px;              /* Espacio entre imágenes en columnas dobles */
  }
  
  /* Wrapper individual para cada <img>: centrar y evitar overflow */
  .banner-img-wrapper {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  
  /* ---------------------------------------------------------------------
     Ajuste de altura de las imágenes según la distancia al centro:
     - size-0: columna central → más alta
     - size-1: columnas adyacentes → media altura
     - size-2: columnas exteriores → más pequeña
     --------------------------------------------------------------------- */
  
  /* Extremidad (size-2): 2 imágenes suman 280px (2×140px) */
  .banner-column.size-2 .banner-img-wrapper img {
    height: auto;
    width: auto;
    z-index: 8;
    margin-top: 40px; /* Escalonado hacia abajo */
  }
  
  /* Pareja adyacente (size-1): 2 imágenes suman 400px (2×200px) */
  .banner-column.size-1 .banner-img-wrapper img {
    height: auto;
    width: auto;
    z-index: 9;
   /*  margin-top: 10px; */
  }
  
  /* Centro (size-0): 450px, supera la suma de la pareja adyacente (400px) */
  .banner-column.size-0 .banner-img-wrapper img {
    height: auto;
    width: auto;
    z-index: 10;
    margin-top: 0;
  }
  
  /* ---------------------------------------------------------------------
     Título superpuesto:
     --------------------------------------------------------------------- */
  .banner-title-overlay h2{
    margin-top: 2%;
    font-size: 4.7rem;
  }
  .banner-title-overlay {
    width: 61%;
    height: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    text-shadow: 2px 2px 8px #0000006C;
    pointer-events: none; /* No interferir con clicks */
    z-index: 20;
    text-align: center;
    white-space: nowrap;
    user-select: none;
  }
  
  /* ================================
     Responsive (móvil)
     - ocultar columnas
     - Reducir alturas
     ================================ */
  @media (max-width: 767.98px) {
    /* Oculta todas las columnas excepto la central (size-0) */
    .banner-column { display: none !important; }
    .banner-column.size-0 { display: flex !important; }
    .banner-title-overlay {
      width: 100%;
      top: 42%;
      background-image: none;
    }
    .banner-title-overlay h2 {
      margin-top: 1%;
      font-size: 1.7rem !important;  
      line-height: 1.2 !important; 
    }
  }

  @media (min-width: 1100px) and (max-width: 1766px) {
    .banner-title-overlay h2 {
      font-size: 3rem !important; 
    }
  }

  @media (min-width: 768px) and (max-width: 1100px) {
    .banner-column.size-2 { display: none !important; }
    .banner-title-overlay h2 {
      font-size: 1.9rem !important;  
    }
    .banner-title-overlay {
      height: 20%;
      background-size: contain;
    }
  }

  @media (min-width: 310px) and (max-width: 375px) {
    .banner-title-overlay h2 {
      font-size: 1.4rem !important; 
    }
  }