:root{
    --primario: #EF7E25;
    --primario0scuro: #E05711;
    --secundario: #515250;
    --blanco: #fff;
    --negro: #000;
    --fuente: "Poppins", sans-serif;
    --fuente2: "Oswald", sans-serif;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;/*para que 1rem sea 10px siempre*/
    scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}
/*globales*/
.hero{
  margin-top: 100px;
}
body{
    font-size: 1.4rem;
    line-height: 1.5;
    margin:0;
    font-family: var(--fuente);
    color: var(--secundario);
    
}
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
.proyectos h2{
  margin-top: 6rem;
  font-size: 4rem;
}
/*header*/
.logoimg{
   width:  30rem;
   margin: 0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
}
/*navegación*/
.site-header {
  background: white;
  border-bottom: 1px solid #dddddda0;
  position: sticky;   /* Menú siempre visible arriba */
  top: 0;
  z-index: 1000;
  height: 100px;
  display: flex;
  align-items: center;
}
.brand img{
  height: 70px;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 80px;
  font-size: 1.8rem;
}
.main-nav a {
  text-decoration: none;
  color: var(--negro);
  font-weight: bold;
}
.main-nav a:hover,
.main-nav a.active {
  border-bottom: 3px solid var(--primario0scuro);  /* Naranja */
}
/* HERO PADRE */
.hero {
  position: relative;
  height: 90rem;
  overflow: visible;
}

/* VIDEO FONDO */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* OVERLAY */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.163);
  z-index: 2;
}

/* CONTENIDO */
.footer-brand img{
  width: 100%;
  height: 100%;
}

.boddys {
  position: relative;
  z-index: 3;
  display: flex;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6rem;
}
/*titulo h1*/
.hero-content h1{
  color: var(--blanco);
  font-size: clamp(5rem, 7vw, 10rem);
  max-width: 80rem;
  margin: 0;
}
.booton__one{
 margin-left: 6rem;
 background-color: var(--primario);
 width: 22rem;
 height: 5rem;
 border-radius: 25px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.booton__one a{
  color: var(--blanco);
  text-decoration: none;
  font-size: 2.5rem;
}
.booton__one:hover{
  background-color: var(--secundario);
}
/* TARJETA */
.tarjeta-info {
  position: absolute;
  bottom: -20rem;   /* YA NO NEGATIVO */
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  padding: 30px 40px;
  border-radius: 20px;
  width: 60%;
  z-index: 4;
  box-shadow: 0 10px 60px rgba(0,0,0,0.4);
}

/* DATOS */
.datos {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.tarjeta-info h3 {
  color: var(--secundario);
  font-size: 4.2rem;
  text-align: center;
}

.tarjeta-info p {
  font-size: 3rem;
  text-align: center;
}

.tarjeta-info h4 {
  color: var(--primario);
  font-size: 3.5rem;
  text-align: center;
}

.tarjeta-info span {
  font-size: 2.8rem;
  text-align: center;
}

/* ===== Quiénes somos ===== */
#quienes-somos{
   display: flex;
   justify-content: center;
}
.about-inner {
  margin-top: 30rem;
  width: 110rem;
}
.about-title h2 {
  font-size: 50px;
  padding: 10px;
  text-align: center;
  
}
.about-copy p {
  font-size: 1.9rem;
  margin-bottom: 10px;
  text-align: justify;
}
/*porque elgirnos*/
.container{
  max-width: 110rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 5fr));
  gap: 20px;
  text-align: center;
}
.beneficio {
   text-decoration: none;
   color: var(--negro);
   padding: 10px; /* menos padding lateral */
   transition: transform 0.2s, background 0.2s;
   border-radius: 10px;
   justify-items: center; 
}

.beneficio img {
  width: 120px;          /* íconos más grandes */
  margin-bottom: 20px;
  background: var(--primario);   /* círculo naranja */
  padding: 20px;         /* espacio dentro del círculo */
  border-radius: 50%;

}

.beneficio h3 {
  margin-bottom: 12px;
  font-size: 20px;       /* más grande */
  color: var(--primario);
  text-align: center;
}

/* Hover: que se vean como botones */
.beneficio:hover,.beneficio p:hover {
  background:var(--secundario);
  transform: translateY(-6px);
  color: var(--blanco);
}



