/* ==================================================================
   TOKENS
   ================================================================== */
:root{
  /* Papel envejecido cálido, como una invitación impresa */
  --color-bg:            #f1e9db;
  --color-paper:         #faf5ea;
  --color-white:         #fdfaf2;

  /* Verde salvia / oliva — el color protagonista, en vez del rosa */
  --color-blush:         #e3ddc7;
  --color-blush-deep:    #cdc4a3;
  --color-rose:          #7c8863;
  --color-rose-dark:     #5c6647;

  /* Dorado antiguo, apagado */
  --color-gold:          #ac8c58;
  --color-gold-soft:     #d9c79f;

  --color-charcoal:      #4a4436;
  --color-charcoal-soft: #7a7361;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'EB Garamond', 'Cormorant Garamond', serif;

  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 3px;

  --shadow-soft: 0 18px 40px -22px rgba(74, 68, 54, .35);
  --shadow-card: 0 10px 26px -16px rgba(74, 68, 54, .28);

  --container: 1160px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-charcoal);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }
.eyebrow-caps{
  text-transform:uppercase;
  letter-spacing:.34em;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--color-rose-dark);
  outline-offset:3px;
}

/* ==================================================================
   FONDO DECORATIVO
   ================================================================== */
.bg-blob{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  opacity:.4;
  z-index:0;
  pointer-events:none;
}
.bg-blob--one{  width:520px; height:520px; top:-220px; left:-180px; background:var(--color-blush); }
.bg-blob--two{  width:420px; height:420px; top:30%; right:-220px; background:var(--color-gold-soft); opacity:.3; }
.bg-blob--three{ width:460px; height:460px; bottom:-240px; left:20%; background:var(--color-blush-deep); opacity:.28; }

main, header, footer, .modal-overlay{ position:relative; z-index:1; }

/* ---- Ramas de pino decorativas (elemento firma, estilo acuarela botánica) ---- */
.pine-corner{
  position:absolute;
  width:150px;
  height:auto;
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.pine-corner path,
.pine-corner ellipse{ fill:var(--color-rose); }
.pine-corner--tl{ top:8px;  left:-10px;  transform:scaleX(1) rotate(-6deg); }
.pine-corner--tr{ top:8px;  right:-10px; transform:scaleX(-1) rotate(-6deg); }
.pine-corner--bl{ bottom:-6px; left:-10px;  opacity:.55; }
.pine-corner--br{ bottom:-6px; right:-10px; opacity:.55; transform:scaleX(-1); }

@media (max-width:640px){
  .pine-corner{ width:92px; }
}

/* ---- Cordón de montañas acuarela, separador antes del footer ---- */
.mountain-divider{
  width:100%;
  height:auto;
  display:block;
  margin-top:20px;
}
.mountain-divider path:nth-child(1){ fill:var(--color-blush-deep); opacity:.55; }
.mountain-divider path:nth-child(2){ fill:var(--color-blush); opacity:.7; }
.mountain-divider path:nth-child(3){ fill:var(--color-paper); }

/* ==================================================================
   DECORATIVE FLOURISH (elemento distintivo: filete floral dibujado a mano)
   ================================================================== */
.flourish{
  width:200px; height:24px;
  overflow:visible;
}
.flourish path{
  fill:none;
  stroke:var(--color-gold);
  stroke-width:1.4;
  stroke-linecap:round;
}
.flourish__dot{ fill:var(--color-rose); }

/* ==================================================================
   HERO
   ================================================================== */
.hero{
  max-width:var(--container);
  margin:0 auto;
  padding:110px 24px 84px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  position:relative;
}
.hero__eyebrow{
  font-family:var(--font-body);
  letter-spacing:.5em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--color-rose-dark);
  font-weight:500;
}
.hero__names{
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  font-weight:600;
  color:var(--color-charcoal);
  line-height:1.35;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15em;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero__name{ font-style:normal; }
.hero__name:first-child,
.hero__name:last-child{ color:var(--color-charcoal); }
.hero__amp{
  font-size:.55em;
  color:var(--color-gold);
  font-style:italic;
  font-family:var(--font-display);
}
.hero__divider{ margin:8px 0 4px; }
.hero__date{
  font-size:1.15rem;
  letter-spacing:.1em;
  color:var(--color-charcoal-soft);
  font-family:var(--font-display);
}
.hero__welcome{
  max-width:540px;
  font-size:1.05rem;
  color:var(--color-charcoal-soft);
  margin-top:6px;
  font-family:var(--font-display);
  font-style:italic;
}
.hero__cta{ margin-top:22px; }

/* ==================================================================
   BOTONES
   ================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:var(--radius-sm);
  padding:14px 32px;
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none;
}
.btn--primary{
  background:var(--color-rose-dark);
  color:var(--color-paper);
  box-shadow:var(--shadow-soft);
}
.btn--primary:hover{ transform:translateY(-2px); background:var(--color-rose); }
.btn--ghost{
  background:transparent;
  color:var(--color-rose-dark);
  border:1px solid var(--color-gold);
}
.btn--ghost:hover{ background:var(--color-white); border-color:var(--color-rose-dark); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ==================================================================
   ENCABEZADOS DE SECCIÓN
   ================================================================== */
.section-heading{
  max-width:640px;
  margin:0 auto 48px;
  text-align:center;
  padding:0 24px;
}
.section-heading__eyebrow{
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.72rem;
  color:var(--color-rose-dark);
  font-weight:500;
}
.section-heading__title{
  font-size:clamp(2rem, 4vw, 2.7rem);
  font-weight:500;
  margin:12px 0 14px;
  letter-spacing:.01em;
}
.section-heading__subtitle{
  color:var(--color-charcoal-soft);
  font-size:1rem;
  font-family:var(--font-display);
  font-style:italic;
  margin-top:16px;
}

/* ==================================================================
   SECCIÓN REGALOS
   ================================================================== */
.gifts{ max-width:var(--container); margin:60px auto; padding:0 24px; }

.gifts__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.gifts__loading, .messages__loading{
  grid-column:1 / -1;
  text-align:center;
  color:var(--color-charcoal-soft);
  padding:40px 0;
  font-style:italic;
}

/* ---- Tarjeta de regalo ---- */
.gift-card{
  background:var(--color-paper);
  border-radius:var(--radius-lg);
  padding:32px 28px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--color-gold-soft);
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.gift-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity:.7;
}
.gift-card:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -22px rgba(74,68,54,.4); }

