/* 4WOPIX · Líneas de diseño
   Cinco composiciones sobre los mismos componentes de front.css. Cada línea decide:
   1) la portada (data-hero: center | left | split | frame),
   2) la cabecera (data-header: bar | center) y si va transparente sobre la portada (data-over),
   3) las tarjetas (data-cards: below | overlay),
   4) el tratamiento de títulos (body[data-theme=…]).
   Colores y fuentes siempre salen de las variables, así que cualquier combinación se ve coherente. */

/* =====================================================================
   1. CABECERA
   ===================================================================== */
/* Logo centrado: ruta a la izquierda, marca al centro, acciones a la derecha */
body[data-header="center"] .hdr-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 76px; }
body[data-header="center"] .site-brand { grid-column: 2; grid-row: 1; justify-self: center; }
body[data-header="center"] .crumbs { grid-column: 1; grid-row: 1; justify-content: flex-start; }
body[data-header="center"] .hdr-actions { grid-column: 3; grid-row: 1; }

/* Transparente sobre portadas a pantalla completa; se vuelve sólida al bajar */
body[data-over="1"].has-cover { --hdr-h: 0px; }
body[data-over="1"].has-cover .site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-color: transparent; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-over="1"].has-cover .site-header:not(.scrolled) .site-logo { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.35)); }
body[data-over="1"].has-cover .site-header:not(.scrolled) .crumbs,
body[data-over="1"].has-cover .site-header:not(.scrolled) .crumbs .current { color: rgba(255,255,255,.9); }
body[data-over="1"].has-cover .site-header:not(.scrolled) { text-shadow: 0 1px 10px rgba(0,0,0,.25); }
body[data-over="1"].has-cover .site-header.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); border-color: var(--line); color: var(--text); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }

/* =====================================================================
   2. PORTADAS
   ===================================================================== */
/* Velo para leer texto blanco sobre foto (centrada e izquierda) */
body[data-hero="center"] .cover-media::after,
body[data-hero="left"] .cover-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
body[data-hero="center"] .cover-media::after { background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.18) 40%, rgba(0,0,0,.42)); }
body[data-hero="left"] .cover-media::after { background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 45%, rgba(0,0,0,.62)); }

/* Centrada (Clásico, Noche) — como "Center" de Pixieset */
body[data-hero="center"] .cover { min-height: calc(100svh - var(--hdr-h)); display: grid; place-items: center; text-align: center; color: #fff; }
body[data-hero="center"] .cover-text { text-shadow: 0 2px 24px rgba(0,0,0,.3); }

/* Abajo a la izquierda (Moderno) — como "Left" de Pixieset */
body[data-hero="left"] .cover { min-height: calc(100svh - var(--hdr-h)); display: grid; align-items: end; justify-items: start; text-align: left; color: #fff; }
body[data-hero="left"] .cover-text { max-width: min(1100px, 100%); padding-bottom: clamp(48px, 8vw, 96px); padding-left: max(var(--pad), calc((100vw - var(--max)) / 2)); }
body[data-hero="left"] .cover-rule { margin: 20px 0; }
body[data-hero="left"] .cover-sub { margin: 0; }
body[data-hero="left"] .scroll-cue { left: auto; right: var(--pad); margin: 0; }

/* Partida (Editorial) — texto en el color de fondo a un lado, foto al otro, como "Novel"/"Journal" */
body[data-hero="split"] .cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - var(--hdr-h)); color: var(--text); background: var(--bg); }
body[data-hero="split"] .cover-media { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: 420px; }
body[data-hero="split"] .cover-text { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; text-align: left; padding: 48px clamp(24px, 5vw, 80px); max-width: 620px; }
body[data-hero="split"] .cover-rule { margin: 26px 0; width: 48px; }
body[data-hero="split"] .cover-sub { margin: 0; color: var(--muted); opacity: 1; }
body[data-hero="split"] .cover-eyebrow { color: var(--muted); }
body[data-hero="split"] .scroll-cue { display: none; }
body[data-hero="split"] .slide-dots { bottom: 24px; }
@media (max-width: 860px) {
    body[data-hero="split"] .cover { grid-template-columns: 1fr; min-height: 0; }
    body[data-hero="split"] .cover-media { grid-column: 1; grid-row: 1; height: 62svh; min-height: 320px; }
    body[data-hero="split"] .cover-text { grid-column: 1; grid-row: 2; justify-self: stretch; padding: 36px var(--pad) 12px; }
}

/* Enmarcada (Marco) — foto con margen del color de fondo y título debajo, como "Frame"/"Vintage" */
body[data-hero="frame"] .cover { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(12px, 2.4vw, 32px) var(--pad) 0; color: var(--text); background: var(--bg); }
body[data-hero="frame"] .cover-media { position: relative; inset: auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); height: calc(100svh - var(--hdr-h) - 270px); min-height: 340px; }
body[data-hero="frame"] .cover-text { padding: clamp(28px, 4vw, 48px) var(--pad) 8px; }
body[data-hero="frame"] .cover-sub { color: var(--muted); opacity: 1; }
body[data-hero="frame"] .cover-eyebrow { color: var(--muted); }
body[data-hero="frame"] .scroll-cue { display: none; }
body[data-hero="frame"] .slide-dots { bottom: 18px; }
body[data-hero="frame"] .cover-cta { margin-top: 24px; }
body[data-width="ancho"][data-hero="frame"] .cover { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { body[data-hero="frame"] .cover-media { height: 58svh; } }

/* Portada de galería: un poco más contenida que la del cliente */
.cover-gallery .cover-title { font-size: clamp(1.9rem, 5vw, 3.8rem); }

/* =====================================================================
   3. TARJETAS
   ===================================================================== */
/* Título sobre la foto (Moderno) */
body[data-cards="overlay"] .cards { gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 560px)); justify-content: start; }
body[data-cards="overlay"] .card-cover { aspect-ratio: 4 / 3; }
body[data-cards="overlay"] .card-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 45%, rgba(0,0,0,.6)); transition: opacity .3s; }
body[data-cards="overlay"] .card-link:not(.has-img) .card-cover::before { display: none; }
body[data-cards="overlay"] .card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; align-items: flex-start; text-align: left; padding: 22px 24px; color: #fff; }
body[data-cards="overlay"] .card-meta { color: rgba(255,255,255,.8); }
body[data-cards="overlay"] .card-link:not(.has-img) .card-body { color: var(--text); }
body[data-cards="overlay"] .card-link:not(.has-img) .card-meta { color: var(--muted); }
body[data-cards="overlay"] .card-title { font-size: 1.5rem; }

