/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============ Variables y reset ============ */
:root{
  --brand-1:#024C8C;
  --brand-2:#0F7BD9;
  --accent:#D98B0F;
  --light:#fff;
  --nav-h:64px;          /* altura aprox. de la navbar */
  --container:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#111; line-height:1.5;
  padding-top:var(--nav-h); /* evita que la navbar fija tape el contenido */
}

.container{max-width:var(--container);margin-inline:auto;padding-inline:16px}

/* ============ Navbar ============ */
.navbar{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:1000;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:var(--light);
  box-shadow:0 4px 12px rgba(2,76,140,.15);
}
.nav-container{
  height:100%; max-width:var(--container); margin:0 auto;
  padding-inline:16px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:clamp(16px,2.5vw,20px)}
.logo-image,.nav-logo img{height:50px; width:auto; opacity:.9; filter:drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #88c3ef) drop-shadow(0 0 45px #69afdd) drop-shadow(0 0 60px #fff)}
.nav-links{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.nav-links a{
  font-weight:500; font-size:clamp(14px,2.4vw,20px); position:relative; color:#fff; transition:color .25s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:#71b7e6; transition:width .25s ease;
}
.nav-links a:hover{color:#e6f2ff}
.nav-links a:hover::after{width:100%}

/* ============ Header (Hero) ============ */
header{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center; justify-content:flex-start;
  background:
    linear-gradient(rgba(66,47,47,.70), rgba(0,0,0,.70)),
    url(images/fondoinicial.avif) center bottom / cover no-repeat; /* fondo: imagen + overlay */
}
.header-content{
  width:100%; max-width:var(--container); margin-inline:auto;
  text-align:left;
  padding:clamp(32px,6vw,96px) 16px; /* sin márgenes negativos */
}
.header-content h1{
  color:#f9fafc; text-transform:uppercase; font-weight:800;
  font-size:clamp(32px,6.5vw,60px); line-height:1.1; margin: clamp(8px,1.5vw,20px) 0 8px 0;
}
.header-content p{
  color:#f9fafc; max-width:min(1000px,92%);
  font-size:clamp(14px,2.6vw,22px); margin-top:12px;
}

/* Emblema (logo grande esquina inferior derecha) */
.emblema-overlay{
  position:absolute; right:clamp(16px,4vw,50px); bottom:clamp(24px,6vh,60px);
  z-index:10; opacity:.95; pointer-events:none;
}
.emblema-overlay img{
  width:clamp(220px,32vw,500px); height:auto;
  filter:drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 30px #f9f9fa) drop-shadow(0 0 45px #fcfeff) drop-shadow(0 0 60px #fcfdfd);
}

/* ============ Botón principal (unificado) ============ */
.btn-1{
  display:inline-block; border:0; cursor:pointer;
  padding:12px 30px; border-radius:10px;
  background:#D98B0F; color:#fff; font-weight:700; text-transform:uppercase;
  font-size:clamp(14px,2.4vw,20px);
  margin-top:20px; margin-bottom:50px;
  box-shadow:0 4px 8px rgba(0,0,0,.1); transition:background .25s ease, box-shadow .25s ease, transform .05s ease;
}
.btn-1:hover{background:#024C8C; box-shadow:0 5px 15px rgba(0,0,0,.2)}
.btn-1:active{transform:translateY(1px)}

/* Desktop: más arriba y más grande */
.emblema-overlay{
  position:absolute;
  right: clamp(16px,3vw,40px);
  /* Aumenta bottom para “subir” la imagen; más valor = más arriba */
  bottom: clamp(120px,16vh,240px);
  z-index:10;
  opacity:.97;
  pointer-events:none;
}
.emblema-overlay img{
  /* Hazlo más grande: incrementa el primer valor o el porcentaje */
  width: min(620px, 38vw);
  height:auto;
}


/* ============ Responsive ============ */
/* Móvil: bajar un poco el texto y subir más el logo */
/* Móvil: bajar un poco el texto y subir más el logo */
@media (max-width: 768px) {
  /* Texto más abajo (aumenta padding-top para bajarlo) */
  header{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    min-height:calc(100svh - var(--nav-h));
  }

  .header-content{
    padding-top: clamp(36px, 7vh, 64px); /* <- súbelo/bájalo para ajustar el texto */
    padding-bottom: 24px;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
  }

  /* Mostrar y centrar el logo más arriba (aumenta bottom para subirlo) */
  .emblema-overlay{
    display:block;        /* por si otra regla lo ocultó */
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(96px, 18vh, 180px); /* <- más grande = más arriba */
    transform: translateX(-50%);
    pointer-events:none;
    text-align:center;
  }

  .emblema-overlay img{
    width: min(60vw, 280px); /* puedes subir a 65vw/300px si lo quieres un poco más grande */
    height: auto;
  }

  .btn-1{
    width:100%;
    text-align:center;
    margin-top: 18px;
  }
}