/* =========================================================
   FAMILIA DETALLE — Premium Product Configurator
   ========================================================= */

:root {
    --fam-bg:       #f2f2f4;
    --fam-surface:  #ffffff;
    --fam-ink:      #1d1d1f;
    --fam-ink-2:    #3a3a3c;
    --fam-ink-3:    #636366;
    --fam-line:     #c7c7cc;
    --fam-accent:   #0071e3;
    --fam-accent-h: #0077ed;
    --fam-accent-d: #005cbf;
    --fam-danger:   #e11d48;
    --fam-success:  #10b981;
    --fam-radius:   20px;
    --fam-shadow:   0 8px 32px -8px rgba(0,0,0,.14);
}

body.fam-theme {
    background: var(--fam-bg);
    color: var(--fam-ink);
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fam-main {
    padding-top: 64px;
    padding-bottom: 6rem;
}

.fam-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.fam-breadcrumb {
    padding: 1.4rem 0 .25rem;
    font-size: .8rem;
    color: var(--fam-ink-3);
}
.fam-breadcrumb .fam-container {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}
.fam-breadcrumb a { color: var(--fam-ink-3); text-decoration: none; transition: color .18s; }
.fam-breadcrumb a:hover { color: var(--fam-accent); }
.fam-breadcrumb strong { color: var(--fam-ink); font-weight: 600; }
.fam-breadcrumb span[aria-hidden] { opacity: .35; }

.fam-btn-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1.5px solid #d1d1d6;
    border-radius: 20px;
    background: #fff;
    color: var(--fam-ink-2);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s;
    white-space: nowrap;
}
.fam-btn-back:hover {
    border-color: var(--fam-accent);
    color: var(--fam-accent);
    background: #f0f6ff;
}
.fam-breadcrumb-sep {
    width: 1px;
    height: 14px;
    background: #d1d1d6;
    border-radius: 1px;
    flex-shrink: 0;
}

/* =========================================================
   Hero layout
   ========================================================= */
.fam-hero { padding: .25rem 0 3.5rem; }

.fam-hero-header {
    text-align: center;
    padding: 1.8rem 0 2.8rem;
}
.fam-hero-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fam-accent);
    margin: 0 0 .55rem;
}
.fam-hero-title {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-size: clamp(2.8rem, 5.5vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.01;
    margin: 0;
    color: var(--fam-ink);
}
.fam-hero-tagline {
    margin: .85rem auto 0;
    color: var(--fam-ink-3);
    font-size: 1.02rem;
    font-weight: 500;
    max-width: 520px;
}
.fam-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--fam-ink-2);
    text-decoration: none;
    transition: color .18s;
}
.fam-hero-rating:hover { color: var(--fam-accent); }
.fam-hero-rating i { color: #f59e0b; font-size: .9rem; }
.fam-hero-rating strong { font-weight: 700; color: var(--fam-ink); }

.fam-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.fam-pick-eyebrow {
    margin: 0 0 .1rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fam-ink-3);
}

/* =========================================================
   Visual column — Stage + Thumbs
   ========================================================= */
.fam-visual { position: sticky; top: 72px; }

.fam-stage {
    position: relative;
    --sel-color: #e8e8ed;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--sel-color) 22%, #ffffff) 0%,
        color-mix(in srgb, var(--sel-color) 12%, #ececee) 100%);
    border-radius: 32px;
    aspect-ratio: 9 / 11;      /* portrait — coincide con 900×1980 de los iPhone */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 0 rgba(255,255,255,.6),
        0 24px 64px -20px rgba(0,0,0,.22),
        0 0 0 1px rgba(0,0,0,.05);
    transition: background .5s ease;
}
.fam-stage img {
    width: 96%;
    height: 96%;
    object-fit: contain;
    transition: opacity .32s ease, transform .5s cubic-bezier(.22,1,.36,1);
    filter: drop-shadow(0 16px 32px rgba(0,0,0,.20));
}
.fam-stage.is-swapping img {
    opacity: 0;
    transform: translateY(12px);
}

.fam-thumbs {
    display: flex;
    gap: .55rem;
    margin-top: .9rem;
    justify-content: center;
    flex-wrap: wrap;
}
.fam-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--fam-surface);
    border: 1.5px solid var(--fam-line);
    padding: 5px;
    cursor: pointer;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.fam-thumb:hover {
    border-color: var(--fam-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.fam-thumb.is-active {
    border-color: var(--fam-accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
.fam-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================
   Pick column — Selector
   ========================================================= */
.fam-pick {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.fam-pick-head {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--fam-line);
}
.fam-brand {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fam-ink-3);
}
.fam-title {
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.05;
    margin: 0;
    color: var(--fam-ink);
}
.fam-subtitle {
    margin: 0;
    font-size: .92rem;
    font-weight: 500;
    color: var(--fam-ink-3);
}

/* ── Selector block ─────────────────────────────────────── */
.fam-selector { display: flex; flex-direction: column; gap: .65rem; }

.fam-selector-label {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fam-ink-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.fam-selector-label .fam-color-current {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fam-ink-2);
}

/* ── Sub-modelo tabs ────────────────────────────────────── */
.fam-tabs {
    display: flex;
    gap: .3rem;
    padding: .28rem;
    background: #1d1d1f;
    border-radius: 13px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.fam-tabs::-webkit-scrollbar { display: none; }

.fam-tab {
    flex: 1 1 auto;
    min-width: max-content;
    padding: .65rem 1.1rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.65);   /* contraste ≈ 6:1 sobre #1d1d1f */
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
    letter-spacing: .01em;
}
.fam-tab:hover {
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.1);
}
.fam-tab.is-active {
    background: var(--fam-accent);
    color: #ffffff;                  /* blanco puro sobre azul — contraste 4.6:1 ✓ */
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,113,227,.50);
}
.fam-tab:disabled { opacity: .3; cursor: not-allowed; }

/* ── Storage buttons ─────────────────────────────────────── */
.fam-storages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .55rem;
}
.fam-storage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .9rem 1rem;
    background: var(--fam-surface);
    border: 1.5px solid var(--fam-line);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .2s, background .2s, box-shadow .2s, transform .14s;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.fam-storage:hover {
    border-color: var(--fam-accent);
    background: color-mix(in srgb, var(--fam-accent) 6%, white);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}
