/* =============================================
   TOKENS
   ============================================= */
:root {
  --color-bg:         #ede3d6;
  --color-cream-dark: #e0d5c4;
  --color-wine:       #482927;
  --color-blue:       #b8d8ff;
  --color-text:       #2a1a15;

  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Jost', system-ui, sans-serif;
  --font-inter:  'Inter', system-ui, sans-serif;

  --color-events-blue: #114C77;

  --max-width:      1440px;
  --card-width:     1008px;
  --card-height:    370px;
  /* Escala con el ancho en vez de ser fijo: a 1440 da los 216px del diseño,
     y en un notebook más chico no se come media pantalla. */
  --hero-pad-x:     clamp(24px, 15vw, 216px);
  --hero-pad-top:   180px;
  --hero-pad-bot:   160px;

  --flip-duration:  0.9s;
  --flip-ease:      cubic-bezier(0.4, 0, 0.2, 1);

  --carousel-gap:   20px;
}


/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
}

img { display: block; max-width: 100%; }


/* =============================================
   BG DECORATIONS
   ============================================= */
.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* Solo de tablet para arriba: el dibujo está compuesto para pantalla ancha y
   en un celular se recortaría mal. Al ir por CSS, el celular ni lo descarga. */
@media (min-width: 769px) {
  .bg-layer {
    background-image: url('../assets/bg/bg-desktop.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
  }
}


/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  min-height: 100vh;
  padding: 60px var(--hero-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* -- Decorativos ------------------------------- */
.hero__deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero__deco--postmark {
  top: calc(50vh - 285px);
  left: 120px;
  width: 320px;
  transform: rotate(-9.3deg);
  transform-origin: center center;
}

.hero__deco--vineyard {
  /* Pegado al bottom-right del card:
     top del card = hero-pad-top (180px), card height = 370px → card bottom ≈ 520px
     la ilustración (246px) arranca ~290px desde arriba para solapar el borde inferior */
  top: calc(50vh + 85px);
  right: 108px;
  width: 196px;
  transform: rotate(8deg);
  transform-origin: center center;
  opacity: 0.75;
}

/* -- Flip wrapper ------------------------------ */
.hero__flipper-wrapper {
  width: 100%;
  max-width: var(--card-width);
  perspective: 1400px;
  position: relative;
  z-index: 1;
}

/* -- Flipper ----------------------------------- */
.hero__flipper {
  position: relative;
  width: 100%;
  aspect-ratio: 1008 / 370;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) var(--flip-ease);
  cursor: pointer;
}

/* El anillo va afuera de la tarjeta: sobre el 3D, un outline al ras se corta
   contra las caras. */
.hero__flipper:focus-visible {
  outline: 2px solid var(--color-wine);
  outline-offset: 6px;
  border-radius: 16px;
}

.hero__flipper.is-flipped {
  transform: rotateX(180deg);
}

/* -- Caras ------------------------------------- */
.hero__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Sin overflow:hidden — rompe preserve-3d en todos los browsers */
}

.hero__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;   /* border-radius va en la img, no en el contenedor */
  display: block;
}

.hero__face--back {
  transform: rotateX(180deg);
}

/* =============================================
   SCROLL HINT
   ============================================= */
