/* ─────────────────────────────────────────────────────────────
   Carta para Tef

   Dirección: una estampa japonesa de una serie que no existe,
   invadida por un elenco de ciruelas con cara. La tensión entre
   las dos cosas es el punto: si sólo lee como estampa, o sólo
   como dibujito, salió mal.

   Materiales, todos de la botella de umeshu: el ámbar del licor,
   el papel de la etiqueta, la banda verde, el dorado de la tapa.
   Encima, dos cosas que la botella no tiene: el bermellón del
   sello y el índigo del agua.

   Reglas de la casa, heredadas de la xilografía:
   · rellenos PLANOS — el único degradé permitido es el bokashi
     del fondo, que es una técnica de estampa, no un gradiente de UI;
   · el color va corrido 2-3px respecto de su contorno negro
     (registro imperfecto): es el defecto que la hace leer grabada;
   · las líneas se afinan en las puntas, nunca grosor parejo.

   Los patrones (--olas, --canamo) salen de tools/patrones.py.
   ───────────────────────────────────────────────────────────── */

:root {
  /* de la botella */
  --ume:        #e0a441;  /* ámbar del licor */
  --ume-luz:    #f7ce79;  /* ámbar con luz atravesándolo */
  --ume-hondo:  #8a4f12;  /* ámbar en sombra */
  --washi:      #f7f0dd;  /* papel de la etiqueta */
  --washi-2:    #efe3c4;  /* papel un tono más hondo */
  --washi-3:    #e2d2a6;  /* papel del paspartú */
  --hoja:       #5c7b33;  /* verde de la banda */
  --hoja-boton: #4d6a2c;  /* el mismo verde, un punto más hondo: sobre él
                             el texto del botón llega a 5.4:1 */
  --hoja-hondo: #46612a;
  --kin:        #c7a03c;  /* dorado de la tapa */

  /* de la estampa */
  --sumi:       #22190f;  /* tinta del contorno */
  --tinta-suave:#8a6434;  /* tinta aguada, para las nubes */
  --beni:       #c8352a;  /* bermellón del sello */
  --ai:         #34607f;  /* índigo del agua */
  --agua:       #dfeaef;
  --rama:       #7a5a2e;

  /* de la ternura */
  --rubor:      #f08a95;
  --rubor-linea:#d9636f;
  --brillo:     #fffdf4;
  --niebla:     #fffdf4;
  --tinta:      var(--sumi);

  --radio:      26px;
  --curva:      cubic-bezier(.34, 1.56, .64, 1);  /* rebote */

  --olas:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M-20 20 A20 20 0 0 1 20 20 M-14.5 20 A14.5 14.5 0 0 1 14.5 20 M-9 20 A9 9 0 0 1 9 20 M-3.8 20 A3.8 3.8 0 0 1 3.8 20 M20 20 A20 20 0 0 1 60 20 M25.5 20 A14.5 14.5 0 0 1 54.5 20 M31 20 A9 9 0 0 1 49 20 M36.2 20 A3.8 3.8 0 0 1 43.8 20 M-40 40 A20 20 0 0 1 0 40 M-34.5 40 A14.5 14.5 0 0 1 -5.5 40 M-29 40 A9 9 0 0 1 -11 40 M-23.8 40 A3.8 3.8 0 0 1 -16.2 40 M0 40 A20 20 0 0 1 40 40 M5.5 40 A14.5 14.5 0 0 1 34.5 40 M11 40 A9 9 0 0 1 29 40 M16.2 40 A3.8 3.8 0 0 1 23.8 40 M40 40 A20 20 0 0 1 80 40 M45.5 40 A14.5 14.5 0 0 1 74.5 40 M51 40 A9 9 0 0 1 69 40 M56.2 40 A3.8 3.8 0 0 1 63.8 40' fill='none' stroke='%23fffaf0' stroke-width='1.5' opacity='0.26' stroke-linecap='round'/%3E%3C/svg%3E");
  --olas-hoja:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M-20 20 A20 20 0 0 1 20 20 M-14.5 20 A14.5 14.5 0 0 1 14.5 20 M-9 20 A9 9 0 0 1 9 20 M-3.8 20 A3.8 3.8 0 0 1 3.8 20 M20 20 A20 20 0 0 1 60 20 M25.5 20 A14.5 14.5 0 0 1 54.5 20 M31 20 A9 9 0 0 1 49 20 M36.2 20 A3.8 3.8 0 0 1 43.8 20 M-40 40 A20 20 0 0 1 0 40 M-34.5 40 A14.5 14.5 0 0 1 -5.5 40 M-29 40 A9 9 0 0 1 -11 40 M-23.8 40 A3.8 3.8 0 0 1 -16.2 40 M0 40 A20 20 0 0 1 40 40 M5.5 40 A14.5 14.5 0 0 1 34.5 40 M11 40 A9 9 0 0 1 29 40 M16.2 40 A3.8 3.8 0 0 1 23.8 40 M40 40 A20 20 0 0 1 80 40 M45.5 40 A14.5 14.5 0 0 1 74.5 40 M51 40 A9 9 0 0 1 69 40 M56.2 40 A3.8 3.8 0 0 1 63.8 40' fill='none' stroke='%23f2fbe2' stroke-width='1.4' opacity='0.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --canamo:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78.00' height='45.03' viewBox='0 0 78.00 45.03'%3E%3Cg opacity='0.13'%3E%3Cpath d='M26.00 0.00 L13.00 22.52 L-13.00 22.52 L-26.00 0.00 L-13.00 -22.52 L13.00 -22.52 Z M104.00 0.00 L91.00 22.52 L65.00 22.52 L52.00 0.00 L65.00 -22.52 L91.00 -22.52 Z M26.00 45.03 L13.00 67.55 L-13.00 67.55 L-26.00 45.03 L-13.00 22.52 L13.00 22.52 Z M104.00 45.03 L91.00 67.55 L65.00 67.55 L52.00 45.03 L65.00 22.52 L91.00 22.52 Z M65.00 22.52 L52.00 45.03 L26.00 45.03 L13.00 22.52 L26.00 0.00 L52.00 0.00 Z M-13.00 22.52 L-26.00 45.03 L-52.00 45.03 L-65.00 22.52 L-52.00 0.00 L-26.00 0.00 Z M143.00 22.52 L130.00 45.03 L104.00 45.03 L91.00 22.52 L104.00 0.00 L130.00 0.00 Z' fill='none' stroke='%238a4f12' stroke-width='1.3'/%3E%3Cpath d='M26.00 0.00 L-26.00 0.00 M13.00 22.52 L-13.00 -22.52 M-13.00 22.52 L13.00 -22.52 M19.50 11.26 L-19.50 -11.26 M0.00 22.52 L-0.00 -22.52 M-19.50 11.26 L19.50 -11.26 M104.00 0.00 L52.00 0.00 M91.00 22.52 L65.00 -22.52 M65.00 22.52 L91.00 -22.52 M97.50 11.26 L58.50 -11.26 M78.00 22.52 L78.00 -22.52 M58.50 11.26 L97.50 -11.26 M26.00 45.03 L-26.00 45.03 M13.00 67.55 L-13.00 22.52 M-13.00 67.55 L13.00 22.52 M19.50 56.29 L-19.50 33.77 M0.00 67.55 L-0.00 22.52 M-19.50 56.29 L19.50 33.77 M104.00 45.03 L52.00 45.03 M91.00 67.55 L65.00 22.52 M65.00 67.55 L91.00 22.52 M97.50 56.29 L58.50 33.77 M78.00 67.55 L78.00 22.52 M58.50 56.29 L97.50 33.77 M65.00 22.52 L13.00 22.52 M52.00 45.03 L26.00 0.00 M26.00 45.03 L52.00 0.00 M58.50 33.77 L19.50 11.26 M39.00 45.03 L39.00 0.00 M19.50 33.77 L58.50 11.26 M-13.00 22.52 L-65.00 22.52 M-26.00 45.03 L-52.00 0.00 M-52.00 45.03 L-26.00 0.00 M-19.50 33.77 L-58.50 11.26 M-39.00 45.03 L-39.00 0.00 M-58.50 33.77 L-19.50 11.26 M143.00 22.52 L91.00 22.52 M130.00 45.03 L104.00 0.00 M104.00 45.03 L130.00 0.00 M136.50 33.77 L97.50 11.26 M117.00 45.03 L117.00 0.00 M97.50 33.77 L136.50 11.26' fill='none' stroke='%238a4f12' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
  --canamo-kin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.00' height='25.98' viewBox='0 0 45.00 25.98'%3E%3Cg opacity='0.3'%3E%3Cpath d='M15.00 0.00 L7.50 12.99 L-7.50 12.99 L-15.00 0.00 L-7.50 -12.99 L7.50 -12.99 Z M60.00 0.00 L52.50 12.99 L37.50 12.99 L30.00 0.00 L37.50 -12.99 L52.50 -12.99 Z M15.00 25.98 L7.50 38.97 L-7.50 38.97 L-15.00 25.98 L-7.50 12.99 L7.50 12.99 Z M60.00 25.98 L52.50 38.97 L37.50 38.97 L30.00 25.98 L37.50 12.99 L52.50 12.99 Z M37.50 12.99 L30.00 25.98 L15.00 25.98 L7.50 12.99 L15.00 0.00 L30.00 0.00 Z M-7.50 12.99 L-15.00 25.98 L-30.00 25.98 L-37.50 12.99 L-30.00 0.00 L-15.00 0.00 Z M82.50 12.99 L75.00 25.98 L60.00 25.98 L52.50 12.99 L60.00 0.00 L75.00 0.00 Z' fill='none' stroke='%23a8842e' stroke-width='1.1'/%3E%3Cpath d='M15.00 0.00 L-15.00 0.00 M7.50 12.99 L-7.50 -12.99 M-7.50 12.99 L7.50 -12.99 M11.25 6.50 L-11.25 -6.50 M0.00 12.99 L-0.00 -12.99 M-11.25 6.50 L11.25 -6.50 M60.00 0.00 L30.00 0.00 M52.50 12.99 L37.50 -12.99 M37.50 12.99 L52.50 -12.99 M56.25 6.50 L33.75 -6.50 M45.00 12.99 L45.00 -12.99 M33.75 6.50 L56.25 -6.50 M15.00 25.98 L-15.00 25.98 M7.50 38.97 L-7.50 12.99 M-7.50 38.97 L7.50 12.99 M11.25 32.48 L-11.25 19.49 M0.00 38.97 L-0.00 12.99 M-11.25 32.48 L11.25 19.49 M60.00 25.98 L30.00 25.98 M52.50 38.97 L37.50 12.99 M37.50 38.97 L52.50 12.99 M56.25 32.48 L33.75 19.49 M45.00 38.97 L45.00 12.99 M33.75 32.48 L56.25 19.49 M37.50 12.99 L7.50 12.99 M30.00 25.98 L15.00 0.00 M15.00 25.98 L30.00 0.00 M33.75 19.49 L11.25 6.50 M22.50 25.98 L22.50 0.00 M11.25 19.49 L33.75 6.50 M-7.50 12.99 L-37.50 12.99 M-15.00 25.98 L-30.00 0.00 M-30.00 25.98 L-15.00 0.00 M-11.25 19.49 L-33.75 6.50 M-22.50 25.98 L-22.50 0.00 M-33.75 19.49 L-11.25 6.50 M82.50 12.99 L52.50 12.99 M75.00 25.98 L60.00 0.00 M60.00 25.98 L75.00 0.00 M78.75 19.49 L56.25 6.50 M67.50 25.98 L67.50 0.00 M56.25 19.49 L78.75 6.50' fill='none' stroke='%23a8842e' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");

  /* grano del papel: el ruido de la fibra bajo la tinta */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  background: var(--ume);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Zen Maru Gothic", ui-rounded, system-ui, sans-serif;
  color: var(--sumi);
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── el campo: ámbar, olas y niebla ───────────────────────────── */
.campo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* bokashi: el aguado que el impresor pasa a mano en el borde */
  background:
    var(--olas) 0 0 / 34px 34px,
    linear-gradient(180deg, var(--ume-luz) 0%, var(--ume) 34%, #c07f22 100%);
}

.niebla-fondo {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(190vw, 1400px);
  height: auto;
  transform: translateX(-50%);
  opacity: .5;
}

.kasumi path {
  fill: var(--niebla);
  stroke: var(--kin);
  stroke-width: 1.1;
  opacity: .62;
}

/* ── el marco: paspartú de la estampa montada ─────────────────── */
.carta {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.6rem) clamp(.6rem, 3vw, 1.6rem) clamp(2rem, 6vw, 3.4rem);
}

