/* ==========================================================================
   Navegacion — PCBOX Leon
   Modulo generado en la Iteracion 3.5. Solo estructura y comportamiento.

   IMPORTANTE: este archivo NO define identidad visual. Todos los colores y
   tipografias se consumen desde las variables --fixpro-* existentes, de modo
   que hoy el aspecto es identico al de la plantilla y adoptara la identidad
   de PCBOX Leon automaticamente cuando esas variables pasen a ser alias de
   los tokens --pcx-* (Design System §3.3).
   ========================================================================== */

/* ------------------------------------------------------------------ Logo */

/* logo-pcbox.png se sirve a resolucion completa (1489x244) para que se vea
   nitido en pantallas retina; el tamano visual real lo fija esta regla, no
   los atributos width/height del HTML (esos solo reservan el hueco de
   layout para evitar CLS mientras carga). */
.main-menu__logo img {
    height: 30px;
    width: auto;
}

/* Con el logo real (ratio 6.10:1, mucho mas ancho que el de la plantilla)
   el hueco entre el logo y el primer enlace del menu -- y entre el menu y
   los iconos de la derecha -- se quedaba en 11px a 1440px de viewport (el
   que usa verify.mjs), visualmente pegado. column-gap fuerza un minimo sin
   tocar justify-content: space-between, que sigue repartiendo el resto.

   16px, no 20px: con 20px la cabecera pasa a dos lineas a 1440px y tambien
   en una franja de solo 4px (1501-1504px) donde la plantilla cambia su
   propio padding lateral de 20px a 55px (responsive.css). Comprobado en el
   navegador pixel a pixel en ese tramo: 16px es el primer valor que no
   rompe en ninguno de los dos sitios. */
.main-menu__wrapper-inner {
    column-gap: 16px;
}

/* El widget "Llámanos" (.main-menu__call) ya viene oculto por la plantilla
   entre 1320 y 1500px (responsive.css), donde ademas reduce el padding
   lateral de la cabecera de 55px a 20px. Detectado un hueco que la
   plantilla no cubria: con el logo real, mas ancho que el original, el
   widget vuelve a caber mal desde justo donde acaba esa reduccion de
   padding hasta ~1749px, y la cabecera salta a dos lineas.
   El rango empieza en 1320px, solapando la regla de la plantilla (ahi ya
   estaba oculto, repetirlo no hace nada), para no depender de acertar el
   pixel exacto en el que cambia el padding: probado que a 1501px exacto,
   con un rango que empezara justo despues, seguia saltando por ese cambio
   de padding, no por el widget. Sin solapamiento no hay costura.
   No reaparece en ningun otro rango: 992-1199px y >=1750px caben con
   margen, comprobado en el navegador antes de fijar los limites. */
@media only screen and (min-width: 1320px) and (max-width: 1749px) {
    .main-menu__call {
        display: none;
    }
}

.sidebar-info-contents .logo img {
    height: 30px;
    width: auto;
}

.mobile-nav__content .logo-box img {
    height: 32px;
    width: auto;
}

.footer-widget__logo img {
    height: 32px;
    width: auto;
}

/* --------------------------------------------------------------- Mega menu */

/* El contenedor a todo el ancho lo aporta la regla .megamenu > ul ya
   existente en style.css. Aqui solo se define el panel interior. */
.pcx-mega {
    margin-top: -25px;
    margin-bottom: -25px;
}

.pcx-mega__inner {
    padding: 36px 30px 30px;
    background-color: var(--fixpro-white);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.07);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pcx-mega__title {
    margin: 0 0 14px;
    font-family: var(--fixpro-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fixpro-base);
}

.pcx-mega__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcx-mega__list>li {
    padding: 0 !important;
    margin: 0;
}

/* Los selectores de submenu de style.css son de hijo directo sobre <li>,
   por lo que no alcanzan a estos enlaces: se estilan aqui de cero. */
