@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Outfit&display=swap');


/* ---------------------------------------------------------------- */
/* GENERALES */
/* ---------------------------------------------------------------- */
body {
    overflow-x: hidden; 
}

.resaltado-magenta {
  color: #e6007e;
  font-weight: 700;
}

.padding-superior {
  padding-top: 100px;
}

/* Botones regreso y siguiente de los proyectos */
.contenedor-botones {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.boton-regreso,
.boton-siguiente {
  display: inline-block;
  padding: 2px 25px;
  background-color: #003495; 
  color: #ffcc00; 
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  font-weight: 300;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.boton-regreso:hover,
.boton-siguiente:hover {
  background-color: #ffcc00;
  color: #003495;
}

/* HEADER */
.active {
  color: #ffcc00 !important;
  font-weight: 600 !important;
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e6007e;
  border-radius: 3px; 
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #003595;
}

a.nav-link {
  padding: 0 10px !important;
}

.navbar-nav .nav-link {
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  white-space: nowrap;
} 

.navbar-nav .nav-link {
  color: #ffffff7c; 
  transition: color 0.2s;
}

.navbar-nav .nav-link:hover {
  color: #ffcc00 !important;
}

.navbar-brand img {
  width: auto;
  max-height: 44px; 
  display: inline-block;
}

/* Nav solo en la página de inicio */
body.inicio .navbar {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  box-shadow: none;
}

/* Fondo para el menú hamburguesa desplegado */
.navbar-collapse.show {
  background-color: #003595; 
  z-index: 999; 
  padding: 10px; 
  border-radius: 8px;
}

/* ---------------------------------------------------------------- */
/* PÁGINA DE INICIO */
/* ---------------------------------------------------------------- */
/* Prealoader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /*background-image: linear-gradient(to top, #e6007e, #003595);*/
  background-color: #003495; 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.8s ease;
}

#preloader svg {
  width: 200px;      
  height: auto;
}

#preloader.oculto {
  opacity: 0;
  pointer-events: none;
}

#contenido {
  opacity: 0;
  transition: opacity 0.8s ease;
}

#contenido.visible {
  opacity: 1;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: -80px 0 0 0;
  top: 80px;
}
  
/* Fondo de imágenes de fondo con transición */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 10s infinite;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}
  
.slide1 {
  background-image: url(../imagenes-inicio/you-can-always-find-me.jpg);
  animation-delay: 0s;
}

.slide2 {
  background-image: url(../imagenes-inicio/nueve-ocho.jpg);
  animation-delay: 2.5s;
}

.slide3 {
  background-image: url(../imagenes-inicio/fresh-men.jpg);
  animation-delay: 5s;
 }

.slide4 {
  background-image: url(../imagenes-inicio/mixup.jpg);
  animation-delay: 7.5s;
}
  
/* Animación de opacidad (desvanecimiento) */
  @keyframes fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

/* Degradado magenta a azul */
.overlay-inicio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: #003495d7;*/
  background-image: linear-gradient(to top, #e6007fd5, #003495d5);
  z-index: 9;
}
  
/* Contenido */ 
.content {
  position: relative;
  z-index: 10; 
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: white;
}

.icono-inicio {
  width: 200px;
  height: auto;
  margin-bottom: 10px;
}

.content h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: white;
  font-size: 34px;
  text-align: center;
}

.content p {
  font-family: "figtree", sans-serif;
  font-weight: 300;
  font-style: normal;
  color:white;
  font-size: 22px;
  padding: 0 0 20px 0;
}

/* Botones inicio */
.btn-portafolio {
  background-color: #ffcc00;
  color: #e6007e;
  text-decoration: none;
  padding: 6px 23px;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: "figtree", sans-serif;
  font-weight: 500;
  z-index: 9;
  transition: all 0.3s ease;
  margin-right: 10px;
}