.fam-storage.is-active {
    border-color: var(--fam-accent);
    background: var(--fam-accent);
    box-shadow: 0 4px 18px rgba(0,113,227,.40);
    transform: translateY(-2px);
}
.fam-storage.is-active .fam-storage-val   { color: #ffffff; }
.fam-storage.is-active .fam-storage-price { color: rgba(255,255,255,.82); }
.fam-storage:disabled {
    opacity: .4; cursor: not-allowed;
    background: #f5f5f7; transform: none;
    box-shadow: none;
}
.fam-storage-val {
    font-size: .98rem;
    font-weight: 700;
    color: var(--fam-ink);
    letter-spacing: -.01em;
}
.fam-storage-price {
    font-size: .76rem;
    font-weight: 600;
    color: var(--fam-ink-3);
}

/* ── Color swatches ─────────────────────────────────────── */
.fam-colors { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.fam-color-sw {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 2.5px solid transparent;
    padding: 3px;
    cursor: pointer;
    transition: border-color .18s, transform .14s, box-shadow .18s;
    outline: none;
}
.fam-color-sw:hover { transform: scale(1.14); }
.fam-color-sw:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,113,227,.35);
}
.fam-color-sw.is-active {
    border-color: var(--fam-accent);
    box-shadow: 0 0 0 2px rgba(0,113,227,.25), 0 3px 8px rgba(0,0,0,.12);
}
.fam-color-sw:disabled { opacity: .3; cursor: not-allowed; transform: none; }

.fam-color-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--sw, #888);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.14);
}

/* Tooltip color name */
.fam-color-sw::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) scale(.88);
    background: var(--fam-ink);
    color: #fff;
    font-size: .67rem;
    font-weight: 700;
    white-space: nowrap;
    padding: .22rem .52rem;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s, transform .14s;
    z-index: 10;
}
.fam-color-sw:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* =========================================================
   Summary card — precio + CTA
   ========================================================= */
.fam-summary {
    margin-top: .4rem;
    padding: 1.4rem;
    background: var(--fam-surface);
    border: 1px solid var(--fam-line);
    border-radius: var(--fam-radius);
    border-top: 3px solid var(--fam-accent);  /* acento azul arriba */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 6px 28px -8px rgba(0,0,0,.10);
}

.fam-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--fam-line);
}
.fam-summary-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fam-ink-3);   /* #636366 sobre blanco — contraste 5.1:1 ✓ */
}
.fam-summary-config {
    font-size: .9rem;
    font-weight: 700;
    color: var(--fam-ink);
    text-align: right;
}

.fam-price-box {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}
.fam-price-from {
    font-size: .78rem;
    color: var(--fam-ink-3);
    font-weight: 600;
}
.fam-price-amount {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
    font-weight: 800;
    color: var(--fam-ink);
    letter-spacing: -.025em;
    line-height: 1;
}
.fam-price-old {
    font-size: 1rem;
    color: var(--fam-ink-3);
    text-decoration: line-through;
    font-weight: 500;
}
.fam-price-badge {
    padding: .22rem .52rem;
    background: color-mix(in srgb, var(--fam-danger) 10%, white);
    color: var(--fam-danger);   /* #e11d48 sobre ~#fce8ec — contraste ≈ 4.8:1 ✓ */
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.fam-stock-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--fam-ink-2);  /* #3a3a3c sobre blanco — contraste 12.5:1 ✓ */
}
.fam-stock-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fam-success);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fam-success) 22%, transparent);
}
.fam-stock-dot.is-out  { background: var(--fam-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fam-danger) 22%, transparent); }
.fam-stock-dot.is-low  { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.22); }

/* ── Quantity stepper ────────────────────────────────────── */
.fam-qty-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .15rem 0 .1rem;
}
.fam-qty-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--fam-ink-2);
    letter-spacing: .01em;
}
.fam-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.fam-qty-btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--fam-ink-1);
    font-size: .82rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}
.fam-qty-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 8%, #f8fafc);
    color: var(--cat-clr, #3b82f6);
}
.fam-qty-btn:active:not(:disabled) { transform: scale(.94); }
.fam-qty-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.fam-qty-input {
    width: 56px;
    border: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.10);
    border-right: 1px solid rgba(15, 23, 42, 0.10);
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--fam-ink-1);
    font-variant-numeric: tabular-nums lining-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}
.fam-qty-input:focus {
    outline: none;
    background: color-mix(in srgb, var(--cat-clr, #3b82f6) 6%, #ffffff);
}
.fam-qty-input::-webkit-outer-spin-button,
.fam-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.fam-qty-hint {
    font-size: .78rem;
    color: var(--fam-ink-3, #64748b);
    font-weight: 500;
    flex: 1 1 auto;
}
.fam-qty-hint.is-warn { color: #d97706; font-weight: 600; }
.fam-qty-hint.is-max  { color: var(--fam-danger, #dc2626); font-weight: 600; }

/* ── CTA buttons ─────────────────────────────────────────── */
.fam-cta-row {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
}
.fam-cta-primary,
.fam-cta-ghost {
    flex: 1 1 auto;
    min-width: 138px;
    padding: .95rem 1.2rem;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: .93rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}

/* Azul — «Agregar al carrito» */
.fam-cta-primary {
    background: var(--fam-accent);
    color: #ffffff;   /* blanco sobre #0071e3 — contraste 4.6:1 ✓ */
}
.fam-cta-primary:hover {
    background: var(--fam-accent-h);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(0,113,227,.48);
}
.fam-cta-primary:active { transform: translateY(0); box-shadow: none; }
.fam-cta-primary:disabled {
    background: #c7c7cc;
    color: #6c6c70;  /* gris oscuro sobre gris — contraste ≈ 3.2:1 (disabled, no crítico) */
    cursor: not-allowed; transform: none; box-shadow: none;
}

/* Negro — «Comprar ahora» */
.fam-cta-ghost {
    background: var(--fam-ink);
    color: #ffffff;   /* blanco sobre #1d1d1f — contraste 18.5:1 ✓ */
    border: none;
}
.fam-cta-ghost:hover {
    background: #2c2c2e;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.32);
}
.fam-cta-ghost:active { transform: translateY(0); box-shadow: none; }
.fam-cta-ghost:disabled {
    background: #c7c7cc;
    color: #6c6c70;
    cursor: not-allowed; transform: none; box-shadow: none;
}

/* Perks */
.fam-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .42rem;
    border-top: 1px solid var(--fam-line);
    padding-top: .9rem;
}
.fam-perks li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--fam-ink-2);
}
.fam-perks i {
    color: var(--fam-accent);
    font-size: .82rem;
    width: 1rem;
    text-align: center;
}

/* =========================================================
   Specs section
   ========================================================= */
.fam-specs {
    padding: 3.5rem 0;
    background: var(--fam-surface);
    border-top: 1px solid var(--fam-line);
    border-bottom: 1px solid var(--fam-line);
}
.fam-specs-head { text-align: center; margin-bottom: 2.2rem; }
.fam-specs-head h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 .35rem;
    color: var(--fam-ink);
}
.fam-specs-head p { color: var(--fam-ink-3); margin: 0; font-size: .95rem; }

.fam-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.fam-spec {
    padding: 1.5rem;
    background: var(--fam-bg);
    border: 1px solid var(--fam-line);
    border-radius: var(--fam-radius);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    transition: transform .25s, box-shadow .25s;
}
.fam-spec:hover { transform: translateY(-2px); box-shadow: var(--fam-shadow); }
.fam-spec-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--fam-accent) 10%, white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fam-accent);
    font-size: 1.05rem;
}
.fam-spec h3 {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fam-ink-3);
}
.fam-spec p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--fam-ink);
    line-height: 1.3;
}