.scroll-hint {
  position: fixed;
  bottom: 36px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  cursor: pointer;
  /* Reset de botón: el estilo lo ponen la píldora y la etiqueta. */
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

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

.scroll-hint__pill svg {
  animation: bounce 1.6s ease-in-out infinite;
  transition: rotate 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Al final de la página la flecha se da vuelta y rebota hacia arriba. */
.scroll-hint.is-top .scroll-hint__pill svg {
  rotate: 180deg;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__pill svg { animation: none; }
}


/* =============================================
   EVENTS
   ============================================= */
.events {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 120px var(--hero-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.events__left {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.events__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.events__label {
  font-family: var(--font-inter);
  font-size: 0.88rem;          /* dos puntos más que el 0.72 original */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-wine);

  /* Filete debajo del eyebrow, del ancho del bloque. Va como borde y no como
     elemento aparte para que acompañe al texto si cambia de tamaño. */
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-wine);
  margin-bottom: 16px;
}

.events__date {
  display: block;
  width: 100%;
  max-width: 480px;
  margin-bottom: 6px;
}

/* Los nombres de las bodegas son SVG de texto con proporciones distintas
   (496x30 y 332x29). Atados al ancho, el nombre más corto se estira y sus
   letras quedan más grandes. Se fija el alto y el ancho sale solo, así los dos
   nombres tienen siempre la misma altura de letra.
   El tope de 4.2vw es el que hace entrar al más largo en pantallas angostas. */
.events__venue {
  display: block;
  width: auto;
  height: min(28px, 4.2vw);
  margin-bottom: 14px;
}

.events__address {
  font-family: var(--font-inter);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-wine);
  margin-bottom: 28px;
}

.events__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 26px;
  border: 1.5px solid var(--color-wine);
  border-radius: 999px;
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-wine);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.events__cta:hover {
  background-color: var(--color-wine);
  color: var(--color-bg);
}

.events__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.events__illo {
  width: 100%;
  max-width: 580px;
}

/* Las ilustraciones por evento son de celular. Van con loading="lazy": una
   imagen diferida dentro de un contenedor oculto no se descarga, así que en
   escritorio el navegador ni las pide. Lo mismo al revés con la de la columna
   derecha cuando se entra desde el teléfono. */
.events__illo-mobile { display: none; }

/* Estado por defecto: solo ceremonia */
.js-civil-block             { display: none; }
.js-civil-block.is-visible  { display: flex; }
.js-illo-full               { display: none; }
.js-illo-full.is-visible    { display: block; }
.js-illo-ceremony.is-hidden { display: none; }


/* =============================================
   CARDS
   ============================================= */
.cards {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 80px var(--hero-pad-x) 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Las cards tienen dos estados y los colores salen de estos tres tokens:
   reposo = crema (como Mendoza) · hover = vino con acentos celestes.
   Todo lo de adentro (título, texto, botones) lee los tokens, así que el
   cambio de estado se define en un solo lugar. */
.card {
  --card-bg:     var(--color-cream-dark);
  --card-fg:     var(--color-text);
  --card-accent: var(--color-wine);
  --card-ok:     #3f7a3f;   /* confirmación de "copiado" */

  width: 100%;
  max-width: var(--card-width);
  border-radius: 20px;
  padding: 56px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  background-color: var(--card-bg);
  transition: background-color 0.35s ease;
}

/* Con un panel abierto la card queda fija en vino: si volviera a crema al
   sacar el mouse, el formulario (pensado sobre fondo oscuro) se volvería
   ilegible mientras se completa. */
.card:hover,
.card:has(.rsvp-form.is-open),
.card:has(.rsvp-success.is-open),
.card:has(.regalos-detail.is-open) {
  --card-bg:     var(--color-wine);
  --card-fg:     var(--color-blue);
  --card-accent: var(--color-blue);
  --card-ok:     #8fce8f;   /* sobre vino hace falta un verde más claro */
}

/* Los títulos son SVG de un solo color: se pintan por CSS con mask para que
   sigan el estado de la card en vez de tener el color quemado en el archivo. */
.card__title {
  display: block;
  background-color: var(--card-accent);
  transition: background-color 0.35s ease;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.card__title--rsvp {
  width: 116px; height: 35px;
  -webkit-mask-image: url('../assets/cards/title-rsvp.svg');
          mask-image: url('../assets/cards/title-rsvp.svg');
}

.card__title--mendoza {
  width: 230px; height: 34px;
  -webkit-mask-image: url('../assets/cards/title-mendoza.svg');
          mask-image: url('../assets/cards/title-mendoza.svg');
}

.card__title--dresscode {
  width: 291px; height: 35px;
  -webkit-mask-image: url('../assets/cards/title-dresscode.svg');
          mask-image: url('../assets/cards/title-dresscode.svg');
}

.card__title--regalos {
  width: 216px; height: 36px;
  -webkit-mask-image: url('../assets/cards/title-regalos.svg');
          mask-image: url('../assets/cards/title-regalos.svg');
}

.card__body {
  font-family: var(--font-inter);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--card-fg);
  max-width: 720px;
  transition: color 0.35s ease;
}

.card__body--semibold { font-weight: 600; }

.card__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.card__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 32px;
  border-radius: 999px;
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.card__cta--dark {
  background-color: var(--color-wine);
  color: var(--color-bg);
}

/* Todos los CTA de las cards van contorneados con el acento de la card.
   El relleno aparece solo al pasar el mouse por el botón. */
.card__cta--blue,
.card__cta--outline,
.card__cta--blue-outline {
  background-color: transparent;
  border: 1.5px solid var(--card-accent);
  color: var(--card-accent);
}

.card__cta--blue:hover,
.card__cta--outline:hover,
.card__cta--blue-outline:hover {
  background-color: var(--card-accent);
  color: var(--card-bg);
}

/* Wrapper de los dos CTAs del RSVP colapsado */
.rsvp-ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Form de no asistencia — mismo base que rsvp-form */
.rsvp-decline-form .card__cta {
  align-self: center;
}

/* Estado de éxito */
.rsvp-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.rsvp-success.is-open { display: flex; }

.rsvp-success__msg {
  font-family: var(--font-inter);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-bg);
  max-width: 480px;
}


/* =============================================
   RSVP FORM
   ============================================= */
.rsvp-form {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 560px;
  margin-top: 8px;
  text-align: left;
}

.rsvp-form.is-open { display: flex; }

.rsvp-form .card__cta {
  align-self: center;
}

.rsvp-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rsvp-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rsvp-form__field--full {
  grid-column: 1 / -1;
}

.rsvp-form__label {
  font-family: var(--font-inter);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--color-bg);
  opacity: 0.8;
}

