@import url(../../../css/kurenai.css);

.div-light_yellow {background-color: #f3f1cd;}
.div-light_yellow .flex-respo .col2-in-1 {width: 15%; padding: 1%; text-align: left;}
.div-light_yellow .flex-respo .col2-in-1 img {border-radius: 50%;}
.div-light_yellow .flex-respo .col2-in-2 {width: 85%; padding: 1%;}


.new-columns02-margin {margin: 0em 0.5em 0em 0em;}
.centered-img {width: 50%; padding: 0 25%; font-size: 1.2rem; color: #696969; line-height:1.8rem ;}

.caption-max{margin: 0.5rem !important;}

@media screen and (max-width: 400px)  {
    .div-light_yellow .flex-respo .col2-in-1 {width: 100%;}
    .div-light_yellow .flex-respo .col2-in-2 {width: 100%;}
}


.galeria {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permite que las fotos bajen en pantallas pequeñas */
  gap: 20px;
}

.foto {
  text-align: center;
  background-color: rgb(85, 89, 15);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 200px;
  flex: 0 0 auto;
}
.foto-nuevo {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  width: 200px;
  flex: 0 0 auto;
}
.foto img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.pie-foto-nuevo {
  margin-top: 8px;
  font-size: 12px;
  color: #000000;
}

.pie-foto {
  margin-top: 8px;
  font-size: 16px;
  color: #ffffff;
}

/* 🌐 Responsive para pantallas pequeñas */
@media (max-width: 600px) {
  .galeria {
    flex-direction: column;
    align-items: center;
  }

  .foto {
    width: 90%;
    max-width: 300px;
  }
}


.fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.texto {
  max-width: 600px;
}

.imagen {
  text-align: center;
  margin-right: 3%;
  margin-top: 3%;
  width: 300px;
}

.imagen img {
  width: 250px;
  height: auto;
  text-align: center;
}

.pie {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

/* Responsive: columnas en vertical en pantallas pequeñas */
@media (max-width: 768px) {
  .fila {
    flex-direction: column;
    align-items: center;
  }

  .texto, .imagen {
    width: 100%;
    max-width: 90%;
    text-align: center;
  }

  .texto {
    margin-bottom: 20px;
  }
}

/* Contenedor principal de la sección primera parte macetas */
.seccion-imagen-texto {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  background-color: #ffffffd2;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Columna izquierda: Imagen */
.contenedor-imagen {
  flex: 1;
  min-width: 280px;
  text-align: center;
}

.contenedor-imagen img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Columna derecha: Texto */
.contenido-textual {
  flex: 2;
  min-width: 280px;
}

.titulo-texto {
  margin-top: 0;
  font-size: 26px;
  color: #27793b;
}

.descripcion-texto {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .seccion-imagen-texto {
    flex-direction: column;
    text-align: center;
  }

  .contenido-textual {
    margin-top: 20px;
  }
}

/* Contenedor principal de la sección segunda parte hierbas */
.seccion-imagen-texto-segunda {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  background-color: #ffffffd2;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Columna izquierda: Imagen */
.contenedor-imagen-segunda {
  flex: 1;
  min-width: 280px;
  text-align: center;
}

.contenedor-imagen-segunda img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Columna derecha: Texto */
.contenido-textual-segunda {
  flex: 2;
  min-width: 280px;
}

.titulo-texto-segunda {
  margin-top: 0;
  font-size: 26px;
  color: #27793b;
}

.descripcion-texto-segunda {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .seccion-imagen-texto-segunda {
    flex-direction: column;
    text-align: center;
  }

  .contenido-textual-segunda {
    margin-top: 20px;
  }
}

/* bloque verde oscuro con tres fotos inicio*/
/* Contenedor principal */
.layout-tres-columnas {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-image: url(../img/lab48_fondo.JPG);
  padding: 30px;
  margin-left: 3%;
  margin-right: 3%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  gap: 30px;
  width: auto;
}

/* Columnas base */
.columna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Columna izquierda: Imagen vertical */
.columna-imagen-vertical,
.columna-imagen-vertical figure {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.columna-imagen-vertical img {
  flex-grow: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pie-imagen {
  font-size: 14px;
  margin-top: 8px;
  color: #ffffff;
  text-align: center;
}

/* Columna central: Dos imágenes horizontales */
.columna-doble-horizontal {
  justify-content:space-evenly;
}

.columna-doble-horizontal img {
  width: 110%;
  max-width: 300px;
  height: auto;
  margin-bottom: 20px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Columna derecha: texto alineado al centro vertical */
.columna-texto {
  justify-content: center;
  align-items: flex-start;
}

.bloque-texto h2 {
  margin-bottom: 10px;
  font-size: 25px;
  color: #0b6457;
  text-align: justify;
}

.bloque-texto p {
  font-size: 18px;
  line-height: 1.6;
  color: #0b6457;
  text-align: justify;
}

/* Responsive para móviles */
@media (max-width: 900px) {
  .layout-tres-columnas {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .columna-texto {
    align-items: center;
  }

  .columna-doble-horizontal img {
    margin-bottom: 15px;
  }
}
/* bloque verde oscuro con tres fotos fin*/


/* FILA DE DOS BANNERS CON LAZOS */
.fila-de-banners {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: nowrap;
  align-items: stretch; /* Igualar altura de los banners */
}

/* Cada banner */
.bloque-banner {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px 20px 20px;
  width: 45%;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 3%;
  display: flex;
  flex-direction: column;
}

/* Cintas superiores */
.cinta {
  position: absolute;
  top: -20px;
  left: 20px;
  padding: 8px 20px;
  border-radius: 0 10px 10px 0;
  color: white;
  font-weight: bold;
  font-size: 15px;
}

.cinta-uno,
.cinta-dos {
  background-color: #cf5f7d;
}

/* Contenido del banner */
.contenido {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.contenido h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
  text-align: center;
}

.contenido p {
  font-size: 14px;
  color: #444;
  margin-top: auto;
  margin-bottom: 3px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 15px;
}
.contenido-derecha {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.contenido-derecha h2 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
  text-align: center;
}

.contenido-derecha p {
  font-size: 14px;
  color: #444;
  margin-top: auto;
  margin-bottom: 3px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 15px;
}



/* Imágenes de los banners */
.pieza-grafica {
  width: 100%;
  height: 200px; /* Altura fija para alinear */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .fila-de-banners {
    flex-direction: column;
    align-items: center;
  }

  .bloque-banner {
    width: 90%;
  }

  .imagenes {
    justify-content: center;
  }
}


/* FOTOS EN CUATRO SECCION */
.zona-visual-unificada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Cada fila de fotos */
.linea-imagenes-superior,
.linea-imagenes-inferior {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Todas las fotos */
.pieza-grafica {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.pieza-grafica:hover {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 700px) {
  .linea-imagenes-superior,
  .linea-imagenes-inferior {
    flex-direction: column;
    align-items: center;
  }

  .pieza-grafica {
    width: 90%;
    height: auto;
  }
}
.seccion-ajustada {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Columna del texto */
.columna-textual {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}

.titulo-seccion {
  font-weight: bold;
  font-size: 1.2rem;
  background-color: #fff;
  display: inline-block;
  padding: 10px 20px;
  border-left: 6px solid #4e7737;
  color: #4e7737;
  margin-bottom: 16px;
  line-height: 1.5;
}

.titulo-seccion span {
  font-weight: normal;
  font-size: 1rem;
  color: #333;
}

.columna-textual p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
}

.bloque-general {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.bloque-general {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* === Texto === */
.zona-textual {
  flex: 1;
  min-width: 300px;
}

.caja-cabecera {
  background-color: white;
  padding: 16px 24px;
  border-left: 6px solid #4e7737;
  margin-bottom: 20px;
}

.titulo-principal {
  color: #1a635a;
  margin: 0;
  font-size: 25px;
}

.subtitulo-japones {
  color: #4e7737;
  margin: 4px 0 0;
  font-size: 1rem;
}

.contenido-explicativo {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

/* === Imágenes === */
.zona-imagenes {
  display: flex;
  gap: 20px;
  flex: 1.4;
  flex-wrap: nowrap;
  margin-right: 3%;
  background-image: url(../img/lab48_fondo2.JPG);
  padding: 16px 24px;
}

.imagen-vertical img {
  width: 350px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.imagenes-horizontales {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}

.imagenes-horizontales img {
  width: 370px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-right: 3%;
}

/* === Responsive === */
@media (max-width: 1100px) {
  .bloque-general {
    flex-direction: column;
    align-items: center;
  }

  .zona-imagenes {
    flex-direction: column;
    align-items: center;
  }

  .imagen-vertical img,
  .imagenes-horizontales img {
    width: 90%;
    height: auto;
  }
}

/* Contenedor general */
.bloque-promociones-x9a4 {
    display: flex;
    gap: 20px;
    margin: 40px;
    flex-wrap: wrap;
    align-items: stretch; /* Igualar altura de columnas */
}

/* Columnas */
.columna-promocion-v1r {
    flex: 1;
    min-width: 300px;
    display: flex;
}

/* Banner */
.contenedor-banner-u8k {
    background: #a7bd28ab;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Primera columna - 2 imágenes */
.grupo-imagenes-par-xz1 {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.grupo-imagenes-par-xz1 img {
    width: 48%;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
}

/* Segunda columna - imagen única del mismo tamaño */
.contenedor-imagen-unica-q7f img {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Texto */
.texto-descriptivo-nn3 {
    font-size: 25px;
    color: #000000;
    line-height: 1.4;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .bloque-promociones-x9a4 {
        flex-direction: column;
        margin: 20px;
    }
    .columna-promocion-v1r {
        display: block;
    }
}








/*BANNER SLIDE SHOW*/
.panorama-glorioso-x9f {
  display: flex;
  gap: 20px;
  margin: 40px;
}

.columna-negra-j9m {
  background-color: #111;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 250px;
  flex-shrink: 0;
}

.caja-slider-v7k {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
}

.slides-misteriosas-t2v {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.slide-unica-y8k {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.imagen-contenedor {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.imagen-contenedor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Pie de imagen como banner dentro de la imagen */
.pie-banner-x4v {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.4;
}

/* Flechas */
.flecha-anterior-z7p,
.flecha-siguiente-z7p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: white;
  background-color: rgba(0,0,0,0.4);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.flecha-anterior-z7p { left: 10px; }
.flecha-siguiente-z7p { right: 10px; }

@media (max-width: 900px) {
  .panorama-glorioso-x9f {
    flex-direction: column;
  }

  .columna-negra-j9m {
    width: 100%;
  }

  .imagen-contenedor {
    height: 200px; /* altura igual para todas las imágenes en móvil */
    overflow: hidden; /* asegura que las partes que sobresalgan se recorten */
  }

  .imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta para llenar el contenedor */
  }
}


/* GREEN BANNER WITH IMAGE BACKGROUND */
.galeria-arcanum-x1 {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 40px;
  padding: 30px; /* espacio interno para que no esté pegado al borde */
  background-image: url('../img/lab48_fondo2.JPG'); /* tu imagen de fondo */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Cada columna */
.columna-phantasma-v7 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contenedor de la imagen con pie de foto */
.imagen-contenedor-lux {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Imagen horizontal */
.imagen-contenedor-lux img {
  width: 100%;
  height: 200px; /* altura fija para todas las imágenes */
  object-fit: cover;
  border-radius: 12px;
}

/* Pie de imagen debajo */
.pie-banner-lux {
  margin-top: 10px;
  text-align: center;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  color: #ffffff;
}

.titulo-fantasia-x9 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

.texto-fantasia-x9 {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .galeria-arcanum-x1 {
    flex-direction: column;
    align-items: center;
  }
  .imagen-contenedor-lux img {
    height: auto;
  }
}


.doble-aurora-x7 {
  display: flex;
  gap: 30px;
  align-items: center; /* Alinea verticalmente las columnas */
  margin: 40px;
  flex-wrap: wrap; /* Para responsive */
}


/* Columna de texto */
.columna-luminosa-q2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0; /* sin espacio entre elementos */
}
.columna-luminosa-q2 h1,
.columna-luminosa-q2 h2,
.columna-luminosa-q2 h3 {
  margin: 2px 0 !important;       /* un pequeño espacio arriba y abajo */
  padding: 0;
  line-height: 1.2;    /* un poco más espacioso que 1.1 */
}

.columna-luminosa-q2 {
  display: flex;
  flex-direction: column;
  gap: 2px; /* espacio mínimo entre elementos */
}
/* Títulos y subtítulos */
.titulo-solar-f9 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0;
  line-height: 1.1; /* reduce el espacio interno */
}

.subtitulo-celeste-b3 {
  font-size: 28px; 
  font-weight: 600;
  color: #0b6457;
  margin: 0;
  line-height: 1.1;
}

.subtitulo-normal-k5 {
  font-size: 20px;
  font-weight: 500;
  color: #444;
  margin: 0 !important;
  line-height: 1.1;
}

.parrafo-galactico-m1 {
  font-size: 18px;
  line-height: 1.4;
  color: #555;
  margin: 5px 0 0 0 !important; /* un pequeño espacio antes del párrafo */
}

/* Columna de imagen */
.columna-mapa-r8 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapa-transparente-x1 {
  max-width: 100%;
  height: 300px;
}

/* Responsive */
@media (max-width: 900px) {
  .doble-aurora-x7 {
    flex-direction: column;
    align-items: flex-start;
  }
  .columna-mapa-r8 {
    justify-content: flex-start;
  }
}



.hidari-peque {
  float: left;           
  margin-right: 15px;    
  margin-bottom: 10px;   
  width: 280px;          /* duplicado del tamaño anterior */
  max-width: 50%;        /* opcional para no superar la mitad del contenedor */
}

.hidari-peque img {
  width: 100%;           
  height: auto;             
}

/* Responsive */
@media (max-width: 900px) {
  .hidari-peque {
    float: none;         
    display: block;
    margin: 0 auto 15px; 
    width: 90%;          /* aumenta proporcionalmente en móviles */
    max-width: none;
  }
}

.migi-peque {
  float: right;           
  margin-left: 15px;    
  margin-bottom: 10px;   
  width: 280px;          /* duplicado del tamaño anterior */
  max-width: 50%;        /* opcional para no superar la mitad del contenedor */
}

.migi-peque img {
  width: 100%;           
  height: auto;             
}

/* Responsive */
@media (max-width: 900px) {
  .migi-peque {
    float: none;         
    display: block;
    margin: 0 auto 15px; 
    width: 90%;          /* aumenta proporcionalmente en móviles */
    max-width: none;
  }
}


/* Slideshow wrapper adapta al estilo original */
.slide-second-wrapper-xzy93 {
  width: 100%;
  height: 200px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* Slides individuales */
.slide-second-slide-xzy93 {
  display: none; /* Ocultamos las imágenes inicialmente */
  height: 100%;
}

/* La primera imagen se mostrará por defecto */
.slide-second-slide-xzy93:first-child {
  display: block; /* Mostrar la primera imagen */
}

.slide-second-slide-xzy93 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Flechas */
.slide-second-prev-xzy93,
.slide-second-next-xzy93 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 10px;
  margin-top: -20px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  user-select: none;
  z-index: 10;
  transition: background-color 0.3s;
}

.slide-second-prev-xzy93:hover,
.slide-second-next-xzy93:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.slide-second-prev-xzy93 {
  left: 10px;
}

.slide-second-next-xzy93 {
  right: 10px;
}

/* Fade animation */
.fade {
  animation-name: slideSecondFadeXzy93;
  animation-duration: 0.6s;
}

@keyframes slideSecondFadeXzy93 {
  from { opacity: 0.4 }
  to   { opacity: 1 }
}