/* =============================================
   LA GUÍA MENDOCINA
   Los colores y las tipografías salen de estilos.css: es la misma boda. Acá
   vive solo lo que la invitación no tiene — carruseles, barra de secciones y
   texto largo para leer.
   ============================================= */

/* La birome de verdad: hasta ahora la anotación a mano usaba una cursiva
   cualquiera de Google Fonts porque no teníamos la fuente. Se sirve local
   porque no está en ningún catálogo web. */
@font-face {
  font-family: 'Biro Script Reduced';
  src: url('/bodas/patsyjuanma/assets/fonts/Biro_Script_reduced.ttf?v=1') format('truetype');
  font-display: swap;
}

:root {
  --papel:    #FFFBF5;   /* las cards, un tono por encima del fondo */
  --hueco:    #F2EAE0;   /* donde va la foto, hasta que llegue */
  --barra:    96px;      /* alto de la barra de secciones, con su aire */
  --ancho:    1560px;    /* en pantallas grandes 1200 dejaba demasiado hueco */
  --margen:   clamp(24px, 7.5vw, 140px);   /* el aire de la invitación */

  /* Biro es lapicera: la anotación a mano de Josie va en una birome. Si por lo
     que sea la fuente no carga, cae en la cursiva de Google que había antes. */
  --font-manuscrita: 'Biro Script Reduced', 'Nothing You Could Do', 'Bradley Hand', cursive;
}

.guia { background-color: var(--color-bg); }


/* ── La barra de secciones ────────────────────────────────────────────────── */

/* Sin fondo: lo único opaco es la pastilla, y la página se ve pasar por
   detrás. Con fondo, la franja de 16px de arriba y de abajo se comía el
   contenido que venía subiendo. */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 16px;
  pointer-events: none;   /* el hueco alrededor de la pastilla no debe tapar
                             lo que hay abajo */
}

.barra__pastilla { pointer-events: auto; }

/* El fondo de la barra va de lado a lado, pero la pastilla se alinea con el
   texto: el mismo max-width y el mismo margen que el resto de la página. Sin
   este marco la barra arrancaba a mitad de camino del título. */
