.hero-banner {
  background-image: url("imagenes/banner.jpg"); /* asegurate de que exista */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 75vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Caja translúcida detrás del texto */
.header-content {
  background: rgba(0, 0, 0, 0.45);  /* más oscura para contraste */
  padding: 2rem;
  border-radius: 10px;
  backdrop-filter: blur(6px);       /* efecto vidrio esmerilado */
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

/* Aumenta la legibilidad del texto */
.header-content h1,
.header-content p,
.hero-inner h2,
.hero-inner p {
  color: #fafbfc;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Logo centrado y escalable */
.logo.grande {
  display: block;
  margin: 0 auto 1rem auto;     /* centra horizontalmente */
  width: 240px;                 /* tamaño visible */
  max-width: 90%;               /* evita que se corte en pantallas pequeñas */
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6));
  transition: all 0.3s ease;
}

/* Asegura que su contenedor permita el centrado */
.header-content {
  text-align: center;
  max-width: none;
}
.logo.grande {
  filter: brightness(5) contrast(200%);
}



/* Botones visibles sobre el fondo oscuro */
.btn {
  background-color: #ffffff;  /* secundario */
  color: #ffffff !important;/* neutro para contraste */
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn:hover {
  background-color: #ffffff;
  color: #fff;
}

/* Variante “ghost” adaptada */
.btn.ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #ffffff;
}

.btn.ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}



:root{
  /* Paleta base (editá si necesitás ajustar a los HEX oficiales) */
  --bg:#FFFFFF;          /* Fondo principal */
  --fg:#0B0B0B;          /* Texto principal casi negro */
  --primary:#0E2A47;     /* Azul profundo (headers, footer) */
  --primary-600:#1F4872; /* Azul medio (hover, bordes activos) */
  --primary-300:#AFC6E1; /* Azul claro (líneas suaves, decor) */
  --muted:#6B7280;       /* Texto secundario / descripciones */
  --card-bg:#FFFFFF;     /* Fondo de tarjetas */
  --card-text:#0B0B0B;   /* Texto en tarjetas */
  --ring:#D8E3F2;        /* Sutil halo al hover */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #1d1d1b; /* neutro */
  color: white;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}

/* Header */
.site-header{
  border-bottom:2px solid var(--primary-300);
  padding:1.2rem 1rem;
  background:#fff;
}
.brand{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:.9rem;
}
.logo{width:52px; height:auto; display:block}
.brand-text h1{
  margin:0; font-size:1.8rem; letter-spacing:.3px; text-transform:uppercase;
}
.tagline{margin:.15rem 0 0; color:var(--primary-600); font-size:.95rem}

