originales del overlay quedan ocultos y los specs del cuerpo se ocultan en móvil (viven en la foto) --- */ .kxf .kxf-ovlinfo>p{display:none} .kxf .kxf-ovl2{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .kxf .kxf-ovl2 .t{font:700 26px/1.05 var(--serif);letter-spacing:-.015em;margin:0; text-shadow:0 1px 12px rgba(0,0,0,.35)} .kxf .kxf-ovl2 .z{font:500 13.5px var(--sans);opacity:.92;margin:5px 0 0} .kxf .kxf-ovl2 .z::before{content:"📍 "} .kxf .kxf-ovl2 .pr{font:700 27px var(--serif);letter-spacing:-.01em;margin:0;white-space:nowrap; text-shadow:0 1px 12px rgba(0,0,0,.35)} .kxf .kxf-ochips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .kxf .kxf-ochips span{display:inline-flex;align-items:center;gap:6px; background:rgba(20,14,9,.42);border:1px solid rgba(255,255,255,.25); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-radius:99px;padding:7px 12px;font:600 12.5px var(--sans);color:#fff} .kxf .kxf-ochips svg{width:15px;height:15px} @media (max-width:999px){ .kxf .kxf-specs{display:none!important} /* en móvil los specs van en la foto */ } /* --- Badges de la foto como píldoras blancas (maqueta) --- */ .kxf .prop-card .verified-badge{background:#fff;color:var(--ink);border:0; box-shadow:0 2px 8px rgba(0,0,0,.12)} /* --- Título de página con presencia (estaba apagado) --- */ .kxf .feed-header h2{color:var(--ink);opacity:1} /* --- Historia en texto normal gris (la maqueta no usa cursiva) --- */ .kxf .kxf-story{font-style:normal!important;color:var(--ink-soft)!important} /* --- Escritorio: acciones como píldoras con etiqueta (maqueta: "✕ Descartar" perfilada · "Guardar" · "❤ Favorito" rellena) --- */ @media (min-width:1000px){ .kxf .feed-header h2{font-size:32px} #app .kxf.scrollable-feed .swipe-actions{justify-content:flex-end;padding-right:6px} .kxf .swipe-actions .act-col{flex-direction:row} .kxf .swipe-actions .act-lbl{display:none} #app .kxf .swipe-actions .act{width:auto;height:46px;border-radius:14px; padding:0 18px;display:flex;align-items:center;gap:9px;box-shadow:none} .kxf .swipe-actions .act::after{font:700 13.5px var(--sans);letter-spacing:.01em} .kxf .swipe-actions .act.pass::after{content:"Descartar"} .kxf .swipe-actions .act.save::after{content:"Guardar"} .kxf .swipe-actions .act.like::after{content:"Favorito"} #app .kxf .swipe-actions .act.pass{background:#fff;color:var(--ink);border:1.5px solid var(--ink-soft)} #app .kxf .swipe-actions .act.save{background:#fff;color:var(--accent);border:1.5px solid var(--accent-soft)} #app .kxf .swipe-actions .act.like{background:var(--accent);color:#fff;border:0; box-shadow:0 8px 22px rgba(163,0,40,.3)} #app .kxf .swipe-actions .act svg{width:19px;height:19px} } /* ============ v3 · PC según maqueta (héroe + acciones en panel) ============ */ .kxf .kxf-acts-panel{display:none} /* solo escritorio */ .kxf .kxf-hero{display:none} /* solo escritorio */ @media (min-width:1000px){ /* héroe: eyebrow + título grande a la izquierda, toggle a la derecha */ #app .kxf .kxf-hero{display:flex;align-items:flex-end;justify-content:space-between; gap:20px;max-width:1010px;margin:2px auto 16px;width:100%;padding:0 6px;box-sizing:border-box} .kxf .kxf-eyebrow{font:700 11px var(--sans)!important;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)!important;margin:0 0 8px!important} .kxf .kxf-bigtitle{font:600 40px/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0} #app .kxf .kxf-hero .kx-feedtoggle{margin:0 0 4px;padding:0} /* el header original queda como barra de utilidades: marca fuera (ya está en el carril), título pequeño fuera, botones a la derecha */ .kxf .kxf-header .nav-brand,.kxf .kxf-header h2{display:none} .kxf .kxf-header{justify-content:flex-end;padding-bottom:0;min-height:0} /* el subtítulo original ya vive en el héroe como eyebrow */ /* acciones dentro del panel (clon); las flotantes originales fuera */ #app .kxf .kxf-acts-main{display:none} #app .kxf .kxf-bd .kxf-acts-panel{display:flex;position:static;width:auto;max-width:none; margin:18px 0 0;padding:0;justify-content:flex-start;gap:12px;grid-template-columns:none} #app .kxf .kxf-acts-panel .act-col{flex-direction:row} #app .kxf .kxf-acts-panel .act-lbl{display:none} #app .kxf .kxf-acts-panel .act{width:auto;height:46px;border-radius:14px; padding:0 18px;display:flex;align-items:center;gap:9px;box-shadow:none; background:#fff;color:var(--ink);border:1.5px solid var(--ink-soft); -webkit-backdrop-filter:none;backdrop-filter:none} #app .kxf .kxf-acts-panel .act::after{font:700 13.5px var(--sans);letter-spacing:.01em} #app .kxf .kxf-acts-panel .act.pass::after{content:"Descartar"} #app .kxf .kxf-acts-panel .act.save::after{content:"Guardar"} #app .kxf .kxf-acts-panel .act.like::after{content:"Favorito"} #app .kxf .kxf-acts-panel .act.save{color:var(--accent);border-color:var(--accent-soft)} #app .kxf .kxf-acts-panel .act.like{background:var(--accent);color:#fff;border:0; box-shadow:0 8px 22px rgba(163,0,40,.3)} #app .kxf .kxf-acts-panel .act svg{width:19px;height:19px} #app .kxf .kxf-acts-panel .act.kxs-locked{opacity:.45;filter:saturate(.4);pointer-events:none} /* la ficha pierde el botón rosa gigante: enlace discreto bajo la historia */ #app .kxf .kxf-cta{background:transparent;border:0;color:var(--accent); font-weight:700;text-align:left;padding:6px 0 0;margin-top:4px} } /* --- "Más para ti": separador heredado con chip negro que parecía un error y quedaba raro sobre el ¿Sabías que?. Se elimina; el ¿Sabías qué? ya titula la sección por sí solo. --- */ .kxf .below-divider{display:none} /* ============ v4 · móvil según maqueta ============ */ /* --- Fondo CREMA: reversión del tema oscuro del feed (34 reglas .scrollable-feed de la piel anterior; la maqueta es clara) --- */ .kxf.scrollable-feed{background:var(--bg)} #app:has(.tabbar) .kxf.scrollable-feed{border-left:1px solid var(--hairline)} .kxf.scrollable-feed .status-bar{color:var(--ink)} .kxf.scrollable-feed .feed-header{border-color:var(--hairline)} .kxf.scrollable-feed .feed-header .ttl h2{color:var(--ink)} .kxf.scrollable-feed .feed-header .ic-btn{background:var(--paper);border:1px solid var(--hairline-2);color:var(--ink)} .kxf.scrollable-feed>p{color:var(--ink-mute)!important} .kxf.scrollable-feed .kxh-chip{background:var(--paper);border-color:var(--hairline-2);box-shadow:0 1px 6px rgba(30,22,15,.06)} .kxf.scrollable-feed .kxh-tx small{color:var(--ink-soft)} .kxf.scrollable-feed .kxh-tx b{color:var(--ink)} .kxf.scrollable-feed .kxh-chev{color:var(--ink-mute)} .kxf.scrollable-feed .chip{background:var(--paper);color:var(--ink-soft);border-color:var(--hairline-2)} .kxf.scrollable-feed .chip.accent.selected,.kxf.scrollable-feed .chip.selected{background:var(--accent);color:#fff} .kxf.scrollable-feed .cs-action,.kxf.scrollable-feed .feed-below .card{background:var(--surface);border-color:var(--hairline);color:var(--ink)} .kxf.scrollable-feed .cs-action b{color:var(--ink)} .kxf.scrollable-feed .cs-action i{color:var(--ink-soft)} .kxf.scrollable-feed .cold-state .cs-title{color:var(--ink)} .kxf.scrollable-feed .cold-state .cs-foot,.kxf.scrollable-feed .cold-state .cs-sub{color:var(--ink-soft)} .kxf.scrollable-feed .tabbar{background:var(--paper);border-color:var(--hairline);box-shadow:0 -2px 18px rgba(30,22,15,.1)} .kxf.scrollable-feed .tabbar .tab,.kxf.scrollable-feed .tabbar button{color:var(--ink-mute)} .kxf.scrollable-feed .tabbar .active,.kxf.scrollable-feed .tabbar [aria-current]{color:var(--accent)} /* --- Píldora de encaje granate arriba-izquierda (maqueta móvil); el donut queda solo en escritorio --- */ .kxf .kxf-affpill{display:inline-flex;align-items:center;gap:5px;background:var(--accent); color:#fff;font:800 12.5px var(--sans);border-radius:99px;padding:7px 12px; box-shadow:0 4px 14px rgba(163,0,40,.35)} @media (max-width:999px){ .kxf .prop-card .enc-donut{display:none} } @media (min-width:1000px){ .kxf .kxf-affpill{display:none} } /* --- v4b (feedback): en móvil el toggle va CENTRADO y las acciones debajo de la tarjeta (antes flotaban tapando features y Ver ficha) --- */ @media (max-width:999px){ .kxf .kx-feedtoggle{justify-content:center} .kxf.scrollable-feed .kxf-acts-main{position:static;display:flex;margin:14px auto 6px; padding-right:0;justify-content:center;align-items:center;gap:22px;width:auto} .kxf .kxf-acts-panel{display:none!important} /* el clon es solo de PC */ } /* --- auditoría 17-jul: objetivos táctiles >=36px en móvil --- */ @media (max-width:999px){ .kxf .chip{min-height:36px;display:inline-flex;align-items:center} .kx-feedtoggle .seg button{min-height:36px} .kxf .kxh-hint-x{min-width:32px;min-height:32px;display:inline-flex; align-items:center;justify-content:center} } /* --- v18.74u · Explorar en móvil: dar aire vertical entre los tres bloques de la cabecera (toggle "Uno a uno/Lista", selector de búsqueda BUSCO y la fila de chips de encaje), que se apelotonaban. Solo separación: los chips ya scrollan solos y no desbordan. Ámbito móvil, no toca escritorio. --- */ @media (max-width:999px){ /* toggle: separarlo del título de arriba y del selector de abajo */ .kx-feedtoggle{margin:10px 22px 16px!important} } /* --- v18.74ai · Fuera la barra de estado falsa "9:41 ●●● ▮" --- Era decoración de la maqueta Stitch (hora fija 9:41) y además todo el bloque llevaba un data-go que navegaba al dashboard al tocarlo: en un móvil real duplica la barra del sistema y actúa de botón invisible. Se oculta en TODAS las pantallas (U.statusBar la pinta en todas). Rollback: borrar esta regla. --- */ .status-bar{display:none!important} /* --- v18.74aj-b · PWA instalada: aire bajo la barra de estado del sistema (la cabecera del feed quedaba pegada arriba) --- */ @media (display-mode: standalone){ #app .feed-header{padding-top:12px} } /* --- v18.74am · Móvil: fuera el título del feed (quedaba bajo el logo). El logo KASITHA ya identifica la pantalla; el h2 ("Explorar") sobraba y apiñaba la cabecera. Solo móvil; escritorio conserva su título. --- */ @media (max-width:959px){ #app .feed-header .ttl h2{display:none} } /* --- v18.74au · Vacío del feed en móvil: compacto (petición owner) --- */ @media (max-width:959px){ #app .kx-cold-min{padding:10px 2px} #app .kx-cold-min .cs-title{font-size:19px;margin:0 0 6px} #app .kx-cold-min .cs-sub{font-size:13px;line-height:1.5;margin:0 auto 12px;max-width:340px} #app .kx-cold-min .card{padding:12px 12px 14px} #app .kx-cold-min .card p{font-size:11px!important} #app .kx-cold-min .card .btn, #app .kx-cold-min .card a.btn{font-size:13.5px!important;padding:11px 14px!important} }