/* =========================================
   BASE GENERAL
========================================= */

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

body {
  position: relative;
  overflow-x: hidden;
  background-color: #2b388f;
}

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

.container {
  position: relative;
}

.section-azul {
  width: 100%;
  padding-bottom: 40px;
}

/* Sec-2: NO altura fija, dejamos que el contenido fluya */
.sec-2 {
  height: auto;
}

/* =========================================
   TÍTULOS AMARILLOS
========================================= */

.titulo-box,
.titulo-box-2 {
   position: relative;
    display: inline-flex; /* antes inline-block */
    align-items: center;
    justify-content: center;
    background-color: #ffe413;
    border: 2px solid #000;
    padding: 18px 32px; /* antes 26px 55px — era demasiado ancho */
    border-radius: 5px;
    max-width: 100%;
    text-align: center;
}

.titulo-box {
  padding: 11px 3.5rem;
}

.titulo-box-2 {
  padding: 18px 2.8rem;
}

.titulo-icon,
.titulo-icon-2,
.titulo-icon-der {
  width: 60px;
    position: absolute;
    left: -35px;
    top: 11px;
}

.titulo-icon {
  left: -30px;
  top: 5px;
}

.titulo-icon-2 {
  left: -30px;
  top: 5px;
}

.titulo-icon-der {
  right: -28px;
  top: 5px;
}

.titulo-texto {
  font-size: clamp(1.8rem, 4vw, 45px);
  font-weight: 700;
  margin: 0;
  color: #000;
}

.titulo-texto-2 {
  font-size: clamp(1.4rem, 3vw, 32px);
  font-weight: 700;
  margin: 0;
  color: #000;
}

/* =========================================
   IMÁGENES
========================================= */

.historia-img {
  border-radius: 45px;
  border: 3px solid #000;
  max-width: 100%;
  height: auto;
  margin-left: 0;
}

/* Imagen redonda personas */
.persona-img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #000;
  display: block;
  margin: 0 auto;
   position: relative;
    z-index: 5;
}

/* =========================================
   CAJAS GENERALES
========================================= */

.caja {
  border-radius: 5px;
  border: 3px solid #000;
  padding: 24px;
  font-size: clamp(1rem, 2.2vw, 24px);
  line-height: 1.4;
}

.text-1 {
  font-weight: 400;
  color: #fff;
}

.naranja { background-color: #f37424; }
.verde { background-color: #4ebb83; }
.verdegrande { background-color: #4ebb83; padding: 35px; }
.salmon { background-color: #fcd0b0; }
.azulclaro { background-color: #7ECAF0; }
.blanco {
  background-color: #fff;
  padding: 30px;
  font-size: clamp(1rem, 2.2vw, 24px);
}

.invitamos {
  padding: 30px 24px;
}

.dos {
  max-width: 490px; margin-left: 165px;
}

/* Potencial (tres columnas) */
.potencial {
  width: 90%;
  padding: 24px;
  height: auto;
}

/* Texto final verde */
.verdegrande h2 {
  font-size: clamp(1.6rem, 3.5vw, 50px);
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* =========================================
   CAJA LUCERO Y GONZALO
========================================= */

/* Mobile first: ancho completo, sin locuras */
.lucero,
.gonzalo {
  width: 100%;
  padding: 28px;
  text-align: center;
  margin: 0 auto;
}
/* Cajas sobre foto (para Lucero en desktop) */
.box-1 {
  position: static;
  width: 100%;
  max-width: 500px;
  padding: 24px;
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 2.2vw, 24px);
}

/* =========================================
   ETIQUETAS DE NOMBRE
========================================= */

/* Mobile/tablet: debajo de la foto, centradas */
.nombre-tag-rojo,
.nombre-tag-azul {
  display: block;
  margin: 10px auto 20px auto;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 3px;
  border: 3px solid #000;
  color: #fff;
  position: static;   /* ← aquí está la magia */
  text-align: center;
}

.nombre-tag-rojo {
  background-color: #f98a8a;
}

.nombre-tag-azul {
  background-color: #4faee1;
}

/* Mini títulos de las tres columnas */
.mini-titulo {
  color: #fff;
  font-size: clamp(1.2rem, 2.4vw, 30px);
  font-weight: 800;
  padding: 12px 0;
  border-radius: 60px;
  margin-bottom: -8px;
  position: relative;
  z-index: 10;
  border: 3px solid #000;
}

/* =========================================
   COLORES DE FONDO ESPECÍFICOS
========================================= */

.verdegrande {
  background-color: #4ebb83;
}

/* =========================================
   BREAKPOINTS
========================================= */

/* >= 768px (tablets) */
@media (max-width: 768px) {

  .box-1 {
    padding: 40px;
  }

  .persona-img {
    width: 320px;
    height: 320px;
  }

  .invitamos {
    padding: 40px 48px;
  }

  .potencial {
    padding: 40px;
  }

  .titulo-icon,
.titulo-icon-2,
.titulo-icon-der {
  width: 55px;
    position: absolute;
    left: -8px;
    top: 11px;
}

.titulo-icon {
          left: -10px;
        top: 15px;
}

.titulo-icon-2 {
          left: -8px;
        top: 15px;
}

.titulo-icon-der {
  right: -28px;
  top: 15px;
}

}

/* >= 992px (desktop) */
@media (min-width: 992px) {

  .sec-2 {
    /* si quieres dar más aire en desktop, puedes usar min-height
       pero NO altura fija */
    min-height: 750px;
  }

  .historia-img {
    margin-left: 40px;
  }

  /* Lucero caja estilo PDF */
  .lucero {
    width: 118%;
    padding: 90px 114px;
    margin-left: 35px;
  }

  /* Gonzalo caja estilo PDF */
  .gonzalo {
    width: 118%;
    padding: 63px 114px;
    margin-left: -165px;
  }

  /* Box 1 vuelve a posicionarse sobre la sección, como en el diseño */
  .box-1 {
    position: absolute;
    top: 460px;
    right: 70px;
    width: 500px;
    padding: 30px 50px;
  }

  .persona-img {
    width: 380px;
    height: 380px;
  }

  /* Etiquetas de nombre pegadas a la foto (modo A) */
     .nombre-tag-rojo {
        position: absolute;
        bottom: -21px;
        left: -190px;
        padding: 20px 90px;
        font-size: 1.2rem;
        background-color: #f98a8a;
        border: 3px solid #000;
        border-radius: 4px;
        z-index: 10;
    }
  

  .nombre-tag-azul {
            position: absolute;
        top: 302px;
        left: 257px;
        margin-top: 5px;
        padding: 20px 66px;
        z-index: 10;
  }

  .invitamos {
    padding: 45px 55px;
  }


}

/* ===========================
   FIX CAJA VERDE .dos EN MÓVIL
=========================== */
@media (max-width: 768px) {
  .dos {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .nombre-tag-rojo, .nombre-tag-azul {
    display: block;
    margin: -53px auto 20px auto;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 3px;
    border: 3px solid #000;
    color: #fff;
    position: relative;
    text-align: center;
    z-index: 10;
    width: 60%;
}
.mt-4 {
    margin-top: 0.5rem !important;
}
}