*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* =========================
   VARIABLES
========================= */
:root{
  --color-primary:#0399d4;
  --color-secondary:#4ec738;
  --color-dark:#222;
  --color-gray:#f2f2f2;
  --color-white:#ffffff;


  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;

  --shadow-sm:0 4px 10px rgba(0,0,0,.15);
  --shadow-md:0 8px 18px rgba(0,0,0,.25);

  --t:.25s ease;

  --text-sm: clamp(14px,1vw,18px);
  --text: clamp(15px,1.3vw,20px);
  --text-lg: clamp(18px,2vw,28px);
  --h3: clamp(24px,3vw,42px);
  --h2: clamp(35px,5vw,96px);
  --hero: clamp(40px,5.5vw,160px);
}



/* =========================
   FONTS
========================= */
@font-face{font-family:"font1";src:url("../fonts/font1.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font2";src:url("../fonts/font2.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font3";src:url("../fonts/font3.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font4";src:url("../fonts/font4.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font5";src:url("../fonts/font5.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font6";src:url("../fonts/font6.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font7";src:url("../fonts/font7.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font8";src:url("../fonts/font8.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font9";src:url("../fonts/font9.ttf") format("truetype");font-display:swap;}


body{
  font-family:font1;
  color:#333;
  background:var(--color-white);

  /* Tamaño base fluido */
  font-size: var(--h2);
  line-height:1.6;
}

.container{
  width:100%;
  max-width:1200px;
  margin:auto;
}

html{
  scroll-behavior:smooth; /* opcional, scroll suave */
}

#delivery {
  scroll-margin-top:100px; /* altura del header */
}
#constellation {
  scroll-margin-top:100px; /* altura del header */
}
#meteor {
  scroll-margin-top:100px; /* altura del header */
}

/* ================= HEADER FIX ================= */

.header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  background-color: #001e50;
}

.header-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center; /* 🔥 clave */
  padding:8px 0; /* 🔥 más compacto */
 
}

/* LOGO */

.logo{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.logo strong{
  font-size: var(--h2);
  letter-spacing:.5px;
}

.logo span{
  font-size: var(--h2);
  color:#777;
}

/* NAV */

.nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.5vw,34px);
}

.nav a{
  text-decoration:none;
  color:#fff;
  font-size: var(--text-sm);
  font-weight:500;
  position:relative;
  transition:.3s;
  font-family: font2;
}

/* underline animado pro */

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#21b4c7;
  transition:.3s;
}

.nav a:hover::after{
  width:100%;
}

@media(max-width:900px){

  .nav{
    display:none; /* luego podemos hacer hamburguesa */
  }

}


/* ================= HERO ================= */

.hero{
  position:relative;
  background:url("../img/baner2.jpg") center/cover no-repeat;
  min-height:clamp(600px, 60vh, 650px);
  display:flex;
  align-items:center;
  padding: 3%;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(72, 72, 73, 0.719),
    rgba(12, 4, 82, 0.664)
   
  );
}

.hero-content{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:clamp(20px,4vw,60px);
  color:#fff;
}

.hero-text{
  max-width:600px;
}

.subtitle{
  font-size: var(--text);
  opacity:.9;
}

.hero h1{
  font-family: font4;
  font-size: var(--h1);
  font-weight:700;
  line-height:1.1;
  margin:clamp(10px,2vw,20px) 0;
}

.hero-desc{
  font-size: var(--text);
  margin-top:clamp(12px,2vw,24px);
  opacity:.9;
  font-family: font3;
}

/* ================= FORM ================= */

.form-box{
  background: rgba(14, 126, 201, 0.9);
  color:#fff;
  padding:28px;
  border-radius:12px;
  width:360px;
  height:480px; /* 🔥 reducido */

  display:flex;
  flex-direction:column;
}

.form-box form{
  display:flex;
  flex-direction:column;
  gap:14px; /* ✅ separación real entre inputs */
  height:100%;
}

.form-box h3{
  font-size: var(--text);
  margin-bottom:8px;
}

.form-box p{
   font-size: var(--text);
   margin-bottom: 4%;
}

.form-box input,
.form-box textarea{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:8px;
  font-size:var(--text-sm);
  font-family:font3;
  display:block;
}

.form-box textarea{
  height:100px;
  resize:none;
}

.form-box button{
  width:160px;
  padding:12px;
  background:var(--color-secondary);
  border:none;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:var(--text-sm);

  margin: auto auto 0 auto; /* 🔥 centrado horizontal + abajo */
}

/* ================= BUTTONS ================= */

.btn-primary,
.btn-secondary{
  display:inline-block;
  margin-top:clamp(12px,2vw,20px);
  padding:clamp(10px,1vw,14px) clamp(18px,2vw,26px);
  background:var(--color-primary);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-size: var(--text);
  font-family: font4;
  transition:.3s ease;
}

.btn-primary:hover,
.btn-secondary:hover{
  transform:translateY(-2px);
  opacity:.9;
}

/* ================= SERVICES ================= */

.services{
  padding:clamp(60px,8vw,120px) 0;
  display:flex;
  flex-direction:column; /* coloca todo vertical */
}

.service{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,60px);
  align-items:center;
  margin-bottom:clamp(60px,6vw,100px);
}

.service h2{
  font-size: var(--h3);
  font-family: font5;
  margin-bottom: 2%;
}

.service h3{
  font-size: var(--text-lg);
  font-family: font2;
}

.service p{
    font-size: var(--text-sm);
    font-family: font3;
}

.service img{
  width:100%;
  border-radius:14px;
  transition: transform 0.4s ease;
  align-self:flex-start; /* asegura que quede arriba */
}

/* efecto zoom */
.service:hover img{
  transform: scale(1.15);
}

.reverse{
  direction:rtl;
}

.reverse div{
  direction:ltr;
}


.service-specs{
    display:grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap:15px; /* espacio entre módulos */
    margin-top:15px;
}

.spec{
    background:#f5f5f5;
    padding:10px 15px;
    border-radius:8px;
    min-height:70px; /* controla altura */
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.spec span{
    display:block;
    font-size: var(--text-sm);
    color:#000;
    font-family: font2;
    margin-bottom: 10px;
}

.spec strong{
    font-size:14px;
    color:#333;
    font-family: font4;
}




/* ================= EXTRA ================= */

.extra{
  background:#e9e9e9;
  padding:clamp(60px,8vw,120px) 0;
}

.extra-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,60px);
  align-items:center;
}

.extra h2{
   font-size: var(--text);
  margin-bottom:clamp(12px,2vw,20px);
}

.extra p{
  font-size: var(--text-sm);
}

/* ================= FOOTER ================= */

.footer{
  background:#001e50;
  padding:clamp(40px,6vw,80px) 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,40px);
}

.footer h2{
    font-size: var(--text);
}

.footer p{
   font-size: var(--text);
   color: #fff;
   line-height: 200%;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

  .hero-content{
    flex-direction:column;
  }

  .service{
    grid-template-columns:1fr;
    padding: 7%;
  }

  .reverse{
    direction:ltr;
  }

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

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

@media(max-width:600px){

  nav{
    display:none;
  }

  .hero{
    padding:8%;
  }
}