/* ==========================================================================
   arline — secciones.css
   Hero Pallette · secciones editoriales Interiorglobe · plantillas de página
   ========================================================================== */

/* ==========================================================================
   Hero slideshow (Pallette §6.1 + §7.5 cortina)
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  color: #fff;
  overflow: hidden;
}
.hero.sticky-active { position: sticky; top: var(--hero-sticky-top, 0px); }

.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.08) 45%); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

.hero-content {
  position: absolute;
  left: var(--container-padding);
  right: var(--container-padding);
  bottom: 3.4rem;
  z-index: 2;
  max-width: 820px;
}
.hero-content .hero-kicker { margin-bottom: 1rem; opacity: .85; }
.hero-content h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.14; margin-bottom: 0; text-wrap: balance; }

/* Paginación fracción + progreso circular */
.hero-pagination {
  position: absolute;
  right: var(--container-padding);
  bottom: 3.4rem;
  z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  font: 400 13px/1 var(--grotesk); letter-spacing: .06em;
}
.hero-progress { width: 26px; height: 26px; transform: rotate(-90deg); }
.hero-progress circle { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.hero-progress .progress-value { stroke: #fff; stroke-dasharray: 63; stroke-dashoffset: 63; }
.hero.is-playing .progress-value { animation: hero-dash var(--hero-delay, 5.5s) linear infinite; }
@keyframes hero-dash { from { stroke-dashoffset: 63; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero.is-playing .progress-value { animation: none; } }

/* Cursor flotante prev/next (Pallette §7.3) */
.hero-cursor {
  position: fixed; top: 0; left: 0; z-index: 40;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font: 400 15px/1 var(--grotesk); color: #fff;
  pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  backdrop-filter: blur(2px);
}
.hero-cursor.is-visible { opacity: 1; }
@media (min-width: 750px) and (pointer: fine) { .hero-cursor { display: flex; } }

/* La sección que sigue al hero se desliza por encima (cortina) */
.after-hero { position: relative; z-index: 3; background: rgb(var(--bg)); }

/* ==========================================================================
   Home · I. Estudio — manifiesto editorial + imágenes asimétricas
   ========================================================================== */
/* Aire extra entre el borde superior (cortina sobre el hero) y el manifiesto */
.manifesto { padding-top: clamp(4rem, 10vw, 10rem); }
.manifesto .editorial { max-width: 62ch; }
.manifesto .manifesto-link { display: inline-block; margin-top: 2rem; }

.asym {
  margin-top: clamp(3rem, 8vw, 7rem);
  display: grid; gap: 2rem;
}
.asym figure figcaption { margin-top: .7rem; }
.asym .fig-label { font: italic 600 15px/1 var(--serif); margin-right: .6em; }
@media (min-width: 750px) {
  .asym { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .asym .asym-a { grid-column: 1 / span 6; }
  .asym .asym-b { grid-column: 9 / span 4; margin-bottom: -18vh; }
}

/* ==========================================================================
   Home · II. Colecciones — bloques 50/50 (highlights Pallette, piel editorial)
   ========================================================================== */
.collections { display: grid; gap: clamp(3rem, 8vw, 6rem); margin-top: clamp(3rem, 8vw, 6rem); }
.collection-row { display: grid; gap: 1.6rem; align-items: center; }
.collection-row .collection-media { overflow: hidden; }
.collection-row .collection-media img { transition: transform .8s ease; }
.collection-row:hover .collection-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .collection-row .collection-media img { transition: none; } }
.collection-text .label { color: rgba(var(--ink), .5); margin-bottom: 1rem; display: block; }
.collection-text h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 1rem; }
.collection-text p { max-width: 46ch; margin-bottom: 1.6rem; }
@media (min-width: 750px) {
  .collection-row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 8rem); }
  .collection-row:nth-child(even) .collection-media { order: 2; }
  .collection-text { max-width: 480px; }
}

/* ==========================================================================
   Índice de proyectos (journal Interiorglobe) — home y archivo
   ========================================================================== */
