/* ====== Palette ====== */
:root{
  --bg: #ffffff;
  --text: #212025;
  --muted: #6f6b75;
  --primary: #8D4E73;      /* rosa */
  --lilla: #C89DCB;
  --perla: #ECC2D8;
  --fuxia: #A43282;        /* usare con parsimonia */
  --salvia: #A8B59E;
  --ring: rgba(141,78,115,.35);
  --radius: 16px;
  --shadow: 0 14px 34px rgba(0,0,0,.08);
  --container: clamp(320px, 92vw, 1120px);
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --grad-hero: linear-gradient(135deg, rgba(200,157,203,.35), rgba(141,78,115,.35) 50%, rgba(168,181,158,.35));
}

/* ====== Base ====== */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0; color:var(--text); background:
  radial-gradient(1200px 400px at 20% -10%, rgba(200,157,203,.18), transparent 60%),
  radial-gradient(1200px 400px at 80% 110%, rgba(168,181,158,.14), transparent 60%),
  #fff;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
.container{width:var(--container); margin-inline:auto; padding-inline:18px}
.section{padding:76px 0}
h1,h2{font-family:var(--font-serif); margin:0 0 14px}
h1{font-size:clamp(42px, 6vw, 72px); line-height:1.04}
h2{font-size:clamp(28px, 4vw, 40px)}
h3{margin:0 0 8px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.center{text-align:center}
.rounded{border-radius:16px}

/* ====== Ribbons ====== */
.top-ribbon,.bottom-ribbon{position:fixed; left:0; right:0; height:12px; display:flex; gap:4px; z-index:60; pointer-events:none}
.top-ribbon{top:0}
.bottom-ribbon{bottom:0}
.ribbon{flex:1; height:100%}
.r1{background:var(--perla)}
.r2{background:var(--lilla)}
.r3{background:var(--salvia)}
.r4{background:linear-gradient(90deg, var(--primary), var(--fuxia))}

/* ====== Header ====== */
.site-header{position:sticky; top:12px; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(12px); z-index:50; border-bottom:1px solid var(--perla)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:600}
.nav-toggle{display:none; background:none; border:0; font-size:20px; padding:8px}
.nav-list{list-style:none; display:flex; gap:18px; margin:0; padding:0}
.nav-list a{color:inherit; text-decoration:none; padding:10px 10px; border-radius:10px}
.nav-list a:hover, .nav-list a:focus-visible{background:rgba(200,157,203,.25); outline:2px solid transparent}
@media (max-width: 780px){
  .nav-toggle{display:block}
  /*.nav-list{position:fixed; inset:76px 0 auto 0; background:#fff; padding:16px; flex-direction:column; transform:translateY(-120%); transition:.28s; box-shadow:var(--shadow)}
  .nav-list.is-open{transform:translateY(0)}*/
    .nav-list{
    display:none;
    position:fixed;
    inset:76px 0 auto 0;
    background:#fff;
    padding:16px;
    flex-direction:column;
    box-shadow:var(--shadow);
  }
   .nav-list.is-open{
    display:flex;
  }
}

/* ====== Cards / surfaces ====== */
.card{background:#fff; border:1px solid var(--perla); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card.glass{background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.6)}
.card.tone{background:linear-gradient(180deg, rgba(200,157,203,.12), rgba(236,194,216,.12)); border-color:rgba(200,157,203,.4)}
.card.accent{border-color:var(--primary); box-shadow:0 10px 26px rgba(141,78,115,.25)}
.card.lift{transition:transform .2s ease, box-shadow .2s ease}
.card.lift:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.12)}

/* ====== Hero ====== */
.hero{padding:86px 0; background:var(--grad-hero)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; color:var(--primary); font-weight:700}
.subtitle{color:#4a4650}
.address{color:#665}
.hero-photo{border-radius:20px; overflow:hidden; border:8px solid #fff; box-shadow:var(--shadow)}
.hero-art .flower-corner{position:absolute; width:220px; opacity:.5}
.hero-art .tl{top:-20px; left:-20px; transform:rotate(0deg)}
.hero-art .br{bottom:-20px; right:-20px; transform:rotate(180deg)}
.hero-art{position:relative; pointer-events:none}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
}

/* ====== Buttons ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:14px; background:var(--primary); color:#fff; text-decoration:none; border:2px solid transparent; box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.05)}
.btn.outline{background:transparent; color:var(--primary); border-color:var(--primary)}
.btn.small{padding:10px 14px; font-size:.95rem}
.btn.big{padding:14px 22px; font-size:1.05rem}

/* ====== Grids ====== */
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid.three{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width: 900px){ .grid.two{grid-template-columns:1fr} .grid.three{grid-template-columns:1fr 1fr} }
@media (max-width: 600px){ .grid.three{grid-template-columns:1fr} }

/* ====== Lists / swatches ====== */
ul.nice{padding-left:18px}
.swatches{display:flex; gap:8px; margin-top:10px}
.swatch{width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.swatch.perla{background:var(--perla)}
.swatch.rosa{background:var(--primary)}
.swatch.lilla{background:var(--lilla)}
.swatch.fuxia{background:var(--fuxia)}
.swatch.salvia{background:var(--salvia)}

/* ====== Map ====== */
.map-embed{margin-top:18px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--perla)}
.map-embed iframe{width:100%; height:340px; border:0}

/* ====== RSVP form ====== */
.rsvp-form{display:grid; gap:12px; max-width:760px; margin-inline:auto}
.field{display:grid; gap:6px}
fieldset.field{border:1px solid var(--perla); padding:12px; border-radius:12px}
input, textarea, select{border:1px solid #ddd; padding:12px 14px; border-radius:12px; outline:2px solid transparent}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline-color:var(--ring)}
.form-msg{min-height:1.4em}

/* ====== Gallery ====== */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery img{border-radius:14px; aspect-ratio:1/1; object-fit:cover; box-shadow:var(--shadow); border:6px solid #fff}
.framed{border:8px solid #fff; box-shadow:var(--shadow)}
@media (max-width: 900px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 600px){ .gallery{grid-template-columns:repeat(2,1fr)} }

/* ====== Dividers ====== */
.divider{display:flex; justify-content:center; padding:24px 0}
.divider.soft{opacity:.7}

/* ====== Footer ====== */
.site-footer{padding:36px 0 68px; background:linear-gradient(180deg, rgba(236,194,216,.15), transparent); margin-top:40px; border-top:1px solid var(--perla)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:16px}
.back-to-top{text-decoration:none; color:var(--primary)}

/* ====== A11y ====== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}