/* ============================================================
   CAPA DE IDENTIDAD ACUARELA — web escritorio (design-A)
   Fase 6 del programa 2026-09 (2026-09-13). Se carga DESPUES de los
   estilos de cada pagina (la inyecta scripts/pc-acuarela/apply.js en
   las 201 paginas PC + las 4 del router) y aporta, por capas, la
   identidad de la landing G1 sin tocar la estructura de Design A:
   - Tipografia: Fredoka (titulos) + Nunito (texto) + Caveat (acentos).
     Las fuentes 'Sora' / 'Bricolage Grotesque' se sustituyen por
     'Fredoka' en el HTML (apply.js); aqui solo se ajusta el peso.
   - Papel crema (#FFF8F1) con grano, lavanda del kit en variables.
   - En las pantallas emocionales (bienvenida, onboarding, terminos,
     fotos IA/perfil, verificacion, match, precios, Modo Hide): lavado
     lavanda de fondo, tarjetas en papel con borde punteado y cinta,
     botones pintados del kit w-*, eyebrows manuscritos y un sticker.
   - Feed, chat, ajustes y el resto: solo tipografia + papel (limpios).
   ============================================================ */

:root {
  --gray100: #FFF8F1;          /* fondo de pagina -> papel crema */
  --lavender: #EFE4FF;         /* lavado lavanda del kit */
  --gs-cream: #FFF8F1; --gs-lav: #EFE4FF; --gs-rose: #FDEEF4; --gs-ink: #2A1240; --gs-muted: #6B5A86;
  --gs-purple: #7B2FE0; --gs-pink: #E91E8C;
  --gs-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --gs-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gs-hand: 'Caveat', 'Segoe Print', cursive;
  --gs-kit: url("/home-samples/assets/");
}
body { background: var(--gs-cream); }
/* grano de papel (como en la landing): fijo, sin capturar clics, por debajo del sidebar (z 100) y de los modales */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Fredoka no tiene 800: los titulos que pedian 800 se ven mejor en 600 */
h1, h2, h3, h4, .step-number, .section-label, .match-title, .plan-name, .plan-price, .score-num, .compat-circle .pct { font-weight: 600 !important; letter-spacing: -.01em; }

/* ---------- utilidades de la capa ---------- */
.gs-hand { font-family: var(--gs-hand); font-weight: 600; color: var(--gs-pink); }
.gs-paper { background: #fff; border: 1.5px dashed rgba(123, 47, 224, .22); border-radius: 12px; box-shadow: 0 14px 40px rgba(42, 18, 64, .08), 0 2px 6px rgba(42, 18, 64, .05); }
.gs-tape { position: absolute; top: -14px; left: 50%; width: 140px; height: auto; transform: translateX(-50%) rotate(-3deg); pointer-events: none; z-index: 3; }

/* ---------- pantallas emocionales: lavado de fondo + sticker ---------- */
body[data-page="welcome"], body[data-page="onboarding"], body[data-page="terms-accept"], body[data-page="profile-setup"],
body[data-page="verification"], body[data-page="match-animation"], body[data-page="pricing"], body[data-page="subscription"], body[data-page="hide-mode"] {
  background: var(--gs-cream) url("/home-samples/assets/w-wash-lavender.jpg") center top / 100% auto no-repeat fixed;
}
/* los blobs borrosos del diseño anterior sobran encima del lavado */
body[data-page="welcome"] .bg-blobs, body[data-page="onboarding"] .bg-decor, body[data-page="profile-setup"] .bg-decor, body[data-page="terms-accept"] .bg-decor,
body[data-page="verification"] .bg-decor, body[data-page="welcome"] .blob, body[data-page="onboarding"] .blob { display: none !important; }

body[data-page]::after { content: none; position: fixed; right: 28px; bottom: 24px; width: 88px; height: 88px; pointer-events: none; z-index: 5; opacity: .95;
  background: center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(42, 18, 64, .12)); animation: gs-float 6s ease-in-out infinite; }
body[data-page="welcome"]::after        { content: ""; background-image: url("/home-samples/assets/w-st-bouquet.png"); }
body[data-page="onboarding"]::after     { content: ""; background-image: url("/home-samples/assets/w-st-sun.png"); }
body[data-page="terms-accept"]::after   { content: ""; background-image: url("/home-samples/assets/w-st-quill.png"); }
body[data-page="profile-setup"]::after  { content: ""; background-image: url("/home-samples/assets/w-st-camera.png"); }
body[data-page="verification"]::after   { content: ""; background-image: url("/home-samples/assets/w-st-stamp.png"); }
body[data-page="match-animation"]::after{ content: ""; background-image: url("/home-samples/assets/w-st-stars.png"); }
body[data-page="pricing"]::after        { content: ""; background-image: url("/home-samples/assets/w-st-ticket.png"); }
body[data-page="subscription"]::after   { content: ""; background-image: url("/home-samples/assets/w-st-ticket.png"); }
body[data-page="hide-mode"]::after      { content: ""; background-image: url("/home-samples/assets/w-st-moon.png"); }
@keyframes gs-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { body[data-page]::after { animation: none; } }