/* =====================================================================
   4. TRATAMIENTO POR LÍNEA
   ===================================================================== */

/* --- Clásico: mayúsculas espaciadas y ligeras, todo centrado --- */
body[data-theme="clasico"] .cover-title,
body[data-theme="clasico"] .page-title { text-transform: uppercase; letter-spacing: .16em; font-weight: 300; }
body[data-theme="clasico"] .cover-title { font-size: clamp(1.9rem, 5.2vw, 4rem); }
body[data-theme="clasico"] .card-title { text-transform: uppercase; letter-spacing: .14em; font-size: .92rem; font-weight: 500; }
body[data-theme="clasico"] .site-name { font-weight: 400; }

/* --- Editorial: serif grande en caja normal, numeración y alineación a la izquierda --- */
body[data-theme="editorial"] .cover-title { font-size: clamp(2.6rem, 5.4vw, 5rem); letter-spacing: -.01em; line-height: 1.02; }
body[data-theme="editorial"] .cover-sub { text-transform: none; letter-spacing: .01em; font-size: 1.05rem; font-style: italic; font-family: var(--font-title); }
body[data-theme="editorial"] .page-hero { text-align: left; border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 48px); }
body[data-theme="editorial"] .page-hero .lead { margin-left: 0; }
body[data-theme="editorial"] .page-title { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.01em; }
body[data-theme="editorial"] .section-head { text-align: left; display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
body[data-theme="editorial"] .section-title { font-family: var(--font-title); font-weight: var(--title-weight); font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: none; letter-spacing: 0; color: var(--text); }
body[data-theme="editorial"] .section-title::after { display: none; }
body[data-theme="editorial"] .cards { justify-content: start; }
body[data-theme="editorial"] .card-body { align-items: flex-start; text-align: left; padding: 16px 0 0; }
body[data-theme="editorial"] .card-index { display: block; }
body[data-theme="editorial"] .card-title { font-size: 1.55rem; }
body[data-theme="editorial"] .site-name { font-family: var(--font-title); text-transform: none; letter-spacing: .02em; font-size: 1.35rem; }

/* --- Marco: serif serena, láminas con paspartú --- */
body[data-theme="marco"] .cover-title { font-weight: 300; letter-spacing: .02em; font-size: clamp(2.2rem, 5vw, 4.2rem); }
body[data-theme="marco"] .page-title { font-weight: 300; letter-spacing: .02em; }
body[data-theme="marco"] .card-cover { outline: 1px solid var(--line); outline-offset: 8px; margin: 9px; }
body[data-theme="marco"] .card-body { padding-top: 22px; }
body[data-theme="marco"] .card-title { font-size: 1.45rem; font-weight: 400; }
body[data-theme="marco"] .card-meta { text-transform: none; letter-spacing: .04em; font-size: .82rem; font-style: italic; }
body[data-theme="marco"] .site-name { font-family: var(--font-title); letter-spacing: .24em; font-size: 1.05rem; }

/* --- Moderno: geométrica, compacta y a la izquierda --- */
body[data-theme="moderno"] .cover-title { font-size: clamp(2.8rem, 8vw, 7rem); letter-spacing: -.03em; line-height: .95; }
body[data-theme="moderno"] .cover-rule { display: none; }
body[data-theme="moderno"] .cover-sub { margin-top: 18px; }
body[data-theme="moderno"] .page-hero { text-align: left; }
body[data-theme="moderno"] .page-hero .lead { margin-left: 0; }
body[data-theme="moderno"] .page-title { font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -.03em; line-height: .98; }
body[data-theme="moderno"] .section-head { text-align: left; }
body[data-theme="moderno"] .section-title::after { margin-left: 0; }
body[data-theme="moderno"] .site-name { letter-spacing: .08em; font-weight: 600; }

/* --- Noche: oscuro, serif ligera con filete y acento dorado --- */
body[data-theme="noche"] .cover-title,
body[data-theme="noche"] .page-title { font-weight: 300; text-transform: uppercase; letter-spacing: .14em; }
body[data-theme="noche"] .cover-eyebrow { color: var(--accent); opacity: 1; }
body[data-theme="noche"] .cover-rule { background: var(--accent); opacity: 1; }
body[data-theme="noche"] .section-title { color: var(--accent); }
body[data-theme="noche"] .card-title { text-transform: uppercase; letter-spacing: .16em; font-size: 1rem; font-weight: 400; }
body[data-theme="noche"] .card-link:hover .card-title { color: var(--accent); }
body[data-theme="noche"] .card-title { transition: color .3s; }
body[data-theme="noche"] .site-name { font-weight: 400; letter-spacing: .26em; }