:root{
    --jm-bg:#f7efe5;
    --jm-card:#fffaf3;
    --jm-soft:#fff3e0;
    --jm-text:#4a2e1f;
    --jm-accent:#b45309;
    --jm-accent-2:#7c3f10;
    --jm-border:#f4c67a;
    --jm-success:#166534;
    --jm-error:#991b1b;
    --event-accent:#b45309;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:linear-gradient(180deg,#fff7ed 0%, #f7efe5 100%);color:var(--jm-text)}
a{color:inherit}
img,video{max-width:100%;display:block}
.jm-topbar{position:sticky;top:0;z-index:10;background:rgba(255,250,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--jm-border)}
.jm-topbar__inner{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.jm-brand{text-decoration:none;font-weight:700;color:var(--jm-accent-2);font-size:1.2rem}
.jm-nav{display:flex;flex-wrap:wrap;gap:14px}
.jm-nav a{text-decoration:none;color:var(--jm-accent-2)}
.jm-layout{max-width:1100px;margin:0 auto;padding:24px 18px 48px}
.jm-stack{display:grid;gap:18px}
.jm-grid{display:grid;gap:18px}
.jm-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.jm-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.jm-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.jm-hero{padding:18px 0}
.jm-landing-hero .jm-card{background:linear-gradient(135deg,#fff7ed 0%,#fffaf3 100%)}
.jm-price{font-size:2rem;font-weight:800;color:var(--jm-accent-2)}
.jm-card{background:var(--jm-card);border:1px solid var(--jm-border);border-radius:18px;padding:24px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.jm-card--soft{background:var(--jm-soft)}
.jm-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff3e0;border:1px solid var(--jm-border);color:var(--jm-accent-2);font-size:.85rem;margin-bottom:10px}
.jm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.jm-inline-actions{display:grid;gap:8px}
.jm-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;cursor:pointer;padding:12px 16px;border-radius:12px;background:var(--jm-accent);color:#fff;font-weight:700}
.jm-btn.active{outline:3px solid rgba(180,83,9,.18)}
.jm-btn--secondary{background:#f6dec0;color:var(--jm-accent-2)}
.jm-btn--ghost{background:#fff;color:var(--jm-accent-2);border:1px solid var(--jm-border)}
.jm-auth-wrap{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center}
.jm-auth{width:min(520px, 100%)}
.jm-form{display:grid;gap:14px}
.jm-form--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.jm-form label{display:grid;gap:8px;font-weight:600}
.jm-form input,.jm-form select,.jm-form textarea{width:100%;border:1px solid #e9c388;border-radius:12px;padding:12px 14px;background:#fff;color:var(--jm-text)}
.jm-form textarea{resize:vertical}
.jm-form__full{grid-column:1/-1}
.jm-alert{padding:14px 16px;border-radius:12px;border:1px solid transparent}
.jm-alert ul{margin:0;padding-left:18px}
.jm-alert--success{background:#ecfdf3;color:var(--jm-success);border-color:#a7f3d0}
.jm-alert--error{background:#fef2f2;color:var(--jm-error);border-color:#fecaca}
.jm-table-wrap{overflow:auto}
.jm-table{width:100%;border-collapse:collapse}
.jm-table th,.jm-table td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid #f1dcc0}
.jm-between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.jm-stat{font-size:2rem;font-weight:800;color:var(--jm-accent-2);margin:8px 0 0}
.jm-mini-stats{display:flex;flex-wrap:wrap;gap:10px;color:var(--jm-accent-2);font-weight:700}
.jm-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.jm-check{display:flex !important;align-items:center;gap:10px;padding:12px 14px;border:1px solid #efd2aa;border-radius:12px;background:#fffdf8}
.jm-check input{width:auto}
.jm-event-hero{overflow:hidden}
.jm-event-cover{margin:-24px -24px 18px;background:#f3e2c7}
.jm-event-cover img{width:100%;max-height:360px;object-fit:cover}
.jm-event-mini-cover{background:#f3e2c7;border-radius:14px;overflow:hidden;margin-bottom:12px;min-height:150px}
.jm-event-mini-cover img{width:100%;height:150px;object-fit:cover}
.jm-cover-placeholder{min-height:150px;display:flex;align-items:center;justify-content:center;color:var(--jm-accent-2);font-weight:700}
.jm-url-box{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #efd2aa;word-break:break-all}
.jm-qr-box,.jm-qr-block{display:flex;gap:16px;align-items:center}
.jm-qr-box img{width:180px;height:180px}
.jm-qr-block{padding:14px;border-radius:14px;background:#fff3e0;border:1px solid #efd2aa;margin-top:14px}
.jm-qr-block img{width:110px;height:110px}
.jm-memory-card{padding:18px}
.jm-memory-media{background:#f7eddc;border-radius:14px;overflow:hidden;margin-bottom:12px}
.jm-memory-media img,.jm-memory-media video{width:100%;max-height:340px;object-fit:cover}
.jm-media-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.jm-media-open video{pointer-events:none}
.jm-media-badge{position:absolute;right:12px;bottom:12px;background:rgba(20,10,5,.72);color:#fff;border-radius:999px;padding:8px 12px;font-size:.85rem;font-weight:700}
.jm-memory-note{min-height:140px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--jm-accent-2)}
.jm-memory-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--jm-accent-2)}
.jm-like-btn{border:0;background:#fee2e2;color:#991b1b;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:700}
.jm-comments{margin-top:16px;display:grid;gap:10px}
.jm-comment{padding:10px 12px;border-radius:12px;background:#fff3e0;border:1px solid #efd2aa}
.jm-comment p{margin:6px 0 0}
.jm-comment-form{display:grid;gap:10px}
.jm-comment-form input{width:100%;border:1px solid #e9c388;border-radius:12px;padding:10px 12px}
.jm-lightbox{position:fixed;inset:0;background:rgba(20,10,5,.92);display:none;align-items:center;justify-content:center;padding:10px;z-index:80}
.jm-lightbox--open{display:flex}
.jm-lightbox__box{position:relative;width:min(96vw,1100px);height:min(94vh,900px);display:flex;align-items:center;justify-content:center;background:#120a05;border-radius:24px;padding:12px}
.jm-lightbox__box img,.jm-lightbox__box video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:16px}
.jm-lightbox__close{position:absolute;top:10px;right:12px;width:48px;height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:30px;cursor:pointer}
.jm-countdown-wrap{margin-top:18px}
.jm-countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.jm-countdown-item{padding:18px;border-radius:16px;background:linear-gradient(135deg,var(--event-accent), #7c3f10);color:#fff;text-align:center;box-shadow:0 18px 30px rgba(0,0,0,.12)}
.jm-countdown-item strong{display:block;font-size:2rem}
.jm-timeline{display:grid;gap:18px;position:relative}
.jm-timeline:before{content:'';position:absolute;left:11px;top:0;bottom:0;width:3px;background:#ecd2aa}
.jm-timeline-item{position:relative;padding-left:34px}
.jm-timeline-dot{position:absolute;left:0;top:26px;width:24px;height:24px;border-radius:999px;background:var(--event-accent);border:4px solid #fff3e0;box-shadow:0 0 0 1px #e7c794}
.jm-slideshow{display:block}
.jm-slide{display:none}
.jm-slide.is-active{display:block}
.jm-theme-classic{--jm-card:#fffaf3;--jm-soft:#fff3e0;--jm-border:#f4c67a}
.jm-theme-gold{--jm-card:#fff8e7;--jm-soft:#fff1c9;--jm-border:#e6c46e}
.jm-theme-romantic{--jm-card:#fff8fb;--jm-soft:#ffe8f1;--jm-border:#f1c7d7}
.jm-theme-night{--jm-card:#1e1f28;--jm-soft:#272a36;--jm-border:#3b3f50;--jm-text:#f5f5f5}
.jm-theme-night .jm-card,.jm-theme-night .jm-card--soft{color:#f5f5f5}
.jm-theme-night .jm-url-box,.jm-theme-night .jm-check,.jm-theme-night .jm-comment,.jm-theme-night .jm-qr-block{background:#2f3342;color:#f5f5f5;border-color:#43495d}
.jm-theme-pastel{--jm-card:#fcfbff;--jm-soft:#f1eeff;--jm-border:#d8cff9}
.jm-theme-party{--jm-card:#fff7f9;--jm-soft:#ffe5ee;--jm-border:#ffb5ca}
@media (max-width: 860px){
    .jm-grid--2,.jm-grid--3,.jm-grid--4,.jm-form--grid,.jm-check-grid,.jm-countdown{grid-template-columns:1fr}
    .jm-topbar__inner,.jm-between,.jm-qr-box,.jm-qr-block{flex-direction:column;align-items:flex-start}
    .jm-qr-box img,.jm-qr-block img{width:160px;height:160px}
}


.jm-brand{display:flex;align-items:center;gap:10px}
.jm-brand-logo{width:38px;height:38px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid #eed3a8}
.jm-brand-preview img{max-width:180px;border-radius:16px;border:1px solid #efd2aa;background:#fff;padding:8px}
.jm-owner-brand{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff3e0;border:1px solid #efd2aa;border-radius:12px;margin-bottom:16px}
.jm-owner-brand img{width:42px;height:42px;object-fit:contain;border-radius:10px;background:#fff}
.jm-theme-night .jm-owner-brand{background:#2f3342;color:#f5f5f5;border-color:#43495d}


.jm-inline-form {
    display: grid;
    gap: 8px;
}

.jm-inline-form select {
    width: 100%;
    border: 1px solid #e9c388;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--jm-text);
}

.jm-invitation-preview,
.jm-invitation-card {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .85), transparent 32%),
        linear-gradient(135deg, #fff7ed 0%, #fffaf3 100%);
}

.jm-invitation-card {
    text-align: center;
    overflow: hidden;
}

.jm-invitation-card h1 {
    font-size: clamp(2rem, 6vw, 4.2rem);
    margin: 8px 0;
    color: var(--event-accent);
}

.jm-invitation-card h2 {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    margin: 6px 0 18px;
}

.jm-invitation-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #efd2aa;
    padding: 10px;
}

.jm-invitation-cover {
    margin: 18px auto;
    max-width: 760px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #efd2aa;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.jm-invitation-cover img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}


.jm-inline-form {
    display: grid;
    gap: 8px;
}

.jm-inline-form select {
    width: 100%;
    border: 1px solid #e9c388;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--jm-text);
}

.jm-invitation-preview,
.jm-invitation-card {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.9), transparent 32%),
        linear-gradient(135deg, #fff7ed 0%, #fffaf3 100%);
}

.jm-invitation-card {
    text-align: center;
    overflow: hidden;
}

.jm-invitation-card h1 {
    font-size: clamp(2rem, 6vw, 4.2rem);
    margin: 8px 0;
    color: var(--event-accent);
}

.jm-invitation-card h2 {
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    margin: 6px 0 18px;
}

.jm-invitation-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
    margin: 0 auto 12px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #efd2aa;
    padding: 10px;
}

.jm-invitation-cover {
    margin: 18px auto;
    max-width: 760px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #efd2aa;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

.jm-invitation-cover img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.jm-invitation-template-gold {
    background: linear-gradient(135deg, #fff8db 0%, #fffaf0 44%, #f7d774 100%);
}

.jm-invitation-template-neon {
    background: radial-gradient(circle at top, rgba(255, 0, 128, .22), transparent 35%), linear-gradient(135deg, #1b1030 0%, #32104f 100%);
    color: #fff;
}

.jm-invitation-template-neon .jm-card--soft,
.jm-invitation-template-neon .jm-qr-block {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}

.jm-invitation-template-romantic {
    background: linear-gradient(135deg, #fff0f6 0%, #fffafc 55%, #ffd6e8 100%);
}


.jm-upload-progress {
    width: 100%;
    background: #fff3e0;
    border: 1px solid #efd2aa;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 14px;
}

.jm-upload-progress > div {
    width: 0%;
    min-width: 42px;
    background: var(--jm-accent);
    color: #fff;
    text-align: center;
    padding: 8px 10px;
    font-weight: 700;
    transition: width .2s ease;
}


.jm-builder-block {
    border-left: 6px solid var(--jm-accent);
}

.jm-inv-block {
    margin: 16px 0;
}

.jm-inv-block-hero {
    margin: 12px auto 22px;
}

.jm-inv-divider {
    width: min(420px, 80%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--event-accent), transparent);
    margin: 28px auto;
}

.jm-center-actions {
    justify-content: center;
}

.jm-btn--whatsapp {
    background: #128c7e;
}

.jm-analytics-bars {
    display: grid;
    gap: 12px;
}

.jm-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 48px;
    gap: 10px;
    align-items: center;
}

.jm-bar {
    background: #fff3e0;
    border: 1px solid #efd2aa;
    border-radius: 999px;
    overflow: hidden;
    height: 18px;
}

.jm-bar i {
    display: block;
    height: 100%;
    background: var(--jm-accent);
    border-radius: 999px;
}

@media (max-width: 700px) {
    .jm-bar-row {
        grid-template-columns: 1fr;
    }
}


.jm-code-block {
    background: #2f1b10;
    color: #fff7ed;
    border-radius: 14px;
    padding: 16px;
    overflow: auto;
    font-size: .92rem;
}


.jm-sortable-ghost {
    opacity: .45;
    transform: scale(.99);
}

.jm-builder-block .jm-badge {
    cursor: grab;
}

.jm-block-media-preview img,
.jm-inv-block-image img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #efd2aa;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.jm-inv-block-image {
    margin: 22px auto;
    max-width: 820px;
}


.jm-price-card {
    position: relative;
    overflow: hidden;
}

.jm-feature-list {
    display: grid;
    gap: 8px;
    padding-left: 20px;
}

.jm-feature-list li {
    line-height: 1.45;
}


/* =========================================================
   JavoMoment Scrapbook / Álbum tipo libro
   Inspirado en la referencia React, adaptado a PHP + JS.
   Mantiene: likes, comentarios, lightbox, subida optimizada, admin y export.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&display=swap');

.jm-scrapbook-shell {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .9), transparent 30%),
        linear-gradient(135deg, #f7e7c8 0%, #fff7e8 48%, #e8c68e 100%);
    border: 1px solid #d7a85a;
    border-radius: 30px;
    padding: clamp(18px, 3vw, 34px);
    box-shadow: 0 30px 80px rgba(78, 42, 15, .22);
    overflow: hidden;
}

.jm-scrapbook-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(87, 46, 16, .08) 49%, rgba(87, 46, 16, .16) 50%, rgba(87, 46, 16, .08) 51%, transparent 52%),
        radial-gradient(circle at 20% 20%, rgba(146, 64, 14, .08), transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(217, 119, 6, .07), transparent 20%);
}

.jm-scrapbook-head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.jm-scrapbook-head h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: .95;
    margin: 4px 0 8px;
    color: #78350f;
    font-family: 'Caveat', cursive;
}

.jm-scrapbook-head p {
    margin: 0;
    color: #7c3f10;
}

.jm-scrapbook-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.jm-scrapbook-controls button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.jm-book-stage {
    position: relative;
    z-index: 2;
    min-height: clamp(620px, 76vh, 820px);
    perspective: 1800px;
}

.jm-book-cover,
.jm-book-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(28px) rotateY(-18deg) scale(.965);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
    transform-origin: left center;
}

.jm-book-cover[data-direction="backward"],
.jm-book-page[data-direction="backward"] {
    transform: translateX(-28px) rotateY(18deg) scale(.965);
    transform-origin: right center;
}

.jm-book-cover.is-active,
.jm-book-page.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) rotateY(0) scale(1);
}

.jm-book-cover.is-prev,
.jm-book-page.is-prev {
    transform: translateX(-40px) rotateY(20deg) scale(.94);
}

.jm-book-cover {
    display: grid;
    place-items: center;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(92, 48, 16, .96), rgba(146, 64, 14, .96)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px);
    color: #fff7ed;
    box-shadow:
        inset 14px 0 30px rgba(0,0,0,.25),
        inset -10px 0 16px rgba(255,255,255,.08),
        0 34px 70px rgba(76, 38, 12, .35);
}

.jm-book-cover__shine {
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22), transparent 54%);
    transform: translateX(-40%);
    animation: jm-cover-shine 7s ease-in-out infinite;
}

@keyframes jm-cover-shine {
    0%, 55% { transform: translateX(-55%) rotate(8deg); }
    75%, 100% { transform: translateX(55%) rotate(8deg); }
}

.jm-book-cover__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
    filter: sepia(.25) contrast(1.15);
}

.jm-book-cover__content {
    position: relative;
    z-index: 2;
    width: min(780px, 88%);
    text-align: center;
    padding: clamp(26px, 5vw, 54px);
    border: 2px solid rgba(255, 248, 220, .35);
    border-radius: 28px;
    background: rgba(67, 32, 10, .42);
    backdrop-filter: blur(8px);
}

.jm-book-cover__label {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jm-book-cover__content h2 {
    margin: 18px 0 10px;
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: .82;
    font-family: 'Caveat', cursive;
}

.jm-book-cover__content p {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.55;
}

.jm-book-cover__footer {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 22px;
    color: #fde68a;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
}

.jm-page-paper {
    position: relative;
    height: 100%;
    padding: clamp(20px, 4vw, 46px);
    overflow-y: auto;
    border-radius: 22px;
    background:
        linear-gradient(rgba(255, 248, 236, .96), rgba(250, 235, 205, .96)),
        radial-gradient(circle at 12% 10%, rgba(146, 64, 14, .08), transparent 16%),
        radial-gradient(circle at 86% 76%, rgba(217, 119, 6, .08), transparent 22%),
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(146,64,14,.055) 30px);
    box-shadow:
        inset 18px 0 24px rgba(120, 53, 15, .12),
        inset -18px 0 24px rgba(255,255,255,.36),
        0 28px 50px rgba(90, 45, 12, .18);
}

.jm-page-number {
    position: absolute;
    right: 22px;
    bottom: 18px;
    color: rgba(120, 53, 15, .55);
    font-family: 'Patrick Hand', cursive;
}

.jm-paper-corner {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-top: 3px solid rgba(120, 53, 15, .25);
    border-right: 3px solid rgba(120, 53, 15, .25);
}

.jm-polaroid-card {
    position: relative;
    width: min(760px, 100%);
    margin: clamp(16px, 4vh, 42px) auto;
    padding: clamp(16px, 3vw, 26px);
    border: 2px solid #ead0a8;
    border-radius: 18px;
    background: #fff8ea;
    box-shadow:
        0 20px 40px rgba(70, 36, 12, .20),
        inset 0 0 0 1px rgba(255,255,255,.7);
    transform: rotate(var(--tilt));
}

.jm-polaroid-card::before,
.jm-polaroid-card::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 2;
}

.jm-polaroid-card::before {
    left: 10px;
    top: 10px;
    border-left: 2px solid rgba(120, 53, 15, .28);
    border-top: 2px solid rgba(120, 53, 15, .28);
}

.jm-polaroid-card::after {
    right: 10px;
    bottom: 10px;
    border-right: 2px solid rgba(120, 53, 15, .28);
    border-bottom: 2px solid rgba(120, 53, 15, .28);
}

.jm-tape {
    position: absolute;
    top: -14px;
    left: 50%;
    z-index: 4;
    width: 96px;
    height: 28px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(254, 243, 199, .72);
    border-left: 1px solid rgba(146, 64, 14, .18);
    border-right: 1px solid rgba(146, 64, 14, .18);
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
}

.jm-polaroid-media {
    position: relative;
    width: 100%;
    border: 0;
    padding: 10px;
    margin: 0 0 16px;
    background: #fff;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #ead0a8;
}

.jm-polaroid-media img,
.jm-polaroid-media video {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    filter: sepia(.14) contrast(1.06);
}

.jm-letter-card {
    min-height: 260px;
    display: grid;
    place-items: center;
    padding: 22px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,243,224,.75)),
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(146,64,14,.08) 29px);
    border: 1px solid #ead0a8;
}

.jm-letter-card p,
.jm-handwritten {
    color: #78350f;
    font-family: 'Caveat', cursive;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    line-height: 1.18;
    text-align: center;
}

.jm-polaroid-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding-top: 8px;
    color: #7c3f10;
    font-family: 'Patrick Hand', cursive;
    font-size: 1.1rem;
}

.jm-polaroid-meta small {
    color: rgba(124, 63, 16, .72);
    font-size: .9rem;
}

.jm-comment-toggle {
    border: 1px solid #efd2aa;
    background: #fff7ed;
    color: #7c3f10;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
}

.jm-book-comments {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed #d7a85a;
    border-radius: 14px;
    background: rgba(255, 247, 237, .7);
}

.jm-book-progress {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    margin-top: 16px;
    color: #7c3f10;
    font-weight: 700;
}

.jm-book-progress__bar {
    height: 10px;
    background: rgba(255,255,255,.55);
    border: 1px solid #d7a85a;
    border-radius: 999px;
    overflow: hidden;
}

.jm-book-progress__bar i {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #92400e, #f59e0b);
    transition: width .3s ease;
}

.jm-scrapbook-empty {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 22px;
    background: rgba(255, 248, 236, .8);
    border: 1px dashed #d7a85a;
}

.jm-scrapbook-empty h3 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: #7c3f10;
    font-family: 'Caveat', cursive;
    margin: 0;
}

.jm-mobile-memory-list {
    display: none;
}

@media (max-width: 760px) {
    .jm-scrapbook-head {
        display: grid;
    }

    .jm-scrapbook-controls {
        justify-content: stretch;
    }

    .jm-scrapbook-controls .jm-btn {
        flex: 1 1 100px;
    }

    .jm-book-stage {
        min-height: 620px;
    }

    .jm-page-paper {
        padding: 16px;
    }

    .jm-polaroid-card {
        padding: 14px;
        transform: none;
    }

    .jm-polaroid-media img,
    .jm-polaroid-media video {
        max-height: 310px;
    }

    .jm-letter-card {
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    .jm-book-stage {
        min-height: 570px;
    }

    .jm-book-cover__content {
        width: 92%;
        padding: 22px;
    }

    .jm-book-cover__content h2 {
        font-size: 3.25rem;
    }

    .jm-polaroid-meta {
        display: grid;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-book-cover,
    .jm-book-page,
    .jm-book-cover__shine {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   JavoMoment Global UI — Scrapbook System Theme
   Aplica el estilo del ZIP de referencia a TODO el sistema.
   ========================================================= */

:root {
    --jm-bg: #f4e4c6;
    --jm-bg-2: #fff7e8;
    --jm-card: rgba(255, 250, 238, .94);
    --jm-soft: rgba(255, 243, 224, .92);
    --jm-text: #4a2e1f;
    --jm-muted: #8a6a4f;
    --jm-accent: #92400e;
    --jm-accent-2: #78350f;
    --jm-border: #d7a85a;
    --jm-paper-line: rgba(146, 64, 14, .065);
    --jm-shadow: 0 22px 50px rgba(78, 42, 15, .16);
    --jm-shadow-soft: 0 12px 30px rgba(78, 42, 15, .10);
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 8% 10%, rgba(146,64,14,.12), transparent 24%),
        radial-gradient(circle at 90% 24%, rgba(245,158,11,.12), transparent 26%),
        linear-gradient(135deg, var(--jm-bg) 0%, var(--jm-bg-2) 48%, #e8c68e 100%);
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .42;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(120,53,15,.04) 32px),
        repeating-linear-gradient(90deg, transparent 0 37px, rgba(120,53,15,.025) 38px);
}

.jm-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 250, 238, .86);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(215, 168, 90, .72);
    box-shadow: 0 12px 32px rgba(78, 42, 15, .08);
}

.jm-topbar__inner {
    max-width: 1240px;
    padding: 12px 18px;
}

.jm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--jm-accent-2);
    font-family: 'Caveat', cursive;
    font-size: 1.9rem;
    line-height: 1;
}

.jm-brand::before {
    content: "";
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 12px;
    background:
        linear-gradient(145deg, #92400e, #d97706);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.25),
        0 10px 18px rgba(120, 53, 15, .22);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4.8A2.8 2.8 0 0 1 6.8 2H19a1 1 0 0 1 1 1v16.4a2.6 2.6 0 0 1-2.6 2.6H6.8A2.8 2.8 0 0 1 4 19.2V4.8Zm3 .2v12h10V5H7Zm0 14a.8.8 0 0 0 .8.8h9.6a.6.6 0 0 0 .6-.6V19H7Z'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.jm-brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(215, 168, 90, .85);
    box-shadow: var(--jm-shadow-soft);
}

.jm-nav {
    align-items: center;
    gap: 8px;
}

.jm-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid rgba(215,168,90,.62);
    border-radius: 999px;
    background: rgba(255, 253, 248, .72);
    color: var(--jm-accent-2);
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(78,42,15,.06);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.jm-nav a:hover {
    transform: translateY(-1px);
    background: #fff7ed;
    box-shadow: 0 12px 22px rgba(78,42,15,.12);
}

.jm-nav svg,
.jm-btn svg,
.jm-action-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jm-layout {
    max-width: 1240px;
    padding: 28px 18px 64px;
}

.jm-card {
    position: relative;
    background:
        linear-gradient(rgba(255, 250, 238, .94), rgba(255, 244, 226, .94)),
        repeating-linear-gradient(0deg, transparent 0 29px, var(--jm-paper-line) 30px);
    border: 1px solid rgba(215, 168, 90, .88);
    border-radius: 24px;
    box-shadow: var(--jm-shadow);
}

.jm-card::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-top: 2px solid rgba(120, 53, 15, .18);
    border-right: 2px solid rgba(120, 53, 15, .18);
    pointer-events: none;
}

.jm-card--soft {
    background:
        linear-gradient(rgba(255, 247, 237, .95), rgba(255, 240, 218, .95)),
        repeating-linear-gradient(0deg, transparent 0 29px, rgba(146,64,14,.05) 30px);
}

.jm-card h1,
.jm-card h2,
.jm-card h3,
.jm-landing-hero h1,
.jm-event-hero h1 {
    color: var(--jm-accent-2);
}

.jm-card h1,
.jm-landing-hero h1,
.jm-event-hero h1 {
    font-family: 'Caveat', cursive;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: .95;
    margin-top: 0;
}

.jm-card h2 {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.jm-card p {
    line-height: 1.6;
}

.jm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 243, 224, .92);
    border: 1px solid rgba(215, 168, 90, .8);
    color: var(--jm-accent-2);
    font-weight: 900;
    letter-spacing: .02em;
}

.jm-badge::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12 2 2.7 6.7 7.3.5-5.6 4.6 1.8 7.1L12 17.1 5.8 20.9l1.8-7.1L2 9.2l7.3-.5L12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-btn {
    gap: 8px;
    border-radius: 14px;
    background: linear-gradient(145deg, #92400e, #b45309);
    box-shadow: 0 12px 24px rgba(120,53,15,.18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.jm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(120,53,15,.24);
    filter: brightness(1.03);
}

.jm-btn--secondary {
    background: linear-gradient(145deg, #f8dfb8, #f6c874);
    color: #78350f;
}

.jm-btn--ghost {
    background: rgba(255, 253, 248, .84);
    color: var(--jm-accent-2);
    border: 1px solid rgba(215, 168, 90, .88);
    box-shadow: 0 10px 20px rgba(78,42,15,.08);
}

.jm-form input,
.jm-form select,
.jm-form textarea,
.jm-inline-form select,
.jm-comment-form input {
    border: 1px solid rgba(215, 168, 90, .88);
    background: rgba(255, 253, 248, .92);
    color: var(--jm-text);
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(78,42,15,.04);
}

.jm-form input:focus,
.jm-form select:focus,
.jm-form textarea:focus {
    outline: 3px solid rgba(217,119,6,.18);
    border-color: #d97706;
}

.jm-check {
    background: rgba(255, 253, 248, .86);
    border: 1px solid rgba(215, 168, 90, .78);
    box-shadow: 0 8px 18px rgba(78,42,15,.06);
}

.jm-table {
    background: rgba(255, 250, 238, .72);
    border: 1px solid rgba(215, 168, 90, .75);
    border-radius: 18px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.jm-table th {
    background: rgba(246, 222, 192, .8);
    color: var(--jm-accent-2);
    font-weight: 900;
}

.jm-table th,
.jm-table td {
    border-bottom: 1px solid rgba(215, 168, 90, .45);
}

.jm-table tr:hover td {
    background: rgba(255, 247, 237, .55);
}

.jm-alert {
    border-radius: 16px;
    box-shadow: var(--jm-shadow-soft);
}

.jm-alert--success {
    background: rgba(236, 253, 243, .94);
}

.jm-alert--error {
    background: rgba(254, 242, 242, .94);
}

.jm-stat {
    font-family: 'Patrick Hand', cursive;
    font-size: 2.5rem;
}

.jm-event-mini-cover,
.jm-event-cover,
.jm-memory-media,
.jm-invitation-cover,
.jm-block-media-preview img {
    border: 1px solid rgba(215,168,90,.82);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), var(--jm-shadow-soft);
}

.jm-event-mini-cover img,
.jm-event-cover img,
.jm-memory-media img,
.jm-memory-media video {
    filter: sepia(.08) contrast(1.03);
}

.jm-memory-card {
    transform: rotate(-.25deg);
}

.jm-memory-card:nth-child(even) {
    transform: rotate(.25deg);
}

.jm-qr-box,
.jm-qr-block {
    background: rgba(255, 243, 224, .78);
    border: 1px solid rgba(215, 168, 90, .84);
    box-shadow: var(--jm-shadow-soft);
}

.jm-qr-box img,
.jm-qr-block img {
    background: #fff;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(215,168,90,.72);
}

.jm-auth-wrap {
    padding: 28px 0;
}

.jm-auth .jm-card {
    overflow: hidden;
}

.jm-auth .jm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(217,119,6,.16), transparent 34%);
    pointer-events: none;
}

.jm-price-card {
    border-width: 2px;
}

.jm-price {
    font-family: 'Patrick Hand', cursive;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.jm-feature-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.jm-feature-list li::marker {
    color: var(--jm-accent);
}

/* Botones de acción con icono automático por tipo común */
.jm-actions .jm-btn[href*="event_edit"]::before,
.jm-actions .jm-btn[href*="settings"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 17.5V20h2.5L17.1 9.4l-2.5-2.5L4 17.5ZM19 7.5 16.5 5 18 3.5 20.5 6 19 7.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="memories"]::before,
.jm-actions .jm-btn[href*="export"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 3v10h12V7H6Zm2 8 2.5-3 2 2.3 1.5-1.8 2 2.5H8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="invitation"]::before,
.jm-actions .jm-btn[href*="send_invitations"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 6.5A2.5 2.5 0 0 1 5.5 4h13A2.5 2.5 0 0 1 21 6.5v11A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11ZM5 8l7 4.5L19 8V6.8l-7 4.5-7-4.5V8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="analytics"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 20V10h3v10H5Zm5 0V4h3v16h-3Zm5 0v-7h3v7h-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="guests"]::before,
.jm-actions .jm-btn[href*="users"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.5 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-3.7 0-6.5 2-6.5 4.5V20h13v-2.5C16 15 13.2 13 9.5 13Zm7-1.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.8 2.1c.9.9 1.7 2.1 1.7 3.9V20h2v-2.3c0-2.1-1.6-3.6-3.7-4.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="video"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 6h10a2 2 0 0 1 2 2v1.4l4-2.4v10l-4-2.4V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="reminders"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22ZM5 18h14l-1.5-2V11a5.5 5.5 0 0 0-4.5-5.4V4a1 1 0 0 0-2 0v1.6A5.5 5.5 0 0 0 6.5 11v5L5 18Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jm-actions .jm-btn[href*="event_extras"]::before,
.jm-actions .jm-btn[href*="billing"]::before,
.jm-actions .jm-btn[href*="checkout"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm2 2h14V7H5v2Zm2 5v2h5v-2H7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 820px) {
    .jm-topbar__inner {
        align-items: flex-start;
        display: grid;
    }

    .jm-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .jm-nav a {
        justify-content: center;
        border-radius: 14px;
        min-height: 44px;
    }

    .jm-nav a span {
        font-size: .82rem;
    }

    .jm-between {
        align-items: flex-start;
        display: grid;
    }

    .jm-actions {
        width: 100%;
    }

    .jm-actions .jm-btn {
        flex: 1 1 160px;
    }
}

@media (max-width: 520px) {
    .jm-layout {
        padding-left: 12px;
        padding-right: 12px;
    }

    .jm-card {
        border-radius: 18px;
        padding: 18px;
    }

    .jm-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jm-nav svg {
        width: 16px;
        height: 16px;
    }

    .jm-grid--2,
    .jm-grid--3,
    .jm-grid--4,
    .jm-form--grid,
    .jm-check-grid {
        grid-template-columns: 1fr;
    }
}


/* Panel de acciones más intuitivo */
.jm-event-actions-board {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.jm-action-group {
    position: relative;
    padding: 14px;
    border: 1px solid rgba(215, 168, 90, .7);
    border-radius: 18px;
    background: rgba(255, 253, 248, .58);
    box-shadow: 0 10px 22px rgba(78,42,15,.07);
}

.jm-action-group h3 {
    margin: 0 0 10px;
    font-family: 'Patrick Hand', cursive;
    color: var(--jm-accent-2);
    font-size: 1.35rem;
}

.jm-action-group .jm-actions {
    margin-top: 0;
}

@media (min-width: 980px) {
    .jm-event-actions-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   Landing Page estilo ZIP de referencia
   Convertido de React/Tailwind a PHP + CSS plano.
   ========================================================= */

.jm-landing-body {
    background: #fff;
    color: #111827;
}

.jm-lp-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px clamp(16px, 4vw, 42px);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(124, 58, 237, .12);
    box-shadow: 0 12px 30px rgba(76, 29, 149, .08);
}

.jm-lp-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #5b21b6;
    text-decoration: none;
    font-size: 1.35rem;
}

.jm-lp-logo-mark {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 12px 24px rgba(109, 40, 217, .24);
}

.jm-lp-logo svg,
.jm-lp-icon svg,
.jm-lp-step-icon svg,
.jm-lp-btn svg,
.jm-lp-floating svg,
.jm-lp-price-card li svg,
.jm-lp-pill svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jm-lp-nav nav {
    display: flex;
    gap: 22px;
    align-items: center;
}

.jm-lp-nav nav a,
.jm-lp-link {
    color: #4b5563;
    text-decoration: none;
    font-weight: 700;
    transition: color .2s ease;
}

.jm-lp-nav nav a:hover,
.jm-lp-link:hover {
    color: #6d28d9;
}

.jm-lp-nav-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.jm-lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 22px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #6d28d9;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(76, 29, 149, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.jm-lp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(76, 29, 149, .24);
}

.jm-lp-btn--small {
    min-height: 40px;
    padding: 10px 15px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
}

.jm-lp-btn--outline {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 2px solid rgba(255,255,255,.32);
    backdrop-filter: blur(10px);
}

.jm-lp-btn--dark {
    width: 100%;
    background: #111827;
    color: #fff;
}

.jm-lp-btn--yellow {
    width: 100%;
    background: #facc15;
    color: #4c1d95;
}

.jm-lp-btn--light {
    color: #6d28d9;
    background: #fff;
}

.jm-lp-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.jm-lp-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 100%);
}

.jm-lp-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=1600');
    background-size: cover;
    background-position: center;
    opacity: .10;
}

.jm-lp-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -120px -10%;
    height: 220px;
    background: #fff;
    transform: rotate(-3deg);
    transform-origin: left top;
}

.jm-lp-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(34px, 7vw, 80px);
    align-items: center;
    padding: clamp(72px, 10vw, 128px) 0 clamp(94px, 12vw, 150px);
}

.jm-lp-hero-copy {
    display: grid;
    gap: 26px;
}

.jm-lp-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.20);
    backdrop-filter: blur(10px);
    font-weight: 800;
}

.jm-lp-pill svg {
    color: #fde047;
}

.jm-lp-hero h1 {
    margin: 0;
    font-size: clamp(3.2rem, 8vw, 6.8rem);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 950;
}

.jm-lp-hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, #fde047, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
}

.jm-lp-hero p {
    margin: 0;
    max-width: 650px;
    color: #ede9fe;
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    line-height: 1.65;
}

.jm-lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.jm-lp-stats {
    display: flex;
    gap: clamp(18px, 4vw, 38px);
    flex-wrap: wrap;
    padding-top: 8px;
}

.jm-lp-stats div {
    display: grid;
    gap: 2px;
}

.jm-lp-stats strong {
    font-size: 2.1rem;
    line-height: 1;
}

.jm-lp-stats span {
    color: #ddd6fe;
    font-size: .92rem;
}

.jm-lp-hero-preview {
    position: relative;
    min-height: 470px;
}

.jm-lp-photo-card {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
    transform: rotate(2deg);
    box-shadow: 0 36px 80px rgba(17, 24, 39, .35);
    transition: transform .28s ease;
}

.jm-lp-photo-card:hover {
    transform: rotate(0) translateY(-4px);
}

.jm-lp-photo-card img {
    width: 100%;
    display: block;
    border-radius: 18px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.jm-lp-floating {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 999px;
    font-weight: 950;
    box-shadow: 0 22px 44px rgba(17,24,39,.22);
}

.jm-lp-floating--top {
    top: 34px;
    right: -10px;
    background: #facc15;
    color: #4c1d95;
    transform: rotate(12deg);
}

.jm-lp-floating--bottom {
    bottom: 20px;
    left: 22px;
    background: #fff;
    color: #4c1d95;
    transform: rotate(-5deg);
}

.jm-lp-section {
    padding: clamp(72px, 10vw, 108px) 0;
    background: #fff;
}

.jm-lp-section--soft {
    background: #f9fafb;
}

.jm-lp-section--gradient {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
}

.jm-lp-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 54px;
}

.jm-lp-section-head h2 {
    margin: 0 0 14px;
    color: #111827;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.jm-lp-section-head p {
    margin: 0;
    color: #6b7280;
    font-size: 1.2rem;
    line-height: 1.65;
}

.jm-lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.jm-lp-card {
    padding: 28px;
    border: 2px solid transparent;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(17,24,39,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.jm-lp-card:hover {
    transform: translateY(-4px);
    border-color: #ddd6fe;
    box-shadow: 0 24px 46px rgba(76,29,149,.12);
}

.jm-lp-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    margin-bottom: 20px;
    box-shadow: 0 16px 30px rgba(109,40,217,.22);
}

.jm-lp-icon svg {
    width: 30px;
    height: 30px;
}

.jm-lp-card h3,
.jm-lp-step h3,
.jm-lp-price-card h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1.35rem;
}

.jm-lp-card p,
.jm-lp-step p,
.jm-lp-price-card p {
    margin: 0;
    color: #6b7280;
    line-height: 1.65;
}

.jm-lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px;
}

.jm-lp-step {
    position: relative;
    text-align: center;
}

.jm-lp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 40px;
    left: calc(50% + 54px);
    width: calc(100% - 70px);
    height: 2px;
    background: linear-gradient(90deg, #c4b5fd, transparent);
}

.jm-lp-step-icon {
    position: relative;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 20px 36px rgba(109,40,217,.25);
}

.jm-lp-step-icon svg {
    width: 38px;
    height: 38px;
}

.jm-lp-step-icon span {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #facc15;
    color: #4c1d95;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(17,24,39,.16);
}

.jm-lp-pricing {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.jm-lp-price-card {
    position: relative;
    padding: 32px;
    border-radius: 24px;
    background: #fff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 18px 38px rgba(17,24,39,.08);
}

.jm-lp-price-card--popular {
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: 4px solid #facc15;
    box-shadow: 0 28px 62px rgba(76,29,149,.26);
}

.jm-lp-price-card--popular h3,
.jm-lp-price-card--popular p,
.jm-lp-price-card--popular li {
    color: #fff;
}

.jm-lp-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 9px 20px;
    background: #facc15;
    color: #4c1d95;
    text-transform: uppercase;
    font-weight: 950;
    font-size: .8rem;
}

.jm-lp-price {
    margin: 28px 0;
    color: #111827;
    font-size: clamp(3rem, 6vw, 4rem);
    font-weight: 950;
    line-height: 1;
}

.jm-lp-price-card--popular .jm-lp-price {
    color: #fff;
}

.jm-lp-price span {
    margin-left: 8px;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 700;
}

.jm-lp-price-card--popular .jm-lp-price span {
    color: #ddd6fe;
}

.jm-lp-price-card ul {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
}

.jm-lp-price-card li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #374151;
    line-height: 1.45;
}

.jm-lp-price-card li svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    color: #16a34a;
}

.jm-lp-price-card--popular li svg {
    color: #fde047;
}

.jm-lp-extra-note {
    max-width: 980px;
    margin: 22px auto 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(124,58,237,.14);
    color: #4b5563;
    text-align: center;
}

.jm-lp-testimonials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.jm-lp-testimonial {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 28px;
    border-radius: 24px;
    background: #f9fafb;
    border: 2px solid #f3f4f6;
    box-shadow: 0 14px 32px rgba(17,24,39,.05);
}

.jm-lp-avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-weight: 950;
    font-size: 1.6rem;
}

.jm-lp-testimonial strong {
    display: block;
    color: #111827;
}

.jm-lp-testimonial span {
    color: #7c3aed;
    font-size: .92rem;
    font-weight: 800;
}

.jm-lp-stars {
    grid-column: 1 / -1;
    color: #facc15;
    letter-spacing: 2px;
}

.jm-lp-testimonial p {
    grid-column: 1 / -1;
    margin: 0;
    color: #374151;
    line-height: 1.65;
    font-style: italic;
}

.jm-lp-cta {
    padding: clamp(72px, 10vw, 110px) 0;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #7c3aed, #6d28d9);
}

.jm-lp-cta h2 {
    max-width: 850px;
    margin: 0 auto 18px;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.jm-lp-cta p {
    max-width: 680px;
    margin: 0 auto 28px;
    color: #ede9fe;
    font-size: 1.22rem;
    line-height: 1.65;
}

.jm-lp-footer {
    color: #d1d5db;
    background: #111827;
    padding: 54px 0 26px;
}

.jm-lp-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 28px;
}

.jm-lp-footer h3,
.jm-lp-footer h4 {
    color: #fff;
    margin: 0 0 14px;
}

.jm-lp-footer p {
    color: #9ca3af;
    line-height: 1.65;
}

.jm-lp-footer a {
    display: block;
    color: #9ca3af;
    text-decoration: none;
    margin: 8px 0;
}

.jm-lp-footer a:hover {
    color: #c4b5fd;
}

.jm-lp-copy {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto 0;
    padding-top: 24px;
    border-top: 1px solid #1f2937;
    color: #6b7280;
    text-align: center;
    font-size: .92rem;
}

@media (max-width: 940px) {
    .jm-lp-nav {
        display: grid;
    }

    .jm-lp-nav nav {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .jm-lp-nav-actions {
        justify-content: flex-end;
    }

    .jm-lp-hero-grid,
    .jm-lp-feature-grid,
    .jm-lp-steps,
    .jm-lp-pricing,
    .jm-lp-testimonials,
    .jm-lp-footer-grid {
        grid-template-columns: 1fr;
    }

    .jm-lp-step:not(:last-child)::after {
        display: none;
    }

    .jm-lp-hero-preview {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .jm-lp-nav {
        padding: 12px;
    }

    .jm-lp-nav nav {
        display: none;
    }

    .jm-lp-nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .jm-lp-link,
    .jm-lp-btn--small {
        justify-content: center;
    }

    .jm-lp-hero-grid {
        padding-top: 54px;
    }

    .jm-lp-actions,
    .jm-lp-stats {
        display: grid;
    }

    .jm-lp-floating {
        position: static;
        margin-top: 12px;
        transform: none;
        width: fit-content;
    }

    .jm-lp-price-card {
        padding: 24px;
    }
}


/* =========================================================
   JavoMoment Panel UI — estilo Panel/SuperAdmin
   Diseño global del sistema: dashboard limpio, cards blancas,
   fondo ámbar/naranja suave, botones naranja/morado.
   El estilo scrapbook queda limitado al álbum.
   ========================================================= */

:root {
    --jm-bg: #fff7ed;
    --jm-bg-2: #ffedd5;
    --jm-card: #ffffff;
    --jm-soft: #fff7ed;
    --jm-text: #111827;
    --jm-muted: #6b7280;
    --jm-accent: #ea580c;
    --jm-accent-2: #c2410c;
    --jm-purple: #7c3aed;
    --jm-purple-2: #6d28d9;
    --jm-border: #fed7aa;
    --jm-success: #166534;
    --jm-error: #991b1b;
    --event-accent: #ea580c;
    --jm-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    --jm-shadow-lg: 0 24px 54px rgba(15, 23, 42, .12);
}

body:not(.jm-landing-body) {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(251, 146, 60, .18), transparent 28%),
        linear-gradient(135deg, #fffbeb 0%, #fff7ed 48%, #ffedd5 100%);
    color: var(--jm-text);
}

body:not(.jm-landing-body)::before {
    content: none !important;
}

.jm-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(251, 146, 60, .22);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.jm-topbar__inner {
    max-width: 1280px;
    padding: 14px 20px;
}

.jm-brand {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.28rem;
    font-weight: 900;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.jm-brand::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 12px 24px rgba(234, 88, 12, .28);
    mask: none;
}

.jm-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jm-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #4b5563;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.jm-nav a:hover {
    background: #fff7ed;
    color: #ea580c;
    transform: translateY(-1px);
}

.jm-nav svg,
.jm-btn svg,
.jm-action-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.jm-layout {
    max-width: 1280px;
    padding: 28px 20px 64px;
}

.jm-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--jm-shadow);
}

.jm-card::after,
.jm-card::before {
    content: none !important;
}

.jm-card--soft {
    background: #fff7ed;
    border-color: #fed7aa;
}

.jm-card h1,
.jm-card h2,
.jm-card h3,
.jm-event-hero h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #111827;
    line-height: 1.12;
}

.jm-card h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.jm-card h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
}

.jm-card h3 {
    font-size: 1.08rem;
    font-weight: 900;
}

.jm-card p {
    color: #4b5563;
    line-height: 1.6;
}

.jm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #ffedd5;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.jm-badge::before {
    content: none !important;
}

.jm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: #ea580c;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(234, 88, 12, .20);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.jm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(234, 88, 12, .26);
    filter: brightness(1.03);
}

.jm-btn--secondary {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 12px 22px rgba(124, 58, 237, .20);
}

.jm-btn--ghost {
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.jm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.jm-grid,
.jm-stack {
    gap: 18px;
}

.jm-form {
    display: grid;
    gap: 14px;
}

.jm-form label {
    display: grid;
    gap: 8px;
    color: #374151;
    font-weight: 800;
}

.jm-form input,
.jm-form select,
.jm-form textarea,
.jm-inline-form select,
.jm-comment-form input {
    width: 100%;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: none;
}

.jm-form input:focus,
.jm-form select:focus,
.jm-form textarea:focus {
    outline: 3px solid rgba(249, 115, 22, .18);
    border-color: #f97316;
}

.jm-check {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    box-shadow: none;
}

.jm-table {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.jm-table th {
    background: #f9fafb;
    color: #374151;
    font-weight: 900;
    text-align: left;
}

.jm-table th,
.jm-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.jm-table tr:hover td {
    background: #fff7ed;
}

.jm-alert {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    box-shadow: var(--jm-shadow);
}

.jm-alert--success {
    background: #ecfdf3;
    color: #166534;
    border-color: #bbf7d0;
}

.jm-alert--error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.jm-stat {
    color: #111827;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.4rem;
    font-weight: 950;
}

.jm-admin-page-head {
    border-left: 5px solid #f97316;
}

.jm-public-header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-left: 5px solid #f97316;
}

.jm-public-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: var(--jm-shadow);
}

.jm-public-mode-tabs a {
    flex: 1 1 180px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #4b5563;
    font-weight: 900;
}

.jm-public-mode-tabs a.active {
    background: #ea580c;
    color: #fff;
    box-shadow: 0 10px 20px rgba(234, 88, 12, .18);
}

.jm-invitation-modern {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 24px;
    box-shadow: var(--jm-shadow-lg);
}

.jm-invitation-modern__media {
    min-height: 680px;
    background: linear-gradient(135deg, #fb923c, #7c3aed);
}

.jm-invitation-modern__media img,
.jm-invitation-modern__placeholder {
    width: 100%;
    height: 100%;
    min-height: 680px;
    object-fit: cover;
}

.jm-invitation-modern__placeholder {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 30%),
        linear-gradient(135deg, #fb923c, #7c3aed);
}

.jm-invitation-modern__content {
    padding: clamp(24px, 5vw, 54px);
    display: grid;
    gap: 18px;
    align-content: center;
}

.jm-invitation-modern__content h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.05em;
    font-weight: 950;
}

.jm-invitation-modern__content h2 {
    margin: 0;
    color: #ea580c;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.jm-invitation-modern__content > p {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.65;
}

.jm-invitation-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.jm-invitation-details-grid .jm-card {
    padding: 16px;
    box-shadow: none;
}

.jm-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.jm-countdown > div {
    padding: 14px 10px;
    border-radius: 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    text-align: center;
}

.jm-countdown strong {
    display: block;
    color: #ea580c;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    line-height: 1;
}

.jm-countdown span {
    color: #6b7280;
    font-size: .82rem;
    font-weight: 800;
}

.jm-countdown--hero > div {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}

.jm-public-action-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.jm-public-action-card {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #111827;
    transition: transform .18s ease, border-color .18s ease;
}

.jm-public-action-card:hover {
    transform: translateY(-2px);
    border-color: #fb923c;
}

.jm-public-action-card strong {
    font-size: 1rem;
}

.jm-public-action-card span,
.jm-public-action-card small {
    color: #6b7280;
}

.jm-upload-hero-card {
    align-items: stretch;
}

.jm-upload-hero-cover {
    width: min(340px, 100%);
    border-radius: 18px;
    overflow: hidden;
}

.jm-upload-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jm-builder-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.jm-builder-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--jm-shadow);
}

.jm-builder-step strong {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
}

.jm-builder-step.active strong {
    background: #ea580c;
    color: #fff;
}

.jm-builder-step span {
    font-weight: 900;
    color: #374151;
}

.jm-builder-block-picker {
    display: grid;
    gap: 10px;
}

.jm-builder-block-option {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 12px !important;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.jm-builder-block-option:hover {
    border-color: #fb923c;
    background: #fff7ed;
}

.jm-builder-block-option input {
    width: auto;
    margin-top: 4px;
}

.jm-builder-block-option span {
    display: grid;
    gap: 3px;
}

.jm-builder-block-option small {
    color: #6b7280;
}

.jm-builder-preview-card {
    position: sticky;
    top: 92px;
    align-self: start;
    border-left: 5px solid #7c3aed;
}

.jm-builder-block-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.jm-builder-block-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.jm-builder-block-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.jm-builder-block-card__head small {
    display: block;
    color: #6b7280;
}

.jm-drag-handle {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    border-radius: 10px;
    padding: 8px 10px;
    cursor: grab;
    font-weight: 900;
}

.jm-builder-visible {
    min-width: 110px;
}

.jm-builder-delete-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.jm-event-actions-board {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.jm-action-group {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
}

.jm-action-group h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 1rem;
    font-weight: 950;
}

@media (min-width: 980px) {
    .jm-event-actions-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .jm-topbar__inner {
        display: grid;
        align-items: flex-start;
    }

    .jm-nav {
        width: 100%;
    }

    .jm-nav a {
        flex: 1 1 130px;
        justify-content: center;
    }

    .jm-invitation-modern,
    .jm-grid--2,
    .jm-grid--3,
    .jm-grid--4,
    .jm-form--grid,
    .jm-builder-steps,
    .jm-public-action-cards,
    .jm-invitation-details-grid {
        grid-template-columns: 1fr;
    }

    .jm-invitation-modern__media,
    .jm-invitation-modern__media img,
    .jm-invitation-modern__placeholder {
        min-height: 340px;
    }

    .jm-public-header-card {
        display: grid;
    }

    .jm-builder-preview-card {
        position: static;
    }
}

@media (max-width: 560px) {
    .jm-layout {
        padding-left: 12px;
        padding-right: 12px;
    }

    .jm-card {
        padding: 18px;
        border-radius: 16px;
    }

    .jm-countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jm-builder-block-card__head {
        grid-template-columns: 1fr;
    }

    .jm-actions .jm-btn,
    .jm-btn {
        width: 100%;
    }
}

/* =========================================================
   Álbum principal + Momentos de la fiesta
   Separación pública solicitada: Invitación / Álbum / Momentos
   ========================================================= */

.jm-main-album-cover {
    position: relative;
    min-height: clamp(430px, 60vh, 680px);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(135deg, #f97316, #7c3aed);
    box-shadow: var(--jm-shadow-lg, 0 24px 54px rgba(15,23,42,.12));
}

.jm-main-album-cover > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jm-main-album-cover__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17,24,39,.76), rgba(17,24,39,.28));
}

.jm-main-album-cover__content {
    position: relative;
    z-index: 2;
    width: min(850px, 92%);
    color: #fff;
    text-align: center;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.jm-main-album-cover__content h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.8rem, 7vw, 6rem);
    line-height: .95;
    letter-spacing: -.05em;
}

.jm-main-album-cover__content p {
    color: #f9fafb;
    font-size: 1.15rem;
    line-height: 1.7;
    max-width: 720px;
}

.jm-main-album-logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
    border-radius: 18px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.jm-upload-limit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-weight: 900;
}

.jm-file-preview__item {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-weight: 800;
}

.jm-file-preview__item.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.jm-main-album-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.jm-main-memory-card,
.jm-party-moment-card {
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

.jm-main-memory-media,
.jm-party-moment-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    background: #111827;
    cursor: pointer;
    overflow: hidden;
}

.jm-main-memory-media img,
.jm-main-memory-media video,
.jm-party-moment-media img,
.jm-party-moment-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s ease;
}

.jm-main-memory-media:hover img,
.jm-main-memory-media:hover video,
.jm-party-moment-media:hover img,
.jm-party-moment-media:hover video {
    transform: scale(1.04);
}

.jm-main-memory-media span,
.jm-party-moment-media span {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(17,24,39,.82);
    color: #fff;
    font-weight: 900;
}

.jm-main-memory-body,
.jm-party-moment-info {
    padding: 16px;
}

.jm-main-memory-body h3,
.jm-party-moment-info strong {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.05rem;
}

.jm-party-moments-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.jm-party-hero {
    border-left: 5px solid #7c3aed;
}

.jm-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 220px;
    place-content: center;
    text-align: center;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 18px;
    margin-top: 18px;
    padding: 24px;
}

@media (max-width: 980px) {
    .jm-main-album-grid,
    .jm-party-moments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .jm-main-album-grid,
    .jm-party-moments-grid {
        grid-template-columns: 1fr;
    }

    .jm-main-album-cover {
        min-height: 420px;
    }
}