.barra__marco {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.barra__pastilla {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 26px;
  border-radius: 999px;
  background-color: var(--papel);
  /* Con la barra transparente, el texto que pasa por detrás llega hasta el
     borde de la pastilla. La sombra es lo que la despega: sin ella, dos tonos
     casi iguales se confunden justo donde uno tapa al otro. */
  box-shadow: 0 2px 16px rgba(72, 41, 39, 0.08);
}

.barra__logo { flex: none; display: block; line-height: 0; }
.barra__logo img { height: 22px; width: auto; display: block; }

/* En el teléfono no entran seis chips: se deslizan. El `min-width: 0` es lo que
   permite que se deslicen en vez de empujar la barra más ancha que la pantalla:
   sin él, un ítem flex se niega a achicarse por debajo de su contenido. */
.barra__tira {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Los chips van a la derecha con un margen automático y no con
   `justify-content: flex-end`. Se ven igual mientras entran, pero cuando no
   entran el flex-end los desborda hacia la izquierda, donde no hay scroll que
   los alcance: quedaban cuatro de seis inaccesibles en un teléfono. El margen
   automático se rinde a cero cuando no sobra lugar, y ahí se deslizan. */
.chip:first-child { margin-left: auto; }


/* ── El menú de secciones del teléfono ────────────────────────────────────── */
/*
   Lo arma el JavaScript. En escritorio no existe; abajo de 720px reemplaza a
   la tira de chips, que ahí no entra: seis etiquetas suman 742px.
*/
.barra__actual { display: none; }

.secciones[hidden] { display: none; }

/* Arriba del corte la hoja no existe, ni siquiera abierta: si alguien agranda
   la ventana con el menú desplegado, se cierra sola. */
@media (min-width: 721px) { .secciones { display: none; } }

.secciones {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.secciones__velo {
  position: absolute;
  inset: 0;
  background-color: rgba(42, 26, 21, 0.35);
}

.secciones__lista {
  position: absolute;
  inset: auto 0 0;
  background-color: var(--papel);
  border-radius: 22px 22px 0 0;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.secciones__lista a {
  padding: 15px 18px;
  border-radius: 14px;
  font-family: var(--font-inter);
  font-size: 0.95rem;
  color: var(--color-wine);
  text-decoration: none;
}

.secciones__lista a:active { background-color: rgba(72, 41, 39, 0.07); }

/* La sección en la que estás, marcada con un punto a la izquierda. */
.secciones__actual {
  font-weight: 600;
  position: relative;
}

.secciones__actual::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background-color: var(--color-wine);
}

.barra__tira::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 9px 16px;
  border: 1px solid rgba(72, 41, 39, 0.25);
  border-radius: 999px;
  font-family: var(--font-inter);
  font-size: 0.82rem;
  color: var(--color-wine);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover { background-color: rgba(72, 41, 39, 0.06); }

.chip--activo {
  background-color: var(--color-wine);
  border-color: var(--color-wine);
  color: var(--papel);
  font-weight: 600;
}

/* Que la barra no tape el título de la sección a la que saltaste: sin esto el
   salto aterriza con el encabezado escondido detrás. */
.seccion { scroll-margin-top: calc(var(--barra) + 24px); }
html { scroll-padding-top: calc(var(--barra) + 24px); }


/* ── La portada ───────────────────────────────────────────────────────────── */

/*
   La portada entra en una pantalla y queda centrada. Para eso el tamaño no
   puede depender solo del ancho: en un monitor ancho y bajo, una columna de
   1300px da un título que no entra a lo alto.

   `--columna` es el ancho del que cuelgan todas las piezas, y sale del menor
   de dos números: lo que permite el ancho, y lo que permite el alto. El
   segundo se despeja de que el conjunto mide 0,65 de la columna —el lockup
   0,24 más la composición 0,45 menos el 0,04 que se montan— y tiene que
   entrar en la pantalla menos la barra y el aire de arriba y abajo.
*/
.portada {
  --columna: min(100%, calc(147vh - 350px));

  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(30px, 5vh, 70px) var(--margen);

  min-height: calc(100svh - var(--barra));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Cuando el alto es el que manda, la columna sale más angosta que el espacio
   disponible. Este margen reparte lo que sobra entre los dos lados en vez de
   dejarlo todo a la derecha, y como es el mismo para el título y para el
   cuerpo, los dos siguen arrancando en la misma línea. */
.portada__titulo,
.portada__cuerpo { margin-left: calc((100% - var(--columna)) / 2); }

/* El título va suelto arriba, a todo el ancho; el cuerpo es lo que se parte en
   dos columnas. La estampilla sube y se monta sobre el final del título. */
.portada__cuerpo {
  width: var(--columna);
  display: flex;
  align-items: flex-start;
}

.portada__texto { flex: 1; min-width: 0; }

/* En proporción a la columna, no en píxeles: así el lockup y la composición
   se achican juntos cuando la pantalla achica. */
.portada__titulo { width: calc(var(--columna) * 0.864); min-width: 280px; height: auto; display: block; }
.portada__titulo + .portada__titulo-texto { display: none; }

/* El respaldo tipeado del título dibujado. No es la tipografía de la boda —es
   lo que se ve si el SVG no está—, pero respeta el escalón de tamaños. */
.portada__titulo-texto {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-style: italic;
  line-height: 1.1;
  color: var(--color-wine);
}

.portada__titulo-texto span {
  display: block;
  font-style: normal;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Los dos párrafos comparten ancho: cortan solos por el largo de línea, sin
   saltos escritos a mano. Un <br /> fijo alcanza para una pantalla y deja una
   palabra huérfana en todas las demás.
   El tamaño es el mismo que el de las bajadas de sección: son el mismo tipo de
   texto y no hay razón para que la portada tenga una escala propia. */
.portada__bajada,
.portada__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(42, 26, 21, 0.75);
  /* Dos topes: 47 caracteres, que es el corte de línea del diseño, y un 84% de
     la columna. El segundo es el que importa en pantallas medianas, donde la
     columna se angosta pero los caracteres no: sin él, el renglón más largo
     termina metido debajo del círculo. */
  max-width: min(47ch, 84%);
}

.portada__bajada { margin-top: clamp(26px, 4vw, 65px); }
.portada__intro  { margin-top: 1.55em; }


/* ── La composición de Josie ──────────────────────────────────────────────── */
/*
   Tres capas apiladas dentro de una caja: la rama al fondo, el sello en el
   medio y la estampilla encima, tapando a los otros dos. La estampilla queda
   en el flujo —es la que define el alto de la caja— y las otras dos se
   posicionan en porcentajes sobre ella, para que el conjunto entero se achique
   junto sin retocar tres medidas.
*/
.josie {
  flex: none;
  position: relative;
  width: 58%;
  min-width: 300px;
  /* Se mete por delante de la columna de texto en vez de dejarle un hueco: en
     el diseño el círculo empieza antes de que termine el párrafo más largo, y
     no chocan porque no coinciden en altura. */
  margin-left: -6.5%;
  /* Los dos porcentajes son del ancho de la columna —así se comporta un margen
     en porcentaje, incluso el de arriba— y por eso todo escala junto. */
  margin-top: -4%;
}

/* "According to the Tupungato cousin" es más largo que "según la prima
   tupungatina": con el mismo corrimiento, el sello de Casa Viña le pisa la
   última línea. Sube menos, nada más, para esta versión. */
html[lang="en"] .josie {
  margin-top: 3%;
}

.josie__foto {
  position: relative;
  z-index: 2;
  width: 69.5%;
  margin-left: 18%;
  transform: rotate(5deg);   /* la estampilla viene derecha; la inclina el CSS */
}

.josie__sello {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 4%;
  width: 27.7%;
}

.josie__rama {
  position: absolute;
  z-index: 0;
  left: 62%;
  top: 24%;
  width: 38%;
  height: auto;
}

.josie__foto img { width: 100%; height: auto; display: block; }

/* Sin la foto queda el recuadro punteado: se ve que falta algo, no un hueco
   silencioso. */
.josie__foto--vacia {
  aspect-ratio: 5 / 6;
  border: 1.5px dashed rgba(72, 41, 39, 0.35);
  border-radius: 6px;
  background-color: var(--hueco);
}

.josie__sello {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Los porcentajes de padding se miden contra el ancho del contenedor, no
     contra el propio: este 4% deja el logo en un 71% del círculo, como en el
     diseño, y lo aparta del borde de la estampilla que lo tapa. */
  padding: 4%;
}

.josie__sello img { width: 100%; height: auto; display: block; }

.josie__sello--vacio::after {
  content: 'CASA VIÑA';
  font-family: var(--font-inter);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--color-wine);
  opacity: 0.45;
}

/* La credencial ahora vive en la columna de texto, debajo de los párrafos. */
.josie__credencial { margin-top: clamp(28px, 3vw, 44px); }

.josie__nombre {
  font-family: var(--font-inter);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-wine);
}

.josie__que {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-wine);
  opacity: 0.8;
  margin-top: 4px;
}

.josie__que a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.josie__que a:hover { opacity: 0.6; }


/* ── Las secciones ────────────────────────────────────────────────────────── */

.cuerpo {
  padding-bottom: 120px;
  overflow-x: clip;   /* lo que asoma de las ilustraciones se corta acá */
}

.seccion { padding: clamp(46px, 7vw, 76px) 0; }
.seccion + .seccion { border-top: 1px solid rgba(72, 41, 39, 0.12); }

/* La cabecera y los textos respetan el margen; los carruseles no, a propósito. */
.seccion__cabecera,
.zona__cabecera,
.tip {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion__titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--color-wine);
}

