html, body {
  font-family: 'Poppins', sans-serif !important;
}

.leo-page {
  background-color: #406AB2;
}

/* ---- TÍTULOS ---- */
/* Caja del título */
.titulo-box {
  display: grid;
  align-items: center;
  padding: 18px 35px;
  border: 2px solid #000;
  border-radius: 5px;
  position: relative;
  width: 60%;
}

/* Fondo amarillo base */
.titulo-box.amarillo {
  background-color: #ffe413;
}

/* PATRÓN LEGO encima sin borrar el amarillo */
.titulo-box.amarillo::before , .titulo-box.rojo::before, .titulo-box.beige::before, .titulo-box.azul::before  {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/pattern-lego-2.png');
  background-repeat: repeat;
  background-size: 450px;
  opacity: 0.25; /* Ajusta intensidad aquí */

  background-position: center center;


  
  /* Esto es la clave para que se vea el amarillo */
  mix-blend-mode: multiply;
  
  pointer-events: none;
  z-index: 0;
}

/* Texto + icono siempre encima */

.titulo-box h1,
.titulo-box h2 {
  position: relative;
  z-index: 2;
}


.titulo-texto {
  font-size: 43px;
  font-weight: 900;
  color: #000;
  margin: 0;
}
.titulo-icon {
    width: 59px;
    position: absolute;
    left: -35px;
    top: 12px;
}

p {
  margin-left: 100px;

}

h3 {
  margin-left: 100px;
  font-weight: 700;
}

.nube {
  position: absolute;
  top: -50px;
  left: 378px;
  z-index: 50;
}


.mt-6 { margin-top: 5rem;    position: relative;}
.mb-6 { margin-bottom: 5rem; }

/* Colores de títulos */
.principal-amarillo { background-color: #FFE413; }
.rojo { background-color: #ff3b40; color: #FFF; }
.beige { background-color: #FFE4C3; }
.amarillo-lego { background-color: #F5D226; }
.azul { background-color: #2b388f; }
.amarillo {background-color:#ffe413;}

/* ---- CAJAS ---- */
.caja {
  border-radius: 5px;
  border: 2px solid #000;
  padding: 40px 40px 40px 40px;
  font-size: 18px;
  line-height: 1.6;
  margin-left: -220px;
  position: relative;
}

.caja.caja.salmon::before {
 content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/pattern-lego.png');
  background-repeat: repeat;
  background-size: 450px;
  opacity: 0.25; /* Ajusta intensidad aquí */

  background-position: center center;


  
  /* Esto es la clave para que se vea el amarillo */
  mix-blend-mode: multiply;
  
  pointer-events: none;
  z-index: 0;
}


.salmom { background-color: #F9C3A6; }
.naranja { background-color: #F37424; color: #FFF; }


/* ---- BOTÓN VERDE ---- */
.boton-verde {
    background-color: #4EBB83;
    border-radius: 5px;
    font-weight: 700;
    padding: 18px 60px;
    display: inline-block;
    color: #000;
    border: 2px solid black;
    position: absolute;
    font-size: 20px;
    left: 350px;
}

/* ---- IMÁGENES ---- */
.leo-img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #000;
  position: relative;
  z-index: 10;
}

/* ---- RESPONSIVE ---- */
@media(max-width: 768px) {
  .leo-img { width: 240px; height: 240px; }
  .titulo-texto { font-size: 26px; }
}

.azul-claro {
  background-color: #4faee1;
  padding: 70px;
}

.azul-rey {
  background-color: #2b70e4;
  padding: 70px;
}

.azul-oscuro {
  padding: 70px;
}

/* ============================================================
   RESPONSIVE FIXES — SOLO MÓVIL Y TABLET
   (No afectan el diseño desktop que ya tienes perfecto)
============================================================ */

@media (max-width: 992px) {

  /* --- TITULOS --- */
  .titulo-box {
    width: 100%;
    padding: 18px 20px;
    margin-left: 0 !important;
  }

  .titulo-texto {
    font-size: 32px !important;
    text-align: center;
  }

  .titulo-icon {
    left: -20px;
    top: 0;
    width: 45px;
  }

  /* --- PÁRRAFOS Y TITULOS --- */
  p,
  h3 {
    margin-left: 0 !important;   /* antes 100px → rompe móvil */
    text-align: center;
  }


  /* --- CAJAS --- */
  .caja {
    margin-left: 0 !important;   /* antes -220px */
    padding: 28px 22px;
    font-size: 16px;
    text-align: center;
  }

  /* --- IMÁGENES REDONDAS --- */
  .leo-img {
    width: 260px;
    height: 260px;
    margin: 0 auto 20px;
    display: block;
  }

  /* --- NUBE --- */
  .nube {
    position: static !important;
    width: 120px;
    margin: 0 auto 10px;
    display: block;
  }


  /* --- SECCIONES CON PADDING --- */
  .azul-claro,
  .azul-rey, .azul-oscuro {
    padding: 40px 20px !important;
  }

}


/* =====================================
   RESPONSIVE EXTRA PEQUEÑO
===================================== */
@media (max-width: 768px) {

  .titulo-texto {
    font-size: 25px !important;
  }

  .leo-img {
    width: 350px;
    height:350px;
  }

  .boton-verde {
    padding: 18px 20px;
    display: inline-block;
    color: #000;
    border: 2px solid black;
    position: absolute;
    font-size: 20px;
    left: 35px;
}

  .titulo-icon {
        left: -20px;
        top: 10px;
        width: 45px;
    }
   .mt-6 {
    margin-top: 60px;
 
} 
    .nube {
        position: absolute !important;
        width: 240px;
        margin: 0 auto 10px;
        display: block;
        top: -50px;
        left: 290px;
    }

    .caja {
      margin-top: -185px;
      padding-top: 180px;
    }


}

/* Teléfonos pequeños */
@media (max-width: 480px) {
    .nube {
        position: absolute !important;
        width: 200px;
        margin: 0 auto 10px;
        display: block;
        top: -55px;
        left: 160px;
    }

     .leo-img {
    width: 315px;
    height:315px;
  }
  
}