/* Sistema visual compartido por crear, editar y la invitación pública. */
.design-visual.design-thumbnail,
.editor-design-sample.design-thumbnail{
  position:relative;
  display:block;
  overflow:hidden;
  isolation:isolate;
  padding:14px 16px;
  text-align:left;
}
.design-visual.design-thumbnail{height:126px;}
.editor-design-sample.design-thumbnail{height:96px;}
.design-thumbnail .thumb-kicker,
.design-thumbnail .thumb-date,
.design-thumbnail .thumb-title{position:absolute;z-index:2;}
.design-thumbnail .thumb-kicker{
  top:15px;left:16px;
  font:700 8px/1.1 var(--font-body,'Inter',sans-serif);
  letter-spacing:.16em;text-transform:uppercase;opacity:.78;
}
.design-thumbnail .thumb-title{
  left:16px;right:16px;bottom:32px;
  margin:0;font:600 22px/1 var(--font-display,'Fraunces',serif);
}
.editor-design-sample.design-thumbnail .thumb-title{font-size:17px;bottom:26px;}
.design-thumbnail .thumb-date{
  left:16px;bottom:13px;
  font:600 8px/1 var(--font-body,'Inter',sans-serif);
  letter-spacing:.08em;opacity:.72;
}
.editor-design-sample.design-thumbnail .thumb-date{bottom:11px;font-size:7px;}
.design-thumbnail::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  inset:10px;border:1px solid currentColor;opacity:.28;
}
.design-thumbnail.variant-moderno .thumb-title,
.design-thumbnail.variant-cinematica .thumb-title{
  font-family:'Space Grotesk',var(--font-body,'Inter',sans-serif);
  text-transform:uppercase;letter-spacing:.025em;font-weight:700;
}
.design-thumbnail.variant-clasico .thumb-kicker,
.design-thumbnail.variant-clasico .thumb-date,
.design-thumbnail.variant-clasico .thumb-title,
.design-thumbnail.variant-clasica .thumb-kicker,
.design-thumbnail.variant-clasica .thumb-date,
.design-thumbnail.variant-clasica .thumb-title{text-align:center;left:14px;right:14px;}
.design-thumbnail.variant-editorial .thumb-kicker,
.design-thumbnail.variant-editorial .thumb-date,
.design-thumbnail.variant-editorial .thumb-title{left:52%;right:10px;}
.design-thumbnail.variant-editorial::after{left:12px;right:53%;border-width:0 0 1px 1px;}
.design-thumbnail.variant-juvenil .thumb-title{font-family:'Baloo 2',var(--font-body,'Inter',sans-serif);font-size:25px;}
.editor-design-sample.design-thumbnail.variant-juvenil .thumb-title{font-size:20px;}
.design-thumbnail.variant-gala .thumb-title{font-size:24px;}
.design-thumbnail.variant-gala::after{inset:8px 12px;}
.design-thumbnail.variant-minimal .thumb-title{top:34px;bottom:auto;font-size:24px;letter-spacing:-.045em;}
.editor-design-sample.design-thumbnail.variant-minimal .thumb-title{top:30px;font-size:19px;}
.design-thumbnail.variant-minimal::after{border-width:1px 0 0;inset:14px;}

