/* ─────────────────────────────────────────────────────────────────────────────
   Lookbook — reportajes tipo revista. Solo se carga en /lookbook.
   Todas las clases llevan prefijo lb- para no chocar con app.css (p. ej. .dot).
   Paleta y tipografía = las de la web (--primary-color, --accent-color, serif/sans).
   ───────────────────────────────────────────────────────────────────────────── */
.lb {
    --lb-ink: var(--primary-color, #001A3D);
    --lb-gold: var(--accent-color, #C5A059);
    --lb-gold-ink: #86662C;
    --lb-muted: #626A7B;
    --lb-line: #E4E5EA;
    --lb-alt: #F6F5F2;
    --lb-veil: rgba(0, 26, 61, .82);
    color: var(--lb-ink);
}
.lb img { display: block; max-width: 100%; }
.lb-wrap { padding-top: 2rem; padding-bottom: 5rem; display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); }
/* Entre la entradilla y la primera página, poco aire; entre páginas distintas, más. */
.lb-page + .lb-page { margin-top: clamp(1.5rem, 4vw, 3.75rem); }

/* Textos comunes */
.lb-k { font: 600 .7rem/1.35 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--lb-gold-ink); margin: 0; }
.lb-crumbs { font-size: .8rem; color: var(--lb-muted); }
.lb-crumbs a { color: inherit; }
.lb-preview { padding: .8rem 1rem; background: #FFF6E0; border: 1px solid #E8D29C; color: #6B5320; font-size: .85rem; }
.lb-head { display: grid; gap: 1rem; max-width: 820px; }
.lb-head h1 { font: italic 400 clamp(2.6rem, 6vw, 4.6rem)/1 var(--font-serif); margin: 0; text-wrap: balance; }
.lb-intro { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; color: var(--lb-muted); max-width: 62ch; margin: 0; }
.lb-title { font: italic 400 clamp(1.9rem, 3.6vw, 3rem)/1.05 var(--font-serif); margin: 0; text-wrap: balance; }
.lb-body { color: var(--lb-muted); line-height: 1.65; max-width: 52ch; margin: 0; }
.lb-name { font: 500 .86rem/1.38 var(--font-sans); color: var(--lb-ink); }
.lb-brand { font: 600 .62rem/1.2 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lb-gold-ink); }
.lb-price { font: 600 .9rem/1.2 var(--font-sans); white-space: nowrap; color: var(--lb-ink); }
.lb-price s { font-weight: 400; color: var(--lb-muted); margin-right: .35em; }
.lb-price strong { color: #A1242F; font-weight: 600; }
.lb-soldout { display: inline-block; font: 600 .62rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lb-muted); border: 1px solid var(--lb-line); padding: .3rem .5rem; }
.lb-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lb a:focus-visible, .lb button:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 3px; }

/* Tarjeta de producto vertical */
.lb-card { position: relative; display: grid; gap: .5rem; align-content: start; color: inherit; text-decoration: none; }
.lb-card__img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--lb-alt); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.lb-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lb-card:hover .lb-card__img img { transform: scale(1.03); }
.lb-card.is-on .lb-card__img { outline-color: var(--lb-gold); }
.lb-card.is-soldout .lb-card__img img { opacity: .55; }
.lb-num { position: absolute; top: 8px; left: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--lb-gold); color: var(--lb-ink); font: 700 .7rem/24px var(--font-sans); text-align: center; }

/* ── Portada ── */
.lb-portada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4.5vw, 4rem); align-items: center; }
.lb-portada__img { margin: 0; aspect-ratio: 2/3; overflow: hidden; background: var(--lb-alt); }
.lb-portada__img img { width: 100%; height: 100%; object-fit: cover; }
.lb-portada__text { display: grid; gap: 1.1rem; }
.lb-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lb-line); }
.lb-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--lb-line); color: inherit; text-decoration: none; }
.lb-row img { width: 64px; height: 80px; object-fit: cover; background: var(--lb-alt); }
.lb-row__txt { display: grid; gap: .25rem; min-width: 0; }
.lb-row:hover .lb-name { text-decoration: underline; text-underline-offset: 3px; }
.lb-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.lb-total span { font: 600 .68rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lb-muted); }
.lb-total strong { font: 500 1.8rem/1 var(--font-serif); }