/* ---------- tarjetas en papel con borde punteado y cinta ---------- */
.onboarding-card, .hide-card, .match-card, .plan-card, .feature-card, .setup-card, .terms-card, .verify-card {
  position: relative; background: #fff !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(42, 18, 64, .08), 0 2px 6px rgba(42, 18, 64, .05) !important;
}
.onboarding-card::before, .hide-card::before, .match-card::before, .plan-card.featured::before, .setup-card::before, .terms-card::before, .verify-card::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 140px; height: 40px; transform: translateX(-50%) rotate(-3deg);
  background: url("/home-samples/assets/w-tape-2.png") center / 100% 100% no-repeat; pointer-events: none; z-index: 3;
}
.plan-card.featured { transform: scale(1.03); }

/* ---------- eyebrows manuscritos (rosa, Caveat) ---------- */
.step-number, .section-label, .match-subtitle, .pricing-hero .badge, .hero-tagline, .save-badge {
  font-family: var(--gs-hand) !important; font-weight: 600 !important; font-size: 24px !important; line-height: 1.1 !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--gs-pink) !important; background: none !important; border: 0 !important; padding: 0 !important;
}

/* ---------- botones pintados del kit (solo primarios de las pantallas emocionales) ---------- */
body[data-page] .btn-next, body[data-page] .btn-continue, body[data-page] .btn-primary-lg, body[data-page] .btn-register,
body[data-page] .btn-plan.primary, body[data-page] .btn-plan.gold, body[data-page] .match-btn.btn-message, body[data-page] .btn-verify {
  background: url("/home-samples/assets/w-btn-grad.png") center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important;
  color: #fff !important; box-shadow: none !important; padding-left: 38px !important; padding-right: 38px !important; min-height: 54px;
  filter: drop-shadow(0 10px 18px rgba(123, 47, 224, .28)); transition: transform .25s cubic-bezier(.22, .8, .2, 1), filter .25s;
}
body[data-page] .btn-plan.gold { background-image: url("/home-samples/assets/w-btn-purple.png") !important; }
body[data-page] .btn-next:hover, body[data-page] .btn-continue:hover, body[data-page] .btn-primary-lg:hover, body[data-page] .btn-register:hover,
body[data-page] .btn-plan.primary:hover, body[data-page] .btn-plan.gold:hover, body[data-page] .match-btn.btn-message:hover, body[data-page] .btn-verify:hover {
  transform: translateY(-2px) scale(1.04) rotate(1deg) !important; filter: drop-shadow(0 14px 22px rgba(123, 47, 224, .34));
}
body[data-page] .btn-ghost-lg, body[data-page] .btn-plan.secondary, body[data-page] .match-btn.btn-continue, body[data-page] .btn-skip, body[data-page] .btn-back {
  background: url("/home-samples/assets/w-btn-outline.png") center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important;
  color: var(--gs-purple) !important; box-shadow: none !important; padding-left: 34px !important; padding-right: 34px !important; min-height: 52px;
  filter: drop-shadow(0 6px 12px rgba(123, 47, 224, .12));
}

/* ---------- paginas con barra superior (bienvenida, precios): sidebar.js inyecta el sidebar sin desplazar el contenido; aqui se desplaza ---------- */
body.gs-sidebar-injected[data-page="pricing"], body.gs-sidebar-injected[data-page="welcome"] { padding-left: 260px; }
body.gs-sidebar-injected[data-page="pricing"] .navbar, body.gs-sidebar-injected[data-page="welcome"] .navbar { left: 260px; width: calc(100% - 260px); box-sizing: border-box; }
body.gs-sidebar-injected[data-page="welcome"] .hero { min-height: calc(100vh - 72px); padding-top: 120px; }

/* ---------- Modo Hide: el corazon oficial sobre lavado rosa ---------- */
body[data-page="hide-mode"] .hide-card { background: #fff url("/home-samples/assets/w-wash-rose.jpg") center top / 100% auto no-repeat !important; }

/* ---------- precios: cabecera de la pagina ---------- */
body[data-page="pricing"] .pricing-hero { background: transparent !important; }
body[data-page="pricing"] .pricing-hero h1 span, body[data-page="welcome"] .hero-tagline span {
  background: url("/home-samples/assets/w-underline-pink.png") center bottom / 100% 10px no-repeat !important; padding-bottom: 6px;
  -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--gs-purple) !important; color: var(--gs-purple) !important;
}

