/* Vistio Business v1.0.2 — visuals, legibility, unsaved modal & published pause page. */
:root{--vb102-gold:#eac885;--vb102-ivory:#fff5e6;--vb102-bg:#090909;--vb102-border:rgba(228,183,110,.34)}

/* Contraste coherente cuando hay fotografía clara u oscura. Este degradado no tapa la imagen. */
.vbp-card .vbp-card-photo::after,.vbp-card .vbp-card-cover::after,.vbp-hub .vbp-hub-hero-img::after,.vbp-catalog .vbp-catalog-cover::after,
.vb102-profile-example::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,10,.09) 12%,rgba(4,6,10,.18) 48%,rgba(4,6,10,.65) 100%)}
.vbp-card .vbp-card-title,.vbp-hub .vbp-hub-hero-copy,.vbp-catalog .vbp-catalog-intro{isolation:isolate}
.vbp-card .vbp-card-title h1,.vbp-hub .vbp-hub-hero-copy h1,.vbp-catalog .vbp-catalog-intro h1{line-height:1.1;overflow-wrap:break-word;text-wrap:balance}
.vbp-card .vbp-card-title h1,.vbp-hub .vbp-hub-hero-copy h1{color:var(--vblight,#fff4e5);text-shadow:0 2px 18px rgba(0,0,0,.32)}
.vbp-card .vbp-card-title p,.vbp-hub .vbp-hub-hero-copy p,.vbp-hub .vbp-hub-hero-copy h2,.vbp-catalog .vbp-catalog-intro p{color:var(--vbmuted,#ddceb5)}
.vbp-render.vbp-look-opal,.vbp-render.vbp-look-champagne{--vbmuted:#5d4937}
.vbp-render.vbp-look-opal .vbp-card-title,.vbp-render.vbp-look-champagne .vbp-card-title{color:var(--vblight)}
.vbp-render.vbp-look-opal .vbp-card-title h1,.vbp-render.vbp-look-champagne .vbp-card-title h1{color:var(--vblight);text-shadow:none}
/* Las composiciones inmersivas fuerzan contraste claro en zonas sobre foto, incluso usando temas claros. */
.vbp-card:is(.vbp-layout-photo-full,.vbp-layout-full-overlay,.vbp-layout-panel-overlay) .vbp-card-title h1,
.vbp-hub:is(.vbp-layout-cinematic,.vbp-layout-immersive,.vbp-layout-travel) .vbp-hub-hero-copy h1,
.vbp-catalog:is(.vbp-layout-food-hero,.vbp-layout-grand-hero,.vbp-layout-tasting) .vbp-catalog-intro h1{color:#fffaf2;text-shadow:0 3px 18px #000b}
.vbp-card:is(.vbp-layout-photo-full,.vbp-layout-full-overlay,.vbp-layout-panel-overlay) .vbp-card-title p,
.vbp-hub:is(.vbp-layout-cinematic,.vbp-layout-immersive,.vbp-layout-travel) .vbp-hub-hero-copy p,
.vbp-catalog:is(.vbp-layout-food-hero,.vbp-layout-grand-hero,.vbp-layout-tasting) .vbp-catalog-intro p{color:#f2e6d5;text-shadow:0 2px 12px #000b}

/* Retratos representativos en diseños clásicos cuando aún no hay imágenes del usuario. */
.v4card-initials.vb102-profile-example{position:relative;overflow:hidden;border-radius:50%;isolation:isolate;background:linear-gradient(135deg,#2c2316,#121212);box-shadow:0 0 0 2px rgba(232,187,106,.52)}
.v4card-initials.vb102-profile-example img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover}
.v4card-initials.vb102-profile-example:after{border-radius:inherit}
.preview-stage .v4card-hero{position:relative;isolation:isolate}
.preview-stage .v4card-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#09090918 0%,#080a0c38 52%,#0505059c);pointer-events:none}
.preview-stage .v4card-stamp{z-index:2;text-shadow:0 2px 12px #000c}

/* Selector: fotografías de muestra diferenciadas y aviso explícito para evitar confundir demo con publicación. */
.vb102-preview-examples{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-bottom:1px solid rgba(230,191,130,.2);background:#100e0b}
.vb102-preview-examples span{font-size:11px;color:#d8c29f;line-height:1.4}
.vb102-preview-refresh{background:rgba(231,188,106,.12);color:#f3d494;border:1px solid rgba(231,188,106,.4);padding:8px 13px;min-height:35px;border-radius:999px;font:600 11px/1.2 Inter,'Segoe UI',sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.vb102-preview-refresh:hover,.vb102-preview-refresh:active{background:#edca86;color:#14100a;box-shadow:0 0 18px rgba(236,195,115,.26)}
.vb102-preview-refresh:focus-visible{outline:2px solid #ffdfa7;outline-offset:3px}

/* Invitaciones a diseño a medida: sección diferenciada con CTA visible. */
.vb102-design-promo{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:10px!important;margin:19px 0!important;padding:23px 23px 25px!important;position:relative;isolation:isolate;overflow:hidden;border-radius:20px!important;border:1px solid #d0a15b!important;background:radial-gradient(ellipse at 90% 10%,#b68a432b,transparent 50%),linear-gradient(135deg,#1c1710,#0a0a0b 78%)!important;box-shadow:0 12px 38px #0005,inset 0 1px 0 #ffefbc25!important;color:#f6eee3!important;font-size:13px!important;line-height:1.7!important}
.vb102-design-promo::after{content:"";position:absolute;inset:-50% auto -50% -20%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,223,150,.08),transparent);transform:skewX(-18deg);pointer-events:none;animation:vb102-sheen 8s ease-in-out infinite}
@keyframes vb102-sheen{0%,100%{translate:-30% 0}50%{translate:500% 0}}
.vb102-promo-badge{display:inline-flex;width:max-content;align-items:center;border-radius:999px;padding:6px 12px;color:#f2ca81;background:rgba(240,184,99,.1);border:1px solid rgba(240,184,99,.43);font-size:10px;font-weight:750;letter-spacing:.12em}
.vb102-design-promo a{display:inline-flex!important;justify-content:center;align-items:center;gap:9px;width:max-content;min-height:42px;max-width:100%;border:1px solid #f1d292;border-radius:999px;padding:10px 18px;background:linear-gradient(135deg,#f5dca7,#cda05a);color:#1a130b!important;font-size:12px;font-weight:800;text-decoration:none!important;box-shadow:0 7px 24px #ca9f613d;transition:transform .2s,box-shadow .2s}
.vb102-design-promo a:hover,.vb102-design-promo a:active{transform:translateY(-2px);box-shadow:0 7px 30px #e2bd6d75}

/* Modal propio de Vistio Business. */
.vb102-unsaved[hidden]{display:none!important}.vb102-unsaved{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;isolation:isolate}
.vb102-unsaved-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}
.vb102-unsaved-panel{width:min(100%,490px);position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:30px 30px 27px;border-radius:26px;background:radial-gradient(ellipse at 65% 0%,rgba(173,120,44,.21),transparent 55%),linear-gradient(170deg,#171410,#08090b);border:1px solid #c69a51;box-shadow:0 30px 80px #000d,0 0 45px #d4a14a1b,inset 0 1px 0 #fff2;animation:vb102-appear .25s ease-out}
@keyframes vb102-appear{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.vb102-unsaved-brand{display:flex;align-items:center;gap:8px;margin-bottom:2px;color:#f4e1b8}.vb102-unsaved-brand>span{font-family:Georgia,serif;font-size:26px;font-weight:700;color:#eac783}.vb102-dot{color:#fff}.vb102-unsaved-brand small{letter-spacing:.28em;font-size:9px;font-weight:750}
.vb102-unsaved-symbol{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;border:1px solid #b89455;background:linear-gradient(140deg,#342612,#10100e);color:#edc984;margin:6px 0}.vb102-unsaved-symbol svg{height:29px;width:29px}
.vb102-unsaved-eyebrow{letter-spacing:.22em;font-size:10px;font-weight:750;color:#e3bb79}.vb102-unsaved-panel h2{margin:1px 0 3px;color:#f9efdf;font:400 clamp(24px,3vw,32px)/1.12 Georgia,serif;letter-spacing:-.03em;max-width:360px}.vb102-unsaved-panel p{margin:0;color:#d1c1a8;font-size:13px;line-height:1.65;max-width:385px}
.vb102-unsaved-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:13px}
.vb102-unsaved-actions>.button{min-height:47px;border-radius:999px;padding:10px 15px;justify-content:center;font-size:12px}.vb102-unsaved-stay{grid-column:1 / -1;justify-self:center;background:none;border:none;padding:12px 20px;color:#f2dec0;cursor:pointer;text-decoration:underline;text-underline-offset:5px;font-size:12px}
.vb102-unsaved-stay:hover{color:#fff}.vb102-unsaved button:focus-visible{outline:2px solid #ffe0a0;outline-offset:3px}

/* Publicación en pausa: HTML real, no imagen. */
.showcase.vb-paused{min-height:100vh;background:#070708;color:#f4eee4}
.vb-paused-page{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:32px 16px;font-family:Inter,'Segoe UI',Arial,sans-serif;isolation:isolate}
.vb-paused-page::before,.vb-paused-page::after{content:"";position:absolute;pointer-events:none;border-radius:50%;width:480px;height:480px;background:radial-gradient(circle,#c4964f2d,transparent 67%);filter:blur(30px)}.vb-paused-page:before{top:-270px;left:-100px}.vb-paused-page:after{bottom:-330px;right:-100px}
.vb-paused-card{position:relative;z-index:1;width:min(100%,650px);padding:clamp(30px,6vw,58px) clamp(22px,6vw,60px);border-radius:32px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;border:1px solid rgba(222,180,103,.5);background:radial-gradient(ellipse at 50% 0,rgba(205,149,62,.15),transparent 54%),linear-gradient(170deg,#181613,#09090b 84%);box-shadow:0 25px 80px #0009,inset 0 1px 0 #fff2}
.vb-paused-mark{font:700 42px/1 Georgia,serif;color:#e4bb72}.vb-paused-mark i{color:#fff;font-style:normal}
.vb-paused-kicker{font-size:10px;letter-spacing:.24em;color:#d9b77c;font-weight:700;margin:4px 0}
.vb-paused-icon{display:grid;place-items:center;width:70px;height:70px;border-radius:22px;border:1px solid #c7a36a;color:#f3dba8;background:#21190f;margin:12px 0 7px}.vb-paused-icon svg{width:32px;height:32px}
.vb-paused-card h1{font:400 clamp(30px,5vw,48px)/1.08 Georgia,serif;letter-spacing:-.045em;color:#fff5e3;margin:0}.vb-paused-card h1 em{font-style:normal;color:#ebc27d}
.vb-paused-card>p:not(.vb-paused-kicker){color:#d9cabb;font-size:14px;line-height:1.8;max-width:455px;margin:5px auto}.vb-paused-card>p.vb-paused-secondary{font-size:12px;color:#b9aa92}
.vb-paused-action{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(130deg,#f3d699,#c99855);color:#211508!important;border:1px solid #ffe5ae;border-radius:999px;min-height:49px;padding:11px 23px;margin:10px 0;text-decoration:none;font-weight:800;font-size:13px;box-shadow:0 7px 28px #e1ad6550;transition:transform .2s,box-shadow .2s}.vb-paused-action:hover,.vb-paused-action:focus-visible{transform:translateY(-2px);box-shadow:0 10px 34px #e1ad6580}
.vb-paused-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,#dab66e,transparent);margin-top:16px}.vb-paused-card>small{letter-spacing:.13em;color:#d4b88c;font-size:9px}
@media(max-width:650px){.vb102-unsaved-actions{grid-template-columns:1fr}.vb102-unsaved-stay{grid-column:1}.vb102-preview-examples{flex-wrap:wrap}.vb102-preview-refresh{width:100%}.vb102-unsaved-panel{padding:26px 21px 21px}}
@media(prefers-reduced-motion:reduce){.vb102-design-promo::after{animation:none!important}.vb102-unsaved-panel{animation:none!important}}