.marco {
  position: relative;
  padding: clamp(9px, 2.6vw, 18px);
  border-radius: calc(var(--radio) + 8px);
  background: var(--canamo-kin) 0 0 / 45px 26px, var(--washi-3);
  box-shadow:
    0 0 0 1.5px var(--kin),
    0 26px 60px -20px rgba(70, 38, 6, .62);
}
/* hilo dorado por dentro del paspartú */
.marco::after {
  content: "";
  position: absolute;
  inset: calc(clamp(9px, 2.6vw, 18px) - 4px);
  border: 1px solid rgba(199, 160, 60, .85);
  border-radius: calc(var(--radio) + 3px);
  pointer-events: none;
}

/* ── el papel: la estampa ─────────────────────────────────────── */
.papel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  padding: clamp(1.6rem, 6vw, 2.6rem) clamp(1.1rem, 5vw, 2.4rem) 0;
  background: var(--washi);
  box-shadow: 0 0 0 1px rgba(138, 79, 18, .28) inset;
}

/* cáñamo tramado bajo todo, muy bajo */
.papel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background: var(--canamo) 0 0 / 78px 45px;
}
/* grano de la fibra */
.papel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  mix-blend-mode: multiply;
  background: var(--grano) 0 0 / 160px 160px;
}

.papel > * { position: relative; z-index: 1; }

