/* ==========================================================================
   SvH STUDIO — hoja del sitio. Depende de tokens.css.
   Un solo documento: frontispicio + índice. Sin portada, sin nav, sin botón.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--svh-paper);
  color:var(--svh-ink);
  font-family:var(--svh-sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:var(--focus);outline-offset:3px}

.page{max-width:var(--maxw);margin:0 auto;padding:var(--rhythm-page) var(--gutter) var(--rhythm-foot)}
.front + .grp{margin-top:var(--rhythm-front)}

/* ── frontispicio ─────────────────────────────────────────────────────── */
.eye{
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--svh-dim);margin-bottom:clamp(3rem,14vw,7rem);
}
.eye strong{color:var(--svh-ink);font-weight:600;letter-spacing:.1em}

.front h1{
  margin:0;font-family:var(--svh-serif);font-weight:400;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);
  text-wrap:balance;max-width:17ch;
}
.front h1 em{font-style:italic}
.front .lede{
  margin:clamp(1rem,3.6vw,1.75rem) 0 0;max-width:46ch;
  font-size:var(--t-lede);line-height:1.5;color:var(--svh-dim);
}
.front .lede strong{color:var(--svh-ink);font-weight:500}

/* línea de crédito — nombres como tipografía, nunca como enlace */
.dateline{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  margin-top:clamp(1.25rem,4.5vw,2.25rem);padding-top:var(--s3);
  border-top:1px solid var(--svh-rule);
  font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--svh-dim);
}
.dateline .tag{color:var(--svh-ink);font-weight:600;letter-spacing:var(--ls-label)}
.dateline .names{color:var(--svh-ink);letter-spacing:var(--ls-names)}

/* ── grupos del índice ────────────────────────────────────────────────── */
.grp{margin-top:var(--rhythm-group)}
.grp-label{
  margin:0;font-weight:400;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--svh-dim);padding-bottom:var(--s2);
  border-bottom:1.5px solid var(--svh-rule-hard);
}

/* ── la fila ──────────────────────────────────────────────────────────── */
.row{
  display:grid;grid-template-columns:1fr auto;
  column-gap:var(--s4);row-gap:.35em;align-items:baseline;
  padding:var(--rhythm-row) 0;border-bottom:1px solid var(--svh-rule);
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  font:inherit;color:inherit;text-decoration:none;
}
.row .n{grid-column:1;font-family:var(--svh-serif);font-size:var(--t-row);
  line-height:var(--lh-tight);letter-spacing:var(--ls-row)}
.row .v{grid-column:2;justify-self:end;font-family:var(--svh-serif);font-size:var(--t-value);
  line-height:var(--lh-tight);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .d{grid-column:1/-1;font-size:var(--t-desc);color:var(--svh-dim);line-height:var(--lh-snug)}

@media (min-width:760px){
  .row{grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;column-gap:var(--s8);row-gap:0}
  .row .d{grid-column:2}
  .row .v{grid-column:3}
}

/* Todas las filas de un grupo comparten pistas: los nombres se alinean a la
   izquierda, las descripciones arrancan en la misma x y los valores cuelgan
   de un mismo eje derecho. Es lo que separa un índice de una lista. */
@supports (grid-template-columns:subgrid){
  @media (min-width:760px){
    .grp{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;column-gap:var(--s8)}
    .grp-label,.panel{grid-column:1/-1}
    .row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:var(--s8)}
  }
}

/* variantes de valor */
.row .v.sm{font-family:var(--svh-sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--svh-dim)}
.row .v.link{font-family:var(--svh-sans);font-size:var(--t-small);font-weight:600;
  letter-spacing:.03em;border-bottom:1px solid currentColor;padding-bottom:.12em}

/* fila de texto llano — "Cómo funciona" */
.row.plain .n{font-family:var(--svh-sans);font-size:var(--t-plain);font-weight:600;
  letter-spacing:0;line-height:var(--lh-snug)}

/* fila que se agrega — colgada del nivel de arriba */
.row.add{padding-top:.55rem;padding-bottom:.55rem}
.row.add .n{font-family:var(--svh-sans);font-size:var(--t-desc);font-weight:600;letter-spacing:0;
  color:var(--svh-dim);padding-left:var(--s4);border-left:1px solid var(--svh-rule)}
.row.add .v{font-family:var(--svh-sans);font-size:var(--t-desc);font-weight:600;color:var(--svh-dim)}
@media (min-width:760px){.row.add .d{padding-left:0}}