/* El dibujo reemplaza al texto escrito, no lo acompaña: si está, el escrito se
   esconde; si el archivo falta, el `onerror` lo saca y queda el escrito. */
/* Se mide por el alto, no por el ancho: los seis títulos tienen largos muy
   distintos —de "Bodegas" a "Más allá del vino"— y fijando el ancho el más
   largo saldría con la letra chiquita y el más corto gigante. Con el alto
   fijo, los seis se ven del mismo tamaño. */
.seccion__dibujo {
  /* El alto es del lienzo, no de la letra: los seis lienzos incluyen el aire
     del acento —a los dos que no llevan tilde se les agregó a mano— así que la
     letra sale al 77% de este número. 53 × 0.77 = 41px de mayúscula. */
  height: clamp(34px, 3.1vw, 53px);
  width: auto;
  display: block;
}

.seccion__dibujo + .seccion__escrito { display: none; }

.seccion__bajada {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(42, 26, 21, 0.75);
  max-width: 60ch;
  margin-top: 10px;
}

.zona { margin-top: clamp(32px, 5vw, 48px); }

.zona__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

/* El mismo eyebrow que los eventos de la invitación: es el mismo rol —el
   rótulo chico que encabeza un bloque— y no tiene por qué tener otra letra. */
.zona__titulo {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-wine);
}

