.elementor-250 .elementor-element.elementor-element-49ca9b9{--display:flex;}.elementor-250 .elementor-element.elementor-element-49ca9b9:not(.elementor-motion-effects-element-type-background), .elementor-250 .elementor-element.elementor-element-49ca9b9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#282828;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-250 .elementor-element.elementor-element-a7e1e27{text-align:center;}.elementor-250 .elementor-element.elementor-element-a7e1e27 .elementor-heading-title{font-family:"Alumni Sans", Sans-serif;font-size:4rem;font-weight:600;color:#FFFFFF;}@media(max-width:767px){.elementor-250 .elementor-element.elementor-element-49ca9b9{--margin-top:4rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:2rem;--padding-bottom:1rem;--padding-left:0rem;--padding-right:0rem;}.elementor-250 .elementor-element.elementor-element-a7e1e27{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + -1.5rem) 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-250 .elementor-element.elementor-element-d204d09{margin:0rem 0rem calc(var(--kit-widget-spacing, 0px) + 0rem) 0rem;padding:0rem 0rem 0rem 0rem;}}/* Start custom CSS for html, class: .elementor-element-d204d09 *//* 1. Contenedor principal: ahora ocupa toda la pantalla */
.full-screen-gallery {
  width: 100%;
  height: 100vh; /* 100vh = 100% de la altura de la ventana del navegador */
  
  /* Permite el scroll en cualquier dirección si el contenido se desborda */
  overflow: auto; 
  
  /* Estilos para el fondo y para que las imágenes tengan espacio */
  background-color: #282828; /* Fondo oscuro para que resalten las fotos */
  padding: 40px;
  box-sizing: border-box; /* Importante al usar padding y porcentajes */
}

/* 2. Rejilla que organiza las imágenes */
.gallery-grid {
  display: grid;
  
  /* Crea columnas automáticas del ancho de las imágenes.
     Si caben 2 en la pantalla, creará 2 columnas. Si solo cabe 1, creará 1. */
  grid-template-columns: repeat(auto-fill, 468px);
  
  gap: 35px; /* Espacio entre las filas y columnas de la rejilla */
  
  /* Centra la rejilla si hay espacio de sobra (en monitores muy anchos) */
  justify-content: center;
}

/* 3. Contenedor de cada imagen individual. AQUÍ se definen las dimensiones. */
.gallery-image-wrapper {
  width: 468px;
  height: 350px;
  
  /* Estilos visuales para cada foto */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-out;
}

.gallery-image-wrapper:hover {
  transform: scale(1.03); /* Efecto de crecimiento sutil */
}

/* 4. La etiqueta de la imagen en sí */
.gallery-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene la proporción y evita que la imagen se deforme */
  display: block;
}

@media (max-width: 468px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* solo una columna flexible */
    gap: 20px;
  }

  .gallery-image-wrapper {
    width: 100%;        /* ocupa todo el ancho disponible */
    height: auto;       /* se ajusta la altura proporcionalmente */
    aspect-ratio: 4/3;  /* mantiene proporción aproximada */
  }
}/* End custom CSS */