/* ServitodoRD · Home * Ruta: /asset/css/home/style.css * Fuente: Inter (cárgala en el ) * Diseño tipo marketplace como la maqueta */ /* ===== Reset + Base ===== */ * { box-sizing: border-box; } html,body { height: 100%; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #1f2937; /* slate-800 */ background: #f8fafc; /* slate-50 */ line-height: 1.45; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; border: 0; background: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; } .grid { display: grid; gap: 16px; } .hidden { display: none !important; } .muted { color: #6b7280; } /* util global */ /* ===== Colors & Theme ===== */ :root{ --bg: #ffffff; --muted: #6b7280; /* slate-500 */ --muted-2:#9ca3af; /* slate-400 */ --line:#e5e7eb; /* slate-200 */ --card:#ffffff; --shadow: 0 10px 25px rgba(2,6,23,.06); --radius: 14px; --primary:#6c5ce7; --primary-600:#5b4bd6; --primary-700:#4338ca; --accent:#ff4d8d; --grad: linear-gradient(135deg,#6c5ce7 0%, #a66bff 100%); --grad-dark: linear-gradient(135deg,#2a1f8f 0%, #6c5ce7 100%); } /* ===== Topbar ===== */ .topbar{ background:#0f172a; /* slate-900 */ color:#e2e8f0; /* slate-200 */ font-size:13px; } .topbar .row{ display:flex; align-items:center; justify-content:space-between; padding: 8px 0; } .topbar a{ color:#cbd5e1; } .topbar .links{ display:flex; gap:16px; align-items:center; } /* ===== Header ===== */ .header{ position: sticky; top:0; z-index: 40; background: var(--bg); border-bottom:1px solid var(--line); backdrop-filter: saturate(180%) blur(6px); } .nav{ display:flex; align-items:center; gap:20px; padding:14px 0; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; } .brand img{ width:36px; height:36px; border-radius:10px; object-fit:cover; } .nav .menu{ margin-left:auto; display:flex; align-items:center; gap:18px; } .nav .menu a{ color:#111827; font-weight:600; font-size:14px; } .nav .menu a.muted{ color: var(--muted); font-weight:500; } .btn{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 16px; border-radius:12px; font-weight:700; } .btn-primary{ background:var(--grad); color:#fff; box-shadow: var(--shadow); } .btn-primary:hover{ filter: brightness(.96); } .btn-ghost{ background:#f1f5f9; color:#0f172a; } .btn-ghost:hover{ background:#e2e8f0; } /* Search */ .search{ flex:1 1 auto; max-width:520px; position:relative; } .search input{ width:100%; height:44px; border:1px solid var(--line); background:#fff; border-radius:14px; padding:0 44px 0 14px; outline-color: var(--primary); } .search .ico{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:8px; background:#f1f5f9; display:grid; place-items:center; color:#0f172a; } /* ===== Hero ===== */ .hero{ background: radial-gradient(1200px 600px at 80% -20%, rgba(108,92,231,.18), transparent 60%), #ffffff; border-bottom:1px solid var(--line); } .hero .wrap{ display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; padding:34px 0; } .hero h1{ font-size:34px; line-height:1.15; margin:12px 0 10px; } .hero p.lead{ color:var(--muted); font-size:16px; } .kpis{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; } .kpi{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; min-width:160px; box-shadow: var(--shadow); } .kpi b{ font-size:18px; display:block; } .hero .art{ align-self:center; justify-self:end; width:100%; max-width:420px; aspect-ratio: 1/1; border-radius:20px; background: var(--grad); position:relative; overflow:hidden; } .hero .art img{ width:100%; height:100%; object-fit:cover; mix-blend:multiply; opacity:.95; } /* ===== Section Head ===== */ .section{ padding:36px 0; } .section .head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; } .section .head h2{ font-size:20px; margin:0; } .section .head p{ color:var(--muted); margin:0; } /* ===== Category grid ===== */ .cat-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; } .cat{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; transition:.15s transform, .15s box-shadow; } .cat:hover{ transform: translateY(-2px); box-shadow: var(--shadow); } .cat .ico{ width:46px; height:46px; border-radius:12px; background:#f1f5f9; display:grid; place-items:center; margin: 0 auto 10px; font-size:20px; color: var(--primary-700); } .cat .name{ font-weight:700; font-size:14px; } /* ===== Cards (services/providers/blogs) ===== */ .cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; } .card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow: var(--shadow); transition:.15s transform; } .card:hover{ transform: translateY(-2px); } .card .thumb{ width:100%; height:150px; background:#e5e7eb; object-fit:cover; } .card .body{ padding:12px 14px; } .badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; } .badge{ background:#f1f5f9; color:#0f172a; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; } .title{ font-weight:800; font-size:15px; margin:6px 0; } .meta{ color:var(--muted); font-size:12px; display:flex; gap:10px; align-items:center; } /* Avatar real del proveedor */ .meta img[alt=""]{ vertical-align:middle; border:1px solid #e5e7eb; } /* ===== Steps band ===== */ .band{ background: var(--grad-dark); color:#eef2ff; border-radius:18px; padding:22px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; box-shadow: var(--shadow); } .step{ display:flex; gap:12px; align-items:flex-start; } .step .n{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.15); display:grid; place-items:center; font-weight:800; } /* ===== Reviews ===== */ .stars{ color:#f59e0b; font-size:14px; } .review{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: var(--shadow); } /* ===== CTA dark ===== */ .cta{ background:#0b1027; color:#e5e7eb; border-radius:18px; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .cta .actions{ display:flex; gap:10px; } /* ===== Footer (compat con footer.php) ===== */ .footer{ background:#0b1027; color:#9aa3b2; margin-top:36px; border-top: 1px solid rgba(255,255,255,.06); } .footer a{ color:#cbd5e1; } .footer__top{ padding:28px 0; display:flex; gap:24px; align-items:flex-start; justify-content:space-between; } .footer__brand .brand{ color:#e5e7eb; font-weight:800; font-size:18px; display:inline-flex; align-items:center; gap:8px; } .footer__brand p{ margin:10px 0; } .footer__brand .contact{ display:flex; gap:12px; flex-wrap:wrap; font-size:13px; } .footer__cols{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; min-width:48%; } .footer__cols .col h4{ color:#e5e7eb; margin:0 0 10px; font-size:14px; } .footer__cols .col a{ color:#cbd5e1; font-size:13px; display:block; padding:3px 0; } .footer__bottom{ border-top:1px solid rgba(255,255,255,.08); padding:12px 0; font-size:12px; display:flex; justify-content:space-between; align-items:center; } .footer .badges{ display:flex; gap:10px; align-items:center; } .footer .badges img{ height:20px; filter: grayscale(1) brightness(.9); opacity:.9; } /* Compatibilidad con viejo naming (si existiera) */ .footer .top{ padding:28px 0; } .footer .cols{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap:20px; } .footer .bottom{ border-top:1px solid rgba(255,255,255,.08); padding:12px 0; font-size:12px; display:flex; justify-content:space-between; align-items:center; } /* ===== Pills row (filters) ===== */ .pills{ display:flex; gap:10px; flex-wrap:wrap; } .pill{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:700; } .pill.active{ background:#111827; color:#fff; border-color:#111827; } /* ===== Utilities ===== */ .mt-0{ margin-top:0 } .mt-6{ margin-top:24px } .mt-8{ margin-top:32px } .mb-0{ margin-bottom:0 } .mb-2{ margin-bottom:8px } .mb-4{ margin-bottom:16px } .mb-6{ margin-bottom:24px } .pt-0{ padding-top:0 } .pb-0{ padding-bottom:0 } .center{ text-align:center } .right{ text-align:right } /* ===== Responsive ===== */ @media (max-width: 1100px){ .cards{ grid-template-columns: repeat(3, 1fr); } .cat-grid{ grid-template-columns: repeat(4, 1fr); } .band{ grid-template-columns: 1fr; } .footer__cols{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px){ .hero .wrap{ grid-template-columns: 1fr; } .search{ max-width:100%; order:3; } .nav{ flex-wrap: wrap; gap:12px; } .cards{ grid-template-columns: repeat(2, 1fr); } .cat-grid{ grid-template-columns: repeat(3, 1fr); } .footer__top{ flex-direction:column; } } @media (max-width: 560px){ .cards{ grid-template-columns: 1fr; } .cat-grid{ grid-template-columns: repeat(2, 1fr); } .kpi{ min-width: unset; flex:1; } }