/* =========================================================
   ANA & JESÚS · INVITACIÓN
   V7.1 · Luxury / Classic / Minimal
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --olive: #636B2F;
  --olive-dark: #4E5525;
  --olive-deep: #3F451F;

  --gold: #B8860B;
  --gold-soft: rgba(184, 134, 11, .55);
  
  --white: #FFFFFF;
  --ivory: #FDFCF8;
  --cream: #F5F2E9;

  --text: #34362B;
  --text-soft: #66685D;

  --shadow-soft:
    0 18px 50px rgba(40, 43, 25, .14);

  --shadow-deep:
    0 30px 80px rgba(25, 28, 15, .28);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  background: var(--ivory);
  color: var(--text);

  font-family: var(--sans);

  font-size: 16px;
  line-height: 1.7;

  overflow-x: hidden;
}

button,
input,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}


/* =========================================================
   ACCESS SCREEN
   ========================================================= */

.access-screen {

  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(24px, env(safe-area-inset-top))
    24px
    max(24px, env(safe-area-inset-bottom))
    24px;

  background:
    radial-gradient(
      circle at center,
      var(--olive) 0%,
      var(--olive-dark) 65%,
      var(--olive-deep) 100%
    );

  transition:
    opacity .7s ease,
    visibility .7s ease;
}

.access-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.access-box {

  width: min(100%, 390px);

  padding: 42px 30px;

  text-align: center;

  color: var(--white);

  border:
    1px solid rgba(212, 175, 55, .55);

  background:
    rgba(255, 255, 255, .035);

  box-shadow:
    0 30px 80px rgba(0, 0, 0, .22);
}

.access-initials {

  margin-bottom: 20px;

  color: var(--gold);

  font-family: var(--serif);

  font-size: clamp(34px, 10vw, 48px);
  font-weight: 500;

  letter-spacing: .08em;
}

.access-title {

  margin: 0 0 14px;

  font-family: var(--serif);

  font-size: clamp(25px, 7vw, 34px);
  font-weight: 500;

  letter-spacing: .02em;
}

.access-message {

  margin: 0 auto 28px;

  max-width: 310px;

  color: rgba(255,255,255,.82);

  font-size: 14px;
  line-height: 1.8;
}

.access-form {
  width: 100%;
}

.access-input {

  width: 100%;

  padding: 14px 15px;

  border:
    1px solid rgba(212, 175, 55, .5);

  border-radius: 0;

  outline: none;

  background: rgba(255,255,255,.08);

  color: var(--white);

  text-align: center;

  font-size: 14px;
  letter-spacing: .12em;
}

.access-input::placeholder {
  color: rgba(255,255,255,.6);
}

.access-input:focus {
  border-color: var(--gold);
}

.access-button {

  width: 100%;

  margin-top: 12px;

  padding: 14px 18px;

  border: 1px solid var(--gold);

  background: var(--gold);

  color: var(--olive-deep);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: .14em;
  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease;
}

.access-button:hover {
  background: transparent;
  color: var(--gold);
}

.access-error {

  min-height: 20px;

  margin-top: 12px;

  color: #F1C5C5;

  font-size: 13px;
}


/* =========================================================
   SOBRE / INTRO
   ========================================================= */

.intro {

  position: relative;

  width: 100%;
  height: 100dvh;
  min-height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      var(--olive-dark) 0%,
      var(--olive-deep) 100%
    );
}

.envelope-scene {

  position: relative;

  width: min(92vw, 680px);
  height: min(82vh, 720px);

  min-height: 520px;

  display: flex;
  align-items: center;
  justify-content: center;

  perspective: 1800px;
}


/* =========================================================
   TARJETA INTERIOR
   ========================================================= */

.invitation-card {

  position: absolute;

  z-index: 1;

  width: min(92%, 570px);
  height: min(82%, 670px);

  background: var(--ivory);

  box-shadow: var(--shadow-deep);

  transform:
    translateY(0)
    scale(1);

  transition:
    transform 1.15s cubic-bezier(.22,.61,.36,1),
    opacity .8s ease;
}

.card-frame {

  position: absolute;
  inset: 16px;

  border:
    1px solid rgba(212, 175, 55, .7);

  pointer-events: none;
}

