/* ==========================================================================
   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}
/* Sobre el color del lugar la tinta desaparece: el anillo se invierte. */
button.row[aria-expanded="true"]:focus-visible,.cierre:focus-visible{
  outline:2px solid var(--svh-on-tint);outline-offset:-5px}

.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);text-wrap:pretty;
}
.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 .loc{color:var(--svh-dim)}
/* El trabajo local pesa distinto: va en tinta, como los nombres, no en gris
   como la formación. La colonia es lo que de verdad reconoce el comprador. */
.dateline .aqui{color:var(--svh-ink);letter-spacing:var(--ls-names)}
.names{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);list-style:none;margin:0;padding:0;
  color:var(--svh-ink);letter-spacing:var(--ls-names)}
.names li::after{content:"·";margin-left:var(--s3);color:var(--svh-faint)}
.names li:last-child::after{content:""}

/* A partir de 1200px la mitad derecha quedaba muerta y se leía como que se
   acabó el contenido. La credencial se va a una columna propia junto al
   titular: el hueco se vuelve asimetría decidida, sin agregar material. */
@media (min-width:1200px){
  .front{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);
    column-gap:clamp(3rem,5vw,5rem);align-items:start}
  .front .eye{grid-column:1/-1}
  .front h1{grid-column:1;grid-row:2}
  .front .lede{grid-column:1;grid-row:3}
  .dateline{grid-column:2;grid-row:2/span 2;flex-direction:column;align-items:flex-start;
    gap:var(--s3);margin-top:0;padding:1rem 0 0 clamp(1.5rem,2.5vw,2.5rem);
    border-top:0;border-left:1px solid var(--svh-rule);align-self:stretch}
  .names{flex-direction:column;gap:.45em}
  .names li::after{content:""}
  .dateline .loc{margin-top:auto;padding-bottom:.25rem}
}

/* ── 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:2px solid var(--svh-rule-hard);
}

/* SEGUNDO NIVEL.

   "Se agrega" cuelga de "Qué construyo" —no puedes comprar Reservaciones
   sola— y "Cómo funciona" son las condiciones, no la oferta. Los dos son
   subordinados y hasta hoy pesaban igual que los tres principales.

   El rango se marca dos veces, para que no quede como casi-diferencia: el
   nombre baja un escalón completo de la rampa (44 → 32, no un ajuste de
   unos píxeles) y el filete de la etiqueta pasa de 2px en tinta a la
   hairline del índice. Dos señales, ningún punto medio. */
.grp--sec .grp-label{border-bottom:1px solid var(--svh-rule)}
.grp--sec .row .n{font-size:var(--t-value)}
.grp--sec .row .n em{font-size:var(--t-small)}

/* ── la fila ──────────────────────────────────────────────────────────── */
/* La fila de una carta impresa: nombre — guía de puntos — valor,
   y la descripción abajo, con medida corta. Igual en toda anchura.
   El modelo de tres columnas estiraba la descripción a 676px y dejaba
   138px de vacío antes del precio: se leía como tabla rota. */
.row{
  display:grid;grid-template-columns:auto minmax(1.5rem,1fr) auto;
  column-gap:clamp(.5rem,2vw,1rem);row-gap:.72em;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;
  scroll-margin-top:clamp(.75rem,3vw,1.5rem);
}
.row .n{grid-column:1;grid-row:1;font-family:var(--svh-serif);font-size:var(--t-row);
  line-height:var(--lh-tight);letter-spacing:var(--ls-row);white-space:nowrap}
.row .lead{grid-column:2;grid-row:1;align-self:baseline;transform:translateY(-.34em);
  border-bottom:1px dotted var(--svh-guia)}
.row .v{grid-column:3;grid-row:1;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;grid-row:2;font-size:var(--t-desc);color:var(--svh-dim);
  line-height:var(--lh-snug);max-width:58ch;text-wrap:pretty}

