/* Estilo del NAV */
nav {
  display: grid;
  grid-template-rows: auto auto; /* Dos filas en el grid */
}

/* Contenedor de la burbuja */
#bubble-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94%; /* Ajusta el ancho de la burbuja */
  padding: 0px;
  border-radius: 25px; /* Bordes redondeados */
  background-color: #f8f9fa; /* Fondo claro */
  box-shadow: 0 4px 6px rgba(199, 21, 21, 0.1); /* Sombra inicial */
  transition: box-shadow 0.3s ease; /* Suavidad en el sombreado */
  margin:10px; /* Centra la burbuja */
  overflow: hidden; /* Asegura que el contenido permanezca dentro de la burbuja */
}

/* Efecto al pasar el cursor */
#bubble-container:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra más marcada */
}

/* Estilos para las columnas */
.bubble-content{
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 200%; /* Cada columna ocupa la mitad del espacio */
  height: 400px; /* Altura fija para las columnas */
  padding: 0px;
  margin-left: 10px;
  text-align: center; /* Centra el texto dentro de la columna */
}

/* Estilos del iframe para que los bordes coincidan con los de la burbuja */
iframe {
  width: 100%; /* El iframe se ajusta al ancho de su columna */
  height: 100%; /* El iframe se ajusta al alto de su columna */
  border: none; /* Elimina bordes del iframe */
  border-bottom-right-radius: 25px ; /* Bordes idénticos a los de la burbuja */
  border-top-right-radius: 25px;
  flex-direction: column;
  object-fit: cover; /* Asegura que el contenido del iframe se vea adaptado */
}
@media (min-width: 768px) {
  .container {
      max-width: 768px;
      max-width: 80%;
  }
  iframe {
    height: 400px; /* Incrementa la altura del video en pantallas grandes */
    width: 568px;
  }
  .bubble-content {
    margin:0px; /* Mayor espaciado entre columnas */
  }
}
.row{
  margin-right: 20px;
  margin-left: 10px;
  text-align: center;
}
#bubble-container2 {
  display: grid;
  justify-content: center;
  align-items: center;
  width: 94%; /* Ajusta el ancho de la burbuja */
  padding: 20px;
  border-radius: 25px; /* Bordes redondeados */
  background-color: #daec86dc; /* Fondo claro */
  box-shadow: 0 4px 6px rgba(135, 156, 15, 0.747); /* Sombra inicial */
  transition: box-shadow 0.3s ease; /* Suavidad en el sombreado */
  margin:10px; /* Centra la burbuja */
  overflow: hidden; /* Asegura que el contenido permanezca dentro de la burbuja */
  color: darkgoldenrod;
  text-align: center;
}
#bubble-container2:hover {
  box-shadow: 0 8px 12px rgba(135, 156, 15, 0.747); /* Sombra más marcada */
}

#bubble-container2 {
  display: grid;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 94%; /* Asegura que el contenedor ocupe el 100% del espacio disponible */
  height: 400px;
  padding: 20px;
  text-align: center; /* Centra el texto dentro del contenedor */
}

#bubble-container3 {
  display: grid;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 95%; /* Asegura que el contenedor ocupe el 100% del espacio disponible */
  height: 400px;
  padding: 0px;
  text-align: center; /* Centra el texto dentro del contenedor */
  border-radius: 25px; /* Bordes redondeados */
  background-color: #f8f9fa; /* Fondo claro */
  box-shadow: 0 4px 6px rgba(199, 21, 21, 0.1); /* Sombra inicial */
  transition: box-shadow 0.3s ease; /* Suavidad en el sombreado */
  margin:0px; /* Centra la burbuja */
  overflow: hidden; /* Asegura que el contenido permanezca dentro de la burbuja */
}

#bubble-container3:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra más marcada */
}


.bubble-content2 {
  text-align: center; /* Centra el texto dentro de la columna */
  margin: 0px; /* Centra el contenido en su contenedor */
  
}

.card-title {
  margin-bottom: 10px; /* Espacio entre el título y el texto */
  font-size: 1.5rem; /* Tamaño del título */
}

.card-text {
  margin-top: 0; /* Elimina el margen superior del texto */
  font-size: 1rem; /* Tamaño del texto */
}


  
/* Estilos para el efecto burbuja */
.bubble-card {
  border-radius: 25px; /* Bordes redondeados como una burbuja */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

/* Efecto de zoom al pasar el mouse */
.bubble-card:hover {
  transform: scale(1.1); /* Zoom al 110% */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Aumento de la sombra */
}

  /*imagen estilo*/
  #imggran{
  width: 100%; /* El iframe se ajusta al ancho de su columna */
  height: 100%; /* El iframe se ajusta al alto de su columna */
  border: none; /* Elimina bordes del iframe */
  border-bottom-left-radius: 25px ; /* Bordes idénticos a los de la burbuja */
  border-top-left-radius: 25px;
  flex-direction: column;
  object-fit: cover; /* Asegura que el contenido del iframe se vea adaptado */
  margin-right: 10px;
  
}

#imggran {
    height: 400px; /* Incrementa la altura del video en pantallas grandes */
    width: 568px;
  }
  .bubble-content {
    margin:0px; /* Mayor espaciado entre columnas */
  }