.card-content {

  position: absolute;
  inset: 16px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 34px;

  text-align: center;
}

.card-eyebrow,
.section-label {

  color: var(--gold);

  font-family: var(--sans);

  font-size: 13px;
  font-weight: 500;

  letter-spacing: .22em;

  text-transform: uppercase;
}

.card-names {

  margin-top: 18px;

  color: var(--olive);

  font-family: var(--serif);

  font-size: clamp(42px, 9vw, 62px);
  font-weight: 500;

  line-height: .95;
}

.card-names span {

  display: inline-block;

  margin: 0 5px;

  color: var(--gold);

  font-style: italic;
}

.card-date {

  margin-top: 24px;

  color: var(--olive-dark);

  font-family: var(--sans);

  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 500;

  letter-spacing: .15em;

  text-transform: uppercase;
}

.card-message {

  margin-top: 24px;

  max-width: 330px;

  color: var(--text-soft);

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.55;
}


/* =========================================================
   SOBRE
   ========================================================= */

.envelope {

  position: absolute;

  z-index: 5;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      var(--olive-dark),
      var(--olive-deep)
    );

  box-shadow: var(--shadow-deep);

  transform-origin: center bottom;

  transition:
    transform 1.2s cubic-bezier(.22,.61,.36,1),
    opacity .8s ease;
}

.envelope-frame {

  position: absolute;
  inset: 14px;

  border:
    1px solid rgba(212,175,55,.45);

  pointer-events: none;

  z-index: 10;
}


/* =========================================================
   PARTES DEL SOBRE
   ========================================================= */

.envelope-left,
.envelope-right,
.envelope-bottom {

  position: absolute;

  inset: 0;

  pointer-events: none;
}

.envelope-left {

  clip-path: polygon(
    0 0,
    50% 50%,
    0 100%
  );

  background:
    linear-gradient(
      145deg,
      #59602A,
      #4B5124
    );

  z-index: 2;
}

.envelope-right {

  clip-path: polygon(
    100% 0,
    50% 50%,
    100% 100%
  );

  background:
    linear-gradient(
      215deg,
      #59602A,
      #4B5124
    );

  z-index: 2;
}

.envelope-bottom {

  clip-path: polygon(
    0 100%,
    50% 50%,
    100% 100%
  );

  background:
    #454B21;

  z-index: 3;
}


/* =========================================================
   INICIALES
   ========================================================= */

.envelope-initials {

  position: absolute;

  z-index: 12;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  color: var(--gold);

  font-family: var(--serif);

  font-size: clamp(34px, 10vw, 54px);

  letter-spacing: .1em;

  white-space: nowrap;
}


/* =========================================================
   RAMAS DE OLIVO
   ========================================================= */

.branch {

  position: absolute;

  z-index: 8;

  width: 180px;
  height: 320px;

  opacity: .72;

  pointer-events: none;
}

.branch.left {
  left: 1%;
  bottom: 3%;

  transform: rotate(-8deg);
}

.branch.right {
  right: 1%;
  bottom: 3%;

  transform: scaleX(-1) rotate(-8deg);
}

.branch-stem {

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 2px;
  height: 100%;

  background:
    rgba(255,255,255,.2);

  transform:
    rotate(14deg);

  transform-origin: bottom center;
}

.leaf {

  position: absolute;

  width: 28px;
  height: 12px;

  border-radius: 100% 0 100% 0;

  background:
    rgba(255,255,255,.12);

  transform: rotate(-30deg);
}

.leaf.l1 {
  left: 70px;
  bottom: 50px;
}

.leaf.l2 {
  left: 46px;
  bottom: 95px;
  transform: rotate(15deg);
}

.leaf.l3 {
  left: 70px;
  bottom: 140px;
}

.leaf.l4 {
  left: 43px;
  bottom: 185px;
  transform: rotate(15deg);
}

.leaf.l5 {
  left: 68px;
  bottom: 230px;
}

.leaf.l6 {
  left: 44px;
  bottom: 270px;
  transform: rotate(15deg);
}


/* =========================================================
   SOLAPA
   ========================================================= */

