/* styles.css - aproximación responsive basada en diseño mostrado */
:root{
  --blue:#163f85; /* deep blue */
  --accent:#00c2a3;
  --yellow:#EECA4A;
  --muted:#f5f7fb;
  --card:#ffffff;
  --max-width:1200px;
  --container-padding:24px;
  font-family: 'Hint', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}

body{margin:0;color:#1b2b3a;background:#fff;line-height:1.5}
.container{max-width:var(--max-width);margin:0 auto;padding:0px var(--container-padding)}

.site-header{background:#1B3F85;position:fixed;left:0;right:0;top:0;z-index:40;padding:12px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;color:#fff;margin-left:0px;margin-top:1%;}
.logo img {
       height: 90px;
       margin-right: 15px;
     }
.header-inner .logo span{display:block;font-weight:400;font-size:12px}

.main-nav a{margin-left:18px;color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.main-nav .btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none}

.hero{
    background:
       url('assets/vector.png') no-repeat 49% 70%,
       linear-gradient(180deg, var(--blue), #163f85);
    background-size: auto, cover; /* imagen: auto | gradiente: cover */
    color:#fff;
    padding-top:100px;
    padding-bottom:0px;
    }
.hero-grid{display:grid;grid-template-columns:1fr 560px;gap:30px;align-items:center;}
.hero-left{padding:20px 0;margin-left:25%;margin-bottom:10%}
.eyebrow{font-size:14px;opacity:0.9}
.hero-left h1{font-size:5em;margin-bottom:-0.3em;letter-spacing:1px}
.hero-left .accent{color:var(--yellow);padding-left:0px;font-size:2.5em;font-weight:700}
.hero-left .accent-2{color:var(--yellow);padding-left:0px;font-size:1.5em;font-weight:700}
.lead{opacity:0.95;margin-bottom:14px}
.hero-info{font-weight:600}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;margin-top:12px;font-weight:500}

.hero-right img{width:100%;height:auto;margin-bottom:0;}

.about{
        background:#fff;
        padding-top:50px;
        padding-bottom:50px;
        padding-left:50px;
        padding-right: 50px;
      }

.contenedor-superior{
        display:flex;
        gap:20px;
        justify-content:space-between;
      }


.about h2{
           margin-top:8px;
           margin-bottom:8px
         }

.contenedor-superior .accent-2{
                             color:#000;
                             padding-left:0px;
                             font-size:1.8em;
                             font-weight:700;
                             letter-spacing: -0.05em;
                             line-height: 0.8em;
                           }
.contenedor-superior .accent{
                             color:#000;
                             padding-left:0px;
                             font-size:1.1em;
                             font-weight:700}

.about-intro{color:#667085;
             max-width:500px;
             font-weight:400}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}

.card{
      background:var(--muted);
      padding:30px;
      position:relative;
      min-height:140px;
      transition: 
       color 0.5s ease,       /* transición del color */
       font-size 0.5s ease,   /* transición del tamaño */
       margin 0.5s ease,      /* transición de márgenes */
       padding 0.5s ease,      /* transición de márgenes */
       top 0.5s ease;          /* transición de posición */
     }

.card:hover{
      background:var(--muted);
      padding:25px;
      position:relative;
      min-height:140px;
      box-shadow:0 10px 30px rgba(16,24,40,0.08);
      color:#00c2a3;      
     }

.card .num{
      position:relative;
      background:var(--accent);
      color:#fff;
      width:36px;
      height:36px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700
     }
.card h3{
          margin-top: 30px;
         margin-bottom: 8px;
        font-weight: 600;
        font-size: 1.2em;
       }

.card p{
        color:#667085;
        font-size: 1em;
        font-weight:400;
        margin-bottom:50px;
        text-align: justify;
       }

.contenedor-superior-2 {
                 display: grid;
                 grid-template-columns: 1fr 1fr; 
                 gap: 50px; 
                 align-items: center;
                 margin-top: 120px;
                      }
.contenedor-superior-2 .izquierda{
                         margin: auto;
                      }
.contenedor-superior-2 .izquierda img{
                      height: 600px;
                      object-fit:cover;
                      display:block;
                      box-shadow:0 10px 30px rgba(16,24,40,0.08)
                      }
.contenedor-superior-2 .derecha h3{
                    color:#000;
                    margin-top: 30px;
                    margin-bottom: 40px;
                    font-weight: 500;
                    font-size: 1.8em;
                    margin-left: 50px;
      }
.contenedor-superior-2 .derecha p{
                   color:#667085;
                   font-size: 1em;
                   font-weight:500;
                   margin-left: 50px;
      }
.contenedor-superior-2 .derecha p{
                   color:#667085;
                   font-size: 1em;
                   font-weight:500;
                   margin-left: 50px;
      }
.contenedor-superior-2 .derecha .btn{
                    margin-left: 50px;
      }

.agenda{
     background:
       url('assets/fnd_agenda.png') no-repeat 0% 90%,
       linear-gradient(180deg, var(--blue), #0f3a7a);
      background-size: auto, cover; /* imagen: auto | gradiente: cover */
     color:#fff;
     padding:72px 0;
     margin-top:28px
   }

.agenda .container {

  display: grid;
  grid-template-columns: 15% 75%; 
  gap: 20px;
  align-items: start; 
  margin-top: 40px;
}

.agenda h2 {
  grid-column: 1; 
  color: #fff;
  font-size: 2.8em;
  margin: 0;
  align-self: flex-start;
}

.agenda-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items: start;}

.agenda-card{ position:relative;background:#fff;color:#0a2a4a;padding:20px;border-radius:12px}

.agenda-card h3{
  color:#01BAB3;
  font-size:1.2em;
  font-weight: 600;
  text-align: center;
   }
.agenda-card h4{
  color:#24366E;
  font-size:1.1em;
  font-weight: 600;
  margin-left: 10px;
   }
.agenda-card .num{
    position: relative;
    background: #E3FFFD;
    color: #01BAB3;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    left: 45%;
     }

.agenda-card ul{
   list-style: none; 
   list-style-image: url('assets/list.png')
}
.agenda-card li{
  font-weight: 400;
  color:#667085;
  font-size:1em;
  margin-bottom:20px;
  margin-top:0px;
  padding-top: 0px;
  top:0px;
  position: relative;
  transition: 
    color 0.3s ease,       /* transición del color */
    font-size 0.3s ease,   /* transición del tamaño */
    margin 0.3s ease,      /* transición de márgenes */
    top 0.3s ease;          /* transición de posición */
}
.agenda-card li:hover{
  font-weight: 500;
  color:#01BAB3;
  font-size:1.01em;
  margin-bottom:20px;
  margin-top:0px;
  padding-top: 0px;
  top:0px;
}
.agenda-card .azul-lista{
  color:#24366E;
}

#inscripcion{
  background:#EBF2FC;
  background-size: auto, cover; /* imagen: auto | gradiente: cover */
}
.signup{
    
    padding:0px 0px;
    background:#fff
     }

.signup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% 50% */
  gap: 36px;
  align-items: center;
}


