/* Estilo «Botánico»: acuarelas pintadas a mano (generadas con ChatGPT a partir de
   02-DOCS/wiki/producto/ilustraciones-botanico.md; preparadas con scripts/preparar-acuarelas-botanico.mjs).
   Cada color tiene su marco y su separador; los iconos son comunes. Toda la página es el MISMO papel de
   acuarela que el marco (baldosa sacada del centro liso del propio marco), para que no se note el borde.
   Contraste sobre el papel (#F4F0E5): texto 11,5 · suave 5,0 · eucalipto 6,3 · rosa palo 5,6 ·
   lavanda 6,1; blanco sobre cada acento ≥ 6,2. */
.boda--botanico {
  --b-fondo: #F4F0E5;
  --b-tarjeta: rgb(255 253 248 / .6);
  --b-texto: #2F3330;
  --b-suave: #5B625D;
  --b-borde: #D9D2C3;
  --b-sobre-acento: #FFFFFF;
  --b-radio: 18px;
  --ancho-marco: min(100vw, 38rem);
  /* El papel se tiñe con el fondo elegido (multiplicar: el blanco toma el color y el dibujo no cambia) */
  background: var(--b-tinte, #FFFFFF) var(--papel) center top / calc(var(--ancho-marco) * .5) repeat;
  background-blend-mode: multiply;
}
.boda--botanico[data-color="eucalipto"] { --b-acento: #3F5F57; --b-acento-texto: #3F5F57;
  --papel: url("/img/botanico/papel-eucalipto.jpg"); --marco: url("/img/botanico/marco-eucalipto.jpg");
  --separador: url("/img/botanico/separador-eucalipto.webp");
  --icono-ceremonia: url("/img/botanico/icono-ceremonia-eucalipto.webp");
  --icono-celebracion: url("/img/botanico/icono-celebracion-eucalipto.webp");
  --icono-autobus: url("/img/botanico/icono-autobus-eucalipto.webp");
  --icono-confirmar: url("/img/botanico/icono-confirmar-eucalipto.webp");
  --icono-fotos: url("/img/botanico/icono-fotos-eucalipto.webp"); }
.boda--botanico[data-color="rosa-palo"] { --b-acento: #8E4F59; --b-acento-texto: #8E4F59;
  --papel: url("/img/botanico/papel-rosa-palo.jpg"); --marco: url("/img/botanico/marco-rosa-palo.jpg");
  --separador: url("/img/botanico/separador-rosa-palo.webp"); }
.boda--botanico[data-color="lavanda"] { --b-acento: #5B5583; --b-acento-texto: #5B5583;
  --papel: url("/img/botanico/papel-lavanda.jpg"); --marco: url("/img/botanico/marco-lavanda.jpg");
  --separador: url("/img/botanico/separador-lavanda.webp");
  --icono-ceremonia: url("/img/botanico/icono-ceremonia-lavanda.webp");
  --icono-celebracion: url("/img/botanico/icono-celebracion-lavanda.webp");
  --icono-autobus: url("/img/botanico/icono-autobus-lavanda.webp");
  --icono-confirmar: url("/img/botanico/icono-confirmar-lavanda.webp");
  --icono-fotos: url("/img/botanico/icono-fotos-lavanda.webp"); }

/* Los huecos de decoración genéricos no se usan: todo va en el marco, los iconos y los separadores */
.boda--botanico .b-adorno--fondo,
.boda--botanico .b-adorno--portada-arriba,
.boda--botanico .b-adorno--portada-abajo { display: none; }

/* Portada: los nombres dentro del óvalo de la corona de acuarela; mensaje y botón debajo */
.boda--botanico .b-portada { padding: 0 0 3rem; gap: 1.4rem; background: transparent; }
.boda--botanico .b-portada-marco {
  display: grid; justify-items: center; align-content: center; gap: .6rem; text-align: center;
  width: var(--ancho-marco); aspect-ratio: 2 / 3; margin-inline: auto;
  padding: calc(var(--ancho-marco) * .2) calc(var(--ancho-marco) * .3) calc(var(--ancho-marco) * .32);
  background: var(--b-tinte, #FFFFFF) var(--marco) center / 100% 100% no-repeat;
  background-blend-mode: multiply; /* el marco se tiñe igual que el papel: no se nota la junta */
  /* bordes fundidos con el papel de la página (mask-composite DESPUÉS de mask, que lo reinicia) */
  -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--botanico .b-nombres { font-size: calc(var(--ancho-marco) * .11); line-height: 1.05; color: var(--b-acento-texto); }
.boda--botanico[data-tipografia="jardin"] .b-nombres { font-size: calc(var(--ancho-marco) * .085); }
.boda--botanico[data-tipografia="herbario"] .b-nombres { font-size: calc(var(--ancho-marco) * .062); letter-spacing: .08em; }
.boda--botanico[data-tipografia="herbario"] .b-y { font-family: 'EB Garamond', Georgia, serif; font-style: italic; }
.boda--botanico .b-y { font-size: .5em; color: var(--b-suave); }
.boda--botanico .b-antes { font-size: calc(var(--ancho-marco) * .022); }
.boda--botanico .b-fecha { font-size: calc(var(--ancho-marco) * .022); letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.boda--botanico .b-cuenta { font-size: calc(var(--ancho-marco) * .025); }
.boda--botanico .b-mensaje, .boda--botanico .b-portada > .b-boton { margin-inline: 1.25rem; }

/* Separador de acuarela bajo cada título y en el pie */
.boda--botanico .b-seccion h2::after,
.boda--botanico .b-adorno--pie {
  content: ""; display: block; width: min(80%, 18rem); aspect-ratio: 3 / 1; margin: .5rem auto 0;
  background: var(--separador) center / contain no-repeat;
}
.boda--botanico .b-adorno--pie { position: relative; width: min(70%, 16rem); margin: 0 auto .8rem; }

/* Iconos de acuarela por sección. Cada color puede tener su juego (--icono-* en su bloque de color;
   B12–B21 de ilustraciones-botanico.md); si falta, se usan los de rosas. */
.boda--botanico .b-tarjeta::before,
.boda--botanico .b-autobus::before,
.boda--botanico #confirmar h2::before,
.boda--botanico #album h2::before {
  content: ""; display: block; margin: 0 auto .5rem; background: center / contain no-repeat;
}
.boda--botanico .b-tarjeta::before { width: 8rem; aspect-ratio: 1; }
.boda--botanico .b-tarjeta:nth-child(1)::before { background-image: var(--icono-ceremonia, url("/img/botanico/icono-ceremonia.webp")); }
.boda--botanico .b-tarjeta:nth-child(2)::before { background-image: var(--icono-celebracion, url("/img/botanico/icono-celebracion.webp")); }
.boda--botanico .b-autobus { display: grid; justify-items: center; gap: .4rem; }
.boda--botanico .b-autobus::before { width: 11rem; aspect-ratio: 380 / 224; background-image: var(--icono-autobus, url("/img/botanico/icono-autobus.webp")); }
.boda--botanico #confirmar h2::before { width: 7rem; aspect-ratio: 1; background-image: var(--icono-confirmar, url("/img/botanico/icono-confirmar.webp")); }
.boda--botanico #album h2::before { width: 7rem; aspect-ratio: 1; background-image: var(--icono-fotos, url("/img/botanico/icono-fotos.webp")); }

/* Tarjetas y cuestionario: papel sobre el mismo papel, sin cajas de otro color */
.boda--botanico .b-tarjeta, .boda--botanico .b-form { background: var(--b-tarjeta); box-shadow: 0 1px 0 var(--b-borde); }
.boda--botanico .q-detalle, .boda--botanico .q-resumen,
.boda--botanico .b-form fieldset, .boda--botanico [class^="q-"] fieldset { background: transparent; }
.boda--botanico .q-evento, .boda--botanico .q-ficha { background: transparent; border: 1px solid var(--b-borde); }
.boda--botanico .q-aviso, .boda--botanico .q-ejemplo { background: rgb(255 253 248 / .7); }
.boda--botanico .b-boton { border-radius: 999px; padding-inline: 2rem; }