.rsvp-form__label--section {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 1;
}

.rsvp-form__input {
  background-color: var(--color-bg);
  border: none;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-text);
  outline: none;
  width: 100%;
  transition: box-shadow 0.2s;
}

.rsvp-form__input:focus {
  box-shadow: 0 0 0 2px var(--color-blue);
}

.rsvp-form__input.is-error {
  box-shadow: 0 0 0 2px rgba(220,90,70,0.75);
}

.rsvp-form__field-error {
  font-family: var(--font-inter);
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,140,120,0.9);
  margin-top: 2px;
}

.rsvp-form__textarea {
  resize: vertical;
  min-height: 96px;
}

.rsvp-form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rsvp-form__legend {
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-bg);
  margin: 0 0 12px 0;
  padding: 0;
  display: block;
  width: 100%;
}

.rsvp-form__question {
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-bg);
  margin: 0 0 12px 0;
  padding: 0;
}

.rsvp-form__check-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
}

.rsvp-form__check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-inter);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-bg);
  cursor: pointer;
}

.rsvp-form__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(237,227,214,0.5);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.rsvp-form__check input[type="checkbox"]:checked {
  background: var(--color-blue);
  border-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23482927' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Stepper acompañantes */
.rsvp-stepper-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(237,227,214,0.15);
  border-radius: 12px;
  padding: 20px 24px;
}

.rsvp-stepper-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rsvp-stepper-card__eyebrow {
  font-family: var(--font-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.65;
}

.rsvp-stepper-card__sub {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-bg);
}

.rsvp-stepper {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(237,227,214,0.25);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}

.rsvp-stepper__btn {
  background: none;
  border: none;
  color: var(--color-bg);
  font-family: var(--font-inter);
  font-size: 1.2rem;
  font-weight: 300;
  width: 36px;
  height: 36px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
}

.rsvp-stepper__btn:hover:not(:disabled) {
  background: rgba(237,227,214,0.12);
}

.rsvp-stepper__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.rsvp-stepper__count {
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-bg);
  min-width: 28px;
  text-align: center;
}

/* Bloques de acompañantes */
#companions-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rsvp-companion-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(237,227,214,0.15);
}

.rsvp-companion-section:first-child {
  border-top: 1px solid rgba(237,227,214,0.15);
  padding-top: 16px;
}

.rsvp-companion-section__header {
  font-family: var(--font-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.65;
}

/* =============================================
   REGALOS — detalle expandible
   ============================================= */
.regalos-detail {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: 760px;
  text-align: left;
}

.regalos-detail.is-open { display: flex; }

.regalos-detail .card__cta { align-self: center; }

.regalos-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

.regalos-account {
  border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.regalos-account__header {
  text-align: center;
}

.regalos-account__title {
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--card-fg);
}

.regalos-account__sub {
  font-family: var(--font-inter);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--card-fg);
  margin-top: 3px;
}