.flap {

  position: absolute;

  inset: 0;

  z-index: 9;

  clip-path: polygon(
    0 0,
    100% 0,
    50% 52%
  );

  background:
    linear-gradient(
      160deg,
      #626A2E,
      #505725
    );

  transform-origin: top center;

  transition:
    transform 1.15s cubic-bezier(.22,.61,.36,1);

  pointer-events: none;
}

.seal {

  position: absolute;

  left: 50%;
  top: 30%;

  transform: translate(-50%, -50%);

  width: 86px;
  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(212,175,55,.8);

  border-radius: 50%;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 20px;

  letter-spacing: .08em;

  background:
    var(--olive-deep);

  box-shadow:
    0 8px 30px rgba(0,0,0,.18);
}


/* =========================================================
   BOTÓN ABRIR
   ========================================================= */

.open-button {

  position: absolute;

  z-index: 20;

  left: 50%;
  bottom: 8%;

  transform: translateX(-50%);

  min-width: 210px;

  padding: 14px 24px;

  border:
    1px solid rgba(212,175,55,.8);

  background:
    rgba(48,53,24,.82);

  color: var(--gold);

  font-size: 13px;
  font-weight: 500;

  letter-spacing: .18em;

  text-transform: uppercase;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.open-button:hover {

  background: var(--gold);

  color: var(--olive-deep);
}

.open-button:active {

  transform:
    translateX(-50%)
    scale(.97);
}


/* =========================================================
   ESTADO ABIERTO
   ========================================================= */

.intro.open .flap {

  transform:
    rotateX(-178deg);

}

.intro.open .envelope {

  transform:
    translateY(105%)
    scale(.94);

  opacity: 0;

  pointer-events: none;
}

.intro.open .invitation-card {

  transform:
    translateY(-8%)
    scale(1.02);
}


/* =========================================================
   CONTENIDO GENERAL
   ========================================================= */

#invitationContent {

  position: relative;

  background: var(--ivory);
}

.section {

  position: relative;

  min-height: 720px;

  display: flex;
  align-items: center;

  padding:
    100px 24px;
}

.section-inner {

  width: min(100%, 1080px);

  margin: 0 auto;

  text-align: center;
}

.section-title {

  margin:
    12px 0 18px;

  color: var(--olive);

  font-family: var(--serif);

  font-size: clamp(34px, 8vw, 52px);

  font-weight: 500;

  line-height: 1.05;
}

.section-description {

  max-width: 620px;

  margin:
    0 auto 40px;

  color: var(--text-soft);

  font-size: 15px;

  line-height: 1.9;
}


/* =========================================================
   DIVISOR DORADO
   ========================================================= */

.gold-divider {

  width: 100px;

  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 24px auto;
}

.gold-divider::before,
.gold-divider::after {

  content: "";

  display: block;

  width: 34px;

  height: 1px;

  background:
    rgba(212,175,55,.65);
}

.gold-divider span {

  width: 6px;
  height: 6px;

  margin: 0 8px;

  border:
    1px solid var(--gold);

  transform: rotate(45deg);
}


/* =========================================================
   HERO / PORTADA
   ========================================================= */

.hero {

  min-height: 100dvh;

  background:
    linear-gradient(
      180deg,
      #FDFCF8 0%,
      #F7F4EB 100%
    );
}

.hero-inner {

  width: min(100%, 760px);

  margin: auto;
}

.hero-date-large {

  margin-bottom: 20px;

  color: var(--gold);

  font-size: clamp(14px, 3vw, 18px);
  font-weight: 500;

  letter-spacing: .2em;

  line-height: 1.5;
}

.hero-names {

  margin: 0;

  color: var(--olive);

  font-family: var(--serif);

  font-size: clamp(56px, 14vw, 92px);

  font-weight: 500;

  line-height: .9;
}

.hero-names span {

  color: var(--gold);

  font-style: italic;

  font-size: .72em;

  margin: 0 5px;
}

.hero-quote {

  max-width: 580px;

  margin: 26px auto 36px;

  color: var(--text-soft);

  font-family: var(--serif);

  font-size: clamp(18px, 4vw, 24px);

  font-style: italic;

  line-height: 1.6;
  
  text-align: center;
}

/* ========================================================= 
	FOTOGRAFÍA PRINCIPAL 
	========================================================= */ 