/* ===== Carrusel de marcas (dos filas, centrado) ===== */
#marcas {
  background: var(--blanco);
  padding: 4rem 0;
  text-align: center;
}

#marcas h2{
  font-size: 38px;            /* título más grande */
  margin-bottom: 32px;
  line-height: 1.15;
}

.marquee {
  overflow: hidden;
  margin: 0 auto 32px auto;
  max-width: 1100px;          /* NO full width */
  position: relative;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;                   /* separación entre slots */
  padding: 16px 0;             /* aire vertical */
  animation: scroll-left 10s linear infinite;
}

.marquee-track.fila2 {
  animation: scroll-right 10s linear infinite;
  margin-top: 8px;             /* separación entre filas */
}

/* Cada logo ocupa un SLOT idéntico */
.logo-item{
  flex: 0 0 160px;             /* ancho fijo del slot (ajusta para ver 5–6 a la vez) */
  height: 90px;                /* alto fijo del slot */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La imagen se adapta al slot sin deformarse */
.logo{
  max-height: 70px;            /* escala uniforme de altura */
  max-width: 140px;            /* evita que los muy anchos se pasen */
  width: auto;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: transform .2s, opacity .2s, filter .2s;
  /* un poco de aire interno para que no se vean pegados al borde del slot */
  padding: 6px 8px;
}

.logo:hover{
  transform: scale(1.08);
  opacity: 1;
  filter: grayscale(0%);
}
/*ubicación*/
/* CONTENEDOR GENERAL */
.ubicacion {
  padding: 4rem 1rem;
}

.ubi-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 5rem;
}
/* Desktop grande */
@media (min-width: 1400px){
  .ubi-title{
    font-size: 5.5rem;
  }
}

/* Laptop */
@media (max-width: 1200px){
  .ubi-title{
    font-size: 4.5rem;
  }
}

/* Tablet / iPad */
@media (max-width: 768px){
  .ubi-title{
    font-size: 4rem;
  }
}

/* Celular */
@media (max-width: 480px){
  .ubi-title{
    font-size: 4rem;
  }
}

/* Celular pequeño */
@media (max-width: 360px){
  .ubi-title{
    font-size: 3.7rem;
  }
}
.ubi-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 10px);
  max-width: 110rem;
  margin: auto;
  gap: 1.5rem;
  position: relative;
}

/* TEXTO */
.ubi-3 {
  background-color: var(--secundario);
  grid-column: 1 / 13;
  grid-row: 6 / 20;
  z-index: 2  ;
  border-radius: 16px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
}

.ubi-text h3 {
  color: var(--primario);
  font-size: 4rem;
  margin-bottom: 1rem;
}

.ubi-3 p {
  color: var(--blanco);
  font-size: 2rem;

}

/* IMAGEN */
.ubi-2 {
  grid-column: 10/21;
  grid-row: 1 / 15;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
}

.ubi-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MAPA */
.ubi-1 {
  grid-column:12/19;
  grid-row: 12/21;
  z-index: 3;
  border-radius: 16px;
  overflow: hidden;
}

.ubi-1 iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Pausar animación al pasar el mouse */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Animaciones en direcciones opuestas */
@keyframes scroll-left   { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} }
@keyframes scroll-right  { 0% {transform: translateX(-50%);} 100% {transform: translateX(0);} }

