/* Plantilla Infantil Kawaii dulce: ajolotito original, lunares rosa y menta, estrellitas y corazones.
 * Variante celeste (datos.json → "variante": "celeste"): redefine las variables en .variante-celeste. */
:root {
  --primario: #FF9EC4;
  --acento: #6B4A7A;
  --fondo: #FFF4F8;
  --superficie: #ffffff;
  --texto: #6B4A7A;
  --texto-suave: #7D5F8A;
  --lunar-1: #FFD6E7;
  --lunar-2: #D9F2EA;
  --lila: #E9D9FF;
  --menta: #C9F0E3;
  --papel-sobre: #E9D9FF;
  --solapa-sobre: #DCC6FF;
  --sello: #FF9EC4;
  --sello-texto: #6B2A55;
  --etiqueta: #FF9EC4;
  --etiqueta-texto: #5A2347;
  --borde: #FFD6E7;
  --boton: #B0457A;
  --boton-sombra: #7F2C56;
  --fuente-script: 'Fredoka', system-ui, sans-serif;
  --fuente-titulo: 'Fredoka', system-ui, sans-serif;
  --fuente-texto: 'Fredoka', system-ui, sans-serif;
  --radio: 30px;
  --sombra: 0 6px 0 var(--borde);
  --btn-wa-fondo: var(--boton);
  --ajolote: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23FF8FBA' stroke='%23E2709E' stroke-width='2'><ellipse cx='16' cy='34' rx='11' ry='6' transform='rotate(-35 16 34)'/><ellipse cx='11' cy='48' rx='11' ry='6'/><ellipse cx='16' cy='62' rx='11' ry='6' transform='rotate(35 16 62)'/><ellipse cx='84' cy='34' rx='11' ry='6' transform='rotate(35 84 34)'/><ellipse cx='89' cy='48' rx='11' ry='6'/><ellipse cx='84' cy='62' rx='11' ry='6' transform='rotate(-35 84 62)'/></g><ellipse cx='50' cy='80' rx='22' ry='15' fill='%23FFB3CF' stroke='%23E2709E' stroke-width='2.5'/><ellipse cx='50' cy='50' rx='32' ry='27' fill='%23FFC2D9' stroke='%23E2709E' stroke-width='2.5'/><circle cx='39' cy='48' r='4.5' fill='%234A2F55'/><circle cx='61' cy='48' r='4.5' fill='%234A2F55'/><circle cx='40.5' cy='46.5' r='1.6' fill='%23fff'/><circle cx='62.5' cy='46.5' r='1.6' fill='%23fff'/><ellipse cx='31' cy='57' rx='5' ry='3.2' fill='%23FF8FB5' opacity='.75'/><ellipse cx='69' cy='57' rx='5' ry='3.2' fill='%23FF8FB5' opacity='.75'/><path d='M45 57q5 4 10 0' fill='none' stroke='%234A2F55' stroke-width='2.2' stroke-linecap='round'/></svg>");
  --estrella: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 3l5 11 12 1.5-9 8 2.5 12L20 29l-10.5 6.5L12 23.5l-9-8L15 14Z' fill='%23FFD86B' stroke='%23F0B830' stroke-width='2' stroke-linejoin='round'/></svg>");
  --corazon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 35S4 25 4 14a8 8 0 0 1 16-3 8 8 0 0 1 16 3c0 11-16 21-16 21Z' fill='%23FF9EC4'/></svg>");
}
.variante-celeste {
  --primario: #7FC8F0;
  --acento: #2E5A80;
  --fondo: #F2FAFF;
  --texto: #2E5A80;
  --texto-suave: #456E92;
  --lunar-1: #D6EEFB;
  --lunar-2: #D9F3EC;
  --lila: #DCEFFB;
  --papel-sobre: #D9F3EC;
  --solapa-sobre: #C3EADF;
  --sello: #7FC8F0;
  --sello-texto: #1E4A6E;
  --etiqueta: #FFE9A8;
  --etiqueta-texto: #6B4A00;
  --borde: #CDEBFA;
  --boton: #2E6E9E;
  --boton-sombra: #1E4A6E;
  --ajolote: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%239FD6F5' stroke='%235FAFD9' stroke-width='2'><ellipse cx='16' cy='34' rx='11' ry='6' transform='rotate(-35 16 34)'/><ellipse cx='11' cy='48' rx='11' ry='6'/><ellipse cx='16' cy='62' rx='11' ry='6' transform='rotate(35 16 62)'/><ellipse cx='84' cy='34' rx='11' ry='6' transform='rotate(35 84 34)'/><ellipse cx='89' cy='48' rx='11' ry='6'/><ellipse cx='84' cy='62' rx='11' ry='6' transform='rotate(-35 84 62)'/></g><ellipse cx='50' cy='80' rx='22' ry='15' fill='%23BFE4F8' stroke='%235FAFD9' stroke-width='2.5'/><ellipse cx='50' cy='50' rx='32' ry='27' fill='%23CDEBFA' stroke='%235FAFD9' stroke-width='2.5'/><circle cx='39' cy='48' r='4.5' fill='%231E3A55'/><circle cx='61' cy='48' r='4.5' fill='%231E3A55'/><circle cx='40.5' cy='46.5' r='1.6' fill='%23fff'/><circle cx='62.5' cy='46.5' r='1.6' fill='%23fff'/><ellipse cx='31' cy='57' rx='5' ry='3.2' fill='%23FFB3CF' opacity='.8'/><ellipse cx='69' cy='57' rx='5' ry='3.2' fill='%23FFB3CF' opacity='.8'/><path d='M45 57q5 4 10 0' fill='none' stroke='%231E3A55' stroke-width='2.2' stroke-linecap='round'/></svg>");
  --corazon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M20 35S4 25 4 14a8 8 0 0 1 16-3 8 8 0 0 1 16 3c0 11-16 21-16 21Z' fill='%237FC8F0'/></svg>");
}

