/* =========================================
   PORTADA (index.html) — REDISEÑO 2026
   Para lectores: banda de tinta arriba, el Sello sobre blanco, la sede, el
   café completo en clave cálida y un cierre de tinta para autores.
   Usa tokens.css y ui.css; los colores del café se redefinen en .cafe.
   ========================================= */

/* HÉROE: la banda de tinta arranca bajo el menú fijo, que también es tinta */
.hero {
    padding-top: calc(var(--header-h) + clamp(40px, 2rem + 4vw, 88px));
    padding-bottom: clamp(48px, 2rem + 4vw, 96px);
}
.hero__grid { display: grid; gap: 48px; }
.hero__copy { display: grid; gap: 24px; justify-items: start; align-content: end; }
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font: 400 var(--fs-mono)/1.5 var(--mono);
    color: var(--text-2);
}
.hero__hours { display: contents; }

/* El estante: las portadas 3D son objetos físicos, los únicos con sombra */
.hero__shelf { margin: 0; }
.shelf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-inline: 4px;
    border-bottom: 1px solid var(--line-2);
}
.shelf img { width: auto; height: clamp(116px, 30vw, 160px); filter: var(--shadow-media); }
.shelf img + img { margin-left: -10px; }
.shelf img:nth-child(2) { position: relative; z-index: 1; }
.shelf img:nth-child(3) { position: relative; z-index: 2; }
.shelf__cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 12px;
    font: 400 var(--fs-mono)/1.5 var(--mono);
    color: var(--text-2);
}
.shelf__cap a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -12px; }

@media (min-width: 900px) {
    /* El estante va centrado junto al texto y más grande: abajo y chico dejaba el héroe vacío */
    .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
    .hero__copy { grid-column: 1 / span 6; }
    .hero__shelf { grid-column: 7 / -1; }
    /* La altura sale del ancho de la columna (cqw): las cuatro portadas suman ~2,83 veces
       su altura, menos los traslapes, y así nunca se salen de su columna */
    .hero__shelf { container-type: inline-size; }
    .shelf img { height: min(300px, calc((100cqw + 84px) / 2.83)); }
    .shelf img + img { margin-left: -28px; }
}

/* SELLO */
.sello__more { margin-top: 48px; }

/* LA SEDE: tira de fotos (en el celular se desliza) y la visita con la fachada */
.sede__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64%, 1fr);
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 8px;
}
.sede__photo {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--r-6);
    background: var(--bg-3);
    scroll-snap-align: start;
}
.sede__photo img { width: 100%; height: 100%; object-fit: cover; }

.sede__visit { position: relative; display: grid; gap: 24px; margin-top: 56px; }
.sede__visit > [aria-hidden="true"]:empty { position: absolute; top: calc(-1 * var(--header-h)); }
.sede__facade { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-10); background: var(--bg-3); }
.sede__facade img { width: 100%; height: 100%; object-fit: cover; }
.sede__info { display: grid; gap: 20px; align-content: center; }

@media (min-width: 760px) {
    .sede__strip { grid-auto-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 0; gap: 12px; }
}
@media (min-width: 900px) {
    .sede__visit { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
    .sede__facade { grid-column: 1 / span 7; }
    .sede__info { grid-column: 9 / -1; }
}

/* ALKIMIA COFFEE: los mismos tokens, en clave cálida (madera y café).
   La banda de entrada es crema, no el gris de la sede: así se ve dónde
   termina la librería y empieza el café. */
.cafe {
    --bg: hsl(36 38% 90%);
    --bg-2: hsl(36 25% 99%);
    --bg-3: hsl(32 12% 92%);
    --line: hsl(30 10% 86%);
    --line-2: hsl(28 8% 49%);   /* 3,2:1 sobre la crema */
    --text: hsl(12 28% 12%);
    --text-2: hsl(18 10% 32%);
    --text-3: hsl(20 8% 40%);
    --cover-ground: hsl(36 25% 99%);
}
.cafe__band { border-top: 1px solid hsl(30 18% 80%); }
.cafe__intro { display: grid; gap: 40px; }
.cafe__intro-text { display: grid; gap: 18px; justify-items: start; align-content: center; }
.cafe__title { line-height: 1; }
.cafe__logo-plate { display: inline-block; }
.cafe__logo-plate img { width: 260px; max-width: 100%; height: auto; }
.cafe__tagline { max-width: 14ch; }

.cafe__collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cafe__collage .gallery-item {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--r-6);
    background: var(--bg-3);
}
.cafe__collage .cafe-photo-main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.cafe__collage img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
    .cafe__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
    .cafe__intro-text { grid-column: 1 / span 5; }
    .cafe__collage {
        grid-column: 7 / -1;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        height: 520px;
        gap: 12px;
    }
    .cafe__collage .cafe-photo-main { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
    .cafe__collage .gallery-item:not(.cafe-photo-main) { aspect-ratio: auto; }
}

.cafe__menu { display: grid; gap: 16px; margin-top: 24px; }
.cafe-menu-card {
    padding: 20px 20px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    background: var(--bg-2);
}
.cafe-menu-card .icon { width: 28px; height: 28px; color: var(--brand-text); }
.cafe-menu-card h4 { margin: 12px 0 4px; font-size: 1.125rem; font-weight: 600; }
.cafe-menu-card ul { list-style: none; }
.cafe-menu-card li { padding-block: 9px 10px; border-bottom: 1px solid var(--line); }
.cafe-menu-card li:last-child { border-bottom: 0; }
.cafe__note { margin-top: 16px; font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--text-3); }

.cafe__menu-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
}
.cafe__more { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-weight: 600; }

@media (min-width: 760px) {
    .cafe__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* CIERRE PARA AUTORES (banda de tinta) */
.authors { display: grid; gap: 48px; }
.authors__intro { display: grid; gap: 20px; align-content: start; }
.steps { list-style: none; margin-top: 8px; border-top: 1px solid var(--line); }
.steps li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
}
.steps__n { font: 500 1rem/1.5 var(--mono); color: var(--brand-text); }
.steps strong { display: block; font-weight: 600; color: var(--text); }
.steps p { color: var(--text-2); }

.services { display: grid; gap: 24px; margin-top: 16px; }
.services h3 { margin-bottom: 8px; font-size: 1.0625rem; font-weight: 600; }
.services ul { list-style: none; }
.services li { padding-block: 3px; font-size: 0.9375rem; color: var(--text-2); }

.authors__contact {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-10);
}
.authors__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 var(--fs-mono)/1.5 var(--mono);
    color: var(--text-2);
}
.authors__note .icon { color: var(--brand-text); }
.authors__or {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 400 var(--fs-mono)/1.5 var(--mono);
    color: var(--text-2);
}
.authors__or::before,
.authors__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authors__form { display: grid; gap: 16px; }
.band--ink .input { background: transparent; color: var(--text); border-color: var(--line-2); }
.band--ink .input:hover { border-color: var(--text-2); }

@media (min-width: 760px) {
    .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .authors { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
    .authors__intro { grid-column: 1 / span 7; }
    .authors__contact { grid-column: 9 / -1; align-self: start; }
}