/* =========================================================
   Story + Related
   ========================================================= */
.fam-story { padding: 3.5rem 0; }
.fam-story-inner { max-width: 760px; }
.fam-story h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.022em;
    margin: 0 0 1rem;
    color: var(--fam-ink);
}
.fam-story-body {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--fam-ink-2);
}

.fam-related {
    padding: 3rem 0 4rem;
    background: var(--fam-surface);
    border-top: 1px solid var(--fam-line);
}
.fam-related-head { text-align: center; margin-bottom: 2rem; }
.fam-related-head h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.022em;
    margin: 0;
    color: var(--fam-ink);
}
.fam-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}
.fam-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--fam-bg);
    border: 1px solid var(--fam-line);
    border-radius: var(--fam-radius);
    padding: 1rem;
    transition: transform .22s, box-shadow .22s;
}
.fam-related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fam-shadow);
    border-color: color-mix(in srgb, var(--fam-accent) 40%, var(--fam-line));
}
.fam-related-img {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
}
.fam-related-img img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.1));
}
.fam-related-info {
    text-align: center;
    padding-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
.fam-related-brand {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fam-ink-3);
}
.fam-related-card h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--fam-ink);
}
.fam-related-price {
    font-size: .88rem;
    color: var(--fam-ink-2);
    font-weight: 600;
}

/* =========================================================
   Sticky bottom bar
   ========================================================= */
