/* Común a todas las plantillas: barra y marca de agua de vista previa. */

/* viewport-fit=cover (invite/base.html): el fondo de la plantilla llega a los bordes del
   celular; el contenido se aparta de la muesca en horizontal. */
.inv { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* Con la letra muy grande (texto al 200 %), una palabra larga de un título («acompañas?»)
   baja de línea en vez de salirse; a tamaño normal nada cambia.
   Sin especificidad (:where): la regla de cada plantilla, si la hay, manda. */
:where(.inv) :where(h1, h2, h3) { overflow-wrap: break-word; }

.preview-bar {
  position: sticky; top: 0; z-index: 60;
  padding: 10px 16px; text-align: center; font-size: 13px; line-height: 1.5;
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  background: #F3EEE4; color: #161B3A;
}
.preview-bar a { color: #1F2A5C; margin-left: 6px; }

/* Firma del plan Gratis al pie: discreta, en el color de texto más suave de cada plantilla
   (--text-3, que design.py mantiene en 4.5:1 o más sobre su fondo, también con colores
   propios), con un subrayado tenue y un objetivo táctil de 44 px. */
.iv-signature {
  margin: 0; padding: 4px 16px 20px; text-align: center;
  background: var(--bg); font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
}
.iv-signature a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text-3, var(--text)); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.iv-signature a:hover { text-decoration-color: currentColor; }
.iv-signature a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Marca de agua: no se puede tocar ni seleccionar y no tapa la lectura. */
.watermark {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 50; pointer-events: none; user-select: none;
}
.watermark text {
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.3em;
  fill: rgba(243, 238, 228, 0.09);
}

/* Sobre animado al abrir un link personal (opcional, tanda 3d). Solo CSS, con las variables
   de la plantilla: se cierra con el sello, se abre la solapa, sube la carta y se desvanece
   (2.4 s en total). Al terminar queda oculto y no recibe toques; invite.js lo quita antes
   si la persona toca o pulsa una tecla. Con "reducir movimiento" no aparece. */
.iv-envelope {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  background: var(--bg); color: var(--text); font-family: var(--sans);
  animation: iv-envelope-out 0.6s ease-in 1.8s forwards;
}
.iv-envelope__body {
  position: relative; width: min(300px, 78vw); aspect-ratio: 3 / 2;
  perspective: 900px;
}
.iv-envelope__pocket, .iv-envelope__flap, .iv-envelope__letter { position: absolute; left: 0; width: 100%; }
.iv-envelope__pocket {
  inset: 0; height: 100%; z-index: 2;
  background: var(--accent);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.iv-envelope__flap {
  top: 0; height: 56%; z-index: 3; transform-origin: top center;
  background: color-mix(in srgb, var(--accent) 72%, var(--text));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: iv-envelope-flap 0.6s ease-in-out 0.5s forwards;
}
.iv-envelope__letter {
  left: 8%; width: 84%; top: 8%; height: 84%; z-index: 1; box-sizing: border-box;
  padding: 9% 8% 0; text-align: center; overflow: hidden;
  font-family: var(--serif); font-size: clamp(16px, 5vw, 21px); line-height: 1.15; color: var(--text);
  background: var(--bg-alt); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  animation: iv-envelope-letter 0.6s ease-out 1s forwards;
}
.iv-envelope__seal {
  position: absolute; left: 50%; top: 56%; z-index: 4;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--accent); border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
  font-family: var(--serif); font-size: 20px; letter-spacing: 0.04em;
  animation: iv-envelope-seal 0.3s ease-in 0.35s forwards;
}
.iv-envelope__skip { font-size: 13px; letter-spacing: 0.08em; color: var(--text-2, var(--text)); }
@keyframes iv-envelope-seal { to { opacity: 0; transform: scale(0.6); } }
@keyframes iv-envelope-flap { to { transform: rotateX(180deg); z-index: 0; } }
@keyframes iv-envelope-letter { to { transform: translateY(-38%); } }
@keyframes iv-envelope-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .iv-envelope { display: none; } }
@media print { .iv-envelope { display: none; } }