.copy-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.copy-field__label {
  font-family: var(--font-inter);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--card-fg);
  opacity: 0.65;
}

.copy-field__row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s;
}

.copy-field__row:hover {
  border-color: color-mix(in srgb, var(--card-accent) 70%, transparent);
}

.copy-field__value {
  flex: 1;
  font-family: var(--font-inter);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--card-fg);
  word-break: break-all;
}

.copy-field__btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--card-accent);
  opacity: 0.5;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s;
}

.copy-field__btn:hover { opacity: 1; }

.copy-field__btn.is-copied {
  opacity: 1;
  color: var(--card-ok);
}


/* Ocultar sección de eventos en modo ceremonia */
.js-events-section { display: flex; }
.js-events-section.is-hidden { display: none; }


/* =============================================
   CAROUSEL
   ============================================= */
/* Va a sangre: sin max-width ni padding lateral, la cinta toca los dos bordes
   de la pantalla y las fotos entran y salen cortadas por el margen. */
.carousel {
  position: relative;
  width: 100%;
  padding: 40px 0 64px;
}

/* -- Viewport: contenedor que scrollea de verdad ---------------------------
   Es scroll nativo y no una animación, así el trackpad de costado y el dedo
   en el celular funcionan solos. El desplazamiento automático y el arrastre
   con el mouse los maneja main.js empujando este mismo scroll. */
.carousel__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain; /* que no dispare el "atrás" del navegador */
  cursor: grab;
}

/* Barra de scroll oculta: la cinta se maneja arrastrando, no con la barra. */
.carousel__viewport { scrollbar-width: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__viewport.is-dragging { cursor: grabbing; }

/* -- Track: cinta continua -------------------- */
.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  width: max-content;
}

/* -- Slide ------------------------------------ */
/* Ancho fijo, no una fracción del ancho visible: yendo a sangre, atarlo a la
   pantalla estiraría las fotos más allá de los 760px del archivo y se verían
   blandas. Con un ancho propio, en pantallas anchas entran más fotos. */
.carousel__slide {
  flex: 0 0 clamp(240px, 30vw, 420px);
  aspect-ratio: 380 / 420;
  border-radius: 12px;
  overflow: hidden;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Sin esto el navegador arranca su propio arrastre de imagen y pisa el nuestro. */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}


/* =============================================
   FOOTER
   ============================================= */
.footer {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 40px var(--hero-pad-x) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer__credit,
.footer__contact {
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--color-wine);
  opacity: 0.75;
}

.footer__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}

.footer__link:hover {
  border-bottom-color: currentColor;
}

.footer__sep {
  margin-inline: 8px;
}


