/* ========================================================================== TOKENS — Futuristic 3D AI Directory (misma identidad ORBIT, más profundidad) ========================================================================== */ :root { --bg: #0B0B1A; --bg-rgb: 11, 11, 26; --bg-grad: radial-gradient(ellipse 800px 460px at 12% -8%, rgba(123,44,191,0.20), transparent 58%), radial-gradient(ellipse 650px 460px at 105% 5%, rgba(23,195,242,0.13), transparent 55%), linear-gradient(165deg, #12122b 0%, #0a0a16 55%, #0e0e20 100%); --card-grad: linear-gradient(145deg, #1e1e40 0%, #14142c 100%); --card-grad-raised: linear-gradient(145deg, #24244c 0%, #17173230 100%); --cyan: #17C3F2; --cyan-grad: linear-gradient(135deg, #17c3f2, #0090e0); --magenta: #F72585; --magenta-grad: linear-gradient(135deg, #ff4d9e, #c91863); --violet: #9333EA; --violet-grad: linear-gradient(135deg, #b45cf5, #6d28d9); --amber: #FFB703; --amber-grad: linear-gradient(135deg, #ffd166, #f4a261); --crema: #F0F4FF; --crema-tenue: rgba(240, 244, 255, 0.58); --crema-faint: rgba(240, 244, 255, 0.34); --sombra-luz: rgba(255, 255, 255, 0.05); --sombra-oscura: rgba(0, 0, 0, 0.6); --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", -apple-system, sans-serif; --radius: 20px; --radius-sm: 14px; } /* ========================================================================== TEMA CLARO ("modo día") — mismos tokens, mismos componentes, solo cambian los valores. Se activa poniendo data-theme="light" en . ========================================================================== */ [data-theme="light"] { --bg: #F3F4FA; --bg-rgb: 243, 244, 250; --bg-grad: radial-gradient(ellipse 800px 460px at 12% -8%, rgba(147,51,234,0.06), transparent 58%), radial-gradient(ellipse 650px 460px at 105% 5%, rgba(23,195,242,0.08), transparent 55%), linear-gradient(165deg, #ffffff 0%, #f3f4fa 55%, #eef0f7 100%); --card-grad: linear-gradient(145deg, #ffffff 0%, #f2f3f9 100%); --card-grad-raised: linear-gradient(145deg, #ffffff 0%, #eceefa 100%); --crema: #15152e; --crema-tenue: rgba(21, 21, 46, 0.62); --crema-faint: rgba(21, 21, 46, 0.38); --sombra-luz: rgba(255, 255, 255, 0.9); --sombra-oscura: rgba(30, 34, 70, 0.12); } [data-theme="light"] .tabbar { box-shadow: 8px 8px 24px rgba(30,34,70,0.12), -6px -6px 16px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.7); } [data-theme="light"] .destacada-imagen, [data-theme="light"] .detalle-captura { background: #e8e9f2; } /* Etiquetas (badges) y precio real — en oscuro usan colores pastel muy claros (pensados para fondo negro); en claro necesitan ser más saturados y oscuros para poder leerse sobre fondo blanco. */ [data-theme="light"] .badge.gratis { background: rgba(0,144,224,0.12); color: #0077b6; } [data-theme="light"] .badge.freemium { background: rgba(147,51,234,0.12); color: #7c3aed; } [data-theme="light"] .badge.trial { background: rgba(244,162,97,0.2); color: #b45309; } [data-theme="light"] .badge.pago { background: rgba(247,37,133,0.12); color: #c91863; } [data-theme="light"] .badge.cat { background: rgba(21,21,46,0.06); color: var(--crema-tenue); } [data-theme="light"] .badge.rating { background: rgba(21,21,46,0.05); color: #b45309; } [data-theme="light"] .badge.oferta { color: #b45309; border-color: rgba(180,83,9,.3); } [data-theme="light"] .precio-real { color: #b45309; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--crema); font-family: var(--font-body); overscroll-behavior: none; } body { padding-bottom: 118px; min-height: 100vh; position: relative; } body::before{ content:""; position:fixed; inset:0; z-index:-1; background:var(--bg-grad); background-attachment:fixed; } .oculto { display: none !important; } button { font-family: inherit; } /* ========================================================================== CABECERA ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 16px) 18px 12px; background: linear-gradient(180deg, rgba(var(--bg-rgb),0.97) 55%, transparent); backdrop-filter: blur(14px); } .topbar-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -0.4px; } .topbar-title em { font-style: normal; background: linear-gradient(90deg, var(--cyan), #9d4edd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .topbar-logo { height: 42px; width: auto; display: block; } .topbar-actions{ display:flex; align-items:center; gap:9px; } .lang-switch{ display:flex; align-items:center; position:relative; width:72px; height:40px; background: var(--card-grad); border-radius: 999px; padding:3px; box-shadow: 5px 5px 12px var(--sombra-oscura), -4px -4px 9px var(--sombra-luz), inset 0 1px 0 rgba(255,255,255,0.06); } .lang-switch .thumb{ position:absolute; top:3px; left:3px; width:33px; height:34px; border-radius:999px; background: var(--cyan-grad); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 3px 10px rgba(23,195,242,.45), inset 0 1px 0 rgba(255,255,255,.4); } .lang-switch.en .thumb{ transform: translateX(33px); } .lang-switch button{ background:none; border:none; flex:1; height:34px; position:relative; z-index:1; cursor:pointer; font-size:11px; font-weight:700; color: var(--crema-tenue); font-family: var(--font-display); } .lang-switch button.on{ color:#08201c; } .icon-btn { background: var(--card-grad); border: 1px solid rgba(255,255,255,0.07); color: var(--crema); width: 44px; height: 44px; border-radius: 50%; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 6px 6px 14px var(--sombra-oscura), -4px -4px 10px var(--sombra-luz), inset 0 1px 0 rgba(255,255,255,0.08); transition: transform 0.12s ease, box-shadow 0.12s ease; position: relative; } .icon-btn:active { transform: scale(0.93) translateY(1px); box-shadow: inset 3px 3px 8px rgba(0,0,0,0.5), inset -2px -2px 6px rgba(255,255,255,0.04); } .fav-count{ position:absolute; top:-3px; right:-3px; background: var(--magenta-grad); color:#fff; font-size:9.5px; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; box-shadow:0 2px 6px rgba(247,37,133,.5); } /* ========================================================================== HERO ========================================================================== */ .hero { padding: 10px 20px 4px; text-align: left; } .hero h1 { font-family: var(--font-display); font-size: 29px; font-weight: 700; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.5px; } .hero h1 span { background: linear-gradient(90deg, var(--cyan), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 14px; color: var(--crema-tenue); margin: 0 0 6px; line-height: 1.45; } /* ========================================================================== CHIPS DE PRECIO ========================================================================== */ .chips-precio { display: flex; gap: 9px; overflow-x: auto; padding: 16px 18px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chips-precio::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.06); color: var(--crema-tenue); border-radius: 999px; padding: 10px 17px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 4px 4px 11px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); transition: all 0.15s ease; cursor: pointer; } .chip.activo { border-color: transparent; box-shadow: inset 2px 2px 6px rgba(0,0,0,0.12), inset -2px -2px 6px rgba(255,255,255,0.25), 0 4px 14px rgba(23,195,242,0.32); } .chip.gratis.activo { background: linear-gradient(135deg, #17c3f2, #00b894); color:#06241f; } .chip.freemium.activo { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; } .chip.trial.activo { background: linear-gradient(135deg, #ffd166, #f4a261); color: #1a1a1a; } .chip.pago.activo { background: linear-gradient(135deg, #ff4d9e, #c91863); color: #fff; } .chip.todos.activo { background: linear-gradient(135deg, #e8ecff, #c7cff5); color:#0B0B1A; } .filtro-activo { margin: 6px 18px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filtro-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(23,195,242,0.12); border: 1px solid rgba(23,195,242,0.25); color: var(--cyan); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; } .filtro-pill button { background: none; border: none; color: var(--cyan); font-size: 14px; padding: 0 0 0 2px; line-height: 1; cursor: pointer; } /* ========================================================================== CATEGORÍAS (tarjetas 3D con halo de color) ========================================================================== */ .section-label { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--crema); margin: 20px 18px 12px; display: flex; align-items: center; justify-content: space-between; } /* Desplegables de Categoría y Precio en portada */ .filtros-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px 6px; } .filtro-busqueda { flex: 1 1 100%; display: flex; align-items: center; gap: 9px; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; box-shadow: 4px 4px 10px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); } .filtro-busqueda input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--crema); font-size: 13.5px; font-family: var(--font-body); } .filtro-busqueda input::placeholder { color: var(--crema-faint); } .filtro-dropdown { flex: 1 1 0; min-width: 130px; } .filtro-dropdown { position: relative; flex: 1; min-width: 0; } .filtro-dropdown-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; color: var(--crema); font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; box-shadow: 4px 4px 10px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filtro-dropdown-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filtro-dropdown-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 15; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; box-shadow: 0 16px 36px rgba(0,0,0,0.5); max-height: 320px; overflow-y: auto; padding: 6px; } .filtro-dropdown-item { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--crema); cursor: pointer; } .filtro-dropdown-item:hover { background: rgba(23,195,242,0.08); } .filtro-dropdown-item.activo { background: rgba(23,195,242,0.14); color: var(--cyan); font-weight: 600; } .filtro-dropdown-item.filtro-dropdown-sub { padding-left: 26px; font-size: 13px; color: var(--crema-tenue); } .filtro-dropdown-item.filtro-dropdown-sub.activo { color: var(--cyan); } .section-label span { font-size: 12.5px; font-weight: 500; color: var(--cyan); font-family: var(--font-body); cursor: pointer; } .cats-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 18px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cats-scroll::-webkit-scrollbar { display: none; } .cat-card { flex: 0 0 108px; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px; padding: 16px 12px 14px; text-align: center; box-shadow: 6px 6px 14px var(--sombra-oscura), -4px -4px 10px var(--sombra-luz); transition: transform 0.15s ease, outline 0.15s; cursor: pointer; } .cat-card:active { transform: scale(0.96); } .cat-card.activo { outline: 2px solid var(--cyan); outline-offset: 2px; } .cat-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin: 0 auto 10px; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 14px -4px var(--halo, rgba(23,195,242,.6)); } .cat-name { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--crema); } /* ========================================================================== TRENDING + LISTA ========================================================================== */ main { padding: 0 18px; } /* Logo con imagen real (favicon/logo oficial vía Clearbit). Fondo claro porque la mayoría de logos asumen fondo blanco o transparente — si la imagen falla, onLogoError() lo convierte de nuevo en las iniciales de color de siempre. */ .tool-logo-img { background: #f4f4f8 !important; padding: 9px; } .tool-logo-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .destacadas { margin: 18px 0 4px; } .destacadas-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0 0 12px; } .destacadas-scroll { display: flex; flex-direction: column; gap: 13px; padding: 4px 2px 6px; } .destacadas-scroll::-webkit-scrollbar { display: none; } .destacadas-scroll .tool-card { width: 100%; } .tool-card-destacada { border: 1px solid rgba(255,183,3,0.3); box-shadow: 7px 7px 18px var(--sombra-oscura), -5px -5px 12px var(--sombra-luz), 0 0 0 1px rgba(255,183,3,0.08); } .badge.top { background: linear-gradient(135deg, rgba(255,183,3,.25), rgba(255,209,102,.18)); color: var(--amber); border: 1px solid rgba(255,183,3,.35); } .trending { margin: 18px 0 8px; padding: 15px; background: linear-gradient(135deg, rgba(123,44,191,0.24), rgba(23,195,242,0.08)); border: 1px solid rgba(123,44,191,0.3); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(123,44,191,0.14), inset 0 1px 0 rgba(255,255,255,0.05); } .trending-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; margin: 0 0 11px; } .trending-tools { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; } .trending-tools::-webkit-scrollbar { display: none; } .trend-pill { flex: 0 0 auto; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor:pointer; } .tool-list { display: flex; flex-direction: column; gap: 13px; margin-top: 6px; } .tool-card { display: flex; gap: 13px; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius); padding: 15px; position: relative; overflow:hidden; box-shadow: 7px 7px 18px var(--sombra-oscura), -5px -5px 12px var(--sombra-luz); transition: transform 0.15s ease; } .tool-card::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); } .tool-card:active { transform: scale(0.985) translateY(1px); box-shadow: inset 4px 4px 12px rgba(0,0,0,0.4), inset -3px -3px 8px rgba(255,255,255,0.03); } .tool-logo { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #0B0B1A; box-shadow: 3px 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } .tool-info { flex: 1; min-width: 0; } .tool-name { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; margin: 0 0 3px; color: var(--crema); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-desc { font-size: 12.5px; color: var(--crema-tenue); margin: 0 0 9px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .precio-real { font-size: 11.5px; color: var(--amber); font-weight: 600; margin: 6px 0 0; font-family: var(--font-body); } .tool-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.2); } .badge.gratis { background: rgba(23,195,242,0.18); color: #17c3f2; } .badge.freemium { background: rgba(167,139,250,0.2); color: #c4b5fd; } .badge.trial { background: rgba(255,183,3,0.2); color: #ffd166; } .badge.pago { background: rgba(247,37,133,0.2); color: #ff8fb6; } .badge.cat { background: rgba(255,255,255,0.08); color: var(--crema-tenue); text-transform: none; font-weight: 600; } .badge.oferta { background: linear-gradient(135deg, rgba(255,183,3,.28), rgba(247,37,133,.2)); color: var(--amber); border:1px solid rgba(255,183,3,.35); } .badge.rating { background: rgba(255,255,255,0.06); color: var(--amber); text-transform:none; } .btn-fav { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 19px; color: var(--magenta); padding: 4px; line-height: 1; cursor:pointer; filter: drop-shadow(0 0 0 transparent); } .btn-fav.activo{ filter: drop-shadow(0 0 7px rgba(247,37,133,.65)); } .estado-vacio { text-align: center; color: var(--crema-tenue); font-size: 14px; padding: 36px 20px; line-height: 1.6; } /* ========================================================================== PANEL CATEGORÍAS + BÚSQUEDA ========================================================================== */ .panel-categorias { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } .panel-categorias::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--bg-grad); } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 14px) 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); } .panel-header h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; } #btn-cerrar-panel { display: none; } .panel-search { margin: 14px 16px 8px; display: flex; align-items: center; gap: 10px; background: var(--card-grad); border: 1px solid rgba(23,195,242,0.2); border-radius: 16px; padding: 13px 16px; box-shadow: 5px 5px 14px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz), 0 0 18px rgba(23,195,242,0.08); } .panel-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--crema); font-size: 15px; font-family: var(--font-body); } .panel-search input::placeholder { color: var(--crema-tenue); } .panel-body { flex: 1; overflow-y: auto; padding: 8px 16px 130px; -webkit-overflow-scrolling: touch; } .nivel-main .cat-main { display: flex; align-items: center; justify-content: space-between; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 15px 16px; margin-bottom: 10px; box-shadow: 5px 5px 12px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); cursor: pointer; transition: transform 0.12s; } .cat-main:active { transform: scale(0.985); } .cat-main-left { display: flex; align-items: center; gap: 14px; } .cat-main-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .cat-main-name { font-weight: 600; font-size: 15.5px; } .cat-main-count { font-size: 12px; color: var(--crema-tenue); margin-top: 2px; } .cat-main-arrow { color: var(--crema-tenue); font-size: 18px; } .nivel-sub .sub-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 4px 0; } .btn-volver { background: var(--card-grad); border: 1px solid rgba(255,255,255,0.08); color: var(--crema); width: 38px; height: 38px; border-radius: 12px; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 4px 4px 10px var(--sombra-oscura), -2px -2px 6px var(--sombra-luz); cursor:pointer; } .sub-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .sub-list { display: flex; flex-direction: column; gap: 8px; } .sub-item { display: flex; align-items: center; justify-content: space-between; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; padding: 15px 16px; box-shadow: 4px 4px 10px var(--sombra-oscura), -3px -3px 7px var(--sombra-luz); cursor: pointer; } .sub-item:active { transform: scale(0.985); } .sub-item-name { font-size: 15px; font-weight: 500; } .sub-item-check { color: var(--cyan); font-size: 16px; opacity: 0; } .sub-item.selected .sub-item-check { opacity: 1; } /* ========================================================================== DETALLE ========================================================================== */ .view-detalle { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: calc(env(safe-area-inset-top) + 16px) 20px 130px; } .view-detalle::before{ content:""; position:fixed; inset:0; z-index:-1; background:var(--bg-grad); } .btn-volver-listado { position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 18px; z-index: 65; display: flex; align-items: center; gap: 6px; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.08); color: var(--crema); font-size: 13px; font-weight: 600; padding: 9px 16px 9px 13px; border-radius: 999px; cursor: pointer; box-shadow: 4px 4px 10px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); } .detalle-header-row { display: flex; align-items: center; gap: 14px; margin: 36px 0 16px; } .detalle-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 4px 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 32px -8px var(--halo, rgba(23,195,242,.55)); } .detalle-captura { width: 100%; max-width: 420px; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: #0d0d20; box-shadow: 4px 4px 14px rgba(0,0,0,0.45); margin-bottom: 18px; position: relative; } .detalle-captura img { width: 100%; height: 100%; object-fit: cover; display: block; } .detalle-nombre { font-family: var(--font-display); font-size: 27px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.4px; } .stars-row{ display:flex; gap:6px; margin: 18px 0 6px; } .star-btn{ background:none; border:none; font-size:26px; color: rgba(255,255,255,.16); cursor:pointer; padding:2px; line-height:1; transition: transform .1s; } .star-btn.lleno{ color: var(--amber); filter: drop-shadow(0 0 6px rgba(255,183,3,.5)); } .star-btn:active{ transform: scale(1.2); } [data-theme="light"] .star-btn{ color: rgba(21,21,46,.16); } .votos-info{ font-size:12.5px; color: var(--crema-tenue); } .votos-info b{ color: var(--crema); } .voto-gracias { font-size: 12.5px; color: var(--cyan); font-weight: 600; margin: 4px 0 0; } .voto-gracias-fade { animation: apareceYDesvanece 2.6s ease forwards; } @keyframes apareceYDesvanece { 0% { opacity: 0; transform: translateY(-4px); } 12% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } } .detalle-desc { color: var(--crema-tenue); line-height: 1.65; margin: 16px 0 20px; font-size: 15px; } .detalle-caracteristicas { list-style: none; margin: -8px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .detalle-caracteristicas li { position: relative; padding-left: 22px; color: var(--crema-tenue); font-size: 14px; line-height: 1.5; } .detalle-caracteristicas li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cyan); font-weight: 700; } /* Ventajas / Desventajas — dos tarjetas lado a lado, mismo lenguaje visual que .descuento-card (fondo suave, borde de color, sombra 3D sutil). */ .detalle-pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; } @media (max-width: 480px) { .detalle-pros-contras { grid-template-columns: 1fr; } } .pros-card, .contras-card { border-radius: 16px; padding: 15px 16px; box-shadow: 4px 4px 12px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); } .pros-card { background: linear-gradient(135deg, rgba(0,200,150,.14), rgba(0,200,150,.05)); border: 1px solid rgba(0,200,150,.28); } .contras-card { background: linear-gradient(135deg, rgba(255,77,109,.14), rgba(255,77,109,.05)); border: 1px solid rgba(255,77,109,.28); } .pros-card h3, .contras-card h3 { font-family: var(--font-display); font-size: 13px; font-weight: 700; margin: 0 0 9px; display: flex; align-items: center; gap: 6px; } .pros-card h3 { color: #00c896; } .contras-card h3 { color: #ff4d6d; } .pros-card ul, .contras-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pros-card li, .contras-card li { color: var(--crema-tenue); font-size: 13px; line-height: 1.5; } /* Casos de uso — lista con separadores finos, icono de bombilla, mismo patrón que ya usa el resto de la ficha para listas de texto. */ .detalle-casos-uso { margin: 0 0 22px; } .detalle-casos-uso h3 { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--cyan); margin: 0 0 10px; } .caso-uso-item { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--crema-tenue); font-size: 13.5px; line-height: 1.5; } .caso-uso-item:last-child { border-bottom: none; } .caso-uso-icono { flex-shrink: 0; font-size: 14px; } .descuento-card{ margin: 0 0 22px; padding: 15px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,183,3,.15), rgba(247,37,133,.09)); border: 1px solid rgba(255,183,3,.28); display:flex; gap:12px; align-items:flex-start; box-shadow: 4px 4px 12px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); } .descuento-card .icono{ font-size:20px; } .descuento-card b{ display:block; font-size:13px; color: var(--amber); margin-bottom:3px; font-family: var(--font-display); } .descuento-card p{ margin:0; font-size:12.5px; color: var(--crema-tenue); line-height:1.5; } /* Aviso de afiliados — deliberadamente muy discreto: sin afiliados activos ahora mismo, no debe competir visualmente con nada de la ficha. Tamaño mínimo legible, color muy tenue, sin margen inferior extra (queda pegado al final de la ficha, después de los botones). */ .disclaimer-ref{ font-size:9.5px; color: var(--crema-faint); line-height:1.4; margin: 0; text-align: center; opacity: 0.7; } .detalle-actions { display: flex; gap: 12px; margin-bottom: 28px; } .btn-primario { flex: 1; background: var(--cyan-grad); color: #0B0B1A; border: none; border-radius: var(--radius-sm); padding: 15px; font-weight: 700; font-size: 15px; cursor:pointer; box-shadow: 5px 5px 14px rgba(0,0,0,0.4), -3px -3px 8px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform .12s; } .btn-primario:active{ transform: scale(.97); } .btn-secundario { flex: 1; background: var(--card-grad); border: 1.5px solid var(--cyan); color: var(--cyan); border-radius: var(--radius-sm); padding: 15px; font-weight: 700; font-size: 15px; cursor:pointer; box-shadow: 5px 5px 12px var(--sombra-oscura), -3px -3px 8px var(--sombra-luz); } /* ========================================================================== TAB BAR ========================================================================== */ .tabbar { position: fixed; bottom: 14px; left: 14px; right: 14px; z-index: 85; display: flex; background: var(--card-grad); border-radius: 24px; padding: 10px 4px calc(env(safe-area-inset-bottom) * 0.5 + 10px); box-shadow: 8px 8px 24px rgba(0,0,0,0.55), -6px -6px 16px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.06); } .tab { flex: 1; background: none; border: none; color: var(--crema-tenue); font-family: var(--font-body); font-size: 10px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 16px; transition: all 0.15s ease; cursor:pointer; } .tab span { font-size: 20px; } .tab.activo { color: #0B0B1A; background: var(--cyan-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 12px rgba(23,195,242,0.35); } button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* ========================================================================== RESPONSIVE — tablet y escritorio Bajo 640px: sin cambios, diseño de móvil tal cual (y así se ve también dentro de la app empaquetada con Capacitor). ========================================================================== */ /* TABLET / ESCRITORIO (640px en adelante) */ @media (min-width: 640px) { body { max-width: 100%; box-shadow: none; } .topbar, .filtro-activo, .section-label, main { max-width: 720px; margin-left: auto; margin-right: auto; } .hero { max-width: 720px; margin-left: auto; margin-right: auto; padding-top: 78px; } .filtros-bar { max-width: 720px; margin-left: auto; margin-right: auto; flex-wrap: nowrap; } .filtro-busqueda { flex: 1.4 1 0; min-width: 0; } .cats-scroll { max-width: 720px; margin: 2px auto 8px; overflow-x: visible; flex-wrap: wrap; justify-content: flex-start; } .cat-card { flex: 0 0 auto; width: 108px; } #lista-tools, .tool-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; } .estado-vacio { grid-column: 1 / -1; } .destacadas-scroll { flex-direction: row; flex-wrap: wrap; } .destacadas-scroll .tool-card { width: auto; flex: 0 0 calc(50% - 7px); } /* La barra de pestañas deja de ser un "dock" flotante de móvil y pasa a ser un menú horizontal fijo, pegado justo debajo de la cabecera — como en cualquier web de escritorio normal. */ .tabbar { position: fixed; top: 70px; bottom: auto; left: 0; right: 0; transform: none; max-width: 100%; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 0; background: rgba(var(--bg-rgb),0.92); backdrop-filter: blur(14px); box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 25; } .tab { flex: 0 0 auto; flex-direction: row; gap: 7px; padding: 9px 20px; border-radius: 10px; } .tab span:first-child { font-size: 16px; } .tab.activo { box-shadow: none; } /* La X para cerrar el panel ya está oculta siempre (ver regla base) — el menú de pestañas se encarga de la navegación tanto en móvil como en escritorio. */ /* Panel de búsqueda/categorías y ficha de detalle: en escritorio ocupan el área de contenido (empiezan justo debajo del menú, sin taparlo) y el contenido de dentro se centra al mismo ancho que el resto de la web, en vez de quedarse pegado a los bordes. */ .panel-categorias, .view-detalle { top: 122px; z-index: 20; } .panel-header, .panel-search, #chips-precio-panel, .panel-body, #detalle-contenido { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; } .nivel-main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cat-main { margin-bottom: 0; } } /* ESCRITORIO (1024px en adelante) */ @media (min-width: 1024px) { .topbar, .filtro-activo, .section-label, main, .hero, .cats-scroll { max-width: 1080px; } .filtros-bar { max-width: 1080px; margin-left: auto; margin-right: auto; } .panel-header, .panel-search, #chips-precio-panel, .panel-body, #detalle-contenido { max-width: 1080px; } .nivel-main { grid-template-columns: repeat(3, 1fr); } #lista-tools, .tool-list { grid-template-columns: repeat(3, 1fr); gap: 15px; } .destacadas-scroll .tool-card { flex: 0 0 calc(33.333% - 9px); } .trending-tools { flex-wrap: wrap; } .hero h1 { font-size: 36px; } .hero p { font-size: 15px; max-width: 46ch; } } @media (min-width: 1400px) { .topbar, .filtro-activo, .section-label, main, .hero, .cats-scroll { max-width: 1280px; } .filtros-bar { max-width: 1280px; margin-left: auto; margin-right: auto; } .panel-header, .panel-search, #chips-precio-panel, .panel-body, #detalle-contenido { max-width: 1280px; } #lista-tools, .tool-list { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }