/* Plantilla Bautizo boho («Capilla boho»): arco de capilla con dos puertas, cruz fina y pampas.
   Una sola plantilla para niño y niña: todo sale de --primario y --acento (datos.json → colores). */
:root {
  --primario: #B8735A;
  --acento: #C9A27E;
  --fondo: color-mix(in srgb, var(--primario) 10%, #F6EFE6);
  --superficie: color-mix(in srgb, var(--fondo) 40%, #fff);
  --puerta-1: color-mix(in srgb, var(--primario) 18%, #F6EFE6);
  --puerta-2: color-mix(in srgb, var(--primario) 26%, #F6EFE6);
  --linea: var(--primario);
  /* Texto: el tono de --primario muy oscuro y poco saturado. Va con color-mix (y no con oklch) porque invitacion.js
     lee el color calculado para comprobar contraste y solo entiende rgb() y color(srgb …) */
  --texto: color-mix(in oklab, var(--primario) 40%, #17110e);
  --texto-suave: color-mix(in oklab, var(--primario) 52%, #17110e);
  /* Tono profundo para botones con texto blanco (respaldo para navegadores sin sintaxis relativa) */
  --primario-profundo: color-mix(in srgb, var(--primario) 40%, #1c1210);
  --btn-wa-fondo: var(--primario-profundo);
  --radio: 14px;
  --sombra: 0 6px 20px color-mix(in srgb, var(--primario) 14%, transparent);

  /* Puertas: relleno con unión central y las dos perillas (a 60 % de la altura) */
  --puertas:
    radial-gradient(circle at calc(50% - 32px) 60%, var(--linea) 0 3.5px, transparent 4px) no-repeat,
    radial-gradient(circle at calc(50% + 32px) 60%, var(--linea) 0 3.5px, transparent 4px) no-repeat,
    linear-gradient(color-mix(in srgb, var(--linea) 45%, transparent), color-mix(in srgb, var(--linea) 45%, transparent)) center / 1px 100% no-repeat,
    linear-gradient(var(--puerta-1), var(--puerta-2));

  /* Adornos como máscaras: se pintan con el color que se les ponga de fondo */
  --cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M10 2v26M3 10h14' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --separador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cpath d='M0 9h44M76 9h44M60 1.5v15M54.5 6.5h11' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --pampas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 150'%3E%3Cg stroke='black' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M28 150C26 118 18 90 15 62M30 150C30 112 28 80 29 44M32 150C34 118 42 96 45 70M29 150C22 132 8 122 5 100'/%3E%3Cg transform='translate(15 62) rotate(-12)'%3E%3Cpath d='M0 0C-6-8-6-26 0-36C6-26 6-8 0 0M0 0V-34'/%3E%3C/g%3E%3Cg transform='translate(29 44)'%3E%3Cpath d='M0 0C-6-8-6-26 0-36C6-26 6-8 0 0M0 0V-34'/%3E%3C/g%3E%3Cg transform='translate(45 70) rotate(12)'%3E%3Cpath d='M0 0C-6-8-6-26 0-36C6-26 6-8 0 0M0 0V-34'/%3E%3C/g%3E%3Cg transform='translate(5 100) rotate(-22)'%3E%3Cpath d='M0 0C-5-6-5-20 0-28C5-20 5-6 0 0M0 0V-26'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@supports (color: oklch(from red l c h)) {
  :root { --primario-profundo: oklch(from var(--primario) clamp(0.3, calc(l - 0.26), 0.55) c h); }
}

/* ---------- Adornos ---------- */
.adorno, .seccion__titulo::before {
  content: ''; display: block;
  width: 120px; height: 18px; margin: 0 auto 14px;
  background: var(--linea);
  -webkit-mask: var(--separador) center / contain no-repeat;
          mask: var(--separador) center / contain no-repeat;
}
.adorno--portada { display: none; }

/* ---------- Sobre ----------
   Sirve para las cuatro aperturas: el arco con dos puertas es .sobre__cuerpo (sobre y tarjeta), las hojas del díptico
   o, en solapas, el sobre a pantalla completa con los colores de las puertas. */
.sobre { --arco-w: min(260px, 70vw, 34svh); --arco-h: calc(var(--arco-w) * 1.42); }
.sobre__cuerpo {
  width: var(--arco-w); height: var(--arco-h); aspect-ratio: auto;
  margin: 46px 0 22px; padding: 12px;
  border: 2px solid var(--linea); border-radius: 999px 999px 8px 8px;
  background: var(--puertas); background-color: var(--puerta-2); background-clip: content-box;
  box-shadow: none;
}
/* Pampas a los lados del arco (la derecha, en espejo) */
.sobre .sobre__cuerpo::before, .sobre .sobre__cuerpo::after {
  content: ''; position: absolute; z-index: 5; inset: auto; bottom: -8px; width: 44px; height: 112px; border-radius: 0;
  background: var(--acento);
  -webkit-mask: var(--pampas) center bottom / contain no-repeat;
          mask: var(--pampas) center bottom / contain no-repeat;
}
.sobre .sobre__cuerpo::before { left: -48px; }
.sobre .sobre__cuerpo::after { right: -48px; transform: scaleX(-1); }
/* La solapa del sobre clásico pasa a ser la cruz fina sobre el arco */
.sobre__solapa,
.sobre--abierto .sobre__solapa {
  top: -46px; left: 50%; width: 20px; height: 30px; margin-left: -10px; z-index: 1;
  background: var(--linea); clip-path: none; transform: none; transition: none;
  -webkit-mask: var(--cruz) center / contain no-repeat;
          mask: var(--cruz) center / contain no-repeat;
}
.sobre__solapa-forro, .sobre__forro { display: none; }
/* Medallón con la inicial, entre las dos perillas */
.sobre__sello,
.sobre.sobre--diptico .sobre__sello, .sobre.sobre--solapas .sobre__sello {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; top: 60%;
  background: var(--fondo); color: var(--linea);
  border: 1.5px solid var(--linea); box-shadow: none;
  font: italic 500 24px/1 var(--fuente-titulo);
}
.sobre__sello span { transform: translateY(-1px); }
.sobre__titulo, .sobre__nombre, .sobre__ayuda { text-align: center; }
/* Letra del nombre: datos.json → letraNombre (el build escribe estas variables en el <html>) */
.sobre__nombre, .portada__nombre {
  font-family: var(--fuente-nombre, 'Great Vibes', cursive);
  font-weight: var(--peso-nombre, 400);
  font-style: var(--estilo-nombre, normal);
  text-wrap: balance; overflow-wrap: normal;
}
.sobre__nombre { font-size: calc(clamp(48px, 15vw, 60px) * var(--escala-nombre, 1)); color: var(--texto); }
.sobre__ayuda { margin-top: 14px; font: 500 11px/1.5 var(--fuente-texto); letter-spacing: .3em; color: var(--linea); }
.sobre__titulo {
  font: 600 11px/1.6 var(--fuente-texto); letter-spacing: .3em; color: var(--linea);
  /* La etiqueta «MI BAUTIZO» se posa sobre las puertas */
  position: relative; z-index: 6; padding: 6px 16px; background: var(--fondo);
  top: calc(var(--arco-h) * -.6 - 44px);
  transition: opacity .3s ease;
}
.sobre--abierto > .sobre__titulo { opacity: 0; }

/* Tarjeta (Básica): sale de detrás de las puertas con la foto dentro de un arco */
.sobre__bolsillo {
  inset: 12px; clip-path: none; border-radius: 999px 999px 4px 4px;
  background: var(--puertas); background-color: var(--puerta-2);
}
.sobre__bolsillo::after { content: none; }
.sobre__tarjeta { border: 3px solid var(--fondo); border-radius: 999px 999px 6px 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.sobre__tarjeta::before { background: linear-gradient(to top, rgb(0 0 0 / .45), transparent 45%); }
.sobre__tarjeta span { font-size: 28px; }

/* Solapas: el sobre a pantalla completa con los colores de las puertas (el JS los lee del arco; aquí se fijan) */
.sobre--solapas { --papel: var(--puerta-2) !important; --papel-solapa: var(--puerta-1) !important; }
.sobre--solapas::before {
  content: ''; position: absolute; z-index: 3; top: 7%; left: 50%; width: 20px; height: 30px; margin-left: -10px;
  background: var(--linea);
  -webkit-mask: var(--cruz) center / contain no-repeat;
          mask: var(--cruz) center / contain no-repeat;
}
.sobre--solapas .sobre__titulo { top: 0; background: none; padding: 0; }
.sobre--solapas .sobre__nombre { margin-top: auto; }

/* Díptico (Completa): las dos hojas son las puertas del arco */
.sobre--diptico { --a-top: 17%; --a-h: min(50%, 440px); }
.sobre.sobre--diptico .sobre__sello { top: calc(var(--a-top) + var(--a-h) * .6 - 3px); }
.diptico__cara { display: block; background: var(--fondo); }
.diptico__hoja::after { display: none; } /* sin sombra en el pliegue: las puertas son planas */
.diptico__cara::before, .diptico__cara::after {
  content: ''; position: absolute; inset: auto; border: 0; outline: 0; pointer-events: none;
  top: calc(var(--a-top) + var(--a-h) - 104px); width: 44px; height: 112px;
  background: var(--acento);
  -webkit-mask: var(--pampas) center bottom / contain no-repeat;
          mask: var(--pampas) center bottom / contain no-repeat;
}
.diptico__cara::before { left: calc(50% - min(140px, 37%) - 42px); }
.diptico__cara::after { right: calc(50% - min(140px, 37%) - 42px); transform: scaleX(-1); }
.diptico__arriba {
  position: absolute; left: 50%; top: var(--a-top); width: min(280px, 74%); height: var(--a-h); transform: translateX(-50%);
  padding: 12px; display: block;
  border: 2px solid var(--linea); border-radius: 999px 999px 8px 8px;
  background: var(--puertas); background-color: var(--puerta-2); background-clip: content-box;
}
.diptico__arriba::before { /* cruz fina sobre el arco */
  content: ''; position: absolute; top: -46px; left: 50%; width: 20px; height: 30px; margin-left: -10px;
  background: var(--linea);
  -webkit-mask: var(--cruz) center / contain no-repeat;
          mask: var(--cruz) center / contain no-repeat;
}
.diptico__arriba p {
  position: absolute; left: 50%; top: 36%; transform: translateX(-50%); margin: 0; padding: 6px 16px; white-space: nowrap;
  background: var(--fondo); font: 600 11px/1.6 var(--fuente-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--linea);
}
.diptico__adorno, .diptico__faja, .diptico__fecha { display: none; }
.diptico__abajo {
  position: absolute; left: 0; right: 0; top: calc(var(--a-top) + var(--a-h) + 16px);
  padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.diptico__abajo .sobre__ayuda { margin-top: 8px; }

/* ---------- Portada: foto dentro de un arco ---------- */
body { background: var(--fondo); }
.portada {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 76px 20px 84px; color: var(--texto);
}
.portada__foto {
  position: relative; inset: auto; flex: none; animation: none;
  width: min(300px, 74vw, calc(46svh * .75)); aspect-ratio: 3 / 4;
  background-position: var(--portada-posicion, center 20%);
  border-radius: 999px 999px 10px 10px;
  outline: 2px solid var(--linea); outline-offset: 8px;
}
.portada__foto::before { /* cruz fina sobre el arco */
  content: ''; position: absolute; left: 50%; top: -52px; width: 20px; height: 30px; margin-left: -10px;
  background: var(--linea);
  -webkit-mask: var(--cruz) center / contain no-repeat;
          mask: var(--cruz) center / contain no-repeat;
}
.portada__velo { display: none; }
.portada__texto { margin-top: 30px; width: 100%; }
.portada__titulo { margin-bottom: 12px; font: 600 12px/1.6 var(--fuente-texto); letter-spacing: .3em; color: var(--linea); }
.portada__nombre { font-size: calc(clamp(54px, 16vw, 80px) * var(--escala-nombre, 1)); line-height: 1.05; color: var(--texto); }
.vista-compartir .vista-compartir__nombre.portada__nombre { font-size: calc(110px * var(--escala-nombre, 1)); }
.portada__fecha { display: none; } /* la fecha va partida en .portada__cal */
.portada__cal {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  width: min(330px, 92%); margin: 14px auto 0;
}
.portada__cal span {
  padding: 6px 0; border-block: 1px solid var(--linea);
  font: 500 12px/1.4 var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--texto);
}
.portada__cal b { font: 500 38px/1 var(--fuente-titulo); color: var(--linea); }
.portada__bajar { color: var(--linea); }

/* ---------- Secciones ---------- */
.seccion__titulo { font: italic 500 38px/1.15 var(--fuente-titulo); color: var(--texto); }
.icono-grande { color: var(--linea); }
.mensaje__texto { color: var(--texto); }
.familia__grupo h3 { color: var(--linea); }
.familia__grupo p { font-weight: 600; color: var(--texto); }

.lugar, .cuenta__reloj > div, .rsvp__form, .rsvp__hecho, .pase, .regalos__yape, .promo-eco {
  background: var(--superficie); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--linea) 35%, transparent);
}
.lugar { padding: 48px 20px 26px; border-radius: 120px 120px 14px 14px; }
.lugar__titulo { font-weight: 600; color: var(--texto); }
.lugar__hora { color: var(--primario-profundo); }
.lugar__direccion { color: var(--texto-suave); }

.cuenta__reloj > div { padding: 22px 4px 12px; border-radius: 999px 999px 12px 12px; }
.cuenta__reloj span { font: 500 34px/1 var(--fuente-titulo); color: var(--primario-profundo); }
.cuenta__reloj small { font-family: var(--fuente-texto); color: var(--texto-suave); }
.cuenta__fin, .pie__gracias { color: var(--texto); }

.itinerario__lista li::before { width: 1px; left: 89.5px; background: color-mix(in srgb, var(--linea) 60%, transparent); }
.itinerario__lista li::after { background: var(--fondo); border: 2px solid var(--linea); }
.itinerario__hora { color: var(--primario-profundo); }

.galeria__grid img { border-radius: 90px 90px 12px 12px; }
.galeria__grid img:first-child:nth-last-child(odd) { border-radius: 14px; }

.pase__cantidad, .rsvp__check, .btn-musica, .vista-compartir__pildora, .demo-pedir__btn { background: var(--primario-profundo); }
.rsvp__form input:not([type=radio]), .rsvp__form select, .rsvp__form textarea { border-color: color-mix(in srgb, var(--linea) 35%, transparent); background: var(--fondo); }
.rsvp__form :focus-visible { outline-color: var(--primario-profundo); }
.rsvp__opciones input { accent-color: var(--primario-profundo); }

/* Botones (sistema btn de comun.css/base.css): fondo profundo con texto blanco; el contorno usa la línea */
.btn:not(.btn--contorno):not(.btn--whatsapp) { background: var(--primario-profundo); border-color: var(--primario-profundo); }
.btn--contorno { border-color: var(--linea); color: var(--texto); }