:root{
  --azul:#1e6dff;
  --azul-oscuro:#0d2a66;
  --rojo:#d62828;
  --negro:#111111;
  --gris:#f4f7fb;
  --blanco:#ffffff;
  --dorado:#f2b94b;
  --verde-whatsapp:#25d366;
  --texto:#3f4a5a;
  --sombra:0 8px 22px rgba(0,0,0,.10);
  --radio:16px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--blanco);
  color:var(--negro);
}

a{
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

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

/* TOPBAR */
.topbar{
  background:linear-gradient(90deg,var(--azul-oscuro),var(--negro));
  color:var(--blanco);
  font-size:14px;
}

.topbar-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}

.topbar-left,
.topbar-right{
  display:flex;
  gap:18px;
  align-items:center;
}

.topbar-right a{
  color:var(--blanco);
  font-size:16px;
}

/* HEADER */
.header{
  background:rgba(255,255,255,.97);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 3px 14px rgba(0,0,0,.08);
}

.header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:88px;
}

.logo img{
  height:68px;
  width:auto;
  object-fit:contain;
}

.nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:26px;
}

.nav ul li{
  position:relative;
}

.nav ul li a{
  color:var(--negro);
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  transition:.3s;
}

.nav ul li a:hover{
  color:var(--azul);
}

/* SUBMENU */
.submenu{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:var(--blanco);
  border-radius:12px;
  box-shadow:var(--sombra);
  padding:10px 0;
  display:none;
}

.submenu a{
  display:block;
  padding:12px 18px;
  color:#333 !important;
  font-size:14px !important;
  font-weight:600 !important;
  text-transform:none !important;
}

.submenu a:hover{
  background:#eef4ff;
  color:var(--azul) !important;
}

.dropdown:hover .submenu{
  display:block;
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:24px;
  color:var(--negro);
  cursor:pointer;
}

/* HERO */
.hero{
  position:relative;
  height:90vh;
  min-height:520px;
  overflow:hidden;
}

.hero-slider{
  position:relative;
  width:100%;
  height:100%;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:contain; /* evita que se corten */
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0b2f57;
  opacity:0;
  visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease;
  display:flex;
  align-items:center;
}

.hero-slide.active{
  opacity:1;
  visibility:visible;
  z-index:2;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,18,45,.72) 0%, rgba(17,17,17,.45) 50%, rgba(214,40,40,.12) 100%);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
}

.hero-text{
  max-width:700px;
  color:var(--blanco);
}

.hero-tag{
  display:inline-block;
  background:linear-gradient(90deg,var(--rojo),var(--azul));
  color:var(--blanco);
  padding:8px 16px;
  border-radius:30px;
  font-size:14px;
  font-weight:700;
  margin-bottom:18px;
}

.hero-text h1{
  font-size:52px;
  line-height:1.1;
  margin-bottom:20px;
  color:var(--blanco);
}

.hero-text p{
  font-size:18px;
  line-height:1.6;
  margin-bottom:28px;
  color:#f2f6fb;
  max-width:620px;
}

.hero-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

/* BOTONES */
.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  padding:14px 28px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  transition:.3s;
}

.btn-primary{
  background:linear-gradient(90deg,var(--azul),var(--azul-oscuro));
  color:var(--blanco);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(30,109,255,.25);
}

.btn-secondary{
  background:var(--blanco);
  color:var(--negro);
}

.btn-secondary:hover{
  background:#ececec;
}

/* SECCIONES */
section{
  padding:85px 0;
}

.section-header{
  max-width:820px;
  margin-bottom:45px;
}

.section-header.center{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.section-mini{
  display:inline-block;
  color:var(--rojo);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:10px;
  letter-spacing:1px;
}

.section-header h2{
  font-size:38px;
  line-height:1.2;
  margin-bottom:16px;
  color:var(--negro);
}

.section-header p{
  font-size:17px;
  line-height:1.8;
  color:var(--texto);
}

/* ABOUT */
.about{
  background:var(--blanco);
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  align-items:center;
}

.about-image img{
  width:100%;
  height:430px;
  object-fit:cover;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}

.about-text h3{
  font-size:28px;
  margin-bottom:18px;
  color:var(--azul-oscuro);
}

.about-text p{
  font-size:16px;
  line-height:1.9;
  color:var(--texto);
  margin-bottom:16px;
}

.about-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:20px;
}

