/* ============================================================
   L & A · Comparte tus fotos
   Paleta: crema + azul marino + dorado
   ============================================================ */

:root{
  --page:#efe8df;        /* fondo exterior */
  --cream:#faf6f0;       /* papel de la tarjeta */
  --paper:#ffffff;       /* cajas interiores */
  --ink:#16294a;         /* azul marino: títulos y botón */
  --muted:#5b6a80;       /* texto de apoyo */
  --gold:#b5894c;        /* dorado: acentos y script */
  --gold-soft:#d9c6a3;   /* dorado claro: bordes finos */
  --stone:#e9e1d8;       /* relleno del marco de foto */
  --line:#ddd2c4;        /* líneas divisorias */
  --success:#4c6a55;
}

*{box-sizing:border-box}

html{
  background:var(--page);
  color:var(--ink);
  font-family:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
}

body{margin:0;min-height:100svh}
button,input{font:inherit}

/* --- Lienzo -------------------------------------------------- */

.page-shell{
  min-height:100svh;
  display:grid;
  place-items:start center;
  padding:22px 16px;
}

/* Tarjeta con doble marco: borde exterior (.card) + filete dorado (.card-frame) */
.card{
  width:min(100%,620px);
  background:var(--cream);
  border:1px solid var(--line);
  padding:10px;
  text-align:center;
}

.card-frame{
  border:1px solid var(--gold-soft);
  padding:clamp(24px,6vw,46px) clamp(18px,5vw,40px) clamp(26px,5vw,38px);
}

/* --- Encabezado de la invitación ----------------------------- */

.invite{margin:0 0 clamp(22px,5vw,30px)}

.couple{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(42px,11vw,58px);
  line-height:1.08;
  letter-spacing:.005em;
}

.couple .amp{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  color:var(--gold);
}

/* Fecha con filetes laterales: el flex centra el texto y las líneas ocupan el resto */
.wed-date{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:330px;
  margin:16px auto 0;
  color:var(--ink);
  font-size:12px;
  letter-spacing:.24em;
  font-weight:400;
}
.wed-date::before,
.wed-date::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--gold-soft);
}

/* Texto manuscrito (se reutiliza en la firma final) */
.script{
  font-family:"Pinyon Script",cursive;
  color:var(--gold);
  font-size:clamp(26px,7vw,34px);
  line-height:1.3;
  margin:22px 0 0;
}

.invite-sub{
  margin:12px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(16px,4vw,19px);
  color:var(--muted);
}

/* --- Marco de la foto de los novios -------------------------- */

.couple-photo{
  margin:0 0 clamp(26px,6vw,34px);
  padding:0px;
  background:#ffffff00;
  border:0px solid var(--gold-soft);
}
.couple-photo span{
  display:grid;
  place-items:center;
  aspect-ratio:4/3;
  background:var(--stone);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:16px;
  color:#8d7f72;
}
.couple-photo img{display:block;width:100%;height:auto}

/* --- Bloque de texto ----------------------------------------- */

.eyebrow{
  margin:0 0 14px;
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--gold);
}

h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(32px,8vw,42px);
  line-height:1.16;
  margin:0 auto 18px;
  max-width:460px;
}

.intro{
  max-width:470px;
  margin:0 auto clamp(26px,6vw,32px);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(17px,4.4vw,19px);
  line-height:1.7;
  color:var(--muted);
  text-wrap:pretty;
}

/* --- Formulario ---------------------------------------------- */

.upload-form{display:grid;gap:18px}

.dropzone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:clamp(26px,6vw,34px) 20px;
  background:var(--paper);
  border:1px solid var(--gold-soft);
  cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.dropzone:hover,
.dropzone:focus-within,
.dropzone.dragover{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold-soft) inset;
}

.dropzone strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(21px,5vw,24px);
  color:var(--ink);
}
.dropzone > span:not(.camera-icon):not(.dropzone-cta){
  font-size:14px;
  color:var(--muted);
}

/* Botón falso: el input file real está oculto y se activa con el <label> */
.dropzone-cta{
  margin-top:10px;
  padding:11px 20px;
  border:1px solid var(--gold-soft);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--gold);
  transition:background .25s ease,color .25s ease;
}
.dropzone:hover .dropzone-cta{background:var(--gold);color:#fff;border-color:var(--gold)}

.camera-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:6px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  color:var(--gold);
}

/* Selección de archivos */
.selection{text-align:left}
.selection-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  font-size:13px;
}
.selection-copy strong{font-weight:500;color:var(--ink)}
.text-button{
  border:0;
  padding:4px;
  background:transparent;
  color:var(--gold);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.preview{position:relative;aspect-ratio:1;overflow:hidden;background:var(--stone)}
.preview img{width:100%;height:100%;object-fit:cover}
.preview-more{display:grid;place-items:center;font-size:13px;color:var(--gold)}

/* Botón principal */
.primary-button{
  appearance:none;
  border:0;
  min-height:56px;
  padding:0 26px;
  background:var(--ink);
  color:#fff;
  font-size:12px;
  font-weight:400;
  letter-spacing:.24em;
  cursor:pointer;
  transition:background .25s ease,opacity .25s ease;
}
.primary-button:hover:not(:disabled){background:#0f1d36}
.primary-button:disabled{opacity:.45;cursor:not-allowed}

.fineprint{margin:0;font-size:12px;color:#8a8279}

/* Progreso de subida */
.status-box{padding:14px 16px;background:var(--paper);border:1px solid var(--line);text-align:left}
.status-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:12px;color:var(--muted)}
.progress{height:4px;background:var(--stone);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--gold);transition:width .18s linear}

/* --- Confirmación -------------------------------------------- */

.success{padding-top:6px}
.success-icon{
  width:56px;height:56px;margin:0 auto 16px;
  display:grid;place-items:center;
  border:1px solid var(--gold-soft);border-radius:50%;
  color:var(--success);font-size:26px;
}
.success h2{
  margin:0 0 10px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;font-size:clamp(28px,7vw,34px);
}
.success p{
  margin:0 auto 24px;max-width:420px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;line-height:1.6;color:var(--muted);
}
.success .primary-button{width:100%}

/* --- Firma --------------------------------------------------- */

.sign{
  margin-top:clamp(28px,6vw,38px);
  padding-top:clamp(24px,5vw,30px);
  border-top:1px solid var(--line);
  display:grid;
  gap:10px;
}
.sign .script{margin:0;font-size:clamp(22px,5.5vw,26px)}
.sign-initials{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(22px,6vw,26px);
  letter-spacing:.14em;
  color:var(--ink);
}

/* Campo trampa anti-spam */
.hp{position:absolute!important;left:-10000px!important;opacity:0!important;pointer-events:none!important}

/* --- Animación de entrada ------------------------------------ */

@keyframes fade-up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Aparición escalonada de los bloques de la tarjeta */
.invite,
.couple-photo,
.eyebrow,
#page-title,
.intro,
.upload-form,
.sign{
  animation:fade-up .9s ease both;
}
.couple-photo{animation-delay:.12s}
.eyebrow{animation-delay:.2s}
#page-title{animation-delay:.26s}
.intro{animation-delay:.32s}
.upload-form{animation-delay:.38s}
.sign{animation-delay:.46s}

/* --- Responsivo ---------------------------------------------- */

@media(max-width:540px){
  .page-shell{padding:12px}
  .card{padding:6px}
  .preview-grid{grid-template-columns:repeat(4,1fr)}
  .wed-date{gap:12px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}