/* Lacrea · base común de las invitaciones. Cada modelo define sus variables y su mundo. */
:root{
  --i-bg:#fff; --i-ink:#222; --i-acc:#555; --i-soft:#f2f2f2; --i-line:#ddd;
  --i-display:Georgia,serif; --i-body:system-ui,sans-serif; --i-radius:0;
  --stage-bg:var(--i-bg); --stage-ink:var(--i-ink);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--i-bg);color:var(--i-ink);font-family:var(--i-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:400}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--i-acc);color:var(--i-bg)}
:focus-visible{outline:2px solid var(--i-acc);outline-offset:3px}
html.is-sealed body{overflow:hidden}
html.is-embed{scrollbar-width:none}
html.is-embed::-webkit-scrollbar{display:none}

/* Barra de demostración (no aparece en la invitación real) */
.demo-bar{position:fixed;z-index:60;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none;font:500 13px/1 'Archivo',system-ui,sans-serif;letter-spacing:.02em}
.demo-bar > a,.demo-bar > span{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;background:rgba(21,20,26,.82);color:#ECEEE8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.demo-bar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.demo-bar__tag{margin-right:auto;font-size:12px!important;opacity:.9}
.demo-bar__cta{background:#7A2433!important}
.demo-bar a:hover{background:#15141A}
.demo-bar .demo-bar__short{display:none}
@media (max-width:520px){.demo-bar .demo-bar__long{display:none}.demo-bar .demo-bar__short{display:inline}}

/* Escenario del sobre */
.stage{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--stage-bg);color:var(--stage-ink);padding:24px;transition:opacity .7s ease,visibility .7s}
.stage.is-gone{opacity:0;visibility:hidden}
.stage__in{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.stage__env{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
.stage__hint{font-family:var(--i-display);font-size:clamp(22px,5vw,30px);line-height:1.15}
.stage__tap{font-size:14px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;animation:tap 2.4s ease-in-out infinite}
@keyframes tap{50%{opacity:.35}}
.stage__music{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;opacity:.85}
.stage__music input{width:18px;height:18px;accent-color:var(--i-acc)}
.env__letter{--letter-bg:var(--i-bg);--letter-ink:var(--i-ink)}
.letter-default{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:14%;gap:4px;font-family:var(--i-display);font-size:clamp(18px,5cqw,28px)}
.letter-default small{font-family:var(--i-body);font-size:.5em;letter-spacing:.2em}

/* Botón de música */
.music-btn{position:fixed;z-index:55;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--i-line);background:var(--i-bg);color:var(--i-ink);cursor:pointer;font-size:13px;box-shadow:0 8px 24px -10px rgba(0,0,0,.35);transition:transform .3s var(--ease-out),background .3s}
html.is-sealed .music-btn{opacity:0;pointer-events:none}
.music-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.music-btn span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease-out)}
.music-btn.is-on{background:var(--i-ink);color:var(--i-bg)}
.music-btn.is-on span{max-width:180px}
.music-btn.is-on .mb-note{animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.5px)}}
.music-btn:hover{transform:translateY(-2px)}

/* Aparición al hacer scroll (visible por defecto sin JS) */
html.js [data-reveal]{transform:translateY(16px);transition:transform .9s var(--ease-out)}
html.js [data-reveal].in{transform:none}

/* Cuenta atrás */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-variant-numeric:tabular-nums lining-nums}
.cd__u{display:flex;flex-direction:column;align-items:center;gap:2px}
.cd__u b{font-weight:400;font-family:var(--i-display);font-size:clamp(30px,8vw,44px);line-height:1}
.cd__u span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* Enlaces y botones */
.maplink,.calbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--i-acc);background:none;border:0;border-bottom:1px solid currentColor;padding:0;cursor:pointer;border-radius:0}
.maplink::after{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' stroke='black' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3 2h5v5' stroke='black' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Galería y lightbox */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gal__item{padding:0;border:0;background:var(--i-soft);cursor:zoom-in;overflow:hidden;aspect-ratio:4/5;border-radius:var(--i-radius)}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.gal__item:hover img{transform:scale(1.04)}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:rgba(10,10,12,.92)}
.lightbox img{width:100%;height:calc(100% - 72px);object-fit:contain;padding:16px}
.lightbox__bar{display:flex;justify-content:center;align-items:center;gap:12px;height:72px;font:14px system-ui,sans-serif}
.lightbox__bar button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;cursor:pointer;display:grid;place-items:center;color:#fff}
.lightbox__bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.lightbox__n{min-width:56px;text-align:center;font-variant-numeric:tabular-nums}