.niebla-papel {
  position: absolute;
  left: -6%;
  width: 116%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.niebla-alta { top: clamp(6rem, 24vw, 8.4rem); }
.niebla-baja { position: relative; margin: -.6rem -6% .4rem; left: 0; width: 112%; }
.kasumi-papel path { opacity: .8; stroke-width: 1.2; }

/* ── el panel vertical (tategaki) ─────────────────────────────── */
.tategaki {
  position: absolute;
  top: 0;
  right: clamp(.5rem, 2.6vw, 1.3rem);
  z-index: 2;
  padding: .85rem .34rem 1.1rem;
  background: var(--washi-2);
  border: 1px solid rgba(199, 160, 60, .9);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 0 -1px rgba(138, 79, 18, .18);
}
.tategaki p {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Zen Maru JP", "Zen Maru Gothic", sans-serif;
  font-size: .78rem;
  letter-spacing: .26em;
  color: var(--ume-hondo);
}

/* la ciruelita que se sienta arriba del panel vertical */
.tategaki-ume {
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
}

/* ── tipografía compartida ────────────────────────────────────── */
.encabezado {
  margin: 0;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: lowercase;
  color: var(--ume-hondo);
}

.linea {
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-content: center;
}
.linea::before,
.linea::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 4rem;
  background: linear-gradient(90deg, transparent, var(--kin), transparent);
}

