/* ====== Base ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
  scroll-behavior: smooth;
}

body {
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-style: normal;
  background-color: #DBE2F9;
  color: #0f172a; /* Slate-900-like para mejor legibilidad */
}

/* ====== Contenedor principal (hero) ====== */
.div-nav{
  background-image: url('../img/fondo.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;            /* Asegura buen encuadre en móvil */
  background-clip: border-box;

  /* En desktop: caja centrada al 80% */
  width: 80%;
  min-height: 750px;                       /* era height: 750px */
  margin: 0 auto;                          /* reemplaza left:10% + width:80% */
  position: relative;

  /* Centrado de su contenido y flujo vertical correcto */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 16px;
  gap: 16px;
}

/* ====== Nav / Logo ====== */
.nav{
  width: 100%;
  display: flex;
  justify-content: center; /* centramos el logo */
  align-items: center;
  position: relative;
  margin-top: 24px;
}

.nav img{
  /* Quitamos offsets frágiles y hacemos el logo responsivo */
  position: static; /* antes relative con left/bottom */
  max-width: 320px;     /* tamaño máximo cómodo en desktop */
  width: 60%;           /* escala en función del contenedor */
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}

/* ====== Caja de aviso ====== */
.div-info-nav{
  background-color:#0015FD;
  color: #fff;
  width: 35%;
  min-height: 100px;
  border-radius: 20px;
  text-align: center;

  /* Retiramos offsets; usamos márgenes y orden natural */
  position: static;
  box-shadow: 5px 7px 5px #888;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  margin-top: 8px;
}

.div-info-nav p{
  margin: 0;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: .4px;
}

/* ====== Texto “Visita nuestras redes sociales” ====== */
.parrafo{
  font-size: 35px;
  font-weight: bold;

  /* Retiramos offsets, usamos márgenes */
  position: static;
  margin: 8px 0 0 0;
  text-align: center;
}

/* ====== Redes sociales ====== */
.social-media-nav{
  position: static;      /* sin desplazamientos */
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Normalizamos el ul interno aunque venga con style inline en HTML */
.social-media-nav ul{
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  display: inline-flex;  /* respeta el centrado del contenedor */
  align-items: center;
  justify-content: center;
  gap: 24px;             /* separación entre iconos */
}

/* Pequeño efecto hover accesible (si no quieres, quítalo) */
.social-media-nav a {
  transition: transform .2s ease, opacity .2s ease;
  will-change: transform;
}
.social-media-nav a:hover,
.social-media-nav a:focus-visible {
  transform: translateY(-2px);
  opacity: 0.95;
  outline: none;
}

/* ====== Breakpoints ====== */

/* --- Laptops/medianas (<= 1200px) --- */
@media (max-width: 1200px){
  .div-nav{
    width: 88%;
    min-height: 680px;
    padding: 16px;
  }

  .div-info-nav{
    width: 45%;
  }

  .nav img{
    width: 64%;
    max-width: 300px;
  }

  .parrafo{
    font-size: 32px;
  }
}

/* --- Tablets (<= 1024px) --- */
@media (max-width: 1024px){
  .div-nav{
    width: 92%;
    min-height: 640px;
  }

  .div-info-nav{
    width: 55%;
    border-radius: 16px;
  }

  .div-info-nav p{
    font-size: 26px;
  }

  .nav img{
    width: 70%;
    max-width: 280px;
  }

  .parrafo{
    font-size: 28px;
  }

  .social-media-nav ul{
    gap: 20px;
  }
}

/* --- Smartphones grandes / phablets (<= 800px) --- */
@media (max-width: 800px){
  .div-nav{
    width: 94%;
    min-height: 600px;   /* antes height: 650px */
    padding: 12px;
    gap: 12px;
  }

  .nav img{
    width: 72%;
    max-width: 260px;
  }

  .div-info-nav{
    width: 70%;
    min-height: 90px;
  }

  .div-info-nav p{
    font-size: 22px;
  }

  .parrafo{
    font-size: 24px;
    margin-top: 6px;
  }

  .social-media-nav ul{
    gap: 18px;
  }
}

/* --- Smartphones medianos (<= 640px) --- */
@media (max-width: 640px){
  .div-nav{
    width: 96%;
    min-height: 560px;
    padding: 10px;
    gap: 10px;
  }

  .nav img{
    width: 78%;
    max-width: 240px;
  }

  .div-info-nav{
    width: 86%;
    min-height: 84px;
    border-radius: 14px;
    padding: 8px 10px;
    margin-top: 4px;
  }

  .div-info-nav p{
    font-size: 20px;
  }

  .parrafo{
    font-size: 20px;
    margin-top: 4px;
  }

  .social-media-nav ul{
    gap: 16px;
  }
}

/* --- Smartphones pequeños (<= 480px) --- */
@media (max-width: 480px){
  .div-nav{
    width: 98%;
    min-height: 520px;
    padding: 8px;
    gap: 8px;
  }

  .nav{
    margin-top: 12px;
  }

  .nav img{
    width: 82%;
    max-width: 220px;
  }

  .div-info-nav{
    width: 92%;
    min-height: 78px;
    border-radius: 12px;
    padding: 6px 10px;
  }

  .div-info-nav p{
    font-size: 18px;
    letter-spacing: .2px;
  }

  .parrafo{
    font-size: 18px;
    margin-top: 2px;
  }

  .social-media-nav{
    margin-top: 0;
  }

  .social-media-nav ul{
    gap: 14px;
  }

  /* Asegura que los íconos no rebasen el ancho */
  .social-media-nav i {
    font-size: 42px !important; /* sobrescribe el inline del HTML si aplica */
  }
}

/* --- Ultra pequeños (<= 360px) --- */
@media (max-width: 360px){
  .div-nav{
    min-height: 480px;
  }

  .nav img{
    width: 88%;
    max-width: 200px;
  }

  .div-info-nav p{
    font-size: 16px;
  }

  .parrafo{
    font-size: 16px;
  }

  .social-media-nav i{
    font-size: 36px !important;
  }
}