/* Responsive */
@media (max-width: 1200px){
  #marcas h2{ font-size: 28px; }
  .logo-item{ flex: 0 0 120px; height: 70px; }
  .logo{ max-height: 54px; max-width: 100px; }
  .marquee-track{ gap: 28px; }
}
/*contacto*/
.flex--form{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.contenedor-campos{
    display: grid;
    gap: 10px;
}
.formulario{/*box caja*/
    background-color: var(--secundario);
    border-radius: 20px;
    width: min( 60rem, 100%);/*se utiliza el valor mas pequeño}*/
    margin-top: 2rem;/*cunado no hay display flez*/
    padding: 1rem;
}
.formulario fieldset{/*esti es el titulo*/
    border: none;
}
.formulario legend{
    text-align: center;
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--blanco);
}
.campo {
    margin-bottom: 1rem;
}
.campo label{
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;
}
.campo textarea{
    height: 20rem;
}
.alinear-derecha{
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.w-100{
  background-color: var(--primario);
  border-radius: 10px;
  color: var(--blanco);
  width: 15rem;
}
.w-100:hover{
  background-color: var(--primario0scuro);
}
/* forma de seleccion en formular
.campo input[type="text"],
.campo input[type="tel"]{
    
}*/
.input-text{
    width: 100%;
    border:none;
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.campo:nth-child(3),.campo:nth-child(4)
{
    grid-column: 1 / 3;
}
/* ===== Footer (full-bleed real) ===== */
.footer{
    margin: 0;
  position: relative;
  color:#fff;
  padding-top: 36px;
  /* el gradiente se aplicará al pseudo-elemento de ancho completo */
  background: linear-gradient(90deg,#E05711,#EF7E25);
}
/* Pseudo-elemento que estira el fondo del footer a 100vw */
.footer::before,
.footer-bottom::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:0;
  bottom:0;
  width:100%;          /* ocupa todo el viewport */
  background: inherit;  /* usa el mismo fondo del elemento */
  z-index:-1;           /* detrás del contenido */
}

/* Grid interno */
.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap:28px;
  align-items:start;
}

.footer-logo{ height:30px; width:auto; display:block; margin-bottom:10px; }
.footer-desc{ margin:0; line-height:1.5; opacity:.95; }

.footer-col h4{
  margin:8px 0 10px;
  font-size:20px;        /* un toque más grande */
  letter-spacing:.2px;
}

.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin:6px 0; }
.footer-list a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.footer-list a:hover{ border-bottom-color:#fff; }

/* Redes “chips” */
.footer-social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;   /* círculo perfecto */
  background: rgba(255,255,255,.15);
  color:#fff; text-decoration:none; font-weight:700; font-size:13px;
  border:1px solid rgba(255,255,255,.25);
  transition: transform .15s, background .15s;
}
.soc:hover{ background: rgba(255,255,255,.28); transform: translateY(-2px); }

.bottom-inner{
  display:flex; justify-content:space-between; align-items:center;
   flex-wrap:wrap;margin-bottom: 0px;
}

/* Responsive */
@media (max-width: 1000px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-desc{ margin-bottom:10px; }
  .bottom-inner{ justify-content:center; text-align:center; }
}
/**whatsapp boton*/
.whatsapp-float {
  position: fixed;
  width: 10rem;
  height: 10rem;
  bottom: 4rem;
  right: 8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.12);
}

.whatsapp-float img {
  width: 100px; 
  height: 100px;
}
/**loader*/
/* Loader pantalla completa */
#loader {
  position: fixed;
  inset: 0;
  background-color: #ffffff; /* tu naranja */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Logo animado */
#loader img {
  width: 30px;
  animation: girar 1.5s linear infinite;
}