.hero-photo { 
	width: min(90vw, 500px); 
	margin: 38px auto 0; 
	padding: 8px; 
	background: var(--cream); 
	border: 1px solid rgba(212,175,55,.5); 
	box-shadow: 0 10px 30px rgba(40,43,25,.08); 
	overflow: hidden; 
}

.hero-photo img { 
	width: 100%; 
	height: auto; 
	display: block; 
	object-fit: contain; 
}

/* =========================================================
   EVENTOS
   ========================================================= */

.events {

  background: var(--olive-deep);

  color: var(--white);
}

.events .section-title {
  color: var(--white);
}

.events .section-description {
  color: rgba(255,255,255,.76);
}


/* =========================================================
   NOTA DE INVITADOS
   ========================================================= */

.guest-note {

  width: min(100%, 620px);

  margin:
    0 auto 48px;

  padding: 30px 24px;

  border:
    1px solid rgba(212,175,55,.4);

  background:
    rgba(255,255,255,.045);
}

.guest-note-title {

  color: var(--gold);

  font-size: 13px;
  font-weight: 500;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.guest-name {
  margin-top: 10px;
  margin-bottom: 14px;

  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;

  letter-spacing: 0.04em;

  color: var(--cream);
}
/* =========================================================
   RSVP · ANA & JESÚS
   ========================================================= */

.rsvp-section {

  width: 100%;
  max-width: 620px;

  margin: 34px auto 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 12px;

  text-align: center;
}


/* =========================================================
   RSVP BUTTON
   ========================================================= */

#confirmAttendance {

  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 230px;

  padding: 14px 30px;

  margin: 0;

  border: 1px solid var(--gold);
  border-radius: 0;

  background: var(--olive);

  color: var(--white);

  font-family: var(--sans);

  font-size: 11px;
  font-weight: 500;

  line-height: 1.2;

  letter-spacing: .18em;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, .08);

  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .3s ease;
}


/* =========================================================
   RSVP BUTTON · HOVER
   ========================================================= */

#confirmAttendance:hover {

  background: var(--white);

  color: var(--olive);

  border-color: var(--gold);

  box-shadow:
    0 7px 20px rgba(0, 0, 0, .10);

  transform: translateY(-1px);
}


/* =========================================================
   RSVP BUTTON · ACTIVE
   ========================================================= */

#confirmAttendance:active {

  transform: translateY(0);

  box-shadow:
    0 3px 10px rgba(0, 0, 0, .08);
}


/* =========================================================
   RSVP BUTTON · FOCUS
   ========================================================= */

#confirmAttendance:focus {

  outline: none;
}

#confirmAttendance:focus-visible {

  outline: 1px solid var(--gold);

  outline-offset: 4px;
}


/* =========================================================
   RSVP BUTTON · LOADING
   ========================================================= */

#confirmAttendance.loading {

  opacity: .72;

  cursor: wait;

  transform: none;
}


/* =========================================================
   RSVP BUTTON · CONFIRMED
   ========================================================= */

#confirmAttendance.confirmed {

  background: transparent;

  color: var(--olive);

  border-color: var(--olive);

  box-shadow: none;

  cursor: default;
}


#confirmAttendance.confirmed:hover {

  background: transparent;

  color: var(--olive);

  border-color: var(--olive);

  box-shadow: none;

  transform: none;
}


/* =========================================================
   RSVP MESSAGE
   ========================================================= */

.rsvp-message {

  width: 100%;
  max-width: 320px;

  min-height: 18px;

  margin: 0;
  padding: 0;

  color: var(--gold);

  font-family: var(--sans);

  font-size: 11px;
  font-weight: 400;

  line-height: 1.6;

  letter-spacing: .04em;

  text-align: center;

  opacity: 0;

  transform: translateY(5px);

  transition:
    opacity .45s ease,
    transform .45s ease;
}


/* =========================================================
   RSVP MESSAGE · VISIBLE
   ========================================================= */

.rsvp-message.visible {

  opacity: 1;

  transform: translateY(0);
}


.guest-count {

  margin-top: 10px;

  color: var(--white);

  font-family: var(--serif);

  font-size: 46px;

  line-height: 1;
}

.guest-count-label {

  margin-top: 5px;

  color: var(--gold);

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: .12em;
}