/* ── el único movimiento: la fila que se abre ─────────────────────────── */
a.row{display:grid}
a.row:hover .n{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
button.row{cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:var(--radius);
  transition:background var(--motion-fast),color var(--motion-fast),
             border-color var(--motion-fast),margin var(--motion-fast),padding var(--motion-fast)}

/* Afordancia tipográfica: el filete se cierra y la etiqueta se subraya.
   Sin caja gris — el sistema no tiene rellenos que no sean el color del lugar. */
button.row:hover{border-bottom-color:var(--svh-ink)}
button.row:hover .v{border-bottom:1px solid currentColor;padding-bottom:.12em}

/* Abierta: la fila toma el color del lugar y respira 20px más allá del texto,
   sin salirse de la columna. Lo único que sangra en todo el sitio es la foto. */
button.row[aria-expanded="true"]{
  background:var(--lugar);color:var(--svh-on-tint);border-bottom-color:transparent;
  width:auto;margin-inline:calc(-1 * var(--s5));padding-inline:var(--s5);
}
button.row[aria-expanded="true"] .d,
button.row[aria-expanded="true"] .v{color:rgba(242,239,234,.74)}
button.row[aria-expanded="true"] .v{border-bottom-color:rgba(242,239,234,.5)}

/* El único movimiento del sitio.
   Sin JS el panel queda abierto y el contenido es alcanzable; el script lo
   cierra al cargar y a partir de ahí anima el alto con grid-template-rows,
   que recorta como telón en vez de aplastar. */
.panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--motion)}
.panel[data-open="false"]{grid-template-rows:0fr}
.panel > .inner{min-height:0;overflow:hidden;padding-bottom:clamp(3rem,9vw,6rem);
  opacity:1;transition:opacity var(--motion)}
.panel[data-open="false"] > .inner{opacity:0;padding-bottom:0}

/* imagen que abre el lugar — a sangre, oscura, con el texto abajo */
.open{
  margin:0;position:relative;isolation:isolate;
  width:100vw;margin-inline:calc(50% - 50vw);
  min-height:clamp(19rem,72vh,44rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.75rem,5vw,3.5rem) var(--edge);color:var(--svh-on-tint);background:var(--lugar);
  overflow:hidden;
}
.open picture,.open img{position:absolute;inset:0;z-index:-2}
.open img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.045);transition:transform var(--motion-slow)}
.panel[data-open="true"] .open img{transform:scale(1)}
.open::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,12,8,.82) 0%,rgba(8,12,8,.30) 46%,rgba(8,12,8,0) 76%)}
.open .wm{font-family:var(--svh-sans);font-weight:700;font-size:var(--t-open);
  line-height:.82;letter-spacing:-.035em}
.open .cp{margin-top:.35em;font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,239,234,.72)}

/* detalle del lugar, ya dentro del papel */
.detail{padding-top:clamp(2rem,6vw,3.5rem)}
.detail h2{margin:0;font-family:var(--svh-serif);font-weight:400;
  font-size:clamp(1.5rem,5.4vw,2.5rem);line-height:1.02;letter-spacing:var(--ls-row);max-width:20ch}
.detail p{margin:var(--s4) 0 0;max-width:52ch;color:var(--svh-dim);font-size:var(--t-body)}
.detail .hizo{display:flex;flex-wrap:wrap;gap:.55em var(--s4);list-style:none;margin:var(--s8) 0 0;padding:0;
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--svh-dim);line-height:1.5}
.detail .hizo li::after{content:"·";margin-left:var(--s3);color:var(--svh-faint)}
.detail .hizo li:last-child::after{content:""}
.detail .visita{display:inline-block;margin-top:clamp(1.75rem,5vw,2.75rem);
  font-size:var(--t-body);font-weight:600;letter-spacing:.01em;
  border-bottom:1px solid var(--svh-ink);padding-bottom:.18em;
  transition:opacity var(--motion-fast)}
.detail .visita:hover{opacity:.55}

/* par de imágenes claras — viven en el papel, sin marco */
.pale{display:grid;gap:var(--s4);margin-top:clamp(2.25rem,7vw,4rem)}
@media (min-width:600px){.pale{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.pale img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* ── pie ──────────────────────────────────────────────────────────────── */
.sig{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--rhythm-group);padding-top:var(--s3);border-top:1px solid var(--svh-rule);
  font-size:var(--t-small);color:var(--svh-dim)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}