/* 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.act{font-family:var(--svh-serif);font-size:var(--t-value);letter-spacing:var(--ls-row);
  text-transform:none;font-weight:400;color:inherit}
.row .v.act .fl{display:inline-block;margin-left:.28em;font-size:var(--t-flecha);
  transition:transform var(--motion-fast)}
button.row:hover .v.act .fl{transform:translateY(2px)}
button.row[aria-expanded="true"] .v.act .fl{transform:rotate(180deg)}
.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}

/* La marca de la casa: un consejo en versalitas sobre el nombre, como el
   plato recomendado de una carta impresa. No una etiqueta de "más popular",
   que es lenguaje de SaaS y aquí se vería fatal. */
.row--reco{grid-template-rows:auto auto auto}
.row--reco .rec{grid-column:1/-1;grid-row:1;margin-bottom:.2em;
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--svh-dim)}
.row--reco .n,.row--reco .lead,.row--reco .v{grid-row:2}
.row--reco .d{grid-row:3}

/* Fila sin cifra. Sin valor a la derecha, la guía de puntos se queda sin
   trabajo: unía el nombre con el precio. Se va con él, y la fila queda como
   lo que es — un nombre y lo que incluye. */
.row.sin-cifra{grid-template-columns:1fr}
/* El resultado que compra el dueño, colgado del nombre del paquete: en
   itálica y a menor cuerpo, para que se lea como aclaración y no compita
   con el nombre. El eje del nivel es lo que consigue, no cuántas páginas. */
.row.sin-cifra .n em{font-style:italic;font-size:var(--t-matiz);letter-spacing:0;
  color:var(--svh-dim);white-space:nowrap}
.row.sin-cifra .n{grid-column:1;white-space:normal}
.row.sin-cifra .d{grid-column:1;grid-row:2}
.row.sin-cifra.row--reco .rec{grid-column:1;grid-row:1}
.row.sin-cifra.row--reco .n{grid-row:2}
.row.sin-cifra.row--reco .d{grid-row:3}

/* Apiladas, con la descripción a todo el ancho de la columna. La medida
   larga no estorba porque estas descripciones son de uno o dos renglones,
   no párrafos: el tope de 58ch existe para texto corrido, no para esto. */
.row.sin-cifra .d{max-width:none}

/* fila de texto llano — "Cómo funciona" */
/* UN SOLO NOMBRE DE FILA. Sin excepciones de fuente ni de tamaño.

   Antes "Cómo funciona" iba en sans a 21px y era la única sección distinta.
   Probé un tamaño intermedio y quedó peor: ligeramente distinto se lee como
   error, deliberadamente distinto se lee como sistema, y aquí no había
   razón para lo segundo. La dirección se llama Índice, así que todo es una
   fila y todas las filas se ven igual.

   Lo que sí varía sigue una regla dicha: la guía de puntos y el valor van
   juntos —o están los dos o no está ninguno—, y el valor va en serif si es
   una acción y en versalitas si es un dato. */
.row.plain .n{white-space:normal}


/* ── 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)}

/* EL COLOR DEL CLIENTE, VISIBLE EN REPOSO.

   Sólo las filas de Trabajo llevan tick, y sólo ellas tienen color. Con eso
   se distinguen de las otras doce sin cambiar de fuente ni de tamaño —una
   diferencia de un píxel se lee como error, ésta se lee como sistema— y el
   motivo queda legible sin explicarlo: cada una pertenece a alguien.

   De paso la idea del sitio deja de activarse sólo al tocar. El índice es
   tinta sobre papel salvo tres slivers de oxblood, azul y olive: el estudio
   no tiene color, el color lo ponen los clientes, y ahora se ve desde que
   abres la página.

   El hover ya no hace aparecer el tick de la nada: lo engorda y lo estira. */
.row{position:relative}
/* --tick: cuando el color del lugar es casi tinta (El Algo es madera), el
   tick y el hover toman el acento de su marca; el capítulo abierto sigue
   siendo del color del lugar. */
.row::before{content:"";position:absolute;top:.6em;bottom:.6em;
  left:calc(-1 * clamp(.5rem,2vw,1rem));width:2px;background:var(--tick,var(--lugar));
  transform:scaleY(0);transform-origin:center top;
  transition:transform var(--motion-fast),width var(--motion-fast)}
