/* Invitación Mariel — estilos editables */
:root {
  --cream: #fffaf4;
  --cream-deep: #fff5e8;
  --blush: #fff0f2;
  --pink: #d98ba0;
  --pink-dark: #a85f76;
  --rose-ink: #87505f;
  --gold: #e6c77f;
  --text: #70535a;
  --line: rgba(190, 128, 145, .28);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --script: "Parisienne", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  background: #fffaf8;
}
.invitation {
  width: min(100%, 620px);
  margin: 0 auto;
  overflow: hidden;
  background: #fffaf8 url("assets/fondo-nubes-largo.png") center top / 100% auto repeat-y;
  box-shadow: 0 0 50px rgba(153, 103, 119, .08);
}
.section {
  position: relative;
  padding: clamp(58px, 10vw, 92px) clamp(24px, 7vw, 58px);
  text-align: center;
}
.section-cream, .section-blush { background: rgba(255,250,248,.20); }
.hero { min-height: 690px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:50px; }
.hero-art { width:min(100%, 360px); margin: 0 auto 22px; }
.bear-sheet { display:block; width:100%; height:auto; border-radius: 18px; mix-blend-mode:multiply; }
.eyebrow {
  margin: 0 0 18px;
  color: #a77c77;
  font-size: 10px;
  letter-spacing: .28em;
  line-height: 1.8;
  text-transform: uppercase;
  font-weight: 500;
}
.small-title { margin: 0; font-family:var(--serif); font-size: clamp(24px, 5vw, 34px); letter-spacing:.18em; color:var(--pink-dark); }
h1 { margin: 0 0 12px; color:var(--pink-dark); font-family:var(--serif); font-size:clamp(72px, 17vw, 112px); font-weight:400; letter-spacing:.13em; line-height:1; }
.ornament, .fine-divider { display:flex; align-items:center; justify-content:center; gap:16px; margin:18px auto; color:var(--pink); }
.ornament span { width:68px; height:1px; background:var(--gold); }
.ornament b { font-size:24px; font-weight:400; }
.intro-copy { max-width:420px; margin:0 auto; font-family:var(--serif); font-style:italic; font-size:clamp(19px, 4vw, 24px); line-height:1.35; color:#77515b; }
.scroll-cue { display:flex; flex-direction:column; gap:7px; margin-top:42px; color:#a77c77; font-size:10px; letter-spacing:.18em; text-decoration:none; text-transform:uppercase; }
.scroll-cue span { font-size:24px; }
.parents { padding-top:86px; padding-bottom:86px; background:rgba(255,250,244,.48); }
.parents-title { margin:0 auto 34px; color:var(--pink-dark); font-family:var(--serif); font-size:clamp(32px,7vw,48px); font-weight:400; line-height:1.15; }
.parents-names { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px,4vw,34px); max-width:520px; margin:0 auto; }
.parent-person { display:flex; flex-direction:column; align-items:center; gap:24px; }
.parent-role { color:#b1848d; font-size:9px; letter-spacing:.2em; }
.parent-name { color:var(--pink-dark); font-family:var(--serif); font-size:clamp(25px,5.8vw,39px); white-space:nowrap; }
.parent-ampersand { color:var(--gold); font-family:var(--script); font-size:42px; }
.parents-divider { display:flex; align-items:center; justify-content:center; gap:54px; margin:64px auto 0; color:var(--pink-dark); }
.parents-divider span { width:110px; height:1px; background:var(--line); }
.parents-divider b { font-size:15px; font-weight:400; }
.parents .supporting-copy { margin-top:34px; max-width:430px; }
.script-heading { margin:0 0 12px; color:var(--pink-dark); font-family:var(--script); font-weight:400; font-size:clamp(38px, 9vw, 54px); line-height:1.1; }
.parent-names { margin:12px 0 28px; color:#86515f; font-family:var(--serif); font-size:clamp(28px, 6vw, 38px); }
.parent-names span { color:var(--gold); padding:0 8px; }
.supporting-copy { max-width:440px; margin:18px auto 0; font-size:14px; line-height:1.9; color:#806c6c; }
.fine-divider { margin:32px auto; font-size:22px; }
.quote { max-width:400px; margin:0 auto; font-family:var(--serif); font-size:22px; font-style:italic; line-height:1.4; color:#986b78; }
.countdown-section { padding-top:82px; padding-bottom:88px; }
.section-title { margin:0 0 28px; color:var(--pink-dark); font-family:var(--serif); font-size:clamp(36px, 8vw, 50px); font-weight:400; }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; max-width:470px; margin:0 auto; }
.time-card { padding:18px 5px 15px; border:1px solid rgba(217,139,160,.48); border-radius:22px; background:rgba(255,238,243,.8); box-shadow:inset 0 0 0 4px rgba(255,255,255,.45); }
.time-card strong { display:block; color:var(--pink-dark); font-family:var(--serif); font-size:clamp(30px, 7vw, 46px); font-weight:500; line-height:1.1; }
.time-card span { display:block; margin-top:6px; color:#8a6c72; font-size:9px; letter-spacing:.13em; }
.event-section { padding:78px 30px 82px; background:rgba(255,249,239,.60); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.event-section .script-heading { margin-bottom:32px; }
.event-grid { display:grid; grid-template-columns:1fr 1fr 1.35fr; align-items:stretch; max-width:510px; margin:0 auto 30px; }
.event-detail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 10px; border-right:1px solid var(--line); font-size:12px; line-height:1.5; }
.event-detail:last-child { border:0; }
.detail-icon { color:var(--pink); font-size:30px; line-height:1; }
.detail-label { color:#a77c77; font-size:9px; letter-spacing:.16em; }
.event-day, .event-time { color:var(--pink-dark); font-family:var(--serif); font-size:44px; font-weight:500; line-height:1; }
.event-place strong { font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.1; }
.event-place span:last-child { font-size:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 28px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.04em; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 7px 18px rgba(155,98,115,.12); }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(155,98,115,.18); }
.button-gold { color:#795d36; border:1px solid #e6c77f; background:linear-gradient(135deg,#fff3cf,#f6df9e); }
.rsvp { padding-top:82px; padding-bottom:80px; }
.rsvp .script-heading { font-size:clamp(44px, 10vw, 60px); }
.button-pink { margin-top:28px; color:white; border:1px solid #dc8ba1; background:linear-gradient(135deg,#eea8b8,#d87d98); }
.closing-note { margin:34px 0 0; color:#a77c77; font-family:var(--script); font-size:29px; }
.footer { padding:35px 20px 45px; text-align:center; color:#a77c77; background:rgba(255,247,244,.58); }
.footer-heart { color:var(--pink); font-size:28px; }
.footer p { margin:8px 0; font-family:var(--script); font-size:27px; }
.footer small { font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.music-control { position:fixed; right:16px; bottom:16px; z-index:20; }
.music-control button { display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid rgba(185,127,143,.35); border-radius:999px; color:#895a68; background:rgba(255,250,248,.94); box-shadow:0 4px 18px rgba(90,50,60,.12); cursor:pointer; font:500 12px var(--sans); }
.music-control button[aria-pressed="true"] { color:white; background:#d98ba0; }
@media (max-width:420px) {
  .hero { min-height:610px; }
  .section { padding-left:20px; padding-right:20px; }
  /* En móvil, el osito principal queda a una escala similar a los demás. */
  .hero-art { width:min(62vw, 230px); margin-bottom:20px; }
  /* Fecha, hora y lugar permanecen en una sola fila. */
  .event-section { padding-left:12px; padding-right:12px; }
  .event-grid { grid-template-columns:.85fr .85fr 1.3fr; gap:0; }
  .event-detail { min-width:0; padding:10px 4px; gap:5px; font-size:10px; }
  .detail-icon { font-size:23px; }
  .detail-label { font-size:7px; letter-spacing:.08em; line-height:1.35; }
  .event-day, .event-time { font-size:32px; }
  .event-place { grid-column:auto; border-top:0; border-right:0; padding-top:10px; margin-top:0; }
  .event-place strong { font-size:13px; }
  .event-place span:last-child { font-size:9px; line-height:1.35; }
  .countdown { gap:6px; }
  .time-card { border-radius:16px; padding:14px 2px 12px; }
  .time-card span { font-size:8px; letter-spacing:.06em; }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-art { animation:float 5s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
}


/* PORTADA DE SOBRE — pantalla inicial y animación */
body.cover-locked { overflow:hidden; }
.envelope-cover {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  min-height:100svh; padding:28px 20px;
  overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.95), transparent 35%),
    radial-gradient(ellipse at 84% 76%, rgba(255,235,210,.55), transparent 36%),
    linear-gradient(145deg,#fff8f5 0%,#fff0f3 52%,#fff9ef 100%);
  transition: opacity .9s ease, visibility .9s ease;
}
.envelope-cover::before {
  content:""; position:absolute; inset:15px;
  border:1px solid rgba(196,145,151,.35); border-radius:34px;
  pointer-events:none;
}
.envelope-cover.is-opening { pointer-events:none; }
.envelope-cover.is-hidden { opacity:0; visibility:hidden; }
.cover-cloud {
  position:absolute; width:260px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.48); filter:blur(22px);
}
.cloud-one { top:8%; left:-90px; }
.cloud-two { right:-100px; bottom:10%; }
.cover-content { position:relative; z-index:1; width:min(100%,470px); }
.cover-kicker { margin:8px 0 0; color:#a77c77; font-size:10px; letter-spacing:.25em; text-transform:uppercase; }
.cover-name {
  margin:5px 0 4px; color:var(--pink-dark); font:400 clamp(58px,15vw,88px)/1 var(--serif);
  letter-spacing:.14em; text-transform:uppercase;
}
.cover-subtitle { margin:0 0 34px; color:#a87884; font:italic 22px var(--script); }
.envelope-button {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  width:100%; border:0; padding:0; background:transparent; cursor:pointer;
}
.envelope {
  position:relative; display:block; width:min(78vw,330px); height:215px;
  perspective:900px; filter:drop-shadow(0 18px 22px rgba(143,91,107,.16));
}
.envelope-back {
  position:absolute; inset:0; z-index:1; overflow:hidden;
  border-radius:10px;
  background:linear-gradient(145deg,#f9dce4 0%,#f3c3d1 52%,#edb5c6 100%);
  border:1px solid rgba(219,151,171,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.envelope-letter {
  position:absolute; left:8%; right:8%; top:5%; height:90%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:25px; border:1px solid rgba(220,174,153,.5); border-radius:5px;
  color:#a76679; background:linear-gradient(#fffefa,#fff5e9);
  box-shadow:0 0 18px rgba(255,255,255,.45);
  transition:transform .9s .18s cubic-bezier(.2,.75,.25,1);
  z-index:2;
}
.envelope-letter span { font:38px var(--serif); color:#d98ba0; }
.envelope-letter small { font:italic 18px var(--script); }
.envelope-flap {
  position:absolute; top:0; left:0; width:100%; height:70%;
  transform-origin:50% 0%; transform:rotateX(0deg);
  clip-path:polygon(0 0,100% 0,50% 72%);
  background:linear-gradient(155deg,#f9dce4 0%,#f4c4d2 55%,#eeb7c8 100%);
  border-top:1px solid rgba(255,255,255,.85);
  z-index:4; transition:transform .85s cubic-bezier(.35,.05,.2,1);
  backface-visibility:visible;
  filter:drop-shadow(0 2px 2px rgba(171,103,126,.12));
}
.envelope-front {
  position:absolute; inset:0; z-index:3; border-radius:10px;
  background:
    linear-gradient(145deg,transparent 49.4%,rgba(255,255,255,.48) 49.8%,transparent 50.4%),
    linear-gradient(35deg,transparent 49.4%,rgba(255,255,255,.35) 49.8%,transparent 50.5%),
    linear-gradient(145deg,#f4c3d1 0%,#f0b9ca 100%);
  clip-path:polygon(0 43%,50% 100%,100% 43%,100% 100%,0 100%);
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.35);
}
.envelope-bow {
  position:absolute; z-index:6; left:50%; top:68%;
  width:44px; height:20px; transform:translate(-50%,-50%);
  pointer-events:none;
}
.envelope-bow::before, .envelope-bow::after {
  content:""; position:absolute; top:1px; width:19px; height:13px;
  border:2px solid #f8e0e5; border-radius:80% 20% 70% 25%;
  background:linear-gradient(145deg,#fff0f3,#e98fa8);
  box-shadow:0 1px 2px rgba(150,90,110,.18);
}
.envelope-bow::before { left:1px; transform:rotate(18deg); }
.envelope-bow::after { right:1px; transform:scaleX(-1) rotate(18deg); }
.envelope-seal {
  position:absolute; z-index:7; left:50%; top:59%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  color:#fffaf4; background:linear-gradient(145deg,#e7c77e,#d9ad60);
  border:3px solid rgba(255,255,255,.65); font:25px var(--serif);
  box-shadow:0 3px 8px rgba(130,90,50,.15); transition:opacity .25s ease;
}
.open-prompt { color:#a77c77; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.cover-date { margin:32px 0 0; color:#a77c77; font-size:10px; letter-spacing:.22em; }
.cover-bottom-flower { position:absolute; bottom:5%; color:#e2bd72; font-size:32px; }
.envelope-cover.is-opening .envelope-flap { transform:rotateX(180deg); z-index:1; }
.envelope-cover.is-opening .envelope-letter { transform:translateY(-118px); }
.envelope-cover.is-opening .envelope-seal { opacity:0; }
@media (max-width:420px) {
  .envelope { height:190px; }
}

@media (max-width:420px) {
  .parents-names { gap:8px; }
  .parent-name { font-size:clamp(21px,5.5vw,29px); white-space:normal; }
  .parents-divider { margin-top:48px; gap:28px; }
  .parents-divider span { width:72px; }
}


/* Ositos decorativos independientes y reemplazables */
.section-bear { display:block; width:min(58vw,230px); height:auto; object-fit:contain; margin:0 auto; }
.bear-middle { width:min(42vw,175px); margin:6px auto 28px; }
.final-bear-wrap { padding:26px 20px 0; background:rgba(255,250,248,.34); }
.bear-final { width:min(48vw,190px); }
.footer { padding-top:12px; }
@media (min-width:700px) {
  .bear-middle { width:190px; }
  .bear-final { width:205px; }
}

/* Pulido de la solapa y sello para que el sobre se vea simétrico y cerrado */
.envelope { isolation:isolate; }
.envelope-seal {
  top:62%;
  width:52px; height:52px;
  background:radial-gradient(circle at 32% 25%,#f6df9d 0%,#e7c16f 48%,#c99b48 100%);
  border:2px solid #fff4d8;
  outline:1px solid rgba(190,145,66,.55);
}
.envelope-cover.is-opening .envelope-seal { transform:translate(-50%,-50%) scale(.72); }

/* Fondo de nubes continuo: acompaña el desplazamiento vertical de la invitación */
.invitation {
  background-image: url("assets/fondo-nubes-largo.png");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-attachment: scroll;
}
.section-cream, .section-blush {
  backdrop-filter: blur(0.4px);
}
@media (min-width:621px) {
  .invitation { background-size: 100% auto; }
}


/* Movimiento sutil de las ilustraciones: flotación lenta y delicada */
@keyframes mariel-gentle-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(-1deg); }
}
@keyframes mariel-soft-sway {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(1deg) scale(1.012); }
}
.bear-sheet,
.section-bear {
  transform-origin: 50% 65%;
  animation: mariel-gentle-float 6.8s ease-in-out infinite;
  will-change: transform;
}
.section-bear.bear-middle { animation-delay: -2.2s; }
.section-bear.bear-final { animation-delay: -4.1s; }
.bear-sheet { animation-name: mariel-soft-sway; animation-duration: 7.6s; }
@media (hover:hover) {
  .bear-sheet:hover,
  .section-bear:hover {
    filter: drop-shadow(0 8px 12px rgba(177, 116, 137, .13));
    transition: filter .35s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bear-sheet, .section-bear {
    animation: none !important;
    will-change: auto;
  }
}

.contact-note {
  margin: 14px auto 0;
  color: #a77c87;
  font-size: 12px;
  letter-spacing: .04em;
}
.contact-note strong {
  color: var(--pink-dark);
  font-weight: 600;
}

/* Sobre cerrado tipo carta sellada: sin el gran hueco blanco en la cara frontal */
.envelope { isolation:isolate; overflow:visible; }
.envelope-front { pointer-events:none; }
.envelope-cover.is-opening .envelope-bow { opacity:0; transition:opacity .2s ease; }

/* V10: frente completamente opaco para que la carta no se vea antes de abrir */
.envelope-front {
  inset:0;
  z-index:3;
  clip-path:none !important;
  border-radius:10px;
  background:
    linear-gradient(145deg, transparent 49.6%, rgba(255,255,255,.34) 49.85%, transparent 50.2%),
    linear-gradient(35deg, transparent 49.6%, rgba(255,255,255,.28) 49.85%, transparent 50.2%),
    linear-gradient(145deg,#f7cbd7 0%,#efb9ca 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.38);
  transition: transform .75s .05s ease, opacity .55s .1s ease;
}
.envelope-flap {
  height:72%;
  clip-path:polygon(0 0,100% 0,50% 78%);
  z-index:4;
}
.envelope-seal {
  top:58%;
  z-index:7;
}
.envelope-cover.is-opening .envelope-front {
  transform:translateY(105%);
  opacity:0;
}
.envelope-cover.is-opening .envelope-bow {
  opacity:0;
  transition:opacity .18s ease;
}

/* Detalles nuevos solicitados: cinco abejitas discretas y margaritas al pie */
.invitation { position:relative; overflow:hidden; }
.bee-float-layer { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.floating-bee { position:absolute; width:clamp(30px,5vw,48px); height:auto; opacity:.9; filter:drop-shadow(0 2px 2px rgba(119,78,54,.12)); animation: mariel-bee-drift 8s ease-in-out infinite; }
.bee-one { top:7%; left:8%; transform:rotate(-12deg); }
.bee-two { top:23%; right:7%; animation-delay:-2s; }
.bee-three { top:43%; left:5%; animation-delay:-4s; }
.bee-four { top:64%; right:8%; animation-delay:-1s; }
.bee-five { top:82%; left:14%; animation-delay:-5s; }
@keyframes mariel-bee-drift { 0%,100% { translate:0 0; rotate:-5deg; } 50% { translate:8px -10px; rotate:7deg; } }
.daisy-footer { width:100%; line-height:0; padding:10px 0 0; margin-top:4px; overflow:hidden; }
.daisy-footer img { display:block; width:100%; height:auto; max-height:190px; object-fit:cover; object-position:center bottom; }
@media (max-width:620px) {
  .floating-bee { width:30px; }
  .bee-one { left:2%; top:9%; }
  .bee-two { right:1%; top:27%; }
  .bee-three { left:1%; top:48%; }
  .bee-four { right:2%; top:68%; }
  .bee-five { left:6%; top:85%; }
  .daisy-footer img { max-height:125px; }
}
@media (prefers-reduced-motion:reduce) { .floating-bee { animation:none; } }