/* === NAVIGATION === */
.nav {
  display: flex;
  justify-content: center;   /* centra horizontalmente */
  gap: 1.5rem;               /* separa los botones */
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.nav a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav a:hover {color: #75ccf4;
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.nav .cta {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.nav .cta:hover {
  background: rgba(255,255,255,0.25);
}


/* Hero */
.hero{ padding:4rem 1rem 2.5rem; background:#F8FAFD }
.hero-inner{ max-width:1000px; margin:0 auto; text-align:center }
.hero h2{ font-size:2rem; margin:0 0 .6rem; color:var(--primary) }
.hero p{ color:var(--muted); max-width:720px; margin:0 auto 1.2rem }
.hero-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

.btn{
  background:var(--primary-600); color:#fff; text-decoration:none;
  padding:.8rem 1.1rem; border-radius:10px; font-weight:600; transition:.25s ease;
}
.btn:hover{ transform:translateY(-2px); background:var(--primary) }
.btn.ghost{
  background:transparent; color:var(--primary-600); border:1.5px solid var(--primary-600)
}
.btn.ghost:hover{ background:var(--primary-600); color:#fff }

/* Secciones / Grid */
.section{ padding:2.5rem 1rem; background:#fff }
.section-title{
  max-width:1200px; margin:0 auto 1.2rem;
  font-size:1.1rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--primary-600);
  border-left:4px solid var(--primary-600); padding-left:.6rem;
}
.grid{
  display:grid; gap:1.4rem; max-width:1200px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* Tarjetas */
.card{
  background: #ffffff;
  color: #11343f;
  border-radius:12px; padding:1.6rem;
  border:1.5px solid #E6ECF5; text-decoration:none; display:block;
  transition:.3s ease; position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(15,23,42,0.02);
}
.card h4{ margin:.2rem 0 .5rem; font-size:1.1rem; color: #11343f;}
.card p{ margin:0; color: #1d1d1b; }
.card::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(1200px 1200px at -20% -20%, rgba(31,72,114,0.08), transparent 40%);
  opacity:0; transition:opacity .35s ease, transform .35s ease;
  transform: scale(1.02);
}
.card:hover{
  border-color:var(--primary-300);
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
  transform:translateY(-4px);
}
.card:hover::before{ opacity:1 }

/* Tarjetas de enlace */
.grid-links .link{ cursor:pointer }

/* Contacto */
.contact .contact-list{
  max-width:900px; margin:1rem auto 0; padding:0 1rem; list-style:none;
  display:grid; gap:.5rem;
}
.contact .contact-list li strong{ color:var(--primary-600) }

/* Footer */
.site-footer{
  background:var(--primary); color:#fff; text-align:center;
  padding:1rem; margin-top:2rem; font-size:.95rem;
}

/* Responsivo */
@media (max-width:600px){
  .brand-text h1{ font-size:1.5rem }
  .hero h2{ font-size:1.6rem }
}

/* === RESPONSIVE UNIVERSAL PARA CELULARES === */
@media (max-width: 900px) {
  .hero-banner {
    height: 100vh; /* ocupa toda la altura del celular */
    background-position: center top;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.hero-banner {
  background: 
    linear-gradient(to bottom, rgba(17,52,63,0) 55%, rgba(17,52,63,0.9) 100%),
    url("imagenes/banner.jpg") center top / contain no-repeat;
  background-color: #11343f; /* mantiene el tono base */
}



  .overlay {
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
  }

  .header-content {
    width: 100%;
    max-width: 480px; /* ancho ideal para pantallas móviles */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 1.8rem 1rem;
    text-align: center;
  }

  .logo.grande {
    width: 180px; /* se adapta mejor al formato 19.5:9 */
    height: auto;
    margin-bottom: 1rem;
    filter: brightness(4) contrast(190%) drop-shadow(0 0 6px rgba(255,255,255,0.5));
  }

  .tagline {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .hero-inner h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }

  .hero-inner p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
  }

  .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    margin: 0.3rem;
    display: inline-block;
  }

  .nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1rem 0 1.2rem;
  }

  .nav a {
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .nav a:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* === ANIMACIONES SUAVES === */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* ======== CARRUSEL CON TARJETAS MÁS CHICAS ======== */
@media (max-width: 900px) {
  .carousel .grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 1rem 0.5rem;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .carousel .grid::-webkit-scrollbar {
    display: none;
  }

  /* Tarjetas más angostas y con separación visual */
  .carousel .card {
    min-width: 58%;             /* 🔸 antes era 65–80%, ahora más chica */
    max-width: 300px;           /* evita que sean enormes en pantallas medianas */
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Efecto al tocar o enfocar */
  .carousel .card:active,
  .carousel .card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  }

  /* Pequeños márgenes al inicio y final */
  .carousel .grid::before,
  .carousel .grid::after {
    content: "";
    flex: 0 0 5%;
  }
}
.carousel .card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(117,204,244,0.4); /* borde azul claro */
  box-shadow: 0 0 10px rgba(117,204,244,0.25);
  border-radius: 12px;
  color: white;
}
.site-footer {
  background-color: #11343f;
  color: #ffffff;
}