/* Carmen y Carlos — landing
   Tipografías de título: SVG exportados de Figma (Frunchy / New Icon Script).
   Texto corrido: Literata.
   Escala de espaciado unificada — ver --s-* */

:root {
  --ink: #5b5b5b;
  --ink-strong: #2f2f2f;   /* texto ya escrito o elegido en el formulario */
  --gold: #756215;
  --gold-soft: #8a815d;
  --cream: #d8d2bd;
  --paper: #e7e7e7;
  --forest: #0c461c;

  /* escala vertical: todo múltiplo de 8 */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --s-9: 176px;   /* separación entre secciones */

  /* escritura del título script y fade del título de caja alta */
  --write-dur: 1.5s;
  --fade-delay: .55s;
  --fade-dur: .95s;   /* .55 + .95 = 1.5s: ambos terminan a la vez */

  --measure: 400px;   /* ancho máximo de párrafo */
  --col: 466px;       /* ancho de la columna de contenido */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Literata", Georgia, serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: var(--s-4) var(--s-4) var(--s-3);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* velo degradado para que el texto que pasa por debajo no choque con el menú */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px 0;
  background:
    linear-gradient(to bottom, rgba(231, 231, 231, .96) 55%, rgba(231, 231, 231, 0)) left / 50% 100% no-repeat,
    linear-gradient(to bottom, rgba(12, 70, 28, .96) 55%, rgba(12, 70, 28, 0)) right / 50% 100% no-repeat;
  pointer-events: none;
}

.nav > * { position: relative; }

.nav a { text-decoration: none; pointer-events: auto; }

.nav__brand {
  flex: 0 0 auto;
  color: #000;
  font-weight: 400;
}

.nav__links {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  margin: 0 0 0 clamp(var(--s-5), 10vw, 150px);
  padding: 0;
  list-style: none;
}

/* los tres últimos enlaces caen sobre el panel verde: color claro para que se lean */
.nav__links a { color: var(--gold); transition: opacity .25s ease; }
.nav__links li:nth-child(n+3) a { color: var(--cream); }
.nav__links a:hover { opacity: .6; }

/* ---------- panel verde fijo ---------- */

.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100dvh;
  background: var(--forest);
  display: grid;
  place-items: center;
  z-index: 1;
}