button.row[aria-controls]::before{transform:scaleY(1)}
button.row:hover::before,a.row:hover::before,
button.row:focus-visible::before,a.row:focus-visible::before{transform:scaleY(1)}
button.row[aria-controls]:hover::before,
button.row[aria-controls]:focus-visible::before{width:4px}

button.row:not([aria-expanded="true"]):not(.armada):hover,a.row:hover{background:color-mix(in oklab, var(--lugar) 6%, transparent)}
button.row:hover .lead,a.row:hover .lead{border-bottom-color:var(--svh-guia-viva)}
button.row:not([aria-expanded="true"]):not(.armada):hover .n,a.row:hover .n{color:var(--tick,var(--lugar))}
.row .n,.row .lead{transition:color var(--motion-fast),border-color var(--motion-fast)}

/* El sitio tiene dos anchos y sólo dos: la columna y la pantalla.
   Cerrada, la fila pertenece al índice y mide la columna. Abierta, el
   proyecto SALE del índice: la barra se va a pantalla completa y arrastra
   la fotografía con ella. Barra y foto son una sola masa; el texto de
   adentro sigue colgando del eje del índice, así que nada se desalinea y
   la barra tiene aire propio. */
button.row.armada,
button.row[aria-expanded="true"]{
  background:var(--lugar);color:var(--svh-on-tint);border-bottom-color:transparent;
  width:100vw;margin-inline:calc(50% - 50vw);
  padding:clamp(1rem,3.2vw,2rem) var(--edge);
}
button.row.armada::before,
button.row[aria-expanded="true"]::before{display:none}
button.row.armada .d,button.row.armada .v,
button.row[aria-expanded="true"] .d,
button.row[aria-expanded="true"] .v{color:var(--svh-on-tint-soft)}
button.row[aria-expanded="true"] .v{border-bottom-color:var(--svh-on-tint-soft)}
button.row[aria-expanded="true"] .lead{border-bottom-color:var(--svh-on-tint-soft)}

/* El único movimiento del sitio.

   NO se anima la altura. Animar grid-template-rows obliga al navegador a
   rehacer la maquetación de todo el documento en cada cuadro, con dos mil
   píxeles de contenido adentro — en un celular eso tartamudea siempre, y
   el salto de dos mil píxeles en medio segundo es violento de por sí.

   En su lugar el capítulo aparece de una vez, en una sola pasada de layout,
   con la fila ya anclada arriba por el scroll: nada de lo que el ojo está
   mirando se mueve. Lo que se anima es sólo opacidad y escala, que corren
   en el compositor y no tocan el layout. Dos velocidades encimadas: el
   capítulo entra en .52s, la foto se asienta en 1.1s.

   Sin JS el panel queda abierto y el contenido es alcanzable; el script le
   pone [hidden] al cargar. */
.panel{width:100vw;margin-inline:calc(50% - 50vw);
  animation:capitulo-entra var(--motion) both}
.panel[hidden]{display:none}
.panel > .inner{padding-bottom:clamp(3rem,9vw,6rem)}

@keyframes capitulo-entra{from{opacity:0}to{opacity:1}}
@keyframes foto-asienta{from{transform:scale(1.05)}to{transform:scale(1)}}

/* El telón vertical. La altura NO se anima —eso rehace la maquetación de
   todo el documento en cada cuadro y tartamudea—, así que el despliegue se
   finge recortando: la foto se descubre de arriba hacia abajo con
   clip-path, que es pintura y no toca el layout. El panel ya está a su
   alto final desde el primer cuadro; lo que se mueve es el recorte. */