/* ── portada ──────────────────────────────────────────────────── */
.portada {
  padding: .2rem 3.1rem .2rem 0;
  text-align: center;
}

.nombre {
  position: relative;
  isolation: isolate;
  margin: .1rem 0 0;
  font-size: clamp(4rem, 23vw, 6.6rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--sumi);
}
/* el eco de color, corrido: la plancha del ámbar que no calzó */
.nombre::before {
  content: attr(data-eco);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--ume);
  transform: translate(5px, -4px);
}

/* ── el elenco ────────────────────────────────────────────────── */
.elenco {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .1rem;
  margin-top: .5rem;
}

.actor {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.actor svg { display: block; width: 100%; height: auto; }
.actor-chico  { width: 58px; margin-bottom: 6px; }
.actor-grande { width: 96px; margin: 0 -6px; }
.actor-medio  { width: 70px; margin-bottom: 2px; }
.actor:focus-visible { outline: 3px solid var(--beni); outline-offset: 2px; border-radius: 50%; }

.hojita-suelta {
  position: absolute;
  z-index: 0;
  left: 6%;
  bottom: -14px;
  width: 54px;
  height: auto;
  transform: rotate(-14deg);
}

/* ── el haiku, entre volutas de vapor ─────────────────────────── */
.haiku-zona {
  position: relative;
  margin: clamp(1.1rem, 4vw, 1.8rem) 0 clamp(1.4rem, 5vw, 2.2rem);
  padding-top: clamp(4.6rem, 19vw, 6rem);
}

.volutas { position: absolute; inset: 0; pointer-events: none; }
.voluta {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.voluta svg { display: block; width: 100%; height: auto; }
.voluta-1 { width: 128px; left: -6%;  top: 2%;  }
.voluta-2 { width: 152px; right: -5%; top: -4%; }
.voluta-3 { width:  94px; left: 33%;  top: 17%; opacity: .94; }

.gotita-suelta {
  position: absolute;
  right: 8%;
  top: 46%;
  width: 26px;
  height: auto;
}

.haiku-bloque {
  position: relative;
  padding: clamp(1.1rem, 4.5vw, 1.7rem) clamp(.8rem, 3vw, 1.4rem);
  background: var(--washi);
  border-top: 1.5px solid var(--kin);
  border-bottom: 1.5px solid var(--kin);
  box-shadow: 0 0 14px 6px var(--washi);
}

.haiku {
  margin: 0;
  font-family: "Klee One", "Zen Maru Gothic", serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 5.9vw, 1.8rem);
  line-height: 1.58;
  text-align: center;
  color: color-mix(in srgb, var(--sumi) 70%, var(--washi));
  text-wrap: balance;
}
.haiku span { display: block; }

/* chispas de adorno: puro exceso, no hacen nada */
.brillito {
  position: absolute;
  color: var(--kin);
  pointer-events: none;
}
.brillito svg { display: block; width: 100%; height: 100%; }
.brillito-1 { width: 16px; height: 16px; left: 6%;  top: 18%; color: var(--beni); }
.brillito-2 { width: 11px; height: 11px; left: 14%; top: 42%; }
.brillito-3 { width: 13px; height: 13px; right: 22%; top: 6%; }
.brillito-4 { width: 10px; height: 10px; right: 9%;  bottom: 14%; color: var(--rubor); }
.brillito-5 { width: 14px; height: 14px; left: 3%;  bottom: 8%; }

/* ── elegir el día ────────────────────────────────────────────── */
.eleccion { text-align: center; }

.titulo-mes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0;
}
.kanji-mes {
  font-family: "Zen Maru JP", "Zen Maru Gothic", sans-serif;
  font-size: 1rem;
  color: var(--beni);
  letter-spacing: .1em;
}