/* Alojamiento */
.stay{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stay li{display:flex;flex-direction:column;gap:2px}
.stay strong{font-weight:600}

/* Confirmación */
.rsvp{display:flex;flex-direction:column;gap:32px;text-align:left}
.rsvp__when-yes{display:flex;flex-direction:column;gap:32px}
.rsvp__when-yes[hidden]{display:none}
.rsvp__f{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
/* Al pulsar un campo no aparece recuadro: el subrayado engorda y toma el color de acento */
.rsvp input:not([type=radio]):not([type=checkbox]):focus,.rsvp select:focus,.rsvp textarea:focus{outline:none;border-bottom-color:var(--i-acc);box-shadow:0 1px 0 var(--i-acc)}

/* Adultos y niños */
.rsvp__count{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stepper__lbl{display:flex;flex-direction:column;gap:4px;line-height:1.3}
.stepper__lbl small{font-family:var(--i-body);font-size:14px;letter-spacing:0;text-transform:none;font-weight:400;opacity:.7}
.stepper__ctl{display:flex;align-items:center;gap:6px;margin-top:4px}
.stepper__ctl button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--i-ink);background:transparent;color:var(--i-ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,opacity .2s}
.stepper__ctl button:hover:not(:disabled){background:var(--i-ink);color:var(--i-bg)}
.stepper__ctl button:disabled{opacity:.3;cursor:default}
.stepper__ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.rsvp .stepper__ctl input[type=number]{width:64px!important;flex:none;text-align:center;font-family:var(--i-display);font-size:28px;border-bottom:0!important;padding:4px 0;-moz-appearance:textfield}
.rsvp .stepper__ctl input:focus{box-shadow:none}
.stepper__ctl input::-webkit-outer-spin-button,.stepper__ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:420px){.rsvp__count{grid-template-columns:1fr}}
.rsvp label,.rsvp legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:0}
.rsvp input:not([type=radio]):not([type=checkbox]),.rsvp select,.rsvp textarea{width:100%;font-size:17px;background:transparent;border:0;border-bottom:1px solid var(--i-ink);border-radius:0;padding:10px 0;color:var(--i-ink);-webkit-appearance:none;appearance:none}
.rsvp select{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center/12px no-repeat}
.rsvp select option{color:#111;background:#fff}
.rsvp textarea{resize:vertical}
.rsvp ::placeholder{color:var(--i-ink);opacity:.45}
.rsvp__opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rsvp__opts label{text-transform:none;letter-spacing:0;font-weight:500;font-size:15px;cursor:pointer}
.rsvp__opts input{position:absolute;opacity:0;pointer-events:none}
.rsvp__opts span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--i-line);border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.rsvp__opts input:checked+span{background:var(--i-ink);color:var(--i-bg);border-color:var(--i-ink)}
.rsvp__opts input:focus-visible+span{outline:2px solid var(--i-acc);outline-offset:2px}
.rsvp__err{color:var(--i-acc);font-weight:600;font-size:15px}
.rsvp__send{min-height:52px;border:0;cursor:pointer;background:var(--i-ink);color:var(--i-bg);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--i-radius);transition:transform .2s var(--ease-out),opacity .2s}
.rsvp__send:hover{transform:translateY(-2px)}
.rsvp__send:active{transform:translateY(0);opacity:.85}
.rsvp__note{font-size:14px;opacity:.7}
.rsvp-done{padding:28px;border:1px solid var(--i-line);border-radius:var(--i-radius);display:flex;flex-direction:column;gap:10px;text-align:left}
.rsvp-done:focus{outline:none}
.rsvp-done h3{font-family:var(--i-display);font-size:30px;line-height:1.1}
.rsvp-done__demo{font-size:13px;opacity:.65}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  .stage__tap,.music-btn.is-on .mb-note{animation:none}
}