@keyframes telon{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes detalle-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* El cierre es el mismo telón al revés, más corto: abrir invita, cerrar
   resuelve. El texto se va primero —está abajo, es lo primero que sobra— y
   el recorte sube detrás tapando la foto. Cuando termina, el panel se
   oculta; para entonces la fila ya está pegada arriba y el desplome de
   cuatro mil píxeles ocurre fuera de pantalla. */
.panel.cerrando .detail{animation:detalle-baja calc(var(--motion-cierre) * .62) both}
.panel.cerrando .open{animation:telon-cierra var(--motion-cierre) both}
.panel.cerrando .cierre{animation:detalle-baja calc(var(--motion-cierre) * .5) both}
@keyframes telon-cierra{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes detalle-baja{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px)}}

/* La foto del lugar. Lo único que sangra en todo el sitio.
   Capas en orden de pintado, sin z-index negativos: foto → velo → texto. */
.open{
  margin:0;position:relative;overflow:hidden;
  animation:telon var(--motion-telon) both;
  min-height:clamp(19rem,68vh,42rem);
  min-height:clamp(19rem,68svh,42rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(3rem,9vw,6rem) var(--edge) clamp(2rem,5vw,3.25rem);
  color:var(--svh-on-tint);background:var(--lugar);
}
.open picture,.open img{position:absolute;inset:0}
.open img{width:100%;height:100%;object-fit:cover;
  animation:foto-asienta var(--motion-lento) .04s both}
.open::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(var(--velo,6,10,6), var(--velo-fuerza,.72)) 0%,
    rgba(var(--velo,6,10,6), calc(var(--velo-fuerza,.72) * .3)) 34%,
    rgba(var(--velo,6,10,6), 0) 62%)}
/* Sin wordmark encima. La barra ya dijo el nombre ochenta píxeles arriba;
   repetirlo a 136px era adorno de diseñadora. La foto es la foto. */
.open .cp{position:relative;z-index:1;
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--pie-foto,rgba(242,239,234,.86))}

/* Celita no tiene foto del lugar: abre con la taza de su sitio, a escala,
   sobre su beige. Sin velo —no hay foto que oscurecer— y el pie va en su
   negro. La taza se sirve cada vez que el capítulo se abre: el panel pasa
   de display:none a visible y eso reinicia las animaciones, sin JS. Mismos
   tiempos que celita.mx: 1.4s de servir, vapor a los 250ms de llenarse. */
