@font-face { font-family: "Permanent Marker"; src: url("../fonts/photobooth/marker-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/photobooth/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/photobooth/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* PHOTOBOOTH — birthdays, reunions, graduations, despedidas, engagement parties.
   Signature idea: a photobooth. Press the button: 3, 2, 1, flash, and out comes a four-frame photo strip
   with marker doodles. Send your own four photos and they replace the frames.
   Type: Permanent Marker · Inter */
:root { --bg: #fff7ee; --paper: #ffffff; --ink: #1d1b22; --muted: #66626e; --line: rgba(29, 27, 34, .14);
  --accent: #ef3f6b; --accent-ink: #fff; --f1: #ffb4c4; --f2: #9fd8ff; --f3: #ffe08a; --f4: #b8f0c8; --curtain: #c4223f;
  --display: "Permanent Marker", "Comic Sans MS", cursive; --text: "Inter", system-ui, sans-serif; --radius: 14px; }
body { background: radial-gradient(circle at 10px 10px, color-mix(in srgb, var(--accent) 12%, transparent) 2px, transparent 2.5px) 0 0 / 20px 20px, var(--bg); background-color: var(--bg); }
.ph-intro { --intro-ms: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: color-mix(in srgb, var(--bg) 92%, var(--ink)); transition: opacity .5s ease 1.5s, visibility 0s linear 2s; }
.ph-booth { position: relative; width: 220px; height: 280px; border-radius: 14px 14px 6px 6px; background: var(--ink); box-shadow: 0 24px 40px -24px var(--ink); overflow: hidden; }
.ph-sign { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font: 1.7rem/1 var(--display); color: var(--f3); text-shadow: 0 0 12px color-mix(in srgb, var(--f3) 70%, transparent); z-index: 2; }
.ph-curtain { position: absolute; left: 12px; right: 12px; top: 80px; bottom: 0; background: repeating-linear-gradient(90deg, var(--curtain) 0 12px, color-mix(in srgb, var(--curtain) 70%, #000) 12px 20px); border-radius: 6px 6px 0 0; transform-origin: top; transition: transform .5s ease; }
.ph-count { position: absolute; inset: 80px 0 0; display: grid; place-items: center; }
.ph-count i { position: absolute; font: 5rem var(--display); font-style: normal; color: #fff; opacity: 0; }
.ph-btn { min-height: 54px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 700 1rem var(--text); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000); cursor: pointer; }
.ph-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.ph-for { font: 1.3rem var(--display); color: var(--ink); margin: 0; }
.ph-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.is-opening .ph-curtain { transform: scaleY(.04); }
.is-opening .ph-count i { animation: count .45s ease forwards; }
.is-opening .ph-count i:nth-child(2) { animation-delay: .45s; } .is-opening .ph-count i:nth-child(3) { animation-delay: .9s; }
@keyframes count { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.is-opening .ph-flash { animation: flash .6s ease 1.35s forwards; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: .9; } }
.is-opening .ph-btn { opacity: 0; transition: opacity .2s; }
.t-photobooth .sh-k { font-weight: 700; color: var(--accent); }
.t-photobooth .sh-t { font-family: var(--display); color: var(--ink); transform: rotate(-1.5deg); }
.t-photobooth .s-hero { padding: 40px 20px; }
.ph-hero { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; width: 100%; max-width: 560px; text-align: left; }
.ph-strip { display: grid; gap: 6px; padding: 8px 8px 10px; background: var(--paper); box-shadow: 0 18px 30px -18px var(--ink); transform: rotate(-4deg); }
.ph-frame { display: grid; place-items: center; aspect-ratio: 1; }
.ph-frame i { font: 1.8rem var(--display); font-style: normal; color: rgba(255,255,255,.95); }
.ph-frame.f1 { background: var(--f1); } .ph-frame.f2 { background: var(--f2); } .ph-frame.f3 { background: var(--f3); } .ph-frame.f4 { background: var(--f4); }
.ph-strip-cap { font: .8rem var(--display); text-align: center; color: var(--ink); margin-top: 2px; }
.t-photobooth .hero-guest { font: 1.2rem var(--display); color: var(--accent); }
.t-photobooth .hero-k { font: 700 .74rem var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.t-photobooth .hero-t { font-family: var(--display); font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1.02; color: var(--ink); overflow-wrap: anywhere; }
.t-photobooth .hero-line { color: var(--muted); }
.t-photobooth .hero-date { font-weight: 700; margin-bottom: 0; } .t-photobooth .hero-place { color: var(--muted); }
.t-photobooth .hero-cta { background: var(--accent); font-weight: 700; box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.t-photobooth .cd-u { background: var(--paper); padding: 12px 0 8px; box-shadow: 0 12px 20px -14px var(--ink); transform: rotate(-2deg); }
.t-photobooth .cd-u:nth-child(even) { transform: rotate(2deg); }
.t-photobooth .cd-u b { font-family: var(--display); color: var(--accent); }
.t-photobooth .btn-line { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.t-photobooth .tl-time { color: var(--accent); font-weight: 700; }
.t-photobooth .tl-title { font-weight: 700; }
.t-photobooth .vn-c { border: 0; box-shadow: 0 16px 30px -20px var(--ink); border-radius: 4px; transform: rotate(-1deg); }
.t-photobooth .vn-n { font-family: var(--display); }
.t-photobooth .vn-l { color: var(--accent); font-weight: 700; }
.t-photobooth .rs, .t-photobooth .rs-done { border: 0; border-radius: 4px; box-shadow: 0 20px 34px -22px var(--ink); }
.t-photobooth .rs-btn { background: var(--accent); font-weight: 700; }
.t-photobooth .rs-done-t { font-family: var(--display); }
.t-photobooth .cl-line { font-family: var(--display); font-size: 1.9rem; }
.t-photobooth .cl-sign { font-weight: 700; color: var(--accent); }
.ph-frame.has-img { background-size: cover; background-position: center; filter: saturate(.9) contrast(1.04); }
.ph-frame.has-img i { display: none; }

/* ---------- booth-screen cover & photo-strip gallery ---------- */
.pb-booth { position: relative; margin: 0 auto; max-width: 440px; padding: 16px 16px 40px; border-radius: 20px; background: #26232b; box-shadow: inset 0 0 0 4px #3a3640, 0 20px 36px -22px rgba(29,27,34,.6); overflow: hidden; }
.pb-simg { border-radius: 10px; background: color-mix(in srgb, var(--f2) 40%, var(--paper)); }
.pb-simg::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 2; }
.pb-photo.in .pb-simg::after { animation: pb-flash 1.1s ease-out .4s; }
@keyframes pb-flash { 8% { opacity: .9; } to { opacity: 0; } }
.pb-cur { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 3; pointer-events: none; background: repeating-linear-gradient(90deg, var(--curtain) 0 10px, color-mix(in srgb, var(--curtain) 70%, #000) 10px 14px); }
.pb-cur.l { left: 0; border-radius: 0 0 60% 0; } .pb-cur.r { right: 0; border-radius: 0 0 0 60%; }
.pb-photo.in .pb-cur.l { animation: pb-pull-l 1.2s ease-out both; } .pb-photo.in .pb-cur.r { animation: pb-pull-r 1.2s ease-out both; }
@keyframes pb-pull-l { from { width: 52%; } to { width: 10%; } } @keyframes pb-pull-r { from { width: 52%; } to { width: 10%; } }
.pb-cur.l { width: 10%; } .pb-cur.r { width: 10%; }
.pb-booth figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 700 .74rem var(--text); letter-spacing: .2em; color: #fff; }
.pb-booth figcaption i { font-style: normal; color: var(--accent); animation: pb-rec 1.2s steps(2) infinite; }
@keyframes pb-rec { 50% { opacity: 0; } }
.pb-strips { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 14px; }
.pb-strip { width: min(40vw, 160px); padding: 8px 8px 0; display: grid; gap: 6px; background: #fff; box-shadow: 0 14px 24px -16px rgba(29,27,34,.6); }
.pb-strip.k0 { transform: rotate(-4deg); } .pb-strip.k1 { transform: rotate(3deg) translateY(16px); } .pb-strip.k2 { transform: rotate(-1deg); }
.pb-shot { margin: 0; } .pb-gimg { aspect-ratio: 4 / 3; background: var(--f1); }
.pb-shot:nth-child(2) .pb-gimg { background: var(--f2); } .pb-shot:nth-child(3) .pb-gimg { background: var(--f3); } .pb-shot:nth-child(4) .pb-gimg { background: var(--f4); }
.pb-foot { margin: 0; padding: 6px 2px 10px; text-align: center; font: 1rem/1.2 var(--display); color: var(--accent); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .pb-cur, .pb-simg::after, .pb-booth figcaption i { animation: none; } }