/* el pedido manda: es más grande que el mes, que baja a bajada */
.eleccion .encabezado { font-size: .95rem; letter-spacing: .26em; }

.mes-bajada {
  margin: .5rem 0 0;
  font-size: .8rem;
  letter-spacing: .06em;
  color: #7a6647;
}

.dias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem .8rem;
  margin-top: .9rem;
}

.dia {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .05rem;
  padding: .75rem .4rem .6rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--ume-hondo);
  background: var(--canamo) 0 0 / 78px 45px, var(--washi);
  border: 2.5px solid var(--sumi);
  border-radius: 16px 15px 17px 14px;   /* tallado a mano, no redondeo de UI */
  /* la plancha de color, corrida: el registro que no calza */
  box-shadow: 5px 5px 0 0 var(--ume-luz);
  transition: transform .2s var(--curva), background-color .2s ease,
              box-shadow .2s ease, color .2s ease;
}
.dia:nth-child(odd)  { transform: rotate(-1.1deg); }
.dia:nth-child(even) { transform: rotate(1.1deg); }

.dia .dow {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
}
.dia .num {
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.02;
}
.dia-cara { width: 40px; height: 25px; margin-top: .1rem; }
.dia-ume  { position: absolute; top: -20px; right: -12px; width: 42px; height: 42px; display: none; }

.dia:hover  { transform: rotate(0deg) translateY(-3px); }
.dia:active { transform: rotate(0deg) translateY(3px) scale(.97); }
.dia:focus-visible { outline: 3px solid var(--beni); outline-offset: 4px; }

.dia[aria-pressed="true"] {
  color: var(--washi);
  background: var(--olas-hoja) 0 0 / 40px 40px, var(--ume-hondo);
  transform: rotate(0deg) scale(1.04);
}
.dia[aria-pressed="true"] { box-shadow: 5px 5px 0 0 var(--beni); }
.dia[aria-pressed="true"] .dia-cara {
  --tinta: var(--washi);
  --brillo: var(--ume-hondo);
  --rubor: rgba(255, 255, 255, .34);
  --rubor-linea: rgba(255, 255, 255, .5);
}
.dia[aria-pressed="true"] .dia-ume { display: block; }

/* ── confirmación y festejo ───────────────────────────────────── */
.confirmacion {
  margin-top: clamp(1.6rem, 5.5vw, 2.2rem);
  text-align: center;
}

.festejo {
  position: relative;
  height: 116px;
  margin-bottom: .2rem;
}