.about-points div{
  background:#f4f8ff;
  border-left:4px solid var(--azul);
  border-radius:10px;
  padding:14px 16px;
  font-weight:700;
  color:#123;
}

.about-points i{
  color:var(--rojo);
  margin-right:8px;
}

/* AREAS */
.areas{
  background:var(--gris);
}

.areas-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.area-card{
  background:var(--blanco);
  border-radius:var(--radio);
  padding:30px 24px;
  box-shadow:var(--sombra);
  transition:.3s;
}

.area-card:hover{
  transform:translateY(-6px);
}

.area-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--rojo),var(--azul));
  color:var(--blanco);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
}

.area-card h3{
  font-size:21px;
  margin-bottom:12px;
  color:var(--negro);
}

.area-card p{
  font-size:15px;
  line-height:1.8;
  color:var(--texto);
}

/* PRODUCTS */
.products{
  background:var(--blanco);
}

.catalog-wrapper{
  position:relative;
}

.catalog-wrapper.catalog-open{
  background:rgba(13,42,102,.04);
  padding:20px;
  border-radius:20px;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.product-card{
  background:#f8fafb;
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  transition:.3s;
}

.product-card:hover{
  transform:translateY(-6px);
}

.product-card img{
  width:100%;
  height:240px;
  object-fit:cover;
}

.product-info{
  padding:18px;
}

.product-info h3{
  font-size:19px;
  margin-bottom:8px;
  color:var(--azul-oscuro);
}

.product-info p{
  color:var(--texto);
  font-size:14px;
  line-height:1.6;
}

.extra-producto{
  display:none;
}

.catalog-wrapper.catalog-open .extra-producto{
  display:block;
}

.products-button-wrap{
  text-align:center;
  margin-top:34px;
}

/* FEATURES */
.features{
  background:linear-gradient(90deg,var(--azul-oscuro),var(--negro));
  color:var(--blanco);
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.feature-box{
  text-align:center;
  padding:24px;
}

.feature-box i{
  font-size:38px;
  color:var(--dorado);
  margin-bottom:16px;
}

.feature-box h3{
  font-size:21px;
  margin-bottom:10px;
}

.feature-box p{
  color:#d3d7dc;
  line-height:1.8;
  font-size:15px;
}

/* BRANDS */
.brands{
  background:var(--gris);
}

.brand-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.brand-item{
  background:var(--blanco);
  border-radius:14px;
  padding:28px;
  text-align:center;
  box-shadow:var(--sombra);
}

.brand-item img{
  max-width:100%;
  height:70px;
  object-fit:contain;
  margin:auto;
}

/* CONTACT */
.contact{
  background:var(--blanco);
}

.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:28px;
  margin-bottom:32px;
}

.map-box,
.contact-info,
.formulario-contacto{
  background:#f8fafb;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}

.map-box{
  overflow:hidden;
}

.map-box iframe{
  width:100%;
  min-height:380px;
  border:0;
}

.contact-info{
  padding:28px;
}

.contact-info h3{
  font-size:28px;
  color:var(--azul-oscuro);
  margin-bottom:20px;
}

.contact-info p{
  font-size:16px;
  color:var(--texto);
  line-height:1.8;
  margin-bottom:12px;
}

.contact-info i{
  color:var(--rojo);
  margin-right:10px;
  width:22px;
}

.contact-social{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.social-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:10px;
  color:var(--blanco);
  font-weight:700;
}

.social-btn.facebook{
  background:#1877f2;
}

.social-btn.instagram{
  background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045);
}

.social-btn.whatsapp{
  background:var(--verde-whatsapp);
}

/* FORM */
.formulario-contacto{
  padding:32px;
}

.formulario-contacto h3{
  font-size:30px;
  margin-bottom:24px;
  color:var(--azul-oscuro);
  text-align:center;
}

.contact-form{
  width:100%;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.form-group{
  margin-bottom:18px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  color:var(--negro);
}

.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #d7dde4;
  border-radius:10px;
  padding:14px 15px;
  background:var(--blanco);
  font-size:15px;
  outline:none;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--azul);
}

