/* Contenedor principal de la sección */
.raices-container {
  display: flex;  /* Pone las dos columnas (texto e imagen de fondo) una al lado de la otra */
  flex-wrap: wrap;         /* Permite que los elementos bajen si la pantalla es pequeña */
  width: 100%;
  min-height: 500px;       /* Altura mínima para que se vea equilibrado */
}

/* Columna de texto */
.raices-texto {
  width: 50%;              /* Ocupa la mitad izquierda del ancho */
  background-color: #495338; /* Fondo verde claro */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el contenido */
  color: #ffffff;
}

/* Texto introductorio arriba */
.intro {
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}

/* Imagen de la taza dentro del texto (alineada a la izquierda) */
.taza-inline {
  width: 180px;             /* Tamaño de la taza */
  float: left;             /* Hace que el texto fluya alrededor */
  margin: 0 10px 10px 0;   /* Espacio a la derecha y abajo para que el texto no se pegue */
}

/* Texto de la historia */
.historia {
  font-size: 19px;
  line-height: 1.6;        /* Mejora la legibilidad */
  text-align: justify;
}

/* Columna de imagen de fondo */
.raices-imagen {
  width: 50%; 
  background: url('../imagenes/guayacan.png') center center no-repeat;
  background-size: cover;
}

/* --------- Responsive para pantallas pequeñas --------- */
@media (max-width: 768px) {
  .raices-container {
    flex-direction: column;  /* Pone las columnas una debajo de otra */
  }

  .raices-texto,
  .raices-imagen {
    width: 100%;             /* Que ocupen todo el ancho */
  }

  .taza-inline {
    width: 80px;              /* Reduce el tamaño en móviles */
    float: none;              /* Evita que se alinee a la izquierda y la pone centrada */
    display: block;
    margin: 0 auto 20px auto; /* Centra la taza en móviles */
  }
}