.gift-card__icon{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--color-blush);
  border:1px solid var(--color-gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  position:relative; z-index:1;
}
.gift-card__name{
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.02em;
  position:relative; z-index:1;
}
.gift-card__goal{
  margin-top:auto;
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--color-charcoal-soft);
  position:relative; z-index:1;
}
.gift-card__goal strong{
  color:var(--color-rose-dark);
  font-weight:600;
}
.gift-card__goal--open{
  color:var(--color-rose-dark);
  font-style:italic;
  padding:8px 0 14px;
}

/* ---- Barra de progreso "cinta de raso" (elemento firma) ---- */
.progress-bar{
  position:relative;
  width:100%;
  height:12px;
  border-radius:999px;
  background:var(--color-blush);
  overflow:hidden;
  border:1px solid var(--color-gold-soft);
}
.progress-bar__fill{
  position:absolute;
  inset:0 auto 0 0;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-gold), var(--color-rose-dark));
  transition:width .8s cubic-bezier(.4,0,.2,1);
}
.progress-bar__fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 6px, transparent 6px 14px);
  mix-blend-mode:overlay;
}
.progress-bar--mini{ height:10px; }

.gift-card__cta{
  margin-top:6px;
  width:100%;
  position:relative; z-index:1;
}

/* Sello dorado cuando un regalo llega al 100% */
.gift-card__badge{
  position:absolute;
  top:18px; right:18px;
  background:var(--color-paper);
  color:var(--color-gold);
  border:1px solid var(--color-gold);
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  z-index:2;
  font-weight:600;
}

/* ==================================================================
   MODAL
   ================================================================== */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(59,42,47,.45);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }

.modal{
  background:var(--color-white);
  width:100%;
  max-width:500px;
  max-height:92vh;
  overflow-y:auto;
  border-radius:26px 26px 0 0;
  padding:34px 28px 30px;
  position:relative;
  transform:translateY(24px);
  transition:transform .3s ease;
  box-shadow:0 -20px 60px rgba(59,42,47,.3);
}
.modal-overlay.is-open .modal{ transform:translateY(0); }

@media (min-width:640px){
  .modal-overlay{ align-items:center; }
  .modal{ border-radius:26px; }
}

.modal__close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--color-blush-deep);
  background:var(--color-white);
  color:var(--color-charcoal-soft);
  cursor:pointer;
  font-size:.9rem;
  transition:background .15s ease;
}
.modal__close:hover{ background:var(--color-blush); }

.modal__eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.68rem;
  color:var(--color-rose-dark);
  font-weight:500;
}
.modal__title{ font-size:1.9rem; margin:6px 0 16px; font-weight:500; }