/* =============================================
   MOBILE (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

  /* -- Nada debe empujar la página de costado --- */
  body { overflow-x: clip; }

  /* -- Tipografía: en el celular el texto chico se vuelve ilegible ---------
     El cuerpo sube a 16px, que es el mínimo recomendado para leer, y las
     etiquetas dejan de estar en 11px. Los CBU son lo más importante de todo:
     alguien los va a copiar a mano desde el teléfono. */
  .card__body        { font-size: 1rem; }
  .copy-field__value { font-size: 1rem; }
  .copy-field__label { font-size: 0.8rem; }
  .events__address   { font-size: 0.9rem; }
  .rsvp-form__label  { font-size: 0.82rem; }

  /* -- Hero: la misma tarjeta, en vertical ---------------------------------
     La apaisada del escritorio no sirve acá: de frente queda en una franja de
     143px, y girada 90° el texto se lee de costado. Van dos archivos propios
     en vertical, y el giro pasa a ser de costado en vez de hacia arriba. */
  .hero {
    min-height: 100svh;
    padding: 32px 0;
    overflow: hidden;
  }

  /* Mismo flipper que en escritorio, con las imágenes verticales y el giro
     de costado: sobre una carta alta, darla vuelta hacia arriba se ve raro. */
  .hero__flipper-wrapper {
    width: min(74vw, 320px);
    perspective: 900px;   /* más cerca que en escritorio: la carta es chica */
  }

  /* La proporción tiene que ser la del archivo. Las caras van con object-fit
     cover, así que si no coincide la tarjeta se recorta por los costados. */
  .hero__flipper { aspect-ratio: 1054 / 1468; }

  .hero__flipper.is-flipped { transform: rotateY(180deg); }

  .hero__face--back { transform: rotateY(180deg); }

  /* Los decorativos están posicionados contra la tarjeta apaisada. */
  .hero__deco { display: none; }

  /* -- Carrusel ------------------------------------------------------------
     El ancho de foto ya lo resuelve el clamp: en un celular cae en su mínimo
     de 240px y entra una foto y media, que es lo que deja ver que la cinta
     sigue. El arrastre con el dedo es scroll nativo, ya funciona. */
  .carousel { padding: 24px 0 40px; }

  /* -- Eventos: apilados ---------------------------------------------------
     La ilustración va primero para que no quede colgada al final, después de
     toda la información. */
  .events {
    grid-template-columns: 1fr;
    padding: 64px var(--hero-pad-x);
    gap: 40px;
  }

  /* En el celular cada evento lleva su propia ilustración arriba de los datos,
     en vez de una sola composición para los dos. */
  .events__right { display: none; }

  .events__illo-mobile {
    display: block;
    width: 100%;
    max-width: 280px;
    margin-bottom: 20px;
  }

  .events__left  { gap: 48px; }
  .events__item  { align-items: center; text-align: center; }

  /* Un punto más que el original en vez de los dos del escritorio: en una
     pantalla angosta el eyebrow compite con la fecha, que es lo que importa.
     El filete lo hereda de la regla de arriba. */
  .events__label { font-size: 0.8rem; }

  /* -- Cards ---------------------------------------------------------------
     El padding de 56x80 se come la pantalla: quedarían 230px de contenido.
     Acá el margen lateral es más chico que el del resto de la página a
     propósito: las cards son el contenido más denso —datos bancarios,
     formulario— y necesitan todo el ancho que se les pueda dar. */
  .cards {
    padding: 48px 32px 64px;
    gap: 16px;
  }

  .card {
    padding: 36px 24px;
    border-radius: 16px;
  }

  /* Los títulos vienen del diseño de escritorio y en el celular quedan
     enormes. En vez de darle un ancho a cada uno, se fija una altura común y
     el ancho sale de la proporción del archivo: así los cuatro bajan lo mismo
     y ninguno se deforma. */
  .card__title {
    height: 24px;
    width: auto;
    aspect-ratio: var(--title-ratio);
    max-width: 100%;
  }

  .card__title--rsvp      { --title-ratio: 116 / 35; }
  .card__title--mendoza   { --title-ratio: 230 / 34; }
  .card__title--dresscode { --title-ratio: 291 / 35; }
  .card__title--regalos   { --title-ratio: 216 / 36; }

  /* En vez de apretarse en una fila, un botón abajo del otro y a lo ancho. */
  .card__ctas,
  .rsvp-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .card__cta {
    justify-content: center;
    padding: 15px 24px;
  }

  /* -- Formulario RSVP: una sola columna ---------- */
  .rsvp-form__row { grid-template-columns: 1fr; }

  /* -- Regalos: las cuentas una abajo de la otra -- */
  .regalos-accounts-grid { grid-template-columns: 1fr; }

  /* -- Footer --------------------------------------------------------------
     El margen inferior es grande a propósito: el indicador de scroll flota
     fijo en esa esquina y en una pantalla angosta se le vendría encima. */
  .footer {
    padding: 32px 24px 88px;
  }

  .footer__credit,
  .footer__contact {
    font-size: 0.82rem;
    line-height: 1.6;
  }

  /* -- Indicador de scroll -------------------------------------------------
     Más chico y sin la etiqueta: en una pantalla angosta el texto compite con
     el contenido, y la flecha sola ya se entiende. */
  .scroll-hint {
    bottom: 20px;
    right: 20px;
  }

  .scroll-hint__label { display: none; }

  .scroll-hint__pill {
    width: 38px;
    height: 52px;
  }
}