.panel__lockup { text-align: center; color: #fff; }

.panel__logo { width: min(375px, 78%); height: auto; margin: 0 auto; display: block; }

/* entrada del logotipo al cargar: Carmen, luego la «y» escribiéndose, luego Carlos */
.logo__carmen,
.logo__carlos {
  opacity: 0;
  animation: logo-fade .7s ease forwards;
}

/* Carmen y Carlos entran prácticamente juntos: solo 0,12s de diferencia,
   lo justo para que se lea el orden sin que una espere a la otra */
.logo__carmen { animation-delay: .15s; }
.logo__carlos { animation-delay: .27s; }

.panel__logo .write-mask {
  transform: skewX(-14deg) scaleX(0);
  transform-origin: 0 50%;
  transform-box: fill-box;
  animation: write .8s cubic-bezier(.5, .02, .3, 1) .45s forwards;
}

.panel__meta {
  opacity: 0;
  animation: logo-fade .7s ease 1.05s forwards;
}

@keyframes logo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.panel__meta {
  margin: 0;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.panel__lockup .panel__meta:first-of-type { margin-top: var(--s-3); }
.panel__meta--caps { text-transform: uppercase; }

/* ---------- columna de contenido ---------- */

.sheet {
  position: relative;
  z-index: 2;
  width: 50vw;
  padding: 0 var(--s-5) 0;
  background: var(--paper);
}

.hero,
.section {
  width: min(var(--col), 100%);
  margin: 0 auto;
  text-align: center;
}

/* la columna clara abre con un filete fino en lugar de la ilustración */
.hero {
  padding-top: 180px;
}

.hairline {
  display: block;
  width: 1px;
  height: 72px;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(138, 129, 93, 0), var(--gold-soft));
}

/* el mismo filete, tumbado, separa un bloque del siguiente */
.hairline--divider {
  width: 64px;
  height: 1px;
  margin: var(--s-8) auto 0;
  background: linear-gradient(to right,
    rgba(138, 129, 93, 0), var(--gold-soft), rgba(138, 129, 93, 0));
}

.section { padding-top: var(--s-9); scroll-margin-top: 120px; }
/* al final del scroll, «Gracias» queda a la altura del logotipo del panel verde:
   la mitad del alto de la pantalla menos la mitad de la propia palabra */
/* 74px = media palabra; 34px = lo que la fecha y la ciudad bajan el centro del
   bloque del panel, para que «Gracias» quede a la altura del logotipo y no del lockup */
.section--last { padding-top: var(--s-9); padding-bottom: calc(50dvh - 74px + 34px); }

/* ---------- lockup de título (script + display) ---------- */

.lockup {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lockup__script {
  position: relative;
  z-index: 1;
  margin-bottom: -6px;   /* solape constante en todos los bloques */
}

.lockup__display { width: auto; }

/* ---------- escritura a mano del título script (prueba: La celebración) ----------
   El SVG exportado son contornos rellenos, no trazos, así que el efecto se consigue
   descubriendo el dibujo con una máscara inclinada que sigue la caída del script. */

.lockup--write .write-mask {
  transform: skewX(-14deg) scaleX(0);
  transform-origin: 0 50%;
  transform-box: fill-box;
}

.lockup--write.is-writing .write-mask {
  animation: write var(--write-dur) cubic-bezier(.5, .02, .3, 1) forwards;
}

/* el fade arranca cuando la escritura ya va por la mitad y termina con ella:
   así los dos títulos acaban de aparecer en el mismo instante */
.lockup--write .lockup__display {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--fade-dur) ease var(--fade-delay),
    transform var(--fade-dur) cubic-bezier(.22, .61, .36, 1) var(--fade-delay);
}

.lockup--write.is-writing .lockup__display {
  opacity: 1;
  transform: none;
}

@keyframes write {
  to { transform: skewX(-14deg) scaleX(1); }
}

/* ---------- filete ---------- */

.rule {
  width: 30px;
  height: 0;
  margin: var(--s-5) auto var(--s-4);
  border: 0;
  border-top: 1px solid var(--gold-soft);
}

/* ---------- textos ---------- */

.lede {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
}

.lede + .lede { margin-top: var(--s-4); }

/* frase grande → párrafo: aire explícito */
.statement + .lede { margin-top: 38px; }

.lede a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- formulario de confirmación ---------- */

.form {
  max-width: 440px;
  margin: var(--s-6) auto 0;
  text-align: left;
}

.form__row { margin: 0 0 var(--s-2); }

/* campo trampa para bots: fuera de la vista y del tabulador */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* la etiqueta vive en el placeholder, como en el diseño; queda para lectores de pantalla */
.form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__field {
  width: 100%;
  padding: 14px 22px;
  border: 1px solid #c9b97e;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s ease;
}

.form__field::placeholder { color: #9a9a9a; opacity: 1; }

.form__field:focus-visible {
  outline: none;
  border-color: var(--gold);
}

/* el campo ya relleno se distingue del que sigue vacío */
.form__field:not(:placeholder-shown) { border-color: #b3a05c; }

/* flecha del desplegable, dibujada en CSS para no depender de otro asset */
.form__field--select {
  color: #9a9a9a;
  padding-right: 44px;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, #9a9a9a 50%),
    linear-gradient(135deg, #9a9a9a 50%, transparent 50%);
  background-position: calc(100% - 26px) 52%, calc(100% - 20px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.form__field--select:valid { color: var(--ink-strong); }

.form__submit {
  display: block;
  width: 100%;
  margin-top: var(--s-3);
  padding: 15px 22px;
  border: 1px solid #c9b97e;
  border-radius: 8px;
  background: #c9b97e;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.form__submit:hover,
.form__submit:focus-visible {
  background: transparent;
  color: var(--gold);
}

.form__status {
  margin: var(--s-2) 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--gold);
}

.date {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.events { margin-top: var(--s-6); }
.event + .event { margin-top: var(--s-6); }

.event__label {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.event__time {
  margin: var(--s-1) 0 0;
  font-size: 58px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.event__place {
  max-width: 280px;
  margin: var(--s-2) auto 0;
  font-size: 16px;
  line-height: 1.5;
}

/* botón del diseño: abre la dirección en Google Maps, en una pestaña nueva */
.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 31px;
  margin-top: var(--s-2);
  padding: 0 10px;
  border: 0.5px solid #000;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}

/* sin relleno: en over solo pasa a negro el texto (el filete ya lo es) */
.map-link:hover,
.map-link:focus-visible {
  color: #000;
}

.statement {
  max-width: 340px;
  margin: var(--s-3) auto 0;
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---------- imágenes ---------- */

.ornament { margin: var(--s-7) auto 0; width: 54px; }

.photo {
  margin: var(--s-7) auto 0;
  width: min(431px, 100%);
  padding: 26px;
  background: #fff;
}

/* encuadre del original, como en el diseño: vertical recortado */
.photo img {
  width: 100%;
  aspect-ratio: 431 / 612;
  object-fit: cover;
  object-position: center 22%;
}

/* la inclinación ya viene dentro del SVG exportado, no se vuelve a girar aquí */
.gracias {
  width: 328px;
  margin: 0 auto;
  display: block;
}

.lockup--solo { margin-top: var(--s-7); }

/* ---------- aparición al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }

  .lockup--write .write-mask { transform: none; }
  .lockup--write .lockup__display { opacity: 1; transform: none; transition: none; }
  .lockup--write.is-writing .write-mask { animation: none; }

  .panel__logo .write-mask { transform: none; animation: none; }
  .logo__carmen,
  .logo__carlos,
  .panel__meta { opacity: 1; animation: none; }
}

/* ===================== móvil ===================== */

@media (max-width: 860px) {
  /* sin menú de secciones: el logotipo del principio ya hace de portada */
  .nav { display: none; }

  /* el panel verde deja de ser una mitad fija y pasa a ser la portada */
  .panel {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 520px;
  }

  .panel__logo { width: min(300px, 72vw); }
  .panel__meta { font-size: 13px; }

  .sheet {
    width: 100%;
    padding: 0 var(--s-3);
  }

  .hero { padding-top: var(--s-7); }

  /* solo el filete vertical de apertura; el separador conserva su 1px de alto */
  .hero .hairline { height: 48px; }
  .hairline--divider { margin-top: var(--s-7); }

  .section {
    width: 100%;
    max-width: 420px;
    padding-top: var(--s-8);
    scroll-margin-top: var(--s-4);
  }

  /* los títulos son SVG de ancho fijo: aquí se dejan escalar */
  .lockup__script,
  .lockup__display,
  .gracias {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* un respiro a los lados: los títulos no llegan al borde de la pantalla */
  .lockup__display { max-width: 86%; }
  .lockup__script { max-width: 42%; }
  .lockup--solo .gracias { max-width: 62%; }

  .rule { margin: var(--s-4) auto var(--s-3); }

  .lede { max-width: 100%; font-size: 14px; }
  .form { max-width: 100%; }
  .form__field { padding-left: 18px; padding-right: 18px; font-size: 12px; }
  .form__submit { padding-left: 18px; padding-right: 18px; font-size: 15px; }
  .date { font-size: 18px; }

  .events { margin-top: var(--s-5); }
  .event + .event { margin-top: var(--s-5); }
  .event__time { font-size: 40px; }
  .event__place { font-size: 15px; }
  .statement { max-width: 280px; font-size: 22px; }

  .ornament { margin-top: var(--s-6); }

  .photo {
    width: 100%;
    margin-top: var(--s-6);
    padding: 14px;
  }

  /* sin logotipo fijo al lado, «Gracias» no tiene con qué alinearse */
  .section--last { padding-bottom: var(--s-8); }
}

/* ---------- obsequio: número de cuenta ---------- */

.iban {
  margin: var(--s-3) auto 0;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}

.iban__copy {
  font-family: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 860px) {
  .iban { font-size: 14px; letter-spacing: 0.04em; }
}