/* ── Shop the look ── */
.lb-shop__stage { position: relative; overflow: hidden; background: var(--lb-alt); }
.lb-shop__stage > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.lb-shop__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 3vw, 2.2rem); background: linear-gradient(to top, var(--lb-veil), rgba(0, 26, 61, 0)); color: #fff; pointer-events: none; }
.lb-shop__cap .lb-k { color: var(--lb-gold); }
.lb-shop__cap h2 { font: italic 400 clamp(2rem, 4.6vw, 3.6rem)/1 var(--font-serif); color: #fff; margin: .3rem 0 0; }
.lb-shop__body { margin-top: 1.4rem; }
.lb-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--lb-gold); color: var(--lb-ink); font: 700 .8rem/1 var(--font-sans); cursor: pointer; animation: lb-pulse 2.6s infinite; padding: 0; }
.lb-pin.is-on { background: #fff; animation: none; }
.lb-spots { display: none; } /* solo en móvil, ver media query */
@keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, .6); } 70% { box-shadow: 0 0 0 14px rgba(197, 160, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); } }
.lb-tip { position: absolute; z-index: 3; width: 250px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .6rem; background: #fff; color: var(--lb-ink); text-decoration: none; box-shadow: 0 12px 30px -10px rgba(0, 26, 61, .45); }
.lb-tip img { width: 62px; height: 78px; object-fit: cover; background: var(--lb-alt); }
.lb-tip__txt { display: grid; gap: .35rem; min-width: 0; }
.lb-tip__go { font: 600 .62rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lb-gold-ink); }
.lb-shop__rail { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: clamp(1.2rem, 3vw, 2.2rem); }
.lb-group { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.lb-shop__rail--split { grid-template-columns: minmax(0, var(--a, 2fr)) minmax(0, var(--b, 3fr)); }
.lb-cards { display: grid; gap: .9rem; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

/* ── Constelación ── */
.lb-const__head { display: grid; gap: .6rem; justify-items: center; text-align: center; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.lb-const__head .lb-body { max-width: 50ch; }
.lb-const__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
.lb-const__col { position: relative; z-index: 2; display: grid; gap: clamp(1rem, 2.6vw, 2.2rem); }
.lb-const__img { position: relative; z-index: 1; margin: 0; }
.lb-const__img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.lb-dot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--lb-gold); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(0, 26, 61, .28); display: grid; place-items: center; font: 700 .62rem/1 var(--font-sans); color: var(--lb-ink); }
.lb-dot b { display: none; }
.lb-mini { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .75rem; align-items: center; color: inherit; text-decoration: none; }
.lb-mini__img { width: 80px; aspect-ratio: 4/5; object-fit: cover; background: var(--lb-alt); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.lb-mini__txt { display: grid; gap: .25rem; min-width: 0; }
.lb-mini__n { display: none; font: 700 .7rem var(--font-sans); color: var(--lb-gold-ink); }
.lb-const__col--left .lb-mini { grid-template-columns: minmax(0, 1fr) 80px; text-align: right; }
.lb-const__col--left .lb-mini__img { order: 2; }
.lb-mini.is-on .lb-mini__img { outline-color: var(--lb-gold); }
.lb-const__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.lb-const__lines polyline { fill: none; stroke: var(--lb-gold); stroke-width: 1.2; }
.lb-const__lines polyline.is-on { stroke-width: 2.4; }
.lb-const__lines circle { fill: var(--lb-gold); }
.lb-const__more { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }
/* En la constelación "Completa el look" es secundario: tarjetas de tamaño fijo, no a todo el ancho. */
.lb-const__more .lb-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 210px)); }