.zona__titulo--chico { font-size: 0.8rem; }

.zona__bajada {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(42, 26, 21, 0.7);
  max-width: 62ch;
  margin-top: 4px;
}

.flechas { display: flex; gap: 10px; flex: none; }

.flecha {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(72, 41, 39, 0.3);
  background: none;
  color: var(--color-wine);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.flecha:hover { background-color: rgba(72, 41, 39, 0.07); }
.flecha[disabled] { opacity: 0.3; cursor: default; }


/* ── El carrusel ──────────────────────────────────────────────────────────── */

/* Arranca alineado con el título y se va hasta el borde de la pantalla: ese
   recorte a la derecha es lo que dice "esto sigue" sin ningún cartel. */
.tira {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  padding-bottom: 6px;

  /* Sin imán a propósito. Con `scroll-snap` el navegador pegaba la primera card
     contra el borde de la pantalla al cargar, comiéndose la sangría que la
     alinea con el título — y `scroll-padding` no lo arregla porque rechaza el
     mismo `max()` que usa el padding. Deslizar con el dedo o con las flechas
     funciona igual de bien sin él. */
}

.tira::-webkit-scrollbar { display: none; }

.lugar {
  flex: none;
  width: 282px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--papel);
  display: flex;
  flex-direction: column;
}

/* Mientras no haya fotos, el hueco es un tono por debajo del papel. Si fuera
   del mismo blanco, la card sería una sola mancha y no se entendería qué falta. */
.lugar__foto {
  height: 190px;
  background-color: var(--hueco);
  position: relative;
}

/* La foto tapa el cartel de «falta»: mientras no esté, el hueco se explica
   solo; cuando llega, no queda nada debajo. */
.lugar__foto img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lugar__foto::after {
  content: 'FOTO · falta';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-inter);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(72, 41, 39, 0.35);
}

.lugar__cuerpo {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.lugar__nombre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--color-wine);
}

.lugar__linea {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(42, 26, 21, 0.72);
  flex: 1;
}

.lugar__ir {
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 16px;
  border: 1px solid rgba(72, 41, 39, 0.3);
  border-radius: 999px;
  font-family: var(--font-inter);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-wine);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.lugar__ir:hover { background-color: rgba(72, 41, 39, 0.07); }


/* El número y el copiar, uno al lado del otro. El número reusa la pastilla de
   «Cómo llegar»: es la misma acción de card, con otro destino. */
.lugar__acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.lugar__acciones .lugar__ir { margin-top: 0; }

/* Más callado que el número: copiar es la salida de emergencia para quien está
   en una computadora, donde tocar para llamar no hace nada. */
.lugar__copiar {
  padding: 8px 12px;
  border: 0;
  background: none;
  border-radius: 999px;
  font-family: var(--font-inter);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-wine);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.lugar__copiar:hover { opacity: 1; background-color: rgba(72, 41, 39, 0.07); }
.lugar__copiar[data-hecho] { opacity: 1; font-weight: 600; }


/* ── Las anotaciones ──────────────────────────────────────────────────────── */

/*
   La voz de Josie no es información: es su voz, y por eso va escrita a mano,
   con la birome de verdad (ver --font-manuscrita). Es texto y no un dibujo
   porque las cuatro anotaciones tienen largos distintos y tienen que cortar
   solas en cada ancho de pantalla; un SVG traería los saltos de línea
   clavados.
*/
.tip {
  position: relative;
  display: block;
  margin-top: clamp(28px, 4vw, 40px);
}

/* Cada flecha apunta de la nota hacia lo que comenta — es un dibujo más, no
   parte de la nota, por eso no gira con ella. Las cuatro están afinadas a
   ojo contra su nota puntual, así que llevan su propia posición cada una. */
.tip__flecha {
  position: absolute;
  width: clamp(46px, 6vw, 72px);
  height: auto;
  pointer-events: none;
}

.tip__flecha--uco {
  top: -34px;
  left: calc(50% - 150px);
}

.tip__flecha--gardenia {
  top: -30px;
  left: calc(50% - 140px);
}

.tip__flecha--potrerillos {
  top: 10px;
  left: -64px;
}

.tip__flecha--victoria {
  top: -34px;
  right: calc(50% - 130px);
  transform: scaleX(-1);
}

@media (max-width: 720px) {
  .tip__flecha { display: none; }
}

