* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:84px
}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body-font);
font-size:16px;
line-height:1.7;
overflow-x:hidden
}
a {
color:inherit
}
img {
max-width:100%;
display:block
}
.site-header {
position:fixed;
left:0;
right:0;
top:0;
z-index:120;
height:76px;
padding:0 clamp(22px,5vw,74px);
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
background:rgba(25,21,18,.12);
border-bottom:1px solid rgba(255,255,255,.08);
transition:.35s ease;
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px)
}
.site-header.scrolled {
background:color-mix(in srgb,var(--header-bg) calc(var(--header-alpha) * 100%), transparent);
color:var(--ink);
box-shadow:0 12px 35px rgba(40,29,18,.08);
border-bottom:1px solid rgba(205,159,88,.18);
backdrop-filter:blur(var(--header-blur));
-webkit-backdrop-filter:blur(var(--header-blur))
}
.site-header.centered {
justify-content:center;
gap:55px
}
.brand {
text-decoration:none;
display:flex;
align-items:center;
min-width:max-content
}
.brand img {
max-height:52px;
max-width:150px;
object-fit:contain
}
.brand span {
font-family:var(--title-font);
font-size:38px;
line-height:1
}
.brand i {
color:var(--gold);
font-style:normal
}
.nav {
display:flex;
align-items:center;
gap:clamp(16px,2vw,32px)
}
.nav a {
text-decoration:none;
text-transform:uppercase;
letter-spacing:1.7px;
font-size:10px;
font-weight:600;
position:relative
}
.nav a:after {
content:"";
position:absolute;
left:50%;
right:50%;
bottom:-8px;
height:1px;
background:var(--gold);
transition:.25s
}
.nav a:hover:after {
left:0;
right:0
}
.hamb {
display:none;
border:0;
background:none;
width:42px;
height:42px;
padding:8px;
cursor:pointer;
color:inherit
}
.hamb span {
display:block;
width:25px;
height:1px;
background:currentColor;
margin:6px auto;
transition:.3s
}
.hero {
min-height:100svh;
position:relative;
display:grid;
place-items:center;
text-align:center;
color:white;
overflow:hidden
}
.hero-media,.hero-slide,.hero-overlay,.hero-noise {
position:absolute;
inset:0
}
.hero-slide {
background-size:cover;
background-position:center;
opacity:0;
transform:scale(1.04);
transition:opacity 1.3s ease,transform 7s ease
}
.hero-slide.active {
opacity:1;
transform:scale(1.12)
}
.hero-fallback {
background:radial-gradient(circle at 30% 20%,#6e543b,#1c1713 60%)
}
.hero-overlay {
background:#17120f;
z-index:1
}
.hero-noise {
z-index:2;
opacity:.18;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")
}
.hero-content {
position:relative;
z-index:3;
padding:100px 24px 50px;
max-width:1000px
}
.eyebrow {
text-transform:uppercase;
letter-spacing:4px;
font-size:10px;
font-weight:600;
color:#fff;
margin:0 0 18px
}
.eyebrow.dark {
color:#8a765f
}
.hero h1 {
font-family:var(--title-font);
font-size:clamp(72px,12vw,150px);
font-weight:400;
line-height:.82;
margin:0;
text-shadow:0 8px 30px rgba(0,0,0,.18)
}
.hero h1 span {
color:var(--gold)
}
.ornament {
font-size:34px;
color:var(--gold);
margin:28px 0 8px
}
.hero-text {
font-family:"Cormorant Garamond",serif;
font-size:clamp(22px,3vw,34px);
font-style:italic
}
.scroll-cue {
position:absolute;
bottom:28px;
left:50%;
transform:translateX(-50%);
font-size:32px;
text-decoration:none;
animation:bob 2s infinite
}
.hero-progress {
position:absolute;
z-index:5;
left:0;
bottom:0;
height:2px;
background:var(--gold);
width:100%;
transform-origin:left
}
@keyframes heroProgress {
from {
transform:scaleX(0)
}
to {
transform:scaleX(1)
}
}
@keyframes bob {
50% {
transform:translate(-50%,8px)
}
}
.section {
padding:110px clamp(22px,6vw,90px)
}
.narrow {
max-width:1100px;
margin:auto
}
.script-title {
font-family:var(--title-font);
font-size:clamp(56px,7vw,92px);
line-height:1;
font-weight:400;
color:var(--gold);
margin:0 0 18px
}
.script-title.small {
font-size:52px
}
.script-title.light {
color:#fff
}
.section-head {
text-align:center;
max-width:760px;
margin:0 auto 55px
}
.countdown {
text-align:center
}
.count-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
max-width:780px;
margin:40px auto 0;
border:1px solid #e8ded0;
border-left:0;
border-right:0
}
.count-grid div {
padding:28px 12px;
border-right:1px solid #e8ded0
}
.count-grid div:last-child {
border:0
}
.count-grid strong {
display:block;
font:50px/1 "Cormorant Garamond",serif;
color:var(--gold)
}
.count-grid span {
text-transform:uppercase;
font-size:10px;
letter-spacing:2px
}
.date-section {
text-align:center;
background:linear-gradient(180deg,#f9f4ec,#f6efe5)
}
.date-card {
width:min(300px,90vw);
margin:42px auto 70px;
padding:22px 10px;
border-top:1px solid var(--gold);
border-bottom:1px solid var(--gold);
position:relative
}
.date-card:before {
content:"❦";
position:absolute;
top:-19px;
left:50%;
transform:translateX(-50%);
background:#f8f2e9;
padding:0 12px;
color:var(--gold)
}
.weekday,.month {
letter-spacing:6px;
font-weight:500;
font-size:13px
}
.date-main {
display:flex;
align-items:center;
gap:15px;
justify-content:center
}
.date-main span {
width:55px;
height:1px;
background:var(--gold)
}
.date-main b {
font:90px/1 "Cormorant Garamond",serif;
color:var(--gold);
font-weight:400
}
.month {
font-size:18px
}
.year {
display:flex;
gap:12px;
justify-content:center;
align-items:center;
color:var(--gold);
letter-spacing:4px;
margin-top:8px
}
.year i {
font-style:normal;
font-size:11px
}
.venue-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:28px;
max-width:1060px;
margin:auto
}
.venue-card {
background:rgba(255,255,255,.88);
padding:54px 40px;
box-shadow:0 20px 70px rgba(71,51,28,.08);
border:1px solid rgba(205,159,88,.18);
position:relative;
overflow:hidden
}
.venue-card:before {
content:"";
position:absolute;
inset:9px;
border:1px solid rgba(205,159,88,.22);
pointer-events:none
}
.venue-icon,.line-icon {
font-size:30px;
color:var(--gold)
}
.venue-card h3,.dress-grid h3 {
font-family:var(--title-font);
font-size:42px;
font-weight:400;
color:var(--gold);
margin:12px 0 5px
}
.venue-card h4 {
font:600 21px "Cormorant Garamond",serif;
margin:0
}
.venue-card time {
display:block;
color:var(--gold);
font-weight:600;
margin:14px
}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
background:var(--gold);
color:#fff;
padding:13px 24px;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
letter-spacing:2px;
cursor:pointer;
transition:.25s
}
.btn:hover {
transform:translateY(-2px);
filter:brightness(.96)
}
.btn.ghost {
background:transparent;
color:var(--gold);
border:1px solid var(--gold)
}
.btn.ghost-light {
background:transparent;
color:#fff;
border:1px solid rgba(255,255,255,.7)
}
.godparents {
margin-top:70px
}
.story {
background:#fff
}
.gallery-shell {
max-width:900px;
height:min(70vh,650px);
margin:auto;
position:relative;
overflow:hidden;
background:#eee6dc;
box-shadow:0 30px 80px rgba(60,40,20,.1)
}
.gallery-slider,.slide {
position:absolute;
inset:0
}
.slide {
opacity:0;
transition:opacity 1s
}
.slide.active {
opacity:1
}
.slide img {
width:100%;
height:100%;
object-fit:cover;
transition:transform 7s
}
.slide.active img {
transform:scale(1.06)
}
.gallery-prev,.gallery-next {
position:absolute;
z-index:3;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
border:1px solid rgba(255,255,255,.8);
background:rgba(0,0,0,.25);
color:#fff;
border-radius:50%;
font-size:28px;
cursor:pointer
}
.gallery-prev {
left:18px
}
.gallery-next {
right:18px
}
.gallery-dots {
position:absolute;
z-index:3;
bottom:18px;
left:0;
right:0;
display:flex;
justify-content:center;
gap:8px
}
.gallery-dots button {
width:8px;
height:8px;
padding:0;
border:1px solid #fff;
background:transparent;
border-radius:50%
}
.gallery-dots button.active {
background:#fff
}
blockquote {
max-width:750px;
margin:70px auto 0;
text-align:center;
font:italic 31px/1.4 "Cormorant Garamond",serif;
color:#5e5046
}
blockquote cite {
display:block;
font:500 10px var(--body-font);
text-transform:uppercase;
letter-spacing:2px;
margin-top:20px;
color:var(--gold)
}
.timeline-section {
background:#fbf8f2
}
.timeline {
max-width:850px;
margin:auto;
position:relative
}
.timeline {
--timeline-progress:0;
position:relative
}
.timeline:before {
content:"";
position:absolute;
left:180px;
top:0;
bottom:0;
width:2px;
background:#e7d9c4
}
.timeline:after {
content:"";
position:absolute;
left:180px;
top:0;
bottom:0;
width:2px;
background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 72%,#fff));
transform:scaleY(var(--timeline-progress));
transform-origin:top;
box-shadow:0 0 14px rgba(205,159,88,.38);
will-change:transform
}
.timeline-item {
display:grid;
grid-template-columns:150px 60px 1fr;
align-items:start;
margin:0 0 50px;
position:relative;
z-index:1
}
.timeline-item time {
text-align:right;
color:var(--gold);
font:600 16px "Cormorant Garamond"
}
.timeline-dot {
width:13px;
height:13px;
background:#fbf8f2;
border:4px solid #fbf8f2;
outline:1px solid #cdbb9f;
border-radius:50%;
justify-self:center;
margin-top:6px;
transition:background .45s ease,outline-color .45s ease,box-shadow .45s ease,transform .45s ease
}
.timeline-item.timeline-reached .timeline-dot {
background:var(--gold);
outline-color:var(--gold);
box-shadow:0 0 0 6px rgba(205,159,88,.12),0 0 18px rgba(205,159,88,.32);
transform:scale(1.12)
}
.timeline-item h3 {
margin:0;
font-family:var(--title-font);
font-size:34px;
font-weight:400;
color:var(--gold)
}
.timeline-item p {
margin:0
}
.dress {
background:radial-gradient(circle at 20% 10%,#4d3b2f,#171411 65%);
color:#fff
}
.dress-reference {
width:min(720px,100%);
max-height:520px;
margin:0 auto 38px;
overflow:hidden;
border:1px solid rgba(205,159,88,.45)
}
.dress-reference img {
width:100%;
height:100%;
max-height:520px;
object-fit:cover
}
.dress-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:rgba(205,159,88,.4);
max-width:850px;
margin:auto
}
.dress-grid article {
background:rgba(31,26,22,.95);
padding:60px;
text-align:center
}
.reserved-colors {
max-width:850px;
margin:34px auto 0;
border:1px solid rgba(205,159,88,.45);
padding:32px;
text-align:center
}
.reserved-colors h3 {
font-family:var(--title-font);
font-size:42px;
color:var(--gold);
font-weight:400;
margin:0 0 15px
}
.reserved-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:16px
}
.reserved-grid p {
margin:0;
padding:16px;
background:rgba(255,255,255,.04)
}
.reserved-grid b {
display:block;
color:var(--gold);
font:600 12px var(--body-font);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:5px
}
.gifts {
background:var(--paper)
}
.hashtag {
max-width:700px;
margin:40px auto 0;
text-align:center;
border:1px solid #e6d6bf;
padding:45px
}
.hashtag span {
display:block;
text-transform:uppercase;
letter-spacing:2px;
font-size:10px
}
.hashtag strong {
display:block;
font-family:var(--title-font);
font-size:50px;
font-weight:400;
color:var(--gold);
margin:12px;
overflow-wrap:anywhere
}
.custom-section {
background:var(--paper)
}
.custom-section.custom-dark {
background:#1b1714;
color:#f4eee7
}
.custom-section.custom-accent {
background:color-mix(in srgb,var(--gold) 12%,#fff)
}
.custom-inner {
max-width:1050px;
margin:auto;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
gap:55px;
align-items:center
}
.custom-inner:has(figure) {
}
.custom-inner:not(:has(figure)) {
display:block;
text-align:center;
max-width:780px
}
.custom-inner figure {
margin:0;
overflow:hidden;
box-shadow:0 22px 60px rgba(30,20,10,.12)
}
.custom-inner figure img {
width:100%;
max-height:560px;
object-fit:cover
}
.custom-copy {
white-space:normal;
margin-bottom:25px
}
.rsvp {
background:linear-gradient(150deg,#efe4d4,#f8f1e8)
}
.rsvp-card {
max-width:700px;
margin:auto;
background:#fff;
padding:clamp(30px,6vw,70px);
box-shadow:0 30px 80px rgba(78,55,28,.12);
border:1px solid rgba(205,159,88,.15)
}
.availability {
text-align:center;
background:#fbf6ef;
padding:18px;
margin-bottom:24px
}
.availability strong {
font:45px "Cormorant Garamond";
color:var(--gold);
margin-right:8px
}
.rsvp-form,.guest-search {
display:grid;
gap:18px
}
.rsvp-form label,.guest-search label,#companions label {
display:grid;
gap:7px;
font-size:12px;
font-weight:500;
letter-spacing:.5px
}
.rsvp-form input,.rsvp-form textarea,.guest-search input,#companions input {
width:100%;
border:1px solid #dccdb9;
background:#fff;
padding:14px 15px;
font:inherit;
outline:0
}
.rsvp-form input:focus,.rsvp-form textarea:focus,.guest-search input:focus,#companions input:focus {
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(205,159,88,.12)
}
fieldset {
border:1px solid #e4d6c4;
padding:16px
}
legend {
padding:0 8px;
font-size:12px;
font-weight:500
}
.choice {
display:flex!important;
align-items:center;
gap:10px;
margin:7px 0
}
.choice input {
width:auto
}
.rsvp-lock {
padding:18px;
background:#fbf6ef;
border-left:3px solid var(--gold)
}
.search-results {
background:#fff;
border:1px solid #e0d2be;
box-shadow:0 15px 35px rgba(0,0,0,.1)
}
.search-results a {
display:flex;
justify-content:space-between;
padding:12px 15px;
text-decoration:none;
border-bottom:1px solid #eee
}
.search-results small {
color:#9a7b50
}
.search-empty {
padding:14px
}
.form-alert {
padding:15px;
margin:0 0 18px
}
.form-alert.success {
background:#edf8f0;
color:#23613a
}
.form-alert.error {
background:#fff1ef;
color:#8d3129
}
.faq-list {
max-width:800px;
margin:auto
}
.faq-list details {
border-bottom:1px solid #e7dccd
}
.faq-list summary {
list-style:none;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:start;
gap:18px;
width:100%;
min-width:0;
padding:22px 0;
font:600 19px "Cormorant Garamond";
cursor:pointer
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list summary::marker {
content:""
}
.faq-list summary .faq-toggle {
display:grid;
place-items:center;
flex:0 0 auto;
width:28px;
height:28px;
color:var(--gold);
font:400 25px/1 Arial,sans-serif;
transform:none;
transform-origin:center;
transition:transform .22s ease;
user-select:none
}
.faq-list details[open] > summary .faq-toggle {
transform:rotate(45deg)
}
.faq-list p {
padding:0;
margin:0;
color:inherit
}
footer {
background:#171411;
color:#aaa;
text-align:center;
padding:55px 20px
}
.footer-brand {
font-family:var(--title-font);
font-size:52px;
color:#fff
}
.audio-button {
position:fixed;
right:22px;
bottom:22px;
z-index:150;
width:58px;
height:58px;
border-radius:50%;
border:2px solid rgba(255,255,255,.9);
outline:1px solid rgba(205,159,88,.6);
outline-offset:3px;
background:linear-gradient(145deg,#e4c38b,var(--gold),#a97838);
color:#fff;
box-shadow:0 8px 24px rgba(60,42,20,.25);
cursor:pointer;
animation:pulse 2.8s infinite
}
.audio-button .pause {
display:none
}
.audio-button.playing .note {
display:none
}
.audio-button.playing .pause {
display:inline
}
@keyframes pulse {
50% {
transform:scale(1.04)
}
}
@media(max-width:920px) {
.site-header {
height:68px;
padding:0 18px
}
.site-header.centered {
justify-content:space-between;
gap:0
}
.brand span {
font-size:34px
}
.nav {
position:fixed;
top:0;
right:-100%;
width:min(84vw,360px);
height:100svh;
background:rgba(255,253,249,.96);
color:var(--ink);
flex-direction:column;
justify-content:center;
gap:27px;
transition:.4s;
box-shadow:-20px 0 50px rgba(0,0,0,.14);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px)
}
.nav.open {
right:0
}
.hamb {
display:block;
z-index:3
}
.hamb.open {
color:var(--ink)
}
.hamb.open span:nth-child(1) {
transform:translateY(7px) rotate(45deg)
}
.hamb.open span:nth-child(2) {
opacity:0
}
.hamb.open span:nth-child(3) {
transform:translateY(-7px) rotate(-45deg)
}
.section {
padding:78px 20px
}
.count-grid strong {
font-size:36px
}
.count-grid div {
padding:20px 5px
}
.dress-grid {
grid-template-columns:1fr
}
.dress-grid article {
padding:46px 24px
}
.timeline:before,.timeline:after {
left:15px
}
.timeline-item {
grid-template-columns:32px 1fr;
gap:0
}
.timeline-item time {
grid-column:2;
text-align:left;
margin-bottom:4px
}
.timeline-dot {
grid-column:1;
grid-row:1/3
}
.timeline-item>div:last-child {
grid-column:2
}
.custom-inner {
grid-template-columns:1fr;
gap:30px
}
.envelope-scene {
height:78vh
}
.envelope {
width:96%;
height:38%;
bottom:13%
}
.envelope-card {
width:80%;
top:8%;
padding:34px 22px 70px
}
.audio-button {
right:16px;
bottom:16px;
width:53px;
height:53px
}
}
/* ===== v2.3 — portada/sobre estable, un solo sistema ===== */ html,body {
min-height:100%;
width:100%
}
html {
overflow-y:scroll
}
body {
overflow-x:hidden;
overflow-y:auto
}
body.cover-active {
overflow:hidden!important;
height:100vh
}
/* Menú de escritorio: siempre fijo, visible y con cristal/blur */ .site-header {
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
z-index:5000!important;
transform:none!important;
visibility:visible!important;
opacity:1!important;
background:rgba(28,23,19,.34)!important;
border-bottom:1px solid rgba(255,255,255,.13)!important;
backdrop-filter:saturate(135%) blur(10px)!important;
-webkit-backdrop-filter:saturate(135%) blur(10px)!important;
}
.site-header.scrolled {
background:color-mix(in srgb,var(--header-bg) calc(var(--header-alpha) * 100%), transparent)!important;
color:var(--ink)!important;
border-bottom:1px solid rgba(205,159,88,.20)!important;
box-shadow:0 10px 30px rgba(34,26,18,.10)!important;
backdrop-filter:saturate(140%) blur(var(--header-blur))!important;
-webkit-backdrop-filter:saturate(140%) blur(var(--header-blur))!important;
}
.site-header.centered .brand {
margin-left:auto
}
.site-header.centered .nav {
margin-right:auto
}
/* Nunca ocultar contenido por depender de JavaScript */ .reveal,.reveal.show,html.js-enhanced .reveal,html.js-enhanced .reveal.show {
opacity:1!important;
transform:none!important;
visibility:visible!important;
}
/* Portada */ .invitation-cover {
position:fixed!important;
inset:0!important;
z-index:10000!important;
display:grid!important;
place-items:center!important;
padding:24px!important;
overflow:auto!important;
background: radial-gradient(circle at 50% 38%,rgba(205,159,88,.19),transparent 27%), radial-gradient(circle at 50% 4%,#80674f 0,#382c23 43%,#17120f 78%,#0d0b09 100%)!important;
color:#fff!important;
text-align:center!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transition:opacity .55s ease,visibility .55s ease!important;
}
.invitation-cover.cover-night {
background:radial-gradient(circle at 50% 34%,rgba(205,159,88,.13),transparent 28%),linear-gradient(155deg,#322820,#0c0a08 76%)!important
}
.invitation-cover.cover-rose {
background:radial-gradient(circle at 50% 34%,rgba(221,174,167,.18),transparent 28%),linear-gradient(155deg,#6e504c,#1b1110 76%)!important
}
.invitation-cover::before {
content:"";
position:absolute;
inset:18px;
pointer-events:none;
border:1px solid rgba(205,159,88,.34);
box-shadow:inset 0 0 90px rgba(0,0,0,.18);
}
.invitation-cover.is-opening {
pointer-events:none!important
}
.invitation-cover.is-finished {
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important
}
.cover-ambient {
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden
}
.cover-ambient::before,.cover-ambient::after {
content:"";
position:absolute;
width:310px;
height:310px;
border:1px solid rgba(205,159,88,.10);
transform:rotate(45deg);
border-radius:28px
}
.cover-ambient::before {
left:-190px;
top:-190px
}
.cover-ambient::after {
right:-190px;
bottom:-190px
}
.envelope-stage {
position:relative;
z-index:1;
width:min(760px,100%);
min-height:min(760px,92svh);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:28px;
}
.envelope-title {
margin:0;
color:#eadac5;
text-transform:uppercase;
letter-spacing:5px;
font:500 10px/1.2 var(--body-font)
}
/* El sobre real */ .envelope-shell {
position:relative!important;
width:min(610px,89vw)!important;
height:390px!important;
min-height:390px!important;
perspective:1400px!important;
filter:drop-shadow(0 32px 35px rgba(0,0,0,.40));
isolation:isolate
}
.envelope-back {
position:absolute!important;
inset:58px 0 0!important;
z-index:1!important;
border:1px solid #b89568;
border-radius:4px 4px 8px 8px;
background:linear-gradient(150deg,#f1e5d3 0,#dbc6a7 48%,#c7aa82 100%)!important;
box-shadow:inset 0 0 28px rgba(105,72,37,.10)
}
.invitation-letter {
position:absolute!important;
z-index:2!important;
left:8%!important;
right:8%!important;
top:12px!important;
height:292px!important;
padding:34px 30px 76px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
background:linear-gradient(180deg,#fffefb,#f8f0e5)!important;
color:#44392f!important;
border:1px solid #ead7bc!important;
border-radius:4px!important;
box-shadow:0 12px 30px rgba(54,35,19,.18)!important;
transition:transform .92s cubic-bezier(.18,.84,.22,1),box-shadow .92s ease!important;
}
.invitation-letter::before {
content:"";
position:absolute;
inset:10px;
border:1px solid rgba(205,159,88,.34);
pointer-events:none
}
.invitation-letter>* {
position:relative;
z-index:1
}
.tiny-label {
margin:0 0 4px!important;
font-size:9px!important;
letter-spacing:3.2px!important;
text-transform:uppercase!important;
color:#8f775f!important
}
.cover-logo {
margin:6px auto!important;
font-family:var(--title-font)!important;
font-size:clamp(50px,8vw,82px)!important;
line-height:.95!important;
color:var(--gold)!important
}
.cover-logo img {
display:block!important;
max-width:175px!important;
max-height:100px!important;
margin:auto!important;
object-fit:contain!important
}
.cover-divider {
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
color:var(--gold)!important;
font-size:8px!important
}
.cover-divider i {
display:block!important;
width:58px!important;
height:1px!important;
background:currentColor!important;
opacity:.55!important
}
.cover-divider b {
font-weight:400!important
}
.letter-message {
max-width:390px!important;
margin:11px auto 0!important;
font:italic 18px/1.4 "Cormorant Garamond",serif!important;
color:#5b4d41!important
}
/* Bolsillos superpuestos: esto es lo que hace que visualmente sea un sobre */ .envelope-pocket-left,.envelope-pocket-right,.envelope-pocket-front,.envelope-flap {
position:absolute!important;
pointer-events:none!important
}
.envelope-pocket-left {
z-index:4!important;
left:0;
right:50%;
top:58px;
bottom:0;
background:linear-gradient(145deg,#ead9c0,#cdb18b)!important;
clip-path:polygon(0 0,100% 54%,100% 100%,0 100%)!important
}
.envelope-pocket-right {
z-index:4!important;
left:50%;
right:0;
top:58px;
bottom:0;
background:linear-gradient(215deg,#e4d1b5,#c4a276)!important;
clip-path:polygon(100% 0,0 54%,0 100%,100% 100%)!important
}
.envelope-pocket-front {
z-index:5!important;
left:0;
right:0;
top:58px;
bottom:0;
background:linear-gradient(170deg,#ebddc8,#c8a87d)!important;
clip-path:polygon(0 42%,50% 100%,100% 42%,100% 100%,0 100%)!important
}
.envelope-flap {
z-index:6!important;
left:0;
right:0;
top:58px;
height:218px;
background:linear-gradient(180deg,#f1e4d0,#cfb087)!important;
clip-path:polygon(0 0,50% 72%,100% 0)!important;
transform-origin:50% 0!important;
backface-visibility:hidden!important;
filter:drop-shadow(0 5px 4px rgba(64,41,20,.14));
transition:transform .72s cubic-bezier(.2,.72,.2,1),z-index 0s linear .36s!important
}
.wax-seal {
appearance:none!important;
-webkit-appearance:none!important;
position:absolute!important;
z-index:8!important;
left:50%!important;
top:188px!important;
transform:translate(-50%,-50%)!important;
display:grid!important;
place-items:center!important;
width:82px!important;
height:82px!important;
padding:0!important;
margin:0!important;
border-radius:50%!important;
border:4px double rgba(255,229,187,.68)!important;
background:radial-gradient(circle at 34% 27%,#e7c781 0,var(--gold) 45%,#8d602c 100%)!important;
color:#fff!important;
box-shadow:0 10px 22px rgba(53,31,10,.42),inset 0 0 0 3px rgba(113,72,24,.18)!important;
font:27px/1 Georgia,serif!important;
cursor:pointer!important;
transition:transform .25s ease,opacity .28s ease!important
}
.wax-seal:hover,.wax-seal:focus-visible {
transform:translate(-50%,-50%) scale(1.08)!important;
outline:2px solid rgba(255,255,255,.55);
outline-offset:4px
}
.open-hint {
appearance:none!important;
-webkit-appearance:none!important;
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
padding:13px 21px!important;
margin:0!important;
border:1px solid rgba(238,221,197,.33)!important;
border-radius:999px!important;
background:rgba(255,255,255,.075)!important;
color:#f5eadb!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
box-shadow:0 8px 28px rgba(0,0,0,.12)!important;
text-transform:uppercase!important;
letter-spacing:2.7px!important;
font:600 10px/1 var(--body-font)!important;
cursor:pointer!important
}
.open-hint span {
color:var(--gold)!important;
font-size:13px!important
}
.invitation-cover.is-opening .envelope-flap {
transform:rotateX(180deg)!important;
z-index:1!important
}
.invitation-cover.is-opening .invitation-letter {
transform:translateY(-68px) scale(1.018)!important;
box-shadow:0 28px 55px rgba(35,22,10,.26)!important
}
.invitation-cover.is-opening .wax-seal {
opacity:0!important;
transform:translate(-50%,-50%) scale(.5)!important
}
.invitation-cover.is-opening .open-hint {
opacity:.42!important
}
/* El hero empieza debajo del header, pero el header jamás desaparece */ main {
display:block!important;
overflow:visible!important
}
section[id] {
scroll-margin-top:86px
}
.hero {
min-height:100svh!important
}
@media(max-width:920px) {
.site-header {
height:68px!important;
padding:0 18px!important
}
.site-header.centered {
justify-content:space-between!important;
gap:0!important
}
.site-header.centered .brand {
margin-left:0!important
}
.site-header.centered .nav {
margin-right:0!important
}
.nav {
z-index:2
}
.section {
padding:78px 20px
}
}
@media(max-width:640px) {
.invitation-cover {
padding:14px!important
}
.invitation-cover::before {
inset:9px
}
.envelope-stage {
min-height:92svh;
gap:22px
}
.envelope-shell {
width:94vw!important;
height:310px!important;
min-height:310px!important
}
.envelope-back {
inset:48px 0 0!important
}
.invitation-letter {
left:7%!important;
right:7%!important;
top:7px!important;
height:240px!important;
padding:24px 18px 60px!important
}
.envelope-pocket-left,.envelope-pocket-right,.envelope-pocket-front {
top:48px
}
.envelope-flap {
top:48px;
height:178px
}
.wax-seal {
top:153px!important;
width:68px!important;
height:68px!important;
font-size:22px!important
}
.cover-logo {
font-size:clamp(43px,14vw,67px)!important
}
.letter-message {
font-size:15.5px!important;
line-height:1.32!important;
max-width:290px!important
}
.envelope-title {
font-size:8px;
letter-spacing:3.5px
}
.open-hint {
font-size:9px!important;
letter-spacing:2px!important
}
}
@media(prefers-reduced-motion:reduce) {
.invitation-cover,.invitation-letter,.envelope-flap,.wax-seal {
transition:none!important
}
}
/* === v2.4: RSVP, transiciones y plantillas === */ .passes-field {
display:grid;
gap:12px
}
.passes-field>label {
display:grid;
gap:7px
}
.passes-field select {
width:100%;
padding:14px 16px;
border:1px solid #ded4c7;
background:#fff;
color:var(--ink);
font:inherit
}
.passes-granted {
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:2px 18px;
padding:16px 18px;
border:1px solid color-mix(in srgb,var(--gold) 38%,#e8ded2);
background:color-mix(in srgb,var(--gold) 8%,#fff);
border-radius:12px
}
.passes-granted span {
text-transform:uppercase;
letter-spacing:1.8px;
font-size:10px;
color:#7d6c58
}
.passes-granted strong {
grid-row:1/3;
grid-column:2;
font:500 34px/1 "Cormorant Garamond",serif;
color:var(--gold)
}
.passes-granted p {
margin:2px 0 0;
font-size:12px;
color:#75695e
}
.passes-granted.open-mode {
background:#f7f4ef
}
/* La animación solo se activa después de que JS haya preparado esa sección; sin JS todo queda visible. */ .section.motion-pending .reveal {
opacity:0!important;
transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.25,1)!important;
will-change:opacity,transform
}
.section.motion-pending[data-motion="fade-up"] .reveal {
transform:translateY(34px)!important
}
.section.motion-pending[data-motion="fade"] .reveal {
transform:none!important
}
.section.motion-pending[data-motion="slide-left"] .reveal {
transform:translateX(-46px)!important
}
.section.motion-pending[data-motion="slide-right"] .reveal {
transform:translateX(46px)!important
}
.section.motion-pending[data-motion="zoom"] .reveal {
transform:scale(.965)!important
}
.section.motion-show .reveal {
opacity:1!important;
transform:none!important
}
.section.motion-pending .reveal:nth-child(2) {
transition-delay:.08s!important
}
.section.motion-pending .reveal:nth-child(3) {
transition-delay:.14s!important
}
.section.motion-pending .reveal:nth-child(4) {
transition-delay:.2s!important
}
@media(prefers-reduced-motion:reduce) {
.section.motion-pending .reveal,.section.motion-show .reveal {
opacity:1!important;
transform:none!important;
transition:none!important
}
}
/* Plantillas visuales: conservan estructura pero cambian personalidad */ body.template-luxury {
--paper:#171411;
--surface:#211c18;
--ink:#f4ede4;
background:#171411;
color:#f4ede4
}
body.template-luxury .story,body.template-luxury .gifts,body.template-luxury .faq {
background:#1c1815;
color:#f4ede4
}
body.template-luxury .date-section,body.template-luxury .timeline-section {
background:#241e19;
color:#f4ede4
}
body.template-luxury .eyebrow.dark {
color:#c7ae8b
}
body.template-luxury .venue-card,body.template-luxury .rsvp-card {
background:#211c18;
color:#f4ede4;
border-color:rgba(205,159,88,.32)
}
body.template-romantic .section {
position:relative
}
body.template-romantic .date-section,body.template-romantic .timeline-section {
background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 32%,#fff),#fffaf9)
}
body.template-romantic .script-title {
letter-spacing:.01em
}
body.template-modern .script-title,body.template-modern .brand span {
font-family:"Playfair Display",serif!important
}
body.template-modern .section {
padding-top:90px;
padding-bottom:90px
}
body.template-modern .venue-card,body.template-modern .rsvp-card {
border-radius:18px
}
.template-modern .btn {
border-radius:999px
}
body.template-celebration .hero:after {
content:"✦ ✧ ✦";
position:absolute;
z-index:3;
top:115px;
left:50%;
transform:translateX(-50%);
color:var(--gold);
letter-spacing:12px;
opacity:.8
}
body.template-celebration .date-section {
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 28%,#fff),#fff)
}
body.event-xv.template-classic .hero-content .eyebrow:before {
content:"✦ ";
color:var(--gold)
}
body.event-birthday.template-classic .hero h1 {
font-size:clamp(68px,10vw,132px)
}
body.event-graduation.template-classic .hero-text {
letter-spacing:.02em
}
/* === v2.5: menu glass configurable, recuerdos, video y plantillas realmente distintas === */ .site-header.scrolled {
background:color-mix(in srgb,var(--header-bg) calc(var(--header-alpha) * 100%),transparent)!important
}
.memories {
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 18%,#fff),var(--paper));
text-align:center
}
.memories-card {
max-width:820px;
margin:auto;
padding:clamp(38px,7vw,82px);
border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
position:relative
}
.memories-card:before,.memories-card:after {
content:"✦";
position:absolute;
color:var(--gold);
font-size:18px
}
.memories-card:before {
top:18px;
left:20px
}
.memories-card:after {
bottom:18px;
right:20px
}
.memory-hashtag {
display:block;
font:400 clamp(42px,7vw,76px)/1 var(--title-font);
color:var(--gold);
overflow-wrap:anywhere;
margin:22px 0
}
.video-section {
background:var(--paper)
}
.video-frame {
max-width:1050px;
aspect-ratio:16/9;
margin:auto;
border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
box-shadow:0 28px 70px rgba(30,20,10,.14);
overflow:hidden;
background:#111
}
.video-frame iframe,.video-frame video {
width:100%;
height:100%;
border:0;
display:block;
object-fit:contain
}
/* Jardín: orgánico, aireado, tarjetas redondeadas y acentos botánicos */ body.template-garden {
--paper:#f7f6ef;
--surface:#fff;
--ink:#344036;
background:#f7f6ef
}
body.template-garden .hero-overlay {
background:#26372d!important
}
body.template-garden .section {
position:relative
}
body.template-garden .date-section,body.template-garden .memories {
background:linear-gradient(135deg,#edf1e7,#fffdf7)
}
body.template-garden .venue-card,body.template-garden .rsvp-card,body.template-garden .memories-card {
border-radius:34px;
border-color:rgba(90,112,78,.25);
box-shadow:0 24px 70px rgba(50,70,45,.09)
}
body.template-garden .script-title {
font-family:"Parisienne",cursive!important
}
body.template-garden .btn {
border-radius:999px
}
body.template-garden .story:before {
content:"❦";
display:block;
text-align:center;
font-size:46px;
color:var(--gold);
margin-bottom:-40px
}
/* Editorial: líneas duras, composición tipográfica y mucho espacio */ body.template-editorial {
--paper:#f4f1ea;
--surface:#fff;
--ink:#151515
}
body.template-editorial .script-title,body.template-editorial .brand span {
font-family:"Playfair Display",serif!important;
font-style:italic
}
body.template-editorial .section {
padding-top:135px;
padding-bottom:135px
}
body.template-editorial .section-head {
text-align:left;
margin-left:max(0px,calc((100% - 1050px)/2));
margin-right:auto
}
body.template-editorial .venue-card,body.template-editorial .rsvp-card,body.template-editorial .memories-card {
border-radius:0;
box-shadow:none;
border:1px solid #222
}
body.template-editorial .btn {
border-radius:0;
text-transform:uppercase;
letter-spacing:2px
}
body.template-editorial .date-section {
background:#e8e2d7
}
body.template-editorial .story {
background:#fff
}
body.template-editorial .hero h1 {
text-transform:none;
font-size:clamp(78px,14vw,175px)
}
/* Celestial: oscuro, luminoso y dramático */ body.template-celestial {
--paper:#0d101a;
--surface:#151927;
--ink:#f5efe5;
background:#0d101a;
color:#f5efe5
}
body.template-celestial .hero-overlay {
background:#080b15!important
}
body.template-celestial .section {
background:#0d101a;
color:#f5efe5
}
body.template-celestial .date-section,body.template-celestial .memories {
background:radial-gradient(circle at 50% 0,#25243a,#0d101a 62%)
}
body.template-celestial .eyebrow.dark {
color:#d9cbb5
}
body.template-celestial .venue-card,body.template-celestial .rsvp-card,body.template-celestial .memories-card {
background:rgba(20,24,38,.84);
color:#f5efe5;
border-color:rgba(205,159,88,.32);
box-shadow:0 30px 90px rgba(0,0,0,.35)
}
body.template-celestial .hero:after {
content:"✦ · ✧ · ✦";
position:absolute;
top:110px;
z-index:3;
color:var(--gold);
letter-spacing:14px
}
body.template-celestial footer {
background:#080a11
}
@media(max-width:920px) {
body.template-editorial .section-head {
text-align:center;
margin-left:auto
}
.video-frame {
aspect-ratio:16/10
}
}
.site-header.scrolled {
color:var(--header-text)!important
}
/* =========================================================
v2.6 — fondos globales y familias visuales de plantillas
Los colores siempre proceden del panel. La plantilla define
geometría, composición, adornos y atmósfera, no bloquea la paleta.
========================================================= */ body[class*="template-"] {
--paper:var(--user-paper)!important;
--surface:var(--user-surface)!important;
--ink:var(--user-ink)!important;
background:var(--paper);
color:var(--ink)
}
body.background-solid {
background:var(--paper)!important
}
body.background-gradient {
background:var(--page-gradient)!important;
background-attachment:fixed!important
}
body.background-image {
background:var(--paper)!important;
position:relative
}
body.background-image:before {
content:"";
position:fixed;
inset:0;
z-index:-3;
background-image:var(--page-bg-image);
background-position:var(--page-bg-position);
background-size:var(--page-bg-size);
background-repeat:no-repeat;
}
body.background-image:after {
content:"";
position:fixed;
inset:0;
z-index:-2;
background:rgba(0,0,0,var(--page-bg-overlay));
pointer-events:none
}
body.background-gradient main>.section:not(.hero),body.background-image main>.section:not(.hero),body.background-solid main>.section:not(.hero) {
background:color-mix(in srgb,var(--paper) 88%,transparent)!important;
backdrop-filter:blur(2px)
}
body.background-image .site-footer,body.background-gradient .site-footer {
background:color-mix(in srgb,var(--ink) 92%,transparent)!important
}
/* Base para adornos configurables por plantilla */ body[class*="template-"] .venue-card,body[class*="template-"] .rsvp-card,body[class*="template-"] .memories-card,body[class*="template-"] .custom-card {
background:var(--surface);
color:var(--ink)
}
body[class*="template-"] .section-head {
position:relative
}
body[class*="template-"] .section-head:before,body[class*="template-"] .section-head:after {
pointer-events:none
}
/* 1 · CLÁSICA — simetría, filetes finos y esquinas cuadradas */ body.template-classic .section-head:after {
content:"◆";
display:block;
color:var(--gold);
font-size:12px;
margin:15px auto 0
}
body.template-classic .venue-card,body.template-classic .rsvp-card,body.template-classic .memories-card {
border-radius:2px!important;
border:1px solid color-mix(in srgb,var(--gold) 38%,transparent)!important;
outline:1px solid color-mix(in srgb,var(--gold) 15%,transparent);
outline-offset:-8px
}
body.template-classic .btn {
border-radius:2px!important
}
body.template-classic .date-section {
background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--secondary) 18%,var(--paper)))!important
}
/* 2 · LUJO NOCTURNO — marcos metálicos y composición oscura */ body.template-luxury {
background:var(--paper)!important;
color:var(--ink)!important
}
body.template-luxury .section:not(.hero) {
background:var(--paper)!important;
color:var(--ink)!important
}
body.template-luxury .section:nth-of-type(even):not(.hero) {
background:color-mix(in srgb,var(--surface) 72%,var(--paper))!important
}
body.template-luxury .venue-card,body.template-luxury .rsvp-card,body.template-luxury .memories-card {
border-radius:0!important;
border:1px solid var(--gold)!important;
box-shadow:0 0 0 7px var(--surface),0 0 0 8px color-mix(in srgb,var(--gold) 45%,transparent),0 30px 90px rgba(0,0,0,.28)!important
}
body.template-luxury .section-head:before {
content:"✦ ───── ✦";
display:block;
color:var(--gold);
letter-spacing:5px;
margin-bottom:12px
}
body.template-luxury .btn {
border-radius:0!important;
letter-spacing:2px;
text-transform:uppercase
}
/* 3 · ROMÁNTICA EDITORIAL — curvas, flores y tarjetas suaves */ body.template-romantic .section:not(.hero) {
background:linear-gradient(165deg,var(--paper),color-mix(in srgb,var(--secondary) 18%,var(--paper)))!important
}
body.template-romantic .section-head:before {
content:"❧";
display:block;
font:46px/1 var(--title-font);
color:var(--gold);
margin-bottom:5px
}
body.template-romantic .venue-card,body.template-romantic .rsvp-card,body.template-romantic .memories-card {
border-radius:42px 8px 42px 8px!important;
border:1px solid color-mix(in srgb,var(--gold) 26%,transparent)!important;
box-shadow:0 24px 65px color-mix(in srgb,var(--secondary) 25%,transparent)!important
}
body.template-romantic .btn {
border-radius:999px!important
}
body.template-romantic .gallery img {
border-radius:120px 120px 18px 18px
}
/* 4 · MINIMAL MODERNA — bloques, líneas y casi sin ornamento */ body.template-modern .ornament,body.template-modern .section-head:before,body.template-modern .section-head:after {
display:none!important
}
body.template-modern .section {
padding-top:110px!important;
padding-bottom:110px!important
}
body.template-modern .section-head {
text-align:left!important;
border-left:5px solid var(--gold);
padding-left:24px;
max-width:1050px;
margin-left:auto;
margin-right:auto
}
body.template-modern .script-title {
font-family:"Playfair Display",serif!important;
font-weight:500!important;
letter-spacing:-.025em!important
}
body.template-modern .venue-card,body.template-modern .rsvp-card,body.template-modern .memories-card {
border-radius:0!important;
border:0!important;
border-top:5px solid var(--gold)!important;
box-shadow:0 18px 50px rgba(0,0,0,.07)!important
}
body.template-modern .btn {
border-radius:0!important;
text-transform:uppercase;
letter-spacing:2.2px
}
/* 5 · CELEBRACIÓN / XV — estrellas, cápsulas y energía */ body.template-celebration .section-head:before {
content:"✦ ✧ ✦";
display:block;
color:var(--gold);
font-size:20px;
letter-spacing:12px;
margin-bottom:10px
}
body.template-celebration .venue-card,body.template-celebration .rsvp-card,body.template-celebration .memories-card {
border-radius:28px!important;
border:2px solid color-mix(in srgb,var(--gold) 25%,transparent)!important;
box-shadow:0 18px 0 color-mix(in srgb,var(--secondary) 20%,transparent),0 30px 70px rgba(0,0,0,.08)!important
}
body.template-celebration .btn {
border-radius:999px!important;
box-shadow:0 7px 0 color-mix(in srgb,var(--gold) 70%,#000)
}
body.template-celebration .date-section {
background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--secondary) 35%,var(--paper)),var(--paper) 68%)!important
}
/* 6 · JARDÍN BOTÁNICO — formas orgánicas, hojas y bordes verdes */ body.template-garden .section-head:before {
content:"❦ ❧";
display:block;
color:var(--gold);
font-size:30px;
letter-spacing:18px;
margin-bottom:12px
}
body.template-garden .venue-card,body.template-garden .rsvp-card,body.template-garden .memories-card {
border-radius:58px 18px 58px 18px!important;
border:1px solid color-mix(in srgb,var(--gold) 25%,transparent)!important;
box-shadow:0 26px 70px color-mix(in srgb,var(--gold) 12%,transparent)!important
}
body.template-garden .section:nth-of-type(even):not(.hero) {
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 25%,var(--paper)),var(--paper))!important
}
body.template-garden .btn {
border-radius:999px!important
}
body.template-garden .gallery img {
border-radius:50% 50% 12px 12px
}
/* 7 · EDITORIAL — asimetría, cuadrícula y bordes negros */ body.template-editorial .section {
padding-top:135px!important;
padding-bottom:135px!important
}
body.template-editorial .section-head {
text-align:left!important;
margin-left:max(24px,calc((100% - 1080px)/2));
margin-right:auto;
max-width:720px;
border-bottom:2px solid var(--ink);
padding-bottom:22px
}
body.template-editorial .section-head:after {
content:"VOL. / EVENT";
position:absolute;
right:0;
bottom:8px;
font-size:9px;
letter-spacing:2px;
color:var(--gold)
}
body.template-editorial .venue-card,body.template-editorial .rsvp-card,body.template-editorial .memories-card {
border-radius:0!important;
border:2px solid var(--ink)!important;
box-shadow:12px 12px 0 var(--secondary)!important
}
body.template-editorial .btn {
border-radius:0!important;
text-transform:uppercase;
letter-spacing:2px
}
body.template-editorial .script-title {
font-family:"Playfair Display",serif!important;
font-style:italic!important
}
/* 8 · NOCHE CELESTIAL — halos, estrellas y tarjetas de cristal */ body.template-celestial {
background:var(--paper)!important;
color:var(--ink)!important
}
body.template-celestial .section:not(.hero) {
background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--secondary) 22%,var(--paper)),var(--paper) 60%)!important;
color:var(--ink)!important
}
body.template-celestial .section-head:before {
content:"✦ · ✧ · ✦";
display:block;
color:var(--gold);
letter-spacing:11px;
margin-bottom:13px;
text-shadow:0 0 18px var(--gold)
}
body.template-celestial .venue-card,body.template-celestial .rsvp-card,body.template-celestial .memories-card {
border-radius:20px!important;
background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)!important;
backdrop-filter:blur(15px);
box-shadow:0 0 40px color-mix(in srgb,var(--gold) 10%,transparent),0 35px 90px rgba(0,0,0,.28)!important
}
body.template-celestial .btn {
border-radius:999px!important;
box-shadow:0 0 22px color-mix(in srgb,var(--gold) 30%,transparent)
}
/* 9 · ART DÉCO — geometría, oro, cortes en esquina */ body.template-artdeco .section-head:before {
content:"◇ ━━━ ◇ ━━━ ◇";
display:block;
color:var(--gold);
letter-spacing:5px;
margin-bottom:16px
}
body.template-artdeco .venue-card,body.template-artdeco .rsvp-card,body.template-artdeco .memories-card {
border-radius:0!important;
border:2px solid var(--gold)!important;
clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
box-shadow:inset 0 0 0 7px var(--surface)!important
}
body.template-artdeco .section:nth-of-type(even):not(.hero) {
background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--secondary) 24%,var(--paper)))!important
}
body.template-artdeco .btn {
border-radius:0!important;
clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
text-transform:uppercase;
letter-spacing:2px
}
/* 10 · HACIENDA — arcos, tierra y detalles artesanales */ body.template-hacienda .section-head:before {
content:"✤";
display:block;
color:var(--gold);
font-size:32px;
margin-bottom:8px
}
body.template-hacienda .venue-card,body.template-hacienda .rsvp-card,body.template-hacienda .memories-card {
border-radius:90px 90px 22px 22px!important;
border:2px solid color-mix(in srgb,var(--gold) 48%,transparent)!important;
box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 28%,transparent),0 30px 70px rgba(80,45,25,.10)!important
}
body.template-hacienda .date-section,body.template-hacienda .timeline-section {
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 28%,var(--paper)),var(--paper))!important
}
body.template-hacienda .btn {
border-radius:7px!important;
border:2px solid var(--gold)!important
}
body.template-hacienda .gallery img {
border-radius:80px 80px 10px 10px
}
/* 11 · ACUARELA — manchas suaves y esquinas irregulares */ body.template-watercolor .section {
position:relative;
overflow:hidden
}
body.template-watercolor .section:before {
content:"";
position:absolute;
width:240px;
height:180px;
border-radius:44% 56% 66% 34%/54% 38% 62% 46%;
background:color-mix(in srgb,var(--secondary) 28%,transparent);
filter:blur(18px);
top:25px;
right:-80px;
z-index:0;
pointer-events:none
}
body.template-watercolor .section>* {
position:relative;
z-index:1
}
body.template-watercolor .section-head:before {
content:"· ❀ ·";
display:block;
color:var(--gold);
font-size:26px;
letter-spacing:12px
}
body.template-watercolor .venue-card,body.template-watercolor .rsvp-card,body.template-watercolor .memories-card {
border-radius:38px 55px 31px 49px!important;
border:1px solid color-mix(in srgb,var(--gold) 22%,transparent)!important;
box-shadow:0 25px 70px color-mix(in srgb,var(--secondary) 25%,transparent)!important
}
body.template-watercolor .btn {
border-radius:999px!important
}
/* 12 · MÁRMOL & CHAMPAGNE — bisel, líneas finas, lujo claro */ body.template-marble .section:not(.hero) {
background:linear-gradient(120deg,var(--paper) 0%,color-mix(in srgb,var(--secondary) 13%,var(--paper)) 35%,var(--paper) 58%,color-mix(in srgb,var(--secondary) 10%,var(--paper)) 100%)!important
}
body.template-marble .section-head:before {
content:"— ◇ —";
display:block;
color:var(--gold);
letter-spacing:8px;
margin-bottom:14px
}
body.template-marble .venue-card,body.template-marble .rsvp-card,body.template-marble .memories-card {
border-radius:14px!important;
border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)!important;
box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px color-mix(in srgb,var(--gold) 18%,transparent),0 30px 80px rgba(70,60,45,.10)!important
}
body.template-marble .btn {
border-radius:4px!important;
letter-spacing:1.5px
}
@media(max-width:760px) {
body.template-editorial .section-head {
margin-left:0;
text-align:left!important
}
body.template-editorial .section-head:after {
position:static;
display:block;
margin-top:12px
}
body.template-modern .section-head {
margin-left:0;
margin-right:0
}
body.template-hacienda .venue-card,body.template-hacienda .rsvp-card,body.template-hacienda .memories-card {
border-radius:52px 52px 18px 18px!important
}
}
/* === v2.7: plantillas editables, carta recordada y animaciones reales === */ .skip-cover .invitation-cover {
display:none!important
}
.section {
padding-top:var(--section-space)!important;
padding-bottom:var(--section-space)!important
}
:root {
--ornament-color:var(--gold)
}
.section-head:before,.section-head:after,.ornament,.venue-icon,.line-icon,.timeline-item h3,.timeline-item time,.memory-hashtag {
color:var(--ornament-color)!important
}
/* Las paletas del panel siempre mandan sobre colores internos de la plantilla. */ body.template-luxury {
--paper:var(--user-paper)!important;
--surface:var(--user-surface)!important;
--ink:var(--user-ink)!important;
background:var(--paper)!important;
color:var(--ink)!important
}
body[class*="template-"] .story,body[class*="template-"] .gifts,body[class*="template-"] .faq {
color:var(--ink)
}
body[class*="template-"] .venue-card,body[class*="template-"] .rsvp-card,body[class*="template-"] .memories-card {
color:var(--ink);
background:color-mix(in srgb,var(--surface) 94%,transparent)
}
/* Personalización global de esquinas. Se declara al final para prevalecer sobre el preset. */ body.corner-soft .venue-card,body.corner-soft .rsvp-card,body.corner-soft .memories-card,body.corner-soft .video-frame,body.corner-soft .custom-inner {
border-radius:22px!important;
clip-path:none!important
}
body.corner-round .venue-card,body.corner-round .rsvp-card,body.corner-round .memories-card,body.corner-round .video-frame,body.corner-round .custom-inner {
border-radius:48px!important;
clip-path:none!important
}
body.corner-square .venue-card,body.corner-square .rsvp-card,body.corner-square .memories-card,body.corner-square .video-frame,body.corner-square .custom-inner {
border-radius:0!important;
clip-path:none!important
}
body.corner-arch .venue-card,body.corner-arch .rsvp-card,body.corner-arch .memories-card,body.corner-arch .custom-inner {
border-radius:90px 90px 20px 20px!important;
clip-path:none!important
}
body.corner-cut .venue-card,body.corner-cut .rsvp-card,body.corner-cut .memories-card,body.corner-cut .custom-inner {
border-radius:0!important;
clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)!important
}
body.corner-organic .venue-card,body.corner-organic .rsvp-card,body.corner-organic .memories-card,body.corner-organic .custom-inner {
border-radius:42px 18px 55px 24px!important;
clip-path:none!important
}
body.decor-subtle .section-head:before,body.decor-subtle .section-head:after {
opacity:.38!important
}
body.decor-normal .section-head:before,body.decor-normal .section-head:after {
opacity:.78!important
}
body.decor-epic .section-head:before,body.decor-epic .section-head:after {
opacity:1!important;
filter:drop-shadow(0 0 14px color-mix(in srgb,var(--ornament-color) 30%,transparent))
}
/* Animación visible y reversible de la sección completa. Solo se activa cuando JS añade motion-enabled. */ html.motion-enabled .section.motion-ready {
opacity:0;
transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .8s ease;
will-change:opacity,transform,filter
}
html.motion-enabled .section.motion-ready[data-motion="fade-up"] {
transform:translateY(56px)
}
html.motion-enabled .section.motion-ready[data-motion="fade"] {
transform:none
}
html.motion-enabled .section.motion-ready[data-motion="slide-left"] {
transform:translateX(-72px)
}
html.motion-enabled .section.motion-ready[data-motion="slide-right"] {
transform:translateX(72px)
}
html.motion-enabled .section.motion-ready[data-motion="zoom"] {
transform:scale(.92);
filter:blur(3px)
}
html.motion-enabled .section.motion-ready.motion-visible {
opacity:1;
transform:none;
filter:none
}
html.motion-enabled .section.motion-ready.motion-hidden {
opacity:0
}
@media(prefers-reduced-motion:reduce) {
html.motion-enabled .section.motion-ready {
opacity:1!important;
transform:none!important;
filter:none!important;
transition:none!important
}
}
/* Temática: Academia mágica. Motivos originales de pergamino, constelaciones y biblioteca. */ body.template-magic-academy .section:not(.hero) {
background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--secondary) 18%,transparent),transparent 24%),linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--secondary) 12%,var(--paper)))!important
}
body.template-magic-academy .section-head:before {
content:"✦ ☾ ✧ ☽ ✦";
display:block;
color:var(--ornament-color);
font-size:22px;
letter-spacing:13px;
margin-bottom:13px
}
body.template-magic-academy .venue-card,body.template-magic-academy .rsvp-card,body.template-magic-academy .memories-card {
border:1px solid var(--ornament-color)!important;
box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--surface) 88%,transparent),inset 0 0 0 8px color-mix(in srgb,var(--ornament-color) 32%,transparent),0 30px 80px rgba(0,0,0,.14)!important
}
body.template-magic-academy .btn {
border-radius:4px!important;
letter-spacing:2.4px;
text-transform:uppercase
}
body.template-magic-academy .date-card:before {
content:"✦"
}
/* Temática: energía anime. Geometría dinámica, rayos y círculos de energía; sin personajes ni assets protegidos. */ body.template-energy-anime .section:not(.hero) {
background:linear-gradient(118deg,var(--paper) 0 48%,color-mix(in srgb,var(--secondary) 22%,var(--paper)) 48% 52%,var(--paper) 52%)!important
}
body.template-energy-anime .section-head:before {
content:"◢ ◉ ◣";
display:block;
color:var(--ornament-color);
font-size:25px;
letter-spacing:15px;
margin-bottom:12px
}
body.template-energy-anime .venue-card,body.template-energy-anime .rsvp-card,body.template-energy-anime .memories-card {
border:3px solid var(--ornament-color)!important;
border-radius:8px!important;
box-shadow:10px 10px 0 color-mix(in srgb,var(--secondary) 55%,transparent),0 28px 70px rgba(0,0,0,.12)!important
}
body.template-energy-anime .btn {
clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
border-radius:0!important;
font-weight:700
}
body.template-energy-anime .script-title {
font-family:"Montserrat",sans-serif!important;
font-weight:700!important;
text-transform:uppercase;
letter-spacing:-.04em
}
/* Temática: bosque encantado. */ body.template-enchanted-forest .section:not(.hero) {
background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--secondary) 24%,transparent),transparent 30%),radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 32%),var(--paper)!important
}
body.template-enchanted-forest .section-head:before {
content:"❦ ✧ ❧";
display:block;
color:var(--ornament-color);
font-size:32px;
letter-spacing:14px;
margin-bottom:10px
}
body.template-enchanted-forest .venue-card,body.template-enchanted-forest .rsvp-card,body.template-enchanted-forest .memories-card {
border-radius:54px 18px 54px 18px!important;
border:1px solid color-mix(in srgb,var(--ornament-color) 45%,transparent)!important;
box-shadow:0 25px 80px color-mix(in srgb,var(--secondary) 22%,transparent)!important
}
body.template-enchanted-forest .btn {
border-radius:999px!important
}
/* Temática: luna gótica. */ body.template-gothic-moon .section:not(.hero) {
background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--secondary) 30%,transparent),transparent 42%),var(--paper)!important
}
body.template-gothic-moon .section-head:before {
content:"☾ ✦ ◇ ✦ ☽";
display:block;
color:var(--ornament-color);
font-size:25px;
letter-spacing:12px;
margin-bottom:12px;
text-shadow:0 0 18px color-mix(in srgb,var(--ornament-color) 60%,transparent)
}
body.template-gothic-moon .venue-card,body.template-gothic-moon .rsvp-card,body.template-gothic-moon .memories-card {
border:1px solid color-mix(in srgb,var(--ornament-color) 60%,transparent)!important;
background:color-mix(in srgb,var(--surface) 84%,transparent)!important;
backdrop-filter:blur(14px);
box-shadow:0 0 40px color-mix(in srgb,var(--ornament-color) 12%,transparent),0 35px 90px rgba(0,0,0,.24)!important
}
body.template-gothic-moon .btn {
border-radius:999px!important;
box-shadow:0 0 22px color-mix(in srgb,var(--ornament-color) 30%,transparent)
}
/* Tipo de evento sí aporta personalidad pública, sin impedir la personalización. */ body.event-xv .hero-content:before {
content:"✦ XV ✦";
display:block;
color:var(--ornament-color);
letter-spacing:8px;
font-size:11px;
margin-bottom:18px
}
body.event-graduation .hero-content:before {
content:"✦ LOGRO ✦";
display:block;
color:var(--ornament-color);
letter-spacing:7px;
font-size:10px;
margin-bottom:18px
}
body.event-birthday .hero-content:before {
content:"✦ CELEBREMOS ✦";
display:block;
color:var(--ornament-color);
letter-spacing:7px;
font-size:10px;
margin-bottom:18px
}
/* =========================================================
v2.8 — experiencia visual, plantillas premium y padrinos
========================================================= */ .template-ambient {
position:fixed;
inset:0;
pointer-events:none;
z-index:3;
overflow:hidden;
opacity:.65
}
.template-ambient i {
position:absolute;
width:5px;
height:5px;
border-radius:50%;
left:calc((var(--i) * 7.15% + 3%));
top:calc(var(--i) * 6.3% + 4%);
background:var(--ornament-color);
box-shadow:0 0 15px color-mix(in srgb,var(--ornament-color) 65%,transparent);
opacity:.15;
animation:ambientFloat calc(8s + var(--i)*.45s) ease-in-out infinite alternate;
animation-delay:calc(var(--i)*-.55s)
}
@keyframes ambientFloat {
from {
transform:translate3d(-8px,18px,0) scale(.7);
opacity:.08
}
50% {
opacity:.38
}
to {
transform:translate3d(14px,-22px,0) scale(1.35);
opacity:.12
}
}
@media(prefers-reduced-motion:reduce) {
.template-ambient {
display:none
}
.section-current:after {
animation:none!important
}
}
/* Spotlight de sección */ .has-section-spotlight main>.section {
isolation:isolate
}
.has-section-spotlight main>.section.section-current .section-head:before,.has-section-spotlight main>.section.section-current .script-title {
filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ornament-color) 38%,transparent));
transition:filter .7s ease
}
.has-section-spotlight main>.section.section-current {
--section-glow:color-mix(in srgb,var(--ornament-color) 8%,transparent)
}
/* Padrinos / personas especiales */ .godparents-special {
position:relative;
max-width:760px;
margin:58px auto 0;
padding:36px 34px 32px;
text-align:center;
background:color-mix(in srgb,var(--surface) 92%,transparent);
border:1px solid color-mix(in srgb,var(--ornament-color) 36%,transparent);
box-shadow:0 28px 75px rgba(30,20,12,.09);
overflow:hidden
}
.godparents-emblem {
width:56px;
height:56px;
margin:-64px auto 12px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--ornament-color);
color:var(--ornament-color);
font-size:20px;
box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.godparents-subtitle {
max-width:520px;
margin:0 auto 22px;
font-family:"Cormorant Garamond",serif;
font-size:17px;
font-style:italic;
opacity:.76
}
.godparents-names {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 14px
}
.godparent-name {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:180px;
padding:11px 18px;
border:1px solid color-mix(in srgb,var(--ornament-color) 28%,transparent);
background:color-mix(in srgb,var(--surface) 88%,transparent);
font-family:"Cormorant Garamond",serif;
font-size:20px;
letter-spacing:.02em
}
.godparents-ornament {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:24px auto 0;
color:var(--ornament-color)
}
.godparents-ornament i {
width:70px;
height:1px;
background:currentColor;
opacity:.45
}
.godparents-ornament b {
font-weight:400
}
/* Padrinos por plantilla */ body.template-classic .godparents-special {
border-radius:30px 30px 80px 80px;
background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--secondary) 18%,var(--surface)))
}
body.template-luxury .godparents-special {
border-radius:0;
border:1px solid var(--ornament-color);
box-shadow:inset 0 0 0 6px var(--surface),inset 0 0 0 7px color-mix(in srgb,var(--ornament-color) 30%,transparent),0 35px 90px rgba(0,0,0,.22)
}
body.template-luxury .godparent-name {
border-radius:0;
background:transparent
}
body.template-romantic .godparents-special,body.template-watercolor .godparents-special {
border-radius:45% 55% 42% 58%/18% 20% 18% 20%
}
.template-romantic .godparents-emblem,.template-watercolor .godparents-emblem {
border-radius:45% 55% 50% 50%
}
body.template-garden .godparents-special,body.template-enchanted-forest .godparents-special {
border-radius:70px 18px 70px 18px;
background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--secondary) 30%,transparent),transparent 45%),var(--surface)
}
body.template-garden .godparent-name,body.template-enchanted-forest .godparent-name {
border-radius:999px
}
body.template-editorial .godparents-special {
border-radius:0!important;
border:3px solid var(--ink);
box-shadow:14px 14px 0 var(--secondary)
}
body.template-editorial .godparents-names {
justify-content:flex-start
}
body.template-editorial .godparent-name {
border:0;
border-bottom:2px solid var(--ink);
justify-content:flex-start;
font-family:var(--body-font);
text-transform:uppercase;
font-size:13px;
letter-spacing:2px
}
body.template-celestial .godparents-special,body.template-gothic-moon .godparents-special,body.template-magic-academy .godparents-special {
background:color-mix(in srgb,var(--surface) 74%,transparent);
backdrop-filter:blur(18px);
border-color:color-mix(in srgb,var(--ornament-color) 55%,transparent);
box-shadow:0 0 55px color-mix(in srgb,var(--ornament-color) 13%,transparent),0 35px 90px rgba(0,0,0,.28)
}
body.template-celestial .godparent-name,body.template-gothic-moon .godparent-name,body.template-magic-academy .godparent-name {
border-radius:999px;
box-shadow:inset 0 0 18px color-mix(in srgb,var(--ornament-color) 8%,transparent)
}
body.template-artdeco .godparents-special {
border-radius:0;
clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);
border:3px solid var(--ornament-color)
}
body.template-artdeco .godparent-name {
clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%);
border-radius:0
}
body.template-hacienda .godparents-special {
border-radius:110px 110px 20px 20px;
border-width:2px
}
body.template-hacienda .godparent-name {
border-radius:40px 40px 8px 8px
}
body.template-energy-anime .godparents-special {
border-radius:8px;
border:3px solid var(--ornament-color);
box-shadow:10px 10px 0 var(--secondary)
}
body.template-energy-anime .godparent-name {
border-radius:0;
transform:skewX(-6deg);
font-family:var(--body-font);
font-weight:700;
text-transform:uppercase
}
/* Aurora Boreal */ body.template-aurora .section:not(.hero) {
background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 28%),radial-gradient(circle at 90% 0,color-mix(in srgb,var(--secondary) 26%,transparent),transparent 35%),var(--paper)!important
}
body.template-aurora .section-head:before {
content:"✧ ∿ ✦ ∿ ✧";
display:block;
color:var(--ornament-color);
letter-spacing:10px;
font-size:22px;
margin-bottom:13px;
text-shadow:0 0 22px color-mix(in srgb,var(--ornament-color) 65%,transparent)
}
body.template-aurora .venue-card,body.template-aurora .rsvp-card,body.template-aurora .memories-card,body.template-aurora .godparents-special {
border-radius:28px 70px 28px 70px!important;
border:1px solid color-mix(in srgb,var(--ornament-color) 48%,transparent)!important;
background:color-mix(in srgb,var(--surface) 78%,transparent)!important;
backdrop-filter:blur(18px);
box-shadow:0 30px 90px color-mix(in srgb,var(--secondary) 16%,transparent)!important
}
body.template-aurora .btn {
border-radius:999px!important
}
.template-aurora .template-ambient i {
width:90px;
height:2px;
border-radius:999px;
filter:blur(4px);
opacity:.16;
transform:rotate(-18deg)
}
/* Cine Real */ body.template-royal-cinema .section:not(.hero) {
background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 94%,#000) 0 7%,var(--paper) 7% 93%,color-mix(in srgb,var(--paper) 94%,#000) 93% 100%)!important
}
body.template-royal-cinema .section-head:before {
content:"◆ PREMIERE ◆";
display:block;
color:var(--ornament-color);
font-family:var(--body-font);
font-size:10px;
font-weight:700;
letter-spacing:5px;
margin-bottom:14px
}
body.template-royal-cinema .venue-card,body.template-royal-cinema .rsvp-card,body.template-royal-cinema .memories-card,body.template-royal-cinema .godparents-special {
border-radius:4px!important;
border:1px solid var(--ornament-color)!important;
box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px color-mix(in srgb,var(--ornament-color) 40%,transparent),0 28px 80px rgba(0,0,0,.18)!important
}
body.template-royal-cinema .btn {
border-radius:3px!important;
text-transform:uppercase;
letter-spacing:2px
}
body.template-royal-cinema .godparent-name {
border-radius:2px;
text-transform:uppercase;
font-size:14px;
letter-spacing:1.5px
}
/* Microanimaciones por plantilla */ body.decor-epic .section-current .section-head:before {
animation:ornamentPulse 2.6s ease-in-out infinite
}
@keyframes ornamentPulse {
0%,100% {
transform:scale(1);
opacity:.75
}
50% {
transform:scale(1.04);
opacity:1;
text-shadow:0 0 18px color-mix(in srgb,var(--ornament-color) 48%,transparent)
}
}
body.template-magic-academy .template-ambient i:nth-child(3n) {
animation-name:ambientTwinkle
}
body.template-celestial .template-ambient i:nth-child(2n),body.template-gothic-moon .template-ambient i:nth-child(2n) {
animation-name:ambientTwinkle
}
@keyframes ambientTwinkle {
0%,100% {
opacity:.04;
transform:scale(.45)
}
50% {
opacity:.55;
transform:scale(1.5)
}
}
body.template-energy-anime .template-ambient i {
width:70px;
height:2px;
border-radius:0;
transform:rotate(-25deg);
animation-name:energyDash
}
@keyframes energyDash {
from {
translate:-30vw 20px;
opacity:0
}
40% {
opacity:.35
}
to {
translate:35vw -30px;
opacity:0
}
}
body.template-enchanted-forest .template-ambient i {
background:#fff3a6;
box-shadow:0 0 18px #fff3a6;
animation-name:firefly
}
@keyframes firefly {
0% {
transform:translate(0,20px);
opacity:.05
}
35% {
opacity:.7
}
70% {
transform:translate(20px,-20px);
opacity:.18
}
100% {
transform:translate(-12px,-38px);
opacity:.45
}
}
@media(max-width:700px) {
.godparents-special {
padding:34px 18px 28px;
margin-top:48px
}
.godparent-name {
min-width:0;
width:100%;
font-size:18px
}
.template-ambient {
opacity:.42
}
}
/* Intensidad de movimiento configurable */ html.motion-enabled body.motion-subtle .section.motion-ready {
transition-duration:.58s,.65s,.55s
}
html.motion-enabled body.motion-subtle .section.motion-ready[data-motion="fade-up"] {
transform:translateY(28px)
}
html.motion-enabled body.motion-subtle .section.motion-ready[data-motion="slide-left"] {
transform:translateX(-36px)
}
html.motion-enabled body.motion-subtle .section.motion-ready[data-motion="slide-right"] {
transform:translateX(36px)
}
html.motion-enabled body.motion-subtle .section.motion-ready[data-motion="zoom"] {
transform:scale(.97);
filter:blur(1px)
}
html.motion-enabled body.motion-epic .section.motion-ready {
transition-duration:1s,1.15s,1s;
transition-timing-function:cubic-bezier(.16,.84,.24,1)
}
html.motion-enabled body.motion-epic .section.motion-ready[data-motion="fade-up"] {
transform:translateY(92px) scale(.985)
}
html.motion-enabled body.motion-epic .section.motion-ready[data-motion="slide-left"] {
transform:translateX(-120px) rotate(-1deg)
}
html.motion-enabled body.motion-epic .section.motion-ready[data-motion="slide-right"] {
transform:translateX(120px) rotate(1deg)
}
html.motion-enabled body.motion-epic .section.motion-ready[data-motion="zoom"] {
transform:scale(.86);
filter:blur(7px)
}
/* detalles sorprendentes */ body.template-magic-academy .section-current .hero-content,body.template-magic-academy .section-current .section-head {
animation:magicBreathe 4s ease-in-out infinite
}
@keyframes magicBreathe {
50% {
filter:drop-shadow(0 0 24px color-mix(in srgb,var(--ornament-color) 20%,transparent))
}
}
body.template-royal-cinema .section-current .section-head:after {
content:"";
display:block;
width:min(280px,70vw);
height:1px;
margin:18px auto 0;
background:linear-gradient(90deg,transparent,var(--ornament-color),transparent);
animation:cinemaSweep 2.8s ease-in-out infinite
}
@keyframes cinemaSweep {
0%,100% {
transform:scaleX(.35);
opacity:.35
}
50% {
transform:scaleX(1);
opacity:1
}
}
body.template-aurora .section-current .section-head {
animation:auroraGlow 3.5s ease-in-out infinite
}
@keyframes auroraGlow {
50% {
text-shadow:0 0 28px color-mix(in srgb,var(--ornament-color) 24%,transparent)
}
}
body.template-modern .godparents-special {
border-radius:0;
border:0;
border-top:3px solid var(--ink);
border-bottom:1px solid var(--ink);
box-shadow:none;
background:transparent
}
body.template-modern .godparent-name {
border-radius:0;
border:0;
background:transparent;
border-left:2px solid var(--ornament-color);
justify-content:flex-start;
font-family:var(--body-font);
font-size:14px
}
body.template-celebration .godparents-special {
border-radius:34px;
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 30%,var(--surface)),var(--surface));
box-shadow:0 26px 75px color-mix(in srgb,var(--ornament-color) 14%,transparent)
}
body.template-celebration .godparent-name {
border-radius:18px;
box-shadow:0 8px 24px color-mix(in srgb,var(--ornament-color) 8%,transparent)
}
body.template-marble .godparents-special {
border-radius:14px;
border:1px solid var(--ornament-color);
box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px color-mix(in srgb,var(--ornament-color) 18%,transparent),0 30px 80px rgba(70,60,45,.11)
}
body.template-marble .godparent-name {
border-radius:5px;
background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--secondary) 12%,var(--surface)))
}
/* === v2.9: transparencia editable + plantillas cristal === */ .alpha-row {
display:flex;
align-items:center;
gap:8px;
margin-top:9px;
font-size:12px
}
.alpha-row select {
min-width:130px
}
body.template-golden-mocha {
--glass-shadow:rgba(55,32,18,.22)
}
body.template-golden-mocha .section:not(.hero) {
background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--paper) 88%,#4a2f21),var(--paper))!important
}
body.template-golden-mocha .venue-card,body.template-golden-mocha .rsvp-card,body.template-golden-mocha .memories-card,body.template-golden-mocha .godparents-special {
background:var(--surface)!important;
backdrop-filter:blur(22px) saturate(1.15);
border:1px solid color-mix(in srgb,var(--ornament-color) 58%,transparent)!important;
border-radius:38px 10px 38px 10px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 34px 100px var(--glass-shadow)!important
}
body.template-golden-mocha .section-head:before {
content:'✦ CAFÉ · ORO ✦';
display:block;
font:600 10px var(--body-font);
letter-spacing:5px;
color:var(--ornament-color);
margin-bottom:15px
}
body.template-golden-mocha .btn {
border-radius:999px!important;
box-shadow:0 10px 30px color-mix(in srgb,var(--gold) 22%,transparent)
}
body.template-rose-crystal .section:not(.hero),body.template-lavender-dream .section:not(.hero) {
background:radial-gradient(circle at 20% 0,color-mix(in srgb,var(--secondary) 35%,transparent),transparent 35%),var(--paper)!important
}
body.template-rose-crystal .venue-card,body.template-rose-crystal .rsvp-card,body.template-rose-crystal .godparents-special,body.template-lavender-dream .venue-card,body.template-lavender-dream .rsvp-card,body.template-lavender-dream .godparents-special {
background:var(--surface)!important;
backdrop-filter:blur(24px);
border:1px solid color-mix(in srgb,var(--ornament-color) 45%,transparent)!important;
box-shadow:0 30px 90px color-mix(in srgb,var(--ornament-color) 16%,transparent)!important
}
body.template-rose-crystal .section-head:before {
content:'♡ ✧ ♡';
display:block;
color:var(--ornament-color);
letter-spacing:10px;
margin-bottom:12px
}
body.template-lavender-dream .section-head:before {
content:'☾ ✦ ✧ ✦ ☽';
display:block;
color:var(--ornament-color);
letter-spacing:8px;
margin-bottom:12px
}
body.template-sapphire-glass .section:not(.hero) {
background:radial-gradient(circle at 80% 0,color-mix(in srgb,var(--gold) 10%,transparent),transparent 30%),var(--paper)!important
}
body.template-sapphire-glass .venue-card,body.template-sapphire-glass .rsvp-card,body.template-sapphire-glass .godparents-special {
background:var(--surface)!important;
backdrop-filter:blur(22px);
border:1px solid color-mix(in srgb,var(--ornament-color) 55%,transparent)!important;
border-radius:6px 46px 6px 46px!important;
box-shadow:0 0 60px color-mix(in srgb,var(--ornament-color) 12%,transparent),0 30px 90px rgba(0,0,0,.25)!important
}
body.template-sapphire-glass .section-head:before {
content:'◇ DEEP BLUE ◇';
display:block;
font:700 9px var(--body-font);
letter-spacing:6px;
color:var(--ornament-color);
margin-bottom:14px
}
body.template-emerald-mist .section:not(.hero) {
background:radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--secondary) 30%,transparent),transparent 32%),var(--paper)!important
}
body.template-emerald-mist .venue-card,body.template-emerald-mist .rsvp-card,body.template-emerald-mist .godparents-special {
background:var(--surface)!important;
backdrop-filter:blur(20px);
border:1px solid color-mix(in srgb,var(--ornament-color) 42%,transparent)!important;
border-radius:70px 18px 70px 18px!important
}
body.template-emerald-mist .section-head:before {
content:'❦ ✧ ❦';
display:block;
color:var(--ornament-color);
font-size:20px;
letter-spacing:8px;
margin-bottom:12px
}
/* funciones sorpresa v2.9 */ .scroll-progress {
position:fixed;
top:0;
left:0;
width:0;
height:3px;
background:linear-gradient(90deg,var(--gold),var(--ornament-color));
z-index:100000;
box-shadow:0 0 14px var(--ornament-color);
pointer-events:none
}
.cursor-aura {
position:fixed;
left:0;
top:0;
width:220px;
height:220px;
border-radius:50%;
pointer-events:none;
z-index:2;
opacity:0;
background:radial-gradient(circle,color-mix(in srgb,var(--ornament-color) 15%,transparent),transparent 68%);
transform:translate(-50%,-50%);
transition:opacity .3s ease
}
@media(pointer:fine) {
body.has-cursor-aura .cursor-aura {
opacity:1
}
}
@media(pointer:coarse) {
.cursor-aura {
display:none!important
}
}
body.has-magic-dividers main>.section:not(:last-child):after {
content:'✦';
position:absolute;
left:50%;
bottom:-18px;
translate:-50% 50%;
color:var(--ornament-color);
font-size:13px;
text-shadow:0 0 16px var(--ornament-color);
animation:dividerFloat 3.4s ease-in-out infinite
}
body.has-magic-dividers main>.section {
position:relative
}
@keyframes dividerFloat {
50% {
transform:translateY(-6px) rotate(45deg);
opacity:.6
}
}
body.has-micro-interactions .venue-card,body.has-micro-interactions .rsvp-card,body.has-micro-interactions .godparent-name,body.has-micro-interactions .memory-photo {
transition:transform .45s cubic-bezier(.16,.84,.24,1),box-shadow .45s ease,filter .45s ease
}
body.has-micro-interactions .venue-card:hover,body.has-micro-interactions .rsvp-card:hover,body.has-micro-interactions .godparent-name:hover {
transform:translateY(-5px);
filter:saturate(1.05)
}
body.decor-epic .section-current .section-head h2 {
animation:titleBreath 3.8s ease-in-out infinite
}
@keyframes titleBreath {
50% {
letter-spacing:.02em;
filter:drop-shadow(0 0 18px color-mix(in srgb,var(--ornament-color) 22%,transparent))
}
}
/* ===== v2.10 orden real + ambientes + móvil ===== */ main {
display:flex!important;
flex-direction:column!important;
overflow:visible!important
}
main>.hero {
order:0
}
main>.section {
flex:0 0 auto
}
.template-ambient {
pointer-events:none;
position:fixed;
inset:0;
z-index:4;
overflow:hidden
}
.ambient-style-sparkles .template-ambient i {
width:5px;
height:5px;
border-radius:50%;
background:var(--ornament-color);
box-shadow:0 0 14px var(--ornament-color),0 0 30px color-mix(in srgb,var(--ornament-color) 45%,transparent);
animation:fxSparkle calc(5s + var(--i)*.15s) ease-in-out infinite;
left:calc((var(--i)*37)%100 * 1%);
top:calc((var(--i)*53)%100 * 1%)
}
@keyframes fxSparkle {
0%,100% {
opacity:.08;
transform:scale(.3) rotate(0)
}
45% {
opacity:.85;
transform:scale(1.4) rotate(90deg)
}
70% {
opacity:.18
}
}
.ambient-style-fireflies .template-ambient i {
width:7px;
height:7px;
border-radius:50%;
background:var(--ornament-color);
filter:blur(.2px);
box-shadow:0 0 16px var(--ornament-color);
animation:fxFirefly calc(8s + var(--i)*.22s) ease-in-out infinite alternate;
left:calc((var(--i)*29)%94 * 1%);
top:calc((var(--i)*47)%92 * 1%)
}
@keyframes fxFirefly {
0% {
opacity:.12;
translate:-10px 20px
}
40% {
opacity:.72;
translate:25px -35px
}
100% {
opacity:.2;
translate:-18px -70px
}
}
.ambient-style-constellation .template-ambient i {
width:4px;
height:4px;
border-radius:50%;
background:var(--ornament-color);
box-shadow:0 0 10px var(--ornament-color);
left:calc((var(--i)*43)%96 * 1%);
top:calc((var(--i)*61)%92 * 1%);
animation:fxStar 4s ease-in-out infinite alternate
}
.ambient-style-constellation .template-ambient i:nth-child(3n):after {
content:"";
position:absolute;
width:80px;
height:1px;
transform:rotate(calc((var(--i)*17deg) - 45deg));
transform-origin:left;
background:linear-gradient(90deg,var(--ornament-color),transparent);
opacity:.22
}
@keyframes fxStar {
to {
opacity:.85;
transform:scale(1.35)
}
}
.ambient-style-petals .template-ambient i {
width:12px;
height:8px;
border-radius:90% 10% 90% 10%;
background:color-mix(in srgb,var(--ornament-color) 70%,white);
left:calc((var(--i)*31)%100 * 1%);
top:-30px;
animation:fxPetal calc(8s + var(--i)*.18s) linear infinite;
animation-delay:calc(var(--i)*-.45s)
}
@keyframes fxPetal {
to {
translate:calc((var(--i)%2)*80px - 35px) 110vh;
rotate:720deg;
opacity:.05
}
}
.ambient-style-energy-lines .template-ambient i {
width:1px;
height:110px;
background:linear-gradient(180deg,transparent,var(--ornament-color),transparent);
left:calc((var(--i)*23)%100 * 1%);
top:calc((var(--i)*41)%100 * 1%);
transform:rotate(calc(25deg + (var(--i)%6)*11deg));
filter:drop-shadow(0 0 7px var(--ornament-color));
animation:fxLine 5s ease-in-out infinite
}
@keyframes fxLine {
0%,100% {
opacity:.03;
scale:.6
}
50% {
opacity:.42;
scale:1.1;
translate:35px -45px
}
}
.ambient-style-stardust .template-ambient i {
width:3px;
height:3px;
border-radius:50%;
background:white;
box-shadow:0 0 9px var(--ornament-color);
left:calc((var(--i)*17)%100 * 1%);
top:calc((var(--i)*73)%100 * 1%);
animation:fxDust calc(6s + var(--i)*.12s) linear infinite
}
@keyframes fxDust {
0% {
opacity:0;
translate:0 30px
}
30% {
opacity:.7
}
100% {
opacity:0;
translate:30px -90px
}
}
.mobile-rsvp-cta {
display:none
}
@media(max-width:900px) {
html {
scroll-padding-top:68px
}
.section {
padding-left:18px;
padding-right:18px
}
.hero-content {
padding-left:18px;
padding-right:18px
}
.site-header {
height:66px;
padding:0 14px
}
.brand span {
font-size:30px
}
.nav {
max-height:calc(100svh - 66px);
overflow-y:auto;
overscroll-behavior:contain
}
.venue-card,.rsvp-card {
padding-left:22px;
padding-right:22px
}
.timeline-item {
grid-template-columns:72px 34px 1fr
}
.timeline:before,.timeline:after {
left:89px
}
.mobile-rsvp-cta {
display:flex;
position:fixed;
left:50%;
bottom:max(14px,env(safe-area-inset-bottom));
translate:-50% 0;
z-index:145;
align-items:center;
gap:8px;
background:color-mix(in srgb,var(--gold-solid) 92%,#111);
color:white;
text-decoration:none;
border:1px solid color-mix(in srgb,var(--gold-solid) 65%,white);
box-shadow:0 12px 35px rgba(0,0,0,.22);
backdrop-filter:blur(12px);
padding:11px 18px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
white-space:nowrap
}
.audio-button {
bottom:max(74px,calc(env(safe-area-inset-bottom) + 70px));
right:14px;
width:52px;
height:52px
}
.gallery-shell {
height:min(58vh,520px)
}
}
@media(max-width:520px) {
.script-title {
font-size:clamp(46px,15vw,68px)
}
.hero h1 {
font-size:clamp(64px,21vw,105px)
}
.count-grid strong {
font-size:36px
}
.count-grid div {
padding:20px 6px
}
.date-card {
margin-bottom:45px
}
.dress-grid {
grid-template-columns:1fr
}
.dress-grid article {
padding:38px 22px
}
.mobile-rsvp-cta {
max-width:calc(100vw - 100px);
overflow:hidden;
text-overflow:ellipsis
}
}
@media(prefers-reduced-motion:reduce) {
.template-ambient i {
animation:none!important
}
.mobile-rsvp-cta {
transition:none
}
}
/* =========================================================
v2.11 — ambiente corregido + contador configurable
========================================================= */
/* Las posiciones se calculan en PHP para evitar expresiones CSS no compatibles
con operadores de módulo/multiplicación en algunos navegadores. */ .template-ambient i {
left:var(--fx-x)!important;
top:var(--fx-y)!important;
animation-delay:var(--fx-delay)!important;
}
.ambient-style-constellation .template-ambient i:nth-child(3n)::after {
transform:rotate(var(--fx-angle))!important;
}
.ambient-style-petals .template-ambient i {
left:var(--fx-x)!important;
top:-30px!important;
}
@keyframes fxPetal {
0% {
transform:translate3d(0,-20px,0) rotate(0deg);
opacity:0
}
12% {
opacity:.65
}
100% {
transform:translate3d(var(--fx-drift),110vh,0) rotate(720deg);
opacity:.04
}
}
.ambient-style-energy-lines .template-ambient i {
left:var(--fx-x)!important;
top:var(--fx-y)!important;
transform:rotate(var(--fx-angle))!important;
}
@keyframes fxLine {
0%,100% {
opacity:.03;
scale:.6;
translate:0 0
}
50% {
opacity:.42;
scale:1.1;
translate:35px -45px
}
}
/* El contador puede ser cristal, sólido o completamente transparente. */ body .countdown {
background:var(--countdown-bg)!important;
border-radius:var(--countdown-radius);
width:min(var(--countdown-max),calc(100% - 36px));
max-width:none;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
}
body .count-grid {
width:min(100%,var(--countdown-max));
max-width:var(--countdown-max);
border-color:var(--countdown-border)!important;
border-radius:var(--countdown-radius);
overflow:hidden;
}
body .count-grid>div {
border-color:var(--countdown-border)!important;
background:transparent;
}
@media(max-width:620px) {
body .countdown {
width:calc(100% - 24px);
border-radius:min(var(--countdown-radius),22px);
}
body .count-grid {
grid-template-columns:repeat(2,1fr);
border:1px solid var(--countdown-border)!important;
}
body .count-grid>div {
border-right:1px solid var(--countdown-border)!important;
border-bottom:1px solid var(--countdown-border)!important;
}
body .count-grid>div:nth-child(2n) {
border-right:0!important
}
body .count-grid>div:nth-last-child(-n+2) {
border-bottom:0!important
}
}
/* =========================================================
v2.13.0 — personalización fiable + galerías de historia
========================================================= */
/* RSVP: estos controles siempre prevalecen sobre la plantilla. */ body .rsvp.section {
color:var(--rsvp-text)!important
}
body[class*="template-"] .rsvp .rsvp-card, body .rsvp .rsvp-card {
background:var(--rsvp-bg)!important;
color:var(--rsvp-text)!important;
border-color:var(--rsvp-border)!important;
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
}
body .rsvp .rsvp-card :is(p,label,legend,.guest-search label,.passes-granted p,.passes-granted span,.rsvp-lock,.availability span) {
color:var(--rsvp-text)!important
}
body .rsvp .rsvp-card :is(input,select,textarea),body .rsvp #companions input {
background:var(--rsvp-input-bg)!important;
color:var(--rsvp-input-text)!important;
border-color:var(--rsvp-border)!important;
-webkit-text-fill-color:var(--rsvp-input-text)!important;
}
body .rsvp .rsvp-card :is(input,textarea)::placeholder {
color:var(--rsvp-input-text)!important;
opacity:.55
}
body .rsvp .rsvp-card :is(fieldset,.passes-granted,.availability,.rsvp-lock,.guest-search input) {
border-color:var(--rsvp-border)!important
}
body .rsvp .availability strong {
color:var(--gold-solid)!important
}
/* Contador y responsive de v2.12 corregidos con saltos CSS reales. */ body[class*="template-"] .countdown.section,body .countdown.section {
background:var(--countdown-bg)!important;
border-radius:var(--countdown-radius)!important;
width:min(var(--countdown-max),calc(100% - 36px))!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
overflow:hidden
}
body .countdown .count-grid {
background:transparent!important;
border-color:var(--countdown-border)!important;
width:100%!important;
max-width:var(--countdown-max)!important
}
body .countdown .count-grid>div {
border-color:var(--countdown-border)!important;
background:transparent!important
}
body .countdown .count-grid strong {
color:var(--countdown-number)!important
}
body .countdown .count-grid span {
color:var(--countdown-label)!important
}
/* Galería base */ .story-gallery {
--gallery-gap:12px;
position:relative;
width:min(1100px,calc(100% - 30px));
margin:42px auto 18px
}
.story-gallery figure {
margin:0
}
.gallery-image-button {
display:block;
width:100%;
height:100%;
border:0;
padding:0;
background:none;
cursor:zoom-in
}
.gallery-image-button img {
width:100%;
height:100%;
object-fit:cover
}
.story-gallery figcaption {
pointer-events:none
}
.story-gallery figcaption span {
font:600 10px var(--body-font);
letter-spacing:2px;
color:var(--ornament-color)
}
.gallery-progress {
height:2px;
background:color-mix(in srgb,var(--ornament-color) 16%,transparent);
margin:14px auto 0;
width:min(280px,55%);
overflow:hidden
}
.gallery-progress i {
display:block;
height:100%;
width:0;
background:var(--ornament-color);
transition:width .45s ease
}
.gallery-prev,.gallery-next {
position:absolute;
z-index:5;
top:50%;
translate:0 -50%;
border:1px solid color-mix(in srgb,var(--ornament-color) 40%,transparent);
background:color-mix(in srgb,var(--surface) 70%,transparent);
color:var(--ink);
width:46px;
height:46px;
border-radius:50%;
font-size:28px;
backdrop-filter:blur(14px);
cursor:pointer
}
.gallery-prev {
left:16px
}
.gallery-next {
right:16px
}
.gallery-dots {
display:flex;
justify-content:center;
gap:7px;
margin-top:14px
}
.gallery-dots button {
width:7px;
height:7px;
border-radius:50%;
border:0;
padding:0;
background:color-mix(in srgb,var(--ornament-color) 25%,transparent)
}
.gallery-dots button.active {
background:var(--ornament-color);
scale:1.25
}
/* Carrusel cinematográfico */ .gallery-style-carousel {
height:min(68vh,690px);
max-height:690px
}
.gallery-style-carousel .gallery-slider,.gallery-style-carousel .slide {
position:absolute;
inset:0
}
.gallery-style-carousel .slide {
opacity:0;
transform:scale(.975);
transition:opacity .75s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);
overflow:hidden;
border-radius:var(--template-radius,28px);
box-shadow:0 30px 85px rgba(0,0,0,.16)
}
.gallery-style-carousel .slide.active {
opacity:1;
transform:scale(1);
z-index:2
}
.gallery-style-carousel figcaption {
position:absolute;
right:18px;
bottom:15px;
z-index:3
}
.gallery-style-carousel .gallery-dots {
position:absolute;
bottom:-30px;
left:0;
right:0
}
.gallery-style-carousel .gallery-progress {
position:absolute;
bottom:-14px;
left:50%;
translate:-50% 0
}
/* Mosaico editorial */ .gallery-style-grid .gallery-slider {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:110px;
gap:var(--gallery-gap)
}
.gallery-style-grid .slide {
grid-column:span 4;
grid-row:span 3;
overflow:hidden;
border-radius:18px;
position:relative
}
.gallery-style-grid .slide:nth-child(5n+1) {
grid-column:span 7;
grid-row:span 4
}
.gallery-style-grid .slide:nth-child(5n+2) {
grid-column:span 5
}
.gallery-style-grid .slide:nth-child(5n+4) {
grid-column:span 5
}
.gallery-style-grid .gallery-prev,.gallery-style-grid .gallery-next,.gallery-style-grid .gallery-dots {
display:none
}
.gallery-style-grid figcaption {
position:absolute;
right:10px;
bottom:8px
}
/* Polaroids */ .gallery-style-polaroid .gallery-slider {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:28px 20px;
padding:22px 8px
}
.gallery-style-polaroid .slide {
width:min(260px,42vw);
background:#fff;
padding:10px 10px 34px;
box-shadow:0 18px 45px rgba(0,0,0,.14);
transform:rotate(-2.5deg);
transition:.35s ease;
position:relative
}
.gallery-style-polaroid .slide:nth-child(even) {
transform:rotate(2.8deg) translateY(14px)
}
.gallery-style-polaroid .slide:nth-child(3n) {
transform:rotate(-1deg) translateY(-8px)
}
.gallery-style-polaroid .slide:hover {
transform:rotate(0) translateY(-8px) scale(1.035);
z-index:3
}
.gallery-style-polaroid .gallery-image-button {
aspect-ratio:4/5
}
.gallery-style-polaroid figcaption {
position:absolute;
bottom:8px;
left:0;
right:0;
text-align:center
}
.gallery-style-polaroid .gallery-prev,.gallery-style-polaroid .gallery-next,.gallery-style-polaroid .gallery-dots {
display:none
}
/* Tira de película */ .gallery-style-filmstrip {
width:100%;
overflow:hidden;
padding-block:18px
}
.gallery-style-filmstrip .gallery-slider {
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding:16px max(20px,calc((100vw - 1100px)/2));
scrollbar-width:none;
background:linear-gradient(180deg,#171717,#242424);
border-block:8px solid #0d0d0d
}
.gallery-style-filmstrip .gallery-slider::-webkit-scrollbar {
display:none
}
.gallery-style-filmstrip .slide {
flex:0 0 clamp(220px,38vw,390px);
aspect-ratio:4/5;
scroll-snap-align:center;
position:relative;
border:5px solid #0c0c0c;
box-shadow:0 0 0 1px rgba(255,255,255,.08)
}
.gallery-style-filmstrip .gallery-image-button {
cursor:zoom-in
}
.gallery-style-filmstrip figcaption {
position:absolute;
bottom:7px;
right:8px;
background:#111;
padding:2px 6px
}
.gallery-style-filmstrip .gallery-prev,.gallery-style-filmstrip .gallery-next,.gallery-style-filmstrip .gallery-dots {
display:none
}
.gallery-style-filmstrip .gallery-progress {
display:none
}
/* Pila de recuerdos */ .gallery-style-stack {
height:min(64vh,620px);
max-width:760px
}
.gallery-style-stack .gallery-slider {
position:absolute;
inset:0;
display:grid;
place-items:center
}
.gallery-style-stack .slide {
position:absolute;
width:min(74%,520px);
height:88%;
padding:10px 10px 38px;
background:#fff;
box-shadow:0 28px 75px rgba(0,0,0,.2);
opacity:0;
transform:rotate(-4deg) translate(-18px,8px) scale(.94);
transition:.65s cubic-bezier(.2,.8,.2,1)
}
.gallery-style-stack .slide.active {
opacity:1;
transform:rotate(0) translate(0) scale(1);
z-index:4
}
.gallery-style-stack .slide.active+ .slide {
opacity:.45;
transform:rotate(5deg) translate(25px,8px) scale(.96);
z-index:2
}
.gallery-style-stack figcaption {
position:absolute;
bottom:10px;
left:0;
right:0;
text-align:center
}
.gallery-style-stack .gallery-progress {
position:absolute;
bottom:-14px;
left:50%;
translate:-50% 0
}
.gallery-style-stack .gallery-dots {
position:absolute;
bottom:-32px;
left:0;
right:0
}
/* Lightbox */ .story-lightbox[hidden] {
display:none!important
}
.story-lightbox {
position:fixed;
inset:0;
z-index:99999;
background:rgba(7,7,9,.94);
display:grid;
place-items:center;
padding:54px 74px
}
.story-lightbox figure {
margin:0;
max-width:min(92vw,1100px);
max-height:86vh;
display:grid;
place-items:center
}
.story-lightbox img {
max-height:80vh;
max-width:100%;
object-fit:contain;
box-shadow:0 30px 100px #000
}
.story-lightbox figcaption {
color:#fff8;
text-align:center;
margin-top:8px
}
.story-lightbox button {
position:absolute;
border:0;
background:rgba(255,255,255,.08);
color:#fff;
width:48px;
height:48px;
border-radius:50%;
font-size:30px;
cursor:pointer;
backdrop-filter:blur(10px)
}
.story-lightbox-close {
right:22px;
top:22px
}
.story-lightbox-prev {
left:18px;
top:50%
}
.story-lightbox-next {
right:18px;
top:50%
}
.lightbox-open {
overflow:hidden!important
}
/* Animaciones/itinerario responsive válidos */ html.motion-enabled .section.motion-ready .reveal {
transition:opacity .72s ease,transform .82s cubic-bezier(.16,.84,.24,1),filter .72s ease
}
.timeline-section .timeline {
isolation:isolate
}
@media(max-width:760px) {
body .timeline-section .timeline {
padding-left:0!important;
width:100%!important;
max-width:100%!important
}
body .timeline-section .timeline:before,body .timeline-section .timeline:after {
left:20px!important;
top:7px!important;
bottom:7px!important;
width:2px!important
}
body .timeline-section .timeline-item {
display:grid!important;
grid-template-columns:42px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:10px!important;
row-gap:2px!important;
margin:0 0 42px!important;
min-width:0!important
}
body .timeline-section .timeline-item time {
grid-column:2!important;
grid-row:1!important;
text-align:left!important;
margin:0 0 3px!important;
font-size:14px!important
}
body .timeline-section .timeline-item .timeline-dot {
grid-column:1!important;
grid-row:1/span 2!important;
justify-self:center!important;
align-self:start!important;
margin-top:4px!important;
width:13px!important;
height:13px!important;
z-index:3!important
}
body .timeline-section .timeline-item>div:last-child {
grid-column:2!important;
grid-row:2!important;
min-width:0!important;
padding:0!important
}
.gallery-style-carousel {
height:min(58vh,520px)
}
.gallery-style-grid .gallery-slider {
grid-template-columns:1fr 1fr;
grid-auto-rows:125px;
gap:8px
}
.gallery-style-grid .slide,.gallery-style-grid .slide:nth-child(n) {
grid-column:span 1;
grid-row:span 2
}
.gallery-style-grid .slide:first-child {
grid-column:1/-1;
grid-row:span 3
}
.gallery-style-polaroid .gallery-slider {
flex-wrap:nowrap;
overflow-x:auto;
justify-content:flex-start;
scroll-snap-type:x mandatory;
padding:22px 26px 35px
}
.gallery-style-polaroid .slide {
flex:0 0 min(76vw,300px);
width:auto;
scroll-snap-align:center
}
.gallery-style-stack {
height:520px
}
.gallery-style-stack .slide {
width:82%;
height:86%
}
.story-lightbox {
padding:58px 18px
}
.story-lightbox-prev {
left:8px
}
.story-lightbox-next {
right:8px
}
}
@media(max-width:620px) {
body[class*="template-"] .countdown.section {
width:calc(100% - 24px)!important
}
body .countdown .count-grid {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
border:1px solid var(--countdown-border)!important
}
.story-gallery {
width:calc(100% - 18px);
margin-top:28px
}
.gallery-style-filmstrip .slide {
flex-basis:72vw
}
}
@media(prefers-reduced-motion:reduce) {
.story-gallery .slide {
transition:none!important
}
}
/* v2.15 · movimiento continuo y ajustable desde el panel */ html.motion-enabled body .section.motion-ready {
transition-duration:var(--motion-duration)!important
}
html.motion-enabled body .section.motion-ready[data-motion="fade-up"] {
transform:translateY(var(--motion-y)) scale(var(--motion-soft))!important
}
html.motion-enabled body .section.motion-ready[data-motion="slide-left"] {
transform:translateX(calc(var(--motion-x) * -1)) rotate(-.6deg)!important
}
html.motion-enabled body .section.motion-ready[data-motion="slide-right"] {
transform:translateX(var(--motion-x)) rotate(.6deg)!important
}
html.motion-enabled body .section.motion-ready[data-motion="zoom"] {
transform:scale(var(--motion-zoom))!important;
filter:blur(var(--motion-blur))!important
}
html.motion-enabled body .section.motion-ready.motion-visible {
opacity:1!important;
transform:none!important;
filter:none!important
}
/* === v2.18 · capa semántica de color: todas las plantillas obedecen al panel === */ body[class*="template-"] {
--paper:var(--user-paper)!important;
--surface:var(--user-surface)!important;
--ink:var(--user-ink)!important;
background:var(--paper)!important;
color:var(--ink)!important;
}
/* El secundario siempre tiene una función visible: profundidad/fondos alternos. */ body[class*="template-"] #donde, body[class*="template-"] #itinerario, body[class*="template-"] #regalos, body[class*="template-"] #video, body[class*="template-"] #faq {
background:linear-gradient(145deg,color-mix(in srgb,var(--secondary) 24%,var(--paper)),var(--paper))!important;
color:var(--ink)!important;
}
body[class*="template-"] #historia, body[class*="template-"] #dresscode, body[class*="template-"] #recuerdos, body[class*="template-"] #confirmacion {
background:var(--paper)!important;
color:var(--ink)!important;
}
/* Superficies: la plantilla conserva geometría, adornos y sombras; el panel manda en el color. */ body[class*="template-"] .venue-card, body[class*="template-"] .memories-card, body[class*="template-"] .custom-inner, body[class*="template-"] .godparents-special, body[class*="template-"] .story-card, body[class*="template-"] .faq details {
background:var(--surface)!important;
color:var(--ink)!important;
}
body[class*="template-"] .script-title, body[class*="template-"] .section-head h2, body[class*="template-"] .section > h2, body[class*="template-"] .venue-card h3, body[class*="template-"] .venue-card h4, body[class*="template-"] .godparents-special h2 {
color:var(--heading-color)!important;
}
body[class*="template-"] .section-head:before, body[class*="template-"] .section-head:after, body[class*="template-"] .ornament, body[class*="template-"] .venue-icon, body[class*="template-"] .memory-hashtag, body[class*="template-"] .timeline-item:before {
color:var(--ornament-color)!important;
}
body[class*="template-"] .btn.primary, body[class*="template-"] .rsvp-form button[type="submit"], body[class*="template-"] .memories-card .btn:not(.ghost):not(.ghost-light), body[class*="template-"] .custom-section .btn:not(.ghost):not(.ghost-light) {
background:var(--button-bg)!important;
color:var(--button-text)!important;
border-color:color-mix(in srgb,var(--button-bg) 75%,transparent)!important;
}
/* Etiqueta visible: ahora "Etiqueta del evento" tiene dos usos claros: sobre + hero. */ .event-label-chip {
display:inline-flex;
align-items:center;
justify-content:center;
margin:0 auto 12px;
padding:7px 14px;
border:1px solid color-mix(in srgb,var(--ornament-color) 55%,transparent);
border-radius:999px;
background:color-mix(in srgb,var(--paper) 12%,transparent);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:.16em;
text-transform:uppercase;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px)
}
/* Colores propios de una sección: tienen prioridad sobre la plantilla sin alterar su geometría. */ body[class*="template-"] .section[style*="--section-bg"] {
background:var(--section-bg)!important;
color:var(--section-text)!important;
}
body[class*="template-"] .section[style*="--section-bg"] .script-title, body[class*="template-"] .section[style*="--section-bg"] .section-head h2, body[class*="template-"] .section[style*="--section-bg"] > h2, body[class*="template-"] .section[style*="--section-bg"] h3, body[class*="template-"] .section[style*="--section-bg"] h4 {
color:var(--section-heading)!important;
}
body[class*="template-"] .section[style*="--section-bg"] .eyebrow, body[class*="template-"] .section[style*="--section-bg"] .eyebrow.dark, body[class*="template-"] .section[style*="--section-bg"] .ornament, body[class*="template-"] .section[style*="--section-bg"] .venue-icon, body[class*="template-"] .section[style*="--section-bg"] .section-head:before, body[class*="template-"] .section[style*="--section-bg"] .section-head:after {
color:var(--section-accent)!important;
}
body[class*="template-"] .section[style*="--section-bg"] p, body[class*="template-"] .section[style*="--section-bg"] li, body[class*="template-"] .section[style*="--section-bg"] time {
color:var(--section-text);
}
body[class*="template-"] .section[style*="--section-bg"] .venue-card, body[class*="template-"] .section[style*="--section-bg"] .memories-card, body[class*="template-"] .section[style*="--section-bg"] .custom-inner, body[class*="template-"] .section[style*="--section-bg"] .godparents-special {
color:var(--section-text)!important;
}
/* === v2.19 · galerías responsive robustas === */ .story {
overflow:hidden
}
.story-gallery,.story-gallery * {
box-sizing:border-box
}
.story-gallery {
position:relative!important;
display:block;
width:min(1100px,100%)!important;
max-width:100%!important;
min-width:0!important;
margin:42px auto 24px!important;
overflow:visible;
}
.story-gallery .gallery-slider {
min-width:0;
max-width:100%
}
.story-gallery .slide {
min-width:0;
max-width:100%
}
.story-gallery .gallery-image-button {
min-width:0;
overflow:hidden
}
.story-gallery .gallery-image-button img {
display:block;
max-width:100%;
min-width:0
}
/* Carrusel: tamaño contenido y estable en cualquier relación de pantalla */ .gallery-style-carousel {
width:min(100%,1000px)!important;
height:clamp(360px,62vw,680px)!important;
max-height:min(72vh,680px)!important;
overflow:visible!important;
}
.gallery-style-carousel .gallery-slider {
position:absolute!important;
inset:0!important;
overflow:hidden;
border-radius:var(--template-radius,28px)
}
.gallery-style-carousel .slide {
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important
}
.gallery-style-carousel .gallery-image-button,.gallery-style-carousel img {
width:100%!important;
height:100%!important
}
/* Mosaico: el contenedor vuelve al flujo; nunca puede quedar en posición absoluta. */ .gallery-style-grid {
height:auto!important;
overflow:visible!important
}
.gallery-style-grid .gallery-slider {
position:relative!important;
inset:auto!important;
display:grid!important;
grid-template-columns:repeat(12,minmax(0,1fr))!important;
grid-auto-rows:clamp(80px,8vw,120px)!important;
gap:12px!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
overflow:hidden!important;
}
.gallery-style-grid .slide {
position:relative!important;
inset:auto!important;
width:auto!important;
height:auto!important;
min-height:0!important
}
/* Polaroids: flujo real en escritorio y carrusel táctil en móvil. */ .gallery-style-polaroid {
height:auto!important;
overflow:hidden!important
}
.gallery-style-polaroid .gallery-slider {
position:relative!important;
inset:auto!important;
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
overflow:visible!important;
}
.gallery-style-polaroid .slide {
position:relative!important;
inset:auto!important;
max-width:100%!important
}
/* Película: la tira desplaza solo su interior, jamás toda la página. */ .gallery-style-filmstrip {
width:100%!important;
max-width:100%!important;
height:auto!important;
overflow:hidden!important;
padding:16px 0!important;
}
.gallery-style-filmstrip .gallery-slider {
position:relative!important;
inset:auto!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
padding:16px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
overscroll-behavior-inline:contain;
-webkit-overflow-scrolling:touch;
}
.gallery-style-filmstrip .slide {
position:relative!important;
inset:auto!important;
max-width:min(390px,82vw)!important
}
/* Pila: un marco definido, sin salirse del ancho. */ .gallery-style-stack {
width:min(760px,100%)!important;
max-width:100%!important;
height:clamp(420px,62vw,620px)!important;
overflow:visible!important;
}
.gallery-style-stack .gallery-slider {
position:absolute!important;
inset:0!important;
overflow:hidden!important
}
.gallery-style-stack .slide {
max-width:calc(100% - 40px)!important
}
/* Botones nunca fuera del viewport */ .story-gallery .gallery-prev {
left:clamp(8px,2vw,16px)!important
}
.story-gallery .gallery-next {
right:clamp(8px,2vw,16px)!important
}
@media(max-width:900px) {
.story-gallery {
width:100%!important;
margin-top:32px!important
}
.gallery-style-carousel {
height:clamp(340px,74vw,540px)!important
}
.gallery-style-grid .gallery-slider {
grid-template-columns:repeat(6,minmax(0,1fr))!important;
grid-auto-rows:105px!important;
gap:9px!important
}
.gallery-style-grid .slide,.gallery-style-grid .slide:nth-child(n) {
grid-column:span 3!important;
grid-row:span 2!important
}
.gallery-style-grid .slide:first-child {
grid-column:1/-1!important;
grid-row:span 3!important
}
.gallery-style-polaroid .gallery-slider {
flex-wrap:nowrap!important;
justify-content:flex-start!important;
overflow-x:auto!important;
overflow-y:visible!important;
scroll-snap-type:x mandatory;
padding:26px 9vw 38px!important;
gap:18px!important;
-webkit-overflow-scrolling:touch;
overscroll-behavior-inline:contain;
}
.gallery-style-polaroid .slide {
flex:0 0 min(72vw,310px)!important;
width:auto!important;
scroll-snap-align:center!important;
}
.gallery-style-stack {
height:clamp(430px,78vw,560px)!important
}
.gallery-style-stack .slide {
width:min(82%,430px)!important;
height:86%!important
}
}
@media(max-width:620px) {
.story {
padding-left:16px!important;
padding-right:16px!important
}
.story-gallery {
width:100%!important;
max-width:100%!important;
margin:26px auto 18px!important
}
.gallery-style-carousel {
height:clamp(380px,112vw,520px)!important;
max-height:68svh!important
}
.gallery-style-carousel .slide {
border-radius:18px!important
}
.story-gallery .gallery-prev,.story-gallery .gallery-next {
width:42px!important;
height:42px!important;
font-size:24px!important
}
.gallery-style-grid .gallery-slider {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-rows:110px!important;
gap:7px!important
}
.gallery-style-grid .slide,.gallery-style-grid .slide:nth-child(n) {
grid-column:span 1!important;
grid-row:span 2!important;
border-radius:12px!important
}
.gallery-style-grid .slide:first-child {
grid-column:1/-1!important;
grid-row:span 3!important
}
.gallery-style-polaroid .gallery-slider {
padding:22px 12vw 34px!important
}
.gallery-style-polaroid .slide {
flex-basis:min(76vw,290px)!important
}
.gallery-style-filmstrip .gallery-slider {
padding:12px!important;
gap:9px!important
}
.gallery-style-filmstrip .slide {
flex:0 0 min(74vw,285px)!important;
border-width:4px!important
}
.gallery-style-stack {
height:clamp(400px,125vw,520px)!important
}
.gallery-style-stack .slide {
width:82%!important;
height:84%!important;
padding:8px 8px 34px!important
}
.gallery-progress {
max-width:65%!important
}
}
/* === v2.19 · animaciones de sección visibles también en móvil === */ @media(max-width:900px) {
html.motion-enabled body .section.motion-ready {
opacity:0!important;
transition-property:opacity,transform,filter!important;
transition-duration:var(--motion-duration)!important;
transition-timing-function:cubic-bezier(.16,.84,.24,1)!important;
will-change:opacity,transform,filter;
}
html.motion-enabled body .section.motion-ready[data-motion="fade-up"] {
transform:translateY(var(--motion-y)) scale(var(--motion-soft))!important
}
html.motion-enabled body .section.motion-ready[data-motion="slide-left"] {
transform:translateX(calc(var(--motion-x) * -1))!important
}
html.motion-enabled body .section.motion-ready[data-motion="slide-right"] {
transform:translateX(var(--motion-x))!important
}
html.motion-enabled body .section.motion-ready[data-motion="zoom"] {
transform:scale(var(--motion-zoom))!important;
filter:blur(var(--motion-blur))!important
}
html.motion-enabled body .section.motion-ready.motion-visible {
opacity:1!important;
transform:none!important;
filter:none!important
}
}
@media(prefers-reduced-motion:reduce) {
html.motion-enabled body .section.motion-ready {
opacity:1!important;
transform:none!important;
filter:none!important;
transition:none!important
}
}
/* RSVP encontrado sin recarga */ .search-results .guest-result {
width:100%;
border:0;
border-bottom:1px solid var(--rsvp-border);
background:transparent;
color:var(--rsvp-text);
padding:12px 14px;
text-align:left;
display:flex;
justify-content:space-between;
gap:12px;
cursor:pointer;
font:inherit
}
.search-results .guest-result:hover,.search-results .guest-result:focus-visible {
background:color-mix(in srgb,var(--gold) 9%,transparent);
outline:none
}
.search-results .guest-result span {
font-weight:700
}
.search-results .guest-result small {
opacity:.68;
text-align:right
}
.rsvp-selected-guest {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:5px 12px;
margin:16px 0;
padding:14px 16px;
border:1px solid var(--rsvp-border);
border-radius:14px;
background:color-mix(in srgb,var(--rsvp-bg) 72%,transparent)
}
.rsvp-selected-guest>span {
width:100%;
font-size:10px;
text-transform:uppercase;
letter-spacing:1.7px;
opacity:.65
}
.rsvp-selected-guest b {
font-size:1.15rem
}
.rsvp-selected-guest small {
opacity:.7
}
#rsvpDynamic {
min-height:0;
transition:opacity .3s ease,transform .35s ease
}
#rsvpDynamic.rsvp-dynamic-ready {
animation:rsvpReady .42s cubic-bezier(.2,.8,.2,1)
}
@keyframes rsvpReady {
from {
opacity:.2;
transform:translateY(10px)
}
to {
opacity:1;
transform:none
}
}
@media(max-width:620px) {
.search-results .guest-result {
align-items:flex-start;
flex-direction:column
}
.search-results .guest-result small {
text-align:left
}
}
/* v2.20 · menú móvil configurable y cierre exterior */ @media(max-width:920px) {
.nav {
background:var(--mobile-nav-bg)!important;
color:var(--mobile-nav-text)!important;
border-left:1px solid color-mix(in srgb,var(--mobile-nav-text) 14%,transparent)!important;
backdrop-filter:blur(var(--header-blur)) saturate(135%)!important;
-webkit-backdrop-filter:blur(var(--header-blur)) saturate(135%)!important;
z-index:5002!important;
}
.nav a {
color:var(--mobile-nav-text)!important
}
.hamb.open {
color:var(--mobile-nav-text)!important;
z-index:5003!important
}
body.nav-open:before {
content:"";
position:fixed;
inset:0;
z-index:4999;
background:rgba(0,0,0,.32);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
}
/* Confirmación visible justo debajo del botón */ .rsvp-feedback {
margin-top:14px;
min-height:0
}
.rsvp-feedback .form-alert {
margin:0;
padding:14px 16px;
border-radius:12px;
font-weight:700;
line-height:1.45
}
.rsvp-feedback .form-alert.success {
background:rgba(48,139,91,.12);
border:1px solid rgba(48,139,91,.28);
color:inherit
}
.rsvp-feedback .form-alert.error {
background:rgba(176,59,59,.10);
border:1px solid rgba(176,59,59,.26);
color:inherit
}
.contact-edit-hint {
display:block;
margin-top:6px;
font-size:.72rem;
opacity:.7;
line-height:1.4
}
/* ==========================================================
v2.21 · galerías robustas, itinerario dibujado y contador
========================================================== */
/* Buscador RSVP: nunca recortado ni fuera del recuadro */ .guest-search {
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:visible!important
}
.guest-search,.guest-search * {
box-sizing:border-box!important
}
.guest-search input#guestSearch {
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:14px 15px!important;
margin:0!important;
line-height:1.35!important;
overflow:visible!important;
text-overflow:clip!important;
}
.search-results {
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:hidden!important
}
/* Galerías: anulamos reglas antiguas globales ".gallery-slider,.slide" solo dentro de la galería nueva */ .v221-gallery {
box-sizing:border-box!important;
width:min(1100px,100%)!important;
max-width:100%!important;
min-width:0!important
}
.v221-gallery * {
box-sizing:border-box!important
}
.v221-gallery .gallery-slider {
max-width:100%!important;
min-width:0!important
}
.v221-gallery .gallery-image-button {
display:block!important;
width:100%!important;
height:100%!important;
min-width:0!important
}
.v221-gallery .gallery-image-button img {
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
object-fit:cover!important;
transform:none!important;
}
/* En estilos no secuenciales todas las fotos deben ser visibles. */ .v221-gallery.gallery-style-grid .gallery-slider, .v221-gallery.gallery-style-polaroid .gallery-slider, .v221-gallery.gallery-style-filmstrip .gallery-slider {
position:relative!important;
inset:auto!important;
height:auto!important;
opacity:1!important;
}
.v221-gallery.gallery-style-grid .slide, .v221-gallery.gallery-style-polaroid .slide, .v221-gallery.gallery-style-filmstrip .slide {
position:relative!important;
inset:auto!important;
opacity:1!important;
height:auto!important;
}
/* Mosaico editorial */ .v221-gallery.gallery-style-grid {
height:auto!important;
overflow:visible!important
}
.v221-gallery.gallery-style-grid .gallery-slider {
display:grid!important;
grid-template-columns:repeat(12,minmax(0,1fr))!important;
grid-auto-rows:105px!important;
gap:12px!important;
padding:0!important;
overflow:hidden!important;
}
.v221-gallery.gallery-style-grid .slide {
grid-column:span 4!important;
grid-row:span 3!important;
min-height:0!important;
border-radius:18px!important;
overflow:hidden!important
}
.v221-gallery.gallery-style-grid .slide:nth-child(5n+1) {
grid-column:span 7!important;
grid-row:span 4!important
}
.v221-gallery.gallery-style-grid .slide:nth-child(5n+2) {
grid-column:span 5!important;
grid-row:span 3!important
}
.v221-gallery.gallery-style-grid .slide:nth-child(5n+4) {
grid-column:span 5!important;
grid-row:span 3!important
}
/* Polaroids */ .v221-gallery.gallery-style-polaroid {
height:auto!important;
overflow:hidden!important
}
.v221-gallery.gallery-style-polaroid .gallery-slider {
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
align-items:flex-start!important;
gap:30px 20px!important;
padding:28px 20px 42px!important;
overflow:visible!important;
}
.v221-gallery.gallery-style-polaroid .slide {
flex:0 0 min(260px,30vw)!important;
width:min(260px,30vw)!important;
min-width:190px!important;
padding:10px 10px 38px!important;
background:#fff!important;
overflow:visible!important;
}
.v221-gallery.gallery-style-polaroid .gallery-image-button {
aspect-ratio:4/5!important;
height:auto!important
}
.v221-gallery.gallery-style-polaroid .gallery-image-button img {
aspect-ratio:4/5!important
}
/* Película */ .v221-gallery.gallery-style-filmstrip {
height:auto!important;
width:100%!important;
overflow:hidden!important;
padding:14px 0!important
}
.v221-gallery.gallery-style-filmstrip .gallery-slider {
display:flex!important;
flex-wrap:nowrap!important;
gap:12px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:18px clamp(14px,4vw,42px)!important;
scroll-snap-type:x mandatory!important;
-webkit-overflow-scrolling:touch;
}
.v221-gallery.gallery-style-filmstrip .slide {
flex:0 0 clamp(220px,34vw,370px)!important;
width:auto!important;
min-width:0!important;
aspect-ratio:4/5!important;
scroll-snap-align:center!important;
overflow:hidden!important;
}
.v221-gallery.gallery-style-filmstrip .gallery-image-button {
height:100%!important
}
/* Pila centrada de verdad */ .v221-gallery.gallery-style-stack {
position:relative!important;
width:min(760px,100%)!important;
height:clamp(430px,62vw,620px)!important;
margin-left:auto!important;
margin-right:auto!important
}
.v221-gallery.gallery-style-stack .gallery-slider {
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:visible!important
}
.v221-gallery.gallery-style-stack .slide {
position:absolute!important;
left:50%!important;
top:50%!important;
inset:auto!important;
width:min(72%,520px)!important;
height:86%!important;
opacity:0!important;
transform:translate(-50%,-50%) rotate(-4deg) scale(.94)!important;
}
.v221-gallery.gallery-style-stack .slide.active {
opacity:1!important;
transform:translate(-50%,-50%) rotate(0) scale(1)!important;
z-index:4!important;
}
.v221-gallery.gallery-style-stack .slide.active + .slide {
opacity:.38!important;
transform:translate(calc(-50% + 22px),calc(-50% + 8px)) rotate(5deg) scale(.96)!important;
z-index:2!important;
}
/* Carrusel: se conserva su aspecto, solo aseguramos contención */ .v221-gallery.gallery-style-carousel {
width:min(1000px,100%)!important;
max-width:100%!important;
overflow:visible!important
}
.v221-gallery.gallery-style-carousel .gallery-slider {
overflow:hidden!important;
max-width:100%!important
}
/* Itinerario: track real, no pseudo-elementos dependientes de cascadas viejas */ .timeline {
--timeline-progress:0;
position:relative!important
}
.timeline:before,.timeline:after {
display:none!important
}
.timeline-track {
position:absolute;
left:180px;
top:7px;
bottom:7px;
width:2px;
background:color-mix(in srgb,var(--ornament-color) 18%,transparent);
z-index:0;
overflow:visible;
}
.timeline-fill {
display:block;
width:100%;
height:0;
background:linear-gradient(180deg,var(--ornament-color),var(--gold));
box-shadow:0 0 12px color-mix(in srgb,var(--ornament-color) 40%,transparent);
transition:height .08s linear;
will-change:height;
}
.timeline-item {
z-index:1!important
}
.timeline-dot {
position:relative;
z-index:2!important
}
/* Adornos opcionales del contador, independientes de la plantilla y las esquinas */ .countdown .count-grid {
position:relative!important;
isolation:isolate
}
.countdown-decor-classic-lines .count-grid:before, .countdown-decor-classic-lines .count-grid:after {
content:"";
position:absolute;
left:6%;
right:6%;
height:1px;
background:linear-gradient(90deg,transparent,var(--countdown-border) 16%,var(--countdown-border) 84%,transparent);
pointer-events:none;
z-index:4;
}
.countdown-decor-classic-lines .count-grid:before {
top:-12px
}
.countdown-decor-classic-lines .count-grid:after {
bottom:-12px
}
.countdown-decor-double-frame .count-grid:before {
content:"";
position:absolute;
inset:-9px;
border:1px solid var(--countdown-border);
border-radius:inherit;
pointer-events:none;
z-index:4;
}
.countdown-decor-double-frame .count-grid:after {
content:"";
position:absolute;
inset:-15px;
border:1px solid color-mix(in srgb,var(--countdown-border) 45%,transparent);
border-radius:inherit;
pointer-events:none;
z-index:3;
}
.countdown-decor-corner-stars .count-grid:before, .countdown-decor-corner-stars .count-grid:after {
position:absolute;
color:var(--countdown-border);
font-size:15px;
letter-spacing:7px;
z-index:4;
pointer-events:none;
text-shadow:0 0 12px color-mix(in srgb,var(--countdown-border) 50%,transparent)
}
.countdown-decor-corner-stars .count-grid:before {
content:"✦ ◇";
left:-8px;
top:-17px
}
.countdown-decor-corner-stars .count-grid:after {
content:"◇ ✦";
right:-8px;
bottom:-17px
}
.countdown-decor-artdeco-lines .count-grid:before {
content:"";
position:absolute;
inset:-12px;
pointer-events:none;
z-index:4;
background: linear-gradient(var(--countdown-border),var(--countdown-border)) left top/24% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right top/24% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left bottom/24% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right bottom/24% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left top/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right top/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left bottom/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right bottom/1px 38% no-repeat;
}
.countdown-decor-artdeco-lines .count-grid:after {
content:"◇";
position:absolute;
left:50%;
top:-22px;
translate:-50% 0;
color:var(--countdown-border);
z-index:5;
}
/* Responsive definitivo */ @media(max-width:760px) {
.timeline-track {
left:20px!important;
top:7px!important;
bottom:7px!important
}
.v221-gallery.gallery-style-grid .gallery-slider {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-rows:112px!important;
gap:8px!important
}
.v221-gallery.gallery-style-grid .slide,.v221-gallery.gallery-style-grid .slide:nth-child(n) {
grid-column:span 1!important;
grid-row:span 2!important
}
.v221-gallery.gallery-style-grid .slide:first-child {
grid-column:1/-1!important;
grid-row:span 3!important
}
.v221-gallery.gallery-style-polaroid .gallery-slider {
flex-wrap:nowrap!important;
justify-content:flex-start!important;
overflow-x:auto!important;
overflow-y:visible!important;
scroll-snap-type:x mandatory!important;
padding:26px 12vw 42px!important;
gap:18px!important;
}
.v221-gallery.gallery-style-polaroid .slide {
flex:0 0 min(76vw,300px)!important;
width:min(76vw,300px)!important;
min-width:0!important;
scroll-snap-align:center!important;
}
.v221-gallery.gallery-style-filmstrip .slide {
flex-basis:min(74vw,300px)!important
}
.v221-gallery.gallery-style-stack {
height:clamp(410px,122vw,535px)!important;
width:100%!important
}
.v221-gallery.gallery-style-stack .slide {
width:min(80%,360px)!important;
height:84%!important
}
.v221-gallery.gallery-style-carousel {
height:clamp(370px,110vw,520px)!important;
max-height:68svh!important
}
.countdown-decor-double-frame .count-grid:before {
inset:-6px
}
.countdown-decor-double-frame .count-grid:after {
inset:-10px
}
}
@media(max-width:480px) {
.story {
padding-left:14px!important;
padding-right:14px!important
}
.v221-gallery {
width:100%!important;
margin-left:auto!important;
margin-right:auto!important
}
.v221-gallery.gallery-style-grid .gallery-slider {
grid-auto-rows:100px!important
}
.v221-gallery.gallery-style-polaroid .gallery-slider {
padding-left:10vw!important;
padding-right:10vw!important
}
}
/* ==========================================================
v2.22 · corrección final Pila + adornos del contador
========================================================== */
/* Pila de recuerdos:
centrado SOLO horizontal. Conserva su posición vertical natural
dentro del bloque Historia, debajo del texto y entre las flechas. */ .v221-gallery.gallery-style-stack {
position:relative!important;
width:min(760px,100%)!important;
height:clamp(430px,62vw,620px)!important;
margin:42px auto 28px!important;
overflow:visible!important;
}
.v221-gallery.gallery-style-stack .gallery-slider {
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:visible!important;
}
.v221-gallery.gallery-style-stack .slide {
position:absolute!important;
left:50%!important;
top:18px!important;
bottom:auto!important;
right:auto!important;
width:min(72%,520px)!important;
height:calc(100% - 44px)!important;
opacity:0!important;
transform:translateX(-50%) rotate(-4deg) scale(.94)!important;
transform-origin:center center!important;
}
.v221-gallery.gallery-style-stack .slide.active {
opacity:1!important;
transform:translateX(-50%) rotate(0deg) scale(1)!important;
z-index:4!important;
}
.v221-gallery.gallery-style-stack .slide.active + .slide {
opacity:.38!important;
transform:translateX(calc(-50% + 22px)) translateY(8px) rotate(5deg) scale(.96)!important;
z-index:2!important;
}
.v221-gallery.gallery-style-stack .gallery-prev, .v221-gallery.gallery-style-stack .gallery-next {
top:50%!important;
translate:0 -50%!important;
}
.v221-gallery.gallery-style-stack .gallery-progress {
bottom:-10px!important
}
.v221-gallery.gallery-style-stack .gallery-dots {
bottom:-30px!important
}
/* Los adornos estaban siendo recortados por overflow:hidden.
Solo los estilos que realmente dibujan fuera del bloque liberan el overflow. */ .countdown-decor-classic-lines, .countdown-decor-double-frame, .countdown-decor-corner-stars, .countdown-decor-artdeco-lines {
overflow:visible!important;
}
.countdown-decor-classic-lines .count-grid, .countdown-decor-double-frame .count-grid, .countdown-decor-corner-stars .count-grid, .countdown-decor-artdeco-lines .count-grid {
overflow:visible!important;
}
/* Conserva el radio visual de las celdas aunque el wrapper permita ver adornos externos. */ .countdown-decor-classic-lines .count-grid>div:first-child, .countdown-decor-double-frame .count-grid>div:first-child, .countdown-decor-corner-stars .count-grid>div:first-child, .countdown-decor-artdeco-lines .count-grid>div:first-child {
border-top-left-radius:var(--countdown-radius);
border-bottom-left-radius:var(--countdown-radius);
}
.countdown-decor-classic-lines .count-grid>div:last-child, .countdown-decor-double-frame .count-grid>div:last-child, .countdown-decor-corner-stars .count-grid>div:last-child, .countdown-decor-artdeco-lines .count-grid>div:last-child {
border-top-right-radius:var(--countdown-radius);
border-bottom-right-radius:var(--countdown-radius);
}
/* Líneas clásicas un poco más visibles y con remates, usando el color configurable del contador. */ .countdown-decor-classic-lines .count-grid:before, .countdown-decor-classic-lines .count-grid:after {
left:4%!important;
right:4%!important;
height:1px!important;
opacity:1!important;
background: radial-gradient(circle at 0 50%,var(--countdown-border) 0 2px,transparent 2.5px), radial-gradient(circle at 100% 50%,var(--countdown-border) 0 2px,transparent 2.5px), linear-gradient(90deg,transparent 0,var(--countdown-border) 10%,var(--countdown-border) 90%,transparent 100%)!important;
}
.countdown-decor-classic-lines .count-grid:before {
top:-13px!important
}
.countdown-decor-classic-lines .count-grid:after {
bottom:-13px!important
}
/* Móvil: misma lógica, con proporciones contenidas. */ @media(max-width:760px) {
.v221-gallery.gallery-style-stack {
width:100%!important;
height:clamp(410px,122vw,535px)!important;
margin:30px auto 24px!important;
}
.v221-gallery.gallery-style-stack .slide {
left:50%!important;
top:14px!important;
width:min(80%,360px)!important;
height:calc(100% - 38px)!important;
transform:translateX(-50%) rotate(-3deg) scale(.95)!important;
}
.v221-gallery.gallery-style-stack .slide.active {
transform:translateX(-50%) rotate(0) scale(1)!important;
}
.v221-gallery.gallery-style-stack .slide.active + .slide {
transform:translateX(calc(-50% + 14px)) translateY(6px) rotate(4deg) scale(.96)!important;
}
.countdown-decor-classic-lines .count-grid:before {
top:-10px!important
}
.countdown-decor-classic-lines .count-grid:after {
bottom:-10px!important
}
.countdown-decor-double-frame .count-grid:before {
inset:-5px!important
}
.countdown-decor-double-frame .count-grid:after {
inset:-9px!important
}
}
/* En contador móvil 2x2, el redondeo debe aplicarse a las cuatro esquinas correctas. */ @media(max-width:620px) {
.countdown-decor-classic-lines .count-grid>div, .countdown-decor-double-frame .count-grid>div, .countdown-decor-corner-stars .count-grid>div, .countdown-decor-artdeco-lines .count-grid>div {
border-radius:0!important
}
.countdown-decor-classic-lines .count-grid>div:nth-child(1), .countdown-decor-double-frame .count-grid>div:nth-child(1), .countdown-decor-corner-stars .count-grid>div:nth-child(1), .countdown-decor-artdeco-lines .count-grid>div:nth-child(1) {
border-top-left-radius:var(--countdown-radius)!important
}
.countdown-decor-classic-lines .count-grid>div:nth-child(2), .countdown-decor-double-frame .count-grid>div:nth-child(2), .countdown-decor-corner-stars .count-grid>div:nth-child(2), .countdown-decor-artdeco-lines .count-grid>div:nth-child(2) {
border-top-right-radius:var(--countdown-radius)!important
}
.countdown-decor-classic-lines .count-grid>div:nth-child(3), .countdown-decor-double-frame .count-grid>div:nth-child(3), .countdown-decor-corner-stars .count-grid>div:nth-child(3), .countdown-decor-artdeco-lines .count-grid>div:nth-child(3) {
border-bottom-left-radius:var(--countdown-radius)!important
}
.countdown-decor-classic-lines .count-grid>div:nth-child(4), .countdown-decor-double-frame .count-grid>div:nth-child(4), .countdown-decor-corner-stars .count-grid>div:nth-child(4), .countdown-decor-artdeco-lines .count-grid>div:nth-child(4) {
border-bottom-right-radius:var(--countdown-radius)!important
}
}
/* ==========================================================
v2.23 · contador sincronizado: una sola fuente de verdad
========================================================== */ body[class*="template-"] #countdown.countdown {
background:var(--countdown-bg)!important;
color:var(--countdown-label)!important;
border-radius:var(--countdown-radius)!important;
width:min(var(--countdown-max),calc(100% - 36px))!important;
overflow:visible!important;
}
body[class*="template-"] #countdown .count-grid {
position:relative!important;
width:100%!important;
max-width:var(--countdown-max)!important;
background:transparent!important;
border:1px solid var(--countdown-border)!important;
border-left-color:var(--countdown-border)!important;
border-right-color:var(--countdown-border)!important;
border-radius:var(--countdown-radius)!important;
overflow:visible!important;
isolation:isolate;
}
body[class*="template-"] #countdown .count-grid>div {
position:relative;
background:transparent!important;
border-color:var(--countdown-border)!important;
color:var(--countdown-label)!important;
z-index:2;
}
body[class*="template-"] #countdown .count-grid strong {
color:var(--countdown-number)!important
}
body[class*="template-"] #countdown .count-grid span:not(.countdown-decoration-layer) {
color:var(--countdown-label)!important
}
/* Desactivar definitivamente los adornos pseudo-elemento antiguos. */ #countdown .count-grid:before,#countdown .count-grid:after {
content:none!important;
display:none!important
}
/* Capa real de decoración: no depende de ::before/::after ni de reglas de plantilla. */ #countdown .countdown-decoration-layer {
position:absolute!important;
inset:0!important;
display:block!important;
pointer-events:none!important;
z-index:5!important;
color:var(--countdown-border)!important;
overflow:visible!important;
}
#countdown .countdown-decoration-layer i, #countdown .countdown-decoration-layer b {
position:absolute;
display:none;
color:var(--countdown-border)!important
}
/* Líneas clásicas */ #countdown.countdown-decor-classic-lines .countdown-decoration-layer i {
display:block;
height:1px;
left:4%;
right:4%;
background: radial-gradient(circle at 0 50%,var(--countdown-border) 0 2px,transparent 2.5px), radial-gradient(circle at 100% 50%,var(--countdown-border) 0 2px,transparent 2.5px), linear-gradient(90deg,transparent,var(--countdown-border) 10%,var(--countdown-border) 90%,transparent);
}
#countdown.countdown-decor-classic-lines .countdown-decoration-layer i:nth-child(1) {
top:-13px
}
#countdown.countdown-decor-classic-lines .countdown-decoration-layer i:nth-child(2) {
bottom:-13px
}
/* Marco doble */ #countdown.countdown-decor-double-frame .countdown-decoration-layer:before, #countdown.countdown-decor-double-frame .countdown-decoration-layer:after {
content:"";
position:absolute;
border:1px solid var(--countdown-border);
border-radius:var(--countdown-radius);
}
#countdown.countdown-decor-double-frame .countdown-decoration-layer:before {
inset:-8px
}
#countdown.countdown-decor-double-frame .countdown-decoration-layer:after {
inset:-14px;
opacity:.55
}
/* Destellos */ #countdown.countdown-decor-corner-stars .countdown-decoration-layer b {
display:block;
font-size:16px;
text-shadow:0 0 13px var(--countdown-border)
}
#countdown.countdown-decor-corner-stars .countdown-decoration-layer b:nth-of-type(1) {
left:-7px;
top:-13px
}
#countdown.countdown-decor-corner-stars .countdown-decoration-layer b:nth-of-type(2) {
right:-7px;
bottom:-13px
}
/* Art Déco */ #countdown.countdown-decor-artdeco-lines .countdown-decoration-layer {
inset:-12px!important;
background: linear-gradient(var(--countdown-border),var(--countdown-border)) left top/25% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right top/25% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left bottom/25% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right bottom/25% 1px no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left top/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right top/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) left bottom/1px 38% no-repeat, linear-gradient(var(--countdown-border),var(--countdown-border)) right bottom/1px 38% no-repeat;
}
#countdown.countdown-decor-artdeco-lines .countdown-decoration-layer b:nth-of-type(2) {
display:block;
left:50%;
top:-10px;
translate:-50% 0;
font-size:13px;
}
/* Esquinas florales: ornamento suave sin imágenes externas. */
#countdown.countdown-decor-floral-corners .countdown-decoration-layer:before,
#countdown.countdown-decor-floral-corners .countdown-decoration-layer:after{
content:"❦";
position:absolute;
color:var(--countdown-border);
font-size:28px;
line-height:1;
text-shadow:0 0 16px color-mix(in srgb,var(--countdown-border) 45%,transparent);
}
#countdown.countdown-decor-floral-corners .countdown-decoration-layer:before{left:-18px;top:-18px;rotate:-25deg}
#countdown.countdown-decor-floral-corners .countdown-decoration-layer:after{right:-18px;bottom:-18px;rotate:155deg}
/* Diamantes elegantes. */
#countdown.countdown-decor-diamond-frame .countdown-decoration-layer:before{
content:"";
position:absolute;
inset:-11px;
border:1px solid var(--countdown-border);
clip-path:polygon(2% 0,98% 0,100% 12%,100% 88%,98% 100%,2% 100%,0 88%,0 12%);
opacity:.82;
}
#countdown.countdown-decor-diamond-frame .countdown-decoration-layer b{
display:block;
font-size:15px;
}
#countdown.countdown-decor-diamond-frame .countdown-decoration-layer b:nth-of-type(1){left:50%;top:-18px;translate:-50% 0}
#countdown.countdown-decor-diamond-frame .countdown-decoration-layer b:nth-of-type(2){left:50%;bottom:-18px;translate:-50% 0}
/* Órbita celestial. */
#countdown.countdown-decor-celestial-orbit .countdown-decoration-layer:before{
content:"";
position:absolute;
inset:-13px -18px;
border:1px solid var(--countdown-border);
border-radius:50%;
opacity:.55;
}
#countdown.countdown-decor-celestial-orbit .countdown-decoration-layer:after{
content:"✦";
position:absolute;
right:5%;
top:-22px;
color:var(--countdown-border);
font-size:19px;
text-shadow:0 0 14px var(--countdown-border);
}
#countdown.countdown-decor-celestial-orbit .countdown-decoration-layer b:nth-of-type(1){
display:block;left:7%;bottom:-15px;font-size:11px;
}
/* Marco hacienda: doble línea con esquinas marcadas. */
#countdown.countdown-decor-hacienda-frame .countdown-decoration-layer{
inset:-10px!important;
border-top:2px double var(--countdown-border);
border-bottom:2px double var(--countdown-border);
}
#countdown.countdown-decor-hacienda-frame .countdown-decoration-layer:before,
#countdown.countdown-decor-hacienda-frame .countdown-decoration-layer:after{
content:"◆";
position:absolute;
top:50%;
translate:0 -50%;
color:var(--countdown-border);
font-size:13px;
}
#countdown.countdown-decor-hacienda-frame .countdown-decoration-layer:before{left:-8px}
#countdown.countdown-decor-hacienda-frame .countdown-decoration-layer:after{right:-8px}
/* Puntos minimalistas. */
#countdown.countdown-decor-minimal-dots .countdown-decoration-layer:before,
#countdown.countdown-decor-minimal-dots .countdown-decoration-layer:after{
content:"•••••••";
position:absolute;
left:50%;
translate:-50% 0;
color:var(--countdown-border);
font-size:10px;
letter-spacing:8px;
white-space:nowrap;
}
#countdown.countdown-decor-minimal-dots .countdown-decoration-layer:before{top:-17px}
#countdown.countdown-decor-minimal-dots .countdown-decoration-layer:after{bottom:-17px}
#countdown.countdown-decor-none .countdown-decoration-layer {
display:none!important
}
/* Móvil: mismos colores/adornos, geometría 2x2 estable */ @media(max-width:620px) {
body[class*="template-"] #countdown.countdown {
width:calc(100% - 24px)!important
}
body[class*="template-"] #countdown .count-grid {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#countdown.countdown-decor-classic-lines .countdown-decoration-layer i:nth-child(1) {
top:-10px
}
#countdown.countdown-decor-classic-lines .countdown-decoration-layer i:nth-child(2) {
bottom:-10px
}
#countdown.countdown-decor-double-frame .countdown-decoration-layer:before {
inset:-5px
}
#countdown.countdown-decor-double-frame .countdown-decoration-layer:after {
inset:-9px
}
}
/* ==========================================================
v2.24 · Sección ceremonial "Nuestros padres"
========================================================== */ .parents-section {
position:relative;
overflow:hidden;
padding-top:clamp(96px,12vw,160px)!important;
padding-bottom:clamp(96px,12vw,160px)!important;
background: radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--secondary) 28%,transparent),transparent 44%), var(--paper);
}
.parents-stage {
position:relative;
width:min(980px,calc(100% - 34px));
margin:0 auto;
padding:clamp(46px,7vw,88px) clamp(22px,6vw,72px);
text-align:center;
background:color-mix(in srgb,var(--surface) 82%,transparent);
border:1px solid color-mix(in srgb,var(--ornament-color) 38%,transparent);
border-radius:var(--template-radius,28px);
box-shadow:0 28px 90px rgba(0,0,0,.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
isolation:isolate;
}
.parents-stage:before,.parents-stage:after {
content:"";
position:absolute;
pointer-events:none;
z-index:-1;
border:1px solid color-mix(in srgb,var(--ornament-color) 24%,transparent)
}
.parents-stage:before {
inset:12px;
border-radius:inherit
}
.parents-stage:after {
inset:-13px;
border-radius:inherit;
opacity:.5
}
.parents-aura {
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:-1
}
.parents-aura i {
position:absolute;
border-radius:50%;
filter:blur(20px);
opacity:.24;
background:var(--ornament-color)
}
.parents-aura i:nth-child(1) {
width:180px;
height:180px;
left:-70px;
top:-60px
}
.parents-aura i:nth-child(2) {
width:120px;
height:120px;
right:4%;
top:12%
}
.parents-aura i:nth-child(3) {
width:220px;
height:220px;
right:-100px;
bottom:-90px
}
.parents-crown {
width:52px;
height:52px;
margin:-72px auto 24px;
display:grid;
place-items:center;
border-radius:50%;
color:var(--ornament-color);
background:var(--surface);
border:1px solid color-mix(in srgb,var(--ornament-color) 52%,transparent);
box-shadow:0 10px 32px rgba(0,0,0,.12);
font-size:20px
}
.parents-heading {
max-width:720px;
margin:0 auto 38px
}
.parents-heading .eyebrow {
color:var(--ornament-color)!important
}
.parents-heading .script-title {
font-size:clamp(42px,7vw,82px);
line-height:1;
color:var(--heading-color)!important;
margin:8px 0 14px
}
.parents-heading>p:last-child {
max-width:650px;
margin:0 auto;
line-height:1.8;
color:var(--ink)
}
.parents-people {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
gap:16px;
position:relative
}
.parent-person {
position:relative;
min-height:150px;
padding:28px 20px 24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:color-mix(in srgb,var(--surface) 74%,transparent);
border:1px solid color-mix(in srgb,var(--ornament-color) 22%,transparent);
border-radius:calc(var(--template-radius,28px) * .72);
overflow:hidden;
transition:transform .35s ease,box-shadow .35s ease;
}
.parent-person:hover {
transform:translateY(-4px);
box-shadow:0 18px 44px rgba(0,0,0,.1)
}
.parent-person .parent-number {
position:absolute;
left:14px;
top:10px;
font:600 10px var(--body-font);
letter-spacing:.18em;
color:color-mix(in srgb,var(--ornament-color) 55%,transparent)
}
.parent-person small {
display:block;
margin-bottom:8px;
text-transform:uppercase;
letter-spacing:.16em;
font-size:9px;
color:var(--ornament-color)
}
.parent-person strong {
font:clamp(25px,3vw,38px)/1.05 var(--title-font);
font-weight:400;
color:var(--heading-color)
}
.parent-person>i {
display:block;
width:48px;
height:1px;
margin-top:14px;
background:linear-gradient(90deg,transparent,var(--ornament-color),transparent)
}
.parents-signature {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin:34px auto -12px;
color:var(--ornament-color)
}
.parents-signature span {
width:min(150px,28%);
height:1px;
background:linear-gradient(90deg,transparent,var(--ornament-color))
}
.parents-signature span:last-child {
background:linear-gradient(90deg,var(--ornament-color),transparent)
}
/* Personalidad por plantilla sin perder colores configurables */ body.template-luxury .parents-stage,body.template-gothic-moon .parents-stage,body.template-celestial .parents-stage,body.template-sapphire-glass .parents-stage {
box-shadow:0 32px 100px rgba(0,0,0,.34),inset 0 0 60px color-mix(in srgb,var(--ornament-color) 7%,transparent)
}
body.template-artdeco .parents-stage,body.template-royal-cinema .parents-stage,body.template-energy-anime .parents-stage {
border-radius:6px;
clip-path:polygon(3% 0,97% 0,100% 7%,100% 93%,97% 100%,3% 100%,0 93%,0 7%)
}
body.template-artdeco .parent-person,body.template-royal-cinema .parent-person {
border-radius:4px
}
body.template-hacienda .parents-stage {
border-radius:64px 64px 18px 18px
}
body.template-hacienda .parent-person {
border-radius:42px 42px 14px 14px
}
body.template-garden .parents-stage,body.template-enchanted-forest .parents-stage,body.template-watercolor .parents-stage,body.template-emerald-mist .parents-stage {
border-radius:38% 62% 45% 55%/10% 12% 10% 12%
}
body.template-romantic .parents-stage,body.template-rose-crystal .parents-stage,body.template-lavender-dream .parents-stage {
border-radius:54px
}
body.template-modern .parents-stage,body.template-editorial .parents-stage {
border-radius:2px;
box-shadow:0 22px 60px rgba(0,0,0,.08)
}
body.template-magic-academy .parents-stage:after,body.template-celestial .parents-stage:after,body.template-lavender-dream .parents-stage:after {
box-shadow:0 0 40px color-mix(in srgb,var(--ornament-color) 20%,transparent)
}
body.template-golden-mocha .parents-stage,body.template-marble .parents-stage {
box-shadow:0 30px 90px color-mix(in srgb,var(--ornament-color) 12%,rgba(0,0,0,.12))
}
/* Colores propios por sección Padres */ body[class*="template-"] #padres[style*="--section-bg"] {
background:var(--section-bg)!important;
color:var(--section-text)!important
}
body[class*="template-"] #padres[style*="--section-bg"] .parents-heading .script-title, body[class*="template-"] #padres[style*="--section-bg"] .parent-person strong {
color:var(--section-heading)!important
}
body[class*="template-"] #padres[style*="--section-bg"] :is(.parents-heading .eyebrow,.parent-person small,.parents-crown,.parents-signature) {
color:var(--section-accent)!important
}
@media(max-width:700px) {
.parents-section {
padding-top:82px!important;
padding-bottom:82px!important
}
.parents-stage {
width:calc(100% - 24px);
padding:48px 15px 42px;
border-radius:min(var(--template-radius,28px),28px)
}
.parents-crown {
margin-top:-70px
}
.parents-heading {
margin-bottom:26px
}
.parents-heading .script-title {
font-size:clamp(40px,14vw,62px)
}
.parents-people {
grid-template-columns:1fr;
gap:11px
}
.parent-person {
min-height:122px;
padding:24px 16px 20px
}
.parent-person strong {
font-size:clamp(29px,9vw,38px)
}
body.template-garden .parents-stage,body.template-enchanted-forest .parents-stage,body.template-watercolor .parents-stage,body.template-emerald-mist .parents-stage {
border-radius:30px
}
}
/* ==========================================================
v2.25 · Padres: escritorio en filas de dos, móvil intacto
========================================================== */ @media(min-width:701px) {
.parents-people {
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:18px 22px!important;
max-width:820px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.parent-person {
width:100%!important;
min-width:0!important;
}
.parents-people>.parent-person:last-child:nth-child(odd) {
grid-column:1/-1!important;
width:min(399px,calc(50% - 11px))!important;
justify-self:center!important;
}
}
/* Tablet conserva dos columnas mientras haya espacio; celular vuelve a una. */ @media(min-width:701px) and (max-width:900px) {
.parents-people {
max-width:720px!important;
gap:14px!important
}
}
@media(max-width:700px) {
.parents-people {
grid-template-columns:1fr!important;
max-width:100%!important
}
.parents-people>.parent-person:last-child:nth-child(odd) {
grid-column:auto!important;
width:100%!important
}
}
/* ==========================================================
v2.30 · sobres adicionales
========================================================== */ .invitation-cover.cover-vellum-floral {
background:radial-gradient(circle at 18% 18%,rgba(185,139,120,.22),transparent 28%),linear-gradient(145deg,#f3e8dc,#d8c2b2)!important
}
.cover-vellum-floral .envelope-shell {
filter:drop-shadow(0 25px 50px rgba(71,48,36,.22))
}
.cover-vellum-floral .envelope-back,.cover-vellum-floral .envelope-pocket-front,.cover-vellum-floral .envelope-pocket-left,.cover-vellum-floral .envelope-pocket-right,.cover-vellum-floral .envelope-flap {
background:rgba(255,248,241,.72)!important;
backdrop-filter:blur(7px);
border-color:rgba(126,88,70,.22)!important
}
.cover-vellum-floral .envelope-shell:before,.cover-vellum-floral .envelope-shell:after {
content:"❦";
position:absolute;
z-index:12;
color:#8f6655;
font-size:34px;
opacity:.6
}
.cover-vellum-floral .envelope-shell:before {
left:24px;
bottom:18px;
rotate:-18deg
}
.cover-vellum-floral .envelope-shell:after {
right:24px;
top:18px;
rotate:160deg
}
.invitation-cover.cover-royal-navy {
background:radial-gradient(circle at 50% 25%,rgba(206,168,92,.17),transparent 25%),linear-gradient(145deg,#18253e,#07101f)!important
}
.cover-royal-navy .envelope-back,.cover-royal-navy .envelope-pocket-front,.cover-royal-navy .envelope-pocket-left,.cover-royal-navy .envelope-pocket-right,.cover-royal-navy .envelope-flap {
background:#12233e!important;
border-color:#caa75e!important
}
.cover-royal-navy .wax-seal {
background:radial-gradient(circle at 38% 32%,#e4c679,#9b762f)!important;
color:#0f1d32!important;
box-shadow:0 8px 25px rgba(0,0,0,.38),inset 0 0 0 4px rgba(255,236,180,.18)!important
}
.invitation-cover.cover-kraft-botanical {
background:linear-gradient(135deg,#d6bd94,#8c6d45)!important
}
.cover-kraft-botanical .envelope-back,.cover-kraft-botanical .envelope-pocket-front,.cover-kraft-botanical .envelope-pocket-left,.cover-kraft-botanical .envelope-pocket-right,.cover-kraft-botanical .envelope-flap {
background:#b89464!important;
border-color:#755536!important
}
.cover-kraft-botanical .envelope-shell:before {
content:"🌿";
position:absolute;
z-index:14;
left:-22px;
top:32%;
font-size:52px;
rotate:-30deg;
filter:saturate(.65)
}
.cover-kraft-botanical .envelope-shell:after {
content:"🌿";
position:absolute;
z-index:14;
right:-20px;
bottom:18%;
font-size:48px;
rotate:150deg;
filter:saturate(.65)
}
.invitation-cover.cover-holographic {
background:linear-gradient(125deg,#dffcff,#f7ddff 35%,#fff4cf 67%,#dfe6ff)!important
}
.cover-holographic .envelope-shell {
filter:drop-shadow(0 22px 45px rgba(75,75,130,.2))
}
.cover-holographic .envelope-back,.cover-holographic .envelope-pocket-front,.cover-holographic .envelope-pocket-left,.cover-holographic .envelope-pocket-right,.cover-holographic .envelope-flap {
background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(213,246,255,.64),rgba(247,218,255,.62))!important;
border-color:rgba(110,118,170,.22)!important
}
.cover-holographic .wax-seal {
background:linear-gradient(135deg,#77eaff,#d986ff,#ffe58b)!important;
color:#322b53!important
}
.invitation-cover.cover-minimal-arch {
background:#eee9e0!important
}
.cover-minimal-arch .envelope-shell {
border-radius:160px 160px 18px 18px!important;
box-shadow:0 28px 65px rgba(39,32,26,.14)
}
.cover-minimal-arch .envelope-back,.cover-minimal-arch .envelope-pocket-front,.cover-minimal-arch .envelope-pocket-left,.cover-minimal-arch .envelope-pocket-right,.cover-minimal-arch .envelope-flap {
background:#faf8f2!important;
border-color:#26211d!important
}
.cover-minimal-arch .wax-seal {
background:#26211d!important;
color:#faf8f2!important
}
.invitation-cover.cover-black-tie {
background:radial-gradient(circle at 50% 24%,rgba(212,179,108,.1),transparent 22%),#080808!important
}
.cover-black-tie .envelope-back,.cover-black-tie .envelope-pocket-front,.cover-black-tie .envelope-pocket-left,.cover-black-tie .envelope-pocket-right,.cover-black-tie .envelope-flap {
background:#151515!important;
border:1px solid rgba(216,184,116,.5)!important
}
.cover-black-tie .envelope-shell {
box-shadow:0 32px 90px rgba(0,0,0,.5)
}
.cover-black-tie .wax-seal {
background:#d5b56f!important;
color:#111!important
}
.cover-black-tie .envelope-title {
letter-spacing:.28em!important;
text-transform:uppercase!important
}
/* ==========================================================
v2.30 · plantillas experimentales radicalmente distintas
========================================================== */ body.template-newspaper-noir {
--template-radius:0px;
background:#f2eee5!important;
background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 4px)!important
}
body.template-newspaper-noir .header {
border-bottom:3px double var(--ornament-color)!important
}
body.template-newspaper-noir .hero {
min-height:88vh!important;
filter:grayscale(.8) contrast(1.05)
}
body.template-newspaper-noir .hero-copy {
max-width:900px!important;
text-align:left!important;
border-top:6px double var(--ornament-color);
border-bottom:2px solid var(--ornament-color);
padding:28px 0!important
}
body.template-newspaper-noir .hero-copy h1,body.template-newspaper-noir .script-title {
text-transform:uppercase;
letter-spacing:.025em;
font-family:"Bodoni Moda",serif!important
}
body.template-newspaper-noir .section {
border-bottom:1px solid color-mix(in srgb,var(--ornament-color) 30%,transparent)
}
body.template-newspaper-noir :is(.location-card,.parent-person,.rsvp-card,.count-grid) {
border-radius:0!important;
box-shadow:none!important;
border-width:1px!important
}
body.template-newspaper-noir .story-inner {
display:grid;
grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
gap:42px;
align-items:start
}
body.template-newspaper-noir .eyebrow {
letter-spacing:.22em;
border-bottom:1px solid currentColor;
padding-bottom:6px
}
body.template-desert-boho {
--template-radius:34px;
background:#f8eddd!important
}
body.template-desert-boho .hero:after {
content:"";
position:absolute;
inset:auto -8% -8% 45%;
height:48%;
border-radius:50% 50% 0 0;
background:color-mix(in srgb,var(--secondary) 36%,transparent);
pointer-events:none
}
body.template-desert-boho :is(.location-card,.parent-person,.rsvp-card,.count-grid) {
border-radius:90px 18px 90px 18px!important;
border-color:color-mix(in srgb,var(--ornament-color) 38%,transparent)!important
}
body.template-desert-boho .section:nth-of-type(even) {
background:linear-gradient(135deg,color-mix(in srgb,var(--secondary) 30%,transparent),transparent)!important
}
body.template-desert-boho .script-title {
font-family:Sacramento,cursive!important;
font-size:clamp(50px,8vw,94px)!important
}
body.template-desert-boho .parents-stage {
border-radius:48% 52% 18% 18%/16% 16% 8% 8%!important
}
body.template-neon-future {
--template-radius:8px;
background:#070914!important;
color:#e9ffff!important
}
body.template-neon-future:before {
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
background:linear-gradient(rgba(98,246,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,78,219,.035) 1px,transparent 1px);
background-size:34px 34px
}
body.template-neon-future .header {
border-bottom:1px solid #62f6ff!important;
box-shadow:0 0 28px rgba(98,246,255,.12)
}
body.template-neon-future :is(.location-card,.parent-person,.rsvp-card,.count-grid,.parents-stage) {
background:rgba(9,16,31,.74)!important;
border:1px solid #62f6ff!important;
border-radius:8px!important;
box-shadow:0 0 0 1px rgba(255,78,219,.12),0 0 28px rgba(98,246,255,.11)!important
}
body.template-neon-future .script-title,body.template-neon-future h2 {
font-family:Cinzel,serif!important;
text-transform:uppercase;
letter-spacing:.08em;
text-shadow:0 0 18px rgba(98,246,255,.24)
}
body.template-neon-future .btn {
clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
body.template-neon-future .timeline-fill {
box-shadow:0 0 18px #62f6ff!important
}
body.template-japanese-washi {
--template-radius:2px;
background:#f6f0e4!important;
background-image:radial-gradient(circle at 20% 10%,rgba(70,60,50,.035),transparent 36%),repeating-linear-gradient(91deg,rgba(90,70,50,.016) 0 1px,transparent 1px 7px)!important
}
body.template-japanese-washi .hero-copy {
max-width:650px!important;
margin-left:10%!important;
margin-right:auto!important;
text-align:left!important;
border-left:5px solid var(--ornament-color);
padding-left:28px!important
}
body.template-japanese-washi .section {
max-width:1180px;
margin-left:auto;
margin-right:auto
}
body.template-japanese-washi :is(.location-card,.parent-person,.rsvp-card,.count-grid) {
border-radius:2px!important;
box-shadow:8px 10px 0 color-mix(in srgb,var(--secondary) 30%,transparent)!important;
border:1px solid rgba(36,33,29,.18)!important
}
body.template-japanese-washi .script-title {
font-family:"Cormorant SC",serif!important;
letter-spacing:.08em
}
body.template-japanese-washi .eyebrow:before {
content:"●";
color:var(--ornament-color);
margin-right:8px
}
body.template-ocean-pearl {
--template-radius:34px;
background:linear-gradient(180deg,#eaf8fa,#d6edf0 42%,#effbfc)!important
}
body.template-ocean-pearl .section {
position:relative
}
body.template-ocean-pearl :is(.location-card,.parent-person,.rsvp-card,.count-grid,.parents-stage) {
background:rgba(255,255,255,.46)!important;
border:1px solid rgba(255,255,255,.72)!important;
backdrop-filter:blur(18px) saturate(125%);
border-radius:34px!important;
box-shadow:0 24px 60px rgba(44,112,125,.13),inset 0 0 30px rgba(255,255,255,.32)!important
}
body.template-ocean-pearl .script-title {
text-shadow:0 8px 25px rgba(64,137,151,.14)
}
body.template-ocean-pearl .section:after {
content:"";
position:absolute;
width:120px;
height:120px;
border-radius:50%;
right:4%;
top:10%;
background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.85),rgba(113,185,199,.08) 58%,transparent 62%);
pointer-events:none
}
body.template-museum-classic {
--template-radius:0px;
background:#ece4d6!important
}
body.template-museum-classic .hero {
margin:32px!important;
min-height:calc(100vh - 64px)!important;
border:14px solid #33251f;
outline:2px solid #b49258;
outline-offset:-8px
}
body.template-museum-classic .section {
width:min(1120px,calc(100% - 42px));
margin-left:auto;
margin-right:auto
}
body.template-museum-classic :is(.location-card,.parent-person,.rsvp-card,.parents-stage) {
background:#f8f3e8!important;
border:10px solid #3b2c24!important;
outline:1px solid #b99a65;
outline-offset:-6px;
border-radius:0!important;
box-shadow:0 22px 45px rgba(50,35,27,.15)!important
}
body.template-museum-classic .script-title {
font-family:"Bodoni Moda",serif!important
}
body.template-museum-classic .eyebrow {
font-family:"Libre Baskerville",serif!important;
font-style:italic;
text-transform:none!important;
letter-spacing:.03em!important
}
@media(max-width:760px) {
.cover-kraft-botanical .envelope-shell:before,.cover-kraft-botanical .envelope-shell:after {
font-size:36px
}
body.template-newspaper-noir .story-inner {
grid-template-columns:1fr!important;
gap:18px!important
}
body.template-newspaper-noir .hero-copy {
padding:18px 0!important
}
body.template-japanese-washi .hero-copy {
margin-left:6%!important;
margin-right:6%!important
}
body.template-museum-classic .hero {
margin:12px!important;
min-height:calc(100svh - 24px)!important;
border-width:7px!important
}
body.template-museum-classic .section {
width:calc(100% - 24px)!important
}
body.template-museum-classic :is(.location-card,.parent-person,.rsvp-card,.parents-stage) {
border-width:6px!important
}
body.template-neon-future .section {
overflow:hidden
}
}
/* ==========================================================
v2.38 · RSVP bloqueado después de confirmar
========================================================== */
.rsvp-already-confirmed{
display:grid;
justify-items:center;
gap:10px;
padding:clamp(20px,4vw,34px);
border:1px solid var(--rsvp-border);
border-radius:var(--template-radius,18px);
background:color-mix(in srgb,var(--rsvp-bg) 82%,transparent);
color:var(--rsvp-text);
text-align:center;
}
.rsvp-already-confirmed h3{
margin:0;
font-family:var(--title-font);
font-size:clamp(30px,5vw,48px);
color:inherit;
}
.rsvp-already-confirmed p{
margin:0;
max-width:620px;
}
.rsvp-already-confirmed small{
display:block;
max-width:620px;
line-height:1.55;
opacity:.78;
}
.rsvp-status-icon{
display:grid;
place-items:center;
width:52px;
height:52px;
border:1px solid currentColor;
border-radius:50%;
font-size:24px;
}
.rsvp-status-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:7px 14px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}
.rsvp-status-pill.yes{
background:rgba(42,132,77,.13);
color:#267548;
}
.rsvp-status-pill.no{
background:rgba(170,80,65,.13);
color:#9b4c40;
}
.rsvp-status-pill.used{
background:rgba(139,111,60,.14);
color:#84672f;
}
.guest-result.is-confirmed,
.guest-result.is-used{
opacity:.78;
}
.guest-result.is-confirmed small{
font-weight:700;
}
@media(max-width:620px){
.rsvp-already-confirmed{
padding:20px 14px;
}
.rsvp-status-icon{
width:46px;
height:46px;
}
}
/* ==========================================================
v2.40 · Confirmación sencilla por WhatsApp
========================================================== */
.whatsapp-rsvp-card{
display:grid;
justify-items:center;
gap:12px;
max-width:680px;
margin:0 auto;
padding:clamp(22px,5vw,40px);
border:1px solid var(--rsvp-border);
border-radius:var(--template-radius,22px);
background:var(--rsvp-bg);
color:var(--rsvp-text);
text-align:center;
}
.whatsapp-rsvp-card h3{
margin:0;
color:var(--heading-color);
font-family:var(--title-font);
font-size:clamp(28px,5vw,46px);
}
.whatsapp-rsvp-card p{
max-width:560px;
margin:0;
line-height:1.65;
}
.whatsapp-rsvp-card small{
max-width:560px;
line-height:1.5;
opacity:.75;
}
.whatsapp-rsvp-icon{
display:grid;
place-items:center;
width:58px;
height:58px;
border:1px solid currentColor;
border-radius:50%;
font-size:26px;
}
.whatsapp-rsvp-button{
min-width:min(320px,100%);
text-decoration:none;
}
.rsvp-closed-message{
padding:20px;
border:1px solid var(--rsvp-border);
border-radius:var(--template-radius,18px);
background:var(--rsvp-bg);
color:var(--rsvp-text);
text-align:center;
}
@media(max-width:620px){
.whatsapp-rsvp-card{
padding:22px 14px;
}
.whatsapp-rsvp-button{
width:100%;
}
}
/* ==========================================================
v2.58 · Texto básico enriquecido + Nota importante
========================================================== */
.rich-basic-text p{
margin:.45em 0;
white-space:normal;
}
.rich-basic-text p:first-child{margin-top:0}
.rich-basic-text p:last-child{margin-bottom:0}
.rich-basic-text ul,
.rich-basic-text ol{
margin:.65em 0;
padding-left:1.35em;
}
.rich-basic-text li{margin:.3em 0}
.rich-basic-text strong{font-weight:800}
.rich-basic-text em{font-style:italic}
.faq-question-text{
display:block;
min-width:0;
max-width:100%;
color:inherit;
overflow-wrap:anywhere;
word-break:normal;
}
.faq-question-text{
line-height:1.35
}
.faq-answer{
min-width:0;
max-width:100%;
padding:2px 38px 24px 0;
line-height:1.65;
overflow-wrap:anywhere;
word-break:normal;
color:inherit
}
.faq-answer p{
margin:.6em 0;
padding:0!important;
color:inherit!important
}
.faq-answer p:first-child{margin-top:0}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer ul,.faq-answer ol{
margin:.7em 0;
padding:0 0 0 1.4em
}
.rsvp-important-note{
display:grid;
grid-template-columns:40px minmax(0,1fr);
gap:11px;
align-items:start;
margin:0 auto 18px;
padding:13px 14px;
border:1px solid color-mix(in srgb,var(--ornament-color) 34%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--ornament-color) 8%,var(--surface));
color:var(--rsvp-text);
}
.rsvp-important-note>span{
display:grid;
place-items:center;
width:40px;height:40px;
border-radius:50%;
background:color-mix(in srgb,var(--ornament-color) 17%,transparent);
color:var(--ornament-color);
font-size:20px;
font-weight:900;
}
.rsvp-important-note>div{min-width:0}
.rsvp-important-note>div>b{
display:block;
margin-bottom:3px;
color:var(--ornament-color);
font-size:11px;
text-transform:uppercase;
letter-spacing:.07em;
}
.rsvp-important-note .rich-basic-text{font-size:13px;line-height:1.55}
/* ==========================================================
v2.60 · FAQ estable con formato enriquecido
========================================================== */
.faq-list,
.faq-list details,
.faq-list summary,
.faq-question-text,
.faq-answer{
box-sizing:border-box;
}
.faq-list details{
min-width:0;
overflow:visible;
}
.faq-list details[open] > summary{
margin:0;
}
.faq-question-text strong,
.faq-question-text em,
.faq-answer strong,
.faq-answer em{
max-width:100%;
}
@media(max-width:700px){
.faq-list summary{
grid-template-columns:minmax(0,1fr) 26px;
gap:12px;
padding:18px 0;
font-size:18px;
}
.faq-list summary .faq-toggle{
width:26px;
height:26px;
font-size:23px;
}
.faq-answer{
padding-right:0;
padding-bottom:20px;
}
.faq-answer ul,
.faq-answer ol{
padding-left:1.25em;
}
}
/* ==========================================================
v2.61 · Colores por sección compatibles con texto enriquecido
========================================================== */
/*
* Los bloques añadidos en v2.58/v2.60 deben obedecer la misma paleta
* de sección que el contenido clásico. Esta capa solo se activa cuando
* el administrador habilitó colores propios para esa sección.
*/
body[class*="template-"] .section[style*="--section-bg"] :is(
.faq-list details,
.faq-question-text,
.faq-answer,
.rich-basic-text,
.rich-basic-text p,
.rich-basic-text ul,
.rich-basic-text ol,
.rich-basic-text li,
.rich-basic-text strong,
.rich-basic-text em
){
color:var(--section-text)!important;
}
/* Pregunta y respuesta FAQ: el color general de la sección manda. */
body[class*="template-"] #faq[style*="--section-bg"] .faq-list details,
body[class*="template-"] #faq[style*="--section-bg"] .faq-question-text,
body[class*="template-"] #faq[style*="--section-bg"] .faq-answer,
body[class*="template-"] #faq[style*="--section-bg"] .faq-answer :is(p,ul,ol,li,strong,em){
color:var(--section-text)!important;
}
/* El botón + continúa siendo un acento, no texto general. */
body[class*="template-"] #faq[style*="--section-bg"] .faq-toggle{
color:var(--section-accent)!important;
}
/* Nota importante: cuerpo = texto de sección; etiqueta/icono = acento. */
body[class*="template-"] #confirmacion[style*="--section-bg"] .rsvp-important-note,
body[class*="template-"] #confirmacion[style*="--section-bg"] .rsvp-important-note .rich-basic-text,
body[class*="template-"] #confirmacion[style*="--section-bg"] .rsvp-important-note .rich-basic-text :is(p,ul,ol,li,strong,em){
color:var(--section-text)!important;
}
body[class*="template-"] #confirmacion[style*="--section-bg"] .rsvp-important-note>span,
body[class*="template-"] #confirmacion[style*="--section-bg"] .rsvp-important-note>div>b{
color:var(--section-accent)!important;
}
/* ==========================================================
v2.62 · Menú visual opcional + acompañantes preasignados
========================================================== */
.site-header.menu-minimal{
justify-content:center!important;
}
.site-header.menu-minimal .brand{
margin:0!important;
}
.site-header.menu-minimal .brand span{
text-align:center;
}
#companions{
display:grid;
gap:10px;
}
.companion-field{
display:grid;
gap:5px;
}
.companion-field>span{
font-weight:700;
}
.companion-field.companion-preassigned input[readonly]{
cursor:not-allowed;
opacity:.82;
background:color-mix(in srgb,var(--rsvp-input-bg) 86%,var(--rsvp-border));
border-style:dashed;
}
.companion-preassigned-note,
.companion-editable-note{
display:block;
font-size:11px;
line-height:1.35;
opacity:.72;
}
.companion-preassigned-note:before{
content:"🔒 ";
}
.companion-editable-note:before{
content:"✎ ";
}
@media(max-width:920px){
.site-header.menu-minimal{
justify-content:center!important;
padding-left:18px;
padding-right:18px;
}
.site-header.menu-minimal .brand{
max-width:100%;
}
.site-header.menu-minimal .brand span{
max-width:88vw;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
/* ==========================================================
v2.63 · Selección individual de personas por invitación
========================================================== */
.party-mode-granted{margin-bottom:14px}
.party-selection-panel{display:grid;gap:10px;margin-top:12px}
.party-selection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 2px}
.party-selection-head>div{display:grid;gap:3px}.party-selection-head b{font-size:14px}.party-selection-head small{opacity:.72;line-height:1.45}
.party-selected-count{flex:0 0 auto;padding:6px 9px;border:1px solid var(--rsvp-border);border-radius:999px;font-size:10px;font-weight:800}
.party-member-list{display:grid;gap:8px}
.party-member{position:relative;display:grid;grid-template-columns:22px 18px minmax(0,1fr);gap:9px;align-items:start;margin:0!important;padding:11px;border:1px solid color-mix(in srgb,var(--rsvp-border) 58%,transparent);border-radius:12px;background:color-mix(in srgb,var(--rsvp-bg) 88%,white 12%);cursor:pointer}
.party-member>input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.party-check-ui{display:grid;place-items:center;width:18px;height:18px;margin-top:2px;border:1px solid var(--rsvp-border);border-radius:5px;background:var(--rsvp-input-bg)}
.party-member>input[type="checkbox"]:checked + .party-check-ui:after{content:"✓";font-size:13px;font-weight:900;color:var(--rsvp-text)}
.party-member.is-selected{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rsvp-border) 70%,transparent)}
.party-member-body{display:grid;gap:5px;min-width:0}.party-member-body>b{font-size:12px}.party-member-body small{opacity:.72;line-height:1.4}
.party-member-body input[type="text"]{width:100%;min-width:0}
.party-member-body input[readonly]{opacity:.82;cursor:not-allowed}
.party-member.is-holder{grid-template-columns:22px 18px minmax(0,1fr)}
.party-member.is-holder>div{display:grid;gap:3px}.party-member.is-holder b{font-size:13px}.party-member.is-holder small{opacity:.7}
.party-member.is-free:not(.is-selected) .party-member-body input{opacity:.55}
@media(max-width:650px){.party-selection-head{flex-direction:column}.party-selected-count{align-self:flex-start}.party-member{grid-template-columns:18px 16px minmax(0,1fr);padding:10px 9px;gap:7px}}
.party-member:not(.is-holder){grid-template-columns:40px minmax(0,1fr)}
.party-selector{display:grid!important;grid-template-columns:22px 18px;gap:0;align-items:start;margin:0!important;cursor:pointer}
.party-selector>input[type="checkbox"]{position:absolute;opacity:0;width:18px;height:18px;pointer-events:none}
.party-selector>input[type="checkbox"]:checked + .party-check-ui:after{content:"✓";font-size:13px;font-weight:900;color:var(--rsvp-text)}
@media(max-width:650px){.party-member:not(.is-holder){grid-template-columns:34px minmax(0,1fr)}.party-selector{grid-template-columns:18px 16px}}
/* === v2.67.5: secuencia real del sobre -> apertura -> carta completa ===
Estado inicial: la carta permanece dentro del sobre.
Al abrir: primero gira la solapa y, con un pequeño retraso, la carta sube
hasta quedar prácticamente completa por encima del sobre para su lectura. === */
.envelope-shell{
margin-top:230px!important;
}
.invitation-letter{
top:72px!important;
height:330px!important;
padding:28px 30px 38px!important;
justify-content:flex-start!important;
transform:translateY(0) scale(1)!important;
transition:
transform 1.05s cubic-bezier(.18,.84,.22,1) .56s,
box-shadow 1.05s ease .56s!important;
}
.invitation-letter .tiny-label{
margin-top:4px!important;
}
.letter-message{
margin-top:10px!important;
}
.invitation-cover.is-opening .invitation-letter{
transform:translateY(-365px) scale(1.018)!important;
box-shadow:0 28px 55px rgba(35,22,10,.26)!important;
}
@media(max-width:640px){
.envelope-stage{
justify-content:center!important;
gap:18px!important;
}
.envelope-shell{
margin-top:205px!important;
}
.invitation-letter{
top:58px!important;
height:270px!important;
padding:20px 16px 28px!important;
}
.cover-logo{
margin:3px auto!important;
font-size:clamp(38px,12vw,58px)!important;
}
.cover-logo img{
max-height:72px!important;
}
.letter-message{
max-width:300px!important;
margin-top:7px!important;
font-size:15px!important;
line-height:1.28!important;
}
.invitation-cover.is-opening .invitation-letter{
transform:translateY(-300px) scale(1.012)!important;
}
}
@media(max-width:380px), (max-height:700px){
.invitation-cover{
padding:8px!important;
}
.envelope-stage{
min-height:96svh!important;
gap:12px!important;
}
.envelope-shell{
margin-top:180px!important;
}
.invitation-letter{
top:54px!important;
height:245px!important;
padding:16px 14px 24px!important;
}
.cover-logo{
font-size:clamp(34px,11vw,50px)!important;
}
.cover-logo img{
max-height:60px!important;
}
.letter-message{
font-size:14px!important;
line-height:1.22!important;
}
.invitation-cover.is-opening .invitation-letter{
transform:translateY(-270px) scale(1.008)!important;
}
}
/* === v2.67.6: ajuste final de lectura de la carta en escritorio ===
Mantiene intactos los ajustes de móvil de v2.67.5.
En PC limita el recorrido vertical para que la carta salga del sobre,
pero permanezca dentro del área visible y pueda leerse completa. === */
@media (min-width:641px) and (min-height:701px){
.invitation-cover.is-opening .invitation-letter{
transform:translateY(-310px) scale(1.018)!important;
}
}
/* En portátiles/PC con poca altura, la regla v2.67.5 de max-height:700px
también entraba en acción. Esta regla de escritorio la separa del móvil. */
@media (min-width:641px) and (max-height:700px){
.invitation-cover.is-opening .invitation-letter{
transform:translateY(-220px) scale(1.012)!important;
}
}