/* ---------- bienvenida: el hero era oscuro con texto blanco; sobre papel crema va en tinta ---------- */
body[data-page="welcome"] .hero-brand { width: 240px; height: 56px; margin: 0 auto 20px; background: url("/assets/logo-dark.png") center / contain no-repeat; }
body[data-page="welcome"] .hero-brand img { display: none; }
body[data-page="welcome"] .hero-logo { content: url("/assets/logo-heart.png"); filter: drop-shadow(0 10px 20px rgba(233, 30, 140, .25)); }
body[data-page="welcome"] .hero-subtitle { color: var(--gs-muted) !important; }
body[data-page="welcome"] .hero-tagline { font-size: 30px !important; }
body[data-page="welcome"] { color: var(--gs-ink); }
body[data-page="welcome"] .feature-card h3 { color: var(--gs-ink); }
body[data-page="welcome"] .feature-card p { color: var(--gs-muted); }
body[data-page="welcome"] .footer-links a, body[data-page="welcome"] .footer-copy { color: var(--gs-muted); }

/* ============================================================
   LATERAL Y CABECERA "JACARANDAS" (2026-09-13, aprobado por Zelcar)
   Estilo por usuario (2026-09-13): toda esta seccion va bajo html:not(.gs-style-sobrio).
   Con localStorage["@gs_style"]="sobrio" (o users/{uid}.uiStyle) la pagina lleva
   <html class="gs-style-sobrio"> y vuelve al lateral oscuro de Design A (fase 6).
   Sustituye el lateral oscuro de Design A por papel crema con lavado
   lavanda, la guirnalda de jacarandas asomando arriba, la firma
   manuscrita, la opcion activa como tarjeta de papel con un petalo de
   marcador, la flor-sticker abajo y el pie de usuario en papel con
   cinta. Las cabeceras (.topbar / .top-bar / .conv-header / .navbar)
   pasan a crema translucido con la guirnalda cayendo por la derecha y
   el titulo en Fredoka con subrayado pintado. Los elementos decorativos
   (guirnalda, petalos, sticker, cinta, firma) los inyecta sidebar.js.
   Prueba aprobada: ui-preview/pc-jacarandas/header-lateral.html
   ============================================================ */

