.acerca {
  padding: 100px 20px;
  background: #f3f3f3;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.acerca {
  position: relative;
  overflow: hidden;
}

/* NUBE IZQUIERDA */
.nube-left {
  position: absolute;
  left: -20px;
  bottom: -30px;

  width: 320px;

  opacity: 0.8;
  pointer-events: none;
transform: scaleX(-1) !important;
  transform-origin: center; /* opcional */
  z-index: 1;
}

/* NUBE DERECHA (por si quieres ajustar) */
.nube-right {
  position: absolute;
  right: -60px;
  bottom: -40px;

  width: 380px;

  z-index: 1;
}
.nube-left {
  animation: floatCloud 6s ease-in-out infinite;
}

.nube-right {
  animation: floatCloud 7s ease-in-out infinite;
}

@keyframes floatCloud {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
/* PÁJARO */
.bird {
  position: absolute;
  right: 40px;
  bottom: 60px;

  width: 140px;

  z-index: 2; /* 👈 encima de la nube */
}
@media(max-width:768px){

  .bird{

    width:80px;

    right:-10px;

    bottom:120px;

    opacity:.9;

  }

}
.acerca h2 {
  font-size: 50px;
  color: #0b1f44;
  margin-bottom: 40px;
}

/* BOTONES */
.acerca-links {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acerca-btn {
  display: flex;
  justify-content: center;
  align-items: center;

background: url('/images/fondo_acerca.png') no-repeat center;
background-size: cover;
  color: white;
  text-decoration: none;

  padding: 18px;
  border-radius: 18px;

  font-size: 25px;
  font-weight: 500;

  position: relative;

  box-shadow: 8px 8px 0 #a9c0e6;

  transition: all 0.3s ease;
}
.acerca-btn:hover {
  transform: translateY(-5px);
  box-shadow: 12px 12px 0 #8aa8d9;
}

.acerca-btn:hover .arrow {
  transform: translateX(5px);
}

/* OVERLAY */

.modal-overlay{

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.65);

  display: none;

  align-items: center;
  justify-content: center;

  z-index: 9999;

  padding: 20px;

}

/* MODAL */

.modal-contacto{

  width: 100%;
  max-width: 520px;

  background: white;

  border-radius: 24px;

  padding: 40px;

  position: relative;

  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  animation: modalIn .25s ease;

}

/* HEADER */

.modal-header{

  margin-bottom: 24px;

}

.modal-header h2{

  font-size: 34px;

  color: #0f172a;

  margin-bottom: 10px;

}

.modal-header p{

  color: #64748b;

  line-height: 1.5;

}

/* FORM */

.form-contacto{

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.form-contacto input,
.form-contacto select{

  width: 100%;

  height: 54px;

  border-radius: 14px;

  border: 1px solid #dbe2ea;

  padding: 0 18px;

  font-size: 15px;

  outline: none;

}

.form-contacto input:focus,
.form-contacto select:focus{

  border-color: #2563eb;

}

/* CHECK */

.check{

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  color: #475569;

}

/* BOTÓN */

.form-contacto button{

  height: 56px;

  border: none;

  border-radius: 14px;

  background: #2563eb;

  color: white;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: .2s;

}

.form-contacto button:hover{

  transform: translateY(-2px);

  background: #1d4ed8;

}

/* CERRAR */

.cerrar-modal{

  position: absolute;

  top: 16px;
  right: 16px;

  width: 40px;
  height: 40px;

  border: none;

  border-radius: 50%;

  background: #f1f5f9;

  font-size: 22px;

  cursor: pointer;

}

.check input[type="checkbox"]{

  width: 18px;
  height: 18px;

  min-width: 18px;

  accent-color: #2563eb;

  cursor: pointer;

}
.toast-success{

  position: fixed;

  bottom: 30px;
  right: 30px;

  background: #16a34a;

  color: white;

  padding: 18px 22px;

  border-radius: 16px;

  font-size: 15px;

  line-height: 1.5;

  box-shadow: 0 10px 30px rgba(0,0,0,.2);

  z-index: 99999;

  max-width: 360px;

  animation: toastIn .3s ease;

  transition: .3s;

}

@keyframes toastIn{

  from{
    opacity: 0;
    transform: translateY(20px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }

}
.toast-title{

  font-size: 20px;

  font-weight: 800;

  margin-bottom: 6px;

}

.toast-text{

  font-size: 15px;

  opacity: .92;

}

@keyframes toastTop{

  from{

    opacity: 0;

    transform:
      translateX(-50%)
      translateY(-20px)
      scale(.96);

  }

  to{

    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(1);

  }

}
/* ANIMACIÓN */

@keyframes modalIn{

  from{
    opacity: 0;
    transform: translateY(20px) scale(.96);
  }

  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}
/* =========================
   INTERACTÚA - MÓVIL
========================= */

@media (max-width: 768px){

    /* Encabezado */
    .acerca h2{
        font-size:30px !important;
        line-height:1.15 !important;
        margin-bottom:28px !important;
    }

    /* Pájaro */
    .bird{
        width:55px !important;
        right:5px !important;
        bottom:75px !important;
    }

}

/* Teléfonos pequeños */

@media (max-width:380px){

    .acerca h2{
        font-size:26px !important;
        line-height:1.15 !important;
        margin-bottom:24px !important;
    }

    .bird{
        width:60px !important;
        right:2px !important;
        
    }

}
/* =========================================================
   MODALES - AJUSTE MÓVIL
========================================================= */

@media (max-width: 768px){

    .modal-overlay{
        padding:15px;

        align-items:center;

        overflow-y:auto;
    }

    .modal-contacto{

        width:100%;
        max-width:100%;

        max-height:90vh;

        overflow-y:auto;

        box-sizing:border-box;

        padding:24px 18px;

        border-radius:20px;

        margin:0 auto;
    }


    /* HEADER */

    .modal-header{
        margin-bottom:18px;
        padding-right:30px;
    }

    .modal-header h2{
        font-size:25px;

        line-height:1.2;

        margin-bottom:8px;
    }

    .modal-header p{
        font-size:14px;

        line-height:1.4;
    }


    /* FORMULARIO */

    .form-contacto{
        gap:12px;
    }

    .form-contacto input,
    .form-contacto select{

        width:100%;

        height:48px;

        box-sizing:border-box;

        border-radius:12px;

        padding:0 14px;

        font-size:14px;
    }


    /* CHECKBOX */

    .check{

        align-items:flex-start;

        gap:8px;

        font-size:12px;

        line-height:1.35;
    }

    .check input[type="checkbox"]{

        width:17px;
        height:17px;

        min-width:17px;

        margin-top:1px;
    }


    /* BOTÓN */

    .form-contacto button{

        width:100%;

        height:50px;

        border-radius:12px;

        font-size:15px;
    }


    /* CERRAR */

    .cerrar-modal{

        top:10px;
        right:10px;

        width:36px;
        height:36px;

        font-size:20px;

        z-index:10;
    }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width:380px){

    .modal-overlay{
        padding:10px;
    }

    .modal-contacto{
        padding:21px 15px;

        border-radius:18px;

        max-height:92vh;
    }

    .modal-header h2{
        font-size:22px;
    }

    .modal-header p{
        font-size:13px;
    }

    .form-contacto{
        gap:10px;
    }

    .form-contacto input,
    .form-contacto select{
        height:45px;

        font-size:13px;
    }

    .form-contacto button{
        height:47px;

        font-size:14px;
    }

}
/* =========================================================
   MODAL REGISTRA TU NEGOCIO - ENCABEZADO MÓVIL
========================================================= */

@media (max-width: 768px){

    .modal-contacto .modal-header{

        display:flex;
        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        text-align:left;

        padding:20px 18px;

        margin:0 0 18px;

        min-height:150px;

        box-sizing:border-box;
    }


    .modal-contacto .modal-header h2{

        width:100%;

        font-size:24px !important;

        line-height:1.15 !important;

        margin:0 0 10px !important;

        color:#fff;

        text-align:left;
    }


    .modal-contacto .modal-header p{

        width:100%;

        font-size:13px !important;

        line-height:1.4 !important;

        margin:0;

        color:rgba(255,255,255,.75);

        text-align:left;
    }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width:380px){

    .modal-contacto .modal-header{

        padding:18px 16px;

        min-height:140px;
    }

    .modal-contacto .modal-header h2{

        font-size:22px !important;

        margin-bottom:8px !important;
    }

    .modal-contacto .modal-header p{

        font-size:12px !important;

        line-height:1.35 !important;
    }

}