.pcx-mega__link {
    display: block;
    padding: 9px 0;
    font-family: var(--fixpro-font-two);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--fixpro-black);
    transition: color 200ms linear, transform 200ms linear;
}

.pcx-mega__link:hover,
.pcx-mega__link:focus-visible {
    color: var(--fixpro-base);
    transform: translateX(4px);
}

.pcx-mega__feature {
    padding: 22px;
    border-radius: 10px;
    background-color: rgba(var(--fixpro-base-rgb), 0.07);
}

.pcx-mega__feature-eyebrow {
    margin: 0 0 6px;
    font-family: var(--fixpro-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fixpro-base);
}

.pcx-mega__feature-title {
    margin: 0 0 8px;
    font-family: var(--fixpro-font-two);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-mega__feature-text {
    margin: 0 0 14px;
    font-family: var(--fixpro-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fixpro-gray);
}

.pcx-mega__feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fixpro-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fixpro-base);
}

.pcx-mega__feature-cta:hover {
    text-decoration: underline;
}

/* ------------------------------------------------ Doble entrada en el movil */

.pcx-mnav__profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.pcx-mnav__profile {
    display: block;
    padding: 12px 10px;
    border-radius: 8px;
    background-color: rgba(var(--fixpro-white-rgb), 0.07);
    border: 1px solid rgba(var(--fixpro-white-rgb), 0.14);
    text-align: center;
    transition: background-color 200ms linear, border-color 200ms linear;
}

.pcx-mnav__profile:hover,
.pcx-mnav__profile:focus-visible {
    background-color: rgba(var(--fixpro-base-rgb), 0.18);
    border-color: var(--fixpro-base);
}

.pcx-mnav__profile-label {
    display: block;
    font-family: var(--fixpro-font-two);
    font-size: 15px;
    font-weight: 700;
    color: var(--fixpro-white);
}

.pcx-mnav__profile-sub {
    display: block;
    margin-top: 2px;
    font-family: var(--fixpro-font);
    font-size: 12px;
    line-height: 1.3;
    color: rgba(var(--fixpro-white-rgb), 0.65);
}

/* --------------------------------------- Barra de accion fija (solo movil) */

.pcx-actionbar {
    display: none;
}

@media only screen and (max-width: 767px) {
    .pcx-actionbar {
        position: fixed;
        z-index: 99;
        bottom: 0;
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background-color: var(--fixpro-white);
        border-top: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
    }

    .pcx-actionbar__item {
        /* 56px: por encima del minimo tactil de 44px (WCAG 2.5.5) */
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        font-family: var(--fixpro-font);
        font-size: 11px;
        line-height: 1.2;
        font-weight: 600;
        color: var(--fixpro-black);
    }

    .pcx-actionbar__item span[class^="icon-"] {
        font-size: 17px;
        color: var(--fixpro-base);
    }

    .pcx-actionbar__item:active {
        background-color: rgba(var(--fixpro-base-rgb), 0.08);
    }

    /* Evita que la barra tape el final del documento. */
    body {
        padding-bottom: 56px;
    }
}

/* ------------------------------------------------------- Pagina  esqueleto */

.pcx-shell {
    padding: 100px 0;
}

.pcx-shell__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.pcx-shell__flag {
    margin: 0 0 12px;
    font-family: var(--fixpro-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fixpro-base);
}

