/*
 * Código de vestimenta: la lámina «Dress code» a todo el ancho (bloque
 * «vestimenta», HTML en assets/bloques.js → vestimentaLamina()).
 *
 * Calca la imagen que mandó Mario el 2026-11-09 (referencias-boda/
 * referencias/DressCode.png): papel #eae8dc, «Código de vestimenta» con un
 * filete y su florón, «DRESS CODE» en romana grande, «Formal / Elegante»
 * entre filetes, las diez invitadas con «Para ellas» a la izquierda, los
 * colores recomendados, un divisor con florón, los seis invitados con «Para
 * ellos» y la ramita, y abajo, entre filetes, «Evitar», «Detalles que suman»
 * y el agradecimiento.
 *
 * Las ilustraciones, la ramita, el florón y los íconos son recortes de la
 * misma imagen (assets/vestimenta/). Las medidas de escritorio salen de la
 * imagen: la lámina mide 1056 px de ancho, así que 1cqi = 10,56 px de ella.
 * En el teléfono todo va en columna y los textos no bajan de un mínimo.
 *
 * Todo cuelga de .dc-seccion con colores y letras propios: se ve igual en
 * cualquier tema y los estilos del tema no se cuelan.
 */

.dc-seccion {
  --dc-papel: #eae8dc;
  --dc-tinta: #231a16;
  --dc-rotulo: #2e2a22;
  --dc-texto: #45423a;
  --dc-suave: #5c5a4e;
  --dc-filete: #b4b0a5;
  --dc-raya: #85807a;
  --dc-romana: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, 'Times New Roman', serif;
  --dc-sans: 'Montserrat', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: relative;
  width: 100%;
  margin: var(--entre-pliegos, 72px) 0 0;
  padding: 0;
}

.dc-lamina {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: clamp(28px, 3vw + 12px, 48px) clamp(16px, 3vw, 40px) clamp(40px, 4vw + 16px, 72px);
  color: var(--dc-texto);
  font-family: var(--dc-sans);
  font-weight: 400;
  text-align: center;
  background: var(--dc-papel);
}

.dc-contenido {
  container-type: inline-size;
  position: relative;
  display: grid;
  width: min(100%, 1080px);
  margin: 0 auto;
}

/* Sin especificidad: cualquier regla de la lámina le gana */
.dc-lamina :where(h2, h3, p, ul, figure) {
  margin: 0;
}

.dc-lamina :where(ul) {
  padding: 0;
  list-style: none;
}

.dc-lamina h3 {
  font-family: var(--dc-sans);
}

/* ---------- Encabezado ---------- */

.dc-cabecera {
  position: relative;
  display: grid;
  justify-items: center;
}

.dc-titulo {
  display: grid;
  justify-items: center;
  font-weight: inherit;
}