.guest-note-text {

  max-width: 520px;

  margin:
    18px auto 0;

  color: rgba(255,255,255,.72);

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================================
   EVENT GRID
   ========================================================= */

.event-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;

  max-width: 850px;

  margin: 0 auto;
}

.event {

  padding: 34px 24px;

  border:
    1px solid rgba(212,175,55,.35);

  background:
    rgba(255,255,255,.035);
}

.event-icon {

  color: var(--gold);

  font-size: 26px;

  margin-bottom: 12px;
}

.event h3 {

  margin: 0 0 12px;

  color: var(--white);

  font-family: var(--serif);

  font-size: 28px;

  font-weight: 500;
}

.event-time {

  color: var(--gold);

  font-size: 14px;
  font-weight: 600;

  letter-spacing: .12em;
}

.event-place {

  margin-top: 12px;

  color: var(--white);

  font-size: 16px;
  font-weight: 500;
}

.event-address {

  margin-top: 8px;

  color: rgba(255,255,255,.68);

  font-size: 14px;

  line-height: 1.7;
}

.map-button {

  display: inline-block;

  margin-top: 20px;

  padding: 10px 18px;

  border:
    1px solid rgba(212,175,55,.6);

  color: var(--gold);

  text-decoration: none;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;
}
/* =========================================================
   LÍNEA DE TIEMPO
   ========================================================= */

.timeline-section {

  width: min(900px, 92vw);

  margin: 90px auto 0;

  padding: 0 0 20px;
}

.only-print-header {
  display: none; 
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--gold-soft);
  margin-bottom: 25px;
}

.only-print-header h1 {
  font-family: var(--serif);
  color: var(--olive);
  font-size: 2.2rem;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.only-print-header .wedding-date {
  font-family: var(--sans);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
}
.only-print-address {
  display: none;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dotted var(--cream);
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--olive-dark);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.timeline-download-btn {
  background-color: transparent;
  color: var(--text-soft);
  border: 1px solid var(--cream);
  padding: 8px 18px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 40px;
  cursor: pointer;
  margin: 12px 6px;
  display: inline-block;
  font-family: var(--sans);
  transition: all 0.3s ease-in-out;
  text-align: center;
  text-decoration: none;
}

.timeline-download-btn:hover {
  background-color: var(--cream);
  color: var(--text);
  border-color: var(--gold-soft);
}



/* =========================================================
   ENCABEZADO
   ========================================================= */

.timeline-section .section-heading {

  text-align: center;

  margin-bottom: 55px;
}


.timeline-section .section-kicker {

  display: block;

  margin-bottom: 10px;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 15px;

  font-style: italic;

  letter-spacing: .08em;
}


.timeline-section .section-heading h2 {

  margin: 0;

  color: var(--olive);

  font-family: var(--serif);

  font-size: clamp(30px, 5vw, 44px);

  font-weight: 400;

  line-height: 1.15;
}


.timeline-section .section-heading p {

  max-width: 500px;

  margin: 16px auto 0;

  color: var(--text-soft);

  font-family: var(--serif);

  font-size: 17px;

  line-height: 1.6;
}


/* =========================================================
   CONTENEDOR DEL TIMELINE
   ========================================================= */

.timeline {

  position: relative;

  padding: 5px 0 20px;
}


/* =========================================================
   LÍNEA CENTRAL
   ========================================================= */

.timeline::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(212,175,55,.65) 8%,
      rgba(212,175,55,.65) 92%,
      transparent
    );

  transform: translateX(-50%);
}


/* =========================================================
   ITEM
   ========================================================= */

.timeline-item {

  position: relative;

  display: flex;

  width: 100%;

  margin-bottom: 42px;
}


.timeline-item:last-child {

  margin-bottom: 0;
}


/* =========================================================
   ITEMS IMPARES
   ========================================================= */

.timeline-item:nth-child(odd) {

  justify-content: flex-start;
}


.timeline-item:nth-child(odd) .timeline-card {

  width: calc(50% - 42px);

  text-align: right;
}


/* =========================================================
   ITEMS PARES
   ========================================================= */

.timeline-item:nth-child(even) {

  justify-content: flex-end;
}


.timeline-item:nth-child(even) .timeline-card {

  width: calc(50% - 42px);

  text-align: left;
}


