/* ====== VARIABLES ====== */
:root{
  --brand-red:#9f2222;
  --brand-yellow:#ffcc00;
  --brand-blue:#9f2222;
  --bg-dark:#2b2d2f;
  --text:#e6f6fb;
  --container-max:1200px;
  --side-padding:16px;
}

@font-face {
  font-family: 'Vashil';
  src: url('./img/fonts/VASHIL.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Aplicar a los títulos */
h1, h2, h3 {
  font-family: 'Vashil', sans-serif;
}

/* ====== RESET Y BASE ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Alfons, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#333;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--side-padding);
  box-sizing:border-box;
}

/* PRELOADER */
#preloader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--bg-dark); z-index:99999; transition:opacity .4s;
}
#preloader img{width:140px; animation:pulse 1.4s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* SOCIAL LEFT */
.social-left{position:fixed; left:12px; top:40%; display:flex; flex-direction:column; gap:10px; z-index:999}
.social-left a img{width:36px; filter:grayscale(1) opacity(.9)}

/* WHATSAPP BTN */
#whatsapp-btn{
  position:fixed; right:18px; bottom:18px; z-index:999; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--brand-green, #25d366);
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
#whatsapp-btn img{width:26px}

/* HEADER */
.main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 900;
  width: 100%;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 12px var(--side-padding);
  box-sizing: border-box;
}

.logo img {
  height: 48px;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
}

/* BOTÓN HAMBURGUESA */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 28px;
  color: #333;
  cursor: pointer;
}

/* HERO */
.hero-section{position:relative; height:92vh; margin-top:78px}
.hero-swiper{height:100%}
.swiper-slide{position:relative; overflow:hidden}
.hero-video{width:100%; height:100%; object-fit:cover; display:block}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.55) 100%)}
.hero-text{position:absolute; left:8%; top:50%; transform:translateY(-50%); color:white; max-width:640px}
.hero-text h1{font-size:56px; margin:0 0 12px; font-family:Vashil; color:var(--brand-yellow)}
.hero-text p{max-width:540px; margin:0 0 18px; color:rgba(255,255,255,0.9)}
.btn{display:inline-block; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:700}
.btn-red{background:var(--brand-red); color:#fff}
.btn-outline{border:2px solid rgba(0,0,0,.1); background:transparent; padding:10px 16px; color:#333}

/* SWIPER CONTROLS */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  color: var(--brand-red);
}
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  color: var(--brand-yellow);
}

/* QUIENES SOMOS */
.quienes-section{padding:70px 0; background:transparent}
.section-title{font-family:Vashil; color:#9f2222; font-size:44px; margin:6px 0 24px}
.quienes-grid{display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:start}
.chip{display:inline-block; background:#6b7176; padding:18px 30px; border-radius:50px; color:var(--brand-yellow); font-weight:800; margin-bottom:18px}
.lead{color:#3f6f80; line-height:1.7}
.servicios-list{list-style:none;padding:0;margin:16px 0 0;color:#2f636f}
.servicios-list li{margin:8px 0; padding-left:22px; position:relative}
.servicios-list li::before{content:"✔"; position:absolute; left:0; color:#5eb8d6}

/* FORM */
.quienes-right{background:rgba(43,47,49,.06); padding:18px; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.06)}
.form-cotiza label{display:block; font-size:14px; margin-bottom:8px; color:#2c7e91}
.form-cotiza input, .form-cotiza textarea{width:100%; padding:10px; border-radius:6px; border:1px solid #ddd; margin-top:6px}

/* VALORES */
.valores-section{padding:50px 0; background:#fff}
.valores-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:18px}
.valor-card{background:#f6f6f6; padding:20px; border-radius:18px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.06)}
.valor-card img{width:90px; height:auto}
.valor-card h4{margin:12px 0 6px; color:#444}

/* SERVICIOS */
.servicios-section{padding:48px 0}
.servicios-wrap{display:flex; gap:20px}
.servicios-tabs{width:320px; display:flex; flex-direction:column; gap:12px; align-self:flex-start}
.tab{padding:10px 16px; border-radius:18px; background:#dbeff6; border:4px solid transparent; font-weight:700; cursor:pointer}
.tab.active{background:var(--brand-blue); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12)}
.servicios-content{flex:1; display:flex; gap:20px; align-items:flex-start}
.image-card{position:relative; width:45%; min-height:260px; border-radius:12px; overflow:hidden; background:#efefef}
.image-card img{width:100%; height:100%; object-fit:cover}
.image-cta{position:absolute; right:12px; bottom:12px; background:rgba(43,47,49,.7); color:white; padding:18px; width:calc(100% - 24px); border-radius:10px}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:55%}
.gallery-grid img{width:100%; height:120px; object-fit:cover; border-radius:6px}

/* CLIENTES */
.clientes-section{padding:48px 0; background:#fff}
.clients-swiper{padding:24px 0}
.clients-swiper .swiper-slide{display:flex; align-items:center; justify-content:center}
.clients-swiper img{width:140px; height:140px; object-fit:contain; border-radius:12px; background:#fff; padding:12px}

/* CONTACTO */
.contacto-section{padding:60px 0}
.contacto-grid{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start}
.map-wrap iframe{width:100%; height:380px; border:0; border-radius:8px}
.team-img{width:100%; max-width:260px}
.contact-box{background:#f3f3f3; padding:20px; border-radius:20px; margin-top:30px}
.contact-box h3{margin-top:0}

/* FOOTER */
.site-footer{background:linear-gradient(0deg,#2b2d2f 0%, rgba(43,47,49,0.9) 100%); color:#cfeefb; padding:36px 0}
.footer-grid{display:flex; gap:30px; justify-content:space-between; align-items:flex-start}
.footer-col h4{color:var(--brand-yellow)}
.footer-links{list-style:none; padding:0}
.footer-links li{margin:8px 0}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-top:1px solid rgba(255,255,255,0.04)}
.footer-bottom img{height:40px}
.site-footer a {color:#cfeefb; text-decoration:none}
.site-footer a:hover {color:var(--brand-yellow)}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px) {
  /* menú hamburguesa */
  .nav ul {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 20px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .nav ul.active {display:flex}
  .nav a {display:block; padding:12px 0; font-size:18px; color:var(--brand-red)}
  .menu-toggle {display:block}

  /* grids */
  .quienes-grid,
  .contacto-grid {
    grid-template-columns: 1fr;
  }
  .servicios-wrap {
    flex-direction: column;
  }
  .gallery-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 768px) {
  /* hero */
  .hero-section {
    height: auto;
    min-height: 420px;
    margin-top: 68px;
  }
  .hero-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    text-align: center;
    margin: 40px auto;
    padding: 0 16px;
  }
  .hero-text h1 {
    font-size: 34px;
  }
  .hero-text p {
    font-size: 15px;
  }

  /* valores */
  .valores-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* footer */
  .footer-grid {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* hero */
  .hero-text h1 {font-size: 26px}
  .hero-text p {font-size: 14px}

  /* valores */
  .valores-grid {
    grid-template-columns: 1fr;
  }

  /* gallery */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* clientes */
  .clients-swiper img {
    width: 90px;
    height: 90px;
  }

  /* header */
  .logo img {
    height: 36px;
  }

  /* ocultar social en móviles */
  .social-left {display:none}
}