/* ============================================================
   BODA DIEGO & ESTEFANY — lenguaje visual
   ------------------------------------------------------------
   Tomado de la invitación que ellos hicieron en Canva: fondo
   blanco, tinta casi negra, caligráfica para los títulos y
   serif en versalitas muy espaciadas para las etiquetas.
   Filetes finos, nada de sombras duras, nada de color.

   El único acento es un dorado apagado, y se usa con cuentagotas
   —un punto, una línea— igual que en la invitación. En cuanto se
   usa de más deja de verse de boda y empieza a verse de plantilla.
   ============================================================ */
:root {
  /* --- superficie --- */
  --papel: #FFFFFF;
  --papel-2: #FAF8F5;          /* bloques alternos, apenas perceptible */
  --tinta: #0E1318;            /* medido de la invitación: rgb(13,18,22) */
  --tinta-suave: #4A5058;
  --tinta-tenue: #8A9098;
  --filete: rgba(14, 19, 24, .13);
  --oro: #A68A5B;              /* el puntito junto a "ITINERARIO" */

  /* --- tipografía ---
     Pinyon Script para el nombre de los novios y poco más.
     EB Garamond para todo lo demás: es la que más se parece al
     serif de la invitación y tiene versalitas que aguantan el
     letter-spacing abierto sin deshacerse. */
  --display: "Pinyon Script", "Apple Chancery", cursive;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;

  /* --- ritmo --- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;

  --radio: 2px;                /* casi recto: el papel no tiene esquinas redondas */
  --trans: .35s cubic-bezier(.32, .72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.0625rem;        /* 17px: el serif pide un punto más que un sans */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
   TIPOGRAFÍA
   ------------------------------------------------------------ */
.caligrafia {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  /* La caligráfica trae su propio aire: con letter-spacing se
     rompen los enlaces entre letras y deja de parecer escrita. */
  letter-spacing: 0;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
}

/* Las etiquetas de la invitación son versalitas con MUCHO espacio.
   Es el gesto que más identifica ese diseño, más que la caligráfica. */
.etiqueta {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .7rem;
  color: var(--tinta-suave);
  /* El letter-spacing agrega espacio DESPUÉS de la última letra y
     descentra el bloque. Se compensa con el mismo valor. */
  text-indent: .28em;
}

.titulo-seccion {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: .06em;
  margin: 0;
}

.texto-chico { font-size: .9rem; color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }
.centrado { text-align: center; }

/* ------------------------------------------------------------
   ESTRUCTURA
   ------------------------------------------------------------ */
.hoja {
  max-width: 620px;            /* una hoja, no una página web */
  margin: 0 auto;
  padding: var(--e-6) var(--e-5);
}
@media (max-width: 480px) { .hoja { padding: var(--e-5) var(--e-4); } }

.seccion { padding: var(--e-7) 0; }

/* El filete con el corazón al centro, que en la invitación separa
   cada sección. Aquí se hace con CSS para no cargar una imagen. */
.filete-corazon {
  display: flex; align-items: center; gap: var(--e-3);
  color: var(--filete);
  margin: var(--e-6) 0;
}
.filete-corazon::before,
.filete-corazon::after {
  content: ""; flex: 1; height: 1px; background: currentColor;
}
.filete-corazon svg { width: 22px; height: 22px; color: var(--tinta-tenue); flex: 0 0 auto; }

/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------
   Rectos, de filete, sin relleno salvo el principal. Un botón con
   degradado o esquina redonda aquí rompe el tono de inmediato.
   ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  min-height: 52px;            /* dedo, de noche, en una fiesta */
  padding: var(--e-3) var(--e-6);
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: none;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  text-indent: .2em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--trans), color var(--trans), opacity var(--trans);
}
.boton:hover { background: var(--tinta); color: var(--papel); }
.boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.boton[disabled]:hover { background: none; color: var(--tinta); }

.boton-solido { background: var(--tinta); color: var(--papel); }
.boton-solido:hover { background: var(--tinta-suave); color: var(--papel); }

.boton-ancho { width: 100%; }

/* ------------------------------------------------------------
   CAMPOS
   ------------------------------------------------------------ */
.campo { margin-bottom: var(--e-5); }
.campo label {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .68rem;
  color: var(--tinta-suave);
}
.campo input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) var(--e-4);
  border: 0; border-bottom: 1px solid var(--filete);
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.0625rem;        /* 16px o más, o iOS hace zoom al enfocar */
  transition: border-color var(--trans);
}
.campo input[type="text"]:focus {
  outline: 0;
  border-bottom-color: var(--oro);
}
.campo input::placeholder { color: var(--tinta-tenue); opacity: 1; }

/* ------------------------------------------------------------
   AVISOS
   ------------------------------------------------------------ */
.aviso {
  padding: var(--e-3) var(--e-4);
  border-left: 2px solid var(--oro);
  background: var(--papel-2);
  font-size: .88rem;
  color: var(--tinta-suave);
}
.aviso-error { border-left-color: #A8443A; color: #7D312A; }

/* ------------------------------------------------------------
   LA COLA DE SUBIDA
   ------------------------------------------------------------
   Cada archivo es un renglón con su estado. Es la parte que la
   gente va a mirar mientras espera, así que dice en palabras qué
   está pasando, no solo una barra.
   ------------------------------------------------------------ */
.cola { list-style: none; margin: var(--e-5) 0 0; padding: 0; }

.cola-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--filete);
}

.cola-miniatura {
  width: 54px; height: 54px;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--papel-2);
}

.cola-nombre {
  font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cola-estado { font-size: .75rem; color: var(--tinta-tenue); }

.cola-progreso {
  height: 2px; margin-top: 4px;
  background: var(--filete);
  overflow: hidden;
}
.cola-progreso span {
  display: block; height: 100%; width: 0;
  background: var(--oro);
  /* transform y no width: no obliga a recalcular la página en cada
     cuadro, que en un celular de gama baja se nota. */
  transform-origin: left;
  transition: width .2s linear;
}

.cola-item[data-estado="listo"] .cola-estado { color: #4A7A52; }
.cola-item[data-estado="error"] .cola-estado { color: #A8443A; }

.cola-reintentar {
  border: 0; background: none; cursor: pointer;
  font-family: var(--serif); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--oro);
  min-height: 44px; padding: 0 var(--e-2);
}