@charset "utf-8";

/* ===== Fuentes Personalizadas ===== */
@font-face {
  font-family: 'Central Sans';
  src: url('../fonts/CentralSans-Regular.woff2') format('woff2'),
       url('../fonts/CentralSans-Regular.woff') format('woff'),
       url('../fonts/CentralSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Central Sans';
  src: url('../fonts/CentralSans-Bold.woff2') format('woff2'),
       url('../fonts/CentralSans-Bold.woff') format('woff'),
       url('../fonts/CentralSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ===== Paleta ADX ===== */
:root{
  --azul-oscuro:#022859;
  --azul-profundo:#021933;
  --azul-medio:#024059;
  --azul-claro:#2A84A0;
  --dorado:#D99B66;
  --gris-oscuro:#486872;
  --gris-claro:#B0CDD9;
  --blanco:#fff;

  /* Altura del header fijo */
  --header-h: 88px;
}

/* ===== Reset / Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Central Sans', Arial, sans-serif;
  color:var(--azul-oscuro);
  background:var(--blanco);
  line-height:1.6;
  padding-top: var(--header-h);
}
img{max-width:100%;display:block}
section{scroll-margin-top: var(--header-h)}

.content{max-width:1150px;margin:auto;padding:100px 20px}
h2{font-size:clamp(26px,3.4vw,38px);color:var(--azul-profundo);text-align:center;margin-bottom:16px}

/* ===== Botones ===== */
.btn{
  background:var(--dorado); color:var(--azul-profundo);
  display:inline-block; padding:12px 20px; border-radius:10px;
  font-weight:800; text-decoration:none;
  transition:transform .08s, box-shadow .2s, opacity .2s;
  box-shadow:0 8px 22px rgba(2,24,51,.12);
}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}

/* ===== Header ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:rgba(2,24,51,.92);
  backdrop-filter:saturate(120%) blur(4px);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.site-header .brand img{height:80px}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
  align-items: center;
}
.main-nav a{
  color:#fff;text-decoration:none;font-weight:700;
  opacity:.95;letter-spacing:.2px;
  padding:8px 6px;border-radius:8px;
  transition:opacity .2s,color .2s;
}
.main-nav a:hover{opacity:1;color:var(--dorado)}
.main-nav .btn--sm{
  padding:10px 14px;background:var(--dorado);
  color:var(--azul-profundo);border-radius:10px;
}

/* ===== Tarjetas ===== */
.card{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:20px;box-shadow:0 12px 28px rgba(2,24,51,.10);
  padding:40px 28px;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  height:100dvh;       /* altura real móvil/escritorio */
  min-height:560px;
  overflow:hidden;
}
.slides{
  position:relative;
  width:100%; height:100%;
}
.slide{
  position:absolute; inset:0;
  display:grid;
  opacity:0;
  height:100%;
}
.slide.is-active{
  opacity:1;
  height:100%;
}
.slide .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(105%);
  z-index:0;
}
.slide .overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(2,24,51,.92) 0%,
    rgba(2,24,51,.88) 38%,
    rgba(2,24,51,.40) 56%,
    rgba(2,24,51,0)   75%);
}
.slide .caption{
  position:relative; z-index:2; align-self:center;
  max-width:640px; padding-left:clamp(24px,10vw,120px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);
  transform:translateY(10px); opacity:0;
  transition:transform .6s ease, opacity .6s ease;
}
.slide.is-active .caption{ transform:translateY(0); opacity:1; }
.slide .caption h1{
  font-size:clamp(36px,5.6vw,62px); line-height:1.08;
  font-weight:800; margin-bottom:14px;
}
.slide .caption h1 span{color:var(--dorado)}
.slide .caption p{
  font-size:clamp(15px,2vw,20px);
  opacity:.95; margin-bottom:20px; max-width:56ch;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Logo dentro del caption del hero */
.caption-logo{
  display:block;
  max-width:130px;   /* antes 160px → más grande */
  margin:0 0 24px 0; /* deja un poco más de espacio debajo */
}

/* En móvil: todavía más grande si quieres que destaque */
@media (max-width:760px){
  .caption-logo{
    max-width:260px;  /* agrandado en pantallas pequeñas */
    margin:0 0 24px 0;
  }
}


/* Slide 2 lista */
.slides article:nth-child(2) .caption .lista-impacto {
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.5;
  margin: 10px 0 18px 1.2em;
  padding: 0;
  color: #fff;
  list-style: disc;
}
.slides article:nth-child(2) .caption .lista-impacto li {
  margin: 6px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Logo dentro del caption del hero */
.caption-logo{
  display:block;
  max-width:130px;   /* antes 160px → más grande */
  margin:0 0 24px 0; /* deja un poco más de espacio debajo */
}

/* En móvil: todavía más grande si quieres que destaque */
@media (max-width:760px){
  .caption-logo{
    max-width:260px;  /* agrandado en pantallas pequeñas */
    margin:0 0 24px 0;
  }
}

/* Slide 3 */
.slides article:nth-child(3) .caption.caption--vstack{
  display:flex; flex-direction:column;
  gap:18px; max-width:720px;
  padding-right:32px; padding-bottom:24px;
}
.slides article:nth-child(3) .caption h1{
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.12; margin: 0;
}
.slides article:nth-child(3) .caption h1 span{ color: var(--dorado); }
.slides article:nth-child(3) .caption .lista-contacto{
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.6;
  margin: 0 0 4px 1.2em;
  color:#fff; list-style: disc;
}
.slides article:nth-child(3) .caption .lista-contacto li{ margin: 4px 0; }
.slides article:nth-child(3) .caption .hero-cta{ margin-top: 8px; }
.slides article:nth-child(3) .overlay{
  background: linear-gradient(90deg,
    rgba(2,24,51,.92) 0%,
    rgba(2,24,51,.88) 38%,
    rgba(2,24,51,.45) 58%,
    rgba(2,24,51,0)   78%);
}

/* Logo dentro del caption del hero */
.caption-logo{
  display:block;
  max-width:130px;   /* antes 160px → más grande */
  margin:0 0 24px 0; /* deja un poco más de espacio debajo */
}

/* En móvil: todavía más grande si quieres que destaque */
@media (max-width:760px){
  .caption-logo{
    max-width:260px;  /* agrandado en pantallas pequeñas */
    margin:0 0 24px 0;
  }
}


/* ===== Divisor ===== */
.divisor{
  width:100%; height:800px;
  background-image: url("../g_index/background_inicio/back_divisor.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 60px 0;
  box-shadow: 0 18px 46px rgba(2,24,51,.10) inset;
}

/* ===== Features ===== */
.section-head{max-width:860px;margin:0 auto 28px;text-align:center}
.section-head .underline{
  width:72px;height:4px;background:var(--dorado);
  border-radius:999px;margin:10px auto 0;
}
.section-sub{color:var(--gris-oscuro);margin-top:12px}

.features-grid{
  --gap:28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:40px;
}
.feature{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:18px; padding:28px;
  box-shadow:0 10px 24px rgba(2,24,51,.06);
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.feature:hover{transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.10);
}
.feature-icon{width:64px;height:64px;object-fit:contain;margin-bottom:14px;opacity:.95}
.feature h3{font-size:20px;margin-bottom:10px;color:var(--azul-oscuro)}
.feature p{color:var(--gris-oscuro)}

.features-logo{display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}
.features-logo img{max-width:200px;height:auto}

/* ===== Secciones con imagen ===== */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.split-img{border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.16)}
.split-text p{margin-top:10px}

/* ===== Contacto ===== */
.contact form{display:flex;flex-direction:column;gap:15px;max-width:640px;margin:28px auto 0}
label{font-weight:700;color:var(--azul-profundo)}
input,textarea{
  padding:12px 14px;border:1px solid var(--gris-claro);
  border-radius:10px;outline:0;
  transition:border-color .2s, box-shadow .2s; font-size:15px;
}
input:focus,textarea:focus{border-color:var(--azul-claro);box-shadow:0 0 0 4px rgba(42,132,160,.15)}
textarea{min-height:140px;resize:vertical}
.contact .btn{align-self:flex-start;background:var(--azul-medio);color:#fff}
.contact .btn:hover{background:var(--azul-claro)}
.hidden-iframe{display:none}

.whatsapp-btn{margin-top:1.5rem;text-align:left}
.whatsapp-btn img{width:60px;height:auto}

/* ===== Footer ===== */
.site-footer{
  background:var(--azul-oscuro);color:#fff;
  text-align:center;padding:22px 20px;font-size:14px;
}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .divisor{ height: 560px; }
}
@media (max-width:1024px){
  .features-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  :root{ --header-h: 80px; }

  .hero {
    min-height: 420px;
    height: 100vh;
    margin-top: calc(-1 * var(--header-h));
  }
  .slide .bg {
    object-fit: cover;
    object-position: 60% center; /* Centra mejor el área principal */
    min-height: 420px;
    height: 100%;
  }
  .slide .caption {
    padding: 90px 12px 32px;
    max-width: 98vw;
  }

  .slides article:nth-child(3) .caption.caption--vstack{
    gap:20px; max-width:92vw;
    padding-right:20px; padding-bottom:28px;
  }
  .slides article:nth-child(3) .caption h1{
    font-size:clamp(28px,7vw,40px); line-height:1.16;
  }
  .slides article:nth-child(3) .caption .lista-contacto{
    font-size:clamp(15px,3.4vw,18px);
  }
  .divisor{ height: 420px; }
}
@media (max-width:560px){
  .site-header .brand img{height:40px}
  :root{ --header-h: 72px; }
  .features-grid{grid-template-columns:1fr}
  .divisor {
    height: 180px;
    background-size: cover;
    background-position: center top;
    margin: 24px 0;
    border-radius: 12px;
  }

  /* Aplica el overlay azul oscuro a los tres slides del hero */
  .slide .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .slide .overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(2,24,51,0.82) 0%, rgba(2,24,51,0.48) 100%);
    z-index: 2;
  }
  .slide .caption {
    position: relative;
    z-index: 3;
    padding: 90px 10px 38px;
    max-width: 98vw;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
  }
  .slide .caption h1 {
    font-size: 1.6rem;
    line-height: 1.18;
    margin-bottom: 22px;
    word-break: break-word;
    max-width: 95vw;
  }
  .slide .caption p {
    font-size: 1rem;
    margin-bottom: 26px;
    max-width: 95vw;
    line-height: 1.7;
  }
  .hero-cta {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    margin-top: 22px;
  }
  .btn, .btn--ghost {
    width: 100%;
    font-size: 1rem;
    padding: 14px 0;
    text-align: center;
    margin-bottom: 6px;
  }

  /* Slide 2 y 3: asegúrate que el overlay se aplique igual */
  .slides article:nth-child(2) .overlay,
  .slides article:nth-child(3) .overlay {
    background: linear-gradient(90deg, rgba(2,24,51,0.82) 0%, rgba(2,24,51,0.48) 100%);
  }
}