.open--taza{background:#E6D9C0;--velo-fuerza:0;--pie-foto:rgba(12,8,3,.72);align-items:center}
.open--taza .cp{text-align:center}
.taza{position:absolute;left:50%;top:44%;translate:-50% -50%;
  height:min(72%,30rem);width:auto;overflow:visible;color:#0C0803}
.taza__brush{fill:currentColor}
.taza__coffee{fill:#896545}
.taza__ring{fill:#3969AD}   /* el aro de la taza va en Azul, como en celita.mx */
.taza__crema{fill:none;stroke:#E6D9C0;stroke-width:.8;stroke-linecap:round;opacity:.75}
.taza__cafe{transform:translateY(20.5px);animation:taza-sirve 1.4s cubic-bezier(.33,1,.68,1) .9s both}
.taza__stream{stroke:#896545;stroke-width:1.3;stroke-linecap:round;opacity:0;
  animation:taza-chorro 1.6s linear .8s both}
.taza__steam{opacity:0;animation:taza-vapor 1.2s cubic-bezier(.22,1,.36,1) 2.55s both}
.taza__aire{animation:taza-vaiven 7s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.taza__wisp{fill:none;stroke:currentColor;stroke-linecap:round;stroke-dasharray:17 13;opacity:.5}
.taza__wisp--a{stroke-width:1.6;animation:taza-fluye 4.2s linear infinite}
.taza__wisp--b{stroke-width:2.1;animation:taza-fluye 5.1s linear infinite -1.7s;opacity:.55}
.taza__wisp--c{stroke-width:1.4;animation:taza-fluye 4.6s linear infinite -3.1s;opacity:.4}
@keyframes taza-sirve{from{transform:translateY(20.5px)}to{transform:translateY(16.6px)}}
@keyframes taza-chorro{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
@keyframes taza-vapor{from{opacity:0}to{opacity:1}}
@keyframes taza-fluye{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes taza-vaiven{
  0%,100%{transform:translateX(0) skewX(0deg)}
  35%{transform:translateX(.7px) skewX(-3deg)}
  70%{transform:translateX(-.5px) skewX(2deg)}}
@media (prefers-reduced-motion:reduce){
  /* taza llena y vapor quieto, como en celita.mx */
  .taza__aire,.taza__wisp{animation:none!important}
  .taza__wisp{stroke-dasharray:none}
  .taza__cafe,.taza__stream,.taza__steam{animation-delay:0s!important}
}

/* detalle del lugar, ya dentro del papel */
.detail{padding:clamp(2.25rem,6vw,3.75rem) var(--edge) 0;
  animation:detalle-sube var(--motion) var(--retraso-detalle) both}
/* El título del capítulo estaba a 40px contra 44 del nombre de fila, y en
   móvil a 24 contra 23: un píxel de diferencia se lee como error. Sube un
   escalón completo, que además es lo que le toca — encabeza un capítulo,
   no es una entrada de lista. */
.detail h3{margin:0;font-family:var(--svh-serif);font-weight:400;
  font-size:var(--t-capitulo);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);text-wrap:pretty}
/* Cada entregable sobre su propio filete: es una hoja de especificación y
   reusa el filete del índice. Las versalitas separadas por punto medio son
   el recurso por defecto de todo portafolio de estudio. */
.detail .hizo{display:grid;grid-template-columns:1fr;gap:0 clamp(1.5rem,4vw,3rem);
  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:var(--lh-snug)}
@media (min-width:560px){.detail .hizo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.detail .hizo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.detail .hizo li{padding:.7em 0;border-top:1px solid var(--svh-rule)}
/* 44px de alto real sin mover el ritmo óptico: el relleno se compensa
   con margen negativo, así el subrayado sigue donde estaba. */
.detail .visita{display:inline-flex;align-items:center;min-height:var(--touch);
  padding-block:.5rem;margin-block:calc(clamp(1.75rem,5vw,2.75rem) - .5rem) -.5rem;
  font-size:var(--t-body);font-weight:600;letter-spacing:.01em;
  text-decoration:underline;text-underline-offset:.34em;text-decoration-thickness:1px;
  text-decoration-color:var(--svh-subraya);
  transition:text-decoration-color var(--motion-fast)}
.detail .visita:hover{text-decoration-color:var(--svh-ink)}
.detail .visita .fl{display:inline-block;margin-left:.3em;
  transition:transform var(--motion-fast)}
.detail .visita:hover .fl{transform:translate(2px,-2px)}

/* El sitio del cliente, a sangre y sin marco de dispositivo.

   Faltaba lo más importante: se abría un capítulo y no se veía un solo
   sitio web —sólo fotos del lugar— así que el trabajo no se podía juzgar
   y los capítulos se leían como más de svh.studio. Aquí el visitante ve
   el rosa de Madrizza y el oxblood de Jabalí, y entiende de un golpe que
   ella no impone su estilo. Un mockup de laptop sobre gris haría lo
   contrario: es el delator de plantilla número uno. */
.pantalla{margin:clamp(2rem,6vw,3.5rem) 0 0;position:relative;
  width:100vw;margin-inline:calc(50% - 50vw)}
.pantalla img{width:100%;height:auto;display:block}
.pantalla .cp{display:block;padding:var(--s3) var(--edge) 0;
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--svh-dim)}

/* ── pie ──────────────────────────────────────────────────────────────── */
/* Un proyecto abierto es un capítulo: abre con una barra del color del lugar
   y cierra con su gemela. Sin ese cierre no se sabe dónde termina, y el
   índice de abajo parece parte del proyecto. */
.cierre{
  display:flex;align-items:baseline;justify-content:flex-end;gap:var(--s4) var(--s6);
  flex-wrap:wrap;width:100%;margin-top:clamp(3rem,8vw,5.5rem);
  padding:clamp(1rem,3.2vw,2rem) var(--edge);
  background:var(--lugar);color:var(--svh-on-tint)}
/* 44px de alto real en los dos controles, con margen negativo que devuelve
   el ritmo óptico de la barra. Medían 35 y 26px. */
.cierre button,.cierre a{background:none;border:0;font:inherit;color:inherit;
  display:inline-flex;align-items:center;min-height:var(--touch);padding:0;margin-block:-.5rem;
  cursor:pointer;text-decoration:none;transition:color var(--motion-fast)}
.cierre button:hover,.cierre a:hover{color:var(--svh-on-tint)}
.cierre .et{font-family:var(--svh-serif);font-size:var(--t-value);
  line-height:var(--lh-tight);letter-spacing:var(--ls-row);color:var(--svh-on-tint)}
.cierre .de{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.cierre .fl{display:inline-block;margin-left:.35em;font-size:.75em;
  transition:transform var(--motion-fast)}
.cierre button:hover .fl{transform:translateY(-3px)}
.cierre a:hover .fl{transform:translateY(3px)}
.cierre button:focus-visible,.cierre a:focus-visible{
  outline:2px solid var(--svh-on-tint);outline-offset:4px}

/* El último renglón de la página es la dirección de correo, puesta como
   el nombre de una fila. No hay botón: la acción es leer una línea y
   escribirla. Por eso pesa más que cualquier otra fila del índice. */
/* Dos salidas, no una. El mailto falla en silencio cuando el navegador no
   tiene manejador de correo: la pestaña se queda en blanco y la única
   llamada a la acción del sitio se pierde. Así que la dirección se comporta
   como dirección —se copia— y el verbo se comporta como acción —abre el
   correo—. Cada uno hace lo que su nombre promete. */
.row--cta{padding-block:clamp(1.25rem,4vw,2.25rem)}
.row--cta .copiar{background:none;border:0;padding:0;margin:0;color:inherit;
  cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;min-height:var(--touch);
  transition:opacity var(--motion-fast)}
.row--cta .copiar:hover{opacity:.58}
.row--cta .copiar[data-hecho]{color:var(--svh-dim)}
.row--cta .v.act{display:inline-flex;align-items:center;min-height:var(--touch);
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;
  text-decoration-color:var(--svh-subraya);transition:text-decoration-color var(--motion-fast)}
.row--cta .v.act:hover{text-decoration-color:var(--svh-ink)}
.row--cta .n{font-size:var(--t-row)}
a.row--cta:hover .n{text-decoration:none}
a.row--cta .v.act .fl{transition:transform var(--motion-fast)}
a.row--cta:hover .v.act .fl{transform:translate(2px,-2px)}

/* Ritmo por peso, no un solo valor: la prueba y el precio respiran igual,
   la letra chica va más apretada, y el cierre pide el doble de aire. */
/* "Se agrega" respira menos que los demás a propósito: pertenece al grupo
   de arriba y el aire corto los une sin necesidad de decirlo. */
.grp:nth-of-type(3){margin-top:clamp(1.75rem,5vw,3rem)}
.grp:last-of-type{margin-top:clamp(3.5rem,11vw,6.5rem)}
.grp[id]{scroll-margin-top:clamp(1rem,4vw,2.5rem)}

/* Colofón. Lo último que se ve, con el mismo filete de 1.5px que abre cada
   grupo del índice, no dos spans a 13px en un flex sin decidir. */
.colofon{margin-top:clamp(3.5rem,11vw,6.5rem);padding-top:clamp(1rem,2.5vw,1.5rem);
  border-top:2px solid var(--svh-rule-hard);display:grid;gap:var(--s4) var(--s8)}
@media (min-width:640px){.colofon{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}}
.colofon .frase{margin:0;font-family:var(--svh-serif);font-size:var(--t-value);
  line-height:1.28;letter-spacing:-.01em;max-width:34ch;color:var(--svh-ink);text-wrap:balance}
.colofon .dom{margin:0;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--svh-dim);justify-self:start}
@media (min-width:640px){.colofon .dom{justify-self:end}}

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