html {
   
}
body {
    background-color: #f8f9fa;
    
}

/*main {
    height: 100vh;
}*/

.perfil-container {
/*    height: 100%; SE COMENTO EL MARGEN YA QUE CONDICIONA LA ALTURA */
    border: 5px solid #168AAD;
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    margin-top: 50px;
    
    height: auto;        /* 🔑 NO SE SACA */
    overflow: visible;   /* 🔑 */
}



/*.row {
    align-items: center;
    justify-content: center;
    height: 90%;
    padding-left: 2em;
}*/


.row {
    align-items: center;
    justify-content: center;
    padding-left: 2em;
   /*  height: auto; 🔑 */
}

.perfil-img {
    border-radius: 50%;
    border: 3px solid #3f3f3f;
    max-width: 250px;
    margin-top: 20px;
    margin-bottom: auto;
}

#nombre{
    padding: 30px;
    color:#34A0A4;
    margin-top: auto;
    font-size: 5.5em;
}


 .tabla{
    height: 100%;
    text-align: start;
 }

 span {
    margin: 0.5em 0;
 }

 .botonM {
    background-color: #34A0A4;
    color: #ffffff;
    border: 1px solid #34A0A4;
    padding: 0.7em;
    border-radius: 0.8em;
    margin-right: 5.5em;
}

.botonE {
    background-color: #FF6347;
    color: #ffffff;
    border: 1px solid #FF6347;
}

.btns-perfil {
    margin-top: 3em;
}

.btns-perfil a {
    color: black;
    text-decoration: none;
}

.btns-perfil a:hover {
    
    
    padding: 0.8em;
}
.perfil-container .row > div {
  text-align: center;
}

/*@media screen and (max-height: 768px) {
    main {
        height: 100%;
    }

    .perfil-container {
        height: -webkit-fill-available;
    }
}*/



.caja-grande {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.5em;
}

.caja-1 {
    width: 40%;
}

.caja-2 {
    width: 40%;
}

label {
    margin-bottom: 0.5em;
    width: 70%;
    text-align: start;
}

input {
    margin-bottom: 0.5em;
    padding: 0.4em;
    outline: none;
    border-radius: 1em;
    border: 2px solid #34A0A4;
}

/* Mejora legibilidad del texto */
p, li {
  line-height: 1.6;
}

/* ===============================
   FIX MOBILE PERFIL + FOOTER
   =============================== */

/* MOBILE */
@media (max-width: 768px) {

  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
     height: auto;
  }

  main {
    width: 100%;
    overflow-x: hidden;
  }

  /* Containers */
  .container,
  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  .container.perfil-container {
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Grid */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  
  .container.perfil-container > .row { 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
    text-align: center; 
  }

  /* Texto */
  .nombre-centrado {
    text-align: center;
  }
  
  .headline-profesional { 
    text-align: center; 
  
  }

  /* FOOTER → comportamiento normal */
  footer {
    position: relative !important;
    bottom: auto !important;
    width: 100%;
  }
}


/* ===============================
   AJUSTES MOBILE
   =============================== */


/* ===== FIX FOOTER MOBILE (TODOS LOS NAVEGADORES) ===== */
@media (max-width: 768px) {

  html, body {
    height: auto;
  }

  body {
    min-height: 100dvh;              /* viewport dinámico moderno */
    min-height: -webkit-fill-available; /* fallback iOS */
  }

  footer {
    position: relative !important;
    bottom: auto !important;
  }
}

/* DESKTOP */
@media (min-width: 992px) {


  .nombre-centrado {
    text-align: center;
  }
  .headline-profesional { 
    text-align: center; 
  
  }
}
/* ===============================
   AJUSTES MOBILE
   =============================== */
@media (max-width: 768px) {

  .tecnology-banner {
    padding: 2rem 1.2rem;
    align-items: flex-start;
  }

  .tecnology-banner .content {
    margin-top: 25vh;
    padding: 1.5rem;
  }

  #typewriter {
    font-size: 1.6rem;
    line-height: 1.25;
    margin-bottom: 2rem;
  }

  .tecnology-banner p {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .tecnology-banner .btn {
    font-size: 1rem;
    padding: 0.6rem 1.4rem;
  }

  /* Overlay más oscuro en mobile */
  .tecnology-banner::before {
    background: rgba(0, 0, 0, 0.65);
  }
}
@media (max-width: 768px) {
  .tecnology-banner {
    background-position: center top;
    padding: 3rem 1.5rem;
  }

  #typewriter {
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.4;
  }

  .tecnology-banner p {
    font-size: 1rem;
  }
}