.mensaje-form{
  padding:14px 18px;
  border-radius:10px;
  margin-bottom:18px;
  font-weight:700;
}

.mensaje-exito{
  background:#e9f7ee;
  color:#146c35;
  border:1px solid #bce2c7;
}

.mensaje-error{
  background:#fdeceb;
  color:#9d2f2f;
  border:1px solid #f3c2be;
}

/* WHATSAPP */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  width:66px;
  height:66px;
  background:var(--verde-whatsapp);
  color:var(--blanco);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:33px;
  z-index:1000;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  transition:.3s;
}

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

/* FOOTER */
.footer{
  background:linear-gradient(90deg,var(--negro),var(--azul-oscuro));
  color:var(--blanco);
  padding:26px 0;
}

.footer-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.footer-logo{
  height:60px;
  width:auto;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .areas-grid,
  .product-grid,
  .features-grid,
  .brand-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-text h1{
    font-size:42px;
  }
}

@media (max-width:860px){
  .topbar-content,
  .header-content,
  .footer-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .menu-toggle{
    display:block;
    align-self:flex-end;
    margin-top:-50px;
  }

  .nav{
    width:100%;
    display:none;
    padding-bottom:16px;
  }

  .nav.active{
    display:block;
  }

  .nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    width:100%;
  }

  .submenu{
    position:static;
    display:block;
    box-shadow:none;
    padding:10px 0 0 14px;
    min-width:auto;
    background:transparent;
  }

  .hero{
    height:75vh;
    min-height:460px;
  }

  .hero-text h1{
    font-size:34px;
  }

  .hero-text p{
    font-size:16px;
  }

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

@media (max-width:560px){
  .areas-grid,
  .product-grid,
  .features-grid,
  .brand-grid,
  .about-points{
    grid-template-columns:1fr;
  }

  .hero{
    height:500px;
  }

  .hero-text h1{
    font-size:28px;
  }

  .section-header h2{
    font-size:30px;
  }

  .topbar-left,
  .topbar-right,
  .contact-social{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

/* MODAL CATÁLOGO */
.catalog-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.catalog-modal.active{
  display:block;
}

.catalog-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

.catalog-modal-content{
  position:relative;
  width:92%;
  max-width:1280px;
  max-height:88vh;
  margin:4vh auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  overflow:hidden;
  z-index:2;
  animation:modalEntrada .25s ease;
}

@keyframes modalEntrada{
  from{
    opacity:0;
    transform:translateY(18px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.catalog-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  background:linear-gradient(90deg,var(--azul-oscuro),var(--azul));
  color:var(--blanco);
}

.catalog-modal-header h3{
  margin:0;
  font-size:26px;
}

.catalog-close{
  background:transparent;
  border:none;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

.catalog-modal-body{
  padding:24px;
  max-height:calc(88vh - 78px);
  overflow-y:auto;
  background:#f4f7fb;
}

.modal-product-grid{
  grid-template-columns:repeat(4,1fr);
}

body.modal-open{
  overflow:hidden;
}

@media (max-width:1100px){
  .modal-product-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:860px){
  .catalog-modal-content{
    width:95%;
    max-height:90vh;
    margin:3vh auto;
  }

  .modal-product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .catalog-modal-header h3{
    font-size:22px;
  }
}

@media (max-width:560px){
  .modal-product-grid{
    grid-template-columns:1fr;
  }

  .catalog-modal-body{
    padding:16px;
  }

  .catalog-modal-header{
    padding:14px 16px;
  }
}