:root{
  --bg: #fff8f1; /* warm light background */
  --bg-soft: #fffbf5;
  --text: #3e2a1f; /* cocoa brown */
  --muted: #8a7568;
  --white: #ffffff;
  /* Elegant gold palette */
  --gold: #d4af37;
  --gold-2: #f3d98b;
  --gold-3: #b08a20;
  --shadow: 0 10px 24px rgba(61, 39, 18, 0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg-soft));color:var(--text);font-family:'Handlee', 'Inter', system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.brand{font-family:'Playwrite AU TAS', serif;letter-spacing:1px;color:var(--gold);text-transform:uppercase;font-size:.9rem;}

/* calligraphy for the name */
.quince{font-family:'Playwrite AU TAS', serif;}

.hero{position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden;
  background-image:
    radial-gradient(1000px 500px at 80% -10%, rgba(244,227,173,0.45), rgba(255,255,255,0) 60%),
    radial-gradient(800px 400px at 0% 100%, rgba(255,241,214,0.6), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.92)),
    url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22><g fill=%22%23f1e6cf%22 opacity=%220.5%22><circle cx=%2270%22 cy=%2260%22 r=%221%22/><circle cx=%22150%22 cy=%2290%22 r=%221.2%22/><circle cx=%22230%22 cy=%22150%22 r=%220.8%22/><circle cx=%22310%22 cy=%2280%22 r=%221%22/><circle cx=%2290%22 cy=%22180%22 r=%220.9%22/></g></svg>');
  background-size:cover;}