.signup-image img{
    width:100%;
    object-fit:cover;
    display:block;  
    box-shadow:0 0px 30px rgba(16,24,40,0.08)
  }

.signup-grid-2{
    margin-left:20%;
    margin-right:5%;
   }


.form{
  margin-left: 20%;
  max-width: 80%;
  background:#fff;
  border-radius:10px;
  padding:35px;
  box-shadow:0 10px 30px rgba(16,24,40,0.06)
  }

.form h3{
   color:#000;
   font-size:1.8em;
   margin-top:0;
  }

.form-2-colum{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  }

.form label{
      display:block;
      margin-bottom:10px;
      font-size:14px;
      color:#667085;
      font-weight: 600;
    }

.form input::-webkit-input-placeholder { color: #667085; opacity: 0.6; } /* Chrome, Safari, Edge */
.form input:-moz-placeholder          { color: #667085; opacity: 0.6; } /* Firefox 18- */
.form input::-moz-placeholder         { color: #667085; opacity: 0.6; } /* Firefox 19+ */
.form input:-ms-input-placeholder     { color: #667085; opacity: 0.6; } /* IE10+ */
.form input::placeholder              { color: #667085; opacity: 0.6; } /* estandar moderno */

.form .verde{
      color:#01BAB3;
    }

.form input{
  width:100%;
  padding:10px;
  border:1px solid #e6eef3;
  border-radius:8px;
  margin-top:6px
}

.form .registro input{
  width:5%;
  color:#e6eef3;
}

.form .registro label{
  font-weight:400;
  margin-bottom: 5px;
  color:#66708585;
  font-size:0.8em;
}

.form .registro input[type="checkbox"] {
  margin-right: 5px;
  margin-left: 0px;
  color:#e6eef3;
}

.form .registro legend {
      margin-top:5px;
      font-size:14px;
      color:#667085;
      font-weight: 600;
}
.form .registro{
  border:none;
  padding-left:0px;
}

.form .text-2{
      display:block;
      margin-bottom:10px;
      font-size:14px;
      color:#66708585;
      font-weight: 600;
    }

.form .btn-2{
     display:inline-block;
     background:var(--accent);
     color:#fff;padding:12px 18px;
     border-radius:8px;
     text-decoration:none;
     margin-top:12px;
     font-weight:500;
     width:100%;
     border: none;
    }

.vocativo 
     {
      background:#0b2b58;
      color:#fff;
      padding:40px 0;
      margin-top:0px
    }
.vocativo h3{
      color:#FFFFFF;
      font-size:1.2em;
      font-weight: 600;
      text-align: center;
   }
.vocativo-interna p{
  text-align: center;
}    
.vocativo-columna {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: start; 
    align-items: center;
    padding-left: 5%;
    }
.vocativo-columna h3{
   color:#FFC000;
   font-weight: 600;
   font-size: 2em;
   text-align:left;
   display:block;
   border-left:3px solid #F89008;
   padding-left: 5%;
   }
.vocativo-columna p{
   color:#fff;
   font-weight: 600;
   font-size: 1em;
   text-align:left;
   display:block;
   border-left:3px solid #F89008;
   padding-left: 5%;
   }


.site-footer{
    background:#1B3F85;
    color:#fff;
    padding:40px 0;
    margin-top:0px
  }

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; 
    gap: 20px;
    justify-items: start; 
    align-items: center;
    }
.footer-inner .credits{
     font-weight: 500;
     color:#fff;
     font-size: 0.8em;
     margin-bottom:2px;
     margin-left: 50px;
   }

/*.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}*/



/* Tablets y pantallas medianas */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    margin-left: 0;
  }
  .hero-left {
    margin: 0 auto;
    padding: 0 20px;
  }
  .hero-left h1 {
    font-size: 3em;
  }
  .hero-left .accent {
    font-size: 2em;
  }
  .hero-right {
    order: -1; /* imagen arriba en móviles */
    margin-bottom: 20px;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .contenedor-superior {
    flex-direction: column;
    text-align: center;
  }
  .contenedor-superior-2 {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: 30px;
  }
  .contenedor-superior-2 .derecha {
    margin-left: 0;
  }
  .contenedor-superior-2 .derecha p,
  .contenedor-superior-2 .derecha .btn {
    margin-left: 0;
  }

  .agenda .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .agenda-grid {
    grid-template-columns: 1fr;
  }

  .signup-grid {
    grid-template-columns: 1fr;
  }
  .signup-grid-2, 
  .form {
    margin: 0 auto;
    max-width: 95%;
    padding-top: 30px;
  }
  .form-2-colum {
    grid-template-columns: 1fr;
  }

  .vocativo-columna {
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    justify-items: center;
    text-align: center;
  }
  .vocativo-columna h3 {
    text-align: center;
    border: none;
    padding-left: 0;
  }
  .vocativo-columna p {
    text-align: center;
  }

  .site-header .logo img {
    height: 35px;
  }
}

/* Móviles pequeños */

@media (max-width: 600px) {
  body{
    margin:0;
    width:100%;
   }

  .container{
     width:100%;
   }

  .hero{
    background:
        url('assets/vector.png') no-repeat 34% 30%,
        linear-gradient(180deg, var(--blue), #163f85);
    background-size: auto, cover;
    color:#fff;
    padding-top:20px;
    padding-bottom:40px;
    }

  .hero-left h1 {
    font-size: 3.5em;
  }
  .hero-left .accent {
    font-size: 1.6em;
  }
  .hero-left .accent-2 {
    font-size: 1.2em;
  }

  .contenedor-superior-2 .izquierda img{
                      width:100%;
                      object-fit:cover;
                      display:block;
                      box-shadow:0 10px 30px rgba(16,24,40,0.08);

                      }


  .cards {
    grid-template-columns: 1fr;
  }

  .card{
    background: var(--muted);
    padding: 30px;
    position: relative;
    min-height: 140px;
  } 

  .contenedor-superior-2 .derecha h3 {
    color: #000;
    margin-top: 30px;
    margin-bottom: 40px;
    font-weight: 500;
    font-size: 1.8em;
    margin-left: 0px;
}

  .vocativo-columna {
    grid-template-columns: 1fr;
  }
.footer-inner {
    grid-template-columns: 1fr;
  }
  footer .credits {
    text-align: center;
    margin-bottom: 20px;
    margin-left: 50px;
  }
}

/* Animaciones base */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}







.expositores {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 150px;
    padding-left: 0px;
    padding-right: 10%;
    background: #fff;
    color: #222;
    font-family: 'Poppins', sans-serif;
}


.expositores h2 {
   font-family: 'Hint', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: #000;
    font-size: 2.8em;
    margin: 0;
    margin-bottom: 50px;
}

.grid-expositores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.ponente {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.foto {
  width: 80px;
  height: 80px;
  border: 5px solid #00b5a9;
  border-radius: 50%;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Imágenes de ejemplo */
.foto1 { background-image: url('https://isoc.pe/perumasconectados/assets/jose_otero.jpg'); }
.foto2 { background-image: url('https://isoc.pe/perumasconectados/assets/alan_dongo.jpg'); }
.foto3 { background-image: url('https://isoc.pe/perumasconectados/assets/stalin_rivera.png'); }
.foto4 { background-image: url('https://isoc.pe/perumasconectados/assets/cesar_cordova.jpg'); }
.foto5 { background-image: url('https://isoc.pe/perumasconectados/assets/joao_vasconcelos.png'); }
.foto6 { background-image: url('https://isoc.pe/perumasconectados/assets/sandro_marcone.jpg'); }

.info {
  text-align: left;
}

.info h3 {
    font-family: 'Hint', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 1.2em;
  font-weight: 500;
  margin: 0;
}

.info .cargo {
    font-family: 'Hint', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 1em;
  color: #667085;
  margin: 2px 0;
}

.info .tema {
    font-family: 'Hint', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 1em;
  color: #00b5a9;
  margin: 0;
}

.cv {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #00b5a9;
    box-shadow: 0 4px 12px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    top: 0%;
    left: 60%;
    transform: translateX(-50%);
    width: 460px;
    z-index: 10;
}

.cv p {
  margin: 0;
  font-size: 1em;
  color: #667085;
  text-align: center;
  font-family: Hint, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.cv .cerrar {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 16px;
  color: #00b5a9;
  cursor: pointer;
  font-weight: bold;
}

.ponente:hover .cv {
  display: block;
} 

/* Cuando se abre con clic (JS) */
.cv.activo {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .grid-expositores {
    grid-template-columns: 1fr;
      margin-left: 10%;
  }
  
.cv {
        display: none;
        position: absolute;
        background: #fff;
        border: 1px solid #00b5a9;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 15px 20px;
        border-radius: 10px;
        top: 0%;
        left: 60%;
        transform: translateX(-50%);
        width: 80%;
        z-index: 10;
    }


.foto {
    width: 90px;
    height: 67px;
    border: 5px solid #00b5a9;
    border-radius: 80%;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
  
}