/* ================================
   Variables y ajustes globales
===================================*/
:root{
  --nav-h: 96px;     /* header desktop */
  --hero-min: 460px; /* alto mínimo del hero */
  --hero-max: 840px; /* alto máximo del hero */
}
@media (max-width: 768px){
  :root{ --nav-h: 72px; --hero-min: 420px; --hero-max: 760px; }
}

/* Que el header fijo no tape contenido */
body{ padding-top: var(--nav-h); }

/* Anclas (#nosotros, etc.) que no queden ocultas */
[id]{ scroll-margin-top: var(--nav-h); }

/* Reset básico */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  background-color:#1e2b45;
  font-family:'Segoe UI', sans-serif;
  min-height:100vh;
  position:relative;
}

/* Fondo con íconos */
.background-pattern{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
}
.clip-icon{
  position:absolute; width:60px; height:60px; opacity:.08;
  transition:opacity 2s ease-in-out; pointer-events:none;
}

/* ================================
   Header / Navbar
===================================*/
.navbar{
  position:fixed; inset-block-start:0; inset-inline:0;
  z-index:1000; background:#1e2b45;
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 40px;
}
.logo img{ height:80px; }
.menu{ list-style:none; display:flex; gap:25px; }
.menu li a{
  color:#2196f3; text-decoration:none; font-weight:500; transition:color .3s;
}
.menu li a:hover{ color:#1265a9; }
.menu-toggle{ display:none; font-size:2rem; color:#2196f3; cursor:pointer; }

/* ================================
   HOME / Slider
   – Altura fluida con svh y clamp
   – Imágenes cubren sin deformar
===================================*/
.slider-section{
  position:relative; overflow:hidden; margin-bottom:40px;
  /* Alto del hero = pantalla útil sin header, limitado por clamp */
  height: clamp(var(--hero-min), calc(100svh - var(--nav-h)), var(--hero-max));
}
.slider-container{ position:relative; inline-size:100%; block-size:100%; }

.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease-in-out;
}
.slide.active{ opacity:1; z-index:2; }

.slide img{
  inline-size:100%; block-size:100%;
  object-fit:cover;           /* llena todo sin deformar */
  object-position:center right; /* foco lado derecho en desktop */
}

/* filtro azul encima de cada slide */
.slide::before{
  content:""; position:absolute; inset:0;
  background:rgba(10,25,100,.4); z-index:1;
}

/* Texto del slide */
.slide-text{
  position:absolute; z-index:3; color:#fff;
  inset-block-start:60%; inset-inline-start:10%;
  transform:translateY(-60%);
  max-inline-size:900px;
}
.slide-text h2{ font-size:1.8rem; margin-bottom:.5rem; }
.slide-text h1{ font-size:3rem; font-weight:900; }
.contenedor-boton{ margin-top:25px; text-align:center; }
.btn-banner{
  background:#2196f3; color:#fff; padding:12px 28px; border-radius:6px;
  font-weight:700; text-decoration:none; transition:background-color .3s; display:inline-block;
}
.btn-banner:hover{ background:#0d8ae0; }

/* Flechas */
.slider-nav{
  position:absolute; inset-block-start:50%; inset-inline:0;
  z-index:5; display:flex; justify-content:space-between; transform:translateY(-50%);
}
.slider-nav span{
  background:rgba(0,0,0,.5); color:#fff; font-size:2rem; padding:.5rem 1rem; cursor:pointer;
}

/* ================================
   NOSOTROS
===================================*/
#nosotros{ margin-top:90px; }
.contenedor-nosotros{
  max-width:1100px; margin:auto;
  display:flex; flex-direction:row; align-items:center; gap:40px; flex-wrap:wrap;
  padding-inline:20px; /* respiración lateral */
}
.nosotros .texto{ flex:1 1 500px; }
.nosotros h2{ font-size:2.4rem; margin-bottom:20px; color:#2196f3; }
.nosotros p{ font-size:1.1rem; color:#e0e6ed; line-height:1.7; margin-bottom:15px; }
.nosotros .imagen{ flex:1 1 400px; text-align:center; }
.nosotros .imagen img{ width:100%; max-width:450px; margin-left:40px; }
.verbo-azul{ color:#2196f3; font-weight:700; text-transform:uppercase; }

/* ================================
   SERVICIOS
===================================*/
.servicios{ padding:80px 20px; text-align:center; color:#e0e6ed; }
.contenedor-servicios{ max-width:1100px; margin:auto; }
.servicios .intro{
  font-size:1rem; text-transform:uppercase; color:#2196f3; margin-bottom:10px; font-weight:600; letter-spacing:1px;
}
.servicios h2{ font-size:2.4rem; margin-bottom:40px; }
.grid-servicios{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; justify-content:center;
}
.servicio{
  position:relative; border-radius:12px; overflow:hidden; color:#fff;
  padding:30px 25px; background:#2e3b50; background-size:cover; background-position:center;
  box-shadow:0 0 20px rgba(0,0,0,.2); backdrop-filter:blur(2px);
  transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.servicio:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 25px rgba(0,0,0,.35);
  background-color:#3b4a66;
}
.servicio h3{
  font-size:1.4rem; margin-bottom:20px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.3); text-transform:uppercase;
}
.servicio ul{ list-style:none; padding:0; text-align:left; }
.servicio ul li{
  display:flex; align-items:center; gap:10px; font-size:1rem; margin-bottom:10px; line-height:1.6; color:#f0f4f8;
}
.servicio ul li i{ width:20px; height:20px; color:#4dd0e1; }
.icono-servicio{ display:flex; justify-content:center; align-items:center; margin-bottom:15px; }

/* ================================
   CLIENTES
===================================*/
.clientes{ padding:80px 20px; text-align:center; }
.contenedor-clientes{ max-width:1100px; margin:auto; }
.clientes h2{ font-size:2.4rem; margin-bottom:10px; color:#2196f3; }
.clientes .subtitulo{ font-size:1.1rem; color:#e0e6ed; margin-bottom:40px; }
.grid-clientes{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:30px; align-items:center; justify-items:center;
}
.grid-clientes img{
  max-height:80px; max-width:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.7; transition:all .3s ease;
}
.grid-clientes img:hover{ filter:none; opacity:1; transform:scale(1.5); }

/* ================================
   CONTACTO
===================================*/
.contacto{ padding:80px 20px; text-align:center; }
.contenedor-contacto{ max-width:600px; margin:auto; }
.contacto h2{ font-size:2.4rem; margin-bottom:10px; color:#2196f3; }
.contacto .subtitulo{ font-size:1.1rem; color:#e0e6ed; margin-bottom:40px; }
form input, form textarea{
  background:#25314a; color:#fff; width:100%; padding:15px; margin-bottom:20px;
  border:1px solid #3b4c66; border-radius:8px; font-size:1rem; font-family:'Segoe UI', sans-serif;
}
form input::placeholder, form textarea::placeholder{ color:#9bb3cc; }
form button{
  background:#2196f3; color:#e0e6ed; border:none; padding:14px 28px; border-radius:6px;
  font-size:1rem; cursor:pointer; transition:background .3s;
}
form button:hover{ background:#0d8ae0; }

/* ================================
   FOOTER
===================================*/
.footer{ color:#e0e6ed; padding:60px 20px 20px; font-size:.95rem; }
.footer-contenido{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
  max-width:1100px; margin:auto; border-bottom:1px solid #1e2a40; padding-bottom:40px;
}
.footer-logo img{ height:150px; margin-bottom:10px; }
.footer-links, .footer-contacto{ min-width:200px; }
.footer-links h4, .footer-contacto h4{ color:#2196f3; margin-bottom:10px; }
.footer-contacto p{ margin-bottom:10px; }
.footer-links ul{ list-style:none; padding:0; }
.footer-links li{ margin-bottom:6px; }
.footer-links a{ text-decoration:none; color:#e0e6ed; transition:color .3s; }
.footer-links a:hover{ color:#2196f3; }
.footer-copy{ text-align:center; color:#e0e6ed; margin-top:30px; font-size:.9rem; }
.icon-footer{ width:18px; height:18px; vertical-align:middle; margin-right:8px; stroke:#2196f3; }

/* WhatsApp */
.btn-whatsapp{
  position:fixed; bottom:20px; right:20px; z-index:999;
  background:#25D366; padding:10px; border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,.3); transition:transform .3s;
}
.btn-whatsapp:hover{ transform:scale(1.1); }
.btn-whatsapp img{ height:32px; display:block; }

/* ================================
   RESPONSIVE (Tablets y móviles)
===================================*/
@media (max-width: 992px){
  .grid-servicios{ grid-template-columns:1fr; } /* 1 columna en tablet angosta */
}

@media (max-width: 768px){
  /* Navbar */
  .navbar{ flex-direction:column; gap:10px; padding:10px 20px; }
  .logo img{ height:60px; }
  .menu{ display:none; flex-direction:column; gap:10px; width:100%; text-align:center; padding-top:10px; }
  .menu.show{ display:flex; }
  .menu-toggle{ display:block; }

  /* Hero: centrar foco e interfaz más compacta */
  .slide img{ object-position:center; }
  .slide-text{
    inset-block-start:55%; inset-inline-start:50%;
    transform:translate(-50%, -55%); text-align:center;
    max-inline-size:90vw; padding:0 12px;
  }
  .slide-text h2{ font-size:clamp(1.2rem, 4.5vw, 1.6rem); margin-bottom:.35rem; }
  .slider-nav span{ font-size:1.4rem; padding:.35rem .6rem; }

  /* Nosotros */
  .contenedor-nosotros{ flex-direction:column; }
  .nosotros h2{ font-size:1.8rem; text-align:center; }
  .nosotros p{ font-size:1rem; text-align:justify; }
  .nosotros .imagen img{ margin-left:0; max-width:320px; width:100%; height:auto; }
}

/* ================================
   Utilidades anti-scroll lateral
===================================*/
html, body{ overflow-x:hidden; }
.grid > *, .flex > *{ min-width:0; }