 :root{--rose:#d9b9a4;--rose-dark:#886d4e;--sage:#777d58;--cream:#f8f1e7;--paper:#fff9ebed;--ink:#5e5944;--line:rgba(124,110,78,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eee2cc;color:var(--ink);font-family:"Montserrat",Arial,sans-serif;font-weight:300}a{color:inherit}p{line-height:1.8}
.page-art{width:min(1024px,100%);min-height:100vh;margin:auto;padding:clamp(20px,5vw,55px) clamp(12px,7vw,76px) 30px;background-image:linear-gradient(#fff9e733,#fff9e733),url("assets/bosque-acuarela.png");background-size:100% auto;background-position:top center;background-repeat:repeat-y;position:relative;overflow:hidden}
.hero{text-align:center;min-height:430px;display:grid;place-items:center;padding:30px 20px 22px;background:#fff7e8c9;border:1px solid #e4d1b4}
.hero-content{max-width:590px}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:#7c8564;margin:0 0 12px}
h1{font:400 clamp(48px,8vw,86px)/.9 "Parisienne",cursive;color:#777851;margin:0}h1 span{font:400 28px "Cormorant Garamond",serif;display:block;line-height:1.3}h1 em{display:block;font:500 clamp(19px,3.4vw,29px) "Cormorant Garamond",serif;font-style:normal;text-transform:uppercase;letter-spacing:.09em;line-height:1.3;color:#795738;margin-top:4px}
.sprig{color:#9ca17d;letter-spacing:.2em;font-size:22px;margin:12px 0}.sprig b{font-weight:400;color:#c78f5b}.intro-copy{max-width:380px;margin:10px auto 14px;font:400 15px/1.6 "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.12em}
.parents{font:500 clamp(25px,4vw,36px) "Cormorant Garamond",serif;letter-spacing:.16em;margin:12px 0 4px}.parents small{display:block;font:400 27px "Parisienne",cursive;letter-spacing:0;color:#b18c62}.hero-note{font:italic 15px "Cormorant Garamond",serif;margin:8px 0 0}
.panel{background:#fff8e8e8;border:1px solid #e4d0b2;box-shadow:0 8px 25px #72533110;text-align:center;padding:clamp(24px,4vw,40px);margin:18px 0}
h2{font:500 clamp(31px,5vw,48px)/1 "Cormorant Garamond",serif;color:#806747;margin:0 0 18px}.panel p:not(.eyebrow){font:400 17px/1.7 "Cormorant Garamond",serif;max-width:590px;margin:10px auto}
.countdown-section{background:#858967ed;color:#fffaf0}.countdown-section h2{color:#fff8e9}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:580px;margin:24px auto 0}.countdown div{background:#f0e1cbe8;border-radius:13px;padding:12px 3px;color:#574a36}.countdown strong{display:block;font:500 clamp(27px,4vw,39px) "Cormorant Garamond",serif}.countdown span{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:9px;margin-top:2px}
.bunny-art{height:150px;width:auto;max-width:90%;object-fit:contain;margin:0 auto 8px}.signature{font-style:italic;color:#7d8564!important}.event-info{display:grid;grid-template-columns:repeat(3,1fr);padding:25px 8px}.event-info>div{padding:0 7px;display:flex;flex-direction:column;align-items:center;gap:6px}.event-info>div+div{border-left:1px solid #c9a77b}.icon{font-size:27px;color:#98632e}.event-info small{font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.event-info strong{font:500 clamp(14px,2.2vw,20px) "Cormorant Garamond",serif;letter-spacing:.04em}.event-info small:last-child{font-size:10px;letter-spacing:.03em;text-transform:none;line-height:1.5}
.special{background:#f7efdfed}.special h2{font-size:clamp(27px,4vw,38px)}.activities{display:grid;grid-template-columns:repeat(4,1fr);padding:17px 5px;background:#fff6e6ed}.activities>div{display:flex;align-items:center;flex-direction:column;gap:7px}.activities>div+div{border-left:1px solid #c9a77b}.activities span{font-size:26px;color:#bd855c}.activities small{font:500 11px/1.35 "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.08em}
.timeline-list{max-width:470px;margin:auto}.timeline-list div{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;padding:13px 5px;border-bottom:1px solid #d9c6a9}.timeline-list span{text-align:right;color:#8a7759;font:500 17px "Cormorant Garamond",serif}.timeline-list strong{text-align:left;font-weight:400;font-size:12px}
.action-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px}.action-cards .panel{margin:0;padding:25px 18px}.card-icon{font-size:28px;color:#98632e}.action-cards h3{font:500 21px "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.08em;margin:8px 0}.action-cards p{font-size:15px!important;min-height:82px}.pill{display:inline-block;background:var(--sage);color:#fff9e9;text-decoration:none;border-radius:30px;padding:12px 19px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:transform .2s}.pill:hover{transform:translateY(-2px)}.maps-link{display:block;text-align:center;color:#6e593f;font:500 13px "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.12em;margin:20px auto 0}footer{text-align:center;font:italic 16px "Cormorant Garamond",serif;padding:24px 0 4px;color:#746c4e}footer span{color:#b38a58}
.falling-leaves{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}.falling-leaf{position:absolute;top:-14vh;opacity:0;animation:leaf-fall linear infinite}.falling-art{height:auto;object-fit:contain;filter:saturate(.9);opacity:.42;mix-blend-mode:multiply;will-change:transform}@keyframes leaf-fall{0%{transform:translate3d(0,-10vh,0) rotate(-12deg);opacity:0}8%{opacity:.40}50%{transform:translate3d(var(--sway,30px),55vh,0) rotate(150deg);opacity:.43}100%{transform:translate3d(calc(var(--sway,30px) * -1),115vh,0) rotate(330deg);opacity:0}}
.welcome-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#f3e5dc;color:var(--ink);transition:opacity .7s,visibility .7s}.welcome-screen.hidden{opacity:0;visibility:hidden}.welcome-card{text-align:center;padding:25px;background:#fff8e9e8;border:1px solid #e4d0b2;max-width:90vw}.welcome-card p{margin:0;font:400 clamp(30px,7vw,52px) "Parisienne",cursive;color:var(--rose-dark)}.welcome-card span{display:block;margin:10px 0 24px;font-size:10px;letter-spacing:.17em}.welcome-bunny{height:180px;width:auto;margin:0 auto 5px}.welcome-card button{padding:13px 25px;border:1px solid var(--sage);background:var(--sage);color:#fff;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.music-button{position:fixed;right:20px;bottom:20px;z-index:9;width:54px;height:54px;border:0;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 8px 25px #5d41352b}.music-button.is-playing{animation:pulse 1.7s infinite}@keyframes pulse{50%{transform:scale(1.08)}}
@media(max-width:560px){.page-art{padding:12px 10px 22px;background-size:auto 1000px}.hero{min-height:400px;padding:25px 10px}.intro-copy{font-size:12px}.panel{padding:25px 13px;margin:12px 0}.countdown{gap:5px}.countdown div{padding:10px 2px}.countdown strong{font-size:26px}.countdown span{font-size:8px}.event-info{padding:16px 2px}.event-info>div{padding:0 4px}.event-info small{font-size:8px}.event-info strong{font-size:13px}.event-info small:last-child{font-size:9px}.activities{padding:12px 2px}.activities small{font-size:9px;letter-spacing:.03em}.action-cards{gap:8px}.action-cards .panel{padding:15px 8px}.action-cards h3{font-size:12px}.action-cards p{font-size:12px!important;min-height:105px}.pill{font-size:8px;padding:10px 9px}.welcome-bunny{height:150px}}

/* Animalitos decorativos en las esquinas de las tarjetas: dejan libre el texto. */
.action-cards .panel{position:relative;overflow:hidden;isolation:isolate}
.action-cards .panel>*{position:relative;z-index:1}
.action-cards .panel:before,.action-cards .panel:after{content:"";position:absolute;background-repeat:no-repeat;background-size:contain;pointer-events:none;z-index:0;opacity:.96}
.action-cards .panel:first-child:before{width:105px;height:118px;left:-14px;bottom:-20px;background-image:url("assets/ciervo-esquina.png");background-position:left bottom}
.action-cards .panel:first-child:after{width:76px;height:75px;right:-15px;top:-12px;background-image:url("assets/flowers.svg");transform:rotate(35deg);opacity:.7}
.action-cards .panel:last-child:before{width:108px;height:118px;right:-13px;bottom:-18px;background-image:url("assets/ardilla-esquina.png");background-position:right bottom}
.action-cards .panel:last-child:after{width:70px;height:70px;left:-12px;top:-12px;background-image:url("assets/flowers.svg");transform:rotate(-30deg);opacity:.7}
.map-panel{position:relative;overflow:hidden;min-height:190px;background:#fff8e8ed url("assets/paper-texture.svg") center/cover}
.map-panel:before{content:"";position:absolute;left:-14px;bottom:-28px;width:135px;height:160px;background:url("assets/ciervo-esquina.png") left bottom/contain no-repeat;pointer-events:none}
.map-panel:after{content:"";position:absolute;right:-15px;bottom:-28px;width:130px;height:150px;background:url("assets/ardilla-esquina.png") right bottom/contain no-repeat;pointer-events:none}
.map-copy{position:relative;z-index:1;max-width:510px;margin:auto;padding:2px 55px 4px}
.map-copy h2{margin-bottom:8px}.map-copy p:not(.eyebrow){font:400 16px/1.5 "Cormorant Garamond",serif;margin:8px auto 16px}
.maps-link{width:max-content;max-width:100%;margin:10px auto 0}
@media(max-width:560px){.map-copy{padding:2px 22px 4px}.map-panel:before{width:90px;height:110px;left:-14px;bottom:-20px}.map-panel:after{width:88px;height:105px;right:-14px;bottom:-20px}.action-cards .panel:first-child:before{width:76px;height:90px}.action-cards .panel:last-child:before{width:78px;height:88px}.action-cards .panel p{position:relative;z-index:2}}

/* Más ilustraciones infantiles y tipografía blanca de alto contraste */
.intro-panel,.special,.timeline,.action-cards .panel,.map-panel{background:rgba(103,112,76,.95);border-color:rgba(255,250,235,.55);color:#fffdf5;position:relative;isolation:isolate;overflow:hidden}
.intro-panel h2,.special h2,.timeline h2,.action-cards h3,.map-panel h2{color:#fffdf5;text-shadow:0 2px 5px rgba(43,47,30,.4)}
.intro-panel p:not(.eyebrow),.special p:not(.eyebrow),.timeline p:not(.eyebrow),.action-cards p,.map-copy p:not(.eyebrow),.signature{color:#fffdf5!important;text-shadow:0 1px 3px rgba(40,43,28,.4)}
.intro-panel .eyebrow,.special .eyebrow,.timeline .eyebrow,.map-panel .eyebrow{color:#f7e9c9}
.action-cards .card-icon{color:#f4d8a7}.action-cards .pill,.map-panel .pill{background:#fff8e9;color:#5f6845;font-weight:600;box-shadow:0 3px 10px #0002}
.intro-panel:after{content:"";position:absolute;right:-18px;bottom:-24px;width:155px;height:155px;background:url("assets/zorrito-acuarela.png") center/contain no-repeat;opacity:.92;pointer-events:none;z-index:0}
.intro-panel>*{position:relative;z-index:1}
.special:before{content:"";position:absolute;left:-14px;bottom:-26px;width:145px;height:125px;background:url("assets/hongos-acuarela.png") center/contain no-repeat;pointer-events:none}
.special:after{content:"";position:absolute;right:-18px;top:-22px;width:132px;height:118px;background:url("assets/pajarito-floral.png") center/contain no-repeat;pointer-events:none}
.special>*{position:relative;z-index:1}.timeline:after{content:"";position:absolute;right:-25px;bottom:-24px;width:155px;height:135px;background:url("assets/hongos-acuarela.png") center/contain no-repeat;opacity:.8;pointer-events:none}.timeline>*{position:relative;z-index:1}
.action-cards .panel:first-child:after{background-image:url("assets/marco-floral.png");width:92px;height:105px;right:-28px;top:-25px;opacity:.88}
.action-cards .panel:last-child:after{background-image:url("assets/pajarito-floral.png");width:108px;height:98px;left:-23px;top:-22px;opacity:.9}
.map-panel{background-image:linear-gradient(rgba(103,112,76,.92),rgba(103,112,76,.92)),url("assets/paper-texture.svg")}
.map-panel:before{background-image:url("assets/zorrito-acuarela.png");width:155px;height:150px}.map-panel:after{background-image:url("assets/pajarito-floral.png");width:145px;height:130px}
.map-copy{background:rgba(87,96,61,.35);border-radius:18px;padding-top:16px;padding-bottom:16px}.map-copy h2{color:#fffdf5}
@media(max-width:560px){.intro-panel:after{width:95px;height:100px;right:-18px;bottom:-20px}.special:before{width:90px;height:95px;left:-15px}.special:after{width:85px;height:75px;right:-15px}.timeline:after{width:95px;height:100px}.map-panel:before{width:95px;height:100px}.map-panel:after{width:88px;height:90px}.map-copy{padding:14px 18px}.action-cards .panel:first-child:after{width:68px;height:75px}.action-cards .panel:last-child:after{width:78px;height:75px}}

/* Iconografía unificada: ilustraciones de acuarela infantil */
.illustrated-icon{width:46px;height:46px;object-fit:contain;display:block;margin:0 auto 2px}
.activity-icon{width:54px;height:54px;object-fit:contain;display:block;margin:0 auto}
.card-icon-img{width:58px;height:58px;object-fit:contain;display:block;margin:0 auto 4px}
.music-button img{width:42px;height:42px;object-fit:contain;display:block}
.music-button{width:62px;height:62px;padding:8px;display:grid;place-items:center}
@media(max-width:560px){.illustrated-icon{width:36px;height:36px}.activity-icon{width:43px;height:43px}.card-icon-img{width:48px;height:48px}.music-button{width:54px;height:54px}.music-button img{width:38px;height:38px}}

/* Ajustes solicitados: quitar solo estos dos adornos concretos */
.intro-panel:after{display:none!important}
.action-cards .panel:last-child:after{display:none!important}

/* Tipografía uniforme para todos los botones interactivos */
a.pill,
a.maps-link,
button,
.music-button,
button.pill,
.maps-button,
#mapsButton,
#giftsButton,
#rsvpButton,
#musicToggle {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
}


/* Portada ilustrada completa: sustituye el icono solitario de conejito. */
.welcome-screen{background:#f8efdf;padding:10px;overflow-y:auto}
.welcome-card-cover{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;width:min(520px,96vw);max-width:96vw;max-height:calc(100dvh - 20px);display:flex;align-items:center;justify-content:center}
.welcome-cover-button{display:block;width:100%;max-height:calc(100dvh - 20px);padding:0!important;margin:0;border:0!important;background:transparent!important;cursor:pointer;line-height:0;box-shadow:0 10px 32px rgba(79,61,35,.16);border-radius:4px;overflow:hidden}
.welcome-cover{display:block;width:100%;height:auto;max-height:calc(100dvh - 20px);object-fit:contain;margin:0 auto}
.welcome-cover-button:focus-visible{outline:3px solid #777d58;outline-offset:4px}
@media(max-width:560px){.welcome-card-cover{width:min(100%,500px);max-width:96vw}.welcome-cover{max-height:calc(100dvh - 16px)}.welcome-cover-button{max-height:calc(100dvh - 16px)}}

/* Ajuste móvil: subir el botón de confirmación y dejar libre la ilustración de la ardilla */
@media (max-width: 560px) {
  .action-cards .panel:last-child p { min-height: 66px !important; margin-bottom: 8px !important; line-height: 1.45 !important; }
  .action-cards .panel:last-child #rsvpButton { position: relative; z-index: 3; margin-top: 2px; }
  .action-cards .panel:last-child { padding-bottom: 18px; }
  .action-cards .panel:last-child:before { width: 76px; height: 86px; right: -9px; bottom: -12px; z-index: 0; }
}


/* Ajuste final: subir los botones en las tarjetas para dejar libres las ilustraciones */
.action-cards .panel { display:flex; flex-direction:column; }
.action-cards .panel p { margin-bottom:12px !important; }
.action-cards .panel .pill, .action-cards .panel a, .action-cards .panel button { align-self:center; position:relative; z-index:5; margin-top:0 !important; }
@media (max-width:560px) {
 .action-cards .panel { padding-bottom:16px !important; }
 .action-cards .panel p { min-height:0 !important; margin-bottom:8px !important; line-height:1.4 !important; }
 .action-cards .panel .pill, .action-cards .panel a, .action-cards .panel button { transform:translateY(-24px); }
}


/* Ajuste fino tarjeta RSVP: subir el texto y bajar la ardilla para dejar visible su carita */
@media (max-width: 560px) {
  .action-cards .panel:last-child p {
    transform: translateY(-14px);
    margin-bottom: 0 !important;
    position: relative; z-index: 2;
  }
  .action-cards .panel:last-child:after {
    right: -8px !important;
    bottom: -42px !important;
    top: auto !important;
    width: 112px !important; height: 112px !important;
    background-position: center bottom !important;
    z-index: 1;
  }
  .action-cards .panel:last-child .pill,
  .action-cards .panel:last-child a,
  .action-cards .panel:last-child button {
    transform: translateY(-8px);
    position: relative; z-index: 3;
  }
}


/* FIX DEFINITIVO PARA CELULAR: dejar libre la cara de la ardilla en confirmar asistencia */
@media (max-width: 560px) {
  .action-cards .panel:last-child {
    padding-bottom: 14px !important;
    overflow: hidden;
  }
  .action-cards .panel:last-child h3 {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    position: relative;
    z-index: 3;
  }
  .action-cards .panel:last-child p {
    transform: translateY(-18px) !important;
    margin-bottom: -5px !important;
    position: relative;
    z-index: 3;
  }
  .action-cards .panel:last-child #rsvpButton {
    transform: translateY(-24px) !important;
    position: relative;
    z-index: 5;
    margin-bottom: -16px !important;
  }
  /* La ardilla es el pseudo-elemento :before; bajarla evita que se cruce con el botón. */
  .action-cards .panel:last-child:before {
    right: -5px !important;
    bottom: -38px !important;
    top: auto !important;
    width: 102px !important;
    height: 118px !important;
    background-position: right bottom !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }
  .action-cards .panel:last-child:after { display: none !important; }
}
