/* ==============================================
   PASBAQ CORPORATE COLORS
   Primary Color: PANTONE 533 C
   ============================================== */

:root {
    /* Colores principales */
    --pasbaq-primary: #29385F;        /* PANTONE 533 C */
    --pasbaq-primary-dark: #1E2847;   /* Variante oscura */
    --pasbaq-primary-light: #3D4D7A;  /* Variante clara */
    
    /* Colores complementarios */
    --pasbaq-white: #FFFFFF;
    --pasbaq-gray-light: #F5F5F5;
    --pasbaq-gray-medium: #E0E0E0;
    --pasbaq-accent: #00A8E8;         /* Azul brillante para CTAs */
    --pasbaq-accent-hover: #0088BB;   /* Hover state */
    
    /* Colores de texto */
    --pasbaq-text-dark: #2C3E50;
    --pasbaq-text-light: #7F8C8D;
}

/* ==============================================
   NAVEGACIÓN Y HEADER
   ============================================== */

.header-menu {
    background-color: var(--pasbaq-white);
    border-bottom: 2px solid var(--pasbaq-primary);
}

.main-menu nav ul li a {
    color: var(--pasbaq-primary);
    font-family: 'Grift Medium', sans-serif;
    font-weight: 500;
}

.main-menu nav ul li a:hover,
.main-menu nav ul li.active a {
    color: var(--pasbaq-accent);
}

/* Asegura que el círculo (logo) sea el contenedor */
#header .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;        /* CLAVE: nada se sale del círculo */
  border-radius: 50%;
}

/* Wrapper interno: centra y define área útil */
#header .logo .pasbaq-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Imagen: siempre dentro, responsiva */
#header .logo img {
  width: 99%;              /* controla cuánto “llena” el círculo */
  height: 99%;
  object-fit: contain;     /* no recorta, no se deforma */
  display: block;
  margin: 0;               /* elimina descuadres */
}

/* ==============================================
   BOTONES PRINCIPALES
   ============================================== */

/* ===== Menú igualitario (desktop) ===== */
#header nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#header nav ul li {
  width: 100%;
}

#header nav ul li a {
  display: block;
  text-align: center;
  white-space: nowrap;     /* evita que "Soluciones IT" se parta */
  overflow: hidden;        /* evita que se desborde */
  text-overflow: ellipsis; /* si no cabe, pone "..." en vez de romper feo */
}

/* ===== Tablet / móvil: 2 columnas (2x2) ===== */
@media (max-width: 736px) {
  #header nav ul {
    grid-template-columns: repeat(2, 1fr);
  }

  #header nav ul li a {
    font-size: 0.85rem;  /* ajusta legibilidad */
    padding: 0.9rem 0.8rem;
  }
}

#header nav ul li a {
  display: flex;
  align-items: center;     /* centra vertical */
  justify-content: center; /* centra horizontal */
  text-align: center;
}

/* ===== Móvil pequeño: 1 columna (4 filas) ===== */
@media (max-width: 480px) {
  #header nav ul {
    grid-template-columns: 1fr;
  }

  #header nav ul li a {
    font-size: 0.95rem;
    white-space: normal;  /* en 1 columna ya puede partirse bonito */
  }
}

/* ==============================================
   TIPOGRAFÍA - TÍTULOS
   ============================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Exosquad', sans-serif;
    color: var(--pasbaq-white);
    font-weight: 700;
}

h1 {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
}

h2 {
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 1.5px;
}

h3 {
    font-size: 28px;
    line-height: 1.4;
}

/* H1 principal del hero (marca) */
#header h1 {
  font-family: 'Exosquad', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Títulos grandes dentro del contenido */
#main article h1,
#main article h2 {
  font-family: 'Grift Bold', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===== FIX definitivo: títulos que se salen en móvil (Dimension) ===== */