/* El ancho y el centrado van en la nota, no en `.tip`: `.tip` comparte con
   las demás el padding del margen de página, y un max-width ahí se lo comía
   entero. El giro es el de un papelito pegado de apuro, no el de una regla —
   por eso es una nota, no dos, la que gira entera. */
.tip__nota {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  transform: rotate(-2deg);
}

/* ── Las ilustraciones de fondo ───────────────────────────────────────────── */
/*
   Grandes, en el tono más suave de la paleta, colgando de una sección hacia la
   de abajo y cortadas por el borde de la pantalla. Van detrás de todo y no
   reciben el mouse: son textura, no contenido.
*/
.fondo {
  position: absolute;
  z-index: 0;
  width: clamp(240px, 34vw, 600px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Lado y altura por separado: así una ilustración puede colgar hacia arriba,
   hacia abajo o quedarse en el medio sin duplicar reglas. */
.fondo--derecha   { right: -6%; }
.fondo--izquierda { left: -8%; }
/* El corrimiento es en porcentaje de la propia ilustración, no de la sección:
   un `top: -13%` da un asomo distinto en una sección alta que en una baja, y
   la idea es que siempre cruce la misma proporción de sí misma. */
.fondo--abajo     { bottom: 0; transform: translateY(38%); }
.fondo--arriba    { top: 0;    transform: translateY(-38%); }
.fondo--medio     { top: 50%;  transform: translateY(-50%); }

.seccion { position: relative; }

/* Lo demás pasa por encima: la ilustración nunca cruza un texto. */
.seccion > *:not(.fondo) { position: relative; z-index: 1; }


/* Dentro de la tira, al lado de las cards: ahí no lleva el margen de página
   —lo pone la tira— y se centra contra la altura de las cards. */
.tira > .tip {
  flex: none;
  align-self: center;
  max-width: none;
  margin: 0;
  padding: 0;
}

.tip__escrito {
  display: block;
  font-family: var(--font-manuscrita);
  font-size: 1.5rem;
  color: var(--color-wine);
  opacity: 0.75;
}

.tip__texto {
  font-family: var(--font-manuscrita);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-wine);
  opacity: 0.85;
  margin-top: 12px;
}




/* ── El cierre ────────────────────────────────────────────────────────────── */


/* El cuerpo entero (montañas + texto + volver) va sobre una franja crema de
   ancho completo — el mismo crema que el relleno de las montañas—, así no
   hay salto de color donde el dibujo termina y sigue el texto. La franja
   arranca justo en las montañas, no antes: el padding de `.cierre` sigue
   mostrando el fondo normal de la página.
   `isolation: isolate` es lo que evita que el `z-index: -1` del fondo se
   escape hacia afuera de este bloque: sin eso, terminaba pintándose detrás
   de otras secciones de la página en vez de quedarse solo detrás de esto. */
.cierre__cuerpo {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(40px, 6vw, 64px);
}

.cierre__cuerpo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background-color: var(--papel);
  z-index: -1;
}

.cierre__montanas {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  height: auto;
}

.cierre__escrito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin-top: clamp(-220px, -22vw, -100px);
  padding-bottom: clamp(40px, 6vw, 64px);
}

/* El sticker de las copas va a la derecha de la firma, sin pisarla nunca:
   `left: 100%` lo saca entero afuera del cajón de texto, sea cual sea su
   ancho, y el margen deja un respiro chico. En mobile se acomoda arriba,
   en el flujo normal, para no depender de que haya aire a los costados. */
.cierre__firma-grupo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cierre__sticker {
  position: absolute;
  width: clamp(200px, 24vw, 380px);
  height: auto;
  left: 100%;
  margin-left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-14deg);
  pointer-events: none;
}

@media (max-width: 720px) {
  .cierre__sticker {
    position: static;
    width: 200px;
    margin: 0 0 10px;
    transform: rotate(-14deg);
  }
}


.cierre {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(60px, 9vw, 100px) var(--margen) 0;
  text-align: center;
  border-top: 1px solid rgba(72, 41, 39, 0.12);
}

/* Las tres partes son la misma voz manuscrita, con la birome de Josie —antes
   esto era solo un respaldo por si el dibujo fallaba, y usaba la tipografía
   elegante de todo el sitio. Ahora se ve siempre, encima del dibujo, así que
   tiene que leerse como lo que es: una nota escrita a mano. */