.btn-conoceme {
  background-color: transparent;  
  border: 2px solid #ffffff;         
  color: #ffffff;                    
  text-decoration: none;
  padding: 6px 23px;
  border-radius: 50px;                
  font-family: "figtree", sans-serif;
  font-weight: 500;
  z-index: 9;
  transition: all 0.3s ease;
  margin-left: 10px;
}

.btn-portafolio:hover,
.btn-conoceme:hover,
.boton-contacto:hover,
.boton-portafolio:hover {
  background-color: #ffffff;
  color: #e6007e;
}

.redes-inicio {
  position: relative;
  text-align: center;
  z-index: 10;
  margin-top: 60px;
}

/* ---------------------------------------------------------------- */
/* PÁGINA  SOBRE MÍ */
/* ---------------------------------------------------------------- */
/* SECCIÓN DE PRESENTACIÓN */
/* Fotografía y circulos */
.contenedor-imagen-svg {
  position: relative;
}

.circulos-animados {
  position: absolute;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.foto-arantza {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;          
  height: auto;         
  object-fit: cover;
  border-radius: 50%;
  max-width: 91%;
  padding-top: 6px;  
}

.fotografia-circulos {
  padding-top: 120px;
   
}

.circulos-animados svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.contenedor-imagen-svg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Presentación */
.presentacion {
  padding: 50px 0;
}

.texto-presentacion {
  padding: 0 0 0 5%;
}

.presentacion h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 100;
  font-style: normal;
  color: #003595;
  font-size: 65px;
  padding: 20px 0;
}

.presentacion h1::after {
  content: '';
  display: block;
  width: 80px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin-left: 630px;
  margin-top: 5px;
}

.presentacion p {
  font-family: "figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #003595;
  padding: 0 10% 0 0;
}

.salto-md {
  display: none;
}

/* Sección software e intereses */
.software,
.intereses {
  font-family: "Outfit", sans-serif;
  font-weight: bold;
  position: relative;
  font-size: 40px;
  text-align: left;
  color: #003595;
  }
 
.software::after,
.intereses::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #e6007e;
  border-radius: 10px;
  margin-left: 110px;
  margin-top: 5px;
  }
  
/* CTA */
.cta-sobremi {
  background-color: #003595;
  padding: 100px 20% 150px 20%;
}

.cta-sobremi p {
  font-family: "Outfit", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: white;
  font-size: 47px;
  margin-bottom: 10px;
  padding: 0 0 50px 0;
}

 /* Botón portafolio */
.boton-portafolio {
  display: inline-block;
  padding: 2px 25px;
  background-color: #ffcc00; 
  color: #e6007e ; 
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  font-weight: 300;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  }

/* ---------------------------------------------------------------- */
/* PÁGINA PORTAFOLIO */
/* ---------------------------------------------------------------- */
/* SECCIÓN DE CTA EXPLORA MI PORTAFOLIO */
.portafolio {
  padding: 100px 23% 156px;
  background-image: linear-gradient(to top,white, #e6007e, #003595);
  margin-top: 65px;
} 

.portafolio h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: white;
  font-size: 62px;
  text-align: center;
}

/* SECCIÓN DE PROYECTOS */
.proyectos h2 {
  font-family: "Outfit", sans-serif;
  font-weight: bold;
  position: relative;
  font-size: 40px;
  text-align: left;
  color: #003595;
}

.proyectos h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #e6007e;
  border-radius: 10px;
  margin-left: 120px;
  margin-top: 5px;
}

.contenedores-proyectos {
  margin-top: 75px;
}

.contenedores-proyectos h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #e6007e;
  font-size: 19px;
  margin-bottom: 10px;
}
  
.contenedores-proyectos h4 {
  font-family: "figtree", sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #003595;
  font-size: 15px;
  margin-bottom: 18px;
}
  
.img-fluid {
  width: 100%;
  height: auto;
  display: block;
}

/* Dimensiones títulos y descripciones */
.titulo-proyecto-dos {
  min-height: 45px; 
}
  
