/* BLOQUE 1 · SHELL EXTERIOR CANONICO
   Fecha/hora: 27/09/2026 02:21 Europe/Madrid */
.main-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.gx4-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (max-width: 1180px) {
    .main-wrapper {
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }
}
@media (max-width: 991px) {
    .main-wrapper {
        width: calc(100% - 36px) !important;
    }
}
@media (max-width: 640px) {
    .main-wrapper {
        width: calc(100% - 32px) !important;
    }
}

/* =========================================================
   TIENDA GYALUX · PORTADA FÍSICA CANÓNICA
   Consolidada desde la propuesta index4.
   Hoja exclusiva de store.index: no gobierna Gyalux Digital,
   carrito, producto, checkout, cliente ni administración.
   ========================================================= */

.gx-store-main {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.gx4-page,
.gx4-page * {
    box-sizing: border-box;
}

.gx4-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 84px;
    color: #10223A;
    font-family: 'Inter', sans-serif;
}

.gx4-page h1,
.gx4-page h2,
.gx4-page h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #001A3A;
    letter-spacing: 0;
}

.gx4-page p {
    color: #4A5568;
}

.gx4-page .eyebrow {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    color: #CBA358;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 100;
    line-height: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gx4-button {
    min-height: 44px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #001A3A;
    border-radius: 8px;
    background: #001A3A;
    color: #FFFFFF;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.gx4-button:hover,
.gx4-button:focus-visible {
    color: #FFFFFF;
    background: #0B3158;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 26, 58, .14);
}

.gx4-button-gold {
    border-color: #CBA358;
    background: linear-gradient(135deg, #DFB96E 0%, #B88E45 100%);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px #CBA358, 0 8px 20px rgba(203, 163, 88, .30);
    text-shadow: 1px 1px 3px rgba(0, 26, 58, .60);
    transform: none;
    transition: transform .30s ease;
}

.gx4-button-gold:hover,
.gx4-button-gold:focus-visible {
    border-color: #CBA358;
    background: linear-gradient(135deg, #DFB96E 0%, #B88E45 100%);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px #CBA358, 0 8px 20px rgba(203, 163, 88, .30);
    transform: translateY(-2px);
}

/* Cierre */
.gx4-launch {
    min-height: 0;
    padding: 34px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    border-top: 2px solid #CBA358;
    border-bottom: 1px solid rgba(0,26,58,.12);
    background: rgba(255,255,255,.66);
}

.gx4-launch > div:first-child {
    max-width: 760px;
}

.gx4-launch p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.62;
}

.gx4-launch-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.gx4-launch-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,26,58,.13);
    border-radius: 8px;
    background: #fff;
    color: #001A3A;
    text-decoration: none;
}

.gx4-launch-icon:hover {
    color: #9A742F;
    border-color: #CBA358;
}

/* Barra de contexto canónica */
.gx-context-bar {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    border-top: 1px solid rgba(0,26,58,.06);
    border-bottom: 1px solid rgba(0,26,58,.08);
    background: rgba(255,255,255,.74);
}

.gx-context-bar-inner {
    width: 100%;
    max-width: 1200px;
    min-height: 46px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: center;
}

.gx-context-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    color: #536174;
    font-size: .77rem;
    line-height: 1.3;
    text-align: center;
}

.gx-context-item + .gx-context-item {
    border-left: 1px solid rgba(0,26,58,.08);
}

.gx-context-item i {
    width: 13px;
    min-width: 13px;
    flex: 0 0 13px;
    color: #CBA358;
    font-size: .9rem;
    text-align: center;
}

/* Jerarquía tipográfica cerrada */
html body .gx4-page h1 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 35px !important;
    font-weight: 700 !important;
    line-height: 41.3px !important;
    letter-spacing: -0.45px !important;
}

html body .gx4-page h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 28.32px !important;
    letter-spacing: -0.45px !important;
}

html body .gx4-page h3 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 17.92px !important;
    font-weight: 800 !important;
    line-height: 22.4px !important;
    letter-spacing: normal !important;
}

@media (max-width: 1180px) {
    .gx-context-bar-inner {
        width: calc(100% - 44px);
    }
}