/* Lunares rosa y menta (o celeste y menta) con estrellitas sueltas */
body {
  background:
    var(--estrella) right 8% top 120px / 26px no-repeat,
    var(--corazon) left 6% top 260px / 22px no-repeat,
    radial-gradient(var(--lunar-1) 20%, transparent 22%) 0 0 / 46px 46px,
    radial-gradient(var(--lunar-2) 20%, transparent 22%) 23px 23px / 46px 46px,
    var(--fondo);
}

.adorno {
  width: 150px; height: 72px; margin: 0 auto 12px;
  background: var(--estrella) left 4px top 8px / 24px no-repeat, var(--ajolote) center / 72px no-repeat, var(--corazon) right 6px bottom 6px / 22px no-repeat;
}
.adorno--portada { display: none; }

/* ---------- Sobre lila con el ajolotito asomando por la esquina ---------- */
.sobre {
  background:
    var(--estrella) left 12% top 12% / 34px no-repeat,
    var(--corazon) right 14% top 18% / 30px no-repeat,
    var(--estrella) right 10% top 62% / 24px no-repeat,
    var(--corazon) left 9% top 58% / 24px no-repeat,
    radial-gradient(var(--lunar-1) 20%, transparent 22%) 0 0 / 46px 46px,
    radial-gradient(var(--lunar-2) 20%, transparent 22%) 23px 23px / 46px 46px,
    var(--fondo);
}
.sobre__cuerpo { background: var(--papel-sobre); border: 4px solid #fff; border-radius: 22px; box-shadow: 0 6px 0 var(--borde); }
.sobre__cuerpo::before {
  content: ''; position: absolute; z-index: 4; right: -30px; top: -48px; width: 96px; height: 96px;
  background: var(--ajolote) center / contain no-repeat; transform: rotate(14deg); pointer-events: none;
}
.sobre__solapa { background: var(--solapa-sobre); }
.sobre__sello { background: var(--sello); color: var(--sello-texto); border: 3px solid #fff; font: 600 28px/1 var(--fuente-titulo); box-shadow: 0 4px 0 color-mix(in srgb, var(--sello) 70%, #000); }
.sobre__titulo { font: 600 22px/1.2 var(--fuente-titulo); letter-spacing: .02em; text-transform: none; color: var(--texto); }
.sobre__nombre { font: 700 50px/1.05 var(--fuente-titulo); color: var(--texto); text-shadow: 0 3px 0 #fff; }
.sobre__edad { background: var(--etiqueta); color: var(--etiqueta-texto); box-shadow: 0 4px 0 color-mix(in srgb, var(--etiqueta) 70%, #000); }
.sobre__ayuda { padding: 4px 16px; border-radius: 99px; background: #fff; color: var(--texto); font-weight: 600; letter-spacing: .06em; text-transform: none; font-size: 15px; box-shadow: 0 3px 0 var(--borde); }

/* ---------- Portada: foto en arco, ajolotito abajo y estrella arriba ---------- */
.portada { flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 20px 76px; color: var(--texto); }
.portada__foto {
  position: relative; inset: auto; flex: none;
  width: min(70vw, 300px); aspect-ratio: 4 / 5;
  border: 8px solid #fff; border-radius: 150px 150px 34px 34px; box-shadow: 0 8px 0 var(--borde);
  animation: none;
}
.portada__foto::before, .portada__foto::after { content: ''; position: absolute; pointer-events: none; }
.portada__foto::before { left: -42px; bottom: -34px; width: 110px; height: 110px; background: var(--ajolote) center / contain no-repeat; transform: rotate(-8deg); }
.portada__foto::after { right: -12px; top: 4px; width: 50px; height: 50px; background: var(--estrella) center / contain no-repeat; transform: rotate(12deg); }
.portada__velo { display: none; }
.portada__titulo { font: 600 20px/1.2 var(--fuente-titulo); letter-spacing: .02em; text-transform: none; color: var(--texto); }
.portada__nombre { font: 700 clamp(46px, 13vw, 72px)/1 var(--fuente-titulo); color: var(--texto); text-shadow: 0 4px 0 #fff; }
.portada__edad { background: var(--etiqueta); color: var(--etiqueta-texto); font-size: 17px; font-weight: 600; box-shadow: 0 4px 0 color-mix(in srgb, var(--etiqueta) 70%, #000); }
.portada__fecha { font-weight: 600; color: var(--texto); }
.portada__bajar { color: var(--texto); }

/* ---------- Secciones ---------- */
.seccion__titulo { font: 600 30px/1.2 var(--fuente-titulo); color: var(--texto); }
.mensaje__texto { font: 500 19px/1.55 var(--fuente-texto); font-style: normal; color: var(--texto); }
.familia__grupo p { font: 600 21px var(--fuente-titulo); color: var(--texto); }

.cuenta__reloj > div { border-radius: 26px; background: #fff; border: 3px solid var(--borde); box-shadow: 0 5px 0 var(--borde); }
.cuenta__reloj > div:nth-child(even) { border-color: var(--menta); box-shadow: 0 5px 0 var(--menta); }
.cuenta__reloj span { font: 700 32px/1 var(--fuente-titulo); color: var(--texto); }
.cuenta__fin { font: 700 30px var(--fuente-titulo); color: var(--texto); }

.lugar, .rsvp__form, .rsvp__hecho, .pase, .regalos__yape { border: 3px solid var(--borde); box-shadow: 0 6px 0 var(--borde); }
.lugar__titulo, .pase__nombre, .rsvp__hecho-titulo { font: 600 24px var(--fuente-titulo); }
.lugar__hora, .itinerario__hora { color: var(--boton); font-weight: 600; }
.itinerario__lista li::after { width: 16px; height: 16px; left: 82px; top: 4px; border-radius: 0; background: var(--corazon) center / contain no-repeat; }
.itinerario__lista li::before { background: var(--borde); }
.galeria__grid img { border-radius: 26px; border: 5px solid #fff; box-shadow: 0 5px 0 var(--borde); }
.icono-grande { color: var(--boton); }

.btn { border-radius: 99px; background: var(--boton); border-color: var(--boton); font: 600 15px var(--fuente-texto); box-shadow: 0 5px 0 var(--boton-sombra); }
.btn--contorno { background: #fff; color: var(--texto); border: 2px solid var(--borde); box-shadow: 0 4px 0 var(--borde); }
.btn--chico { box-shadow: 0 4px 0 var(--boton-sombra); }
.btn--whatsapp { box-shadow: 0 5px 0 var(--boton-sombra); }
.pase__cantidad, .rsvp__check { background: var(--boton); }
.pie__gracias { font: 700 30px var(--fuente-titulo); color: var(--texto); }

/* Píldoras «Toca para ver tu invitación» y «Quiero este diseño»: fondo oscuro para texto blanco (≥ 4.5:1) */
.vista-compartir__pildora, .demo-pedir__btn { background: var(--boton); color: #fff; }