:root{
  --crema:#FBF7EF; --marfil:#F3ECDD; --tinta:#2E2A24;
  --salvia:#7C8A6B; --salvia-oscuro:#5E6B4F; --sombra:rgba(0,0,0,.12);
  /* --salvia-cta: #fff encima da 9.42:1 (AAA, min 7:1) */
  --salvia-cta:#3E4A32;
  /* --tinta-suave: sobre --crema (#FBF7EF) da 8.85:1 (AAA, min 7:1) */
  --tinta-suave:#4A4636;
  /* --acento: la ÚNICA perilla de color que elige el cliente por evento
     (ver templates/base.html, que la inyecta desde evento["color_acento"]
     en un <style> inline — pisa este fallback por orden de cascada).
     A PROPÓSITO no reemplaza a --salvia-cta ni a --tinta-suave: un hex
     arbitrario elegido por un cliente no está garantizado a dar 7:1 (AAA)
     contra blanco ni contra --crema, y esos dos SÍ están validados AAA
     (ver comentarios arriba) — son los que llevan el texto y los botones
     de acción. --acento se usa solo en detalles puramente decorativos
     (el "&" de la portada, bordes de inputs/stickers, el relleno de la
     barra de progreso) donde un contraste más flojo no compromete la
     lectura. Sin cálculo de luminancia por ahora: si algún evento necesita
     de verdad un CTA de color, eso es trabajo futuro (F1+), no de este MVP.
     Fallback (sin contexto de evento, p.ej. /salud) = el salvia del piloto. */
  --acento: var(--salvia);
}
*{box-sizing:border-box}
body{margin:0;background:var(--crema);color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:19px;line-height:1.5}
.contenedor{max-width:520px;margin:0 auto;padding:24px 20px;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:center;gap:22px}
.portada{text-align:center}
.novios{font-family:Georgia,"Times New Roman",serif;font-size:2.6rem;margin:.2em 0;font-weight:400}
.novios span{color:var(--acento)}
.fecha{letter-spacing:.15em;color:var(--tinta-suave);margin:0}
.frase{color:var(--tinta-suave);font-style:italic;margin:.2em 0 0}
.botonera{display:flex;flex-direction:column;gap:14px}
.boton{display:flex;align-items:center;justify-content:center;min-height:64px;
  padding:0 18px;border-radius:16px;border:2px solid var(--salvia-cta);
  background:#fff;color:var(--tinta);font-size:1.15rem;font-weight:600;
  text-decoration:none;box-shadow:0 2px 8px var(--sombra);cursor:pointer}
.boton-principal{min-height:110px;background:var(--salvia-cta);color:#fff;font-size:1.35rem}
.boton:active{transform:scale(.99)}
.nota-telefono{text-align:center;font-size:.95rem;color:var(--tinta-suave)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.paso{display:flex;flex-direction:column;gap:16px;text-align:center}
.oculto{display:none!important}
.volver{color:var(--tinta-suave);text-decoration:none;font-weight:600}
input[type=text]{min-height:60px;font-size:1.1rem;padding:0 16px;border:2px solid var(--acento);border-radius:14px}
.barra{height:22px;background:var(--marfil);border-radius:12px;overflow:hidden}
.barra-relleno{height:100%;width:0;background:var(--acento);transition:width .2s}

.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.celda img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}

textarea{min-height:140px;font-size:1.15rem;padding:14px;border:2px solid var(--acento);
  border-radius:14px;font-family:inherit;resize:vertical}
.contador{text-align:right;color:var(--salvia-oscuro);font-size:.95rem}

.editor{display:flex;flex-direction:column;align-items:center;gap:16px}
#lienzo{border-radius:12px;box-shadow:0 2px 10px var(--sombra);max-width:100%}
.controles{width:100%;display:flex;flex-direction:column;gap:14px}
.grupo{display:flex;flex-direction:column;gap:8px}
.grupo>span{font-weight:600;color:var(--tinta-suave)}
.mini{min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--salvia-cta);
  background:#fff;color:var(--tinta);font-size:1rem;font-weight:600;cursor:pointer}
.mini:active{transform:scale(.99)}
.stickers{display:flex;flex-wrap:wrap;gap:10px}
.mini-sticker{width:56px;height:56px;padding:4px;border:2px solid var(--acento);
  border-radius:12px;background:#fff;cursor:pointer}