.project-index { margin-top: clamp(2.4rem, 6vw, 4rem); border-top: var(--hairline); transition: opacity .28s ease; }
.project-index.is-switching { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .project-index { transition: none; } }
.project-row {
  display: grid;
  grid-template-columns: 2ch 96px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: var(--hairline);
  transition: background var(--duration) ease;
}
.project-row:hover { background: rgba(var(--ink), .035); }
.project-row .row-num { font: 400 13px/1 var(--grotesk); color: rgba(var(--ink), .5); }
.project-row .row-thumb { overflow: hidden; aspect-ratio: 3 / 2; }
.project-row .row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) ease; }
.project-row:hover .row-thumb img { transform: scale(1.05); }
.project-row h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.2; letter-spacing: -.01em; }
.project-row .row-cat, .project-row .row-link { display: none; }
@media (min-width: 750px) {
  .project-row { grid-template-columns: 3ch 148px 1fr auto auto; gap: 2.4rem; padding: 1.7rem 0; }
  .project-row .row-cat { display: block; font: 400 13px/1.4 var(--grotesk); letter-spacing: .02em; color: rgba(var(--ink), .6); }
  .project-row .row-link { display: block; }
}
.index-foot { display: flex; justify-content: flex-end; margin-top: 1.4rem; }

/* ---------- Modo grid editorial del archivo (mismo lenguaje que .asym / colecciones) ---------- */
.project-index.is-grid { border-top: 0; display: grid; gap: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 6rem); }
.project-index.is-grid .project-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "thumb thumb thumb"
    "num   cat   link"
    "title title title";
  align-content: start;
  gap: 0;
  padding: 0;
  border-bottom: 0;
}
.project-index.is-grid .project-row:hover { background: none; }
.project-index.is-grid .row-thumb { grid-area: thumb; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 1.2rem; }
.project-index.is-grid .row-num { grid-area: num; margin-right: 1rem; }
.project-index.is-grid .row-cat { grid-area: cat; display: block; font: 400 13px/1.4 var(--grotesk); letter-spacing: .02em; color: rgba(var(--ink), .6); }
.project-index.is-grid .row-link { grid-area: link; display: block; justify-self: end; }
.project-index.is-grid .project-row h3 { grid-area: title; margin-top: .55rem; max-width: 24ch; }
@media (min-width: 750px) {
  .project-index.is-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Desfase editorial alterno (composición asimétrica Interiorglobe) */
  .project-index.is-grid .project-row:nth-child(even) { margin-top: clamp(2.5rem, 6vw, 5rem); }
}