.modal__progress-mini{
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px;
  font-size:.8rem;
  color:var(--color-charcoal-soft);
}
.modal__progress-mini .progress-bar{ flex:1; }
.modal__progress-mini--open{
  justify-content:flex-start;
  color:var(--color-rose-dark);
  font-family:var(--font-display);
  font-style:italic;
  font-size:.95rem;
}

.transfer-box{
  background:var(--color-blush);
  border:1px solid var(--color-gold-soft);
  border-radius:var(--radius-md);
  padding:18px;
  margin-bottom:22px;
}
.transfer-box__title{
  font-family:var(--font-display);
  font-size:1.08rem;
  font-weight:600;
  color:var(--color-rose-dark);
  margin-bottom:12px;
}
.transfer-box__row{
  display:grid;
  grid-template-columns:48px minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(92,102,71,.16);
}
.transfer-box__label{
  font-size:.78rem;
  color:var(--color-charcoal-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.transfer-box__row strong{
  min-width:0;
  font-family:var(--font-display);
  font-size:.96rem;
  color:var(--color-charcoal);
  overflow-wrap:anywhere;
}
.copy-button{
  border:1px solid var(--color-rose-dark);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-rose-dark);
  padding:6px 9px;
  font-size:.76rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.copy-button:hover,
.copy-button.is-copied{
  background:var(--color-rose-dark);
  color:var(--color-paper);
}
.transfer-box__note{
  margin-top:10px;
  color:var(--color-charcoal-soft);
  font-size:.78rem;
  line-height:1.45;
}

.modal__amounts legend{
  font-size:.85rem;
  font-weight:500;
  margin-bottom:10px;
  color:var(--color-charcoal);
}
.modal__amounts{ border:none; padding:0; margin:0 0 18px; }

.modal__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  font-weight:500;
  color:var(--color-charcoal);
  margin-bottom:16px;
}
.modal__optional{ font-weight:400; color:var(--color-charcoal-soft); }
.modal__field input,
.modal__field textarea{
  font-family:var(--font-body);
  font-size:.95rem;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--color-blush-deep);
  background:var(--color-bg);
  color:var(--color-charcoal);
  resize:vertical;
}
.modal__field input:focus,
.modal__field textarea:focus{
  outline:none;
  border-color:var(--color-rose);
  background:var(--color-white);
}

.modal__error{
  color:#a13333;
  background:#fbe6e6;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:.84rem;
  margin-bottom:14px;
}

.modal__submit{ width:100%; }
.modal__disclaimer{
  margin-top:12px;
  font-size:.76rem;
  color:var(--color-charcoal-soft);
  text-align:center;
  line-height:1.5;
}

/* ==================================================================
   MENSAJES DE INVITADOS
   ================================================================== */
.messages{
  background:linear-gradient(180deg, transparent, var(--color-blush) 12%, var(--color-blush) 88%, transparent);
  padding:70px 24px 90px;
  margin-top:40px;
  position:relative;
}
.messages__list{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.message-card{
  background:var(--color-paper);
  border-radius:var(--radius-md);
  padding:22px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--color-gold-soft);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.message-card__quote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--color-charcoal);
  line-height:1.5;
}
.message-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.78rem;
  color:var(--color-charcoal-soft);
}
.message-card__name{ font-weight:600; color:var(--color-rose-dark); }

/* ==================================================================
   FOOTER
   ================================================================== */
.footer{
  text-align:center;
  padding:10px 24px 56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  position:relative;
  overflow:hidden;
}
.footer__divider{ margin-bottom:14px; position:relative; z-index:1; }
.footer__names{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.5rem;
  color:var(--color-charcoal);
  position:relative; z-index:1;
}
.footer__note{ color:var(--color-charcoal-soft); font-size:.92rem; font-family:var(--font-display); font-style:italic; position:relative; z-index:1; }
.footer__legal{ color:var(--color-charcoal-soft); font-size:.74rem; opacity:.75; max-width:420px; position:relative; z-index:1; margin-top:6px; }

/* ==================================================================
   TOAST
   ================================================================== */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translate(-50%, 20px);
  background:var(--color-charcoal);
  color:var(--color-white);
  padding:14px 22px;
  border-radius:999px;
  font-size:.88rem;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:100;
  max-width:90vw;
  text-align:center;
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 980px){
  .gifts__grid{ grid-template-columns:repeat(2, 1fr); }
  .messages__list{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .hero{ padding:70px 20px 56px; }
  .gifts__grid{ grid-template-columns:1fr; }
  .messages__list{ grid-template-columns:1fr; }
  .gift-card{ padding:24px 20px 22px; }
  .transfer-box__row{ grid-template-columns:42px minmax(0, 1fr); }
  .copy-button{ grid-column:2; justify-self:start; }
}