/* Portadas de la colección de estilos (rehechas en código el 5 nov 2026 para que todas se vean
   igual en el mismo móvil). Diseños de ejemplo de Studio Union Design: personas, nombres, fechas
   y fotos ficticios; las fotos están creadas con IA. Cada portada ocupa una pantalla de móvil. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  object-fit: cover;
}

p,
h1 {
  margin: 0;
}

.small-caps {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.script {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
}

.rule {
  width: 64px;
  height: 1px;
  margin: 14px auto;
  background: currentColor;
  opacity: 0.45;
}

.sprig {
  width: 54px;
  height: 18px;
}

/* ---------- Minimal · olivo ---------- */
.olivo {
  justify-content: center;
  padding: 40px 0;
  color: #3a3a33;
  background: #f6f3ed;
}

.olivo .lead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  color: #6b6a5c;
}

.olivo .lead::before,
.olivo .lead::after {
  content: "";
  width: 42px;
  height: 1px;
  background: #b9b6a6;
}

.olivo h1 {
  margin: 10px 0 18px;
  font-family: "Prata", serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.olivo h1 small {
  font-size: 16px;
}

.olivo .photo {
  width: 100%;
  height: 290px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.olivo .date {
  margin-top: 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  letter-spacing: 0.22em;
}

.olivo .sprig {
  margin: 12px 0 10px;
  color: #8b8b6c;
}

.olivo .venue {
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.olivo .city {
  margin-top: 3px;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-style: italic;
}

.olivo .buttons {
  display: grid;
  gap: 10px;
  width: 78%;
  margin-top: 30px;
}

.olivo .buttons span {
  padding: 11px 0;
  border: 1px solid #3a3a33;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Editorial · arco dorado ---------- */
.arco {
  justify-content: center;
  gap: 0;
  padding: 40px 34px;
  color: #c9a96e;
  background: #1f1e1c;
}

.arco .dot {
  width: 5px;
  height: 5px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: currentColor;
}

.arco .arch {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(201, 169, 110, 0.7);
  border-radius: 999px 999px 0 0;
}

.arco .arch img {
  width: 100%;
  height: 360px;
  border-radius: 999px 999px 0 0;
  filter: grayscale(1);
}

.arco h1 {
  margin-top: 30px;
  font-family: "Marcellus", serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.arco .small-caps {
  margin-top: 10px;
  color: #e8e1d3;
}

.arco .sprig {
  margin: 22px 0 18px;
}

.arco .date {
  font-family: "Marcellus", serif;
  font-size: 18px;
  letter-spacing: 0.24em;
  color: #e8e1d3;
}

/* ---------- Formal · caligrafía ---------- */
.caligrafia {
  justify-content: center;
  padding: 40px 26px;
  color: #2b2724;
  background: #f8f5ef;
}

.caligrafia h1 {
  font-family: "Pinyon Script", cursive;
  font-size: 66px;
  font-weight: 400;
  line-height: 0.95;
}

.caligrafia h1 span {
  display: block;
  padding-left: 60px;
}

.caligrafia .photo {
  width: 100%;
  height: 238px;
  margin: 26px 0 24px;
}

.caligrafia .families {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.caligrafia .date {
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.caligrafia .venue {
  margin-top: 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.caligrafia .note {
  margin-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-style: italic;
}

/* ---------- Monocromo · film ---------- */
.film {
  justify-content: center;
  padding: 40px 0;
  color: #1c1c1c;
  background: #ecebe8;
}

.film h1 {
  margin: 14px 0 26px;
  font-family: "Prata", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.06em;
}

.film h1 .script {
  display: block;
  margin: 2px 0;
  font-size: 30px;
  letter-spacing: 0;
}

/* Tira de película con perforaciones arriba y abajo */
.film .strip {
  width: 100%;
  padding: 22px 14px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, #ecebe8 9px 19px) 0 6px / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, #ecebe8 9px 19px) 0 calc(100% - 6px) / 100% 9px no-repeat,
    #111;
  transform: rotate(-2deg);
}

.film .strip img {
  width: 100%;
  height: 150px;
  filter: grayscale(1);
}

.film .strip img + img {
  margin-top: 10px;
}

.film .after {
  margin-top: 30px;
}

.film .date {
  margin-top: 4px;
  font-family: "Prata", serif;
  font-size: 18px;
  letter-spacing: 0.24em;
}

/* ---------- Monocromo · trío ---------- */
.trio {
  justify-content: center;
  padding: 40px 38px;
  color: #1a1a1a;
  background: #f7f5f0;
}

.trio .lead {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-style: italic;
}

.trio .arch {
  width: 82%;
  height: 330px;
  margin: 20px 0 26px;
  border-radius: 999px 999px 0 0;
  filter: grayscale(1);
}

.trio h1 {
  font-family: "Prata", serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.trio .dates {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  font-family: "Prata", serif;
  font-size: 30px;
}

.trio .dates i {
  width: 1px;
  height: 30px;
  background: #1a1a1a;
  opacity: 0.4;
}

.trio .small-caps {
  margin-top: 16px;
}

/* ---------- Monocromo · nocturno ---------- */
.nocturno {
  justify-content: space-between;
  padding-bottom: 46px;
  color: #f1eee8;
  background: #0d0d0d;
}

.nocturno .photo {
  width: 100%;
  height: 62%;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}

.nocturno h1 {
  margin-top: -34px;
  font-family: "Cormorant Garamond", serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.nocturno .script {
  margin-top: -4px;
  font-size: 30px;
}

.nocturno .rule {
  margin: 20px auto 16px;
}

.nocturno .date {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.nocturno .day {
  margin: 4px 0;
  font-size: 22px;
}