/* ---------- lateral ---------- */
html:not(.gs-style-sobrio) .gs-sidebar {
  background: var(--gs-cream) url("/home-samples/assets/w-wash-lavender.jpg") top center / 100% auto no-repeat !important;
  border-right: 1.5px dashed rgba(123, 47, 224, .22);
  overflow: hidden;
  font-family: var(--gs-sans);
}
html:not(.gs-style-sobrio) .gs-sidebar::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 248, 241, 0) 55%, var(--gs-cream) 100%); }
html:not(.gs-style-sobrio) .gs-jac-garland { position: absolute; top: -64px; left: -60px; width: 380px; height: auto; opacity: .9; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
/* 2026-09-17: los petalos sueltos del lateral quedan fuera — con 11 entradas la lista llega hasta
   abajo y caian sobre "Descubrir"/"Explorar" (regla de legibilidad). El adorno lo dan la guirnalda
   de arriba y el ramo del pie. Se conserva la regla por si el lateral vuelve a tener hueco libre. */
html:not(.gs-style-sobrio) .gs-jac-petal { position: absolute; height: auto; pointer-events: none; z-index: 0; opacity: .9; display: none; }
html:not(.gs-style-sobrio) .gs-jac-petal-1 { width: 26px; left: 214px; top: 132px; transform: rotate(30deg); }
html:not(.gs-style-sobrio) .gs-jac-petal-2 { width: 20px; left: 34px; top: 150px; transform: rotate(-40deg); }
html:not(.gs-style-sobrio) .gs-jac-petal-3 { width: 22px; left: 120px; top: 176px; transform: rotate(70deg); opacity: .75; }
html:not(.gs-style-sobrio) .gs-sidebar-header { position: relative; z-index: 3; padding: 60px 22px 10px; gap: 10px; border-bottom: 0; }
html:not(.gs-style-sobrio) .gs-sidebar-heart { height: 36px; max-width: 46px; filter: drop-shadow(0 3px 8px rgba(123, 47, 224, .25)); }
html:not(.gs-style-sobrio) .gs-sidebar-brand { height: 24px; max-width: 170px; }
html:not(.gs-style-sobrio) .gs-sidebar-eyebrow { position: relative; z-index: 3; font-family: var(--gs-hand); font-weight: 600; color: var(--gs-pink); font-size: 19px; line-height: 1; padding: 0 24px 10px; }
html:not(.gs-style-sobrio) .gs-sidebar-nav { position: relative; z-index: 3; padding: 10px 14px; gap: 4px; }
html:not(.gs-style-sobrio) .gs-nav-item { padding: 11px 14px; border-radius: 14px; color: var(--gs-muted); font-size: 15px; font-weight: 700;
  border-left: 0; border: 1.5px dashed transparent; border-image: none; }
html:not(.gs-style-sobrio) .gs-nav-item svg { color: #9A8BB0; }
html:not(.gs-style-sobrio) .gs-nav-item:hover { background: rgba(255, 255, 255, .7); color: var(--gs-ink); }
html:not(.gs-style-sobrio) .gs-nav-item.active { background: #fff; border-color: rgba(123, 47, 224, .22); border-image: none; color: var(--gs-purple);
  box-shadow: 0 8px 24px rgba(42, 18, 64, .08); }
html:not(.gs-style-sobrio) .gs-nav-item.active svg { color: var(--gs-purple); }
html:not(.gs-style-sobrio) .gs-nav-item.active::before { content: ""; position: absolute; left: -14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(-15deg);
  background: url("/home-samples/assets/e-petal-3.png") center / contain no-repeat; }
html:not(.gs-style-sobrio) .gs-nav-item .gs-nav-logo { opacity: .85; }
html:not(.gs-style-sobrio) .gs-nav-badge { background: var(--gs-pink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
html:not(.gs-style-sobrio) .gs-nav-badge.pro { background: #FFF1B8; color: #8A5A00; border: 1px dashed rgba(138, 90, 0, .25); }
/* 2026-09-17: el ramo baja al pie (asoma por detras de la tarjeta de usuario, que es papel opaco)
   y va por DEBAJO del contenido: antes se pintaba sobre la ultima entrada del menu y sobre "Premium PRO". */
html:not(.gs-style-sobrio) .gs-jac-sticker { position: absolute; right: -6px; bottom: 6px; width: 68px; height: auto; transform: rotate(12deg); z-index: 0; opacity: .9; pointer-events: none; }
html:not(.gs-style-sobrio) .gs-sidebar-footer { position: relative; z-index: 3; margin: 10px 14px 18px; padding: 12px; background: #fff; border: 1.5px dashed rgba(123, 47, 224, .22);
  border-top: 1.5px dashed rgba(123, 47, 224, .22); border-radius: 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(42, 18, 64, .06); }
html:not(.gs-style-sobrio) .gs-jac-tape { position: absolute; top: -11px; right: -14px; width: 64px; height: auto; transform: rotate(28deg); opacity: .95; pointer-events: none; }
html:not(.gs-style-sobrio) .gs-sidebar-user { padding: 0; background: transparent; }
html:not(.gs-style-sobrio) .gs-sidebar-user:hover { background: transparent; }
html:not(.gs-style-sobrio) .gs-sidebar-avatar { width: 44px; height: 44px; border: 1.5px dashed rgba(123, 47, 224, .22); padding: 3px; background: #fff; box-shadow: none; }
html:not(.gs-style-sobrio) .gs-sidebar-user:hover .gs-sidebar-avatar { border-color: var(--gs-pink); }
html:not(.gs-style-sobrio) .gs-sidebar-user-name { color: var(--gs-ink); font-weight: 800; font-size: 14px; }
html:not(.gs-style-sobrio) .gs-sidebar-user-status { color: #1E9E63; font-size: 12px; }
html:not(.gs-style-sobrio) .gs-sidebar-user-status::before { background: #22C55E; }
html:not(.gs-style-sobrio) .gs-sidebar-settings { width: 36px; height: 36px; border-radius: 12px; border: 1.5px dashed rgba(123, 47, 224, .22); color: var(--gs-muted); background: #FFFDF9; }
html:not(.gs-style-sobrio) .gs-sidebar-settings:hover, html:not(.gs-style-sobrio) .gs-sidebar-settings.active { color: #fff; background: var(--gs-purple); border-color: transparent; }

/* ---------- cabeceras: crema translucido + guirnalda a la derecha + titulo Fredoka con subrayado pintado ---------- */
html:not(.gs-style-sobrio) .topbar, html:not(.gs-style-sobrio) .top-bar, html:not(.gs-style-sobrio) .conv-header, html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar {
  position: sticky; position: -webkit-sticky; top: 0; z-index: 50; overflow: hidden;
  background: rgba(255, 248, 241, .86) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1.5px dashed rgba(123, 47, 224, .22) !important; box-shadow: none !important;
}
html:not(.gs-style-sobrio) .topbar, html:not(.gs-style-sobrio) .top-bar { min-height: 78px; }
/* Legibilidad (regla firmada 2026-09-16): la guirnalda va al .75, nunca empieza antes del 42 % del ancho (left: max(...) equivale
   a right:-30px en cabeceras anchas y deja limpia la franja del titulo en ventanas de 1024) y se desvanece por la izquierda y hacia
   abajo (dos mascaras). En RTL se espeja a la izquierda para no caer sobre el titulo. Los textos del lado de la guirnalda van en
   pildora de papel (seccion "LEGIBILIDAD SOBRE LA GUIRNALDA", al final). */
html:not(.gs-style-sobrio) .topbar::before, html:not(.gs-style-sobrio) .top-bar::before, html:not(.gs-style-sobrio) .conv-header::before, html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar::before, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar::before {
  content: ""; position: absolute; left: max(calc(100% - 570px), 42%); right: auto; top: -98px; width: 600px; height: 210px; pointer-events: none; opacity: .75;
  background: url("/home-samples/assets/e-garland.png") center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[dir="rtl"]:not(.gs-style-sobrio) .topbar::before, html[dir="rtl"]:not(.gs-style-sobrio) .top-bar::before, html[dir="rtl"]:not(.gs-style-sobrio) .conv-header::before, html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="welcome"] .navbar::before, html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="pricing"] .navbar::before {
  left: auto; right: max(calc(100% - 570px), 42%); transform: scaleX(-1); }
html:not(.gs-style-sobrio) .topbar, html:not(.gs-style-sobrio) .top-bar, html:not(.gs-style-sobrio) .conv-header, html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar { isolation: isolate; }
html:not(.gs-style-sobrio) .topbar::before, html:not(.gs-style-sobrio) .top-bar::before, html:not(.gs-style-sobrio) .conv-header::before, html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar::before, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar::before { z-index: 0; }
html:not(.gs-style-sobrio) .topbar > *, html:not(.gs-style-sobrio) .top-bar > *, html:not(.gs-style-sobrio) .conv-header > *, html:not(.gs-style-sobrio) .navbar > * { position: relative; z-index: 1; }
html:not(.gs-style-sobrio) .topbar-title, html:not(.gs-style-sobrio) .top-bar h1, html:not(.gs-style-sobrio) .top-bar-title, html:not(.gs-style-sobrio) .navbar-links a { text-shadow: 0 0 8px rgba(255, 248, 241, .95), 0 0 2px rgba(255, 248, 241, .95); }
html:not(.gs-style-sobrio) .topbar-title img[src*="logo-heart-favicon"] { content: url("/assets/logo-heart.png"); width: 28px; height: 28px; object-fit: contain; }
html:not(.gs-style-sobrio) .topbar-title, html:not(.gs-style-sobrio) .top-bar h1, html:not(.gs-style-sobrio) .top-bar-title, html:not(.gs-style-sobrio) .conv-header h2 {
  font-family: var(--gs-display); font-weight: 600 !important; font-size: 26px; color: var(--gs-ink); letter-spacing: -.01em; }
html:not(.gs-style-sobrio) .topbar-title, html:not(.gs-style-sobrio) .top-bar h1, html:not(.gs-style-sobrio) .top-bar-title { position: relative; display: inline-block; padding-bottom: 4px; }
html:not(.gs-style-sobrio) .topbar-title::after, html:not(.gs-style-sobrio) .top-bar h1::after, html:not(.gs-style-sobrio) .top-bar-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 10px;
  background: url("/home-samples/assets/w-underline-pink.png") center / 100% 100% no-repeat; }
html:not(.gs-style-sobrio) .topbar-btn, html:not(.gs-style-sobrio) .topbar .btn-icon {
  width: 42px; height: 42px; border-radius: 999px !important; background: #fff !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; color: var(--gs-muted) !important; }
html:not(.gs-style-sobrio) .top-bar-action { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; white-space: nowrap; border-radius: 999px !important; background: #fff !important;
  border: 1.5px dashed rgba(123, 47, 224, .22) !important; color: var(--gs-purple) !important; font-weight: 700; text-decoration: none; cursor: pointer; }
html:not(.gs-style-sobrio) .topbar-btn:hover, html:not(.gs-style-sobrio) .top-bar-action:hover { color: var(--gs-purple) !important; border-color: var(--gs-purple) !important; background: #fff !important; }

/* barras publicas de bienvenida y precios (eran oscuras): sobre crema, tinta y logo oscuro */
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar { position: fixed; background: rgba(255, 248, 241, .9) !important; }
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-brand img.heart-icon { filter: drop-shadow(0 3px 8px rgba(123, 47, 224, .25)) !important; }
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-brand img[src*="logo-transparent"], html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-logo img[src*="logo-transparent"] { content: url("/assets/logo-dark.png"); }
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a { color: var(--gs-ink) !important; opacity: 1 !important; font-weight: 700; }
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a:hover, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a:hover { color: var(--gs-purple) !important; }
html:not(.gs-style-sobrio) body[data-page="welcome"] .btn-login { color: var(--gs-purple) !important; border-color: rgba(123, 47, 224, .35) !important; background: #fff !important; }

/* ---------- aviso unico de estilo (lo crea sidebar.js la primera vez, solo con Jacarandas): tarjeta de papel abajo a la derecha ---------- */
.gs-style-hint { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 320px; max-width: calc(100vw - 48px); padding: 16px 18px 14px; background: #fff;
  border: 1.5px dashed rgba(123, 47, 224, .22); border-radius: 14px; box-shadow: 0 14px 40px rgba(42, 18, 64, .12); font-family: var(--gs-sans); color: var(--gs-ink); }
.gs-style-hint-title { font-family: var(--gs-display); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.gs-style-hint-text { font-size: 13.5px; color: var(--gs-muted); line-height: 1.45; margin-bottom: 12px; }
.gs-style-hint-actions { display: flex; gap: 8px; align-items: center; }
.gs-style-hint-go { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--gs-purple); color: #fff !important; font-weight: 800; font-size: 13px; text-decoration: none; }
.gs-style-hint-ok { height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1.5px dashed rgba(123, 47, 224, .22); color: var(--gs-muted); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
html[dir="rtl"] .gs-style-hint { right: auto; left: 24px; }

/* ============================================================
   PAGINAS DE LOS FLUJOS FUERA DE /pc (2026-09-13): inicio de sesion y registro
   de la app (/app/login, /app/register) + barras superiores de onboarding,
   terms-accept y profile-setup. Zelcar detecto que /app/login seguia con el
   diseno oscuro. Las reglas de estilo base (papel, tarjeta, boton pintado,
   sticker) aplican en ambos estilos como el resto de pantallas emocionales;
   la cabecera Jacarandas (crema + guirnalda) solo fuera de Sobrio.
   ============================================================ */

/* login / registro = pantallas emocionales: lavado lavanda, tarjeta en papel con cinta, boton pintado, sticker */
body[data-page="login"], body[data-page="register"] {
  background: var(--gs-cream) url("/home-samples/assets/w-wash-lavender.jpg") center top / 100% auto no-repeat fixed;
  color: var(--gs-ink);
}
body[data-page="login"] .bg-decor, body[data-page="register"] .bg-decor, body[data-page="login"] .blob, body[data-page="register"] .blob { display: none !important; }
body[data-page="login"]::after    { content: ""; background-image: url("/home-samples/assets/w-st-envelope.png"); }
body[data-page="register"]::after { content: ""; background-image: url("/home-samples/assets/w-st-stamp.png"); }
body[data-page="login"] .auth-card, body[data-page="register"] .auth-card {
  position: relative; background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(42, 18, 64, .08), 0 2px 6px rgba(42, 18, 64, .05) !important;
}
body[data-page="login"] .auth-card::before, body[data-page="register"] .auth-card::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 140px; height: 40px; transform: translateX(-50%) rotate(-3deg);
  background: url("/home-samples/assets/w-tape-2.png") center / 100% 100% no-repeat; pointer-events: none; z-index: 3;
}
body[data-page="login"] .auth-card h1, body[data-page="register"] .auth-card h1 { font-family: var(--gs-display); font-weight: 600 !important; letter-spacing: -.01em; }
body[data-page="login"] .auth-card .subtitle, body[data-page="register"] .auth-card .subtitle,
body[data-page="login"] .auth-card p, body[data-page="register"] .auth-card p { color: var(--gs-muted); }
body[data-page="login"] .btn-primary, body[data-page="register"] .btn-primary {
  background: url("/home-samples/assets/w-btn-grad.png") center / 100% 100% no-repeat !important; border: 0 !important; border-radius: 0 !important;
  color: #fff !important; box-shadow: none !important; min-height: 56px; font-family: var(--gs-sans) !important; font-weight: 800 !important;
  filter: drop-shadow(0 10px 18px rgba(123, 47, 224, .28)); transition: transform .25s cubic-bezier(.22, .8, .2, 1), filter .25s;
}
body[data-page="login"] .btn-primary:hover, body[data-page="register"] .btn-primary:hover { transform: translateY(-2px) scale(1.03) rotate(1deg); filter: drop-shadow(0 14px 22px rgba(123, 47, 224, .34)); }
body[data-page="login"] input, body[data-page="register"] input, body[data-page="login"] select, body[data-page="register"] select {
  background: #FFFDF9 !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 12px !important; font-family: var(--gs-sans) !important;
}
body[data-page="login"] input:focus, body[data-page="register"] input:focus { border-style: solid !important; border-color: var(--gs-purple) !important; }
body[data-page="login"] .auth-footer, body[data-page="register"] .auth-footer, body[data-page="login"] .auth-footer a, body[data-page="register"] .auth-footer a { color: var(--gs-muted); }

/* barra superior de los flujos (login, registro, onboarding, terms-accept, profile-setup): crema + guirnalda, solo en Jacarandas */
html:not(.gs-style-sobrio) body[data-page="login"] .navbar, html:not(.gs-style-sobrio) body[data-page="register"] .navbar,
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar, html:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar,
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar {
  overflow: hidden; isolation: isolate;
  background: rgba(255, 248, 241, .9) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1.5px dashed rgba(123, 47, 224, .22) !important; box-shadow: none !important;
}
html:not(.gs-style-sobrio) body[data-page="login"] .navbar::before, html:not(.gs-style-sobrio) body[data-page="register"] .navbar::before,
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar::before, html:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar::before,
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar::before {
  /* misma geometria y mascaras que las cabeceras de /pc (regla de legibilidad 2026-09-16) */
  content: ""; position: absolute; left: max(calc(100% - 570px), 42%); right: auto; top: -98px; width: 600px; height: 210px; pointer-events: none; opacity: .75; z-index: 0;
  background: url("/home-samples/assets/e-garland.png") center / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32%), linear-gradient(180deg, #000 45%, rgba(0, 0, 0, .35) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="login"] .navbar::before, html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="register"] .navbar::before,
html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar::before, html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar::before,
html[dir="rtl"]:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar::before { left: auto; right: max(calc(100% - 570px), 42%); transform: scaleX(-1); }
html:not(.gs-style-sobrio) body[data-page="login"] .navbar > *, html:not(.gs-style-sobrio) body[data-page="register"] .navbar > *,
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar > *, html:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar > *,
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar > * { position: relative; z-index: 1; }
/* logo oscuro y textos en tinta sobre crema */
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-logo img[src*="logo-transparent"], html:not(.gs-style-sobrio) body[data-page="register"] .navbar-logo img[src*="logo-transparent"],
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar-brand img[src*="logo-transparent"], html:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar-brand img[src*="logo-transparent"],
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar-brand img[src*="logo-transparent"] { content: url("/assets/logo-dark.png"); }
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar-brand img.heart-icon, html:not(.gs-style-sobrio) body[data-page="terms-accept"] .navbar-brand img.heart-icon,
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .navbar-brand img.heart-icon { filter: drop-shadow(0 3px 8px rgba(123, 47, 224, .25)) !important; }
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links a, html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links a {
  color: var(--gs-ink) !important; opacity: 1 !important; font-weight: 700; }
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links a.btn-nav, html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links a.btn-nav {
  background: url("/home-samples/assets/w-btn-grad.png") center / 100% 100% no-repeat !important; color: #fff !important; border-radius: 0 !important; text-shadow: none; }
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar-skip { color: var(--gs-purple); background: #fff; border: 1.5px dashed rgba(123, 47, 224, .22); border-radius: 999px; padding: 8px 16px; }
html:not(.gs-style-sobrio) body[data-page="onboarding"] .navbar-skip:hover { color: var(--gs-purple); }
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .nav-progress { background: rgba(255, 255, 255, .92); border: 1.5px dashed rgba(123, 47, 224, .22); border-radius: 999px; padding: 6px 14px; }
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .nav-progress-label { color: var(--gs-ink); }
html:not(.gs-style-sobrio) body[data-page="profile-setup"] .nav-progress-bar { background: var(--gs-lav) !important; }
html:not(.gs-style-sobrio) body[data-page="login"] .nav-hamburger, html:not(.gs-style-sobrio) body[data-page="register"] .nav-hamburger { color: var(--gs-ink); }

/* ============================================================
   LEGIBILIDAD SOBRE LA GUIRNALDA — regla firmada por Zelcar (2026-09-16)
   NUNCA puede haber texto, enlace, contador o icono que no se lea bien sobre la
   guirnalda ni sobre ningun adorno acuarela (petalos, sticker, cinta), en ninguna
   superficie. Todo lo que viva en el lado de la guirnalda de una cabecera
   Jacarandas va dentro de la PILDORA DE PAPEL (la misma que .navbar-skip del
   onboarding y .nav-progress de profile-setup): fondo blanco >= .92, borde
   1.5px punteado lavanda, radio 999, padding 8px 14px, texto tinta/morado.
   Los botones pintados (.btn-nav / .btn-primary / .btn-gradient con w-btn-grad)
   ya son legibles y no cambian. Cualquier cabecera nueva debe cumplir esto.
   Movil: usePaperPill() en src/components/acuarela (misma pildora).
   ============================================================ */
/* 1) pildora base: enlaces de las barras publicas y de los flujos, contadores, migas, volver, acciones fantasma, etiqueta Plus */
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a,
html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a:not(.btn-nav),
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links a:not(.btn-nav),
html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links a:not(.btn-nav),
html:not(.gs-style-sobrio) .topbar-count,
html:not(.gs-style-sobrio) .top-bar .breadcrumb,
html:not(.gs-style-sobrio) .topbar-breadcrumb,
html:not(.gs-style-sobrio) .topbar-back,
html:not(.gs-style-sobrio) .topbar .btn-ghost,
html:not(.gs-style-sobrio) .top-bar .plus-badge,
html:not(.gs-style-sobrio) .conv-header-info {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  background: rgba(255, 255, 255, .94) !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 999px !important;
  padding: 8px 14px !important; line-height: 1.2; text-shadow: none !important; white-space: nowrap;
}
/* enlaces de navegacion: tinta, morado al pasar; el marco se marca al pasar */
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a,
html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a:not(.btn-nav),
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links a:not(.btn-nav),
html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links a:not(.btn-nav) { color: var(--gs-ink) !important; font-weight: 700; font-size: 14px; }
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a:hover,
html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a:not(.btn-nav):hover,
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links a:not(.btn-nav):hover,
html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links a:not(.btn-nav):hover { color: var(--gs-purple) !important; border-color: var(--gs-purple) !important; }
/* las pildoras ya separan visualmente: menos hueco entre enlaces para que quepan a 1024 */
html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links,
html:not(.gs-style-sobrio) body[data-page="login"] .navbar-links, html:not(.gs-style-sobrio) body[data-page="register"] .navbar-links { gap: 10px; }
/* barras publicas en ventanas de 1024-1280 (con lateral): pildoras y botones mas compactos para que quepan sin desbordar */
@media (max-width: 1280px) {
  html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar { padding-left: 24px; padding-right: 24px; }
  html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a, html:not(.gs-style-sobrio) body[data-page="pricing"] .navbar-links a:not(.btn-nav) { padding: 6px 10px !important; font-size: 13px; }
  html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links, html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-actions { gap: 6px; }
  html:not(.gs-style-sobrio) body[data-page="welcome"] .btn-login, html:not(.gs-style-sobrio) body[data-page="welcome"] .btn-register { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  /* con lateral no caben los 4 enlaces + 2 botones: se ocultan los enlaces sin destino (href="#") y queda Inicio */
  html:not(.gs-style-sobrio) body[data-page="welcome"] .navbar-links a[href="#"] { display: none; }
}
/* contadores y migas: texto apagado, enlaces y cifras en morado */
html:not(.gs-style-sobrio) .topbar-count, html:not(.gs-style-sobrio) .top-bar .breadcrumb, html:not(.gs-style-sobrio) .topbar-breadcrumb { color: var(--gs-muted) !important; font-weight: 700; font-size: 13px; }
html:not(.gs-style-sobrio) .topbar-count strong, html:not(.gs-style-sobrio) .top-bar .breadcrumb a, html:not(.gs-style-sobrio) .topbar-breadcrumb a { color: var(--gs-purple) !important; }
html:not(.gs-style-sobrio) .topbar-back, html:not(.gs-style-sobrio) .topbar .btn-ghost { color: var(--gs-purple) !important; font-weight: 700; }
html:not(.gs-style-sobrio) .topbar-back:hover, html:not(.gs-style-sobrio) .topbar .btn-ghost:hover { opacity: 1; border-color: var(--gs-purple) !important; background: #fff !important; }
/* nombre + estado "en linea" del chat: pildora de dos lineas (rectangulo redondeado) */
html:not(.gs-style-sobrio) .conv-header-info { flex: 0 1 auto !important; margin-right: auto; max-width: 60%; overflow: hidden; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 14px !important; border-radius: 18px !important; }
html:not(.gs-style-sobrio) .conv-header-info .ch-name { color: var(--gs-ink); }
/* 2) campos y botones de icono del lado de la guirnalda: papel blanco con borde punteado */
html:not(.gs-style-sobrio) .topbar-search, html:not(.gs-style-sobrio) .topbar .search-input {
  background-color: #fff !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 999px !important; }
html:not(.gs-style-sobrio) .topbar-search:focus-within, html:not(.gs-style-sobrio) .topbar .search-input:focus { border-style: solid !important; border-color: var(--gs-purple) !important; box-shadow: none !important; }
html:not(.gs-style-sobrio) .conv-action-btn { background: #fff !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; border-radius: 999px !important; color: var(--gs-muted) !important; }
html:not(.gs-style-sobrio) .conv-action-btn:hover { color: var(--gs-purple) !important; border-color: var(--gs-purple) !important; }
/* hamburguesa (solo se muestra en ventanas estrechas): circulo de papel, barras en tinta */
html:not(.gs-style-sobrio) .nav-hamburger { width: 42px; height: 42px; border-radius: 999px !important; background: rgba(255, 255, 255, .94) !important; border: 1.5px dashed rgba(123, 47, 224, .22) !important; padding: 0 !important; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
html:not(.gs-style-sobrio) .nav-hamburger span { background: var(--gs-ink) !important; margin: 0 !important; width: 18px !important; }
@media (max-width: 768px) { html:not(.gs-style-sobrio) .nav-hamburger { display: inline-flex; } }
/* 3) adornos fuera de la guirnalda (sticker fijo, cinta, petalos) nunca tapan texto: por debajo del contenido y sin capturar clics */
html:not(.gs-style-sobrio) .gs-jac-petal, html:not(.gs-style-sobrio) .gs-jac-sticker, html:not(.gs-style-sobrio) .gs-jac-tape { pointer-events: none; }
/* 4) titulos de cabecera (no pueden ir en pildora: son Fredoka 26px con subrayado pintado):
   lavado de papel detras del texto, desvanecido a los lados para que no se vea un recorte.
   Asi el titulo se lee siempre, sea cual sea su largo, el idioma o el ancho de la ventana. */
html:not(.gs-style-sobrio) .topbar-title::before,
html:not(.gs-style-sobrio) .top-bar h1::before,
html:not(.gs-style-sobrio) .top-bar-title::before {
  content: ""; position: absolute; z-index: -1; top: -10px; bottom: -6px; left: -14px; right: -20px;
  background: rgba(255, 248, 241, .96); border-radius: 16px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 84%, transparent 100%); }
html[dir="rtl"]:not(.gs-style-sobrio) .topbar-title::before,
html[dir="rtl"]:not(.gs-style-sobrio) .top-bar h1::before,
html[dir="rtl"]:not(.gs-style-sobrio) .top-bar-title::before {
  left: -20px; right: -14px;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 7%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 7%, #000 84%, transparent 100%); }