/* ================================================= */
/* ==== ESTILOS GLOBALES PARA TODO EL SITIO WEB ==== */
/* ================================================= */

/* ========= RESET & VARIABLES ========= */
:root {
  --color-principal: #0a3161;
  --color-secundario: #f6f9fc;
  --color-acento: #2953a5;
  --color-gris: #343a40;
  --color-texto: #1a1a1a;
  --color-blanco: #fff;
  --color-celeste: #41d6fb;
  --sombra-suave: 0 2px 16px rgba(10,49,97,0.07);
}
*, *::before, *::after {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--color-secundario);
  color: var(--color-texto);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
/* ========= HEADER & NAV (DISEÑO UNIFICADO Y RESPONSIVO) ========= */

/* --- Estilos Base (Mobile-First) --- */
header {
  /* Reintegramos la imagen de fondo */
  background-image: url('/img/fondo_head2.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--color-blanco); /* Se usa si la imagen no carga */

  /* Mantenemos el resto de los estilos */
  padding: 20px 4%;
  text-align: center;
  border-bottom: 2px solid #e7e7e7;

  /* IMPORTANTE: Añadimos position relative para el truco de legibilidad */
  position: relative;
  z-index: 1;
}
/* Añade este nuevo bloque a tu CSS */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Capa blanca con 70% de opacidad. Ajusta el valor (0.7) a tu gusto. */
  background-color: rgba(255, 255, 255, 0.5); 

  /* Esto asegura que la capa quede detrás del contenido (logo, links) */
  z-index: -1; 
}

header .logo {
  height: 90px;
  margin: 0; /* Reseteamos el margen para un control más predecible */
}

nav {
  /* Se elimina el fondo azul y los bordes redondeados */
  background: none;
  margin-top: 15px; /* Espacio entre el logo y los links de navegación */
  padding: 0;

  /* Mantenemos tu excelente layout con Flexbox */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px; /* Un espaciado (gap) ajustado para móviles */
}

nav a {
  /* El color del texto ahora es el azul principal por defecto */
  color: var(--color-principal);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-bottom-color 0.3s;
}

/* Agrupamos hover, focus y la clase .active para la sección actual */
nav a:hover,
nav a:focus,
nav a.active {
    color: var(--color-celeste);
    border-bottom-color: var(--color-celeste);
}

/* Mantenemos el outline accesible y personalizado para el foco con teclado */
nav a:focus {
  outline: 2px solid var(--color-celeste);
  outline-offset: 4px;
}


/* --- Estilos para Escritorio (Pantallas de 768px o más) --- */
@media (min-width: 768px) {
  header {
    /* Cambiamos el layout para poner logo y nav en una línea */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  header .logo {
    height: 75px; /* Un tamaño de logo ligeramente más pequeño para el layout horizontal */
  }

  nav {
    margin-top: 0; /* Eliminamos el margen superior ya que están en la misma línea */
    gap: 15px 25px; /* Aumentamos el espaciado para pantallas más grandes */
  }
}
/* ========= FOOTER ========= */
footer {
  background: var(--color-principal);
  color: var(--color-blanco);
  text-align: center;
  padding: 24px 8px 16px 8px;
  font-size: 1.04rem;
  margin-top: 36px;
  border-radius: 12px 12px 0 0;
  /* La animación del footer se puede quedar aquí o moverla a site-jpn.css si solo la quieres en la home */
  animation: fadeInUp 1.1s 1.3s both;
}
footer .footer-links {
  margin-bottom: 10px;
}
footer a {
  color: var(--color-blanco);
  margin: 0 10px;
  text-decoration: underline;
  transition: color 0.18s;
}
footer a:hover, footer a:focus {
  color: var(--color-celeste);
}
/* Estilos para el botón flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed; /* Fija el elemento en la pantalla */
    bottom: 25px;    /* Distancia desde el borde inferior */
    right: 25px;     /* Distancia desde el borde derecho */
    
    /* Apariencia del botón */
    background-color: #25D366; /* Color verde de WhatsApp */
    color: #FFFFFF;           /* Color del texto */
    padding: 12px 20px;       /* Espaciado interno (vertical y horizontal) */
    border-radius: 50px;      /* Bordes completamente redondeados */
    text-decoration: none;    /* Quita el subrayado del enlace */
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    
    /* Sombra para darle profundidad */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    
    /* Para alinear el texto y el ícono */
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el texto y el ícono */
    
    /* Transición suave para efectos */
    transition: transform 0.2s ease-in-out;
    
    /* Para que siempre esté por encima del resto del contenido */
    z-index: 1000; 
}

/* Efecto al pasar el mouse por encima */
.whatsapp-flotante:hover {
    transform: scale(1.05); /* Agranda ligeramente el botón */
}

/* Estilo para el ícono SVG dentro del botón */
.whatsapp-flotante svg {
    width: 24px;
    height: 24px;
}