.cierre__intro,
.cierre__poema,
.cierre__firma,
.cierre__quien {
  font-family: var(--font-manuscrita);
  color: var(--color-wine);
  max-width: 44ch;
}

.cierre__intro {
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.5;
}

.cierre__poema {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.55;
}

/* Misma jerarquía las dos: es una sola firma en dos renglones, no un texto
   principal con una aclaración chica abajo. */
.cierre__firma,
.cierre__quien {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
}

.cierre__quien {
  margin-top: 4px;
}

/* Vive acá abajo y no flotando: terminaste de leer, volvés. Arriba competía
   con el "Arriba" y aparecía cuando nadie se estaba yendo. */
.volver {
  display: inline-block;
  margin-top: 44px;
  padding: 16px 32px;
  border-radius: 999px;
  background-color: var(--color-wine);
  color: var(--color-bg);
  font-family: var(--font-inter);
  font-size: 0.86rem;
  text-decoration: none;
}


/* ── Arriba ───────────────────────────────────────────────────────────────── */

/* Mismo gesto que el indicador de scroll de la invitación: misma esquina,
   misma píldora, la flecha para el otro lado. */
.arriba {
  position: fixed;
  bottom: 36px;
  right: 48px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Aparece recién cuando hay algo de dónde volver. */
.arriba--visible { opacity: 1; pointer-events: auto; }

.arriba__pildora {
  width: 44px;
  height: 60px;
  border-radius: 999px;
  background-color: var(--color-wine);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arriba__texto {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--color-wine);
}


@media (max-width: 860px) {
  .portada { flex-direction: column; align-items: flex-start; }
  .josie { margin-top: 10px; }
  .zona__cabecera { align-items: center; }
  .lugar { width: 250px; }
  .arriba { bottom: 20px; right: 20px; }
  .arriba__texto { display: none; }

  /* Abajo de esto el logo se va. En un teléfono, saber en qué sección estás
     vale más que la marca —que además está en la invitación de la que venís—,
     y el logo mide 161px de los ~300 que tiene la pastilla. */
  @media (max-width: 720px) {
    .barra__logo { display: none; }
    .barra__pastilla { padding: 0 8px 0 18px; gap: 0; }

    /* El botón reemplaza a los chips: dice en qué sección estás y abre la
       lista. Sin JavaScript no hay botón y quedan los chips de siempre. */
    .barra--menu .barra__tira { display: none; }

    .barra--menu .barra__actual {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex: 1;
      height: 100%;
      padding: 0 8px;
      border: 0;
      background: none;
      font-family: var(--font-inter);
      font-size: 0.95rem;
      color: var(--color-wine);
      cursor: pointer;
    }

    .barra--menu .barra__actual svg {
      width: 20px;
      height: 20px;
      flex: none;
      transition: transform 0.2s ease;
    }

    .barra--abierta .barra__actual svg { transform: rotate(180deg); }
  }

  /* En el teléfono las dos columnas se apilan: primero el texto, después la
     composición. Y deja de montarse sobre el título, que ahí no sobra alto. */
  .portada {
    --columna: 100%;
    min-height: 0;
    padding-block: clamp(40px, 7vw, 70px);
  }

  .portada__cuerpo { flex-direction: column; }

  /* `display: contents` disuelve la columna de texto y deja a sus párrafos como
     hijos directos de la columna, que es lo que permite intercalar la
     composición entre ellos. Así la credencial cae debajo de la foto —primero
     el texto, después la estampilla, y recién ahí quién la firma— sin repetir
     el bloque en el HTML. */
  .portada__texto { display: contents; }
  .portada__bajada      { order: 1; }
  .portada__intro       { order: 2; }
  .josie                { order: 3; }
  .josie__credencial    { order: 4; }

  /* Corrida a la derecha: el sello va pegado al borde izquierdo de la caja, así
     que sin este margen queda tocando el borde de la pantalla. */
  .josie {
    width: 93%;
    margin-left: 7%;
    margin-top: 34px;
  }

  .josie__credencial { margin-top: 26px; }

  /* En el teléfono las ilustraciones no cuelgan fuera de la pantalla, así que
     no hace falta recortar nada. Y sin ese recorte el scroll vertical deja de
     depender de cómo Safari implementa `overflow: clip` en un elemento de seis
     mil píxeles de alto. */
  .cuerpo { overflow-x: visible; }
  .fondo--derecha   { right: 0; }
  .fondo--izquierda { left: 0; }
}