@media (max-width: 990px) {
    .gx4-page {
        width: 100%;
        padding: 0 18px 58px;
    }

    .gx4-hero {
        grid-template-columns: 1fr;
        margin-bottom: 68px;
    }

    .gx4-hero-copy {
        padding: 48px 34px 44px;
    }

    .gx4-launch {
        align-items: flex-start;
        flex-direction: column;
        padding: 36px 30px;
    }
}

@media (max-width: 991px) {
    .gx-context-bar-inner {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .gx-context-item {
        min-height: 39px;
        justify-content: flex-start;
        padding-left: 22px;
        padding-right: 22px;
        text-align: left;
    }

    .gx-context-item + .gx-context-item {
        border-left: 0;
        border-top: 1px solid rgba(0,26,58,.07);
    }

    html body .gx4-page h1 {
        font-size: 35px !important;
        line-height: 41.3px !important;
    }

    html body .gx4-page h2 {
        font-size: 24px !important;
        line-height: 28.32px !important;
    }

    html body .gx4-page .gx4-hero-copy {
        padding: 32px 28px !important;
    }

    html body .gx4-page .gx4-launch {
        padding: 30px 28px !important;
    }
}

@media (max-width: 650px) {
    .gx4-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gx4-hero-copy {
        padding: 40px 22px 34px;
    }

    .gx4-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gx4-button {
        width: 100%;
    }

    .gx4-launch-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .gx4-launch-actions .gx4-button {
        flex: 1 1 180px;
        width: auto;
    }
}

@media (max-width: 640px) {
    .gx-context-bar {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .gx-context-item {
        font-size: .72rem;
    }

    .gx4-page .eyebrow {
        margin-bottom: 11px !important;
    }

    html body .gx4-page h1,
    html body .gx4-page h2 {
        font-size: 23.2px !important;
        line-height: 27.376px !important;
        letter-spacing: -0.45px !important;
    }

    html body .gx4-page h1 {
        margin-bottom: 16px !important;
    }

    html body .gx4-page .gx4-hero-copy {
        padding: 24px 20px !important;
    }

    html body .gx4-page .gx4-launch {
        padding: 28px 20px !important;
    }
}

@media (max-width: 360px) {
    html body .gx4-page h1 {
        font-size: 22.72px !important;
        line-height: 26.3552px !important;
    }

    html body .gx4-page h2 {
        font-size: 20.48px !important;
        line-height: 24.576px !important;
    }

    html body .gx4-page .gx4-hero-copy,
    html body .gx4-page .gx4-launch {
        padding-inline: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
}

/* Portada: estructura de Servicios, contenido propio de Tienda. */
.gx4-page .gx4-hero{min-height:570px;position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(420px,.76fr);grid-template-rows:1fr auto auto;overflow:hidden;margin:8px 0 88px;border:1px solid rgba(0,26,58,.09);border-radius:8px;background:rgba(255,255,255,.88);box-shadow:0 24px 60px rgba(0,26,58,.08)}
.gx4-page .gx4-hero-copy{position:relative;z-index:2;padding:38px 42px;align-self:stretch}
.gx4-page .gx4-hero-copy p{max-width:590px;margin:0;font-size:1.02rem;line-height:1.7}
.gx4-page .gx4-hero-copy p+p{margin-top:18px}
.gx4-page .gx4-hero-actions{margin-top:30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.gx4-page .gx4-hero-media{position:relative;min-height:470px;overflow:hidden}
.gx4-page .gx4-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.gx4-page .gx4-family-rail{grid-column:1/-1;min-height:78px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(0,26,58,.09);background:rgba(246,248,250,.96)}
.gx4-page .gx4-family-rail button{min-width:0;padding:17px 12px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-right:1px solid rgba(0,26,58,.09);border-radius:0;background:transparent;color:#001A3A;font-family:inherit;font-size:.78rem;font-weight:600;line-height:1.4;text-align:center;cursor:pointer}
.gx4-page .gx4-family-rail button:last-child{border-right:0}
.gx4-page .gx4-family-rail button>i:first-child{color:#CBA358;font-size:.95rem}
.gx4-page .gx4-family-rail button:hover,.gx4-page .gx4-family-rail button[aria-expanded="true"]{background:#fff;box-shadow:inset 0 -2px #CBA358}
.gx4-page .gx4-family-rail button:focus-visible{outline:2px solid #001A3A;outline-offset:-4px}
.gx4-page .gx4-disclosure{transition:transform .18s ease}
.gx4-page [aria-expanded="true"] .gx4-disclosure{transform:rotate(180deg)}
.gx4-page .gx4-family-panels{grid-column:1/-1}
.gx4-page .gx4-family-panel{padding:32px 42px;border-top:1px solid rgba(0,26,58,.09)}
.gx4-page .gx4-family-panel[hidden]{display:none}
.gx4-page .gx4-family-panel p{max-width:850px;margin:0;font-size:.96rem;line-height:1.7}
.gx4-page .gx4-family-products:empty{display:none}
@media(max-width:991px){
.gx4-page .gx4-hero{grid-template-columns:1fr;grid-template-rows:auto 330px auto auto;margin-bottom:68px}
.gx4-page .gx4-hero-media{min-height:0}
.gx4-page .gx4-family-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
.gx4-page .gx4-family-rail button{min-height:68px;border-bottom:1px solid rgba(0,26,58,.09)}
.gx4-page .gx4-family-rail button:nth-child(3n){border-right:0}
.gx4-page .gx4-family-panel{padding:28px}
.gx4-page .gx4-launch{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(max-width:640px){
.gx4-page .gx4-hero{grid-template-rows:auto auto auto auto}
.gx4-page .gx4-hero-media{aspect-ratio:16/9}
.gx4-page .gx4-family-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
.gx4-page .gx4-family-rail button:nth-child(3n){border-right:1px solid rgba(0,26,58,.09)}
.gx4-page .gx4-family-rail button:nth-child(2n){border-right:0}
.gx4-page .gx4-family-panel{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){.gx4-page .gx4-disclosure{transition:none}}

/* Catálogo inicial por familias. Solo presentación; sin fichas individuales. */
.gx4-page .gx4-family-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.gx4-page .gx4-product-card{min-width:0;display:flex;flex-direction:column;padding:24px;border:1px solid rgba(0,26,58,.12);border-radius:8px;background:#fff}
.gx4-page .gx4-product-card p{margin:0;font-size:.92rem;line-height:1.65}
.gx4-page .gx4-product-price{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:7px;color:#001A3A}
.gx4-page .gx4-product-price span{font-size:.75rem;color:#536174;line-height:1.5}
.gx4-page .gx4-product-price strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.12rem;line-height:1.35;font-weight:800}
.gx4-page .gx4-family-panel .gx4-catalog-conditions{max-width:none;margin:22px 0 0;font-size:.75rem;line-height:1.6;color:#536174}
@media(max-width:991px){.gx4-page .gx4-family-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gx4-page .gx4-family-products{grid-template-columns:1fr;gap:16px;margin-top:24px}.gx4-page .gx4-product-card{padding:20px}}

/* Fotos de modelos concretos, únicamente catálogo Wi-Fi. */
.gx4-page #productos-wifi .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}

/* Fotos de modelos concretos de Televisión y antenas. */
.gx4-page #productos-television .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}

/* Fotos y consulta de variedades, solo en Exterior. */
.gx4-page #productos-exterior .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}
.gx4-page #productos-exterior .gx4-exterior-options{max-width:none;margin:22px 0 0;padding:14px 18px;border-left:3px solid #CBA358;background:#F8F9FB;font-size:.9rem;line-height:1.7}
.gx4-page #productos-exterior .gx4-exterior-options strong{color:#001A3A}
.gx4-page #productos-exterior .gx4-exterior-options a{color:#001A3A;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gx4-page #productos-exterior .gx4-exterior-options a:focus-visible{outline:2px solid #001A3A;outline-offset:4px}

/* Fotos de modelos concretos de Seguridad y vigilancia. */
.gx4-page #productos-seguridad .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}

/* Fotos de modelos concretos de Hogar práctico y ahorro. */
.gx4-page #productos-hogar .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}

/* Fotos de modelos concretos de Alojamientos y negocios. */
.gx4-page #productos-negocios .gx4-product-image{display:block;width:100%;height:190px;object-fit:contain;object-position:center;margin:0 0 22px;background:#fff}
