/*
 * Syscr Theme - estilos propios
 * Se carga después de bootstrap-custom.min.css.
 * Tokens de marca centralizados: usar estas variables en vez de valores sueltos.
 */
:root {
    --syscr-primary: #005d63;
    --syscr-secondary: #ff8300;
    --syscr-bg-alt: #f8f8f8;
    /* La base de 18px y la escala de encabezados ya vienen compiladas
       en bootstrap-custom.min.css (scss/_variables.scss) */
}

/* Jerarquía semántica: los títulos grandes ahora son h1/h2 reales
   pero conservan la apariencia que tenían como párrafos */
.h2-subtitulo h1,
.h2-subtitulo h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 1rem;
}

/* Tamaño fluido para los títulos de sección: crece con la pantalla
   hasta el tamaño de diseño (2.2rem) y baja en pantallas pequeñas */
.h2-subtitulo {
    font-size: clamp(26px, 10px + 1.9vw, 36px); /* 26px móvil → 36px escritorio, en px para no depender de la base */
    line-height: 1.25;
}

/* Tarjetas de servicios: el título pasó de h4 a h3 con el mismo estilo */
.servicios-shadow .aio-icon-header h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin: 0 0 1.6rem 0;
    font-weight: 700;
}

/* "Cuando nos contacta:" en proporción con la sección de 16px */
.strong h3,
h3.strong,
#contactenos h3 {
    font-size: 20px;
    font-weight: 700;
}

/* Header: logo a la izquierda + menú a la derecha en escritorio.
   En móvil (<768px) el logo lo pone la barra del mega menu, así que se oculta. */
#masthead .masthead-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#masthead .custom-logo-link {
    display: none;
}

#masthead .main-navigation {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    #masthead .custom-logo-link {
        display: inline-flex;
        flex: 0 0 auto;
    }

    #masthead .custom-logo {
        max-height: 56px;
        width: auto;
        height: auto;
    }
}

/* Menú desktop: padding más compacto para que todos los ítems
   (incluido B2FE) quepan en una sola fila a 1366px */
@media (min-width: 768px) {
    #mega-menu-wrap-top_menu #mega-menu-top_menu > li.mega-menu-item > a.mega-menu-link {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Barra móvil del mega menu: fondo blanco como el header de escritorio,
   logo contenido en la barra (antes desbordaba) y hamburguesa en color de marca */
#mega-menu-wrap-top_menu .mega-menu-toggle {
    background: #fff !important;
    border-bottom: 1px solid #e7e7e7;
    height: 56px;
}

#mega-menu-wrap-top_menu .mega-menu-toggle img.mega-menu-logo {
    max-height: 40px !important;
    width: auto !important;
}

#mega-menu-wrap-top_menu .mega-menu-toggle .mega-toggle-animated-inner,
#mega-menu-wrap-top_menu .mega-menu-toggle .mega-toggle-animated-inner::before,
#mega-menu-wrap-top_menu .mega-menu-toggle .mega-toggle-animated-inner::after {
    background-color: var(--syscr-primary) !important;
}

/* Sección de contacto: escala propia de 16px (la base global no aplica aquí;
   .form-control y .btn definen su tamaño en rem, por eso se pisan explícitos) */
#contactenos,
#contactenos .form-label,
#contactenos .btn {
    font-size: 16px;
}

/* el build original trae .form-control con .8rem !important */
#contactenos .form-control {
    font-size: 16px !important;
}

#contactenos .form-label {
    margin-bottom: 0.3rem;
}

/* Logo del footer al 50% */
footer.footer .widgets-area .wp-block-image img {
    width: 190px !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Landing B2FE y secciones de páginas de producto */
.landing-sect {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 767.98px) {
    .landing-sect {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

.bg-alt {
    background-color: var(--syscr-bg-alt);
}

.fe-logo img {
    width: 320px !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Banda destacada del producto (fondo teal, texto blanco) */
.banda-b2fe {
    background-color: var(--syscr-primary);
    color: #fff;
}

.banda-b2fe .h2-subtitulo {
    color: #fff;
}

.banda-b2fe .fe-logo img {
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
}

/* Páginas simples (legales, 404): aire y título con la marca */
.page-plain {
    padding: 60px 0;
}

.page-plain h1,
.page-plain .page-title {
    color: var(--syscr-primary);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.error-404 {
    text-align: center;
    padding: 100px 0;
}

/* Sin subrayado en los enlaces (Bootstrap los subraya por defecto) */
a,
a:hover,
a:focus {
    text-decoration: none;
}

/* Llamadas a la acción */
.hero-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 0;
}

.section-cta {
    margin: 2rem 0 0;
}

.hero-cta .btn,
.section-cta .btn {
    font-size: 1rem;
    padding: 0.55rem 1.4rem;
}

/* Header pegajoso: el logo y el menú bajan juntos al hacer scroll
   (sustituye el sticky propio del mega menu, que dejaba el logo arriba) */
#masthead {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Ritmo vertical consistente entre secciones
   (sustituye los paddings dispares 100/60, 60/100, 60/60 del builder) */
#inicio,
#industrias,
#analisis-de-datos,
#outsourcing,
#servicios,
#contactenos {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

@media (max-width: 767.98px) {
    #inicio,
    #industrias,
    #analisis-de-datos,
    #outsourcing,
    #servicios,
    #contactenos {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}