/* ===== Datos contacto ===== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.contact-details{
  max-width:640px;margin:24px auto 0;
  padding:16px 20px 4px;
  border-top:1px solid rgba(0,0,0,.08);
  display:grid; gap:6px;
  font-size: 25px;
}
.contact-details .company{font-weight:600;}
.contact-details a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;}
.contact-details a:hover{ text-decoration:underline; }

/* ===== Menú móvil ===== */
@media (max-width: 767px){
  .nav-toggle{
    display:inline-flex;
    background:transparent; border:0; cursor:pointer; padding:.5rem;
    flex-direction:column; gap:.3rem; 
  }
  .nav-toggle__bar{
    width:26px; height:2px; background:#fff; border-radius:2px;
  }
  .main-nav{
    position: absolute;
    left: 0; right: 0; top: var(--header-h);
    background: #0f1a2a;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform-origin: top; transform: scaleY(0);
    transition: transform .18s ease;
    max-height: calc(100vh - var(--header-h));
    overflow: auto; -webkit-overflow-scrolling: touch;
  }
  .main-nav[data-open="true"]{ transform: scaleY(1); }
  .main-nav ul{ display:block; padding:10px 24px; }
  .main-nav li{ border-top:1px solid rgba(255,255,255,.06); }
  .main-nav li:first-child{ border-top:0; }
  .main-nav a{ display:block; padding:10px 6px; }
  .main-nav .btn--sm{ display:inline-block; }
}
@media (min-width: 768px){
  .nav-toggle{ display:none; }
}