.coro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .2rem;
}
.coro-ume { height: auto; }
.coro-1 { width: 62px; margin-bottom: 6px; }
.coro-2 { width: 92px; }
.coro-3 { width: 70px; margin-bottom: 3px; }

.chispas { position: absolute; inset: 0; pointer-events: none; }
.chispa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0;
  color: var(--kin);
}
.chispa svg { width: 100%; height: 100%; display: block; }
.chispa.corazon { color: var(--rubor); width: 16px; height: 16px; }

/* la lluvia de pétalos, encima de todo */
.lluvia {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.petalo {
  position: absolute;
  top: -8%;
  width: 18px;
  height: 22px;
  opacity: 0;
}
.petalo svg { width: 100%; height: 100%; display: block; }

.conf-titulo {
  margin: .3rem 0 1.5rem;
  font-family: "Klee One", serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 6.2vw, 1.95rem);
  color: var(--ume-hondo);
}

.boton {
  display: inline-block;
  padding: .9rem 1.9rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--washi);
  text-decoration: none;
  background: var(--olas-hoja) 0 0 / 40px 40px, var(--hoja-boton);
  border: 2.5px solid var(--sumi);
  border-radius: 999px;
  box-shadow: 4px 4px 0 0 var(--beni);
  transition: transform .18s var(--curva), box-shadow .18s ease;
}
.boton:hover  { transform: translate(-1px, -2px); box-shadow: 6px 6px 0 0 var(--beni); }
.boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--beni); }
.boton:focus-visible { outline: 3px solid var(--sumi); outline-offset: 3px; }

/* ── firma: el pie de la estampa ──────────────────────────────── */
.firma {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.7rem, 3vw, 1.4rem);
  margin-top: clamp(2rem, 7vw, 3rem);
  padding-bottom: 1.5rem;
}
.firma-cuerpo { text-align: right; }
.firma-texto {
  margin: 0;
  font-size: .9rem;
  color: #6b5330;
}
.firma-nombres {
  margin: .1rem 0 0;
  font-family: "Klee One", serif;
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--ume-hondo);
}

.firma-sello {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
}
.columna {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Zen Maru JP", "Zen Maru Gothic", sans-serif;
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--sumi);
  opacity: .8;
}