/* =========================================================
   MARCADOR
   ========================================================= */

.timeline-marker {

  position: absolute;

  z-index: 2;

  top: 18px;

  left: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  border:
    1px solid
    rgba(212,175,55,.65);

  border-radius: 50%;

  background: var(--cream);

  box-shadow:
    0 0 0 7px rgba(245,242,233,.9);

  font-size: 19px;

  transform: translateX(-50%);
}


/* =========================================================
   TARJETA
   ========================================================= */

.timeline-card {

  position: relative;

  padding: 20px 24px;

  border:
    1px solid
    rgba(212,175,55,.28);

  background:
    rgba(255,255,255,.42);

  box-shadow:
    0 8px 25px
    rgba(40,43,25,.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.timeline-card:hover {

  transform: translateY(-3px);

  border-color:
    rgba(212,175,55,.55);

  box-shadow:
    0 12px 30px
    rgba(40,43,25,.07);
}


/* =========================================================
   HORA
   ========================================================= */

.timeline-time {

  display: block;

  margin-bottom: 4px;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .12em;
}


/* =========================================================
   TITULO
   ========================================================= */

.timeline-card h3 {

  margin: 0 0 10px;

  color: var(--olive);

  font-family: var(--serif);

  font-size: 24px;

  font-weight: 500;

  line-height: 1.25;
}


/* =========================================================
   TEXTO
   ========================================================= */

.timeline-card p {

  margin: 0;

  color: var(--text-soft);

  font-family: var(--serif);

  font-size: 16px;

  line-height: 1.65;
}


.timeline-card strong {

  color: var(--olive);

  font-weight: 600;
}


/* =========================================================
   DETALLE DECORATIVO
   ========================================================= */

.timeline-card::after {

  content: "";

  position: absolute;

  top: 36px;

  width: 25px;

  height: 1px;

  background:
    rgba(212,175,55,.5);
}


/* IMPARES */

.timeline-item:nth-child(odd) .timeline-card::after {

  right: -25px;
}


/* PARES */

.timeline-item:nth-child(even) .timeline-card::after {

  left: -25px;
}



/* =========================================================
   CONTADOR
   ========================================================= */

.countdown {

  min-height: 620px;

  background: var(--cream);
}

.countdown-date {

  margin-top: 18px;

  color: var(--olive);

  font-size: 15px;
  font-weight: 500;

  letter-spacing: .18em;
}

.countdown-caption {

  margin-top: 26px;

  color: var(--text-soft);

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: .14em;
}

.timer {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;

  max-width: 720px;

  margin: 20px auto 0;
}

.time-unit {

  padding: 18px 8px;

  border:
    1px solid rgba(99,107,47,.2);

  background: rgba(255,255,255,.55);
}

.time-number {

  display: block;

  color: var(--olive);

  font-family: var(--serif);

  font-size: clamp(34px, 8vw, 54px);

  line-height: 1;
}

.time-label {

  display: block;

  margin-top: 8px;

  color: var(--text-soft);

  font-size: 12px;

  letter-spacing: .1em;

  text-transform: uppercase;
}


/* =========================================================
   VESTIMENTA
   ========================================================= */

.dress-box {

  width: min(100%, 580px);

  margin: 30px auto 0;

  padding: 44px 28px;

  border:
    1px solid rgba(99,107,47,.2);

  background: white;
}

.dress-main {

  color: var(--olive);

  font-family: var(--serif);

  font-size: 40px;
}

.dress-description {

  max-width: 470px;

  margin: auto;

  color: var(--text-soft);

  font-size: 15px;

  line-height: 1.9;
}


/* =========================================================
   REGALOS
   ========================================================= */

.gifts {

  background:
    linear-gradient(
      180deg,
      #FDFCF8,
      #F4F1E7
    );
}

.gift-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px;

  margin-top: 28px;
}

.gift-button {

  min-width: 150px;

  padding: 13px 20px;

  border:
    1px solid rgba(99,107,47,.45);

  color: var(--olive);

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;

  letter-spacing: .1em;

  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease;
}

.gift-button:hover {

  background: var(--olive);

  color: var(--white);
}


/* ========================================================= 
	GALERÍA 
	========================================================= */ 
	.photo-grid { 
		display: grid; 
		grid-template-columns: repeat(3, minmax(0, 1fr)); 
		gap: 28px; 
		margin-top: 48px; 
		align-items: start; 
	} 
		
/* ========================================================= 
	ELEMENTO DE GALERÍA 
	========================================================= */ 
	.photo-item { 
		min-width: 0; 
		text-align: center; 
	} 
/* ========================================================= 
	FOTOGRAFÍA ========================================================= */ 
	.gallery-photo { 
		width: 100%; 
		padding: 7px;
		background: var(--cream); 
		border: 1px solid rgba(212,175,55,.4); 
		box-shadow: 0 8px 24px rgba(40,43,25,.07); 
		overflow: hidden; 
	} 
	.gallery-photo img { 
		width: 100%; 
		height: auto; 
		display: block; 
		object-fit: contain; 
	} /* ========================================================= 
	CAPTION ========================================================= */ 
	.photo-caption { 
		max-width: 95%; 
		margin: 18px auto 0; 
		color: var(--text-soft); 
		font-family: var(--serif); 
		font-size: 16px; 
		font-style:italic; 
		line-height: 1.55; 
		text-align: center; 
	}
/* =========================================================
   CIERRE
   ========================================================= */

.closing {

  min-height: 720px;

  display: flex;
  align-items: center;

  padding: 100px 24px;

  background:
    var(--olive-deep);

  color: var(--white);

  text-align: center;
}

.closing-names {

  margin-top: 20px;

  color: var(--white);

  font-family: var(--serif);

  font-size: clamp(52px, 13vw, 84px);

  line-height: .82;
}

.closing-date {

  color: var(--gold);

  font-size: 15px;
  font-weight: 500;

  letter-spacing: .18em;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  padding:
    24px;

  background: var(--olive-deep);

  border-top:
    1px solid rgba(212,175,55,.2);

  color: rgba(255,255,255,.55);

  text-align: center;

  font-size: 13px;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {

  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity .9s ease,
    transform .9s ease;
}

.reveal.visible {

  opacity: 1;

  transform: translateY(0);
}

/* ========================================================= TABLET ========================================================= */
 @media (max-width: 900px) { 
	 .photo-grid { 
		 grid-template-columns: repeat(2, minmax(0, 1fr)); 
		 gap: 24px; 
	 } 
 }
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body {
    font-size: 15px;
  }

  /* SOBRE */

  .intro {

    height: 100dvh;
    min-height: 620px;

    padding:
      env(safe-area-inset-top)
      0
      env(safe-area-inset-bottom);
  }

  .envelope-scene {

    width: 94vw;

    height: 92dvh;

    min-height: 560px;

    max-height: none;
  }

  .envelope {

    width: 100%;
    height: 100%;
  }

  .envelope-frame {
    inset: 12px;
  }

  .envelope-initials {

    font-size: clamp(38px, 12vw, 52px);
  }

  .seal {

    width: 78px;
    height: 78px;

    font-size: 19px;
  }

  .open-button {

    bottom: 7%;

    min-width: 220px;

    padding: 15px 20px;

    font-size: 13px;
  }

  .branch {

    opacity: .55;

    transform: scale(.85);
  }

  .branch.left {
    left: -8%;
    bottom: 2%;
  }

  .branch.right {
    right: -8%;
    bottom: 2%;
  }


  /* TARJETA */

  .invitation-card {

    width: 86%;
    height: 76%;
  }

  .card-frame {
    inset: 13px;
  }

  .card-content {
    inset: 13px;
    padding: 24px;
  }

  .card-eyebrow {
    font-size: 13px;
  }

  .card-names {

    font-size:
      clamp(46px, 13vw, 64px);
  }

  .card-date {

    margin-top: 22px;

    font-size: 15px;

    letter-spacing: .12em;
  }

  .card-message {

    font-size: 17px;
  }


  /* SECCIONES */

  .section {

    min-height: 680px;

    padding:
      86px 20px;
  }

  .section-label {
    font-size: 13px;
  }

  .section-title {

    font-size:
      clamp(36px, 10vw, 48px);

    margin-top: 12px;
  }

  .section-description {

    font-size: 15px;

    line-height: 1.85;
  }


  /* HERO */

  .hero {

    min-height: 100dvh;

    padding-top: 90px;
    padding-bottom: 90px;
  }

  .hero-date-large {

    font-size: 16px;

    letter-spacing: .14em;
  }

  .hero-names {

    font-size:
      clamp(58px, 17vw, 82px);
  }

  .hero-quote {

    font-size: 19px;
  }

	.hero-photo { 
		width: min(88vw, 430px); 
		padding: 6px; 
		margin-top: 30px; 
	} 



  /* INVITADOS */

  .guest-note {

    padding: 28px 20px;
  }

  .guest-note-text {

    font-size: 14px;
  }

  /* EVENTOS */

  .event-grid {

    grid-template-columns: 1fr;

    gap: 18px;
  }

  .event {

    padding: 30px 20px;
  }

  .event h3 {

    font-size: 30px;
  }

  .event-place {

    font-size: 16px;
  }

  .event-address {

    font-size: 14px;
  }


  /* LÍNEA DE TIEMPO */
  .timeline-section {

    width: min(92vw, 560px);

    margin-top: 70px;
  }


  .timeline-section .section-heading {

    margin-bottom: 40px;
  }


  .timeline-section .section-heading h2 {

    font-size: 32px;
  }


  .timeline-section .section-heading p {

    font-size: 16px;
  }


  /* Línea a la izquierda */

  .timeline::before {

    left: 22px;

    transform: none;
  }


  /* Todos los items */

  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {

    justify-content: flex-end;

    padding-left: 58px;
  }


  .timeline-item:nth-child(odd) .timeline-card,
  .timeline-item:nth-child(even) .timeline-card {

    width: 100%;

    text-align: left;
  }


  /* Marcadores */

  .timeline-marker {

    left: 22px;

    width: 44px;

    height: 44px;
  }


  /* Elimina las líneas horizontales */

  .timeline-card::after {

    display: none;
  }


  .timeline-card {

    padding: 18px 20px;
  }


  .timeline-card h3 {

    font-size: 22px;
  }


  .timeline-card p {

    font-size: 15px;

    line-height: 1.6;
  }

  /* CONTADOR */

  .countdown {

    min-height: 600px;
  }

  .countdown-date {

    font-size: 15px;

    letter-spacing: .13em;
  }

  .timer {

    gap: 8px;
  }

  .time-unit {

    padding: 16px 4px;
  }

  .time-number {

    font-size:
      clamp(32px, 9vw, 44px);
  }

  .time-label {

    font-size: 12px;
  }


  /* FOTOS */

	.photo-grid { 
		grid-template-columns: 1fr; 
		gap: 42px; 
		margin-top: 38px; 
	} 
	.gallery-photo { 
		width: min(88vw, 430px);
		margin: 0 auto; 
		padding: 6px; 
	} 
	.photo-caption { 
		max-width: 88vw; 
		font-size: 15px; 
		line-height: 1.5; 
	}


  /* REGALOS */

  .gift-button {

    min-width: 160px;

    font-size: 13px;
  }


  /* CIERRE */

  .closing {

    min-height: 650px;

    padding:
      90px 20px;
  }

}


/* =========================================================
   RSVP · MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .rsvp-section {

    margin-top: 26px;

    padding-left: 10px;
    padding-right: 10px;
  }


  #confirmAttendance {

    width: min(100%, 270px);

    min-width: 0;

    padding: 15px 24px;

    font-size: 10px;

    letter-spacing: .16em;
  }


  .rsvp-message {

    max-width: 280px;

    font-size: 10px;
  }

}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .envelope-scene {

    width: 96vw;

    height: 92dvh;
  }

  .envelope-initials {

    font-size: 36px;
  }

  .open-button {

    min-width: 200px;

    font-size: 12px;
  }

  .card-names {

    font-size: 44px;
  }

  .card-date {

    font-size: 13px;

    letter-spacing: .09em;
  }

  .card-message {

    font-size: 16px;
  }

  .hero-names {

    font-size: 54px;
  }

  .hero-date-large {

    font-size: 14px;
  }

  .timer {

    gap: 5px;
  }

  .time-label {

    font-size: 12px;
  }

}
/* =========================================================
   INTRO OCULTO DESPUÉS DE ABRIR
   ========================================================= */

.intro.hidden {
  display: none;
}

/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}