@media (max-width: 736px) {

  /* Caso típico: <h2 class="major"> ... */
  #main article h2.major,
  #main article header.major h2,
  #main article h2 {
    max-width: 100% !important;
    white-space: normal !important;      /* permite salto de línea */
    overflow-wrap: anywhere !important;  /* SIEMPRE rompe si hace falta */
    word-break: break-word !important;   /* fallback */
    hyphens: auto !important;            /* opcional: cortes naturales */
    letter-spacing: 0.08em !important;   /* baja el tracking en móvil */
    font-size: 1.5rem !important;        /* ajusta (1.3–1.6) */
    line-height: 1.25 !important;
  }
}

/* ==============================================
   TIPOGRAFÍA - CONTENIDO
   ============================================== */

body {
    font-family: 'Grift Medium', sans-serif;
    color: var(--pasbaq-white);
    font-size: 16px;
    line-height: 1.6;
}

p {
    font-family: 'Grift Medium', sans-serif;
    color: var(--pasbaq-white);
}

.copyright {
    font-family: 'Grift Medium', sans-serif;
    var(--pasbaq-white);
}

.lead-text,
.subtitle {
    font-family: 'Grift Light', sans-serif;
    font-size: 18px;
    color: var(--pasbaq-text-light);
}

strong, b {
    font-family: 'Grift Bold', sans-serif;
    font-weight: 700;
}

/* Quitar mayúsculas del tagline del header */
#header .content .inner p {
  text-transform: none;
  /* letter-spacing: normal;  opcional: quita el espaciado exagerado */
}

/* Quitar mayúsculas del menú */
#header nav ul li a {
  text-transform: none;
  /* letter-spacing: normal;  opcional */
}

/* Tamaño de los 4 botones del menú */
#header nav ul li a {
  font-size: 0.75rem;   /* prueba 0.75–1.0rem */
  /* padding: 0.9rem 1.2rem;  ajusta el “alto/ancho” del botón */
}

/* ==============================================
   SECCIONES Y BACKGROUNDS
   ============================================== */

.section-primary {
    background-color: var(--pasbaq-primary);
    color: var(--pasbaq-white);
}

.section-primary h1,
.section-primary h2,
.section-primary h3 {
    color: var(--pasbaq-white);
}

.section-light {
    background-color: var(--pasbaq-gray-light);
}

.section-white {
    background-color: var(--pasbaq-white);
}

/* Overlay para imágenes de fondo */
.bg-overlay-pasbaq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pasbaq-primary);
    opacity: 0.85;
}

/* ==============================================
   CARDS Y SERVICIOS
   ============================================== */

.service-box {
    background-color: var(--pasbaq-white);
    border: 1px solid var(--pasbaq-gray-medium);
    transition: all 0.3s ease;
}

.service-box:hover {
    border-color: var(--pasbaq-primary);
    box-shadow: 0 8px 24px rgba(41, 56, 95, 0.15);
    transform: translateY(-5px);
}

.service-box h3 {
    color: var(--pasbaq-primary);
    font-family: 'Exosquad', sans-serif;
}

.service-icon {
    color: var(--pasbaq-accent);
    font-size: 48px;
}

/* ==============================================
   FOOTER
   ============================================== */

footer {
    var(--pasbaq-white);
}

footer h3,
footer h4 {
    var(--pasbaq-white);
    font-family: 'Exosquad', sans-serif;
}

footer a {
    var(--pasbaq-white);
    font-family: 'Grift Medium', sans-serif;
}

footer a:hover {
    var(--pasbaq-white);
}

/* ==============================================
   HERO SECTION
   ============================================== */

.hero-section {
    background: linear-gradient(135deg, var(--pasbaq-primary) 0%, var(--pasbaq-primary-dark) 100%);
    padding: 120px 0;
    color: var(--pasbaq-white);
}

.hero-section h1 {
    font-family: 'Exosquad', sans-serif;
    color: var(--pasbaq-white);
    font-size: 56px;
    margin-bottom: 20px;
}

.hero-section p {
    font-family: 'Grift Light', sans-serif;
    color: var(--pasbaq-white);
    font-size: 20px;
}

/* ==============================================
   ANIMACIONES Y TRANSICIONES
   ============================================== */

.fade-in {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    
    .hero-section h1 {
        font-size: 36px;
    }
    
    .hero-section p {
        font-size: 16px;
    }
}