.descripcion-proyecto-dos {
  min-height: 20px;
}
  
.titulo-proyecto-uno {
  min-height: 20px; 
 }

.descripcion-proyecto-uno {
  min-height: 43px;
}

/* DEGRADADO Y ZOOM */
.proyecto {
  width: 100%;
}
  
/* zoom */
.contenedor-imagen {
  position: relative;
  overflow: hidden;
}
  
.imagen-proyecto {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
  
.contenedor-imagen:hover .imagen-proyecto {
  transform: scale(1.05);
}
  
/* degradado */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #e6007fc7, #003495cc);
  color: #ffee00; 
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
}
  
 /* Texto encima */
.titulo-overlay {
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 500;
}
  
/* Mostrar la pleca solo al hacer hover */
.contenedor-imagen:hover .overlay {
  opacity: 1;
}
  
  
/* SECCIÓN DE CTA */
.cta {
  background-image: linear-gradient(to top, #e6007f, #003495);
  padding: 100px 20% 150px 20%;
}

.cta p {
  font-family: "Outfit", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: white;
  font-size: 47px;
  margin-bottom: 10px;
  padding: 0 0 50px 0;
}

.trabajemos-juntos {
  font-weight: 800;
  color: #ffee00;
  font-size: 55px;
}

 /* Botón contacto */
.boton-contacto {
  display: inline-block;
  padding: 2px 25px;
  background-color: #003495; 
  color: #ffcc00 ; 
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  font-weight: 300;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}
  
/* ---------------------------------------------------------------- */
/* PÁGINA NUEVE OCHO */
/* ---------------------------------------------------------------- */  
.proyecto-nueveocho h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: right;
}

.proyecto-nueveocho h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin-left: auto;
  margin-top: 5px;
 }

.proyecto-nueveocho p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: right;
  justify-content: right;
  padding-top: 20px;
  padding-left: 500px;
}

.proyecto-nueveocho img {
  max-width: 100%;
  height: auto;
}

.modelado-nueveocho img {
  border-radius: 8px;
}


/* ---------------------------------------------------------------- */
/* PÁGINA FRESH MEN */
/* ---------------------------------------------------------------- */
.proyecto-freshmen h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: center;
}

.proyecto-freshmen h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin: 10px auto 0 auto;
  margin-top: 5px;
}

.proyecto-freshmen p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: center;
  padding: 20px 30px;
}

.imagen-freshmen {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px; 
} 

.grupo-uno {
  padding-bottom: 20px;
}

.grupo-dos {
  padding-bottom: 20px;
}

/* ---------------------------------------------------------------- */
/* PÁGINA REVISTA */
/* ---------------------------------------------------------------- */
.revista-digital img {
  max-width: 100%;
  border-radius: 8px; 
}

.revista-digital h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: center;
}

.revista-digital h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin: 10px auto 0 auto;
  margin-top: 5px;
}

.revista-digital p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: center;
  padding: 20px 30px;
}



/* ---------------------------------------------------------------- */
/* PÁGINA PRO CHIEN */
/* ---------------------------------------------------------------- */
.prochien img {
  max-width: 100%;
}

.prochien h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: left;
}

.prochien h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin-left: 690px;
  margin-top: 5px;
}

.prochien p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: left;
  justify-content: left;
  padding-top: 20px;
  padding-right: 790px;
}

/* ---------------------------------------------------------------- */
/* PÁGINA CARTEL YOU CAN ALWAYS FIND ME */
/* ---------------------------------------------------------------- */
.cartel-find-me img {
  max-width: 100%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
  border-radius: 8px; 
}

.cartel-find-me h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: left;
}

.cartel-find-me p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: left;
  justify-content: left;
  padding-top: 20px;
  padding-right: 142px;
}

.cartel-find-me h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin-left: 470px;
  margin-top: 5px;
}



