:root { --bg:#f3efe7; --paper:#faf7f1; --ink:#2b2723; --muted:#7b746a; --line:#ddd4c6; --gold:#b08b57; --green:#2f3b2f; --serif:"Cormorant Garamond",Georgia,serif; --script:"Great Vibes",cursive; --sans:"Montserrat",Arial,sans-serif }
* { box-sizing:border-box } html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--ink); font:300 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased }
body.cerrada { overflow:hidden }
a { color:inherit }
.eyebrow { font:400 11px/1 var(--sans); letter-spacing:.34em; text-transform:uppercase; color:var(--gold) }
h2 { font:400 clamp(34px,7vw,46px)/1.1 var(--serif); margin:12px 0 6px }
.sub { font:italic 400 19px/1.5 var(--serif); color:var(--muted); margin:0 }
section { max-width:720px; margin:0 auto; padding:72px 20px; text-align:center }
.orn { text-align:center; color:var(--gold); font-size:14px; letter-spacing:.5em; padding-left:.5em }
.btn { display:inline-block; padding:14px 30px; border:1px solid currentColor; font:400 11px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; text-decoration:none; transition:background .25s,color .25s; cursor:pointer; background:transparent; color:inherit }
.btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink) }
.btn.solid { background:var(--green); color:#f3efe7; border-color:var(--green) } .btn.solid:hover { background:var(--ink) }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .9s ease,transform .9s ease } .reveal.in { opacity:1; transform:none }

/* ---------- Sobre ---------- */
.gate { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:#ede7dc; transition:opacity .9s ease; }
.gate::before { content:""; position:absolute; inset:0; opacity:.5; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") }
.gate.off { opacity:0; pointer-events:none }
.gate-inner { position:relative; text-align:center; padding:24px }
.env { position:relative; width:min(84vw,400px); aspect-ratio:1/.7; margin:0 auto; perspective:1400px; cursor:pointer; -webkit-tap-highlight-color:transparent }
.env > div:not(.seal) { position:absolute; inset:0 }
.env-body { background:#f5f0e7; border-radius:4px; box-shadow:0 30px 60px -30px rgba(43,39,35,.45), 0 2px 0 rgba(255,255,255,.6) inset }
.env-card { inset:7% 6%; background:var(--paper); border:1px solid var(--line); z-index:1; display:grid; place-items:center; transition:transform 1s cubic-bezier(.2,.7,.2,1) .95s; }
.env-card .mono { font:400 34px/1 var(--script); color:var(--gold) }
.env-pocket { background:#efe8dd; clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%); z-index:2; border-radius:0 0 4px 4px }
.env-sides { background:#ebe3d7; clip-path:polygon(0 0,50% 58%,0 100%); z-index:2 } .env-sides.r { clip-path:polygon(100% 0,50% 58%,100% 100%) }
.env-flap { background:#e8e0d2; clip-path:polygon(0 0,100% 0,50% 58%); transform-origin:top; z-index:3; transition:transform 1.1s cubic-bezier(.6,0,.2,1) .25s, z-index 0s .6s; box-shadow:0 1px 0 rgba(255,255,255,.5) inset }
.seal { position:absolute; left:50%; top:58%; width:92px; height:92px; margin:-46px 0 0 -46px; border-radius:50%; z-index:5; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#f7efe3,#e6d9c6 60%,#d9c9b1); box-shadow:0 6px 14px -6px rgba(43,39,35,.5), inset 0 0 0 6px rgba(255,255,255,.35), inset 0 -4px 8px rgba(120,100,70,.18); transition:transform .5s ease,opacity .5s ease }
.seal span { font:400 38px/1 var(--script); color:#8c7b60; text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(90,75,50,.25) }
.seal::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(176,139,87,.35); animation:pulse 2.4s ease-out infinite }
@keyframes pulse { 0% { transform:scale(.9); opacity:.9 } 100% { transform:scale(1.35); opacity:0 } }
.gate-text { margin-top:34px; font:400 clamp(26px,6.5vw,34px)/1.25 var(--script); color:#8c8578 }
.gate-hint { margin-top:14px; font:400 10px/1 var(--sans); letter-spacing:.34em; text-transform:uppercase; color:#a39b8e; animation:blink 2.6s ease-in-out infinite }
@keyframes blink { 50% { opacity:.35 } }
.env.open .seal { transform:scale(.6); opacity:0 } .env.open .env-flap { transform:rotateX(-180deg); z-index:0 } .env.open .env-card { transform:translateY(-78%); z-index:4 }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; color:#f6f2ec; overflow:hidden; padding:80px 20px 90px }
.hero-bg { position:absolute; inset:-6%; background:center/cover no-repeat; animation:kb 34s ease-in-out infinite alternate }
@keyframes kb { from { transform:scale(1) translateY(0) } to { transform:scale(1.1) translateY(-2%) } }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,22,18,.42),rgba(25,22,18,.28) 45%,rgba(25,22,18,.66)) }
.lights { position:absolute; left:-4%; right:-4%; top:0; height:150px; pointer-events:none } .lights svg { width:100%; height:100% }
.lights .string { transform-origin:50% 0; animation:sway 7s ease-in-out infinite } .lights .string.b { animation-duration:9s; animation-delay:-3s }
@keyframes sway { 0%,100% { transform:rotate(-1.2deg) } 50% { transform:rotate(1.2deg) } }
.lights circle { fill:#ffe9b0; filter:drop-shadow(0 0 6px rgba(255,225,160,.9)); animation:tw 3s ease-in-out infinite }
.lights circle:nth-child(2n) { animation-delay:-1s } .lights circle:nth-child(3n) { animation-delay:-2s } .lights circle:nth-child(5n) { animation-duration:4.2s }
@keyframes tw { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.hero-inner { position:relative; z-index:1 }
.hero .eyebrow { color:rgba(246,242,236,.8) }
.script-names { font:400 clamp(64px,19vw,120px)/1 var(--script); margin:18px 0 0; text-shadow:0 2px 18px rgba(0,0,0,.25) }
.script-names .amp { display:block; font:italic 400 clamp(24px,6vw,36px)/1.3 var(--serif); color:#e3cfa9 }
.hero .orn { margin:22px 0; color:#e3cfa9 }
.hero .date { font:400 clamp(20px,5.4vw,26px)/1.3 var(--serif); letter-spacing:.06em }
.hero .btn { margin-top:34px; color:#f6f2ec }
.hero .btn:hover { background:#f6f2ec; color:var(--ink); border-color:#f6f2ec }
.music { position:absolute; right:18px; bottom:18px; z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(246,242,236,.5); background:rgba(25,22,18,.35); color:#f6f2ec; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(4px) } .music svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round } .music[hidden] { display:none }
.up { opacity:0; transform:translateY(16px) } body.abierta .up { animation:upin 1.1s ease forwards } body.abierta .up:nth-child(2) { animation-delay:.2s } body.abierta .up:nth-child(3) { animation-delay:.4s } body.abierta .up:nth-child(4) { animation-delay:.55s } body.abierta .up:nth-child(5) { animation-delay:.7s } body.abierta .up:nth-child(6) { animation-delay:.85s }
@keyframes upin { to { opacity:1; transform:none } }

/* ---------- Countdown ---------- */
.count { display:flex; justify-content:center; gap:clamp(14px,5vw,36px); margin-top:36px } .count div { min-width:64px } .count b { display:block; font:300 clamp(44px,12vw,72px)/1 var(--serif) } .count span { display:block; margin-top:8px; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted) }

/* ---------- Detalles ---------- */
.card { background:var(--paper); border:1px solid var(--line); padding:34px 26px; margin-top:28px; text-align:center }
.card h3 { font:400 30px/1.15 var(--serif); margin:8px 0 6px } .card p { margin:0; color:var(--muted) } .card .acts { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px }
.card .ico { width:56px; height:56px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; margin:0 auto 12px; color:var(--gold) } .card .ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round }
.dress { margin-top:28px } .dress .big { font:400 36px/1.1 var(--serif); margin:6px 0 10px } .paleta { display:flex; justify-content:center; gap:12px; margin:16px 0 18px } .paleta span { width:36px; height:36px; border-radius:50%; border:1px solid rgba(0,0,0,.08) }

/* ---------- Programa ---------- */
.prog { list-style:none; margin:36px auto 0; padding:0; max-width:460px; text-align:left; position:relative } .prog::before { content:""; position:absolute; left:74px; top:8px; bottom:8px; width:1px; background:var(--line) }
.prog li { display:grid; grid-template-columns:58px 1fr; gap:30px; padding:16px 0; position:relative } .prog li::after { content:""; position:absolute; left:70px; top:28px; width:9px; height:9px; border-radius:50%; background:var(--gold) }
.prog b { font:300 24px/1 var(--serif); color:var(--gold); text-align:right } .prog strong { display:block; font:400 21px/1.2 var(--serif) } .prog small { display:block; color:var(--muted); font-size:14px; margin-top:4px }

/* ---------- Pills ---------- */
.pills { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px }
.pill { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border:1px solid var(--ink); border-radius:999px; text-decoration:none; font:400 17px/1 var(--serif); background:var(--paper); transition:background .25s,color .25s } .pill:hover { background:var(--ink); color:var(--bg) }
.pill small { font:400 9px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold) } .pill:hover small { color:#e3cfa9 }
.pill svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4 }
.pill-note { margin-top:18px; color:var(--muted); font:italic 400 17px/1.5 var(--serif) }

/* ---------- FAQ ---------- */
.faq { text-align:left; margin-top:24px } .faq details { border-bottom:1px solid var(--line); padding:16px 0 } .faq summary { cursor:pointer; list-style:none; font:400 21px/1.3 var(--serif); display:flex; justify-content:space-between; gap:16px } .faq summary::-webkit-details-marker { display:none } .faq summary::after { content:"+"; color:var(--gold); font:300 26px/1 var(--serif) } .faq details[open] summary::after { content:"–" } .faq p { color:var(--muted); margin:10px 0 0 }

/* ---------- Regalos ---------- */
.gift { background:var(--green); color:#f3efe7 } .gift .eyebrow { color:#e3cfa9 } .gift .sub { color:rgba(243,239,231,.8) } .gift .btn { color:#f3efe7; margin-top:26px } .gift .btn:hover { background:#f3efe7; color:var(--green); border-color:#f3efe7 }

/* ---------- RSVP ---------- */
form { text-align:left; margin-top:30px; display:grid; gap:24px }
label.l { display:block; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
input[type=text],input[type=email],input[type=number],textarea { width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:10px 0; font:400 20px/1.4 var(--serif); color:var(--ink); border-radius:0; outline:none } input:focus,textarea:focus { border-bottom-color:var(--ink) } textarea { resize:vertical; min-height:56px }
.choice { display:flex; flex-wrap:wrap; gap:14px 26px } .choice label { display:flex; align-items:center; gap:10px; cursor:pointer; font:400 18px/1.2 var(--serif) } .choice input { width:15px; height:15px; accent-color:var(--green); margin:0 }
.chips { display:flex; flex-wrap:wrap; gap:10px } .chips label { cursor:pointer } .chips input { position:absolute; opacity:0 } .chips span { display:inline-block; padding:9px 16px; border:1px solid var(--line); border-radius:999px; font:400 16px/1 var(--serif); background:var(--paper) } .chips input:checked + span { background:var(--green); color:#f3efe7; border-color:var(--green) }
form .btn { justify-self:center; margin-top:6px }
footer { text-align:center; padding:56px 20px 64px } footer .script-names { font-size:52px; color:var(--ink); text-shadow:none; margin:0 } footer .script-names .amp { color:var(--gold) } footer p { color:var(--muted); font:italic 400 18px/1.5 var(--serif); margin:10px 0 0 } footer .eyebrow { display:block; margin-top:18px } footer a { text-decoration:none }
@media (prefers-reduced-motion:reduce) { .hero-bg,.lights .string,.lights circle,.seal::after,.gate-hint { animation:none } .reveal,.up { opacity:1; transform:none; animation:none } }
/* v4.1: títulos en caligrafía, íconos de sección, programa con badges, FAQ en tarjetas */
h2 { font:400 clamp(40px,10vw,54px)/1.15 var(--script); margin:10px 0 4px; letter-spacing:0 }
.gift h2 { font:400 clamp(30px,6vw,38px)/1.25 var(--serif); margin:12px auto 0; max-width:520px }
.sico { width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; margin:0 auto 16px; color:var(--muted) } .sico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round }
.gift .sico { background:transparent; border-color:rgba(243,239,231,.35); color:#e3cfa9 }
.prog { max-width:480px } .prog::before { left:29px }
.prog li { grid-template-columns:58px 1fr; gap:22px; padding:18px 0; align-items:start } .prog li::after { display:none }
.prog .pico { width:58px; height:58px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; color:var(--muted); position:relative; z-index:1 } .prog .pico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round }
.prog .badge { display:inline-block; background:var(--ink); color:var(--bg); font:500 11px/1 var(--sans); letter-spacing:.08em; padding:6px 9px; border-radius:4px; vertical-align:middle; margin-right:10px }
.prog strong { display:inline; font:400 22px/1.2 var(--serif); vertical-align:middle } .prog small { display:block; color:var(--muted); font-size:14px; margin-top:6px }
.faq details { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0 18px; margin-bottom:12px } .faq summary { padding:16px 0; font-size:20px } .faq summary::after { content:""; width:9px; height:9px; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:rotate(45deg); margin:6px 6px 0 0; transition:transform .25s } .faq details[open] summary::after { transform:rotate(-135deg); margin-top:12px } .faq p { padding-bottom:16px }

/* ================= Tipografía unificada (2026-11-01) =================
   Regla: todo lo que se lee va en Cormorant Garamond. Montserrat sólo en
   etiquetas pequeñas en versalitas, botones, insignias y campos de formulario.
   Sin caligrafía. Un solo tamaño de título por nivel en todas las secciones. */
:root { --script:var(--serif) }
body { font:400 18px/1.65 var(--serif) }
h2, .gift h2 { font:400 clamp(34px,8vw,44px)/1.15 var(--serif); margin:10px 0 6px; letter-spacing:.01em; max-width:none }
h3, .card h3 { font:400 28px/1.2 var(--serif) }
.sub, .lede, .pill-note, .gate-text { font:italic 400 20px/1.5 var(--serif) }
.card p, .prog small, .faq p, footer p { font:400 17px/1.6 var(--serif); color:var(--muted) }
.eyebrow, .count span, label.l, .gate-hint, .pill small { font-family:var(--sans) }
/* Sobre */
.gate-text { color:#8c8578; margin-top:30px }
.seal span { font:400 26px/1 var(--serif); letter-spacing:.08em; text-transform:uppercase }
.env-card .mono { font:300 26px/1 var(--serif); letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
/* Hero */
.script-names { font:300 clamp(54px,13vw,104px)/1 var(--serif); letter-spacing:.14em; text-transform:uppercase; text-indent:.14em; margin:18px 0 0 }
.script-names .amp { font:italic 400 clamp(22px,5vw,30px)/1.6 var(--serif); letter-spacing:0; text-transform:none; text-indent:0 }
.hero .date { font:400 clamp(19px,5vw,24px)/1.3 var(--serif); letter-spacing:.08em }
/* Cuenta, programa, pills, faq, form */
.count b { font:300 clamp(44px,12vw,72px)/1 var(--serif) }
.prog strong { font:400 22px/1.2 var(--serif) } .prog .badge { font:500 11px/1 var(--sans) }
.pill { font:400 18px/1 var(--serif) }
.faq summary { font:400 20px/1.3 var(--serif) }
input[type=text],input[type=email],input[type=number],textarea { font:400 20px/1.4 var(--serif) }
.choice label { font:400 18px/1.2 var(--serif) } .chips span { font:400 16px/1 var(--serif) }
.dress .big { font:400 32px/1.1 var(--serif) }
footer .script-names { font-size:36px; letter-spacing:.2em }
/* Hero con foto real: caras arriba, texto abajo */
.hero { align-items:end; padding:80px 20px 96px }
.hero::before { background:linear-gradient(180deg,rgba(25,22,18,.18) 0%,rgba(25,22,18,.12) 35%,rgba(25,22,18,.72) 72%,rgba(25,22,18,.86) 100%) }
.hero-inner { padding-bottom:4vh }
@media (min-width:860px) { .hero { align-items:center } .hero::before { background:linear-gradient(180deg,rgba(25,22,18,.35),rgba(25,22,18,.3) 45%,rgba(25,22,18,.7)) } .hero-inner { padding-bottom:0 } }
/* Composición del hero con la foto real */
@media (max-width:859px) {
  .hero { background:#241f1b; align-items:end; padding:0 20px 56px }
  .hero-bg { inset:0; background-size:100% auto; background-position:center top; background-color:#241f1b; animation:none }
  .hero::before { background:linear-gradient(180deg,rgba(36,31,27,0) 0%,rgba(36,31,27,0) 30%,rgba(36,31,27,.55) 40%,#241f1b 47%,#241f1b 100%) }
  .hero-inner { padding-bottom:0 }
  .script-names { font-size:clamp(48px,12vw,72px) }
}
@media (min-width:860px) {
  .hero { align-items:center; justify-items:start; text-align:left; padding:80px 8vw }
  .hero-inner { max-width:560px }
  .hero-bg { background-position:center 22% }
  .hero::before { background:linear-gradient(90deg,rgba(25,22,18,.78) 0%,rgba(25,22,18,.45) 42%,rgba(25,22,18,.08) 70%), linear-gradient(180deg,rgba(25,22,18,.2),rgba(25,22,18,.35)) }
  .script-names { text-indent:0 }
}
@media (min-width:860px) { .script-names { font-size:clamp(56px,6vw,74px) } .hero-inner { max-width:480px } }