/* =============================================
   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;
}

/* Solo para la firma de la carta de Josie, al final de la guía. */
@font-face {
  font-family: 'Karstar';
  src: url('/bodas/patsyjuanma/assets/fonts/Karstar_Free.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 de Josie ──────────────────────────────────────────────── */

/*
   Cada consejo de Josie es una píldora entre la bajada de su zona y las cards:
   el sello "JT" y el texto entero, siempre a la vista. El sello es la forma
   dentada de estampa-josie.svg usada como máscara, con el monograma jt.svg
   encima.
*/
.tip { margin-bottom: 22px; }

/* El fondo crema va en un ::before y no en la píldora: así se puede estirar
   solo el fondo (ver la animación, más abajo) sin recortar la estampita. */
.tip__pildora {
  --radio: 999px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px 12px 14px;
  border-radius: var(--radio);
}

.tip__pildora::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radio);
  background-color: var(--papel);
}

.tip__sello {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background-color: var(--color-wine);
  -webkit-mask: url('/bodas/patsyjuanma/assets/guia/estampa-josie.svg?v=1') center / contain no-repeat;
          mask: url('/bodas/patsyjuanma/assets/guia/estampa-josie.svg?v=1') center / contain no-repeat;
}

/* El monograma (jt.svg) ya viene en crema: va centrado sobre el sello. */
.tip__sello img {
  width: 55%;
  height: auto;
}

.tip__texto {
  font-family: var(--font-inter);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-wine);
}

.tip__texto strong { font-weight: 600; }

/* La entrada: la primera vez que un tip aparece en pantalla arranca como la
   estampita sola, más grande; gira y se achica mientras el fondo crema se
   estira hacia la derecha y el texto se va descubriendo detrás. El estado
   "cerrado" solo existe con `data-anima`, que pone el JS: sin JavaScript, o
   con las animaciones apagadas, la píldora se ve abierta desde el principio. */
.tip[data-anima] .tip__pildora::before,
.tip[data-anima] .tip__texto {
  transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.25s;
}

/* El fondo se recorta con las puntas redondas de la píldora; el texto, con un
   rectángulo apenas más grande que él: con puntas redondas se comía las
   esquinas del primer y del último renglón. */
.tip[data-anima] .tip__pildora::before { clip-path: inset(0 100% 0 0 round var(--radio)); }
.tip[data-anima] .tip__texto { clip-path: inset(-6px 100% -6px 0); }