.hero-content{text-align:center;padding:2rem}
.hero .quince{font-size:clamp(2.2rem,7.5vw,4rem);margin:0.3rem 0 0;color:#2e2018;text-shadow:0 2px 0 rgba(255,255,255,0.5)}
.hero .date{color:var(--muted)}

main{max-width:1000px;margin:auto;padding:2rem 1rem}
/* invitation sections (non-admin) */
main:not(.admin) section{position:relative;margin:2rem 0;padding:1.6rem 1.2rem 1.8rem;border-radius:18px;background:rgba(255,255,255,0.75);backdrop-filter: blur(8px);box-shadow:var(--shadow);border:none;text-align:center}
main:not(.admin) p{margin:.4rem auto;max-width:720px;line-height:1.65;text-align:center}
main:not(.admin) .columns p, main:not(.admin) .columns h4{text-align:center}
main:not(.admin) section h3{font-family:'Playwrite AU TAS', serif;color:var(--gold);margin-top:0;position:relative;text-align:center;letter-spacing:.3px}
main:not(.admin) section h3::after{content:"";display:block;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0), var(--gold), rgba(0,0,0,0));margin:0.45rem auto 0;max-width:220px;opacity:.65}
/* ornamental flourishes top/bottom */
main:not(.admin) section::before,
main:not(.admin) section::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:160px;height:18px;opacity:.6;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 1px 0 rgba(240,220,180,.6))}
main:not(.admin) section::before{top:-10px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='40' viewBox='0 0 300 40'><path d='M10 20 Q40 5 70 20 T130 20 T190 20 T250 20 Q280 5 290 20' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
main:not(.admin) section::after{bottom:-10px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='40' viewBox='0 0 300 40'><path d='M10 20 Q40 35 70 20 T130 20 T190 20 T250 20 Q280 35 290 20' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");}

.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.photo{aspect-ratio:4/3;border-radius:18px;display:grid;place-items:center;color:var(--muted);background:linear-gradient(135deg,#ffffff, #fff7e6);box-shadow:var(--shadow)}
.placeholder{position:relative;}
.placeholder::after{content:"Próximamente";position:absolute;bottom:10px;right:12px;font-size:.8rem;color:#a38c52}

.timer{display:flex;gap:1rem;justify-content:center}
.timer div{background:#fff;border:1px solid #f2ead8;border-radius:14px;padding:0.9rem 1.1rem;min-width:82px;text-align:center;box-shadow:var(--shadow)}
.timer span{font-size:1.7rem;font-weight:700;background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.timer small{display:block;color:var(--muted)}

.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}

.chip{display:inline-block;padding:0.25rem 0.7rem;border-radius:999px;border:1px solid var(--gold);color:var(--gold);background:#fff}
.chip.ok{background:linear-gradient(180deg,var(--gold-2), var(--gold));color:#2b210e;border:none}
.chip.pending{background:#fff;color:#9a884e;border:1px solid var(--gold-2)}

.btn{background:linear-gradient(180deg,var(--gold-2), var(--gold));color:#2b210e;border:none;padding:0.75rem 1.1rem;border-radius:999px;cursor:pointer;font-weight:700;box-shadow:var(--shadow);position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-150%;width:120%;height:100%;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 60%);transform:skewX(-20deg)}
.btn:hover::after{animation:shine 900ms ease}
@keyframes shine{from{left:-150%}to{left:150%}}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:#fff;border:1px solid var(--gold);color:var(--gold);border-radius:999px}
.btn-danger{background:#a93b3b;color:#fff}
.btn-small{padding:0.35rem 0.6rem;border-radius:999px}

input,button,select{font:inherit}
input{width:100%;padding:0.65rem 0.8rem;border:1px solid #eddcb9;border-radius:12px;background:#fff}
label{display:block;margin:0.3rem 0;color:var(--muted)}
form.grid{display:grid;grid-template-columns:2fr 1fr auto;gap:0.5rem}
form.inline{display:flex;gap:0.5rem;align-items:center}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:0.6rem;background:#fff;border:1px solid #f0e7d6}
.table th{background:#fbf6e9;color:#7b5d1c}

.footer{padding:2rem 1rem;text-align:center;color:var(--muted)}
.center{max-width:560px;margin:3rem auto;padding:1rem;text-align:center}
.card{background:#fff;border:1px solid #f0e7d6;border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.admin{max-width:1100px;margin:auto;padding:1rem}
.stats{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.stat{background:#fff;border:1px solid #eee;border-radius:12px;padding:1rem 1.2rem;min-width:140px}
.stat .num{font-size:1.6rem;font-weight:700;color:var(--gold)}

/* frames */
.frame-top,.frame-right,.frame-bottom,.frame-left{position:fixed;background:linear-gradient(90deg,rgba(199,154,59,0.14),rgba(231,197,115,0.28));z-index:1}
.frame-top,.frame-bottom{left:0;right:0;height:10px}
.frame-top{top:0}.frame-bottom{bottom:0}
.frame-right,.frame-left{top:0;bottom:0;width:10px}
.frame-right{right:0}.frame-left{left:0}

/* reveal animations */
.reveal{opacity:0;transform:translateY(16px);transition:all .8s cubic-bezier(.2,.65,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* sparkles in hero */
.sparkle{position:absolute;width:8px;height:8px;background:radial-gradient(circle, #fff, rgba(255,255,255,0));border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(212,175,55,0.6);opacity:.9;animation:float 5s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.05)}
}

/* responsive */
@media (max-width: 640px){
  .timer div{min-width:64px}
  form.grid{grid-template-columns:1fr;}
}

/* Map box component */
.map-box{margin:1rem auto;max-width:820px}
.map-frame{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.map-frame iframe{display:block;width:100%;height:280px;border:0}
.map-actions{margin-top:.6rem}
.map-actions .btn{display:inline-block}

/* Venue images */
.venue-card{margin:1rem auto;max-width:820px}
.venue-img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow);aspect-ratio:16/9;object-fit:cover}

/* Gifts envelope */
.gifts .gift-art{margin-top:.8rem;display:flex;justify-content:center}
.gifts .envelope-gold{width:160px;max-width:60%;height:auto;opacity:.92;
  /* warm gold tint, slightly dimmer */
  filter: sepia(100%) saturate(500%) hue-rotate(12deg) brightness(0.9) contrast(1.02);
  image-rendering:auto;}