.design-collection-heading{
  grid-column:1/-1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:12px 0 0;
  padding:13px 2px 9px;
  border-bottom:1px solid var(--paper-line,#e9e0d2);
}
.design-collection-heading strong{font:600 19px/1.2 var(--font-display,'Fraunces',serif);}
.design-collection-heading span{max-width:520px;color:var(--text-on-light-mute,#6b6472);font:500 11.5px/1.4 var(--font-body,'Inter',sans-serif);text-align:right;}

.design-thumbnail.family-decorativa{
  background-color:var(--design-bg,#f7f1e7);
  background-image:
    var(--design-ornament),
    radial-gradient(ellipse at center,color-mix(in srgb,var(--design-bg,#f7f1e7) 93%,transparent) 0 35%,transparent 72%),
    linear-gradient(145deg,var(--design-bg,#f7f1e7),var(--design-panel,#eadfce));
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:var(--design-fg,#302820);
}
.design-thumbnail.family-decorativa::after{
  inset:9px;
  border:1px solid var(--design-accent,#c9a15f);
  opacity:.48;
}
.design-thumbnail.family-decorativa .thumb-kicker{
  top:35px;left:18px;right:18px;text-align:center;
  color:var(--design-accent,#c9a15f);opacity:1;
}
.design-thumbnail.family-decorativa .thumb-title{
  top:52px;bottom:auto;left:22px;right:22px;text-align:center;
  color:var(--design-fg,#302820);font-size:21px;
  text-shadow:0 1px 8px var(--design-bg,#f7f1e7);
}
.design-thumbnail.family-decorativa .thumb-date{
  left:20px;right:20px;bottom:24px;text-align:center;
  color:var(--design-fg,#302820);opacity:.8;
}
.editor-design-sample.design-thumbnail.family-decorativa .thumb-kicker{top:24px;}
.editor-design-sample.design-thumbnail.family-decorativa .thumb-title{top:38px;font-size:16px;}
.editor-design-sample.design-thumbnail.family-decorativa .thumb-date{bottom:14px;}

@media(max-width:560px){
  .design-collection-heading{display:block;}
  .design-collection-heading span{display:block;margin-top:5px;text-align:left;}
}

.fondo-superficie{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.fondo-marfil{
  background-color:#f4eddf;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.78) 0 7%,transparent 28%),
    radial-gradient(circle at 83% 72%,rgba(190,160,111,.15),transparent 34%),
    repeating-linear-gradient(110deg,rgba(81,59,32,.025) 0 1px,transparent 1px 8px);
}
.fondo-floral{
  background-color:#efe8df;
  background-image:
    radial-gradient(ellipse at 8% 12%,rgba(115,137,92,.52) 0 7%,transparent 8%),
    radial-gradient(ellipse at 19% 3%,rgba(195,139,131,.48) 0 8%,transparent 9%),
    radial-gradient(ellipse at 92% 84%,rgba(112,133,94,.48) 0 8%,transparent 9%),
    radial-gradient(ellipse at 78% 96%,rgba(206,154,142,.46) 0 9%,transparent 10%),
    linear-gradient(135deg,#f8f2e8,#e9dfd5);
}
.fondo-marmol{
  background-color:#e9e7e3;
  background-image:
    linear-gradient(116deg,transparent 0 20%,rgba(112,106,104,.16) 21%,transparent 22% 46%,rgba(255,255,255,.72) 47% 49%,transparent 50%),
    linear-gradient(37deg,transparent 0 55%,rgba(154,132,126,.16) 56%,transparent 58%),
    radial-gradient(circle at 75% 24%,#faf9f5,#ddd9d4 72%);
}
.fondo-nocturno{
  background-color:#111723;
  background-image:
    radial-gradient(circle at 16% 18%,rgba(245,201,122,.72) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 23%,rgba(255,228,171,.65) 0 3px,transparent 4px),
    radial-gradient(circle at 89% 71%,rgba(211,169,97,.52) 0 2px,transparent 3px),
    radial-gradient(circle at 24% 84%,rgba(255,223,162,.45) 0 4px,transparent 5px),
    radial-gradient(circle at 65% 55%,rgba(86,111,145,.45),transparent 28%),
    linear-gradient(145deg,#0b1018,#252133);
}
.fondo-acuarela{
  background-color:#f1e8df;
  background-image:
    radial-gradient(ellipse at 14% 22%,rgba(198,112,103,.42),transparent 29%),
    radial-gradient(ellipse at 86% 18%,rgba(91,137,129,.38),transparent 32%),
    radial-gradient(ellipse at 70% 88%,rgba(201,163,95,.34),transparent 35%),
    radial-gradient(ellipse at 24% 85%,rgba(118,98,151,.24),transparent 31%);
}
.fondo-personal{
  background-color:#d8d2c8;
}

.visual-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media(min-width:620px){
  .visual-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.visual-choice{
  appearance:none;
  border:1.5px solid var(--paper-line,#e9e0d2);
  border-radius:14px;
  overflow:hidden;
  padding:0;
  background:#fff;
  color:var(--text-on-light,#241a2e);
  cursor:pointer;
  text-align:left;
  font:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.visual-choice:hover{transform:translateY(-1px);}
.visual-choice.selected{
  border-color:var(--gold,#c9a15f);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold,#c9a15f) 22%,transparent);
}
.visual-choice-sample{
  display:block;
  min-height:96px;
  position:relative;
}
.visual-choice-sample.fondo-sin_fondo{
  background:
    linear-gradient(135deg,transparent 49%,rgba(36,26,46,.12) 50% 51%,transparent 52%),
    #f7f3ec;
}
.visual-choice-sample::after{
  content:"";
  position:absolute;
  inset:0;
  border-bottom:1px solid rgba(36,26,46,.08);
}
.visual-choice-sample::before{
  content:"INVITACIÓN";
  position:absolute;z-index:2;
  inset:17px 22px;
  display:grid;place-items:center;
  border:1px solid currentColor;
  border-radius:2px;
  background:rgba(255,255,255,.36);
  color:#4c3d43;
  font:700 8px/1 var(--font-body,'Inter',sans-serif);
  letter-spacing:.16em;
  text-shadow:0 1px 3px rgba(255,255,255,.65);
}
.visual-choice-sample.fondo-nocturno::before{
  background:rgba(11,16,24,.32);color:#f4d79e;text-shadow:0 1px 4px #000;
}
.visual-choice-sample.fondo-sin_fondo::before{
  content:"SIN FONDO";border-style:dashed;background:rgba(255,255,255,.62);color:#766f78;
}
.visual-choice-copy{display:block;padding:10px 11px 12px;}
.visual-choice-copy strong{display:block;font-size:12.5px;line-height:1.25;}
.visual-choice-copy small{display:block;margin-top:3px;color:var(--text-on-light-mute,#6b6472);font-size:10.5px;line-height:1.3;}
.visual-choice-file{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:96px;
  color:#fff;
  font-size:25px;
  font-weight:700;
  background:
    linear-gradient(135deg,rgba(36,26,46,.42),rgba(36,26,46,.2)),
    repeating-linear-gradient(45deg,#9a8c80 0 10px,#b6aa9d 10px 20px);
}

.palette-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media(min-width:620px){
  .palette-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.palette-choice{
  appearance:none;
  display:flex;
  align-items:center;
  gap:11px;
  min-height:72px;
  padding:9px;
  border:1.5px solid var(--paper-line,#e9e0d2);
  border-radius:12px;
  background:#fff;
  color:var(--text-on-light,#241a2e);
  cursor:pointer;
  text-align:left;
  font:600 11.5px/1.25 var(--font-body,'Inter',sans-serif);
}
.palette-choice.selected{
  border-color:var(--gold,#c9a15f);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold,#c9a15f) 20%,transparent);
}
.palette-preview{
  position:relative;display:block;flex:0 0 66px;height:50px;overflow:hidden;border-radius:8px;
  background:linear-gradient(135deg,var(--palette-bg) 0 64%,var(--palette-panel) 64%);
  color:var(--palette-fg);border:1px solid rgba(0,0,0,.1);
}
.palette-preview::before{content:"";position:absolute;left:7px;right:7px;top:8px;height:2px;background:var(--palette-accent);}
.palette-preview b{position:absolute;left:8px;bottom:7px;font:600 18px/1 var(--font-display,'Fraunces',serif);}
.palette-preview i{position:absolute;right:7px;bottom:7px;width:10px;height:10px;border-radius:50%;background:var(--palette-accent);border:1px solid rgba(255,255,255,.35);}
.palette-label{display:block;min-width:0;line-height:1.3;}

.custom-background-control{
  margin-top:12px;
  padding:14px;
  border:1px dashed var(--gold,#c9a15f);
  border-radius:12px;
  background:#fffaf0;
}
.custom-background-control label{display:block;font-weight:700;font-size:13px;margin-bottom:7px;}
.custom-background-control input{width:100%;}
.custom-background-control p{margin:7px 0 0;color:var(--text-on-light-mute,#6b6472);font-size:11.5px;line-height:1.45;}