.fam-stickybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(255,255,255,.94);
    border-top: 1px solid var(--fam-line);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transform: translateY(110%);
    transition: transform .28s ease;
}
.fam-stickybar.is-visible { transform: translateY(0); }
.fam-stickybar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.fam-stickybar-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}
.fam-stickybar-config {
    font-size: .76rem;
    color: var(--fam-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.fam-stickybar-price {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--fam-ink);
}
.fam-stickybar-cta {
    padding: .68rem 1.15rem;
    background: var(--fam-accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .18s, transform .12s;
}
.fam-stickybar-cta:hover { background: var(--fam-accent-h); transform: translateY(-1px); }
.fam-stickybar-cta:disabled { background: #c7c7cc; color: #6c6c70; cursor: not-allowed; transform: none; }

/* =========================================================
   Oferta personalizada (CRM)
   ========================================================= */
.fam-offer-card {
    position: relative;
    padding: 1.1rem 1.2rem;
    border-radius: var(--fam-radius);
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    overflow: hidden;
    isolation: isolate;
}
.fam-offer-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at 0% 0%, rgba(249,115,22,.3), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.fam-offer-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .32rem; }
.fam-offer-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .22rem .52rem;
    background: #ea580c;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
}
.fam-offer-title {
    margin: .12rem 0 0;
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #7c2d12;
}
.fam-offer-msg { margin: 0; color: #9a3412; font-size: .84rem; }
.fam-offer-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.fam-offer-value {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #c2410c;
}
.fam-offer-code { font-size: .82rem; color: #7c2d12; }
.fam-offer-code code {
    background: rgba(255,255,255,.7);
    padding: .14rem .42rem;
    border-radius: 6px;
    font-weight: 700;
    color: #c2410c;
}

/* =========================================================
   Rating chip
   ========================================================= */
.fam-rating-chip {
    align-self: flex-start;
    margin-top: .35rem;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .32rem .68rem;
    background: var(--fam-surface);
    border: 1.5px solid var(--fam-line);
    border-radius: 999px;
    color: var(--fam-ink);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    transition: border-color .18s, transform .14s;
}
.fam-rating-chip:hover { border-color: #f59e0b; color: var(--fam-ink); text-decoration: none; transform: translateY(-1px); }
.fam-rating-chip i { color: #f59e0b; font-size: .82rem; }
.fam-rating-chip strong { font-weight: 700; }
.fam-rating-chip span { color: var(--fam-ink-3); font-size: .78rem; }

/* =========================================================
   Reseñas
   ========================================================= */
.fam-reviews {
    padding: 3rem 0;
    background: var(--fam-surface);
    border-top: 1px solid var(--fam-line);
    border-bottom: 1px solid var(--fam-line);
}
.fam-reviews-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.8rem;
}
.fam-reviews-head h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -.022em;
    margin: 0 0 .22rem;
    color: var(--fam-ink);
}
.fam-reviews-head p { margin: 0; color: var(--fam-ink-3); font-size: .9rem; }
.fam-reviews-summary {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.1rem;
    background: var(--fam-bg);
    border-radius: 14px;
    border: 1px solid var(--fam-line);
}
.fam-reviews-avg {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--fam-ink);
    line-height: 1;
}
.fam-reviews-stars { color: #f59e0b; display: inline-flex; gap: .1rem; }
.fam-reviews-stars .is-empty { color: #d1d1d6; }
.fam-reviews-count { color: var(--fam-ink-3); font-size: .84rem; font-weight: 500; }

.fam-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.fam-review-card {
    background: var(--fam-bg);
    border: 1px solid var(--fam-line);
    border-radius: var(--fam-radius);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .52rem;
    transition: transform .22s, box-shadow .22s;
}
.fam-review-card:hover { transform: translateY(-2px); box-shadow: var(--fam-shadow); }
.fam-review-head { display: flex; align-items: center; gap: .65rem; }
.fam-review-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fam-accent), #8b5cf6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}
.fam-review-head strong { display: block; font-size: .9rem; color: var(--fam-ink); }
.fam-review-stars { color: #f59e0b; font-size: .76rem; display: inline-flex; gap: .14rem; align-items: center; }
.fam-review-stars .is-empty { color: #d1d1d6; }
.fam-review-stars time { margin-left: .4rem; color: var(--fam-ink-3); font-size: .74rem; }
.fam-review-title { margin: .2rem 0 0; font-size: .96rem; font-weight: 700; color: var(--fam-ink); }
.fam-review-body { margin: 0; color: var(--fam-ink-2); font-size: .88rem; line-height: 1.55; }
.fam-reviews-empty {
    text-align: center;
    color: var(--fam-ink-3);
    padding: 1.5rem;
    border: 1.5px dashed var(--fam-line);
    border-radius: var(--fam-radius);
    font-size: .9rem;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
    .fam-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .fam-visual { position: static; }
    .fam-stage { border-radius: 26px; }
}
@media (max-width: 640px) {
    .fam-container { padding: 0 1rem; }
    .fam-hero { padding: .2rem 0 2rem; }
    .fam-hero-header { padding: .9rem 0 1.4rem; }
    .fam-hero-tagline { font-size: .93rem; }
    .fam-stage { border-radius: 22px; }
    .fam-summary { padding: 1.1rem; }
    .fam-storages { grid-template-columns: 1fr 1fr; }
    .fam-color-sw { width: 38px; height: 38px; }
    .fam-specs { padding: 2.2rem 0; }
    .fam-related { padding: 2.2rem 0 3rem; }
    .fam-main { padding-top: 60px; padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fam-stage img, .fam-cta-primary, .fam-cta-ghost,
    .fam-related-card, .fam-stickybar { transition: none !important; }
}

/* =========================================================
   v3.2 — White Premium Enhancements
   ========================================================= */

/* ── Hero header: gradiente sutil de profundidad ─────────── */
.fam-hero-header {
    background: linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);
    border-radius: 28px 28px 0 0;
}

/* ── Hero eyebrow: más presencia ─────────────────────────── */
.fam-hero-eyebrow {
    font-size:      .82rem;
    letter-spacing: .26em;
}

/* ── Stage: sombra dramática sobre fondo claro ───────────── */
.fam-stage {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 0 rgba(255,255,255,.6),
        0 40px 80px -12px rgba(0,0,0,.18),
        0 0 0 1px rgba(0,0,0,.05);
}

/* ── Storage: flex, máximo 4 columnas ────────────────────── */
.fam-storages {
    display:   flex;
    flex-wrap: wrap;
    gap:       .55rem;
}
.fam-storage {
    flex:      1 1 calc(25% - .55rem);
    max-width: calc(25% - .55rem);
    min-width: 88px;
}
@media (max-width: 640px) {
    .fam-storage {
        flex:      1 1 calc(50% - .3rem);
        max-width: calc(50% - .3rem);
    }
}

/* ── Storage price: más legible ──────────────────────────── */
.fam-storage-price {
    font-size:   .84rem;
    font-weight: 700;
    color:       var(--fam-ink-2);
}
.fam-storage.is-active .fam-storage-price { color: rgba(255,255,255,.88); }

/* ── Qty stepper: borde con cuerpo ──────────────────────── */
.fam-qty-stepper { border-color: rgba(15,23,42,.20); }
.fam-qty-btn     { width: 42px; height: 42px; }
.fam-qty-input   { width: 58px; }

/* ── Perks inline: fila horizontal antes de los CTAs ─────── */
.fam-perks-inline {
    list-style: none;
    padding:    .52rem .72rem;
    margin:     0;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    gap:        .4rem;
    flex-wrap:  wrap;
    background: #f5f5f7;
    border-radius: 10px;
}
.fam-perks-inline li {
    display:     flex;
    align-items: center;
    gap:         .28rem;
    font-size:   .74rem;
    font-weight: 500;
    color:       var(--fam-ink-3);
    white-space: nowrap;
}
.fam-perks-inline i {
    color:      var(--fam-accent);
    font-size:  .7rem;
    flex-shrink: 0;
}

/* ── CTAs: columna — primario arriba full, ghost debajo ──── */
.fam-cta-row {
    flex-direction: column;
    gap:            .42rem;
}
.fam-cta-primary,
.fam-cta-ghost   { width: 100%; justify-content: center; }
.fam-cta-ghost   { padding: .78rem 1.2rem; font-size: .88rem; }

/* ── Spec cards: flash al cambiar variante ───────────────── */
.fam-spec { transition: transform .25s, box-shadow .25s, background .35s ease; }
.fam-spec.is-updating {
    background: color-mix(in srgb, var(--fam-accent) 7%, var(--fam-bg));
}

/* ── Precio y stats: Urbanist con cifras tabulares ───────── */
.fam-price-amount,
.fam-reviews-avg,
.fam-stickybar-price {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================
   Skeleton / shimmer loaders  (FASE 1-4)
   ========================================================= */

@keyframes fam-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Stage: overlay while replacement image is still downloading */
.fam-stage.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent          25%,
        rgba(255,255,255,.52) 50%,
        transparent          75%
    );
    background-size: 200% 100%;
    animation: fam-shimmer 1.4s ease infinite;
    pointer-events: none;
    z-index: 2;
}

/* Spec cards: shimmer sweep on variant change (replaces plain bg flash) */
.fam-spec { position: relative; overflow: hidden; }
.fam-spec.is-updating::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent          20%,
        rgba(255,255,255,.45) 50%,
        transparent          80%
    );
    background-size: 200% 100%;
    animation: fam-shimmer .55s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fam-stage.is-loading::after,
    .fam-spec.is-updating::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   ZOOM DE IMAGEN — FASE 4-1
───────────────────────────────────────────────────────────── */
.fam-stage { overflow: hidden; }

.fam-stage.fam-zoom-active { cursor: crosshair; }

.fam-stage.fam-zoom-active #famImg {
    transition: transform .08s ease, transform-origin 0s;
}

/* ─────────────────────────────────────────────────────────────
   BOTÓN COMPARAR
───────────────────────────────────────────────────────────── */
.fam-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--fam-ink, #1d1d1f);
    border-radius: 30px;
    background: transparent;
    color: var(--fam-ink, #1d1d1f);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.fam-compare-btn:hover {
    background: var(--fam-ink, #1d1d1f);
    color: #fff;
}
@media (prefers-color-scheme: dark) {
    .fam-compare-btn { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); }
    .fam-compare-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
}

/* ─────────────────────────────────────────────────────────────
   MODAL COMPARADOR
───────────────────────────────────────────────────────────── */
.fam-comp-dialog {
    width: min(780px, 96vw);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    overflow: hidden;
}
.fam-comp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.5rem;
    border-bottom: 1px solid #e8e8ed;
}
.fam-comp-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1d1d1f; }
.fam-comp-sub   { margin: .2rem 0 0; font-size: .78rem; color: #636366; }
.fam-comp-close {
    background: none; border: none; cursor: pointer;
    color: #636366; font-size: 1.1rem; padding: .2rem .4rem; border-radius: 50%;
    flex-shrink: 0;
}
.fam-comp-close:hover { background: #f2f2f4; }
.fam-comp-sels {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f2f2f4;
}
.fam-comp-sel {
    flex: 1;
    background: #f5f5f7;
    border: 1.5px solid #e8e8ed;
    border-radius: 9px;
    padding: .5rem .75rem;
    font-size: .83rem;
    color: #1d1d1f;
    cursor: pointer;
}
.fam-comp-sel:focus { outline: none; border-color: #0071e3; }
.fam-comp-vs {
    font-size: .75rem;
    font-weight: 800;
    color: #636366;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.fam-comp-table-wrap { overflow-x: auto; padding: .5rem 0; max-height: 50vh; overflow-y: auto; }
.comp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.comp-table thead th:first-child { width: 120px; }
.comp-table thead th { padding: .6rem 1rem; text-align: left; background: #f9f9fb; border-bottom: 1px solid #e8e8ed; }
.comp-var-head { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.comp-var-img  { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e8e8ed; }
.comp-var-name { font-size: .74rem; font-weight: 600; color: #1d1d1f; }
.comp-row td  { padding: .55rem 1rem; border-bottom: 1px solid #f2f2f4; color: #3a3a3c; vertical-align: middle; }
.comp-label   { color: #636366; font-weight: 600; white-space: nowrap; }
.comp-diff td { background: rgba(255, 204, 0, .1); }
.comp-diff .comp-label { background: transparent; }
.comp-color-chip { display: inline-flex; align-items: center; gap: .35rem; }
.comp-color-chip span { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.fam-comp-footer { padding: .75rem 1.5rem 1rem; border-top: 1px solid #f2f2f4; }
.fam-comp-hint { font-size: .75rem; color: #636366; margin: 0; }

/* ─────────────────────────────────────────────────────────────
   BOTÓN Y MODAL RESTOCK
───────────────────────────────────────────────────────────── */
.fam-restock-btn {
    display: none;
    width: 100%;
    margin-top: .75rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    background: transparent;
    border: 1.5px solid rgba(99,99,102,.45);
    border-radius: 12px;
    color: #636366;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.fam-restock-btn:hover {
    border-color: #1d1d1f;
    color: #1d1d1f;
    background: rgba(0,0,0,.03);
}
.fam-rs-dialog {
    width: min(420px, 94vw);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
}
.fam-rs-head { display: flex; justify-content: flex-end; margin-bottom: -.5rem; }
.fam-rs-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff3cd; display: flex; align-items: center; justify-content: center; margin: 0 auto .9rem; font-size: 1.4rem; color: #d97706; }
.fam-rs-title { font-size: 1.1rem; font-weight: 700; color: #1d1d1f; margin: 0 0 .45rem; }
.fam-rs-body  { font-size: .83rem; color: #636366; margin: 0 0 1.1rem; }
.fam-rs-input {
    width: 100%; padding: .65rem .9rem; border: 1.5px solid #e8e8ed; border-radius: 10px;
    font-size: .9rem; color: #1d1d1f; text-align: center; outline: none;
    transition: border-color .15s;
}
.fam-rs-input:focus { border-color: #0071e3; }
.fam-rs-msg { min-height: 1.3rem; font-size: .8rem; margin: .5rem 0; }
.fam-rs-msg .rs-ok  { color: #059669; }
.fam-rs-msg .rs-err { color: #dc2626; }
.fam-rs-btn {
    display: block; width: 100%; margin-top: .65rem;
    padding: .7rem 1.25rem; background: #0071e3; border: none; border-radius: 10px;
    color: #fff; font-size: .92rem; font-weight: 700; cursor: pointer;
    transition: background .15s;
}
.fam-rs-btn:hover { background: #005ec4; }
.fam-rs-btn:disabled { opacity: .6; cursor: default; }
.fam-rs-legal { font-size: .72rem; color: #9ca3af; margin: .7rem 0 0; }

/* ─────────────────────────────────────────────────────────────
   HISTORIAL DE PRECIOS — sparkline — FASE 5
───────────────────────────────────────────────────────────── */
.fam-price-history {
    padding: 3rem 0;
    background: #f9f9fb;
    border-top: 1px solid rgba(0,0,0,.06);
}
.fam-ph-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.fam-ph-head h2 { font-size: 1.1rem; font-weight: 700; color: #1d1d1f; margin: 0; }
.fam-ph-head p  { font-size: .82rem; color: #636366; margin: 0; }
.fam-ph-body {
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}
#famSparkline {
    display: block;
    width: 100%;
    height: 100px;
    border-radius: 8px;
}
.fam-ph-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    font-size: .79rem;
    color: #3a3a3c;
}
.fam-ph-stats strong { font-weight: 700; }

/* ============================================================
   REDESIGN PREMIUM — Hero Dark / Picker White
   Mismo lenguaje visual que checkout-tech.css header
   Zona oscura estratégica: breadcrumb + hero
   Zona blanca: configurador (fam-pick) flotante
   ============================================================ */

/* ── Breadcrumb: continúa la zona oscura del navbar ── */
.fam-theme .fam-breadcrumb {
    background: #0d1526;
    color: rgba(255, 255, 255, 0.60);
    padding: 0.9rem 0 0.6rem;
}
.fam-theme .fam-breadcrumb a         { color: rgba(255, 255, 255, 0.54); }
.fam-theme .fam-breadcrumb a:hover   { color: #60a5fa; }
.fam-theme .fam-breadcrumb strong    { color: rgba(255, 255, 255, 0.88); }
.fam-theme .fam-breadcrumb span[aria-hidden] { opacity: 0.22; }
.fam-theme .fam-btn-back {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
}
.fam-theme .fam-btn-back:hover {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.45);
    color: #60a5fa;
}

/* ── Hero: dark premium gradient — idéntico al checkout header ── */
.fam-theme .fam-hero {
    background: linear-gradient(135deg, #0d1526 0%, #0a3d8f 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 4.5rem;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.28);
}

/* Ambient radial glows */
.fam-theme .fam-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 14% 12%, rgba(59, 130, 246, 0.15) 0%, transparent 48%),
        radial-gradient(ellipse at 86% 78%, rgba(59, 130, 246, 0.10) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Hero sin grid texture */
.fam-theme .fam-hero::after {
    content: none;
}

/* Hero header: textos en blanco */
.fam-theme .fam-hero-header   { position: relative; z-index: 1; }
.fam-theme .fam-hero-eyebrow  { color: #60a5fa; }
.fam-theme .fam-hero-title    { color: #ffffff; }
.fam-theme .fam-hero-tagline  { color: rgba(255, 255, 255, 0.64); }
.fam-theme .fam-hero-rating   { color: rgba(255, 255, 255, 0.70); }
.fam-theme .fam-hero-rating strong { color: #ffffff; }
.fam-theme .fam-hero-rating i      { color: #fbbf24; }

/* Grid y columnas: por encima de pseudo-elementos */
.fam-theme .fam-hero-grid { position: relative; z-index: 1; }
.fam-theme .fam-visual    { position: relative; z-index: 1; }

/* Stage: mantiene gradiente adaptativo al color del producto */
/* La sombra más fuerte lo hace "flotar" sobre el fondo oscuro */
.fam-theme .fam-stage {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 2px 0 rgba(255, 255, 255, 0.65),
        0 32px 88px -18px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(0, 0, 0, 0.07);
}

/* Thumbnails: dark glass */
.fam-theme .fam-thumb {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}
.fam-theme .fam-thumb:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.fam-theme .fam-thumb.is-active {
    border-color: var(--fam-accent);
    background: rgba(0, 113, 227, 0.10);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
}

/* ── Picker: white card flotante sobre el hero oscuro ── */
.fam-theme .fam-pick {
    background: #ffffff;
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 56px rgba(0, 0, 0, 0.24),
        0 1px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* Mobile: compact picker, reducir padding */
@media (max-width: 768px) {
    .fam-theme .fam-hero        { padding-bottom: 2.5rem; }
    .fam-theme .fam-pick        { border-radius: 20px; padding: 1.5rem 1.25rem; }
}

/* ── Precio: gradiente de marca (alto impacto visual) ── */
.fam-theme .fam-price-amount {
    background: linear-gradient(135deg, #0071e3 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── fam-summary: tinte azul sutil (resuelve "blanco sobre blanco") ── */
.fam-theme .fam-summary {
    background: rgba(0, 113, 227, 0.035);
    border-color: rgba(0, 113, 227, 0.14);
    border-top-color: var(--fam-accent);
}

/* ── Specs: sección oscura (ritmo visual oscuro→claro→oscuro) ── */
.fam-theme .fam-specs {
    background: linear-gradient(135deg, #0d1526 0%, #0a3d8f 100%);
    border: none;
    position: relative;
    overflow: hidden;
}

.fam-theme .fam-specs::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Specs sin grid texture */
.fam-theme .fam-specs::after {
    content: none;
}

.fam-theme .fam-specs .fam-container { position: relative; z-index: 1; }

.fam-theme .fam-specs-head h2 { color: #ffffff; }
.fam-theme .fam-specs-head p  { color: rgba(255, 255, 255, 0.58); }

.fam-theme .fam-compare-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.80);
}

/* Spec cards: dark glass */
.fam-theme .fam-spec {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
}

.fam-theme .fam-spec:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.fam-theme .fam-spec-ic {
    background: rgba(0, 113, 227, 0.20);
    border: 1px solid rgba(0, 113, 227, 0.28);
    color: #60a5fa;
}

.fam-theme .fam-spec h3 { color: rgba(255, 255, 255, 0.50); }
.fam-theme .fam-spec p  { color: #ffffff; }

/* ── Story section: acento de marca en heading ── */
.fam-theme .fam-story h2 {
    background: linear-gradient(135deg, #0d1526 0%, #0071e3 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Related: franja azul superior + hover con glow de marca ── */
.fam-theme .fam-related {
    border-top: 3px solid var(--fam-accent);
}

.fam-theme .fam-related-head h2 {
    background: linear-gradient(135deg, #0d1526 0%, #0071e3 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fam-theme .fam-related-card:hover {
    border-color: rgba(0, 113, 227, 0.40);
    box-shadow: 0 8px 32px rgba(0, 113, 227, 0.10);
}

/* ── Reviews: acento de marca en heading y avatar ── */
.fam-theme .fam-reviews-head h2 {
    background: linear-gradient(135deg, #0d1526 0%, #0071e3 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Avatar ya tiene gradiente, ajustamos para usar nuestros colores exactos */
.fam-theme .fam-review-avatar {
    background: linear-gradient(135deg, #0071e3 0%, #1a2744 100%);
}

/* Review cards: hover con micro-acento de marca */
.fam-theme .fam-review-card:hover {
    border-color: rgba(0, 113, 227, 0.20);
    box-shadow: 0 4px 20px rgba(0, 113, 227, 0.08);
}

/* ============================================================
   v5 — DESIGN EXCELLENCE: armonía, contraste, iluminación
   Principios: 60-30-10 · WCAG AA · elevación por capas
   ============================================================ */

/* 1. Body bg: blanco frío con tinte azul ultra-sutil (más premium que gris neutro) */
body.fam-theme {
    background: linear-gradient(160deg, #f5f7fb 0%, #edf1fa 100%);
}

/* 2. Hero: navy profundo — oscuro uniforme con toque de azul rico (no eléctrico) */
.fam-theme .fam-hero {
    background: linear-gradient(145deg, #05080f 0%, #091535 50%, #0d2660 100%);
    box-shadow: 0 32px 80px -16px rgba(5, 8, 15, 0.65);
}

/* 2b. Spotlight sutil: resplandor interior muy suave, sin brillar */
.fam-theme .fam-hero::before {
    background:
        radial-gradient(ellipse 70% 55% at 30% 60%, rgba(15, 55, 140, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse at 82% 18%, rgba(20, 60, 130, 0.18) 0%, transparent 50%);
}

/* 3. Breadcrumb: continúa el gradiente del hero (sin corte brusco) */
.fam-theme .fam-breadcrumb {
    background: #06091a;
}
.fam-theme .fam-breadcrumb a:hover { color: #7cb9ff; }
.fam-theme .fam-btn-back:hover {
    background: rgba(30, 100, 255, 0.16);
    border-color: rgba(30, 100, 255, 0.50);
    color: #7cb9ff;
}

/* 4. Picker card: sombra con tinte azul que refleja el ambiente del hero */
.fam-theme .fam-pick {
    box-shadow:
        0 0  0 1px rgba(255, 255, 255, 0.90),
        0 4px 16px rgba(6, 9, 26, 0.18),
        0 20px 56px rgba(6, 20, 90, 0.22),
        0 40px 80px rgba(0, 30, 100, 0.12);
}

/* 5. Eyebrow: azul más luminoso (lectura perfecta sobre dark) */
.fam-theme .fam-hero-eyebrow { color: #7cb9ff; letter-spacing: .18em; }

/* 6. Tagline hero: mayor contraste (0.64 → 0.80) */
.fam-theme .fam-hero-tagline { color: rgba(255, 255, 255, 0.80); }

/* 7. CTA primario: azul eléctrico — blue system puro */
.fam-theme .fam-cta-primary {
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
    box-shadow: 0 6px 24px rgba(0, 96, 220, 0.42);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.fam-theme .fam-cta-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
    transition: left .55s ease;
    pointer-events: none;
}
.fam-theme .fam-cta-primary:hover {
    background: linear-gradient(135deg, #0060e0 0%, #1fa0ff 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0, 96, 220, 0.60);
}
.fam-theme .fam-cta-primary:hover::before { left: 100%; }
.fam-theme .fam-cta-primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,96,220,.35); }

/* 8. CTA secundario (Comprar ahora): dark con borde azul → relleno al hover */
.fam-theme .fam-cta-ghost {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid rgba(0, 136, 255, 0.60);
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
    box-shadow: inset 0 0 0 0 rgba(0, 96, 220, 0);
    transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.fam-theme .fam-cta-ghost:hover {
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%);
    border-color: transparent;
    box-shadow: 0 12px 36px rgba(0, 96, 220, 0.50);
    transform: translateY(-3px);
}

/* 9. Precio: gradiente más vivo (ambos extremos azul → azul eléctrico) */
.fam-theme .fam-price-amount {
    background: linear-gradient(135deg, #004ec2 0%, #1a9cf5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 10. Specs: mismo navy profundo que el hero */
.fam-theme .fam-specs {
    background: linear-gradient(145deg, #05080f 0%, #091535 50%, #0d2660 100%);
}
.fam-theme .fam-specs::before {
    background:
        radial-gradient(ellipse at 8% 50%, rgba(15, 55, 140, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 50%, rgba(15, 55, 140, 0.16) 0%, transparent 50%);
}

/* 11. Spec cards: glass más refinado + inner glow */
.fam-theme .fam-spec {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.18);
    transition: background .2s, box-shadow .2s, transform .15s;
}
.fam-theme .fam-spec:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(30, 100, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 6px 24px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(30, 100, 255, 0.20);
    transform: translateY(-2px);
}

/* 12. Ícono de spec: glow azul */
.fam-theme .fam-spec-ic {
    background: rgba(0, 96, 220, 0.22);
    border-color: rgba(0, 96, 220, 0.36);
    color: #7cb9ff;
    box-shadow: 0 0 12px rgba(0, 96, 220, 0.20);
}

/* 13. Headings de sección: gradiente vivo (ambos azul → azul eléctrico) */
.fam-theme .fam-story h2,
.fam-theme .fam-related-head h2,
.fam-theme .fam-reviews-head h2 {
    background: linear-gradient(135deg, #004ec2 0%, #1a9cf5 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* 14. Related section: franja + hover más vivos */
.fam-theme .fam-related {
    border-top-color: #0060e0;
}
.fam-theme .fam-related-card:hover {
    border-color: rgba(0, 96, 220, 0.50);
    box-shadow: 0 8px 36px rgba(0, 96, 220, 0.14), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-3px);
}

/* 15. Review avatar: gradiente más rico */
.fam-theme .fam-review-avatar {
    background: linear-gradient(135deg, #0055cc 0%, #1a9cf5 100%);
}

/* 16. Review card hover: micro-elevación con tinte */
.fam-theme .fam-review-card:hover {
    border-color: rgba(0, 96, 220, 0.25);
    box-shadow: 0 4px 24px rgba(0, 96, 220, 0.10), 0 1px 4px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

/* 17. Thumbnails: brillo activo más definido */
.fam-theme .fam-thumb.is-active {
    border-color: #1480e8;
    background: rgba(0, 96, 220, 0.14);
    box-shadow: 0 0 0 3px rgba(0, 96, 220, 0.28), 0 0 12px rgba(0, 96, 220, 0.20);
}

/* 18. fam-summary: tinte azul más visible (resuelve definitivamente blanco-sobre-blanco) */
.fam-theme .fam-summary {
    background: rgba(0, 78, 194, 0.045);
    border-color: rgba(0, 78, 194, 0.16);
    border-top-color: #0060e0;
}

/* 19. Transitions en related cards */
.fam-theme .fam-related-card {
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fam-theme .fam-review-card {
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

/* 20. Tab de modelo — activo: blue system */
.fam-theme .fam-tab.is-active {
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 96, 220, 0.45);
    font-weight: 700;
}
.fam-theme .fam-tab:hover:not(.is-active):not(:disabled) {
    background: rgba(0, 96, 220, 0.12);
    color: #4da6ff;
}

/* 21. Botón de almacenamiento — activo: blue system */
.fam-theme .fam-storage.is-active {
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%);
    border-color: #0a8df5;
    box-shadow: 0 4px 18px rgba(0, 96, 220, 0.45);
    transform: translateY(-2px);
}
.fam-theme .fam-storage.is-active .fam-storage-val {
    color: #ffffff;
}
.fam-theme .fam-storage.is-active .fam-storage-price {
    color: rgba(255, 255, 255, 0.80);
}
.fam-theme .fam-storage:hover:not(.is-active):not(:disabled) {
    border-color: rgba(0, 136, 255, 0.50);
    background: rgba(0, 96, 220, 0.04);
}

/* ============================================================
   v5.1 — POLISH FINAL: perks, stepper, specs, picker, story,
           swatches, related cards
   ============================================================ */

/* 3. Perks inline: fondo con tinte azul + íconos más vivos */
.fam-theme .fam-perks-inline {
    background: rgba(0, 85, 204, 0.055);
    border: 1px solid rgba(0, 85, 204, 0.12);
}
.fam-theme .fam-perks-inline i {
    color: #0a8df5;
    font-size: .78rem;
}
.fam-theme .fam-perks-inline li {
    color: #374151;
    font-weight: 600;
}

/* 4. Stepper de cantidad: azul en borde activo + botones con acento */
.fam-theme .fam-qty-stepper {
    border-color: rgba(0, 85, 204, 0.22);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 85, 204, 0.08);
}
.fam-theme .fam-qty-stepper:focus-within {
    border-color: #0a8df5;
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.14);
}
.fam-theme .fam-qty-btn {
    color: #0055cc;
    font-size: .9rem;
}
.fam-theme .fam-qty-btn:hover:not(:disabled) {
    background: rgba(0, 85, 204, 0.09);
    color: #0a8df5;
}
.fam-theme .fam-qty-input {
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    color: #0f172a;
    border-left-color: rgba(0, 85, 204, 0.14);
    border-right-color: rgba(0, 85, 204, 0.14);
}

/* 5. Specs heading: blanco brillante con subrayado azul */
.fam-theme .fam-specs-head h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    position: relative;
    display: inline-block;
    padding-bottom: .5rem;
}
.fam-theme .fam-specs-head h2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 48px; height: 3px;
    background: linear-gradient(90deg, #0055cc, #0a8df5);
    border-radius: 999px;
}
.fam-theme .fam-specs-head p {
    color: rgba(255, 255, 255, 0.62);
    margin-top: .5rem;
}

/* 6. Picker card: separadores entre secciones */
.fam-theme .fam-selector {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: .85rem;
}
.fam-theme .fam-selector-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: .55rem;
}
.fam-theme .fam-summary {
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    padding-top: .85rem;
}

/* 7. Story section: línea azul lateral izquierda */
.fam-theme .fam-story {
    border-left: 4px solid #0055cc;
    padding-left: 1.5rem;
    margin-left: 0;
    position: relative;
}
.fam-theme .fam-story::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0055cc 0%, #0a8df5 100%);
    border-radius: 999px;
}
.fam-theme .fam-story {
    border-left: none;
}

/* 8. Color swatches: hover más definido */
.fam-theme .fam-color-sw {
    transition: transform .2s ease, box-shadow .2s ease;
}
.fam-theme .fam-color-sw:hover:not(.is-active):not(:disabled) {
    transform: scale(1.18);
    box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.30);
}
.fam-theme .fam-color-sw.is-active {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px #0a8df5,
        0 4px 12px rgba(0, 136, 255, 0.30);
}

/* 9. Related cards: scale al hover */
.fam-theme .fam-related-card {
    transition: border-color .2s, box-shadow .2s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.fam-theme .fam-related-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(0, 96, 220, 0.50);
    box-shadow: 0 12px 40px rgba(0, 96, 220, 0.16), 0 2px 8px rgba(0,0,0,0.06);
}

/* ============================================================
   v5.2 — VISOR 3D GLB (familia page)
   ============================================================ */

/* Ocultar stage sin animación brusca */
.fam-stage--hidden {
    display: none !important;
}

/* Stage 3D: mismo aspecto que fam-stage */
.fam-stage--3d {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--fam-radius);
    overflow: hidden;
    background: linear-gradient(145deg, #05080f 0%, #091535 50%, #0d2660 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 2px 0 rgba(255,255,255,0.65),
        0 32px 88px -18px rgba(0,0,0,0.50),
        0 0 0 1px rgba(0,0,0,0.07);
}

/* model-viewer ocupa todo el stage */
.fam-stage--3d model-viewer {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
}

/* Hint de interacción */
.fam-stage--3d::after {
    content: 'Arrastra · Pellizca para zoom';
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.50);
    color: rgba(255,255,255,0.78);
    font-size: .65rem;
    font-family: 'Urbanist', sans-serif;
    letter-spacing: .05em;
    padding: .28rem .75rem;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    white-space: nowrap;
    z-index: 2;
}
.fam-stage--3d:hover::after { opacity: 1; }

/* Badge "3D" flotante */
.fam-badge-3d {
    position: absolute;
    top: 12px; left: 12px;
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .28rem .65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    box-shadow: 0 4px 14px rgba(0,85,204,.45);
    pointer-events: none;
    z-index: 3;
}

/* Poster mientras carga el GLB */
.fam-model-poster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    gap: .8rem;
}
.fam-model-poster img {
    width: 55%;
    max-width: 260px;
    object-fit: contain;
    opacity: .55;
    filter: blur(1px);
}
.fam-model-poster span {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    font-family: 'Urbanist', sans-serif;
    letter-spacing: .04em;
}

/* Thumbnail especial 3D */
.fam-thumb--3d {
    background: linear-gradient(135deg, #0055cc 0%, #0a8df5 100%) !important;
    border-color: #0a8df5 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fam-thumb-3d-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: #ffffff;
}
.fam-thumb-3d-icon i   { font-size: 1.2rem; }
.fam-thumb-3d-icon small {
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fam-thumb--3d.is-active {
    box-shadow: 0 0 0 3px #0a8df5, 0 4px 12px rgba(0,85,204,.40) !important;
}