/* ── Detalle ── */
.lb-det { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.lb-det__hero { grid-column: 1 / 9; grid-row: 1 / 3; position: relative; min-height: 340px; margin: 0; overflow: hidden; background: var(--lb-alt); }
.lb-det__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-det__tag { position: absolute; left: 14px; bottom: 14px; display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; background: #fff; border-radius: 999px; font: 600 .72rem/1.2 var(--font-sans); color: var(--lb-ink); text-decoration: none; box-shadow: 0 8px 20px -10px rgba(0, 26, 61, .5); }
.lb-det__tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--lb-gold); flex: none; }
.lb-det__quote { grid-column: 9 / 13; display: grid; gap: .9rem; align-content: end; margin: 0; padding: clamp(1.1rem, 2.6vw, 1.9rem); background: var(--lb-ink); color: #fff; }
.lb-det__quote h2 { font: italic 400 clamp(1.6rem, 2.8vw, 2.4rem)/1.12 var(--font-serif); color: #fff; margin: 0; }
.lb-det__quote p { color: rgba(255, 255, 255, .8); font-size: .9rem; line-height: 1.6; margin: 0; }
.lb-det__quote .lb-k { color: var(--lb-gold); }
.lb-det__feat { grid-column: 9 / 13; display: grid; gap: .6rem; color: inherit; text-decoration: none; }
.lb-det__feat .lb-card__img { aspect-ratio: 1/1; }
.lb-det__feat-row { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.lb-det__sub { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; border-top: 1px solid var(--lb-line); padding-top: 1rem; }
.lb-det__sub h3 { font: italic 500 1.35rem/1.15 var(--font-serif); margin: 0; }
.lb-det__row { grid-column: 1 / 13; }
.lb-det__row .lb-card__img { aspect-ratio: 1/1; }
.lb-sw { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: clamp(.5rem, 1.6vw, 1.1rem); }
.lb-sw__item { display: grid; gap: .4rem; justify-items: center; text-align: center; color: inherit; text-decoration: none; }
.lb-sw__item img { width: 100%; max-width: 120px; aspect-ratio: 1/1; object-fit: cover; background: var(--lb-alt); border-radius: 50%; border: 1px solid var(--lb-line); }
.lb-sw__item.is-cur img { outline: 2px solid var(--lb-gold); outline-offset: 3px; }
.lb-sw__item span { font: 500 .74rem/1.3 var(--font-sans); color: var(--lb-muted); }

/* ── Doble página ── */
.lb-spread { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; box-shadow: 0 1px 2px rgba(0, 26, 61, .05), 0 22px 44px -28px rgba(0, 26, 61, .35); }
.lb-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; transform: translateX(-50%); background: linear-gradient(to right, rgba(0, 26, 61, 0), rgba(0, 26, 61, .14) 50%, rgba(0, 26, 61, 0)); pointer-events: none; }
.lb-spread__left { position: relative; min-height: 480px; overflow: hidden; background: var(--lb-alt); margin: 0; }
.lb-spread__left img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-spread__run { position: absolute; left: 18px; right: 18px; bottom: 16px; font: 600 .64rem/1.3 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.lb-spread__right { padding: clamp(1.3rem, 4.2vw, 3.6rem); display: grid; gap: 1.2rem; align-content: start; }
.lb-spread__right .lb-title { font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .92; }
.lb-dropcap::first-letter { float: left; font: 500 3.4em/.82 var(--font-serif); padding: .08em .1em 0 0; color: var(--lb-gold-ink); }
.lb-spread__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; }
.lb-spread__grid a { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--lb-alt); }
.lb-spread__grid img { width: 100%; height: 100%; object-fit: cover; }
.lb-spread__grid i { position: absolute; top: 6px; left: 10px; font: italic 500 1.2rem/1 var(--font-serif); color: var(--lb-ink); }
.lb-credits { list-style: none; margin: 0; padding: .9rem 0 0; display: grid; gap: .4rem; border-top: 1px solid var(--lb-line); font-size: .8rem; line-height: 1.45; color: var(--lb-muted); }
.lb-credits li a { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: .5rem; color: inherit; text-decoration: none; }
.lb-credits i { font: italic 500 1rem/1.3 var(--font-serif); color: var(--lb-ink); }
.lb-credits a:hover span { color: var(--lb-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Listado /lookbook y "más reportajes" ── */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.lb-tile { display: grid; gap: .8rem; color: inherit; text-decoration: none; }
.lb-tile__img { aspect-ratio: 4/5; overflow: hidden; background: var(--lb-alt); }
.lb-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lb-tile:hover .lb-tile__img img { transform: scale(1.03); }
.lb-tile h2, .lb-tile h3 { font: italic 400 1.7rem/1.1 var(--font-serif); margin: 0; }
.lb-tile p { color: var(--lb-muted); font-size: .92rem; line-height: 1.55; margin: 0; }
.lb-cta { display: flex; justify-content: center; }
.lb-more { display: grid; gap: 1.2rem; border-top: 1px solid var(--lb-line); padding-top: 2rem; }
.lb-more h2 { font: italic 400 2rem/1.1 var(--font-serif); margin: 0; }
.lb-empty { color: var(--lb-muted); }

@media (prefers-reduced-motion: reduce) {
    .lb-pin { animation: none; }
    .lb-card__img img, .lb-tile__img img { transition: none; }
}

/* ── Móvil / tablet ── */
@media (max-width: 860px) {
    .lb-const__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .lb-const__img { grid-column: 1 / -1; order: -1; }
    .lb-const__col { display: contents; }
    .lb-const__col--left .lb-mini { grid-template-columns: 72px minmax(0, 1fr); text-align: left; }
    .lb-const__col--left .lb-mini__img { order: 0; }
    .lb-mini { grid-template-columns: 72px minmax(0, 1fr); }
    .lb-mini__img { width: 72px; }
    .lb-mini__n { display: inline; }
    .lb-dot { width: 22px; height: 22px; }
    .lb-dot b { display: block; }
    .lb-const__lines { display: none; }

    /* Foto limpia por defecto: los números solo cuando el cliente los pide
       (botón o tocar la foto). lookbook.js los enseña un momento al llegar a la foto. */
    .lb-spots { position: absolute; top: 10px; right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--lb-ink); font: 600 .72rem/1 var(--font-sans); box-shadow: 0 6px 16px -8px rgba(0, 26, 61, .55); cursor: pointer; }
    .lb-spots i { width: 9px; height: 9px; border-radius: 50%; background: var(--lb-gold); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 26, 61, .28); }
    .lb-spots [data-on], .lb-spots[aria-pressed="true"] [data-off] { display: none; }
    .lb-spots[aria-pressed="true"] [data-on] { display: inline; }
    .lb-spotted .lb-dot, .lb-spotted .lb-pin { transition: opacity .35s, visibility 0s; }
    .lb-spotted:not(.is-spots) .lb-dot, .lb-spotted:not(.is-spots) .lb-pin { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
}
@media (max-width: 768px) {
    .lb-wrap { padding-top: 1.2rem; }
    .lb-shop__rail--split { grid-template-columns: 1fr; }
    .lb-portada { grid-template-columns: 1fr; }
    .lb-portada__img { aspect-ratio: 4/5; }
    .lb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Constelación en móvil: productos de la foto en una columna (se lee el nombre entero)
       y "Completa el look" a dos columnas, como el catálogo. */
    .lb-const__body { grid-template-columns: minmax(0, 1fr); }
    .lb-mini { grid-template-columns: 80px minmax(0, 1fr); }
    .lb-const__col--left .lb-mini { grid-template-columns: 80px minmax(0, 1fr); }
    .lb-mini__img { width: 80px; }
    .lb-const__more .lb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-pin { width: 30px; height: 30px; }
    .lb-tip { width: 220px; }
    .lb-det { grid-template-columns: 1fr; }
    .lb-det__hero, .lb-det__quote, .lb-det__feat, .lb-det__sub, .lb-det__row, .lb-sw { grid-column: 1 / -1; grid-row: auto; }
    .lb-det__hero { min-height: 0; aspect-ratio: 4/5; }
    .lb-sw { grid-template-columns: repeat(var(--cols-m, 3), minmax(0, 1fr)); }
    .lb-spread { grid-template-columns: 1fr; }
    .lb-spread::after { display: none; }
    .lb-spread__left { min-height: 0; aspect-ratio: 4/5; }
    .lb-spread__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}