/* ---------------------------------------------------------------- */
/* PÁGINA CARTEL EL ZORRO ES MÁS SABIO */
/* ---------------------------------------------------------------- */
.el-zorro-sabio img {
  max-width: 100%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
  border-radius: 8px; 
}

.el-zorro-sabio h1 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #e6007e;
  font-size: 50px;
  text-align: right;
}

.el-zorro-sabio p {
  font-family: "figtree", sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  color: #003595;
  text-align: right;
  justify-content: right;
  padding-top: 20px;
  padding-left: 142px;
}

.el-zorro-sabio h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  background-color: #ffcc00;
  border-radius: 10px;
  margin-left: auto;
  margin-top: 5px;
}

/* ---------------------------------------------------------------- */
/* CONTACTO */
/* ---------------------------------------------------------------- */
.mensaje-final p {
  font-family: "figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #e6007e;
  font-size: 20px;
  padding:0 10% 10px 10%;
}

.mensaje-final h2 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #003595;
  font-size: 20px;
  padding: 10px 0;
}

.mensaje-final img {
  margin: 10px;
  width: 50px;
  height: 50px;
}

.mensaje-final {
  margin-bottom: 40px;
}

.section-heading .section-title {
  font-size: 50px;
}

.section-title {
  padding: 80px 0 105px 0;
}


/* ---------------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------------- */
.footer {
  background-color: #e6007e;
  color: white;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 15px;
}
  
  .icono-red-social {
  width: 40px;
  height: 40px;
}
  



/* ---------------------------------------------------------------- */
/* MEDIA QUERIES */
/* ---------------------------------------------------------------- */

@media (max-width: 1399px) {
  /* Página sobre mí */
  .foto-arantza {
    max-width: 92%;
  }

  .presentacion h1 {
    font-size: 55px;
  }
  .presentacion h1::after {
    margin-left: 520px;
  }

  /*Página pro chien*/
  .prochien p {
    padding-right: 655px;
  }

  /*Página cartel you can always find me*/
  .cartel-find-me h1 {
    font-size: 42px;
  }

  .cartel-find-me h1::after {
    margin-left: 390px;
  }

}


@media (max-width: 1199px) {
  /* Sección de presentación */
 .presentacion h1 {
    font-size: 45px;
}

  .presentacion h1::after {
    margin-left: 410px;
  }

  /*Página nueve ocho*/
  .proyecto-nueveocho p {
    padding-left: 390px;
  }

  /*Página pro chien*/
  .prochien p {
    padding-right: 500px;
  }

  /*Página cartel you can always find me*/
  .cartel-find-me h1 {
    font-size: 35px;
  }

  .cartel-find-me h1::after {
    margin-left: 315px;
  }

  /*Página el zorro es más sabio*/
  .el-zorro-sabio h1 {
  font-size: 35px;
  }

  .el-zorro-sabio p {
  padding-top: 2px;
  }

}


@media (max-width: 991px) {
  /* Header nav */
  a.nav-link {
      padding: 20px 10px !important;
      text-align: center;
      border-bottom: solid 2px #e6007e;
  }

  .active::after {
      display: none;
  }
  
  /* Sección de presentación */
  .presentacion {
      padding: 50px 0;
  }

  .texto-presentacion {
      padding: 0 0 0 5%;
  }

  .presentacion h1 {
      font-size: 32px;
  }

  .presentacion h1::after {
    margin-left: 290px;
    width: 60px;
  }
  
  .presentacion p {
      padding: 0 5% 0 0;
  } 

  .foto-arantza {
    max-width: 95%;
  }

  /*Página nueve ocho*/
  .proyecto-nueveocho p {
    padding-left: 150px;
  }

  .proyecto-nueveocho h1 {
    font-size: 36px;
  }

  /*Página pro chien*/
  .prochien h1 {
    font-size: 44px;
  }
  .prochien p {
    padding-right: 200px;
  }

  .prochien h1::after {
    margin-left: 600px;
  }

  /*Página cartel you can always find me*/
  .cartel-find-me h1 {
    font-size: 30px;
  }

  .cartel-find-me h1::after {
    margin-left: 260px;
  }

  .cartel-find-me p {
    padding-right: 30px;
  }

  /*Página el zorro es más sabio*/
  .el-zorro-sabio h1 {
    font-size: 32px;
  }

  .el-zorro-sabio p {
    padding-left: 22px;
  }
}


