:root {
  --fn-red:   #DA281C;
  --fn-dark:  #0b0b0b;
  --fn-gray:  #1a1a1a;
  --fn-gray2: #222222;
  --fn-gray3: #2e2e2e;
  --fn-line:  #2e2e2e;
  --fn-text:  #000000;
  --fn-muted: #888888;
}

* { box-sizing: border-box; }

body { 
  font-family: 'Inter', sans-serif; 
  background: var(--fn-dark); 
  color: var(--fn-text);
  line-height: 1.3;
  font-size: 18px;
}

/*==BOTON DEL FORMULARIO ==*/
.btn-primary {
    background-color: var(--fn-red);
    border-color: var(--fn-red);
}

.btn-primary:hover {
    background-color: #c6281d;
    border-color: #c6281d;
}

/*== SECCION HERO ==*/

.hero {
    width: 100%;
    min-height: 500px;

    background-image: url('../images/bg-ekoparty-2026.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;

    margin-bottom: 40px;
    overflow: hidden;
    z-index: 0;

}
.hero-title{
    font-size: 35px;
    line-height: 1.1;
    max-width: 1000px;
}
.logo{
  height:50px; 
}


/* Ajustes para pantallas pequeñas */
@media (max-width: 767px) {
  .hero {
          /* Movemos la imagen más a la derecha para que la cara asome */
          background-position: 85% center; 
          min-height: 500px;

  }
  .hero-title{
      font-size: 26px;
  }  
  .logo{
    width: 300px;
    max-width: 100vw;
    height: auto;
  }
}
/*==FIN SECCION HERO ==*/


/* ───────── DETALLE EVENTO ───────── */

.info-section{
    max-width: 850px;
}

.info-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.info-item{
    position:relative;
    display:flex;
    align-items:center;
}

.info-icon{
    width:100px;
    height:100px;

    border-radius:50%;
    border:16px solid var(--fn-red);

    background:#fff;

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

    position:absolute;
    left:0;
    z-index:2;

    box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.info-icon img{
    width:26px;
    height:auto;
}

.info-box{
    background:#ececec;

    min-height:100px;

    width:calc(100% - 50px);
    margin-left:50px;

    display:flex;
    align-items:center;

    padding:0 24px 0 80px;

    color:#111;
    font-size:18px;

}

/* MOBILE */

@media (max-width:767px){

    .info-icon{
        width:56px;
        height:56px;
        border-width:5px;
    }

    .info-icon img{
        width:22px;
    }

    .info-box{
        min-height:52px;
        padding-left:20px;
        font-size:15px;
    }

}




/*==== FORMULARIO ====*/
.formulario{
  position: relative;
}


.btn-fortinet:hover {
  background-color: #c1000f;
  color: #fff;
}
.formulario h5 {
  font-size: 28px;
  font-weight: 700;
}

.form-decoration{
  position: absolute;
  bottom: -10px;    
  left: -100px;  
  width: 400px; 
  height: auto;
  z-index: -1;   
  pointer-events: none;   
}

.form-control{
  border:none;
  border-bottom:2px solid #cfcfcf;
  border-radius:0;
  background:transparent;
  padding-left:0;
}

.form-control:focus{
  outline:none;
  box-shadow:none;
  border-bottom:2px solid #e30613; /* rojo Fortinet */
}

form label {
  font-size: 18px;
}

@media (max-width:991px){
  .formulario{
    padding:5px 30px !important;
  }
}