/* ── el hanko ─────────────────────────────────────────────────── */
.hanko {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  width: 3.05rem;
  height: 3.05rem;
  font-family: "Zen Maru JP", "Zen Maru Gothic", sans-serif;
  color: var(--washi);
  background: var(--beni);
  border: 0;
  /* piedra tallada: las cuatro esquinas distintas */
  border-radius: 6px 4px 7px 3px;
  box-shadow: inset 0 0 0 2.5px rgba(247, 240, 221, .6);
  transform: rotate(-5deg);
}
/* la tinta del sello nunca sale pareja */
.hanko::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .3;
  mix-blend-mode: screen;
  background: var(--grano) 0 0 / 60px 60px;
  pointer-events: none;
}
.hanko-char {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.hanko-firma { cursor: pointer; }
.hanko-firma:focus-visible { outline: 3px solid var(--sumi); outline-offset: 3px; }
.hanko-cara {
  position: absolute;
  bottom: .28rem;
  left: 50%;
  width: 30px;
  height: 19px;
  margin-left: -15px;
  --tinta: var(--washi);
  --brillo: var(--beni);
  --rubor: rgba(255, 255, 255, .32);
  --rubor-linea: rgba(255, 255, 255, .45);
}
.hanko-firma .hanko-char { margin-bottom: .5rem; }

/* ── la banda verde del pie ───────────────────────────────────── */
.banda {
  position: relative;
  height: 50px;
  margin: 0 calc(-1 * clamp(1.1rem, 5vw, 2.4rem));
  background: var(--olas-hoja) 0 0 / 40px 40px, var(--hoja);
  border-top: 2.5px solid var(--kin);
}
.banda-cara {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 72px;
  height: 45px;
  margin-left: -36px;
  --tinta: #1d2a10;
  --brillo: #eef7dd;
  --rubor: #e08d97;
  --rubor-linea: #b95d68;
}

/* ── el sobre ─────────────────────────────────────────────────── */
.sobre {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: 1.5rem;
  padding: 2rem;
  width: 100%;
  font-family: inherit;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background:
    var(--olas) 0 0 / 34px 34px,
    linear-gradient(180deg, var(--ume-luz) 0%, var(--ume) 40%, #b9781f 100%);
}
.sobre-campo { position: absolute; inset: 0; pointer-events: none; }
.niebla-sobre {
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(200vw, 1200px);
  height: auto;
  transform: translateX(-50%);
  opacity: .55;
}

.sobre-papel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .05rem;
  padding: 7rem 2.6rem 2.4rem;
  background: var(--canamo) 0 0 / 78px 45px, var(--washi);
  border: 3px solid var(--sumi);
  border-radius: 14px 12px 15px 11px;
  box-shadow: 6px 7px 0 0 rgba(138, 79, 18, .5);
}
.sobre-solapa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.solapa-color { fill: var(--washi-2); transform: translate(3px, -3px); }
.solapa-linea { fill: none; stroke: var(--sumi); stroke-width: 3; stroke-linejoin: round; }

.hanko-sobre {
  position: absolute;
  top: 3.3rem;
  left: 50%;
  margin-left: -1.55rem;
  z-index: 2;
}
.hanko-sobre .hanko-char {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.sobre-nombre {
  font-family: "Klee One", serif;
  font-weight: 600;
  font-size: clamp(3rem, 17vw, 4.2rem);
  line-height: 1.05;
  color: var(--ume-hondo);
}
.sobre-cara { width: 54px; height: 34px; margin-top: .25rem; }

.sobre-pie {
  position: relative;
  font-size: .95rem;
  letter-spacing: .16em;
  color: #3f2607;
}

.sobre-ume {
  position: absolute;
  right: -44px;
  bottom: -26px;
  z-index: -1;
  width: 84px;
  height: auto;
}
.sobre-ume-2 {
  position: absolute;
  left: -38px;
  top: -14px;
  z-index: -1;
  width: 66px;
  height: auto;
  transform: rotate(-12deg);
}
.sobre-brillo {
  position: absolute;
  color: var(--washi);
  pointer-events: none;
}
.sobre-brillo-1 { width: 22px; height: 22px; left: -34px; bottom: 22%; }
.sobre-brillo-2 { width: 15px; height: 15px; right: -30px; top: 16%; }
.sobre-brillo svg { display: block; width: 100%; height: 100%; }

.sobre:focus-visible { outline: 4px solid var(--washi); outline-offset: -12px; }

.sobre.abierto {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .55s ease, transform .8s var(--curva);
}

/* ── desktop ──────────────────────────────────────────────────── */
@media (min-width: 40rem) {
  .dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dia .num { font-size: 2.15rem; }
  .tategaki p { font-size: .92rem; }
  .portada { padding-right: 3.6rem; }
  .voluta-1 { width: 140px; }
  .voluta-2 { width: 178px; }
  .voluta-3 { width: 116px; }
  .sobre-ume { width: 92px; right: 18%; }
}

/* ── movimiento ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* el vapor sube todo el tiempo, sin apuro */
  .voluta { animation: vapor 13s ease-in-out infinite; }
  .voluta-1 { animation-delay: -1.5s; }
  .voluta-2 { animation-delay: -7s; animation-duration: 16s; }
  .voluta-3 { animation-delay: -4s; animation-duration: 11s; }
  @keyframes vapor {
    0%, 100% { transform: translate(0, 6px) scale(.98); opacity: .82; }
    50%      { transform: translate(6px, -12px) scale(1.03); opacity: 1; }
  }
  .gotita-suelta { animation: vapor 9s ease-in-out -3s infinite; }

  .carta.revelada .papel { animation: entrar .75s var(--curva) both; }
  @keyframes entrar {
    from { opacity: 0; transform: translateY(24px) scale(.975); }
    to   { opacity: 1; transform: none; }
  }

  .actor { animation: flotar 4.6s ease-in-out infinite; }
  .actor-grande { animation-duration: 5.4s; animation-delay: -1.2s; }
  .actor-medio  { animation-delay: -2.4s; }
  @keyframes flotar {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
  }
  .hojita-suelta { animation: flotar 6s ease-in-out -1.8s infinite; }

  /* el rebote: lo usan las ciruelas, el sello y el coro */
  @keyframes saltar {
    0%, 100% { transform: translateY(0) scale(1); }
    28%      { transform: translateY(-20px) scale(1.1); }
    54%      { transform: translateY(0) scale(.93); }
    76%      { transform: translateY(-7px) scale(1.02); }
  }
  .actor.salta { animation: saltar .62s var(--curva) 2; }
  .voluta.salta { animation: saltar .7s var(--curva) 1; }
  .dia.salta { animation: saltar .5s var(--curva) 1; }
  .hanko-firma.salta { animation: sellar .5s var(--curva) 1; }
  @keyframes sellar {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    35%      { transform: rotate(-9deg) scale(1.22); }
    70%      { transform: rotate(-2deg) scale(.96); }
  }

  .hanko-sobre { animation: latir 2.4s ease-in-out infinite; }
  @keyframes latir {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50%      { transform: rotate(-5deg) scale(1.1); }
  }
  /* la portada respira como una estampa, cada detalle a su propio tiempo */
  .sobre-papel { animation: vaiven-sobre 6.4s ease-in-out -3.7s infinite; }
  @keyframes vaiven-sobre {
    0%, 100% { transform: translateY(3px) rotate(-.8deg); }
    50%      { transform: translateY(-3px) rotate(.8deg); }
  }

  .niebla-sobre .kasumi path:nth-child(1) {
    animation: deriva-kasumi-1 12.5s ease-in-out -7s infinite;
  }
  .niebla-sobre .kasumi path:nth-child(2) {
    animation: deriva-kasumi-2 14.2s ease-in-out -9.4s infinite;
  }
  @keyframes deriva-kasumi-1 {
    0%, 100% { transform: translate(-84px, 18px) rotate(-4deg); opacity: .45; }
    50%      { transform: translate(16px, 22px) rotate(-4deg); opacity: .72; }
  }
  @keyframes deriva-kasumi-2 {
    0%, 100% { transform: translate(236px, 198px) rotate(-4deg); opacity: .7; }
    50%      { transform: translate(146px, 203px) rotate(-4deg); opacity: .46; }
  }

  .sobre-brillo-1 { animation: titilar-1 3.8s ease-in-out -2.1s infinite; }
  .sobre-brillo-2 { animation: titilar-2 4.7s ease-in-out -3.4s infinite; }
  @keyframes titilar-1 {
    0%, 10%, 20%, 53%, 65%, 100% { opacity: .25; transform: scale(.7) rotate(0); }
    14%, 58%                     { opacity: 1; transform: scale(1.2) rotate(12deg); }
  }
  @keyframes titilar-2 {
    0%, 22%, 34%, 71%, 84%, 100% { opacity: .22; transform: scale(.68) rotate(0); }
    27%, 77%                     { opacity: .96; transform: scale(1.24) rotate(-12deg); }
  }

  .sobre-ume { animation: flotar 5s ease-in-out -1.1s infinite; }
  .sobre-ume-2 { animation: flotar-contrafase 5.8s ease-in-out -4.3s infinite; }
  @keyframes flotar-contrafase {
    0%, 100% { transform: translateY(-8px) rotate(-9deg); }
    50%      { transform: translateY(6px) rotate(-16deg); }
  }

  .sobre-cara {
    transform-origin: 50% 38%;
    animation: parpadear 9s ease-in-out -5.2s infinite;
  }
  @keyframes parpadear {
    0%, 11%, 14%, 59%, 62%, 64%, 67%, 100% { transform: scaleY(1); }
    12%, 13%, 60%, 61%, 65%, 66%           { transform: scaleY(.1); }
  }

  .sobre-pie { animation: respirar-pie 4.8s ease-in-out -2.9s infinite; }
  @keyframes respirar-pie {
    0%, 100% { opacity: .5; transform: translateY(3px); }
    50%      { opacity: 1; transform: translateY(-3px); }
  }

  .festejando .coro-1 { animation: saltar .8s var(--curva) 3; }
  .festejando .coro-2 { animation: saltar .8s var(--curva) .1s 3; }
  .festejando .coro-3 { animation: saltar .8s var(--curva) .2s 3; }

  .festejando .chispa { animation: chispear 1.15s ease-out both; }
  @keyframes chispear {
    0%   { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0deg); }
    32%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.15) rotate(160deg); }
  }

  .petalo { animation: caer var(--dur, 4s) linear var(--retraso, 0s) both; }
  @keyframes caer {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--deriva, 40px), 112vh, 0) rotate(var(--giro, 420deg)); }
  }
}

/* ── sin movimiento ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sobre.abierto { transition: none; }
  /* la lluvia y las chispas no aparecen: no hay nada que mirar quieto */
  .lluvia, .chispas { display: none; }
}