/* Animación */
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ocultar con efecto */
#loader.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* Desktop */
.menu-toggle{
  display: none;

}
/**media queris*/
 @media (max-width: 1023px){

  /* ===== HERO ===== */
  .hero{
    height: 90vh;
    min-height: 600px;
  }

  .hero-video{
    object-position: center;
  }
  .boddys{
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* CONTROLA EL ESPACIO AQUÍ */
  }
  .boddys h1 {
  font-size:  6rem; /* más real para mobile */
  margin: 0;
  text-align: center;
  line-height: 1.1;
  }
  .boddys p{
  font-size: 1.8rem;
  margin: 0;
  text-align: center;
  }
  .booton__one{
  width: 90%;
  margin: 0;
  }
    .brand img{
    margin-left: 1rem;
  }
 .about-inner{
  max-width: 90%;
  margin-top: 15rem;
 }
 .container .marquee{
  max-width: 90%;
 }
   .tarjeta-info{
    width: 85%;
    padding: 2.5rem;
    bottom: -12rem;
  }
  .tarjeta-info h3{
    font-size: 2.2rem;
    text-align: center;
  }

  .tarjeta-info p{
    font-size: 1.6rem;
    text-align: center;
  }

  .datos{
    flex-direction: row;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .datos div h4{
    font-size: 2rem;
  }

  .datos div span{
    font-size: 1.4rem;
  }
}
/* Mobile */
@media (max-width: 1000px){
  .menu-toggle{
    display: block;
    max-width: 45px;
  }
 .widhtwhats{
  width: 10%;
  height: 10%;
 }
  .main-nav{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    display: none;
  }

  .main-nav.active{
    display: block;
  }

  .main-nav ul{
    flex-direction: column;
  }
    .beneficios{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .beneficios .beneficio:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 320px;
  }
  /* ===== UBICACIÓN (SOLO ESCALA) ===== */
  .ubi-grid{
    width: 100%;
    transform: scale(0.9);
  }

  .ubi-1 iframe{
    height: 220px;
  }

  /* ===== FOOTER ===== */
  .footer{
    text-align: center;
  }

  .footer-social{
    justify-content: center;
  }


  /* Botón sigue SOBRE el video */
  .btn-hero,
  .btn-cotiza{
    position: relative;
    margin: 2rem 0 0 0;
  }
  /* ===== TARJETA INFO (MISMA LÓGICA DESKTOP, MÁS CHICA) ===== */
  /* ===== BENEFICIOS ===== */
  .beneficios{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .beneficios .beneficio:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 320px;
  }
  /* ===== UBICACIÓN (SOLO ESCALA) ===== */
  .ubi-grid{
    width: 100%;
    transform: scale(0.9);
  }

  .ubi-1 iframe{
    height: 220px;
  }

  /* ===== FOOTER ===== */
  .footer{
    text-align: center;
  }

  .footer-social{
    justify-content: center;
  }
}
@media (max-width: 1065px)
  {
    .hero-content h1{
      font-size: 9rem;
    }
    .menu-toggle img{
    width: 75px;
    }
    .footer-brand{
      width: 100%;
    }
    .footer-brand img{
      display: flex;
      justify-content: center;
      width: 70%;
      height: 100%;
      margin: auto;
      
    }
  }
@media (max-width: 520px){
      .footer-brand img{
      display: flex;
      justify-content: center;
      width: 70%;
      height: 100%; }
 }
@media (max-width: 520px){
  .hero-content h1{
    font-size: 6.5rem;
  }
  .menu-toggle img{
    width: 6rem;
  }
  .formulario{
    width: 95%;
  }
}
@media (max-width:420px){
  .hero-content h1{
    font-size: 5.5rem;
  } }
@media (max-width: 370px){
  .hero-content h1{
    font-size: 4.1rem;
  }
    .menu-toggle img{
    width: 10rem;
  }
  .footer-brand img{
    width: 60%;
    margin: auto;
   }
  
}
@media (max-width: 768px){
  .whatsapp-float{
    width: 60px;
    height: 60px;
    right: 16px;
    bottom: 16px;
  }
@media (max-width: 560px){
  .footer-brand img{
    width: 0%;
    margin: auto;
   }


 }
  .whatsapp-float img{
    width: 60px;
    height: 60px;
  }
    .footer-brand img{
    width: 70%;
    margin: auto;
   }
}
@media (max-width: 520px){

  /* Caja del formulario */
  .formulario{
    width: 90%;
    padding: 2rem;
    border-radius: 16px;
    margin: auto;
  }

  /* Título */
  .formulario legend{
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  /* Campos */
  .campo label{
    font-size: 1.4rem;
  }

  .input-text{
    font-size: 1.4rem;
    padding: 1.2rem;
  }

  .campo textarea{
    height: 14rem;
  }

  /* Botón */
  .alinear-derecha{
    justify-content: center;
  }

  .w-100{
    width: 100%;
    padding: 1.2rem;
    font-size: 1.6rem;
    border-radius: 25px;
  }
}
@media (max-width: 310px){
  .tarjeta-info{
    height: 40%;
  }
  .counter span{
    font-size: 0.3rem;
  }
}
@media (max-width: 1112px) {
  .ubi-grid {
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(30, 5px);
  }

  .ubi-3 {
    grid-column: 1 / 20;
    grid-row: 10/25;
  }

  .ubi-2 {
    grid-column: 14/ 31;
    grid-row: 1 / 19;
  }

  .ubi-1 {
    grid-column: 19/30;
    grid-row: 17 / 31;
  }
}
@media (max-width: 920px){
  .ubi-text h3 {
  font-size: 3rem;
  }
  .ubi-3 p {
  font-size: 1.5rem;

}
}
@media (max-width: 648px){
  .ubi-text h3 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  }
  .ubi-3 p {
  font-size: 1.2rem;

}
}
@media (max-width: 390px){
  .hero-content h1{
    font-size: 4rem;
  }
}
@media (max-width: 450px){
  .ubi-grid {
    display: flex;
    flex-direction: column;
}
}

body{
  position: relative;
}
.flex--form {
  position: relative;
}


.mensaje-flotante {
  position: absolute;
  top: 300px;   /* más cerca */
  left: 50%;
  transform: translateX(-50%);
  background: #09b431;
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
  text-align: center;
}

.mensaje-flotante.mostrar {
  opacity: 1;
}

.mensaje-flotante.error {
  background: rgb(255, 0, 0);
}
@media(max-width:520px){
  .mensaje-flotante {
  position: absolute;
  top: 200px;   /* más cerca */
}
@media(max-width:368px){
  .mensaje-flotante {
  position: absolute;
  top: 150px;   /* más cerca */
}}
@media(max-width:362px){
    .beneficios{
    grid-template-columns: 1fr;
    gap: 1.5rem;
    }
  }
}
/* =========================
   H1 RESPONSIVE (limpio)
   Desktop / Laptop / Tablet / Cel / Cel pequeño
   ========================= */

h1{
  font-size: clamp(3.2rem, 5vw + 1rem, 8.5rem);
  line-height: 1.05;
  text-align: start;
  margin: clamp(1.2rem, 2vw, 3rem) auto;
  padding: 0 1.2rem;
  word-break: break-word;     /* por si hay palabras largas */
  overflow-wrap: anywhere;
}

/* Desktop grande */
@media (min-width: 1400px){
  h1{
    font-size: 9rem;
  }
}

/* Laptop / desktop normal */
@media (max-width: 1200px){
  h1{
    font-size: 7rem;
  }
}

/* Tablet / iPad */
@media (max-width: 768px){
  h1{
    font-size: 4.8rem;
    margin: 1.6rem auto;
  }
}

/* Celular */
@media (max-width: 480px){
  h1{
    font-size: 3.6rem;
    margin: 1.2rem auto;
  }
}

/* Celular pequeño */
@media (max-width: 360px){
  h1{
    font-size: 2rem;
  }
}
/* =========================
   H2 RESPONSIVE GLOBAL
   ========================= */

h2{
  font-size: clamp(2.4rem, 2vw + 1.5rem, 5rem);
  line-height: 1.2;
  margin: clamp(2rem, 4vw, 4rem) auto;
  text-align: center;
  padding: 0 1rem;
}
/* ===== Redes Sociales Mejoradas ===== */
.footer-social{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.soc{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}

/* ICONO */
.soc img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* los vuelve blancos si son negros */
  transition: transform 0.25s ease;
}

/* Hover elegante */
.soc:hover{
  background: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.soc:hover img{
  filter: none; /* muestra su color original */
  transform: scale(1.1);
}
#formulario {
  scroll-margin-top: 350px;
}
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: white;
  border-bottom: 1px solid #ddd;
  z-index: 9999;
  display: flex;
  align-items: center;
}
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

main{
  margin-top: 160px; /* espacio para el header */
}
/* ===== FIX 391px - 420px ===== */
@media (min-width: 391px) and (max-width: 420px){

  .hero{
    height: 95vh;
  }

  .tarjeta-info{
    bottom: -16rem; /* la bajamos más */
  }

  .booton__one{
    margin-top: 2rem;
    z-index: 5; /* aseguramos que quede encima */
    position: relative;
  }

}
/* ===== FIX 1028px - 1110px ===== */
@media (min-width: 1028px) and (max-width: 1110px){

  .about-inner{
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem; /* espacio lateral */
  }

}
.about-inner {
  margin-top: 30rem;
  max-width: 110rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
@media (hover: hover) and (pointer: fine) {
  
  .boton:hover {
    transform: scale(1.05);
  }

  .proyecto:hover img {
    transform: scale(1.15);
  }

  .card:hover {
    background-color: var(--primario);
  }

}
/* Quitar borde azul móvil */
a, button, input, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Quitar borde negro / azul de focus */
a:focus,
a:active,
button:focus,
button:active,
input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}