@media (max-width: 767px) {
  /* Sección de presentación */
  .presentacion p {
      text-align: center;
      padding: 0;
  } 

  .presentacion h1 {
      text-align: center;
      font-size: 50px !important;
  } 

  .salto-md {
      display: inline;
    }

  .contenedor-imagen-svg {
    margin: 55px 0 65px 0;
    padding: 0;
  }
  
  .foto-arantza {
    max-width: 84%;
  }

  .presentacion h1::after {
    margin: 10px auto 0 auto;
  }

  /* Sección de cta explora mi portafolio */
 .portafolio {
  padding: 90px 15% 120px;
 }

 .portafolio h1 {
  font-size: 52px;
 }

  /* Sección de proyectos */
  .titulo-proyecto-uno {
      min-height: 15px; 
  }
  
  .descripcion-proyecto-uno {
      min-height: 22px;
  }

  /*Página Nueve Ocho*/
  .proyecto-nueveocho h1 {
      text-align: center;
    }

    .proyecto-nueveocho h1::after {
      margin: 10px auto 0 auto;
    }
  
  .proyecto-nueveocho p {
      text-align: center;
      padding: 0;
  }

  /*Página Freshmen*/
  .proyecto-freshmen p {
    padding: 20px 10px;
  }

  .medianil-fresh {
    padding-bottom: 20px;
  }


  /*Página pro chien*/
  .prochien h1 {
    font-size: 33px;
    text-align: center;
  }
  .prochien p {
    text-align: center;
    justify-content: center;
    padding: 20px 0;
  }

  .prochien h1::after {
    margin: 10px auto 0 auto;
  }

  /*Página cartel you can always find me*/
 .cartel-find-me h1 {
    font-size: 36px;
    text-align: center;
  }

  .cartel-find-me h1::after {
    margin: 10px auto 0 auto;
  }

  .cartel-find-me p {
    text-align: center;
    justify-content: center;
    padding: 20px 0;
  }

  /*Página el zorro es más sabio*/
.el-zorro-sabio h1 {
   font-size: 36px;
   text-align: center;
}

.el-zorro-sabio h1::after {
    margin: 10px auto 0 auto;
  }

  .el-zorro-sabio p {
    text-align: center;
    justify-content: center;
    padding: 20px 0;
}

}


@media (max-width: 575px) {
  /* Página sobre mí */
  .presentacion p {
    padding: 0;
  } 

  .texto-presentacion {
    padding: 0;
  }
  
  .foto-arantza {
    max-width: 87%;
  }
  .texto-presentacion {
    padding: 0 15px; 
    word-wrap: break-word; 
  }
 
  .fotografia-circulos {
    width: 100%; 
    max-width: 375px; 
    margin: 0 auto; 
    padding-top: 20%;
    box-sizing: border-box; 
  }

  .cta-sobremi {
    padding: 50px 0 65px 0;
  }

  .cta-sobremi p {
    font-size: 31px;
    margin-bottom: 19px;
    padding: 0;
  }

  /*Página portafolio*/
  .portafolio h1 {
    font-size: 45px;
  }

  .cta {
    padding: 50px 0 65px 0; 
  }

  .cta p {
    font-size: 34px;
  }

  .trabajemos-juntos {
    font-size: 38px;
  }
  
  /*Página nueve ocho*/
  .proyecto-nueveocho h1 {
    padding: 0 20px;
    font-size: 32px;
  }


 
}