.tip[data-anima] .tip__sello {
  transform: scale(1.5) rotate(-200deg);
  transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.tip[data-anima].tip--abierto .tip__pildora::before { clip-path: inset(0 0 0 0 round var(--radio)); }
.tip[data-anima].tip--abierto .tip__texto { clip-path: inset(-6px -6px -6px 0); }

.tip[data-anima].tip--abierto .tip__sello { transform: none; }

/* En las zonas sin título propio ("Más allá del vino", "Cómo moverse") la
   cabecera es solo la fila de las flechas: la píldora ocupa ese lugar vacío,
   a la izquierda de las flechas, en vez de dejar un renglón hueco encima. */
.zona__cabecera:has(> .tip) { align-items: center; }
.zona__cabecera > .tip { flex: 1; max-width: none; margin: 0; padding: 0; }

/* En el teléfono el texto ocupa varios renglones: una píldora de puntas
   redondas del todo se vería como una cápsula inflada. */
@media (max-width: 720px) {
  .tip__pildora { --radio: 22px; align-items: flex-start; padding: 14px 18px 14px 12px; }
  .tip__sello { width: 36px; height: 36px; }
  .tip__texto { font-size: 0.9rem; }

  /* No entran lado a lado: la píldora arriba, las flechas debajo, a la
     derecha, pegadas a las cards. */
  .zona__cabecera:has(> .tip) { flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
  .zona__cabecera > .tip { flex-basis: 100%; }
}

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


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


/* El cuerpo entero (montañas + texto + volver) va sobre una franja de ancho
   completo: cielo arriba, y abajo el mismo crema que el relleno de las
   montañas, así no hay salto de color donde el dibujo termina y sigue el texto.
   `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(80px, 10vw, 140px);
}

/* El cierre es lo último de la página: el crema llega hasta el fondo. Sin
   esto, el margen de abajo de `.cuerpo` dejaba una franja beige debajo. */
.cuerpo:has(> .cierre:last-child) { padding-bottom: 0; }

/* Detrás de las montañas se ve el fondo de la página: la franja crema
   arranca recién donde el relleno de las montañas ya tapa todo el ancho
   (~85% del alto del dibujo, debajo del valle más hondo), así que el corte
   nunca se ve como una línea. */
.cierre__cuerpo::before {
  --alto-montanas: calc(100vw * 652 / 2006);
  content: '';
  position: absolute;
  top: calc(var(--alto-montanas) * 0.85);
  left: 50%;
  width: 100vw;
  bottom: 0;
  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;
}

/* La carta y, debajo, el botón de volver. */
.cierre__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  /* El dibujo trae crema de sobra abajo: la carta sube hasta quedar a un
     respiro de los valles. */
  margin: clamp(-170px, -11vw, -40px) auto 0;
}

/* Una tarjeta del violeta del sitio, con sombra y torcida un grado: se lee
   como una hoja apoyada, no como un recuadro. El texto va alineado a la
   izquierda, como se escribe una carta. */
.carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  width: 100%;
  padding: clamp(28px, 5vw, 52px) clamp(24px, 5.5vw, 60px) clamp(28px, 4.5vw, 44px);
  background-color: var(--color-wine);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(72, 41, 39, 0.10), 0 14px 36px rgba(72, 41, 39, 0.18);
  transform: rotate(-1deg);
  text-align: left;
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 0.95rem; /* el mismo que el botón de volver */
  line-height: 1.5;
  /* El mismo claro del fondo de la página, como el texto del botón de volver. */
  color: var(--color-bg);
}

/* Los renglones van cortados a mano, como en el diseño. En el teléfono no
   entran: los cortes se apagan y el texto se acomoda solo. */
@media (max-width: 720px) {
  .carta br.corte { display: none; }
}

.carta__despedida {
  margin-top: 0.4em;
  font-weight: 600;
}

/* La firma, a mano. Pegada a la despedida, como se firma debajo. */
.carta__firma {
  margin-top: 0.2em;
  font-family: 'Karstar', var(--font-manuscrita);
  font-size: clamp(2.6rem, 5vw, 3.6rem); /* Karstar es muy bajita: a igual tamaño se ve la mitad */
  line-height: 0.62; /* dos renglones de firma, pegados: Karstar trae mucho aire propio */
}

/* Las copas, pegadas en la esquina de abajo a la derecha como una calcomanía:
   asoman afuera de la hoja. El archivo trae aire abajo y a la derecha, por eso
   se corren tanto. */
.carta__sticker {
  position: absolute;
  right: clamp(-150px, -9vw, -40px);
  bottom: clamp(-90px, -6vw, -50px);
  width: clamp(130px, 18vw, 240px);
  height: auto;
  transform: rotate(1deg);
  pointer-events: none;
}

.cierre__final .volver { margin-top: clamp(64px, 8vw, 88px); }

/* En el teléfono no hay margen a los costados: las copas asoman por abajo,
   no por el costado, así no empujan la página de lado. Va después de la
   regla de las copas para pisarla. */
@media (max-width: 720px) {
  .carta__sticker { right: -6px; }
}


.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);
}

/* 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: 48px;
  padding: 18px 40px;
  border-radius: 999px;
  background-color: var(--color-wine);
  color: var(--color-bg);
  font-family: var(--font-inter);
  font-weight: 300;
  font-size: 0.95rem;
  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; }
}