/* ---------- Switch flotante grid / lista (editorial) ---------- */
.view-switch {
  position: fixed;
  left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; align-items: center; gap: .4rem;
  padding: .85rem 1.7rem;
  background: rgba(var(--bg), .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: var(--hairline);
  border-radius: 999px;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.view-switch button {
  color: rgba(var(--ink), .45);
  transition: color var(--duration) ease;
}
.view-switch button::before { content: '(\00a0'; opacity: 0; transition: opacity var(--duration) ease; }
.view-switch button::after { content: '\00a0)'; opacity: 0; transition: opacity var(--duration) ease; }
.view-switch button:hover { color: rgb(var(--ink)); }
.view-switch button.is-active { color: rgb(var(--ink)); }
.view-switch button.is-active::before, .view-switch button.is-active::after { opacity: 1; }
.view-switch-sep { color: rgba(var(--ink), .3); }
.view-switch.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ==========================================================================
   Home · IV. Marcas — pliego de logotipos (banda de papel)
   ========================================================================== */
.brands { background: rgb(var(--paper)); border-top: var(--hairline); border-bottom: var(--hairline); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.brands-grid {
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  border-top: var(--hairline);
  padding-top: clamp(2.6rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.4rem, 5vw, 4rem) clamp(2.4rem, 6vw, 6rem);
  align-items: center;
}
.brands-grid li { display: flex; justify-content: center; }
.brands-grid img {
  width: 100%;
  max-width: 150px;
  opacity: .55;
  transition: opacity var(--duration) ease;
}
.brands-grid li:hover img { opacity: .95; }
@media (min-width: 750px) { .brands-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 990px) { .brands-grid { grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   Cabecera de página interior (titular serif centrado Interiorglobe)
   ========================================================================== */
.page-head { padding-top: calc(var(--header-height) + clamp(3rem, 9vw, 7rem)); text-align: center; }
.page-head h1 { max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.page-head .page-meta { margin-top: 1.4rem; display: grid; gap: .3rem; }
.page-head .page-meta em { font-style: italic; }
/* Menos aire entre la cabecera de página y la primera sección (Estudio) */
.page-head + .manifesto { margin-top: 0; padding-top: clamp(3rem, 8vw, 8rem); }

/* ==========================================================================
   Ficha de proyecto (artículo Interiorglobe)
   ========================================================================== */
.article-hero { margin-top: clamp(2.6rem, 6vw, 4.4rem); }
.article-hero img { width: 100%; max-height: 82vh; object-fit: cover; }

.article-body { display: grid; gap: clamp(3rem, 8vw, 6rem); margin-top: clamp(3rem, 8vw, 6rem); }
.article-text { max-width: 680px; margin: 0 auto; padding: 0 var(--container-padding); }
.article-text .editorial--indent + .editorial--indent { margin-top: 1.4em; }

/* Par de imágenes con Fig. */
.fig-pair { display: grid; gap: 2rem; padding: 0 var(--container-padding); }
.fig-pair figure figcaption { margin-top: .7rem; }
.fig-pair .fig-label { font: italic 600 15px/1 var(--serif); margin-right: .6em; }
@media (min-width: 750px) {
  .fig-pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .fig-pair.fig-pair--offset figure:last-child { margin-top: 14vh; }
  .fig-pair--wide { grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
}

/* Navegación anterior / siguiente */
.article-nav {
  margin-top: var(--spaced-section);
  border-top: var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr;
}
.article-nav a { padding: 2.2rem var(--container-padding); display: grid; gap: .5rem; transition: background var(--duration) ease; }
.article-nav a:hover { background: rgba(var(--ink), .035); }
.article-nav a + a { border-left: var(--hairline); text-align: right; }
.article-nav h3 { font-size: clamp(19px, 2vw, 24px); }

/* ==========================================================================
   Estudio
   ========================================================================== */
.values { margin-top: clamp(3rem, 8vw, 6rem); display: grid; border-top: var(--hairline); border-bottom: var(--hairline); }
.value { padding: 2.4rem 0; border-bottom: var(--hairline); }
.value:last-child { border-bottom: 0; }
.value .label { color: rgba(var(--ink), .5); display: block; margin-bottom: .9rem; }
.value p { max-width: 34ch; }
@media (min-width: 750px) {
  .values { grid-template-columns: repeat(3, 1fr); }
  .value { border-bottom: 0; padding: 2.6rem 2.4rem; }
  .value + .value { border-left: var(--hairline); }
  .value:first-child { padding-left: 0; }
}

/* Proceso (sticky content gallery Pallette §7.4, apilado en móvil) */
.process { margin-top: var(--spaced-section); }
.process-steps { display: grid; gap: 3rem; margin-top: 2.6rem; counter-reset: step; }
.process-step { border-top: var(--hairline); padding-top: 1.6rem; }
.process-step .label { color: rgba(var(--ink), .5); display: block; margin-bottom: .8rem; }
.process-step h3 { font-size: 24px; margin-bottom: .7rem; }
.process-step p { max-width: 52ch; }
@media (min-width: 990px) {
  .process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
  .process-media { position: sticky; top: calc(var(--header-height) + 2rem); }
  .process-media img { aspect-ratio: 4 / 5; object-fit: cover; }
}

/* ==========================================================================
   Contacto (Pallette §8.6: dos fotos a sangre)
   ========================================================================== */
.contact-heros { display: grid; margin-top: clamp(2.6rem, 6vw, 4.4rem); }
.contact-heros figure { position: relative; }
.contact-heros img { width: 100%; height: 52vh; object-fit: cover; }
.contact-heros .contact-overlay {
  position: absolute; inset: auto var(--container-padding) 2rem;
  color: #fff; z-index: 2;
}
.contact-heros figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.42), transparent 55%); }
.contact-heros .contact-overlay h2 { font-size: clamp(24px, 2.6vw, 32px); max-width: 18ch; }
@media (min-width: 750px) {
  .contact-heros { grid-template-columns: 1fr 1fr; }
  .contact-heros img { height: 64vh; }
}

/* Canales directos: email y teléfono en filas serif grandes con hairlines */
.channel-links { margin-top: clamp(2.4rem, 5vw, 3.5rem); border-top: var(--hairline); }
.channel-link {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem 2.4rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: var(--hairline);
}
.channel-link .label { flex: 0 0 7.5rem; color: rgba(var(--ink), .5); }
.channel-link .channel-value {
  font: 400 clamp(26px, 3.6vw, 44px)/1.1 var(--serif);
  letter-spacing: -.015em;
  transition: color var(--duration) ease;
}
.channel-link:hover .channel-value { color: rgb(var(--accent)); }

/* Dirección (enlace a Google Maps) e Instagram */
.contact-meta { display: grid; gap: 2.6rem; margin-top: clamp(3rem, 7vw, 5rem); }
.contact-meta .label { display: block; margin-bottom: .5rem; }
.contact-meta a { transition: color var(--duration) ease; }
.contact-meta a:hover { color: rgb(var(--accent)); }
.contact-meta .paren-link { display: inline-block; margin-top: .7rem; }
@media (min-width: 750px) {
  .contact-meta { grid-template-columns: 1fr 1fr; }
}