/* V9: invitación en UNA sola hoja, adaptable y sin recortes ni deformaciones. */
:root{font-family:Georgia,'Times New Roman',serif;color:#573324;background:#f6ebe5;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.ambient-background{position:fixed;inset:-32px;z-index:0;background-image:linear-gradient(rgba(255,250,246,.61),rgba(245,232,221,.69)),url('assets/invitacion.webp');background-position:center;background-size:cover;filter:blur(27px);transform:scale(1.035);pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.02),rgba(133,76,43,.11));pointer-events:none}
.invitation-screen{position:relative;z-index:1;display:grid;place-items:center;min-height:100vh;min-height:100dvh;width:100%;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
/* La imagen 2:3 ocupa el máximo espacio sin cortar texto en ninguna relación de pantalla. */
.invitation{position:relative;width:min(100%,66.6667dvh);aspect-ratio:2/3;min-width:0;margin-inline:auto;isolation:isolate;box-shadow:0 14px 54px rgba(73,38,22,.18)}
.invitation-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* Área interactiva alineada con el botón marrón impreso al pie del arte. */
.confirm-area{position:absolute;left:17.5%;top:88.9%;width:65%;height:8.1%;z-index:2;border:0;border-radius:999px;background:transparent;color:transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.confirm-area:focus-visible{outline:3px solid #8b4f26;outline-offset:3px;box-shadow:0 0 0 6px rgba(255,250,246,.86)}
.confirm-area:hover{box-shadow:inset 0 0 0 2px rgba(255,239,214,.62)}
.screenreader-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.dialog-container{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.dialog-overlay{position:absolute;inset:0;background:rgba(42,27,21,.63);backdrop-filter:blur(5px)}
.dialog{position:relative;z-index:1;width:min(100%,390px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;border-radius:22px;background:linear-gradient(155deg,#fffefa 0%,#fff8f1 74%,#f8eee6 100%);box-shadow:0 25px 85px rgba(42,25,15,.31);border:1px solid rgba(160,105,61,.20);padding:25px 25px 29px;text-align:center}
.dialog-close{position:absolute;top:10px;right:14px;border:0;background:none;font:400 31px/1 system-ui,sans-serif;color:#927565;width:41px;height:41px;border-radius:50%}
.dialog-close:hover{background:#f2e6da}
.dialog-symbol{font-size:26px;color:#9f6a44;margin:5px 0 6px}
.dialog h1{font-size:clamp(25px,6vw,30px);font-weight:400;line-height:1.15;margin:10px 0 21px;letter-spacing:-.025em}
#rsvp-form{display:flex;flex-direction:column;gap:0}
#guest-name{display:block;width:100%;height:54px;padding:13px 17px;border-radius:11px;border:1px solid #cdb49f;background:#fff;color:#442c20;font:400 16px/1.4 system-ui,sans-serif;outline:none}
#guest-name:focus{border-color:#975d39;box-shadow:0 0 0 3px rgba(151,93,57,.15)}
#guest-name::placeholder{color:#9b8272;opacity:1}
.honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;left:-10000px!important}
.form-message{font:400 13px/1.4 system-ui,sans-serif;color:#9b3e31;text-align:center;margin:9px 0 2px;min-height:0}
.form-message:empty{display:none}
.action-submit,.action-close{display:block;width:100%;margin-top:16px;border:0;border-radius:999px;min-height:52px;background:linear-gradient(135deg,#98562e,#6f3b22);color:#fff;font:600 17px/1.25 system-ui,sans-serif;box-shadow:0 7px 17px rgba(92,47,22,.18)}
.action-submit:disabled{opacity:.65;cursor:progress}
.action-submit:hover:not(:disabled),.action-close:hover{filter:brightness(1.07)}
.success-mark{display:grid;place-items:center;margin:8px auto 12px;width:54px;height:54px;border-radius:50%;background:#f2e5d9;color:#774526;font:600 29px/1 system-ui,sans-serif}
.success h2{margin:6px 0 8px;font-size:24px;font-weight:400}
.success p{font:400 15px/1.5 system-ui,sans-serif;color:#725c4d;margin:0 0 17px}
.action-close{margin-top:10px}
@media(max-width:650px){.invitation{box-shadow:none}.dialog{border-radius:20px;padding:24px 22px 27px}}
@media(max-height:460px){.dialog{padding-top:12px;padding-bottom:16px}.dialog h1{margin:4px 0 13px}.dialog-symbol{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
