@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

/* Colores compartidos por las dos páginas. */

:root {

    --background: #e9eaed;

    --surface: #f5f5f6;

    --navy: #142337;

    --ink: #202630;

    --muted: #59616d;

    --blue: #245fd1;

    --line: #ccd0d6;

    /* Marco compartido: navegación y contenido siguen la misma retícula. */
    --page-max-width: 1504px;
    --page-gutter: clamp(16px, 2.5vw, 40px);
    --site-max-width: var(--page-max-width);
    --content-max-width: var(--page-max-width);
    --site-gutter: var(--page-gutter);
    --content-gutter: var(--page-gutter);
    --site-container-width: min(var(--page-max-width), calc(100% - 2 * var(--page-gutter)));
    --content-container-width: var(--site-container-width);

    /* Escala tipográfica compartida. */
    --font-body: "DM Sans", "Segoe UI", Arial, sans-serif;
    --font-display: var(--font-body);
    --text-display: clamp(40px, 5.2vw, 72px);
    --text-h1: clamp(34px, 4vw, 56px);
    --text-h2: clamp(26px, 3vw, 35px);
    --text-h3: clamp(19px, 2vw, 24px);
    --text-body-lg: 18px;
    --text-body: 16px;
    --text-small: 14px;
    --text-label: 12px;

    /* Ritmo, superficies, contornos y estados semánticos. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-control: 10px;
    --radius-card: 16px;
    --radius-panel: 22px;
    --radius-pill: 999px;
    --elevation-card: 0 8px 24px rgb(44 39 60 / 7%);
    --elevation-dialog: 0 20px 56px rgb(20 16 30 / 20%);
    --motion-fast: 150ms;
    --motion-standard: 220ms;
    --ease-standard: cubic-bezier(.2, .75, .25, 1);
    --page-top-space: clamp(24px, 2.5vw, 36px);
    --section-space: clamp(64px, 6vw, 96px);
    --content-gap: clamp(20px, 2.5vw, 36px);
    --grid-gap: clamp(16px, 1.5vw, 24px);
    --heading-content-gap: clamp(16px, 2vw, 28px);

}

* { box-sizing: border-box; }

img { display: block; max-width: 100%; }

body { margin: 0; background: var(--surface-page, var(--background)); color: var(--text-primary, var(--ink)); font: var(--text-body)/1.6 var(--font-body); }

a { color: inherit; text-decoration: none; }

a:hover { color: var(--blue); }

button, input, select { font: inherit; }

button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--focus-ring, #7655b5); outline-offset: 3px; }

[hidden] { display: none !important; }

.container, .components-hub, .category-main, .about-main, .product-detail-shell, .legal-page {
    width: var(--content-container-width);
    max-width: var(--content-max-width);
    margin-inline: auto;
}

.header-inner, .footer-inner, .footer-bottom {
    width: var(--site-container-width);
    max-width: var(--site-max-width);
    margin-inline: auto;
}

.skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; padding: 12px; }

.skip:focus { top: 12px; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { line-height: 1.15; }

h1 { font-family: var(--font-display); font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); letter-spacing: -.035em; margin-bottom: 0; }
h3 { font-size: var(--text-h3); }

.eyebrow { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: 1.7px; margin-bottom: 16px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 46px; padding: 12px 22px; background: var(--accent, var(--blue)); color: white; border: 0; border-radius: var(--radius-control); font-size: var(--text-small); font-weight: 600; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }

.button:hover { background: var(--accent-hover, #174cab); color: white; }

.button:active { transform: translateY(1px); }

input, select, textarea { border-radius: var(--radius-control); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .button:active { transform: none; }
}

.text-link, .text-button { border: 0; background: transparent; font-size: 14px; font-weight: 600; padding: 8px 0; }

.text-link:hover, .text-button:hover { color: var(--blue); text-decoration: underline; }

.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; }



/* Encabezado: dos páginas, sin menús desplegables. */

.site-header { background: var(--navy); color: #f4f6fa; }

.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; }
.logo-art { display: block; width: 220px; }
.logo-art img { display: block; width: 100%; height: auto; }
.site-footer .logo-art { width: 210px; }
@media (max-width: 600px) {
    .logo-art { width: clamp(100px, calc(100vw - 240px), 150px); }
    .site-header .header-actions { gap: 2px; }
    .site-header .header-icon-button { width: 32px; height: 34px; padding: 7px; }
}

nav { display: flex; gap: 32px; }

nav a { font-size: 14px; padding: 20px 0; border-bottom: 2px solid transparent; }

nav a[aria-current="page"] { color: #b6ceff; border-color: #6e9ff5; }

.site-header a:hover, .site-footer a:hover { color: #aecbff; }

.site-header .header-inner { position: relative; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-icon-button {
    display: inline-grid;
    width: 42px;
    height: 42px;
    padding: 10px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #d5ddea;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.header-icon-button:hover {
    background: rgba(255, 255, 255, .1);
    color: white;
}

.header-icon-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

/* Acceso de cuenta: el menú aparece al pasar el cursor o al navegar con teclado. */
.profile-menu-anchor { position: relative; display: inline-flex; align-items: center; }
.profile-hover-menu {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    display: grid;
    width: min(292px, calc(100vw - 28px));
    max-height: calc(100vh - 105px);
    overflow: auto;
    justify-items: center;
    gap: 10px;
    padding: 22px 24px 24px;
    border: 1px solid #e2dbea;
    border-radius: 0 0 14px 14px;
    background: #f4f1f8;
    color: #352d48;
    text-align: center;
    box-shadow: 0 16px 34px rgba(34, 27, 47, .18);
    transform: translateX(-50%);
    animation: profile-menu-arrive .16s ease-out;
}
.profile-hover-menu[hidden] { display: none; }
.profile-hover-menu::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 8px;
    content: "";
}
.profile-hover-menu::after {
    position: absolute;
    top: -7px;
    left: 50%;
    width: 13px;
    height: 13px;
    transform: translateX(-50%) rotate(45deg);
    border-top: 1px solid #e2dbea;
    border-left: 1px solid #e2dbea;
    background: #f4f1f8;
    content: "";
}
.profile-hover-menu a { position: relative; z-index: 1; }
.profile-hover-menu .profile-menu-primary {
    display: inline-flex;
    min-width: 100px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 999px;
    background: #ff8059;
    color: #2c273c;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.profile-hover-menu .profile-menu-primary:hover { background: #ff9878; color: #2c273c; transform: translateY(-1px); }
.profile-hover-menu p { margin: 3px 0 -7px; color: #625a70; font-size: 13px; }
.profile-hover-menu .profile-menu-secondary {
    color: #67489f;
    font-size: 13px;
    text-underline-offset: 4px;
}
.profile-hover-menu .profile-menu-secondary:hover { color: #4d347c; }
.profile-menu-summary { display: grid; width: 100%; gap: 4px; justify-items: start; padding-bottom: 13px; border-bottom: 1px solid #e2dbea; text-align: left; }
.profile-menu-eyebrow { color: #7655b5; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.profile-menu-summary strong { max-width: 100%; overflow: hidden; color: #352d48; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-summary small { max-width: 100%; overflow: hidden; color: #70687d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-count { margin-top: 5px; padding: 5px 9px; border-radius: 999px; background: #eae3f5; color: #67489f; font-size: 10px; font-weight: 700; }
.profile-menu-links { display: grid; width: 100%; gap: 0; }
.profile-menu-links a { padding: 9px 5px; border-bottom: 1px solid #e8e2ef; color: #40384e; font-size: 12px; text-align: left; text-decoration: none; }
.profile-menu-links a:hover { color: #67489f; text-decoration: underline; text-underline-offset: 3px; }
.profile-menu-signout { justify-self: start; padding: 8px 5px 0; border: 0; background: transparent; color: #67489f; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.profile-menu-signout:disabled { cursor: wait; opacity: .7; }
@keyframes profile-menu-arrive { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }

.build-auth-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 28px 0;
    padding: 18px 20px;
    border: 1px solid #ded4ee;
    border-radius: 12px;
    background: #f4f0fa;
    color: #352d48;
}
.build-auth-notice[hidden] { display: none; }
.build-auth-notice strong { display: block; font-size: 15px; }
.build-auth-notice p { margin: 4px 0 0; color: #70687d; font-size: 13px; }
.build-auth-notice .button { flex: 0 0 auto; }
#build-storage-hint { font-size: 14px; }
#build-storage-badge { font-size: 10px; }
#prototype-status .build-login-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 6px 0 0 7px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #7655b5;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
#prototype-status .build-login-link:hover { background: #62439c; color: #fff; }
@media (max-width: 600px) {
    .build-auth-notice { align-items: flex-start; flex-direction: column; margin: 16px 18px 0; padding: 16px; }
}

.header-dialog {
    width: min(560px, calc(100% - 32px));
    max-width: none;
    max-height: min(80vh, 720px);
    padding: 34px;
    overflow: auto;
    border: 1px solid #d7dce4;
    border-radius: 18px;
    background: #fbfbfc;
    color: #202630;
    box-shadow: 0 24px 90px #0f1a2c40;
}

.header-dialog::backdrop { background: #0d1725a6; backdrop-filter: blur(3px); }

.header-search-dialog {
    position: fixed;
    inset: var(--header-search-top, 70px) 0 auto;
    width: var(--site-container-width);
    max-width: var(--site-max-width);
    max-height: calc(100dvh - var(--header-search-top, 70px) - 12px);
    margin: 0 auto;
    padding: 0;
    overflow: hidden auto;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: #fbf9ff;
    color: #30283d;
    box-shadow: 0 22px 56px rgba(9, 6, 15, .42);
    opacity: 0;
    transform: translateY(-12px) scale(.992);
    transition: opacity .2s ease, transform .24s cubic-bezier(.2, .75, .25, 1);
}
.header-search-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.header-search-dialog::backdrop { background: transparent; backdrop-filter: none; }
.header-search-scrim {
    position: fixed;
    z-index: 1001;
    inset: var(--header-search-top, 70px) 0 0;
    background: rgba(24, 19, 33, .12);
    backdrop-filter: blur(.8px);
    cursor: default;
    opacity: 0;
    transition: opacity .2s ease;
}
.header-search-scrim.is-visible { opacity: 1; }
.header-search-topbar {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 16px;
    padding: 12px 30px;
    border-bottom: 1px solid rgba(10, 7, 15, .42);
    background: var(--navy);
    color: #f7f2ff;
}
.header-search-large-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.header-search-topbar input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: clamp(18px, 2vw, 24px);
    box-shadow: none;
}
.header-search-topbar input:focus { box-shadow: none; }
.header-search-topbar input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.header-search-topbar input::placeholder { color: #c9c0d5; }
.header-search-topbar .header-dialog-close-form { position: static; flex: 0 0 auto; }
.header-search-content { display: grid; grid-template-columns: minmax(190px, 255px) minmax(0, 1fr); min-height: 340px; }
.header-search-dialog:not(.has-query) .header-search-content { display: none; }
.header-search-suggestions { padding: 26px 24px 30px 30px; border-right: 1px solid rgba(31, 24, 42, .2); }
.header-search-suggestions h2,
.header-search-products-heading h2 { margin: 0; font-size: 17px; }
.header-search-suggestions > div { display: grid; gap: 2px; margin-top: 17px; }
.header-search-suggestion {
    min-height: 39px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.header-search-suggestion:hover, .header-search-suggestion:focus-visible { color: #7655b5; }
.header-search-products { min-width: 0; padding: 26px 30px 30px; }
.header-search-products-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(31, 24, 42, .2); }
.header-search-status { margin: 0; color: #777181; font-size: 13px; }
.header-search-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; padding-top: 18px; }
.header-search-product { display: grid; min-width: 0; align-content: start; gap: 7px; color: inherit; text-decoration: none; }
.header-search-product-media { display: grid; aspect-ratio: 1 / .88; overflow: hidden; place-items: center; border-radius: 4px; background: #f3f1f6; }
.header-search-product-media img { width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.header-search-product-media.is-unavailable::after { content: 'PCForge'; color: #8b7aa5; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.header-search-product strong { font-size: 15px; line-height: 1.3; }
.header-search-product > span:not(.header-search-product-media) { color: #777181; font-size: 12px; line-height: 1.4; }
.header-search-product .header-search-product-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.header-search-product:hover strong, .header-search-product:focus-visible strong { color: #7655b5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 900px) {
    .header-search-content { grid-template-columns: 180px minmax(0, 1fr); }
    .header-search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .header-search-dialog { inset: var(--header-search-top, 64px) 0 auto; width: 100%; max-height: calc(100dvh - var(--header-search-top, 64px)); height: auto; margin: 0; border-radius: 0 0 16px 16px; }
    .header-search-topbar { min-height: 64px; gap: 10px; padding: 8px 15px; }
    .header-search-content { display: flex; flex-direction: column; }
    .header-search-suggestions { order: 1; padding: 14px 16px; border-right: 0; border-bottom: 1px solid rgba(31, 24, 42, .2); }
    .header-search-suggestions h2 { font-size: 14px; }
    .header-search-suggestions > div { display: flex; gap: 8px; margin-top: 9px; overflow-x: auto; }
    .header-search-suggestion { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(31, 24, 42, .3); border-radius: 99px; font-size: 12px; }
    .header-search-products { order: 2; padding: 18px 16px 24px; }
    .header-search-products-heading { align-items: start; flex-direction: column; gap: 5px; }
    .header-search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .header-search-dialog,
    .header-search-scrim { transition: none; }
    .header-search-dialog { transform: none; }
}

.header-dialog-close-form { position: absolute; top: 15px; right: 16px; }

.header-dialog-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #e9edf2;
    color: #263246;
    font-size: 25px;
    line-height: 1;
}

.header-dialog h2 { margin-bottom: 20px; font-size: clamp(28px, 5vw, 38px); }

.header-dialog > label { margin-bottom: 8px; }

.header-search-status { margin: 13px 0; color: #697483; font-size: 13px; }

.header-search-results { display: grid; gap: 8px; }

.header-search-result {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid #e0e4e9;
    border-radius: 10px;
    background: white;
}

.header-search-result:hover { border-color: #8baeea; background: #f2f6fd; color: #202630; }

.header-search-result span { color: #687382; font-size: 12px; }

.header-profile-dialog > p:not(.eyebrow) { max-width: 450px; color: #586474; }

.profile-icon-large {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 50%;
    background: #e5ecf7;
    color: #245fd1;
}

.profile-icon-large svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.auth-status { min-height: 22px; color: #285ba6; font-size: 13px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 16px 0 20px; border-radius: 12px; background: #e9edf6; }
.auth-tabs button { padding: 11px; border: 0; border-radius: 9px; background: transparent; color: #34425d; cursor: pointer; }
.auth-tabs button.is-active { background: white; color: #174fb2; box-shadow: 0 2px 8px #111b2b18; font-weight: 700; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; color: #29354a; font-weight: 600; font-size: 13px; }
.auth-form input { width: 100%; padding: 12px 13px; border: 1px solid #cbd4e3; border-radius: 9px; background: white; color: #1d2838; font: inherit; }
.auth-form input:focus { outline: 2px solid #7199ec; outline-offset: 1px; }
.auth-form .button { justify-content: center; margin-top: 5px; cursor: pointer; }
.auth-hint { margin: -4px 0 0; color: #607087; font-size: 12px; }
.auth-external { margin-top: 24px; border-top: 1px solid #dae0e9; padding-top: 18px; text-align: center; color: #68758a; font-size: 13px; }
.auth-external > div { display: flex; gap: 10px; margin-top: 13px; }
.auth-external a { flex: 1; padding: 11px; border: 1px solid #cbd4e3; border-radius: 9px; background: white; color: #263858; font-weight: 650; }
.auth-member { display: grid; gap: 12px; }
.auth-member > strong { font-size: 22px; }
.auth-member > span { color: #637084; }
.auth-member .button { width: fit-content; margin: 7px 0; }
.auth-member details { border-top: 1px solid #dfe4eb; padding-top: 13px; }
.auth-member summary { cursor: pointer; color: #245fd1; }
.auth-member details .auth-form { margin-top: 14px; }
.auth-logout { width: fit-content; padding: 8px 0; border: 0; background: transparent; color: #a23c4c; text-decoration: underline; cursor: pointer; }



/* Portada con la fotografía integrada en el fondo. */

.hero { position: relative; isolation: isolate; min-height: 460px; margin-top: 32px; border-radius: 14px; overflow: hidden; background: #20242b; color: #f7f8fa; }

.hero-photo { position: absolute; right: 0; top: 0; width: 62%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.5); mask-image: linear-gradient(to right, transparent, black 45%); opacity: .85; z-index: -1; }

.hero-copy { padding: 72px 48px; }

.hero .eyebrow { color: #a8c5fa; }

h1 { font-size: clamp(38px, 4.6vw, 60px); letter-spacing: -2px; font-weight: 650; margin-bottom: 23px; }

.hero-copy > p:not(.eyebrow) { color: #d1d6df; font-size: 15px; margin-bottom: 30px; }



/* Accesos a categorías, inspirados en tarjetas sencillas de producto. */

.explore { padding: 54px 0; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }

.category-card { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #f0f1f3; }

.category-card:hover { background: #e1e7f0; color: var(--ink); border-color: #95afd8; }

.category-code { display: inline-block; color: #285ba6; font-size: 30px; letter-spacing: -1px; font-weight: 600; margin-bottom: 28px; }

.category-card h3 { font-size: 20px; margin-bottom: 8px; }

.category-card p { font-size: 13px; color: var(--muted); margin-bottom: 0; }

.category-arrow { position: absolute; right: 25px; top: 29px; color: var(--blue); font-size: 22px; }

.about { border-top: 1px solid var(--line); padding: 38px 0 52px; }

.about h2 { font-size: 27px; margin-bottom: 16px; }

.about > p:last-child { max-width: 660px; color: var(--muted); font-size: 14px; margin-bottom: 0; }



/* Catálogo: fotos de categoría y datos recibidos del servidor. */

.catalog-page { min-height: calc(100vh - 190px); }

.catalog { padding: 48px 0 64px; }

.catalog-note { color: var(--muted); font-size: 14px; margin: 20px 0 30px; }

.filters { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; padding: 22px; background: #dce3ed; border-radius: 12px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }

input, select { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #bec5cf; border-radius: 5px; background: var(--surface); color: var(--ink); }

.result-count { font-size: 13px; color: var(--muted); margin: 20px 0; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.product-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }

.product-photo { position: relative; margin: 0; height: 245px; overflow: hidden; flex-shrink: 0; }

.product-photo img { width: 100%; height: 100%; object-fit: contain; }

.product-photo figcaption { position: absolute; bottom: 12px; left: 20px; font-size: 10px; color: #48566a; }

.product-body { min-width: 0; padding: 24px; display: flex; flex-direction: column; flex: 1; overflow-wrap: anywhere; }

.product-category { font-size: 11px; color: var(--blue); font-weight: 700; margin-bottom: 12px; }

.product-body h3 { font-size: 22px; margin-bottom: 12px; }

.product-brand, .product-summary { color: var(--muted); font-size: 13px; }

.product-brand { margin-bottom: 8px; }

.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }

.product-status { font-size: 11px; color: var(--muted); }

.product-detail { border: 0; background: transparent; color: var(--blue); font-size: 12px; padding: 8px 0; }

.product-detail:hover { text-decoration: underline; }

.empty-state { padding: 35px; text-align: center; background: #dfe4eb; border-radius: 10px; }

.empty-state h3 { font-size: 22px; }

.empty-state p { color: var(--muted); }



/* Información básica del componente. */

dialog { width: min(530px, calc(100% - 32px)); max-height: calc(100% - 40px); padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }

dialog::backdrop { background: #101b2cbf; }

.dialog-close { display: block; margin: -12px -12px 8px auto; width: 36px; height: 36px; border: 0; background: #e0e4e9; border-radius: 50%; font-size: 24px; }

dialog h2 { margin-bottom: 18px; font-size: 27px; }

dialog p { font-size: 14px; color: var(--muted); }

dialog dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }

dialog dd { margin: 0; }

.detail-note { margin: 24px 0 0; }



/* Pie y adaptación al celular. */

.site-footer { background: var(--navy); color: #c9d2df; padding: 30px 0; }

.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; }

.footer-inner p { margin: 0; }

.site-footer .logo { color: white; }

@media (max-width: 800px) {

    .container, .components-hub, .category-main, .about-main, .product-detail-shell, .legal-page {
        width: var(--content-container-width);
    }

    .header-inner, .footer-inner, .footer-bottom {
        width: var(--site-container-width);
    }

    .header-inner { min-height: 64px; }

    nav { gap: 22px; }

    nav a { font-size: 13px; padding: 18px 0; }

    .hero { margin-top: 20px; }

    .hero-copy { padding: 48px 28px; }

    .category-card { padding: 22px; }

    .cards { grid-template-columns: 1fr; }

}

@media (max-width: 560px) {

    .logo { font-size: 24px; }

    .hero { min-height: 520px; }

    .hero-copy { padding: 36px 25px; }

    h1 { font-size: 40px; letter-spacing: -1.4px; }

    .hero-photo { width: 100%; height: 63%; top: auto; bottom: 0; mask-image: linear-gradient(to bottom, transparent, black 80%); opacity: .6; }

    .hero-copy > p:not(.eyebrow) { font-size: 14px; max-width: 280px; }

    .desktop-break { display: none; }

    .explore { padding: 36px 0; }

    .section-heading { align-items: start; gap: 14px; }

    .section-heading .text-link { font-size: 12px; white-space: nowrap; }

    .category-grid { grid-template-columns: 1fr; gap: 12px; }

    .category-card { display: flex; align-items: center; gap: 22px; padding: 22px; }

    .category-code { margin: 0; width: 65px; font-size: 25px; flex-shrink: 0; }

    .category-card h3 { font-size: 18px; padding-right: 20px; }

    .category-arrow { right: 18px; top: 20px; font-size: 18px; }

    .filters { grid-template-columns: 1fr; }

    .catalog { padding: 32px 0 45px; }

    .footer-inner { flex-wrap: wrap; gap: 16px; }

    .footer-inner > span { width: 100%; }

}

.catalog h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 0; letter-spacing: -1.3px; }



/* Bloques visuales del inicio: fotografías reales y colores suaves. */

.home-page { background: #e9eaed; }

.home-page .hero { min-height: 500px; }

.home-page .hero-copy { padding-top: 85px; padding-bottom: 85px; }

.home-page .explore { padding: 66px 0; }

.home-page .category-card { display: block; min-width: 0; padding: 0 28px 28px; border: 0; overflow: hidden; transition: transform .2s; }

.home-page .category-card:hover { transform: translateY(-4px); }

.category-cpu, .category-cpu:hover, .product-photo.photo-cpu { background: #cdd4df; }

.category-gpu, .category-gpu:hover, .product-photo.photo-gpu { background: #cbd7d2; }

.category-ram, .category-ram:hover, .product-photo.photo-ram { background: #ded5c7; }

.home-page .category-code { display: block; font-size: 10px; letter-spacing: 1.4px; margin: 4px 0 14px; color: #475a70; }

.home-page .category-card h3 { font-size: 24px; margin-bottom: 10px; }

.home-page .category-card p { font-size: 14px; margin: 0; }

.home-page .category-arrow { top: auto; bottom: 24px; right: 22px; }

/* Fondos pastel neutros: las fotos conservan sus colores originales. */

.category-photo {

    height: 270px;

    margin: 0 -28px 16px;

    overflow: hidden;

    position: relative;

}

/* Luz de estudio sobre el mismo color de la tarjeta, sin otro recuadro. */

.category-photo::before, .product-photo::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 35% 25%, #ffffff45, transparent 70%);

    pointer-events: none;

}

/* La sombra sigue el contorno recortado, como una pieza apoyada sobre la mesa. */

.component-object {

    position: absolute;

    inset: 0;

    filter: drop-shadow(3px 7px 3px #24304038) drop-shadow(8px 17px 12px #24304025);

}

.category-cpu .component-object, .photo-cpu .component-object {

    filter: drop-shadow(2px 4px 2px #2430404d) drop-shadow(5px 10px 7px #2430402e);

}

.category-ram .component-object, .photo-ram .component-object {

    filter: drop-shadow(1px 3px 2px #40372655) drop-shadow(3px 7px 5px #40372626);

}

/* Recortes trazados sobre las fotos originales de 800 × 600.

   Se oculta solo el fondo: no se cambia el color ni la forma del hardware.

   Si se sustituye una foto, también hay que revisar su contorno. */

.category-photo img, .product-photo img {

    position: absolute;

    left: 50%;

    top: 48%;

    width: 100%;

    max-width: none;

    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: contain;

    transform: translate(-50%, -50%);

}

.category-cpu .category-photo img, .photo-cpu img {

    width: 120%;

    clip-path: polygon(51.8% 20.6%, 73.6% 50%, 51.5% 78.6%, 29.8% 49.2%);

}

.category-gpu .category-photo img, .photo-gpu img {

    clip-path: polygon(6.1% 17.7%, 10.6% 18.4%, 11.4% 20%, 11.7% 23%, 12.5% 22.8%, 12.2% 14.1%, 13.3% 13.2%, 82.7% 29.8%, 92.2% 40.3%, 88.6% 62.1%, 90.1% 64.2%, 88.7% 65.5%, 52.6% 65.5%, 52.5% 66.2%, 50% 66.2%, 49% 67.3%, 26% 67.3%, 26% 65%, 11% 65.6%, 9.8% 65.1%, 9.3% 75%, 8.8% 75.5%, 8.9% 78.2%, 8.4% 78.2%, 8.5% 73%, 10.7% 21.4%, 7% 21%);

}

.category-ram .category-photo img, .photo-ram img {

    /* Dos contornos en un mismo recorte para los dos módulos. */

    clip-path: polygon(16% 48.3%, 53.5% 22.1%, 57.9% 33.4%, 20% 59.5%, 16% 48.3%, 44.3% 48.5%, 85.4% 62.6%, 83% 75.2%, 41.9% 60.9%, 44.3% 48.5%, 16% 48.3%);

}

/* Una sola composición: fotografía fundida en grafito y dos paneles de color. */

.inspiration { padding: 12px 0 64px; }

.inspiration .section-heading { margin-bottom: 30px; align-items: end; }

.section-intro { margin: 0; color: var(--muted); font-size: 14px; }

.inspiration-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }

.hardware-feature { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; background: #20272d; color: #f5f7fa; min-height: 650px; }

.feature-photo { position: absolute; inset: auto 0 0; height: 64%; z-index: -1; }

.feature-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; filter: saturate(.35); mask-image: linear-gradient(to bottom, transparent, black 50%); }

.feature-copy { padding: 42px; }

.feature-copy .eyebrow { color: #aac9f2; }

.feature-copy h3 { font-size: clamp(32px, 3.3vw, 43px); letter-spacing: -1.4px; margin: 0 0 18px; }

.feature-copy > p:not(.eyebrow) { font-size: 14px; color: #cbd5df; max-width: 340px; margin-bottom: 25px; }

.button-dark { background: #d8e6fa; color: #172d49; }

.button-dark:hover { background: #b8d0f3; color: #172d49; }

.idea-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }

.idea-card { padding: 34px 38px; border-radius: 14px; }

.idea-blue { background: #244d83; color: #f8fafc; }

.idea-sand { background: #e6ce9e; color: #342e24; }

.idea-label { font-size: 10px; letter-spacing: 1.8px; font-weight: 700; }

.idea-card h3 { font-size: clamp(28px, 2.8vw, 36px); letter-spacing: -1px; margin: 19px 0 15px; }

.idea-card p { font-size: 14px; max-width: 340px; margin-bottom: 14px; }

.idea-blue p { color: #d6e2f2; }

.idea-card .text-link { display: inline-block; border-bottom: 1px solid currentColor; }

.idea-blue a:hover { color: #d5e7ff; }

.home-page .about { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 40px 0 55px; }

.home-page .about .eyebrow { grid-column: 1 / -1; }

.home-page .about > p:last-child { font-size: 15px; }

@media (max-width: 900px) {

    .home-page .category-card { padding: 0 22px 24px; }

    .category-photo { height: 210px; margin-inline: -22px; }



    .feature-copy, .idea-card { padding: 30px; }

}

@media (max-width: 700px) {

    .home-page .category-grid { grid-template-columns: 1fr; }

    .home-page .category-card { padding: 0 28px 28px; }

    .home-page .category-code { width: auto; }

    .home-page .category-card h3 { font-size: 24px; }

    .category-photo { height: 260px; margin-inline: -28px; }

    .inspiration-grid { grid-template-columns: 1fr; }

    .hardware-feature { min-height: 610px; }

    .inspiration .section-heading { display: block; }

    .section-intro { margin-top: 16px; }







    .idea-stack { gap: 18px; }

    .idea-card { padding: 32px; }

    .home-page .about { display: block; }

    .home-page .about h2 { margin-bottom: 20px; }

    .home-page .explore { padding: 44px 0; }

}

@media (max-width: 560px) {

    .home-page .hero { min-height: 540px; }

    .home-page .hero-copy { padding: 36px 25px; }

}

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

    .home-page .category-card { transition: none; }

    .home-page .category-card:hover { transform: none; }

}



/* 8. Bocetos de Semana 1: estructura visual sin funciones operativas. */

.prototypes { padding: 58px 0 10px; }

.prototype-intro { max-width: 760px; color: var(--muted); font-size: 14px; margin: 18px 0 24px; }

.prototype-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.prototype-nav a { border: 1px solid #c5ccd7; background: var(--surface); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: #33445d; }

.prototype-nav a:hover { color: var(--blue); border-color: #9eb7ea; }

.prototype-screens { display: grid; gap: 18px; }

.prototype-screen { scroll-margin-top: 95px; border: 1px solid #cdd3dc; border-radius: 14px; background: var(--surface); padding: 22px; }

.screen-topline, .screen-header, .compare-placeholder, .builder-steps, .choice-row { display: flex; align-items: center; gap: 10px; }

.screen-topline { justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }

.screen-topline span:first-child { color: var(--blue); font-weight: 700; }

.screen-header { justify-content: space-between; margin: 17px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; }

.screen-header strong { font-size: 16px; color: var(--ink); }

.screen-header span { color: var(--muted); }

.screen-grid { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: 28px; }

.screen-placeholder { min-height: 230px; display: grid; place-items: center; text-align: center; border: 1px dashed #aeb8c8; border-radius: 10px; background: #e9edf3; color: var(--muted); }

.screen-placeholder small { font-size: 10px; }

.screen-muted { color: var(--muted); font-size: 13px; }

.spec-list { border-top: 1px solid var(--line); margin: 20px 0; }

.spec-list div { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }

.spec-list span { color: var(--muted); }

.spec-list b { font-weight: 600; }

.compare-placeholder { margin-bottom: 18px; }

.compare-placeholder > div { flex: 1; min-height: 100px; border: 1px dashed #aeb8c8; border-radius: 9px; padding: 18px; display: grid; gap: 6px; align-content: center; }

.compare-placeholder b { font-size: 14px; }

.compare-placeholder span, .compare-placeholder small { color: var(--muted); font-size: 12px; }

.comparison-table { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 12px; }

.comparison-table > span { padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.comparison-table > span:nth-child(3n) { border-right: 0; }

.comparison-table > span:nth-last-child(-n+3) { border-bottom: 0; }

.builder-steps { flex-wrap: wrap; }

.builder-steps div { padding: 9px 11px; border: 1px solid #cbd2dd; border-radius: 7px; color: var(--muted); font-size: 11px; background: #eef0f3; }

.builder-steps .active { color: var(--blue); border-color: #9fb9ed; background: #e8effc; font-weight: 700; }

.builder-selection { max-width: 680px; margin: 22px auto 0; text-align: center; padding: 28px; border-top: 1px solid var(--line); }

.builder-selection h3, .smart-result h3 { margin-bottom: 8px; }

.builder-selection p, .smart-result p { color: var(--muted); font-size: 13px; }

.fake-select { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 10px 14px; margin: 18px 0 12px; text-align: left; border: 1px solid #bec5cf; border-radius: 6px; background: white; color: var(--muted); font-size: 13px; }

.smart-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }

.choice-row { flex-wrap: wrap; margin-top: 18px; }

.choice-row span { padding: 12px 16px; border: 1px solid #cbd2dd; border-radius: 8px; font-size: 12px; background: white; }

.smart-result { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #eef2f7; }

.saved-empty { text-align: center; max-width: 620px; margin: 0 auto; padding: 26px 18px; }

.empty-icon { width: 42px; height: 42px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid #b9c3d0; border-radius: 50%; color: var(--blue); font-size: 22px; }

.saved-empty p { color: var(--muted); font-size: 13px; }



@media (max-width: 700px) {

    .prototypes { padding: 38px 0 4px; }

    .prototype-screen { padding: 17px; }

    .screen-grid, .smart-layout { grid-template-columns: 1fr; gap: 18px; }

    .screen-placeholder { min-height: 180px; }

    .screen-header { align-items: flex-start; flex-direction: column; gap: 5px; }

    .compare-placeholder { flex-direction: column; align-items: stretch; }

    .comparison-table { font-size: 11px; }

    .comparison-table > span { padding: 8px; overflow-wrap: anywhere; }

    .builder-steps { display: grid; grid-template-columns: 1fr 1fr; }

    .builder-steps div { text-align: center; }

    .spec-list div { grid-template-columns: 1fr; gap: 3px; }

}





/* Ajustes de integración: bocetos independientes del inicio y del catálogo. */

.prototypes-page { padding-bottom: 48px; }

.prototypes-page .status-tag, .prototypes-page .coming-soon {

    display: inline-block; padding: 5px 10px; border-radius: 6px;

    background: #dce6f5; color: #25466d; font-size: 12px;

}

.prototypes-page h1 { margin-bottom: 0; }

.prototype-screen > div, .screen-grid > div, .smart-layout > div { min-width: 0; }

.prototypes-page .screen-header a { color: var(--blue); text-decoration: underline; }

@media (max-width: 560px) {

    .site-header .header-inner { flex-wrap: wrap; gap: 0 20px; padding-top: 12px; }

    .site-header nav { flex-wrap: wrap; gap: 18px; }

    .site-header nav a { padding: 12px 0; }

    .prototypes-page .section-heading { align-items: flex-start; flex-direction: column; }

    .builder-selection { padding: 20px 0; }

}


/* 9. Recorrido del proyecto: avance pequeño inspirado en bloques amplios de producto. */
.journey { padding: 8px 0 66px; }
.journey-heading { align-items: end; margin-bottom: 28px; }
.journey-heading .section-intro { max-width: 420px; text-align: right; }
.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.journey-card { min-height: 290px; padding: 30px; border-radius: 14px; background: #dce2ea; display: flex; flex-direction: column; align-items: flex-start; }
.journey-card:nth-child(2) { background: #d7dfdc; }
.journey-card:nth-child(3) { background: #e2d8c8; }
.journey-active { background: #244d83; color: #f8fafc; }
.journey-number { font-size: 34px; line-height: 1; font-weight: 650; letter-spacing: -1px; margin-bottom: 42px; }
.journey-label { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; opacity: .75; }
.journey-card h3 { font-size: 25px; letter-spacing: -.6px; margin-bottom: 12px; }
.journey-card > p:not(.journey-label) { color: #505b68; font-size: 13px; margin-bottom: 24px; }
.journey-active > p:not(.journey-label) { color: #d6e2f2; }
.journey-card .text-link { margin-top: auto; }
.journey-active .text-link:hover { color: #d5e7ff; }

/* Footer ampliado: navegación útil sin inventar soporte, tienda o redes. */
.site-footer { padding: 52px 0 0; }
.footer-layout { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); align-items: start; gap: 44px; padding-bottom: 42px; font-size: 12px; }
.footer-brand .logo { display: inline-block; margin-bottom: 16px; }
.footer-brand > p { margin: 0 0 8px; }
.footer-description { max-width: 290px; color: #9eabba; line-height: 1.6; }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column h2 { color: white; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; margin: 4px 0 8px; }
.footer-column a { color: #d5dce6; }
.footer-column span { color: #929eae; }
.footer-bottom { min-height: 58px; border-top: 1px solid #ffffff1f; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #8f9aaa; font-size: 11px; }

@media (max-width: 800px) {
    .journey-grid { grid-template-columns: 1fr; }
    .journey-card { min-height: 240px; }
    .journey-number { margin-bottom: 28px; }
    .footer-layout { grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-description { max-width: 520px; }
    .footer-bottom { width: var(--site-container-width); }
}

@media (max-width: 560px) {
    .journey { padding-bottom: 48px; }
    .journey-heading { display: block; }
    .journey-heading .section-intro { margin-top: 16px; text-align: left; }
    .journey-card { padding: 26px; min-height: 225px; }
    .footer-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-column:last-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; justify-content: center; padding: 16px 0; }
}


/* 10. Herramientas funcionales básicas de Prototipos. */
.prototype-status {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #dfe7f2;
    color: #334a68;
    font-size: 12px;
}
.prototype-status.is-error { background: #eee0df; color: #7a3d39; }

.tool-select {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #bec5cf;
    border-radius: 6px;
    background: white;
    color: var(--ink);
}
.tool-eyebrow { margin-top: 24px; }

.compare-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.tool-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.builder-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.builder-field {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #eef1f5;
}
.builder-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 10px;
    background: #dfe7f2;
}
.builder-summary h3 { margin-bottom: 8px; }
.builder-summary p { margin-bottom: 0; }
.builder-summary .button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.choice-row button {
    padding: 12px 16px;
    border: 1px solid #cbd2dd;
    border-radius: 8px;
    font-size: 12px;
    background: white;
    color: var(--ink);
}
.smart-choice:hover,
.smart-choice.is-selected {
    border-color: #7ca1df;
    background: #dce8fb;
    color: #1f4f99;
}

.saved-builds {
    display: grid;
    gap: 14px;
}
.saved-build-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #eef2f7;
}
.saved-build-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}
.saved-build-header h3 { margin-bottom: 10px; }
.saved-build-header span { color: var(--muted); font-size: 11px; }
.saved-build-card ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--muted);
    font-size: 12px;
}
.saved-delete { color: #8a3e3e; }

@media (max-width: 700px) {
    .compare-controls,
    .builder-options {
        grid-template-columns: 1fr;
    }

    .builder-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .builder-summary .button {
        width: 100%;
    }
}

/* ============================================================
   PCFORGE · CATÁLOGO PREMIUM 2026-09-25
   Rediseño visual de tarjetas existentes.
   Mantiene datos/API/backend sin cambios.
   ============================================================ */

:root {
    --color-bg-page: #F3F4F6;
    --color-bg-card: #FFFFFF;
    --color-bg-media: #F1F3F6;
    --color-border: #D7DCE3;
    --color-text: #172033;
    --color-text-muted: #5D6878;
    --color-primary: var(--blue);
    --color-accent-soft: #E7EFF8;
    --color-media-blue: #EAF1F7;
    --color-media-beige: #F3EBDD;
    --color-media-green: #EAF2ED;
    --color-media-lavender: #EEEAF7;
}

.catalog-page-body {
    background: var(--color-bg-page);
}

.catalog-page-body .catalog-page {
    width: var(--content-container-width);
    max-width: var(--content-max-width);
    min-height: calc(100vh - 190px);
}

.catalog-page-body .catalog {
    padding: 68px 0 88px;
}

.catalog-page-body .catalog .section-heading {
    align-items: end;
    gap: 32px;
    margin-bottom: 18px;
}

.catalog-page-body .catalog h1 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(44px, 5.5vw, 74px);
    line-height: .98;
    letter-spacing: -2.8px;
}

.catalog-page-body .catalog-note {
    max-width: 760px;
    margin: 0 0 34px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.catalog-page-body .filters {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #ECEFF3;
}

.catalog-page-body .filters label {
    margin-bottom: 7px;
    color: #435064;
    font-size: 12px;
    font-weight: 700;
}

.catalog-page-body .filters input,
.catalog-page-body .filters select {
    min-height: 48px;
    border: 1px solid #C9D0DA;
    border-radius: 9px;
    background: #FFFFFF;
    color: var(--color-text);
}

.catalog-page-body .filters input:focus,
.catalog-page-body .filters select:focus {
    border-color: #7899D6;
}

.catalog-page-body .result-count {
    margin: 24px 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.catalog-page-body .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.catalog-page-body .product-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-bg-card);
    box-shadow: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease;
}

.catalog-page-body .product-card:hover {
    transform: translateY(-2px);
    border-color: #B8C2CF;
}

/* Área visual estandarizada 4:3. */
.catalog-page-body .product-photo {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg-media);
}

/* Se elimina el brillo/gradiente decorativo anterior solo en catálogo. */
.catalog-page-body .product-photo::before {
    display: none;
}

/*
   Resetea reglas antiguas de imágenes que las posicionaban de forma absoluta
   o aplicaban recortes pensados para fotos de categoría.
*/
.catalog-page-body .product-photo .local-product-image,
.catalog-page-body .product-photo > img {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 82%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    transform: none;
    clip-path: none;
    filter: drop-shadow(0 14px 16px rgba(23, 32, 51, .12));
    mix-blend-mode: normal;
    border-radius: 12px;
}

/* El blanco de las fotografías se integra con el pastel de la tarjeta. */
.catalog-page-body .product-photo {
    isolation: isolate;
}

/* Proporción visual por categoría, sin alterar el aspect ratio real. */
.catalog-page-body .product-gpu .local-product-image {
    max-width: 82%;
    max-height: 78%;
}

.catalog-page-body .product-psu .local-product-image {
    max-width: 72%;
    max-height: 72%;
}

.catalog-page-body .product-ram .local-product-image {
    max-width: 84%;
    max-height: 48%;
}

.catalog-page-body .product-cpu .local-product-image {
    max-width: 62%;
    max-height: 64%;
}

.catalog-page-body .product-motherboard .local-product-image {
    max-width: 78%;
    max-height: 78%;
}

.catalog-page-body .product-case .local-product-image {
    max-width: 82%;
    max-height: 84%;
}

.catalog-page-body .product-storage .local-product-image {
    max-width: 70%;
    max-height: 62%;
}

.catalog-page-body .product-cooling .local-product-image {
    max-width: 76%;
    max-height: 80%;
}

/* Paleta pastel controlada: pocas familias, no un color aleatorio por producto. */
.catalog-page-body .product-cpu,
.catalog-page-body .product-gpu,
.catalog-page-body .product-motherboard {
    background: var(--color-media-blue);
}

.catalog-page-body .product-ram,
.catalog-page-body .product-storage,
.catalog-page-body .product-psu {
    background: var(--color-media-beige);
}

.catalog-page-body .product-case,
.catalog-page-body .product-cooling {
    background: var(--color-media-green);
}

.catalog-page-body .product-other {
    background: var(--color-bg-media);
}

/* La zona visual queda limpia: no se superpone texto sobre la imagen. */
.catalog-page-body .product-image-caption,
.catalog-page-body .product-photo figcaption {
    display: none;
}

.catalog-page-body .product-image-placeholder {
    width: min(78%, 280px);
    display: grid;
    gap: 5px;
    justify-items: center;
    text-align: center;
    color: #6A7584;
}

.catalog-page-body .product-image-brand {
    color: #6B7686;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.catalog-page-body .product-image-model {
    color: #344257;
    font-size: 15px;
    line-height: 1.35;
}

.catalog-page-body .product-image-loading {
    color: #808A98;
    font-size: 12px;
}

.catalog-page-body .product-body {
    min-width: 0;
    min-height: 310px;
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-wrap: anywhere;
    background: var(--color-bg-card);
}

.catalog-page-body .product-category {
    width: fit-content;
    margin: 0 0 14px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--color-accent-soft);
    color: #244F91;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.catalog-page-body .product-body h3 {
    min-height: calc(1.15em * 3);
    margin: 0 0 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--color-text);
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.45px;
}

.catalog-page-body .product-brand {
    margin: 0 0 11px;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.45;
}

.catalog-page-body .product-summary {
    min-height: calc(1.6em * 2);
    margin: 0 0 22px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #4E5A6C;
    font-size: 14px;
    line-height: 1.6;
}

.catalog-page-body .product-bottom {
    min-height: 58px;
    margin-top: auto;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #D9DEE6;
}

.catalog-page-body .product-status {
    color: #667182;
    font-size: 12px;
    line-height: 1.3;
}

.catalog-page-body .product-status.has-price {
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
}

.catalog-page-body .product-detail {
    min-height: auto;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: color 170ms ease;
}

.catalog-page-body .product-detail:hover {
    color: #174DAF;
    text-decoration: none;
}

.catalog-page-body .product-detail-arrow {
    display: inline-block;
    margin-left: 3px;
    transition: transform 170ms ease;
}

.catalog-page-body .product-detail:hover .product-detail-arrow {
    transform: translateX(4px);
}

.catalog-page-body .product-detail:focus-visible {
    border-radius: 4px;
}

/* Estados vacíos: neutros y consistentes. */
.catalog-page-body .empty-state {
    margin-top: 24px;
    padding: 40px 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #FFFFFF;
}

/* El diálogo conserva la función actual, con tratamiento visual coherente. */
.catalog-page-body dialog {
    width: min(600px, calc(100% - 32px));
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: #FFFFFF;
    color: var(--color-text);
    box-shadow: none;
}

.catalog-page-body dialog::backdrop {
    background: rgba(20, 35, 55, .68);
}

.catalog-page-body dialog h2 {
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -.8px;
}

@media (min-width: 1540px) {
    .catalog-page-body .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1020px) {
    .catalog-page-body .catalog-page {
        width: var(--content-container-width);
    }

    .catalog-page-body .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .catalog-page-body .product-body {
        padding: 24px;
    }
}

@media (max-width: 680px) {
    .catalog-page-body .catalog-page {
        width: var(--content-container-width);
    }

    .catalog-page-body .catalog {
        padding: 42px 0 60px;
    }

    .catalog-page-body .catalog .section-heading {
        align-items: flex-start;
    }

    .catalog-page-body .catalog h1 {
        font-size: clamp(38px, 13vw, 54px);
        letter-spacing: -1.8px;
    }

    .catalog-page-body .filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .catalog-page-body .cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .catalog-page-body .product-photo {
        aspect-ratio: 4 / 3;
    }

    .catalog-page-body .product-body {
        min-height: 0;
        padding: 24px 22px 22px;
    }

    .catalog-page-body .product-body h3 {
        min-height: 0;
        font-size: 24px;
    }

    .catalog-page-body .product-summary {
        min-height: 0;
    }

    .catalog-page-body .product-bottom {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .catalog-page-body .product-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* === PCFORGE CATALOGO VISIBLE PATCH START === */

/* Ajustes heredados del catálogo, ahora sujetos al contenedor compartido. */
.catalog-page {
    width: var(--content-container-width);
    max-width: var(--content-max-width);
}

.catalog-page .catalog {
    padding-top: 58px !important;
    padding-bottom: 80px !important;
}

.catalog-page .catalog h1 {
    font-size: clamp(46px, 5vw, 72px) !important;
    line-height: .98 !important;
    letter-spacing: -2.4px !important;
    margin-bottom: 0 !important;
}

.catalog-page .catalog-note {
    max-width: 760px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #697486 !important;
    margin-bottom: 30px !important;
}

.catalog-page .filters {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 16px !important;
    padding: 18px !important;
    background: #e9edf2 !important;
    border: 1px solid #d3dae4 !important;
    border-radius: 16px !important;
}

.catalog-page .filters input,
.catalog-page .filters select {
    min-height: 48px !important;
    border-radius: 9px !important;
    background: #fff !important;
}

.catalog-page .result-count {
    margin: 24px 0 !important;
}

/* 3 columnas normales; 4 en monitores anchos. */
.catalog-page .cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

/* UNA sola tarjeta continua: imagen + datos + precio. */
.catalog-page .product-card {
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid #d6dce5 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: transform .18s ease, border-color .18s ease !important;
}

.catalog-page .product-card:hover {
    transform: translateY(-2px) !important;
    border-color: #b9c3cf !important;
}

/* IMAGEN: zona 4:3 consistente. */
.catalog-page .product-photo {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #edf1f5 !important;
}

.catalog-page .product-photo::before,
.catalog-page .product-photo::after {
    display: none !important;
}

/* Resetea reglas viejas que agrandaban/deformaban la imagen. */
.catalog-page .product-photo img,
.catalog-page .product-photo .local-product-image {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 82% !important;
    max-height: 82% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
    filter: drop-shadow(0 14px 16px rgba(23, 32, 51, .12)) !important;
    mix-blend-mode: normal !important;
    border-radius: 12px !important;
}

/* Escala visual por categoria. */
.catalog-page .product-ram .local-product-image {
    max-width: 84% !important;
    max-height: 50% !important;
}

.catalog-page .product-cpu .local-product-image {
    max-width: 66% !important;
    max-height: 66% !important;
}

.catalog-page .product-psu .local-product-image,
.catalog-page .product-storage .local-product-image {
    max-width: 72% !important;
    max-height: 68% !important;
}

.catalog-page .product-gpu .local-product-image,
.catalog-page .product-motherboard .local-product-image,
.catalog-page .product-cooling .local-product-image {
    max-width: 80% !important;
    max-height: 78% !important;
}

.catalog-page .product-case .local-product-image {
    max-width: 82% !important;
    max-height: 86% !important;
}

/* Pocos fondos pastel, consistentes. */
.catalog-page .product-cpu,
.catalog-page .product-gpu,
.catalog-page .product-motherboard {
    background: #e9f0f7 !important;
}

.catalog-page .product-ram,
.catalog-page .product-storage,
.catalog-page .product-psu {
    background: #f1eadf !important;
}

.catalog-page .product-case,
.catalog-page .product-cooling {
    background: #e7f0eb !important;
}

.catalog-page .product-photo figcaption,
.catalog-page .product-image-caption {
    display: none !important;
}

.catalog-page .product-body {
    min-width: 0 !important;
    min-height: 315px !important;
    padding: 27px 29px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    background: #fff !important;
    overflow-wrap: anywhere !important;
}

.catalog-page .product-category {
    width: fit-content !important;
    margin: 0 0 13px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    background: #e7eef8 !important;
    color: #245292 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.catalog-page .product-body h3 {
    margin: 0 0 9px !important;
    min-height: calc(1.16em * 3) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    color: #17243a !important;
    font-size: clamp(22px, 1.9vw, 29px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.45px !important;
}

.catalog-page .product-brand {
    margin: 0 0 10px !important;
    color: #667183 !important;
    font-size: 14px !important;
}

.catalog-page .product-summary {
    margin: 0 0 20px !important;
    min-height: calc(1.55em * 2) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #4f5b6d !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.catalog-page .product-bottom {
    min-height: 58px !important;
    margin-top: auto !important;
    padding-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    border-top: 1px solid #dce1e7 !important;
}

.catalog-page .product-status {
    color: #667183 !important;
    font-size: 11px !important;
}

.catalog-page .product-status.has-price {
    color: #17243a !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.catalog-page .product-detail {
    min-height: 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #3568c8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.catalog-page .product-detail:hover {
    color: #174eaf !important;
    text-decoration: none !important;
}

/* Placeholder limpio si falta una imagen. */
.catalog-page .product-image-placeholder {
    width: min(78%, 280px) !important;
    display: grid !important;
    gap: 5px !important;
    justify-items: center !important;
    text-align: center !important;
    color: #6b7686 !important;
}

.catalog-page .product-image-brand {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.catalog-page .product-image-model {
    color: #354357 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

@media (min-width: 1540px) {
    .catalog-page .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1020px) {
    .catalog-page {
        width: var(--content-container-width);
    }

    .catalog-page .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

@media (max-width: 680px) {
    .catalog-page {
        width: var(--content-container-width);
    }

    .catalog-page .catalog {
        padding-top: 40px !important;
        padding-bottom: 58px !important;
    }

    .catalog-page .filters {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }

    .catalog-page .cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .catalog-page .product-body {
        min-height: 0 !important;
        padding: 23px 22px 21px !important;
    }

    .catalog-page .product-body h3,
    .catalog-page .product-summary {
        min-height: 0 !important;
    }
}
/* ===== PROTOTIPOS MÁS COLOR ===== */

:root {
  --pcf-blue: #3b82f6;
  --pcf-blue-dark: #1d4ed8;
  --pcf-navy: #0f172a;
  --pcf-soft: #f3f7ff;
  --pcf-soft-2: #eef4ff;
  --pcf-border: #dbe7ff;
  --pcf-text: #1f2937;

  --gaming-bg: linear-gradient(135deg, #eef2ff 0%, #f7f3ff 100%);
  --study-bg: linear-gradient(135deg, #f4f8ff 0%, #eefbf6 100%);
  --work-bg: linear-gradient(135deg, #eef8ff 0%, #f5f7fb 100%);
}

/* fondo general de la página prototipos */
.prototypes-page,
.prototipos-page,
main.prototipos,
main.prototypes {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 25%),
    radial-gradient(circle at top right, rgba(99,102,241,0.10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%);
}

/* hero / encabezado */
.prototypes-hero,
.prototipos-hero,
.tools-hero {
  background: linear-gradient(135deg, #0f172a 0%, #172554 55%, #1e3a8a 100%);
  color: #fff;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  position: relative;
}

.prototypes-hero::after,
.prototipos-hero::after,
.tools-hero::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -80px;
  top: -80px;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.prototypes-hero .eyebrow,
.prototipos-hero .eyebrow,
.tools-hero .eyebrow {
  color: #bfdbfe;
}

.prototypes-hero p,
.prototipos-hero p,
.tools-hero p {
  color: rgba(255,255,255,0.82);
}

/* tabs arriba */
.prototype-tabs,
.prototipos-tabs,
.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.prototype-tabs button,
.prototipos-tabs button,
.tool-tabs button,
.prototype-tabs a,
.prototipos-tabs a,
.tool-tabs a {
  background: #ffffff;
  color: var(--pcf-navy);
  border: 1px solid var(--pcf-border);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.06);
}

.prototype-tabs button:hover,
.prototipos-tabs button:hover,
.tool-tabs button:hover,
.prototype-tabs a:hover,
.prototipos-tabs a:hover,
.tool-tabs a:hover {
  background: var(--pcf-blue);
  color: #fff;
  border-color: var(--pcf-blue);
  transform: translateY(-1px);
}

.prototype-tabs .active,
.prototipos-tabs .active,
.tool-tabs .active {
  background: linear-gradient(135deg, var(--pcf-blue) 0%, var(--pcf-blue-dark) 100%);
  color: #fff;
  border-color: transparent;
}

/* secciones tipo card */
.prototype-block,
.prototipos-block,
.tool-card,
.prototype-card,
.prototipos-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--pcf-border);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 1.5rem;
}

/* títulos internos */
.prototype-block h2,
.prototipos-block h2,
.tool-card h2,
.prototype-card h2,
.prototipos-card h2 {
  color: var(--pcf-navy);
}

/* ficha del componente */
.component-preview,
.ficha-preview,
.prototype-preview {
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  border: 1px dashed #bfd3ff;
  border-radius: 20px;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.component-preview img,
.ficha-preview img,
.prototype-preview img {
  max-width: 90%;
  max-height: 240px;
  object-fit: contain;
  filter: drop-shadow(0 18px 35px rgba(15, 23, 42, 0.12));
}

/* selects */
.prototipos-page select,
.prototypes-page select,
main.prototipos select,
main.prototypes select {
  background: #fff;
  border: 1px solid #cfe0ff;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  color: var(--pcf-text);
}

.prototipos-page select:focus,
.prototypes-page select:focus,
main.prototipos select:focus,
main.prototypes select:focus {
  outline: none;
  border-color: var(--pcf-blue);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

/* comparador */
.compare-table,
.tabla-comparacion {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #dbe7ff;
}

.compare-table thead,
.tabla-comparacion thead {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}

.compare-table th,
.compare-table td,
.tabla-comparacion th,
.tabla-comparacion td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #edf2ff;
}

/* smart builder */
.smart-builder,
.builder-box,
.builder-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #dbe7ff;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 14px 30px rgba(15,23,42,0.06);
}

/* opciones de uso */
.use-options,
.builder-uses {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.use-option,
.builder-use-btn {
  border: 1px solid #cfe0ff;
  background: #fff;
  color: var(--pcf-navy);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  min-width: 150px;
  font-weight: 700;
  transition: all 0.2s ease;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.use-option:hover,
.builder-use-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(59,130,246,0.12);
}

.use-option.active.gaming,
.builder-use-btn.active.gaming {
  background: var(--gaming-bg);
  border-color: #c7d2fe;
  color: #312e81;
}

.use-option.active.study,
.builder-use-btn.active.study {
  background: var(--study-bg);
  border-color: #bbf7d0;
  color: #166534;
}

.use-option.active.work,
.builder-use-btn.active.work {
  background: var(--work-bg);
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* cards de build sugerida */
.build-suggestion,
.smart-build-card,
.recommended-build {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #dbe7ff;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

.build-suggestion .build-top,
.smart-build-card .build-top,
.recommended-build .build-top {
  padding: 1.25rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.build-suggestion.gaming .build-top,
.smart-build-card.gaming .build-top,
.recommended-build.gaming .build-top {
  background: var(--gaming-bg);
}

.build-suggestion.study .build-top,
.smart-build-card.study .build-top,
.recommended-build.study .build-top {
  background: var(--study-bg);
}

.build-suggestion.work .build-top,
.smart-build-card.work .build-top,
.recommended-build.work .build-top {
  background: var(--work-bg);
}

.build-suggestion .build-top img,
.smart-build-card .build-top img,
.recommended-build .build-top img {
  max-width: 85%;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 18px 35px rgba(15, 23, 42, 0.16));
}

.build-suggestion .build-body,
.smart-build-card .build-body,
.recommended-build .build-body {
  padding: 1.35rem;
}

.build-suggestion .price,
.smart-build-card .price,
.recommended-build .price {
  color: var(--pcf-blue-dark);
  font-size: 1.8rem;
  font-weight: 800;
}

/* badges */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #e8f0ff;
  color: var(--pcf-blue-dark);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* botones */
.button-primary,
.btn-primary,
button.primary {
  background: linear-gradient(135deg, var(--pcf-blue) 0%, var(--pcf-blue-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(29, 78, 216, 0.18);
}

.button-primary:hover,
.btn-primary:hover,
button.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* responsive */
@media (max-width: 900px) {
  .prototypes-hero,
  .prototipos-hero,
  .tools-hero {
    padding: 1.5rem;
    border-radius: 18px;
  }

  .prototype-block,
  .prototipos-block,
  .tool-card,
  .prototype-card,
  .prototipos-card {
    padding: 1rem;
    border-radius: 18px;
  }
}
/* === PCFORGE CATALOGO VISIBLE PATCH END === */

/* Paneles completos inspirados en Framework. */
.home-page .home-component-banners{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px}
.home-page .home-component-banners .category-card,.home-page .home-component-banners .category-card:hover{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%;min-height:450px;padding:48px 5%;border:0;border-radius:14px;overflow:hidden;transform:none;color:#18202d}
.home-page .home-component-banners .category-cpu{background:#bfa8eb}
.home-page .home-component-banners .category-gpu{background:#eeecdf}
.home-page .home-component-banners .category-ram{background:#ffca69}
.home-component-banners .component-banner-copy{grid-column:1;grid-row:1;max-width:430px}
.home-component-banners .category-photo{grid-column:2;grid-row:1;position:relative;isolation:isolate;height:340px;width:100%;margin:0;overflow:hidden;border-radius:12px;background:none}
.home-component-banners .category-card:nth-child(n+2) .component-banner-copy{grid-column:2}
.home-component-banners .category-card:nth-child(n+2) .category-photo{grid-column:1}
.home-component-banners .category-photo::before{display:none}
.home-component-banners .component-object{position:absolute;inset:0;filter:none}
.home-page .home-component-banners .category-photo img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;aspect-ratio:auto;clip-path:none;transform:none;filter:none}
.home-page .home-component-banners .category-cpu .category-photo img{max-width:420px;margin-inline:auto}
.home-page .home-component-banners .category-photo{mix-blend-mode:normal}
.home-page .home-component-banners .category-photo img{mix-blend-mode:normal;object-fit:contain;padding:12px;box-sizing:border-box}
.home-page .home-component-banners .category-card{box-shadow:0 16px 34px #30253d14}
.home-page .home-component-banners .category-photo::after{content:"";position:absolute;z-index:0;left:17%;right:17%;bottom:12%;height:20%;border-radius:50%;background:radial-gradient(ellipse at center,#28213938 0%,#28213919 36%,transparent 72%);pointer-events:none}
.home-page .home-component-banners .component-object{z-index:1;filter:none}
.home-page .home-component-banners .category-photo img{filter:drop-shadow(0 11px 13px #241c3226)}
.home-page .home-component-banners .category-cpu .category-photo::after{left:24%;right:24%;bottom:11%;height:17%}
.home-page .home-component-banners .category-cpu .category-photo img{filter:drop-shadow(0 8px 10px #241c3224)}
.home-page .home-component-banners .category-gpu .category-photo::after{left:15%;right:15%;bottom:11%;height:21%}
.home-page .home-component-banners .category-ram .category-photo::after{left:17%;right:17%;bottom:12%;height:19%;background:radial-gradient(ellipse at center,#48301938 0%,#48301916 36%,transparent 72%)}
.home-page .home-component-banners .category-ram .category-photo img{filter:drop-shadow(0 8px 10px #48301924)}
.home-page .home-component-banners .category-ram .category-photo{width:min(70%,360px);height:260px;justify-self:center}
.home-page .home-component-banners .category-code{display:none}
.home-page .home-component-banners h3{color:#18202d;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-1px;margin:0 0 16px;padding:0}
.home-page .home-component-banners p{color:#333844;font-size:16px;line-height:1.6;margin:0 0 24px;max-width:400px}
.home-component-banners .component-banner-link{display:inline-flex;align-items:center;gap:20px;padding:13px 22px;border-radius:999px;background:#ff744b;color:#18202d;font-size:14px;font-weight:700}
.home-component-banners .category-card:hover .component-banner-link{background:#ff6034}
.home-component-banners .category-card:focus-visible{outline:3px solid #245fd1;outline-offset:5px}
@media(max-width:760px){
.home-page .home-component-banners .category-card{grid-template-columns:1fr;min-height:0;padding:32px 26px;gap:24px}
.home-component-banners .category-card .component-banner-copy,.home-component-banners .category-card:nth-child(n+2) .component-banner-copy{grid-column:1;grid-row:1}
.home-component-banners .category-card .category-photo,.home-component-banners .category-card:nth-child(n+2) .category-photo{grid-column:1;grid-row:2;height:240px}
.home-page .home-component-banners h3{font-size:32px}}

/* === PORTADA Y PÁGINAS DE COMPONENTES === */

/* El encabezado permanece visible mientras se recorre cualquier página. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

[id] { scroll-margin-top: 105px; }

.components-hub,
.category-main {
    width: var(--content-container-width);
    max-width: var(--content-max-width);
}

.components-hub-page,
.category-page {
    background: #f7f7f8;
}

.components-hero,
.category-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    min-height: 610px;
    margin: var(--page-top-space) 0 var(--section-space);
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(108deg, #161d27 0 48%, #e8eaed 48% 100%);
    color: white;
}

.components-hero-copy,
.category-hero-copy {
    align-self: end;
    padding: 70px 58px 58px;
    z-index: 2;
}

.components-hero .eyebrow,
.category-hero .eyebrow {
    color: #8eb7ff;
}

.components-hero h1,
.category-hero h1 {
    max-width: 640px;
    margin-bottom: 22px;
    font-size: clamp(48px, 5.4vw, 78px);
    letter-spacing: -3.5px;
}

.components-hero-copy > p:not(.eyebrow),
.category-hero-copy > p:not(.eyebrow) {
    max-width: 590px;
    margin-bottom: 42px;
    color: #ccd3dd;
    font-size: 17px;
    line-height: 1.65;
}

.components-stats,
.category-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding-top: 27px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.components-stats div,
.category-facts div {
    min-width: 0;
}

.components-stats dt,
.category-facts dt {
    margin-bottom: 6px;
    color: white;
    font-size: clamp(20px, 2.2vw, 31px);
    font-weight: 750;
    line-height: 1.15;
}

.components-stats dd,
.category-facts dd {
    margin: 0;
    color: #9fa9b8;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.components-hero-art,
.category-hero-products {
    position: relative;
    min-width: 0;
    background:
        radial-gradient(circle at 60% 45%, rgba(50, 102, 202, .24), transparent 35%),
        linear-gradient(135deg, #f0f1f3, #d9dde2);
}

.components-hero-art::after,
.category-hero-products::after {
    position: absolute;
    inset: auto 7% 7% 7%;
    height: 18%;
    border-radius: 50%;
    background: rgba(19, 27, 38, .15);
    filter: blur(28px);
    content: "";
}

.components-hero-art img,
.category-hero-products img {
    position: absolute;
    z-index: 1;
    object-fit: contain;
    filter: drop-shadow(0 24px 22px rgba(18, 26, 37, .2));
    mix-blend-mode: normal;
}

.components-hero-art .hub-case {
    right: 2%;
    bottom: 4%;
    width: 62%;
    height: 88%;
}

.components-hero-art .hub-gpu {
    left: 3%;
    bottom: 8%;
    width: 52%;
    height: 40%;
}

.components-hero-art .hub-cpu {
    left: 12%;
    top: 10%;
    width: 29%;
    height: 29%;
}

.hub-section-heading,
.category-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: var(--heading-content-gap);
}

.hub-section-heading h2,
.category-section-heading h2 {
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -2.5px;
}

.hub-section-heading > p,
.category-section-heading > p {
    max-width: 480px;
    margin-bottom: 6px;
    color: #66707d;
    font-size: 15px;
}

.component-categories {
    padding-bottom: var(--section-space);
}

.hub-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.hub-category-card {
    display: flex;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid #d9dce1;
    border-radius: 18px;
    background: white;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hub-category-card:hover {
    color: #202630;
    box-shadow: 0 18px 38px rgba(19, 29, 43, .1);
    transform: translateY(-4px);
}

.hub-category-media {
    display: grid;
    height: 300px;
    place-items: center;
    overflow: hidden;
    background: #fafafa;
}

.hub-category-media img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    mix-blend-mode: normal;
    transition: transform .25s ease;
}

.hub-category-card:hover .hub-category-media img {
    transform: scale(1.035);
}

/* Deja margen alrededor de las piezas altas y evita que sus extremos queden al ras del recorte. */
.hub-category-card--cpu .hub-category-media img {
    width: 66% !important;
    height: 66% !important;
    max-width: 66% !important;
    max-height: 66% !important;
    object-fit: contain;
    position: relative;
    top: -5px;
}
.hub-category-card--case .hub-category-media img {
    width: 64% !important;
    height: 64% !important;
    max-width: 64% !important;
    max-height: 64% !important;
    object-fit: contain;
    position: relative;
    top: -5px;
}
.hub-category-card--cooling .hub-category-media img {
    width: 66% !important;
    height: 66% !important;
    max-width: 66% !important;
    max-height: 66% !important;
    object-fit: contain;
    position: relative;
    top: -5px;
}
/* La foto del SSD trae un blanco ligeramente cálido; al aclararlo se funde con el fondo común. */
.hub-category-card--storage .hub-category-media img {
    filter: brightness(1.02);
}

.hub-category-copy {
    display: flex;
    padding: 25px 25px 27px;
    flex: 1;
    flex-direction: column;
}

.hub-category-copy > span,
.product-kicker {
    margin-bottom: 11px;
    color: #3568c9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.hub-category-copy h3 {
    margin-bottom: 10px;
    font-size: 25px;
    letter-spacing: -.8px;
}

.hub-category-copy p {
    margin-bottom: 22px;
    color: #69727e;
    font-size: 14px;
}

.components-hub .hub-category-copy > strong {
    display: flex;
    min-height: 48px;
    margin-top: auto;
    align-items: center;
    justify-content: flex-end;
    font-size: 0;
}

.components-hub .hub-category-copy > strong b {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0;
    place-items: center;
    border: 1px solid #d9ccea;
    border-radius: 50%;
    background: #f1ebf8;
    color: #5f4383;
    font-size: 0;
    font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.components-hub .hub-category-copy > strong b::before {
    content: "→";
    font-size: 19px;
    line-height: 1;
}

.components-hub .hub-category-card:hover .hub-category-copy > strong b,
.components-hub .hub-category-card:focus-visible .hub-category-copy > strong b {
    border-color: #8056b5;
    background: #8056b5;
    color: #fff;
    transform: translateX(2px);
}

.components-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 470px;
    margin-bottom: var(--section-space);
    overflow: hidden;
    border-radius: 22px;
    background: #dde4ed;
}

.components-guide > div:first-child {
    align-self: center;
    padding: 56px;
}

.components-guide h2 {
    margin-bottom: 22px;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -2px;
}

.components-guide p:not(.eyebrow) {
    max-width: 550px;
    margin-bottom: 28px;
    color: #5d6875;
}

.guide-visual {
    position: relative;
    min-width: 0;
    min-height: 470px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #17141e;
}

.guide-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.breadcrumb {
    gap: 10px;
    padding: 26px 0 0;
    color: #707986;
    font-size: 13px;
}

.breadcrumb a {
    padding: 0;
    color: #245fd1;
}

.category-hero {
    margin-top: 22px;
}

.category-hero-products .hero-product-1 {
    right: 3%;
    bottom: 5%;
    width: 70%;
    height: 80%;
}

.category-hero-products .hero-product-2 {
    left: 5%;
    bottom: 8%;
    width: 44%;
    height: 44%;
}

.category-hero-products .hero-product-3 {
    left: 12%;
    top: 7%;
    width: 32%;
    height: 32%;
}

.featured-lineup,
.category-catalog,
.comparison-section {
    padding-bottom: var(--section-space);
}

.featured-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.lineup-product {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8dce2;
    border-radius: 18px;
    background: white;
}

.lineup-product-media {
    display: grid;
    height: 360px;
    place-items: center;
    background: #eef0f2;
}

.lineup-product-media img,
.catalog-product-media img,
.comparison-image img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    mix-blend-mode: normal;
}

.lineup-product-body {
    position: relative;
    min-height: 260px;
    padding: 27px;
}

.lineup-number {
    position: absolute;
    top: 27px;
    right: 27px;
    color: #9aa4b1;
    font-size: 12px;
    font-weight: 700;
}

.lineup-product h3 {
    max-width: 85%;
    margin-bottom: 14px;
    font-size: 25px;
}

.lineup-summary {
    min-height: 78px;
    margin-bottom: 18px;
    color: #68717e;
    font-size: 13px;
}

.lineup-price,
.catalog-price {
    color: #172338;
    font-size: 17px;
}

.catalog-title-row {
    padding-top: 5px;
    border-top: 1px solid #d8dce2;
}

.category-catalog-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.category-filters {
    position: sticky;
    top: 108px;
    padding: 23px;
    border: 1px solid #d8dce2;
    border-radius: 14px;
    background: white;
}

.category-filters label:not(:first-child) {
    margin-top: 20px;
}

.category-filters select {
    background: #f4f5f6;
}

.category-extra-filters {
    display: grid;
    min-width: 0;
}

.category-extra-filters label:not(:first-child) {
    margin-top: 14px;
}

.category-extra-filters input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #d8dce2;
    border-radius: 9px;
    background: #f4f5f6;
    color: #25233a;
    font: inherit;
}

.category-filters .text-button {
    margin-top: 17px;
    color: #245fd1;
}

.category-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.catalog-product-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8dce2;
    border-radius: 16px;
    background: white;
    flex-direction: column;
}

.catalog-product-media {
    display: grid;
    height: 300px;
    place-items: center;
    background: #eef0f2;
}

.catalog-product-body {
    display: flex;
    min-height: 300px;
    padding: 24px;
    flex: 1;
    flex-direction: column;
}

.catalog-product-heading h3 {
    margin-bottom: 18px;
    font-size: 21px;
}

.catalog-product-specs {
    display: grid;
    gap: 7px;
    margin: 0 0 22px;
    padding-left: 18px;
    color: #68717e;
    font-size: 13px;
}

.catalog-product-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #e0e3e7;
}

.catalog-source {
    color: #245fd1;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.comparison-section {
    padding-top: var(--section-space);
    border-top: 1px solid #d8dce2;
}

.comparison-scroll {
    overflow-x: auto;
    border: 1px solid #d8dce2;
    border-radius: 18px;
    background: white;
}

.comparison-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    min-width: 210px;
    padding: 24px;
    border-left: 1px solid #e1e4e8;
    text-align: center;
    vertical-align: middle;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    min-width: 170px;
    border-left: 0;
}

.comparison-table tbody tr:nth-child(odd) {
    background: #f1f2f4;
}

.comparison-table tbody tr {
    border-top: 1px solid #e1e4e8;
}

.comparison-label {
    font-size: 13px;
    text-align: left !important;
}

.comparison-product {
    font-size: 15px;
}

.comparison-product span {
    display: block;
    margin-top: 12px;
}

.comparison-image {
    display: grid;
    height: 170px;
    place-items: center;
    background: #eef0f2;
}

.comparison-table td {
    color: #4f5966;
    font-size: 13px;
}

.comparison-note {
    margin-top: 16px;
    color: #6b7480;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .components-hero,
    .category-hero {
        grid-template-columns: 1fr 1fr;
    }

    .hub-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .components-hero,
    .category-hero,
    .components-guide {
        grid-template-columns: 1fr;
    }

    .components-guide > div:first-child { padding: 42px 32px 10px; }
    .guide-visual { min-height: 0; aspect-ratio: 3 / 2; }
    .guide-visual img { min-height: 0; }

    .components-hero-copy,
    .category-hero-copy {
        padding: 48px 30px;
    }

    .components-hero-art,
    .category-hero-products {
        min-height: 430px;
    }

    .featured-products {
        grid-template-columns: 1fr;
    }

    .category-catalog-layout {
        grid-template-columns: 1fr;
    }

    .category-filters {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
    }

    .category-filters label:not(:first-child) {
        margin-top: 0;
    }
}

@media (max-width: 580px) {
    .header-inner {
        min-height: 66px;
    }

    .header-inner nav {
        gap: 12px;
    }

    .header-inner nav a {
        padding: 20px 0;
        font-size: 12px;
    }

    .header-inner .logo {
        font-size: 21px;
    }

    .components-hero,
    .category-hero {
        min-height: 0;
        margin-bottom: 65px;
    }

    .components-hero h1,
    .category-hero h1 {
        font-size: 43px;
        letter-spacing: -2.5px;
    }

    .components-hero-art,
    .category-hero-products {
        min-height: 350px;
    }

    .components-stats,
    .category-facts {
        grid-template-columns: 1fr;
    }

    .hub-section-heading,
    .category-section-heading {
        align-items: start;
        flex-direction: column;
    }

    .hub-category-grid,
    .category-product-grid {
        grid-template-columns: 1fr;
    }

    .hub-category-card {
        min-height: 0;
    }

    .category-filters {
        grid-template-columns: 1fr;
    }

    .catalog-product-footer {
        align-items: start;
        flex-direction: column;
    }

    .catalog-source {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .site-header .header-inner {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 10px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header .header-inner > .logo { grid-column: 1; grid-row: 1; }

    .site-header .header-inner > nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
        gap: 16px;
    }

    .site-header .header-inner > nav a { padding: 8px 0 9px; }

    .site-header .header-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .header-icon-button { width: 36px; height: 36px; padding: 8px; }

    .header-icon-button svg { width: 20px; height: 20px; }
}

@media (max-width: 390px) {
    .site-header .header-inner > nav { gap: 10px; }
    .header-actions { gap: 0; }
    .header-icon-button { width: 32px; height: 34px; padding: 7px; }
}

/* Navegación: marca y enlaces juntos a la izquierda; accesos a la derecha. */
.site-header .header-inner {
    width: var(--site-container-width);
    min-height: 72px;
    justify-content: flex-start;
    gap: clamp(16px, 2vw, 28px);
}
.site-header .logo-art { width: 174px; }
.site-header .header-inner > nav {
    align-items: center;
    gap: clamp(16px, 1.8vw, 28px);
    margin-right: 0;
}
.site-header .header-inner > nav a {
    padding: 25px 0 23px;
    font-size: 15px;
    font-weight: 650;
}
.site-header .header-inner > nav > a[aria-current="page"] {
    border-color: #a48bd5;
    color: #c3adeb;
}
.site-header .header-actions {
    gap: 9px;
    margin-left: 0;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, .24);
}
.site-header .header-icon-button {
    width: 38px;
    height: 38px;
    padding: 8px;
}
.site-header .header-search-launch {
    display: grid;
    width: 38px;
    min-width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    margin-left: auto;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ded7e9;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.site-header .header-search-launch svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}
.site-header .header-search-launch:hover,
.site-header .header-search-launch:focus-visible {
    background: rgba(255, 255, 255, .13);
    color: #fff;
}
.site-header .header-search-launch:focus-visible { outline: 2px solid #a48bd5; outline-offset: 2px; }
.site-header .header-actions > [data-open-search] { display: none; }

/* Menú desplegable de componentes, integrado al encabezado PCForge. */
.component-menu { position: relative; display: flex; align-items: center; }
.site-header .component-menu-link {
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    color: inherit;
    white-space: nowrap;
}
.site-header .component-menu-link:hover,
.site-header .component-menu.is-current .component-menu-link,
.site-header .component-menu-trigger:hover,
.site-header .component-menu.is-current .component-menu-trigger { color: #c3adeb; }
.site-header .component-menu.is-current .component-menu-link { border-color: #a48bd5; }
.site-header .component-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    padding: 25px 0 23px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.component-menu-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .2s ease; }
.site-header .component-menu-trigger:focus-visible,
.site-header .component-menu-link:focus-visible { outline: 2px solid #a48bd5; outline-offset: 3px; border-radius: 3px; }
.component-menu.is-open .component-menu-trigger svg { transform: rotate(180deg); }
.component-mega-menu {
    position: absolute;
    z-index: 1001;
    top: 100%;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(440px, 1.75fr) minmax(220px, .9fr);
    gap: 28px;
    width: min(1360px, calc(100vw - 64px));
    padding: 30px;
    transform: translateX(-50%);
    border: 1px solid #e1dbea;
    border-top: 3px solid #a48bd5;
    border-radius: 0 0 18px 18px;
    background: #fcfbfe;
    color: #352d48;
    box-shadow: 0 20px 48px #1a152333;
}
.component-mega-menu[hidden] { display: none; }
.component-menu-intro { align-self: center; padding: 5px 2px; }
.component-menu-intro .eyebrow { margin: 0 0 10px; color: #7655b5; font-size: 10px; }
.component-menu-intro h2 { margin: 0 0 11px; color: #352d48; font-size: clamp(23px, 2vw, 30px); letter-spacing: -1px; }
.component-menu-intro > p:not(.eyebrow) { margin: 0 0 20px; color: #70687d; font-size: 13px; line-height: 1.55; }
.component-menu-all { display: inline-flex; align-items: center; gap: 9px; color: #67489f; font-size: 13px; font-weight: 700; }
.component-menu-all:hover { color: #4d347c; }
.component-menu-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 5px; }
.site-header .component-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #352d48;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.site-header .component-menu-item:hover, .site-header .component-menu-item:focus-visible { border-color: #e2d9f0; background: #f4f0fa; color: #352d48; transform: translateY(-1px); }
.component-menu-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #eee8f8; color: #7655b5; }
.component-menu-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.component-menu-item strong, .component-menu-item small { display: block; }
.component-menu-item strong { font-size: 13px; line-height: 1.3; }
.component-menu-item small { margin-top: 3px; color: #7b7487; font-size: 11px; line-height: 1.25; }
.component-menu-code { color: #a69bb9; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.site-header .component-menu-feature { position: relative; display: block; min-height: 236px; overflow: hidden; border-radius: 13px; background: #201b2c; color: #fff; }
.component-menu-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.component-menu-feature::after { position: absolute; inset: 25% 0 0; background: linear-gradient(180deg, transparent, #171321e8 94%); content: ""; }
.component-menu-feature:hover { color: #fff; }
.component-menu-feature:hover img { transform: scale(1.04); }
.component-menu-feature-copy { position: absolute; z-index: 1; inset: auto 17px 16px; display: grid; gap: 7px; }
.component-menu-feature-copy small { color: #d8c7f5; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.component-menu-feature-copy strong { max-width: 220px; font-size: 18px; line-height: 1.2; }
.component-menu-feature-copy > span { display: flex; justify-content: space-between; align-items: center; color: #e8e1f2; font-size: 12px; }
.component-menu-feature-copy b { color: #d1b6ff; font-size: 18px; }
.header-quick-mega-menu { z-index: 1002; }
.quick-menu-feature-slot { min-width: 0; }
.component-menu-team-feature {
    position: relative;
    display: flex;
    min-height: 236px;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: 13px;
    background: linear-gradient(145deg, #33284b, #1b1725 78%);
    color: #fff;
}
.component-menu-team-feature:hover { color: #fff; }
.team-feature-copy { position: relative; z-index: 1; display: grid; gap: 8px; }
.team-feature-copy small { color: #d6c2f6; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.team-feature-copy strong { max-width: 220px; font-size: 18px; line-height: 1.2; }
.team-feature-copy > span { display: flex; align-items: center; justify-content: space-between; color: #e8e1f2; font-size: 12px; }
.team-feature-copy b { color: #d1b6ff; font-size: 18px; }
.team-feature-portraits { display: flex; align-items: center; padding-top: 4px; }
.quick-menu-portrait.about-portrait { width: 54px; height: 54px; min-width: 54px; margin: 0 -6px 0 0; border: 2px solid #2a223a; background-size: 200% 200%; }
.quick-menu-portrait.about-portrait:first-child { margin-left: 0; }
.component-menu-team-feature:hover .quick-menu-portrait { transform: translateY(-2px); }

@media (max-width: 900px) {
    .site-header .header-inner { gap: 20px; }
    .site-header .logo-art { width: 145px; }
    .site-header .header-inner > nav { gap: 17px; }
    .site-header .header-inner > nav a { font-size: 13px; }
    .site-header .header-actions { gap: 3px; }
}
@media (max-width: 1080px) {
    .component-mega-menu { grid-template-columns: minmax(180px, .7fr) minmax(390px, 1.5fr); gap: 20px; padding: 24px; }
    .component-menu-feature { display: none !important; }
    .header-quick-mega-menu { grid-template-columns: minmax(180px, .7fr) minmax(390px, 1.5fr); }
    .header-quick-mega-menu .quick-menu-feature-slot { display: none; }
}
@media (max-width: 760px) {
    .site-header .header-inner {
        grid-template-columns: auto 1fr;
        gap: 0 12px;
        padding-block: 6px 0;
    }
    .site-header .logo-art { width: 138px; }
    .site-header .header-inner > nav {
        justify-content: flex-start;
        gap: clamp(15px, 5vw, 34px);
        margin-right: 0;
        overflow-x: auto;
    }
    .site-header .header-inner > nav a {
        padding: 9px 0 11px;
        white-space: nowrap;
    }
    .site-header .header-inner > nav .component-menu-trigger { padding: 9px 0 11px; }
    .site-header .header-actions { margin-left: 0; }
    .component-mega-menu {
        position: fixed;
        top: var(--component-menu-top, 112px);
        left: 12px;
        grid-template-columns: 1fr;
        gap: 12px;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - var(--component-menu-top, 112px) - 14px);
        overflow-y: auto;
        padding: 18px;
        transform: none;
        border-radius: 0 0 16px 16px;
    }
    .header-quick-mega-menu { top: var(--component-menu-top, 112px); }
    .header-quick-mega-menu .quick-menu-feature-slot { display: block; }
    .header-quick-mega-menu .component-menu-feature,
    .header-quick-mega-menu .component-menu-team-feature { min-height: 160px; }
    .component-menu-intro { padding: 0; }
    .component-menu-intro > p:not(.eyebrow) { max-width: 440px; margin-bottom: 12px; }
    .component-menu-categories { gap: 2px; }
    .site-header .component-menu-item { min-height: 60px; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 7px 5px; }
    .component-menu-icon { width: 36px; height: 36px; border-radius: 10px; }
    .component-menu-code { display: none; }
}
@media (max-width: 390px) {
    .site-header .logo-art { width: 118px; }
    .site-header .header-icon-button { width: 33px; height: 34px; padding: 7px; }
}

/* Accesos del encabezado agrupados después de la línea divisoria. */
@media (max-width: 900px) {
    .site-header .header-actions { padding-left: 12px; }
}
@media (max-width: 760px) {
    .site-header .header-actions { gap: 2px; padding-left: 9px; }
}
@media (max-width: 390px) {
    .site-header .header-actions { gap: 0; padding-left: 7px; }
}

/* Portadas fotográficas del catálogo: una imagen real por categoría. */
.components-hero,
.category-hero {
    display: flex;
    align-items: stretch;
    min-height: clamp(500px, 46vw, 620px);
    isolation: isolate;
    background: #171923;
}
.components-hero {
    position: relative;
    min-height: clamp(510px, 43vw, 640px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 24px 55px rgba(29, 22, 43, .16);
}
.components-hero::before,
.category-hero::before {
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 65%;
    background: #171923;
    clip-path: polygon(0 0, 100% 0, 89% 100%, 0 100%);
    content: "";
    pointer-events: none;
}
.components-hero::before {
    inset: 0;
    width: 100%;
    clip-path: none;
    background:
        linear-gradient(90deg, rgba(22, 19, 34, .96) 0%, rgba(22, 19, 34, .88) 30%, rgba(22, 19, 34, .54) 54%, rgba(22, 19, 34, .08) 100%),
        linear-gradient(0deg, rgba(22, 19, 34, .54) 0%, transparent 45%);
}
.components-hero-copy,
.category-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 56%;
    padding: clamp(40px, 5vw, 72px);
    font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
}
.components-hero-copy {
    width: min(70%, 900px);
    justify-content: flex-end;
    padding: clamp(34px, 5.2vw, 76px);
    padding-top: clamp(52px, 6vw, 88px);
    padding-bottom: clamp(38px, 4.2vw, 62px);
}
.components-hero h1,
.category-hero h1 {
    max-width: 690px;
    margin: 0 0 22px;
    font-family: inherit;
    font-size: clamp(48px, 5.2vw, 76px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.055em;
}
.components-hero h1 { max-width: 800px; }
.components-hero-copy > p:not(.eyebrow),
.category-hero-copy > p:not(.eyebrow) {
    max-width: 530px;
    margin-bottom: 28px;
    color: #e2e3e9;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.5;
}
.components-hero .eyebrow,
.category-hero .eyebrow {
    color: #c5a8ff;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .18em;
}
.components-stats,
.category-facts { gap: 12px; padding-top: 24px; }
.components-stats dt,
.category-facts dt { font-family: inherit; font-size: clamp(22px, 2.4vw, 32px); }
.components-hero-art,
.category-hero-products {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 48%;
    min-height: 0;
    background: #252331;
}
.components-hero-art {
    inset: 0;
    background: #1b1a27;
}
.components-hero-art::after,
.category-hero-products::after { display: none; }
.components-hero-art img.hero-photo,
.category-hero-products img.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: normal;
    filter: none;
}
.components-hero-art img.hero-photo { object-position: center; }
.components-hero-art img.hero-photo { object-position: center 47%; }
.category-page[data-category="CPU"] .hero-photo { object-position: 62% center; }
.category-page[data-category="GPU"] .hero-photo { object-position: 58% center; }
.category-page[data-category="RAM"] .hero-photo { object-position: 60% center; }
.category-page[data-category="Almacenamiento"] .hero-photo { object-position: 58% center; }
.category-page[data-category="Placa madre"] .hero-photo { object-position: 63% center; }
.category-page[data-category="Fuente"] .hero-photo { object-position: 62% center; }
.category-page[data-category="Gabinete"] .hero-photo { object-position: 59% center; }
.category-page[data-category="Refrigeración"] .hero-photo { object-position: 60% center; }
.components-hero-art img.hero-photo-fallback,
.category-hero-products img.hero-photo-fallback {
    object-fit: contain;
    object-position: center;
    padding: 30px 7%;
}
@media (max-width: 820px) {
    .components-hero,
    .category-hero { min-height: 640px; }
    .components-hero::before,
    .category-hero::before {
        inset: 0 0 auto;
        width: 100%;
        height: 70%;
        clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    }
    .components-hero-copy,
    .category-hero-copy {
        align-self: flex-start;
        justify-content: flex-start;
        width: 100%;
        padding: 38px 34px;
    }
    .components-hero-art,
    .category-hero-products { inset: 37% 0 0; min-height: 0; }
    .components-hero-art { inset: 0; }
    .components-hero::before { inset: 0; width: 100%; height: 100%; clip-path: none; }
    .components-hero::before {
        background:
            linear-gradient(90deg, rgba(22, 19, 34, .88), rgba(22, 19, 34, .38)),
            linear-gradient(0deg, rgba(22, 19, 34, .76) 0%, rgba(22, 19, 34, .28) 65%, rgba(22, 19, 34, .3));
    }
    .components-hero-copy { width: 100%; justify-content: flex-end; padding: 38px 34px; }
    .components-hero-art img.hero-photo,
    .category-hero-products img.hero-photo { object-position: center bottom; }
}
@media (max-width: 580px) {
    .components-hero { min-height: 650px; }
    .category-hero { min-height: 620px; }
    .components-hero::before { inset: 0; width: 100%; height: 100%; clip-path: none; }
    .category-hero::before { height: 60%; }
    .components-hero-copy { padding: 30px 24px 26px; }
    .category-hero-copy { padding: 30px 24px; }
    .components-hero h1,
    .category-hero h1 { font-size: clamp(39px, 10vw, 52px); letter-spacing: -.05em; }
    .components-hero-copy > p:not(.eyebrow),
    .category-hero-copy > p:not(.eyebrow) { margin-bottom: 18px; font-size: 15px; }
    .components-stats,
    .category-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 16px; }
    .components-stats dt,
    .category-facts dt { font-size: 17px; overflow-wrap: anywhere; }
    .components-stats dd,
    .category-facts dd { font-size: 12px; line-height: 1.3; letter-spacing: 0; }
}

.components-hub-page .footer-layout { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }

/* Logotipo vivo: la palabra usa la fuente seleccionada en la prueba. */
.logo-art,
.site-header .logo-art,
.site-footer .logo-art,
.account-brand .logo-art {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}
.logo-art > img.logo-symbol { display: block; width: 27px; height: 27px; flex: 0 0 27px; object-fit: contain; }
.logo-word { color: inherit; font-family: inherit; font-size: 26px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.site-footer .logo-word { font-size: 25px; }
.account-brand .logo-word { color: #332b45; font-size: 28px; }
.site-header .logo-art { width: auto; }
.site-footer .logo-art { width: auto; }

@media (max-width: 600px) {
    .site-header .logo-art { gap: 6px; }
    .site-header .logo-art > img.logo-symbol { width: 23px; height: 23px; flex-basis: 23px; }
    .site-header .logo-word { font-size: 22px; }
}

@media (max-width: 1100px) {
    .components-hub-page .components-hero { min-height: clamp(520px, 58vw, 620px); }
}

/* La interfaz usa títulos y texto útil; se retiran las microetiquetas decorativas. */
.eyebrow,
.journey-label,
.journey-number,
.idea-label,
.home-page .category-code,
.hub-category-copy > span,
.lineup-number,
.proto-tool-badge,
.build-visual-badge,
.product-lower-kicker,
.product-accordion-button small,
.product-image-caption,
.home-build-note,
.comparison-note,
.build-preview-note,
.product-price-disclaimer {
    display: none !important;
}

/* Comparación en tabla con imágenes contenidas y control para pantallas angostas. */
.comparison-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    scrollbar-width: thin;
    scrollbar-color: var(--blue) transparent;
}
.comparison-table {
    display: table;
    grid-template-columns: none;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    overflow: visible;
    font-size: inherit;
}
.comparison-table th,
.comparison-table td { min-width: 0; padding: 14px 16px; overflow-wrap: normal; border-left: 1px solid var(--line); text-align: center; vertical-align: middle; }
.comparison-table tr > :first-child { width: 150px; border-left: 0; }
.comparison-table thead th { background: color-mix(in srgb, var(--background) 60%, var(--surface)); }
.comparison-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--background) 52%, var(--surface)); }
.comparison-table tbody tr { border-top: 1px solid var(--line); }
.comparison-table .comparison-label { color: var(--ink); font-size: 12px; font-weight: 750; text-align: left !important; }
.comparison-table .comparison-product { color: var(--ink); font-size: 13px; font-weight: 700; }
.comparison-product span { display: block; max-width: 230px; margin: 8px auto 0; line-height: 1.4; }
.comparison-table td { color: var(--muted); font-size: 12px; line-height: 1.45; }
.comparison-table .comparison-image {
    display: grid;
    width: 100%;
    height: 112px;
    place-items: center;
    overflow: hidden;
    padding: 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--background) 70%, var(--surface));
}
.comparison-table .comparison-image img {
    position: static !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    mix-blend-mode: normal;
}
.catalog-image-fallback { display: grid; max-width: 100%; place-items: center; color: var(--muted); font-size: 11px; font-weight: 650; text-align: center; }
.comparison-table .comparison-image.is-empty { color: var(--muted); }
.comparison-slider-row { padding: 4px 4px 0; }
.comparison-slider-row[hidden] { display: none; }
.comparison-slider { display: block; width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; cursor: grab; }
.comparison-slider:active { cursor: grabbing; }
.comparison-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--line); }
.comparison-slider::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
.comparison-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none; border: 3px solid var(--surface); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent); }
.comparison-slider::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--surface); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent); }
.category-page .catalog-product-card { min-width: 0; overflow: hidden; }
.category-page .catalog-product-media {
    position: relative;
    display: grid;
    width: 100%;
    height: clamp(320px, 28vw, 390px);
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: 18px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--background) 62%, var(--surface));
}
.category-page .catalog-product-media img {
    position: static !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 12px;
    box-sizing: border-box;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
}
.category-page .catalog-product-media img[hidden] { display: none !important; }
.category-page .catalog-product-media.is-empty { color: var(--muted); }
.category-page[data-category="RAM"] .catalog-product-media img { padding: 18px 12px; }
.category-page[data-category="GPU"] .catalog-product-media img { padding: 12px; }
.category-page[data-category="Gabinete"] .catalog-product-media img { padding: 8px 18px; }
.category-page[data-category="CPU"] .catalog-product-media img { padding: 26px; }

/* Las fotos de comparación tienen espacio vertical suficiente para mostrar cada pieza completa. */
.comparison-table .comparison-image {
    width: min(100%, 300px);
    height: clamp(230px, 23vw, 280px);
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
}
.comparison-table .comparison-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
}
@media (max-width: 700px) {
    .comparison-table { min-width: 680px; }
    .comparison-table tr > :first-child { width: 126px; }
    .comparison-table th,
    .comparison-table td { padding: 12px 10px; }
    .comparison-table .comparison-image { height: 210px; }
}
.hub-section-heading > p,
.category-section-heading > p:not(#cantidad-productos) { display: none !important; }

.journey-card { min-height: 250px; }
.journey-card > p:not(.journey-label) { font-size: 16px; line-height: 1.5; }
.journey-card h3 { margin-bottom: 16px; }
.home-featured-builds .home-build-tag { font-size: 14px; letter-spacing: .02em; }
.components-stats dd,
.category-facts dd { font-size: 13px; letter-spacing: .02em; text-transform: none; }
.hub-category-copy p,
.lineup-summary,
.catalog-product-specs,
.comparison-label,
.comparison-table td { font-size: 15px; line-height: 1.5; }
.hub-category-copy strong,
.catalog-source,
.category-filters label,
.result-count,
.footer-bottom { font-size: 14px; }
.footer-column h2 { font-size: 14px; letter-spacing: .02em; text-transform: none; }
.footer-layout { font-size: 14px; }
.product-kicker,
.product-category,
.product-brand,
.product-summary,
.product-status { font-size: 14px; letter-spacing: 0; }
.tool-note,
.smart-disclaimer,
.smart-result-note { font-size: 15px; line-height: 1.5; }

@media (max-width: 580px) {
    .components-stats dd,
    .category-facts dd { font-size: 13px; line-height: 1.3; }
}


/* Ampliación de la página de Componentes */
.components-hub .component-categories { padding-bottom: 70px; }
.components-hub .hub-category-card { min-height: 410px; }
.components-hub .hub-category-media { height: 225px; }
.components-hub .hub-category-copy { padding: 21px 23px 23px; }
.components-hub .hub-category-copy h3 { font-size: 24px; }
.components-hub .components-guide { margin-bottom: 86px; }

.component-extra { margin-bottom: 82px; }
.component-extra .hub-section-heading { margin-bottom: 25px; }
.component-extra .hub-section-heading h2 { max-width: 750px; }
.component-extra .hub-section-heading > p { max-width: 390px; }

.component-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.component-choice {
    min-width: 0;
    padding: 26px;
    border: 1px solid #e0dce8;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(48, 40, 67, .05);
}
.component-choice:nth-child(2) { background: #eae5f2; }
.component-choice:nth-child(4) { background: #e5eaf1; }
.component-choice h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.component-choice p { margin: 0; color: #665f70; font-size: 15px; line-height: 1.5; }
.component-choice a { display: inline-block; margin-top: 20px; color: #67489f; font-size: 14px; font-weight: 750; }

.component-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.component-feature {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e0dce8;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(48, 40, 67, .06);
}
.component-feature-media {
    display: flex;
    height: 235px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #ede9f3;
}
.component-feature-media img { display: block; width: 100%; height: 190px; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: normal; }
.component-feature-body { display: flex; flex: 1; flex-direction: column; padding: 25px 27px 28px; }
.component-feature-body h3 { margin: 0 0 10px; font-size: 27px; line-height: 1.15; letter-spacing: -.035em; }
.component-feature-body p { margin: 0 0 15px; color: #665f70; font-size: 15px; line-height: 1.5; }
.component-feature-body ul { display: grid; gap: 7px; margin: 0 0 20px; padding: 0; list-style: none; color: #383244; font-size: 14px; }
.component-feature-body a { margin-top: auto; color: #67489f; font-size: 14px; font-weight: 750; }

.component-build-cta {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    min-height: 330px;
    margin-bottom: 95px;
    overflow: hidden;
    border-radius: 22px;
    background: #30283e;
    color: #fff;
}
.component-build-cta > div:first-child { align-self: center; padding: 50px 56px; }
.component-build-cta h2 { max-width: 650px; margin: 0 0 15px; font-size: clamp(36px, 4vw, 54px); line-height: 1.04; letter-spacing: -.045em; }
.component-build-cta p { max-width: 550px; margin: 0 0 23px; color: #ded8e8; font-size: 16px; line-height: 1.5; }
.component-build-cta .button { background: #ff744b; color: #18202d; border: 0; }
.component-build-cta-media { position: relative; min-height: 330px; display: grid; place-items: center; overflow: hidden; background: #17141e; }
.component-build-cta-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }

/* Banners fotográficos completos: conserva el encuadre y coloca el texto sobre una zona oscura. */
.components-hub-page .components-hub .components-guide,
.components-hub-page .component-build-cta {
    position: relative;
    display: block;
    min-height: clamp(440px, 39vw, 590px);
    isolation: isolate;
    background: #17141e;
}
.components-hub-page .components-guide::after,
.components-hub-page .component-build-cta::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 15, 26, .96) 0%, rgba(18, 15, 26, .88) 36%, rgba(18, 15, 26, .36) 68%, rgba(18, 15, 26, .08) 100%);
    content: "";
    pointer-events: none;
}
.components-hub-page .components-guide > div:first-child,
.components-hub-page .component-build-cta > div:first-child {
    position: absolute;
    z-index: 2;
    inset: 50% auto auto 0;
    width: min(58%, 730px);
    padding: clamp(32px, 5vw, 78px);
    transform: translateY(-50%);
}
.components-hub-page .components-guide h2,
.components-hub-page .component-build-cta h2 { color: #fff; }
.components-hub-page .components-guide .eyebrow { color: #d9c6ff; }
.components-hub-page .components-guide p:not(.eyebrow),
.components-hub-page .component-build-cta p { color: #eee9f5; }
.components-hub-page .guide-visual,
.components-hub-page .component-build-cta-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-height: 0;
    display: block;
    padding: 0;
    background: #17141e;
}
.components-hub-page .guide-visual img,
.components-hub-page .component-build-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.components-hub-page .component-build-cta .button { position: relative; z-index: 2; }
@media (max-width: 700px) {
    .components-hub-page .components-hub .components-guide,
    .components-hub-page .component-build-cta { min-height: 510px; }
    .components-hub-page .components-guide::after,
    .components-hub-page .component-build-cta::after {
        background: linear-gradient(180deg, rgba(18, 15, 26, .84) 0%, rgba(18, 15, 26, .72) 48%, rgba(18, 15, 26, .44) 100%);
    }
    .components-hub-page .components-guide > div:first-child,
    .components-hub-page .component-build-cta > div:first-child {
        inset: 0;
        display: flex;
        width: auto;
        flex-direction: column;
        justify-content: center;
        padding: 30px 26px;
        transform: none;
    }
}

@media (max-width: 1100px) {
    .component-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .component-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .components-hub .hub-category-card { min-height: 0; }
    .components-hub .hub-category-media { height: 220px; }
    .component-extra { margin-bottom: 64px; }
    .component-extra .hub-section-heading { display: block; }
    .component-choice-grid, .component-feature-grid, .component-build-cta { grid-template-columns: 1fr; }
    .component-build-cta > div:first-child { padding: 36px 30px; }
    .component-build-cta-media { min-height: 260px; }
}

/* Página Acerca de: presentación del proyecto y su equipo. */
.about-page { background: #f1eef7; color: #352d48; }
.about-page .header-icon-button.is-current { background: #ffffff18; color: #d7c6f5; }
.about-main { width: var(--content-container-width); max-width: var(--content-max-width); margin-inline: auto; }
.about-hero { position: relative; display: grid; min-height: 560px; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 36px; overflow: hidden; margin: var(--page-top-space) 0 var(--section-space); padding: clamp(38px, 6vw, 82px); border-radius: 28px; background: #302940; color: #fcfbfe; isolation: isolate; }
.about-hero::before { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 56%; background: radial-gradient(ellipse at 60% 48%, #7655b54d, transparent 60%); content: ""; }
.about-hero-copy { max-width: 610px; }
.about-hero-copy .eyebrow, .about-page .eyebrow { color: #a98ce0; }
.about-hero h1 { max-width: 620px; margin-bottom: 22px; font-size: clamp(42px, 5.3vw, 72px); letter-spacing: -.065em; }
.about-hero-copy > p:not(.eyebrow) { max-width: 510px; margin-bottom: 30px; color: #e2dbea; font-size: clamp(16px, 1.5vw, 19px); }
.about-hero-link { display: inline-flex; align-items: center; gap: 22px; padding: 12px 0; border-bottom: 1px solid #b99be8; color: #fff; font-weight: 700; }
.about-hero-link:hover { color: #d7c6f5; }
.about-hero-art { position: relative; display: grid; min-height: 400px; place-items: center; }
.about-forbi { position: relative; z-index: 2; width: min(100%, 350px); overflow: visible; filter: drop-shadow(0 24px 24px #100d1d66); }

/* Encuadre uniforme para que cada componente conserve su foto completa. */
.components-hub .hub-category-card .hub-category-media {
    position: relative;
    display: block;
    background: #ede9f3;
}
.components-hub .hub-category-card .hub-category-media img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px) !important;
    height: calc(100% - 28px) !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: normal;
    filter: none;
    justify-self: center;
    align-self: center;
    transform: none;
}
.components-hub .hub-category-card:hover .hub-category-media img {
    transform: none;
}
.components-hub .components-guide { min-height: 0; }
.components-hub .guide-visual { min-height: 0; aspect-ratio: 3 / 2; }
.components-hub .guide-visual img { min-height: 0; }

@media (max-width: 1000px) {
    .components-hub .components-guide { grid-template-columns: 1fr; }
    .components-hub .components-guide > div:first-child { padding: clamp(32px, 5vw, 56px); }
    .components-hub .guide-visual { width: 100%; aspect-ratio: 3 / 2; }
}
.forbi-antenna, .forbi-wave-arm, .forbi-wave-hand, .forbi-smile { fill: none; stroke: #e6dcf6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.forbi-signal, .forbi-status { fill: #9eebce; }
.forbi-ear { fill: #ab8ce0; }
.forbi-face { stroke: #e1d6f4; stroke-width: 4; }
.forbi-eyes { fill: #9eebce; transform-origin: center; }
.forbi-neck { fill: none; stroke: #b79ae6; stroke-linecap: round; stroke-width: 8; }
.forbi-base { fill: #d8c5f7; }
.forbi-wave-arm { stroke: #c7aff0; stroke-width: 8; transform-origin: 244px 169px; }
.forbi-joint { fill: #b99be8; }
.about-orbit { position: absolute; width: min(90%, 400px); aspect-ratio: 1; border: 1px solid #d7c6f52a; border-radius: 50%; }
.about-orbit::before, .about-orbit::after { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #a98ce0; content: ""; box-shadow: 0 0 20px #a98ce099; }
.about-orbit::before { top: 16%; left: 14%; }
.about-orbit::after { right: 8%; bottom: 25%; width: 7px; height: 7px; background: #9eebce; }
.about-orbit--two { width: min(76%, 330px); border-style: dashed; }
.about-chip { position: absolute; z-index: 3; padding: 8px 13px; border: 1px solid #ffffff25; border-radius: 12px; background: #403751cc; color: #eee8f8; font-size: 11px; font-weight: 800; letter-spacing: .11em; box-shadow: 0 12px 30px #17132155; }
.about-chip--cpu { top: 15%; left: 8%; }
.about-chip--gpu { top: 26%; right: 2%; }
.about-chip--ram { bottom: 14%; left: 15%; }
.about-online { position: absolute; z-index: 3; right: 1%; bottom: 8%; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid #ffffff26; border-radius: 999px; background: #241f31e8; color: #e7e0f0; font-size: 12px; }
.about-online i { width: 8px; height: 8px; border-radius: 50%; background: #80dfb5; box-shadow: 0 0 12px #80dfb5; }
.about-purpose, .about-team { margin: 0 auto var(--section-space); }
.about-section-intro { max-width: 680px; }
.about-section-intro h2, .about-guide h2 { margin-bottom: 16px; font-size: clamp(34px, 4.5vw, 54px); letter-spacing: -.055em; }
.about-purpose { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 20px 80px; }
.about-purpose > p { max-width: 500px; margin: 0 0 4px; color: #70687d; font-size: 17px; }
.about-principles { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.about-principles article { min-height: 190px; padding: 24px 26px; border: 1px solid #ded8e9; border-radius: 18px; background: #fcfbfe; }
.about-principle-index { color: #8060c7; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.about-principles h3 { margin: 30px 0 8px; font-size: 22px; letter-spacing: -.03em; }
.about-principles p, .about-team .about-section-intro > p:last-child { margin-bottom: 0; color: #70687d; }
.about-team { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.about-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-person { min-height: 145px; padding: 20px; border: 1px solid #ded8e9; border-radius: 16px; background: #fcfbfe; }
.about-avatar { display: grid; width: 42px; height: 42px; margin-bottom: 16px; place-items: center; border-radius: 14px; background: #eee8f8; color: #67489f; font-size: 13px; font-weight: 800; }
.about-person h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.025em; }
.about-person p { margin: 0; color: #837b8e; font-size: 13px; }
.about-guide { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 28px; margin-bottom: var(--section-space); padding: 34px 40px; border-radius: 22px; background: #e7e0f1; }
.about-guide .eyebrow { margin-bottom: 9px; }
.about-guide h2 { margin-bottom: 8px; font-size: clamp(25px, 3vw, 34px); }
.about-guide p:not(.eyebrow) { max-width: 620px; margin: 0; color: #70687d; }
.about-project-focus { margin: 0 auto var(--section-space); padding: 34px 40px; border-radius: 22px; background: #e7e0f1; }
.about-project-focus > div { max-width: 900px; }
.about-project-focus .eyebrow { margin-bottom: 9px; }
.about-project-focus h2 { margin-bottom: 8px; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.055em; }
.about-project-focus p:not(.eyebrow) { max-width: 760px; margin: 0; color: #70687d; }
.about-guide-link { display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px; border-radius: 8px; background: #7655b5; color: white; font-weight: 700; white-space: nowrap; }
.about-guide-link:hover { background: #62439c; color: white; }
.about-guide-robot { position: relative; display: grid; width: 112px; height: 112px; place-items: center; border-radius: 50%; background: #d8c9ee; }
.about-guide-orbit { position: absolute; inset: 8px; border: 1px dashed #8060c7; border-radius: 50%; }
.about-guide-orbit::after { position: absolute; top: 5px; left: 19px; width: 8px; height: 8px; border-radius: 50%; background: #9eebce; content: ""; }
.about-guide-face { position: relative; display: flex; width: 60px; height: 48px; align-items: center; justify-content: center; gap: 13px; border: 3px solid #8060c7; border-radius: 19px; background: #302940; box-shadow: 0 8px 18px #46336128; }
.about-guide-face::before, .about-guide-face::after { position: absolute; top: 17px; width: 7px; height: 18px; border-radius: 7px; background: #8060c7; content: ""; }
.about-guide-face::before { left: -10px; }.about-guide-face::after { right: -10px; }
.about-guide-face i { width: 6px; height: 8px; border-radius: 50%; background: #9eebce; box-shadow: 0 0 10px #9eebce; }
.about-guide-face b { position: absolute; bottom: 8px; width: 12px; height: 4px; border-radius: 4px; background: #c9a8ff; }
.about-guide-spark { position: absolute; top: 4px; right: 17px; color: #8060c7; }
.about-footer .footer-layout { grid-template-columns: 1.4fr repeat(3, 1fr); }

/* Footer común: misma estructura y jerarquía visual en todas las páginas. */
.site-footer {
    padding: 32px 0 0;
    background: var(--navy);
    color: #e0dbea;
}
.site-footer .footer-inner.footer-layout {
    display: grid;
    width: var(--site-container-width);
    max-width: var(--site-max-width);
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 32px;
    margin-inline: auto;
    padding-bottom: 26px;
    font-size: 13px;
}
.site-footer .footer-brand .logo { display: inline-block; margin-bottom: 10px; }
.site-footer .footer-brand > p { margin: 0 0 6px; }
.site-footer .footer-description { max-width: 290px; color: #b8afc8; line-height: 1.6; }
.site-footer .footer-column { display: grid; align-content: start; gap: 7px; }
.site-footer .footer-column h2 {
    margin: 2px 0 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}
.site-footer .footer-column a {
    padding: 0;
    border: 0;
    color: #e0dbea;
    font-size: inherit;
    line-height: 1.45;
}
.site-footer .footer-column a:hover { color: #d8c5ff; }
.site-footer .footer-bottom {
    display: flex;
    width: var(--site-container-width);
    max-width: var(--site-max-width);
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-inline: auto;
    border-top: 1px solid #ffffff1f;
    color: #b8afc8;
    font-size: 12px;
}
.site-footer .footer-bottom a { color: #e0dbea; }

@media (max-width: 980px) {
    .site-footer .footer-inner.footer-layout {
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .site-footer .footer-brand { grid-column: 1 / -1; }
    .site-footer .footer-description { max-width: 520px; }
}
@media (max-width: 720px) {
    .site-footer .footer-inner.footer-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 18px;
        padding-bottom: 22px;
    }
    .site-footer .footer-brand,
    .site-footer .footer-column:last-child { grid-column: 1 / -1; }
    .site-footer .footer-bottom {
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
        padding-block: 16px;
    }
}
@media (max-width: 900px) {
    .about-hero { grid-template-columns: 1fr .8fr; min-height: 500px; gap: 8px; padding: 42px; }
    .about-hero-art { min-height: 320px; }
    .about-chip--gpu { right: -6%; }
    .about-online { right: -5%; }
    .about-purpose { gap: 20px 36px; }
    .about-team { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
    .about-hero { grid-template-columns: 1fr; min-height: 0; margin: 20px 0 70px; padding: 32px 24px 22px; border-radius: 20px; }
    .about-hero h1 { font-size: clamp(42px, 12vw, 58px); }
    .about-hero-art { min-height: 300px; margin-top: 4px; }
    .about-forbi { width: min(78%, 280px); }
    .about-orbit { width: min(85%, 310px); }
    .about-chip--cpu { top: 8%; left: 4%; }.about-chip--gpu { top: 19%; right: 0; }.about-chip--ram { bottom: 7%; left: 4%; }
    .about-online { right: 0; bottom: 2%; }
    .about-purpose, .about-team { margin-bottom: 72px; }
    .about-purpose { grid-template-columns: 1fr; gap: 18px; }
    .about-principles { grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
    .about-principles article { min-height: 0; }
    .about-principles h3 { margin-top: 18px; }
    .about-team-grid { gap: 10px; }
    .about-person { min-height: 138px; padding: 15px; }
    .about-person h3 { font-size: 16px; }
    .about-guide { grid-template-columns: 72px 1fr; gap: 16px; margin-bottom: 64px; padding: 22px 18px; }
    .about-project-focus { margin-bottom: 64px; padding: 22px 18px; }
    .about-guide-robot { width: 70px; height: 70px; }
    .about-guide-face { transform: scale(.7); }
    .about-guide-spark { top: 0; right: 5px; }
    .about-guide-link { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .about-page *, .about-page *::before, .about-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Equipo: retratos circulares y composición editorial. */
.about-team { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.about-team-intro { max-width: 340px; }
.about-team-intro .eyebrow { margin-bottom: 20px; }
.about-team-intro h2 { margin: 0 0 18px; color: #292333; font-size: clamp(48px, 6vw, 68px); line-height: 1.04; letter-spacing: -.06em; }
.about-team-intro h2 span { color: #ef704b; }
.about-team-intro > p:last-child { max-width: 300px; margin: 0; color: #70687d; font-size: 16px; line-height: 1.6; }
.about-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; }
.about-team .about-person { display: flex; min-width: 0; min-height: 0; padding: 0; flex-direction: column; align-items: center; border: 0; border-radius: 0; background: transparent; text-align: center; }
.about-team .about-person:nth-child(4) { grid-column: 2; }
.about-portrait { display: block; width: clamp(116px, 11vw, 154px); aspect-ratio: 1; margin-bottom: 15px; border-radius: 50%; background-image: url("img/about/team-portraits.png?v=20261006-team-4"); background-repeat: no-repeat; background-size: 200% 200%; transition: transform .25s ease; }
.about-portrait--luis { background-position: 0 0; }
.about-portrait--nayeli { background-position: 100% 0; }
.about-portrait--justin { background-position: 0 100%; }
.about-portrait--valeria { background-position: 100% 100%; }
.about-team .about-person:hover .about-portrait { transform: translateY(-3px); }
.about-person-body { padding: 0; }
.about-team .about-person-body h3 { margin: 0 0 5px; color: #292333; font-size: 19px; letter-spacing: -.025em; }
.about-team .about-person-body p { margin: 0; color: #70687d; font-size: 14px; }
@media (max-width: 900px) {
    .about-team { grid-template-columns: 1fr; gap: 30px; }
    .about-team-intro { max-width: 500px; }
    .about-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .about-team .about-person:nth-child(4) { grid-column: auto; }
    .about-portrait { width: clamp(112px, 34vw, 146px); }
}
@media (prefers-reduced-motion: reduce) {
    .about-portrait { transition: none; }
}
/* Tabla comparativa de componentes: mejor lectura de fotos y especificaciones. */
.comparison-table .comparison-label { font-size: 14px; }
.comparison-table .comparison-product { font-size: 15px; }
.comparison-table td { font-size: 14px; line-height: 1.5; }
.comparison-table .comparison-image { height: clamp(230px, 23vw, 280px); }
@media (max-width: 720px) { .comparison-table .comparison-image { height: 210px; } }

/* Encabezado: About queda antes del separador y el idioma cierra el grupo. */
.site-header .header-actions { padding-left: 0; border-left: 0; }
.site-header .header-about-link {
    order: 0;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    margin-right: 8px;
    padding: 0 18px 0 8px;
    border-right: 1px solid rgba(255, 255, 255, .24);
    color: inherit;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .header-about-link:hover,
.site-header .header-about-link[aria-current="page"] { color: #c3adeb; }
.site-header .header-actions > .profile-menu-anchor { order: 1; }
.site-header .header-actions > [data-open-search] { order: 2; }
.site-header .header-actions > a[href="builds-guardadas.html"] { order: 3; }
.site-header .header-actions > .theme-toggle { order: 4; }
.site-header .header-actions > .pcf-region-picker { order: 5; margin-left: 4px; }
.site-header .header-actions > .header-about-control { order: 0; }
.header-nav-dropdown,
.header-about-control { position: relative; display: inline-flex; align-items: center; }
.header-about-control { min-height: 42px; margin-right: 8px; padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, .24); }
.site-header .header-about-control .header-about-link { min-height: 42px; margin: 0; padding: 0 8px; border: 0; }
.site-header .header-dropdown-trigger {
    display: inline-flex;
    width: 22px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.site-header .header-dropdown-trigger:hover,
.site-header .header-dropdown-trigger:focus-visible,
.header-nav-dropdown.is-open > a,
.header-about-control.is-open > a { color: #c3adeb; }
.site-header .header-dropdown-trigger:focus-visible { outline: 2px solid #a48bd5; outline-offset: 1px; }
.header-dropdown-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .2s ease; }
.header-nav-dropdown.is-open .header-dropdown-trigger svg,
.header-about-control.is-open .header-dropdown-trigger svg { transform: rotate(180deg); }
.header-dropdown-panel {
    position: absolute;
    z-index: 1002;
    top: calc(100% + 9px);
    left: 0;
    display: grid;
    width: 264px;
    gap: 2px;
    padding: 10px;
    border: 1px solid #e1dbea;
    border-radius: 0 0 14px 14px;
    background: #fcfbfe;
    box-shadow: 0 18px 38px #1a152333;
}
.header-dropdown-panel[hidden] { display: none; }
.header-dropdown-panel a { padding: 11px 12px; border-radius: 8px; color: #352d48; font-size: 14px; line-height: 1.3; text-decoration: none; }
.header-dropdown-panel a:hover,
.header-dropdown-panel a:focus-visible { background: #f0eaf8; color: #67489f; outline: none; }
.header-about-control .header-dropdown-panel { right: 10px; left: auto; }
@media (max-width: 1000px) {
    .site-header .header-inner { gap: 14px; }
    .site-header .header-inner > nav { gap: 14px; }
    .site-header .header-search-launch { width: 38px; min-width: 38px; flex-basis: 38px; }
    .site-header .header-actions { gap: 4px; }
}
@media (max-width: 820px) {
    .site-header .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 12px;
        padding-block: 6px 0;
    }
    .site-header .header-inner > .logo { grid-column: 1; grid-row: 1; }
    .site-header .header-inner > nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        gap: clamp(15px, 5vw, 34px);
        margin-right: 0;
        overflow-x: auto;
    }
    .site-header .header-inner > nav a { padding: 9px 0 11px; white-space: nowrap; }
    .site-header .header-search-launch { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 4px; }
    .site-header .header-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
        margin-right: 44px;
    }
}
@media (max-width: 900px) {
    .header-about-control { margin-right: 4px; padding-right: 7px; }
}
@media (max-width: 600px) {
    .header-about-control { min-height: 34px; padding-right: 5px; }
    .site-header .header-about-control .header-about-link,
    .site-header .header-dropdown-trigger { min-height: 34px; height: 34px; }
    .site-header .header-about-control .header-about-link { font-size: 13px; }
    .site-header .header-actions > .pcf-region-picker { margin-left: 0; }
}
@media (max-width: 760px) {
    .header-dropdown-panel {
        position: fixed;
        top: var(--quick-menu-top, 112px);
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - var(--quick-menu-top, 112px) - 14px);
        overflow-y: auto;
        border-radius: 0 0 14px 14px;
    }
    .header-about-control .header-dropdown-panel { right: 12px; left: 12px; }
}
@media (max-width: 480px) {
    .site-header .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
    .site-header .logo-art { width: clamp(88px, 25vw, 108px); }
    .site-header .header-actions { gap: 0; min-width: 0; }
    .site-header .header-icon-button { width: 28px; height: 30px; padding: 5px; }
    .header-about-control { margin-right: 0; padding-right: 2px; }
    .site-header .header-about-control .header-about-link { padding-inline: 2px; font-size: 11px; }
    .site-header .header-dropdown-trigger { width: 18px; }
}

/* Acerca de forma parte de la navegación; en pantallas pequeñas se desplaza con ella. */
.site-header .header-inner > nav > .header-about-control {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.site-header .header-inner > nav > .header-about-control .header-about-link {
    min-height: 0;
    padding: 25px 0 23px;
    font-size: 15px;
    white-space: nowrap;
}
@media (max-width: 820px) {
    .site-header .header-inner > nav > .header-about-control .header-about-link {
        min-height: 0;
        padding: 9px 0 11px;
        font-size: inherit;
    }
}