/* KREA CYBERGCODE — sistema de ancho fluido para toda la web publica */
:root {
    --public-gutter: clamp(12px, 1.6vw, 28px);
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Encabezado, navegacion y pie: extremos utiles con respiracion minima. */
.header {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

.nav-menu {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

.footer {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

/* Portada y listados. */
.hero {
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

.hero-content {
    width: 100% !important;
    max-width: none !important;
}

.section,
.listing-filters,
#productos.section {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

.public-breadcrumb {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

/* Ficha moderna y vistas heredadas de productos/boxes. */
.pd-wrap,
.pd-features-bar,
.pd-tabs-section,
.pd-related,
.product-detail-container,
.product-tabs,
.related-products {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

/* Ficha de producto: usa el lienzo disponible sin sobredimensionar la foto. */
body .pd-wrap {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: minmax(0, 620px) minmax(380px, 520px) !important;
    justify-content: center;
    gap: clamp(28px, 3vw, 48px) !important;
}

body .pd-gallery {
    min-width: 0;
}

body .pd-main-wrap {
    width: 100%;
    max-width: 536px;
}

body .pd-main-img {
    width: 100%;
    max-height: 620px;
    object-fit: contain;
}

body .pd-availability {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 4px;
    padding: 9px 12px;
}

body .pd-availability small {
    margin-left: 8px;
}

body .pd-purchase-box {
    width: min(100%, 520px);
    box-sizing: border-box;
}

body .pd-qty-row {
    grid-template-columns: 118px minmax(220px, 320px) !important;
    justify-content: start;
}

body .pd-btn-cart {
    width: 100%;
    min-height: 50px !important;
}

body .pd-action-row {
    width: min(100%, 420px);
}

body .pd-btn-wa {
    width: 100%;
    min-height: 46px !important;
}

/* Contacto usa el lienzo completo, manteniendo una medida comoda para escribir. */
.public-contact-layout,
.public-contact-benefits {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.public-contact-layout > form {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.public-contact-benefits {
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
}

/* Paginas institucionales: estructura ancha, texto con longitud legible. */
body .legal-page {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

body .legal-hero,
body .legal-layout {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}

body .legal-card > p,
body .legal-card > ul,
body .faq-item > p {
    max-width: 1100px;
}

/* Login y registro conservan tarjetas legibles, pero usan todo el lienzo exterior. */
.auth-container {
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--public-gutter) !important;
    padding-right: var(--public-gutter) !important;
}

@media (max-width: 900px) {
    .header {
        padding-left: var(--public-gutter) !important;
        padding-right: var(--public-gutter) !important;
    }

    .nav-menu {
        padding-left: var(--public-gutter) !important;
        padding-right: var(--public-gutter) !important;
    }

    .pd-wrap,
    .pd-features-bar,
    .pd-tabs-section,
    .pd-related,
    .product-detail-container,
    .product-tabs,
    .related-products {
        padding-left: var(--public-gutter) !important;
        padding-right: var(--public-gutter) !important;
    }

    body .pd-wrap {
        width: 100% !important;
        max-width: 720px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .pd-main-wrap {
        max-width: 620px;
        margin-inline: auto;
    }
}

@media (max-width: 560px) {
    body .legal-layout {
        gap: 14px;
    }

    body .legal-hero,
    body .legal-card {
        border-radius: 12px;
    }

    body .pd-availability {
        width: 100%;
        box-sizing: border-box;
    }

    body .pd-availability small {
        flex-basis: auto;
        margin-left: 4px;
    }

    body .pd-purchase-box,
    body .pd-action-row {
        width: 100%;
    }

    body .pd-qty-row {
        grid-template-columns: 1fr !important;
    }
}