.dc-ante {
  font-family: var(--dc-sans);
  font-weight: 500;
  font-size: max(0.78rem, 2.25cqi);
  line-height: 1.2;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

/* El filete con el florón al medio (el florón es un recorte de la lámina) */
.dc-floron {
  display: block;
  height: max(12px, 1.8cqi);
  background: url('vestimenta/floron.webp') center / auto 100% no-repeat;
}

.dc-cabecera .dc-floron {
  width: min(46cqi, 100%);
  margin-top: 1.1cqi;
  background:
    url('vestimenta/floron.webp') center / auto 100% no-repeat,
    linear-gradient(var(--dc-filete), var(--dc-filete)) center / 100% 1px no-repeat;
}

.dc-grande {
  margin-top: 0.5cqi;
  font-family: var(--dc-romana);
  font-weight: 600;
  font-size: max(2.5rem, 12.4cqi);
  line-height: 0.92;
  letter-spacing: 0.015em;
  padding-left: 0.015em;
  text-transform: uppercase;
  color: var(--dc-tinta);
}

.dc-codigo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8cqi;
  width: 100%;
  margin-top: 0.6cqi;
  font-size: max(0.82rem, 2.3cqi);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

.dc-codigo::before,
.dc-codigo::after {
  content: '';
  flex: 0 0 14cqi;
  height: 1px;
  background: var(--dc-filete);
}

.dc-codigo.por-confirmar {
  opacity: 0.7;
}

.dc-nota {
  max-width: 40em;
  margin-top: 1.6cqi;
  font-style: italic;
  font-size: max(0.88rem, 1.6cqi);
  line-height: 1.5;
  color: var(--dc-texto);
}

.dc-nota[hidden] {
  display: none;
}

/* La ramita de arriba, pegada al borde izquierdo de la lámina */
.dc-hoja {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

.dc-hoja-1 {
  left: 0;
  top: 14.4cqi;
  width: 10cqi;
}

/* ---------- Ellas y ellos: el texto a la izquierda, la fila de figuras ---------- */

.dc-grupo {
  position: relative;
}

.dc-grupo-ellas {
  margin-top: 2.4cqi;
}

.dc-grupo-ellos {
  margin-top: 1.2cqi;
}

.dc-texto {
  position: absolute;
  z-index: 1;
  text-align: left;
}

.dc-grupo-ellas .dc-texto {
  left: 1.5%;
  top: 6.1cqi;
  width: 12.6cqi;
}

.dc-grupo-ellos .dc-texto {
  left: 2.65%;
  top: 2.8cqi;
  width: 13.4cqi;
}

.dc-quien {
  font-weight: 500;
  font-size: max(0.92rem, 1.8cqi);
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

/* La rayita de debajo */
.dc-quien::after {
  content: '';
  display: block;
  width: 3cqi;
  min-width: 22px;
  height: 1.5px;
  margin-top: 1.5cqi;
  background: var(--dc-raya);
}

.dc-texto p {
  margin-top: 2cqi;
  font-size: max(0.8rem, 1.62cqi);
  line-height: 1.68;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dc-texto);
}

.dc-texto p + p {
  margin-top: 0.8em;
}

/* La ramita de abajo, debajo del texto de «Para ellos» */
.dc-hoja-2 {
  position: relative;
  display: block;
  left: -0.8cqi;
  width: 10.2cqi;
  margin-top: 2.4cqi;
}

/* La fila: la ilustración y, encima, los vestidos o trajes de otro color.
   Cada capa trae las sombras de la tela en gris y la silueta en el alfa:
   con hard-light el gris medio deja el color tal cual, lo oscuro lo sombrea
   y lo claro lo ilumina; la máscara la recorta a la prenda. */
.dc-fila {
  position: relative;
  isolation: isolate;
}

.dc-fila img {
  display: block;
  width: 100%;
  height: 100%;
}

.dc-fila-ellas {
  margin-left: 10%;
  width: 89.9%;
}

.dc-fila-ellos {
  margin-left: 17.3%;
  width: 80.5%;
}

.dc-tinte {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* ---------- Colores recomendados ---------- */

.dc-bloque-colores {
  display: grid;
  gap: 1.7cqi;
  margin-top: 2.2cqi;
}

.dc-rotulo {
  font-weight: 500;
  font-size: max(0.85rem, 1.95cqi);
  line-height: 1.2;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

.dc-colores {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  justify-items: center;
  width: 94%;
  margin: 0 auto;
}

.dc-color {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.1cqi;
}

.dc-circulo {
  display: block;
  width: 7.2cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c, transparent);
}

/* Una palabra por línea, como en la lámina («Amarillo / mostaza») */
.dc-color-nombre {
  width: min-content;
  font-size: max(0.6rem, 1.4cqi);
  line-height: 1.42;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc-suave);
}

/* ---------- El divisor con florón ---------- */

.dc-divisor {
  display: flex;
  justify-content: center;
  width: 94.7%;
  height: max(12px, 1.8cqi);
  margin: 3.4cqi auto 0;
  background: linear-gradient(var(--dc-filete), var(--dc-filete)) center / 100% 1px no-repeat;
}

.dc-divisor .dc-floron {
  width: 4cqi;
  min-width: 26px;
  height: 100%;
}

/* ---------- Abajo: evitar, detalles que suman y gracias ---------- */

.dc-pie {
  display: grid;
  grid-template-columns: 25.2fr 51.8fr 23fr;
  justify-self: center;
  width: 94.7%;
  margin-top: 1cqi;
  border-top: 1px solid var(--dc-filete);
  color: var(--dc-texto);
}

.dc-pie > * {
  min-width: 0;
  margin-top: 1.4cqi;
  padding: 0 1.4cqi 0.6cqi;
}

.dc-pie > * + * {
  border-left: 1px solid var(--dc-filete);
}

.dc-evitar {
  display: flex;
  align-items: flex-start;
  gap: 1.5cqi;
  padding-left: 0;
  padding-right: max(8px, 0.8cqi);
  text-align: left;
}

.dc-evitar img {
  flex: 0 0 auto;
  width: 7.6cqi;
  height: auto;
  margin-top: 1.2cqi;
}

.dc-evitar h3 {
  margin-top: 2cqi;
  font-weight: 600;
  font-size: max(0.8rem, 1.5cqi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

.dc-evitar p {
  margin-top: 0.9cqi;
  font-weight: 500;
  font-size: max(0.74rem, 1.3cqi);
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dc-detalles h3 {
  font-weight: 500;
  font-size: max(0.82rem, 1.9cqi);
  line-height: 1.2;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: var(--dc-rotulo);
}

.dc-detalles ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1cqi;
  margin-top: 0.6cqi;
}

.dc-detalles li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2cqi;
}

.dc-detalles img {
  width: 6.4cqi;
  height: auto;
}

.dc-detalles span {
  max-width: 13em;
  font-weight: 500;
  font-size: max(0.7rem, 1.36cqi);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
}

.dc-gracias {
  display: grid;
  align-content: center;
  font-weight: 500;
  font-size: max(0.78rem, 1.45cqi);
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Ideas y fotos de referencia ---------- */

.dc-ideas {
  display: flex;
  justify-content: center;
  margin-top: 4cqi;
}

.dc-lamina .vestimenta-fotos {
  margin-top: 4cqi;
}

/* ---------- Teléfono y pantallas angostas: en columna ---------- */

@container (max-width: 899px) {
  .dc-ante {
    font-size: max(0.72rem, 3.3cqi);
  }

  .dc-cabecera .dc-floron {
    width: 72cqi;
    margin-top: 2cqi;
  }

  .dc-grande {
    margin-top: 2.4cqi;
    font-size: 15.4cqi;
  }

  .dc-codigo {
    margin-top: 3.4cqi;
    font-size: max(0.74rem, 3.4cqi);
    gap: 3.4cqi;
  }

  .dc-codigo::before,
  .dc-codigo::after {
    flex-basis: 10cqi;
  }

  .dc-hoja-1 {
    top: 25cqi;
    width: 13cqi;
    left: -4cqi;
  }

  .dc-grupo .dc-texto {
    position: static;
    width: auto;
    text-align: center;
  }

  .dc-grupo-ellas {
    margin-top: 7cqi;
  }

  .dc-grupo-ellos {
    margin-top: 6cqi;
  }

  .dc-quien {
    font-size: max(0.9rem, 4.2cqi);
  }

  .dc-quien::after {
    margin: 2.4cqi auto 0;
  }

  .dc-texto p {
    max-width: 30ch;
    margin: 3cqi auto 0;
    font-size: max(0.76rem, 3.4cqi);
    line-height: 1.6;
    text-wrap: balance;
  }

  .dc-hoja-2 {
    display: none;
  }

  .dc-fila-ellas,
  .dc-fila-ellos {
    width: 100%;
    margin: 4.5cqi 0 0;
  }

  .dc-bloque-colores {
    gap: 4.5cqi;
    margin-top: 7cqi;
  }

  .dc-rotulo {
    font-size: max(0.8rem, 3.8cqi);
  }

  .dc-colores {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 5cqi;
    width: 100%;
  }

  .dc-color {
    gap: 2cqi;
  }

  .dc-circulo {
    width: 13cqi;
  }

  .dc-color-nombre {
    font-size: max(0.56rem, 2.7cqi);
  }

  .dc-divisor {
    width: 100%;
    height: 14px;
    margin-top: 7cqi;
  }

  .dc-pie {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 5cqi;
  }

  .dc-pie > * {
    margin-top: 0;
    padding: 6cqi 0;
  }

  .dc-pie > * + * {
    border-left: 0;
    border-top: 1px solid var(--dc-filete);
  }

  .dc-evitar {
    justify-content: center;
    align-items: center;
    gap: 5cqi;
  }

  .dc-evitar img {
    width: 18cqi;
    margin-top: 0;
  }

  .dc-evitar h3 {
    margin-top: 0;
    font-size: max(0.8rem, 3.6cqi);
  }

  .dc-evitar p {
    margin-top: 1.6cqi;
    font-size: max(0.74rem, 3.3cqi);
  }

  .dc-detalles h3 {
    font-size: max(0.8rem, 3.8cqi);
  }

  .dc-detalles ul {
    margin-top: 4cqi;
    gap: 3cqi;
  }

  .dc-detalles img {
    width: 16cqi;
  }

  .dc-detalles li {
    gap: 2cqi;
  }

  .dc-detalles span {
    font-size: max(0.62rem, 2.9cqi);
  }

  .dc-gracias {
    font-size: max(0.74rem, 3.4cqi);
  }
}