.pcx-shell__title {
    margin: 0 0 14px;
    font-family: var(--fixpro-font-two);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-shell__text {
    margin: 0 0 26px;
    font-family: var(--fixpro-font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fixpro-gray);
}

/* ------------------------------------------------- Paginas legales (texto) */

/* Columna estrecha y ritmo vertical amplio: son paginas de leer, no de
   convertir. Mismo ancho que .pcx-shell__inner para no introducir una
   medida nueva. */
.pcx-legal {
    padding: 90px 0;
}

.pcx-legal__inner {
    max-width: 780px;
    margin: 0 auto;
}

.pcx-legal__title {
    margin: 40px 0 14px;
    font-family: var(--fixpro-font-two);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-legal__inner > .pcx-legal__title:first-child {
    margin-top: 0;
}

.pcx-legal__inner p {
    margin: 0 0 16px;
    font-family: var(--fixpro-font);
    font-size: 17px;
    line-height: 1.7;
    color: var(--fixpro-gray);
}

.pcx-legal__datos {
    margin: 0 0 16px;
}

.pcx-legal__datos li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(var(--fixpro-black-rgb), 0.08);
    font-family: var(--fixpro-font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--fixpro-gray);
}

.pcx-legal__datos li:last-child {
    border-bottom: 0;
}

.pcx-legal__datos strong {
    color: var(--fixpro-black);
}

/* ------------------------------------------------------------------- Foco */

/* La plantilla no ofrece un indicador de foco consistente. Se establece uno
   para los componentes de navegacion nuevos (WCAG 2.4.7). El resto de la web
   lo recibira al aplicar el sistema. */
.pcx-mega__link:focus-visible,
.pcx-mega__feature-cta:focus-visible,
.pcx-mnav__profile:focus-visible,
.pcx-actionbar__item:focus-visible {
    outline: 2px solid var(--fixpro-base);
    outline-offset: 2px;
}

/* ------------------------------------------------- Tarjeta "Cómo llegar" */

/* Sustituye al iframe de Google Maps: mismo hueco visual, pero sin contactar
   con Google hasta que el visitante pulsa. Ver el comentario en contact.html. */
.pcx-mapa {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 420px;
    padding: 32px;
    border-radius: 12px;
    background-color: rgba(var(--fixpro-black-rgb), 0.04);
    border: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
    text-decoration: none;
    transition: background-color 300ms ease, border-color 300ms ease;
}

.pcx-mapa:hover {
    background-color: rgba(var(--fixpro-base-rgb), 0.08);
    border-color: rgba(var(--fixpro-base-rgb), 0.35);
}

.pcx-mapa__icono {
    flex-shrink: 0;
    font-size: 34px;
    color: var(--fixpro-base);
}

.pcx-mapa__texto {
    display: block;
    flex: 1 1 auto;
}

.pcx-mapa__titulo {
    display: block;
    font-family: var(--fixpro-font-two);
    font-size: 22px;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-mapa__sub {
    display: block;
    margin-top: 4px;
    font-family: var(--fixpro-font);
    font-size: 16px;
    color: var(--fixpro-gray);
}

.pcx-mapa__accion {
    flex-shrink: 0;
    font-family: var(--fixpro-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fixpro-base);
}

@media only screen and (max-width: 767px) {
    .pcx-mapa {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        gap: 12px;
    }
}

/* ------------------------------------------------------ Catálogo (tarjetas) */

.pcx-catalogo {
    padding: 90px 0;
}

.pcx-catalogo__intro {
    max-width: 720px;
    margin: 0 auto 44px;
    text-align: center;
}

.pcx-catalogo__titulo {
    margin: 0 0 12px;
    font-family: var(--fixpro-font-two);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-catalogo__texto {
    margin: 0;
    font-family: var(--fixpro-font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fixpro-gray);
}

.pcx-cat {
    height: 100%;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 12px;
    background-color: var(--fixpro-white);
    border: 1px solid rgba(var(--fixpro-black-rgb), 0.10);
    border-bottom: 3px solid var(--fixpro-base);
    transition: box-shadow 300ms ease, transform 300ms ease;
}

.pcx-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
}

.pcx-cat__titulo {
    margin: 0 0 10px;
    font-family: var(--fixpro-font-two);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--fixpro-black);
}

.pcx-cat__texto {
    margin: 0 0 18px;
    font-family: var(--fixpro-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fixpro-gray);
}

.pcx-cat__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fixpro-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--fixpro-base);
}

.pcx-cat__cta:hover {
    text-decoration: underline;
}