/* Estilo «Bordado»: tela de lino, nombres bordados dentro de un bastidor de madera, costuras en
   tarjetas y botones. Contraste sobre el lino (#EFE8DA): texto 10,8 · suave 5,9 · hilo rojo 6,8 ·
   azul marino 9,2 · verde oliva 6,3; blanco sobre cada hilo ≥ 7,7. */
.boda--bordado {
  /* Todo sobre el MISMO lino que el marco bordado (muestreado de la ilustración: 216,199,179) para
     que la página parezca una sola tela. Contraste sobre #D8C7B3: texto 8,6 · suave 5,5 · hilo rojo
     5,9 · azul marino 7,8 · verde oliva 5,9; blanco sobre cada hilo ≥ 9,1. */
  --b-fondo: #D8C7B3;
  --b-tarjeta: rgb(239 230 216 / .55);
  --b-texto: #2E2A25;
  --b-suave: #4F473D;
  --b-borde: #A8957C;
  --b-sobre-acento: #FFFFFF;
  --b-radio: 4px;
  /* El fondo es la MISMA tela del marco: un trozo del lino liso del centro del óvalo, repetido en espejo
     y a la misma escala que el marco, para que no se note dónde empieza la ilustración. */
  --ancho-marco: min(100vw, 38rem);
  /* La tela se tiñe con el fondo elegido (multiplicar), igual que el marco */
  background: var(--b-tinte, #FFFFFF) url("/img/bordado/tela-marco.jpg") center top / calc(var(--ancho-marco) * .4375) repeat;
  background-blend-mode: multiply;
}
.boda--bordado[data-color="hilo-rojo"] { --b-acento: #7E2228; --b-acento-texto: #7E2228; }
.boda--bordado[data-color="azul-marino"] { --b-acento: #22324F; --b-acento-texto: #22324F; }
.boda--bordado[data-color="verde-oliva"] { --b-acento: #3F4728; --b-acento-texto: #3F4728; }

/* Portada: marco bordado (ilustración propia, img/bordado/marco-portada.jpg) con los nombres
   bordados dentro del óvalo; el mensaje y el botón van debajo del marco. */
.boda--bordado .b-portada { padding: 0 0 3rem; gap: 1.4rem; background: transparent; } /* que se vea la tela de toda la página */
.boda--bordado .b-portada-marco {
  display: grid; justify-items: center; align-content: center; gap: .55rem; text-align: center;
  width: var(--ancho-marco); aspect-ratio: 2 / 3; margin-inline: auto;
  padding: calc(var(--ancho-marco) * .2) calc(var(--ancho-marco) * .26) calc(var(--ancho-marco) * .24);
  background: var(--b-tinte, #FFFFFF) url("/img/bordado/marco-portada.jpg") center / 100% 100% no-repeat;
  background-blend-mode: multiply; /* el marco se tiñe igual que la tela */
  /* bordes fundidos con la tela de la página: no se nota dónde acaba la ilustración */
  /* Bordes difuminados por los cuatro lados para que la tela del marco se funda con la del fondo.
     mask-composite va DESPUÉS de mask: el atajo «mask» lo reinicia y, si no, solo se difuminan los lados. */
  -webkit-mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent), linear-gradient(transparent, #000 2%, #000 98%, transparent);
  mask-composite: intersect;
}
.boda--bordado .b-nombres { width: 100%; gap: 0; font-size: 1rem; }
.boda--bordado .b-nombre { width: 100%; color: var(--b-acento-texto); line-height: 0; }
.boda--bordado .b-bordado { width: 100%; height: auto; display: block; overflow: visible; }
.boda--bordado .b-y { line-height: 1; font-family: var(--b-letra-titulo); font-size: calc(var(--ancho-marco) * .045); color: var(--b-suave); }
.boda--bordado .b-antes { font-size: calc(var(--ancho-marco) * .021); }
.boda--bordado .b-fecha { font-size: calc(var(--ancho-marco) * .022); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.boda--bordado .b-cuenta { font-size: calc(var(--ancho-marco) * .023); }
.boda--bordado .b-mensaje, .boda--bordado .b-portada > .b-boton { margin-inline: 1.25rem; }

/* Costuras: pespunte en tarjetas, formulario, botones y bajo los títulos */
.boda--bordado .b-tarjeta,
.boda--bordado .b-form { background: var(--b-tarjeta); outline: 2px dashed var(--b-borde); outline-offset: -8px; }
.boda--bordado .b-boton { outline: 1.5px dashed rgb(255 255 255 / .75); outline-offset: -6px; border-radius: 6px; }
.boda--bordado .b-boton:focus-visible { outline: 3px solid var(--b-acento); outline-offset: 3px; }
.boda--bordado .b-seccion h2::after {
  content: ""; display: block; width: min(80%, 18rem); aspect-ratio: 900 / 170; margin: .6rem auto 0;
  background: url("/img/bordado/separador.webp") center / contain no-repeat;
}
.boda--bordado .b-galeria span { outline: 1.5px dashed var(--b-borde); outline-offset: -5px; }

/* Iconos bordados por sección (ilustraciones propias, img/bordado/icono-*.webp) */
.boda--bordado .b-tarjeta::before,
.boda--bordado .b-autobus::before,
.boda--bordado #confirmar h2::before,
.boda--bordado #album h2::before {
  content: ""; display: block; margin: 0 auto .5rem; background: center / contain no-repeat;
}
.boda--bordado .b-tarjeta::before { width: 7.5rem; aspect-ratio: 1; }
.boda--bordado .b-tarjeta:nth-child(1)::before { background-image: url("/img/bordado/icono-ceremonia.webp"); }
.boda--bordado .b-tarjeta:nth-child(2)::before { background-image: url("/img/bordado/icono-celebracion.webp"); }
.boda--bordado .b-autobus { display: grid; justify-items: center; gap: .4rem; }
.boda--bordado .b-autobus::before { width: 11rem; aspect-ratio: 520 / 243; background-image: url("/img/bordado/icono-autobus.webp"); }
.boda--bordado #confirmar h2::before { width: 7rem; aspect-ratio: 1; background-image: url("/img/bordado/icono-confirmar.webp"); }
.boda--bordado #album h2::before { width: 7rem; aspect-ratio: 1; background-image: url("/img/bordado/icono-fotos.webp"); }

.boda--bordado .b-adorno--pie {
  display: block; position: relative; width: min(70%, 16rem); aspect-ratio: 900 / 170; margin: 0 auto .8rem;
  background: url("/img/bordado/separador.webp") center / contain no-repeat;
}

/* El cuestionario y las tarjetas son trozos de tela cosidos sobre la misma tela: nada de cajas de
   otro color dentro de otras */
.boda--bordado .q-detalle, .boda--bordado .q-resumen { background: transparent; }
.boda--bordado .q-evento, .boda--bordado .q-ficha { background: transparent; border: 1.5px dashed var(--b-borde); }
.boda--bordado .q-aviso, .boda--bordado .q-ejemplo { background: rgb(255 252 246 / .6); }
.boda--bordado .b-form fieldset, .boda--bordado [class^="q-"] fieldset { background: transparent; }
.boda--bordado .b-form input:not([type="radio"]):not([type="checkbox"]),
.boda--bordado .b-form textarea, .boda--bordado .b-form select { background: rgb(255 252 246 / .7); border-color: var(--b-borde); }