/* ══════════════════════════════════════════════════════════════════ PROVEEDORES.CSS — HeladoPro directorio B2B Extraído de proveedores.html (Ronda 11, 30 Mar 2026) Carga después de design-tokens.css. Usa tokens del sistema donde es posible; overrides locales solo donde el contexto B2B lo requiere. DARK MODE: por defecto (dark). Light mode via [data-theme="light"]. Toggle: botón en header con id="themeToggleBtn". ══════════════════════════════════════════════════════════════════ */ /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── ACCESSIBILITY ── */ .skip-to-main { position: absolute; top: -40px; left: 0; background: var(--color-accent, #0D9488); color: var(--color-white); padding: 8px 16px; text-decoration: none; z-index: 9999; border-radius: 0 0 4px 0; font-size: 14px; font-weight: 600; } .skip-to-main:focus { top: 0; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--prov-teal-light); outline-offset: 2px; } .chip:focus-visible { outline: 2px solid var(--prov-teal-light); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════ TOKENS LOCALES — DARK MODE (por defecto) ══════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { --prov-bg: var(--color-bg-deep, #0a0f0f); --prov-surface: var(--color-bg-card, #111918); --prov-surface2: var(--color-bg-card-hover, #162120); --prov-border: var(--color-border, rgba(255,255,255,.08)); --prov-border2: var(--color-border-md, rgba(255,255,255,.12)); --prov-text: var(--color-text-on-dark-green, #F0FDF4); --prov-text2: var(--color-text-on-dark-mid, rgba(255,255,255,.62)); --prov-text3: var(--color-text-on-dark-low, rgba(255,255,255,.35)); --prov-teal: var(--color-accent, #0d9488); --prov-teal-dk: var(--color-accent-darker, #0B6158); --prov-teal-light: var(--color-accent-light, #5EEAD4); --prov-teal-glow: var(--color-accent-a20, rgba(13,148,136,.2)); --prov-gold: var(--color-gold, #f59e0b); --prov-gold-highlight: var(--color-gold-highlight, #fcd34d); --prov-red: var(--color-error-mid, #ef4444); --prov-radius: var(--radius-lg, 16px); --prov-radius-sm: 10px; /* Dark header overlay */ --prov-hdr-bg: rgba(10,15,15,.95); /* Gradient hero — dark: navy profundo + tinte verde */ --prov-hero-bg: linear-gradient(160deg, var(--color-primary-dark, #071422) 0%, var(--color-bg-deep, #0a0f0f) 50%, var(--color-primary-dark, #071422) 100%); /* Premium card — dark: surface elevada */ --prov-prem-card-bg: linear-gradient(145deg, var(--color-bg-deep2, #111918) 0%, var(--color-bg-card-hover, #162120) 100%); /* Toggle button hint */ --prov-toggle-icon: "☀️"; --prov-toggle-label: "Modo claro"; /* ── Alias shorthands — usados en inline styles del claim modal ── */ --surface: var(--prov-surface); --surface2: var(--prov-surface2); --border2: var(--prov-border2); --text2: var(--prov-text2); --text3: var(--prov-text3); --teal-light: var(--prov-teal-light); } /* ══════════════════════════════════════════════════════════════════ TOKENS LOCALES — LIGHT MODE Activado con: ══════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --prov-bg: var(--color-bg-cream, #FEFCF8); --prov-surface: var(--color-white, #FFFFFF); --prov-surface2: var(--color-bg-smoke, #F5F2ED); --prov-border: rgba(0,0,0,.08); --prov-border2: var(--color-border-light, #E5DED3); --prov-text: var(--color-primary, #0B1F38); --prov-text2: var(--color-text-2, #4B5563); --prov-text3: var(--color-text-3, #6B7280); --prov-teal: var(--color-accent, #0d9488); --prov-teal-dk: var(--color-accent-darker, #0B6158); --prov-teal-light: var(--color-accent-dark, #0D7C72); /* texto teal sobre blanco */ --prov-teal-glow: var(--color-accent-a10, rgba(13,148,136,.10)); --prov-gold: var(--color-gold, #f59e0b); --prov-gold-highlight: var(--color-gold-text, #B45309); /* texto dorado sobre blanco */ --prov-red: var(--color-error, #DC2626); --prov-radius: var(--radius-lg, 16px); --prov-radius-sm: 10px; /* Light header */ --prov-hdr-bg: rgba(254,252,248,.96); /* Light hero gradient */ --prov-hero-bg: linear-gradient(160deg, var(--color-primary, #0B1F38) 0%, var(--color-primary-mid, #162D4A) 50%, var(--color-primary, #0B1F38) 100%); /* Premium card light — cream cálido dorado */ --prov-prem-card-bg: linear-gradient(145deg, var(--color-gold-pale, #FFFBEB) 0%, var(--color-gold-warm-end, #FFF8E1) 100%); --prov-toggle-icon: "🌙"; --prov-toggle-label: "Modo oscuro"; /* ── Alias shorthands — light mode overrides para claim modal ── */ --surface: var(--prov-surface); --surface2: var(--prov-surface2); --border2: var(--prov-border2); --text2: var(--prov-text2); --text3: var(--prov-text3); --teal-light: var(--prov-teal-light); } /* ══════════════════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body, 'DM Sans', sans-serif); background: var(--prov-bg); color: var(--prov-text); min-height: 100vh; font-size: 15px; line-height: var(--lh-relaxed, 1.55); transition: background var(--pf-dur-release, 200ms) ease, color var(--pf-dur-release, 200ms) ease; } /* ══════════════════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════════════════ */ .hdr { position: sticky; top: 0; z-index: 200; background: var(--prov-hdr-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--prov-border); padding: 0 24px; height: var(--hdr-h, 58px); display: flex; align-items: center; gap: 0; transition: background var(--pf-dur-release, 200ms) ease, border-color var(--pf-dur-release, 200ms) ease; } .hdr-logo { font-size: 17px; font-weight: 700; color: var(--prov-text); text-decoration: none; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .hdr-logo img { height:32px; width:32px; border-radius:8px; object-fit:contain; } .hdr-logo-dot { color: var(--prov-teal); } .hdr-nav { display: flex; gap: 2px; flex: 1; padding: 0 16px; } .hdr-nav a { padding: 6px 12px; border-radius: 16px; color: var(--prov-text3); text-decoration: none; font-size: 14px; font-weight: 500; transition: var(--transition-fast, all .15s); white-space: nowrap; } .hdr-nav a:hover { color: var(--prov-text); background: rgba(128,128,128,.08); } .hdr-nav a.active { color: var(--prov-teal-light); background: var(--prov-teal-glow); font-weight: 600; } .hdr-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; } .hdr-btn { padding: 7px 16px; border-radius: var(--radius-sm, 10px); font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: var(--transition-fast, all .15s); } .hdr-btn-outline { background: transparent; border: 1px solid var(--prov-border2); color: var(--prov-text2); } .hdr-btn-outline:hover { border-color: var(--prov-teal); color: var(--prov-teal-light); } .hdr-btn-primary { background: var(--prov-teal); color: var(--color-white,#fff); } .hdr-btn-primary:hover { background: var(--prov-teal-dk); } /* ── Theme toggle button ── */ .theme-toggle-btn { width: 34px; height: 34px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--prov-border2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition-fast, all .15s); flex-shrink: 0; } .theme-toggle-btn:hover { background: rgba(128,128,128,.1); border-color: var(--prov-teal); } /* ══════════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════════ */ .hero { background: var(--prov-hero-bg); padding: 64px 24px 52px; text-align: center; border-bottom: 1px solid var(--prov-border); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 20% 30%, var(--color-accent-a18, rgba(13,148,136,.14)) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 70%, var(--color-accent-a10, rgba(13,148,136,.07)) 0%, transparent 70%); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; background: var(--color-accent-a18, rgba(13,148,136,.15)); border: 1px solid var(--color-accent-a30, rgba(13,148,136,.3)); color: var(--prov-teal-light); font-size: 12px; font-weight: 600; margin-bottom: 20px; letter-spacing: .5px; } .hero h1 { font-family: var(--font-display, 'Playfair Display', serif); font-size: clamp(28px, 5vw, 46px); color: var(--color-white); line-height: 1.2; margin-bottom: 14px; } .hero h1 span { color: var(--prov-teal-light); } .hero p { color: var(--color-text-on-dark-mid, rgba(255,255,255,.62)); font-size: 16px; max-width: 580px; margin: 0 auto 32px; } .hero-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat-num { font-size: 28px; font-weight: 700; color: var(--prov-teal-light); display: block; } .hero-stat-lbl { font-size: 12px; color: var(--color-text-on-dark-low, rgba(255,255,255,.35)); font-weight: 500; } /* ══════════════════════════════════════════════════════════════════ BOTONES — Sistema unificado ══════════════════════════════════════════════════════════════════ */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: var(--prov-teal); color: var(--color-white,#fff); border: none; border-radius: var(--radius-sm, 10px); font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background var(--pf-dur-release, 200ms) ease, transform var(--pf-dur-press, 65ms) ease; white-space: nowrap; } .btn-primary:hover { background: var(--prov-teal-dk); transform: translateY(-1px); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--radius-sm, 10px); font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: var(--transition-fast, all .15s); backdrop-filter: blur(6px); white-space: nowrap; } .btn-ghost:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.38); } .btn-sm { padding: 7px 15px; font-size: 13px; border-radius: 9px; } .btn-teal-outline { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 9px; border: 1px solid var(--prov-teal); color: var(--prov-teal-light); background: var(--color-accent-a10, rgba(13,148,136,.08)); text-decoration: none; font-size: 12px; font-weight: 600; transition: var(--transition-fast, all .15s); white-space: nowrap; } .btn-teal-outline:hover { background: var(--color-accent-a20, rgba(13,148,136,.16)); } /* ══════════════════════════════════════════════════════════════════ SEARCH + FILTERS ══════════════════════════════════════════════════════════════════ */ .controls { background: var(--prov-surface); border-bottom: 1px solid var(--prov-border); padding: 16px 24px; position: sticky; top: 60px; z-index: 90; transition: background var(--pf-dur-release, 200ms) ease; } .search-bar { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; } .search-input { flex: 1; padding: 10px 16px; background: var(--prov-surface2); border: 1px solid var(--prov-border2); border-radius: var(--prov-radius-sm); color: var(--prov-text); font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 14px; outline: none; transition: border-color var(--pf-dur-release, 200ms) ease; } .search-input:focus { border-color: var(--prov-teal); } .search-input::placeholder { color: var(--prov-text3); } .filter-select { padding: 10px 14px; border-radius: var(--prov-radius-sm); background: var(--prov-surface2); border: 1px solid var(--prov-border2); color: var(--prov-text); font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 13px; cursor: pointer; outline: none; appearance: none; min-width: 160px; } .filter-select:hover { border-color: var(--prov-teal-dk); background: var(--prov-surface); } .filter-select:focus { border-color: var(--prov-teal); } .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .chip-lbl { font-size: 11px; color: var(--prov-text3); font-weight: 600; margin-right: 4px; } .chip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--prov-border2); background: transparent; color: var(--prov-text2); font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--transition-fast, all .15s); white-space: nowrap; font-family: var(--font-body, 'DM Sans', sans-serif); } .chip:hover { border-color: var(--prov-teal); color: var(--prov-teal-light); } .chip.active { background: var(--prov-teal-glow); border-color: var(--prov-teal); color: var(--prov-teal-light); } /* ══════════════════════════════════════════════════════════════════ LAYOUT PRINCIPAL ══════════════════════════════════════════════════════════════════ */ .main { max-width: var(--max-w, 1280px); margin: 0 auto; padding: 32px 24px 64px; } .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; } .results-count { font-size: 14px; color: var(--prov-text2); } .results-count strong { color: var(--prov-text); } .view-toggle { display: flex; gap: 4px; } .view-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--prov-border2); background: transparent; color: var(--prov-text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition-fast, all .15s); } .view-btn:hover { border-color: var(--prov-teal-dk); color: var(--prov-text); background: var(--prov-teal-glow); } .view-btn.active { background: var(--prov-teal-glow); border-color: var(--prov-teal); color: var(--prov-teal-light); } /* ══════════════════════════════════════════════════════════════════ PROVIDER CARDS — GRID ══════════════════════════════════════════════════════════════════ */ .providers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .providers-grid.list-view { grid-template-columns: 1fr; } .provider-card { background: var(--prov-surface); border: 1px solid var(--prov-border); border-radius: var(--prov-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: var(--transition, all .2s cubic-bezier(.4,0,.2,1)); position: relative; text-decoration: none; color: inherit; } .provider-card:hover { border-color: var(--prov-border2); transform: translateY(-2px); box-shadow: var(--sh-dark-lg, 0 8px 32px rgba(0,0,0,.35)); } .provider-card.premium { border-color: var(--color-gold-b25, rgba(245,158,11,.25)); } .provider-card.premium:hover { border-color: rgba(245,158,11,.45); } .card-top { display: flex; gap: 14px; align-items: flex-start; } .card-logo { width: 52px; height: 52px; border-radius: 10px; background: var(--prov-surface2); border: 1px solid var(--prov-border); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; } .card-logo img { width: 100%; height: 100%; object-fit: cover; } .card-info { flex: 1; min-width: 0; } .card-name { font-size: 15px; font-weight: 700; color: var(--prov-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-location { font-size: 12px; color: var(--prov-text3); margin-top: 3px; } .card-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; } .badge-cat { background: var(--color-accent-a10, rgba(13,148,136,.12)); border: 1px solid var(--color-accent-a20, rgba(13,148,136,.25)); color: var(--prov-teal-light); } .badge-actor { background: var(--color-premium-a15, rgba(99,102,241,.12)); border: 1px solid var(--color-premium-a20, rgba(99,102,241,.25)); color: var(--color-premium-text, #a5b4fc); } .badge-verified { background: var(--color-gold-b12, rgba(245,158,11,.12)); border: 1px solid var(--color-gold-b25, rgba(245,158,11,.25)); color: var(--prov-gold-highlight); } .badge-premium { background: var(--color-gold-b08, rgba(245,158,11,.1)); border: 1px solid var(--color-gold-b25, rgba(245,158,11,.25)); color: var(--prov-gold-highlight); } .badge-unclaimed { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: var(--color-error-light, #fca5a5); } .card-desc { font-size: 13px; color: var(--prov-text2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--prov-border); gap: 8px; } .card-contact { display: flex; gap: 6px; } .contact-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--prov-surface2); border: 1px solid var(--prov-border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--prov-text2); text-decoration: none; transition: var(--transition-fast, all .15s); cursor: pointer; } .contact-icon:hover { border-color: var(--prov-teal); color: var(--prov-teal-light); } .card-cta { padding: 7px 14px; border-radius: 10px; background: var(--prov-teal); color: var(--color-white,#fff); font-size: 12px; font-weight: 700; text-decoration: none; transition: var(--transition-fast, all .15s); white-space: nowrap; } .card-cta:hover { background: var(--prov-teal-dk); } /* ══════════════════════════════════════════════════════════════════ CARD CLAIM BANNER ══════════════════════════════════════════════════════════════════ */ .card-claim { padding: 8px 12px; border-radius: 10px; background: rgba(239,68,68,.06); border: 1px dashed rgba(239,68,68,.25); font-size: 11px; color: var(--color-error-light, #fca5a5); display: flex; align-items: center; gap: 6px; } .card-claim a { color: var(--color-error-light, #fca5a5); font-weight: 600; text-decoration: underline; cursor: pointer; } /* ══════════════════════════════════════════════════════════════════ INVITE BANNER (heladeros autenticados) ══════════════════════════════════════════════════════════════════ */ .invite-banner { display: none; padding: 14px 20px; border-radius: var(--prov-radius); background: var(--color-accent-a10, rgba(13,148,136,.08)); border: 1px solid var(--color-accent-a20, rgba(13,148,136,.2)); margin-bottom: 24px; align-items: center; gap: 16px; flex-wrap: wrap; } .invite-banner.visible { display: flex; } .invite-banner p { font-size: 13px; color: var(--prov-text2); flex: 1; } .invite-banner p strong { color: var(--prov-teal-light); } .invite-btn { padding: 8px 18px; border-radius: 10px; background: var(--prov-teal); color: var(--color-white,#fff); font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: var(--transition-fast, all .15s); white-space: nowrap; } .invite-btn:hover { background: var(--prov-teal-dk); transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════════ EMPTY STATE ══════════════════════════════════════════════════════════════════ */ .empty { grid-column: 1/-1; text-align: center; padding: 64px 24px; } .empty-icon { font-size: 48px; margin-bottom: 16px; display: block; } .empty h3 { font-size: 18px; color: var(--prov-text); margin-bottom: 8px; } .empty p { color: var(--prov-text2); font-size: 14px; } /* ══════════════════════════════════════════════════════════════════ PAGINATION ══════════════════════════════════════════════════════════════════ */ .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; } .page-btn { padding: 8px 14px; border-radius: 10px; background: var(--prov-surface2); border: 1px solid var(--prov-border); color: var(--prov-text2); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition-fast, all .15s); } .page-btn:hover { border-color: var(--prov-teal); color: var(--prov-teal-light); } .page-btn.active { background: var(--prov-teal-glow); border-color: var(--prov-teal); color: var(--prov-teal-light); } .page-btn:disabled { opacity: .35; cursor: default; } /* ══════════════════════════════════════════════════════════════════ PREMIUM SHOWCASE ══════════════════════════════════════════════════════════════════ */ .premium-section { margin-bottom: 40px; } .premium-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .premium-section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--prov-text); } .premium-section-title span { background: linear-gradient(135deg, var(--color-gold-b20, rgba(245,158,11,.2)), var(--color-gold-b08, rgba(245,158,11,.08))); border: 1px solid var(--color-gold-b30, rgba(245,158,11,.3)); color: var(--prov-gold-highlight); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .04em; } .premium-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .premium-card { background: var(--prov-prem-card-bg); border: 1px solid var(--color-gold-b20, rgba(245,158,11,.2)); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: var(--transition, all .2s); position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .premium-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-gold, #f59e0b), var(--prov-gold-highlight), var(--color-gold, #f59e0b)); } .premium-card:hover { border-color: rgba(245,158,11,.45); transform: translateY(-3px); box-shadow: var(--sh-dark-xl, 0 12px 40px rgba(0,0,0,.4)), 0 0 0 1px var(--color-gold-b08, rgba(245,158,11,.1)); } .prem-card-top { display: flex; gap: 14px; align-items: center; } .prem-logo { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; background: var(--prov-surface2); border: 1px solid rgba(245,158,11,.15); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; } .prem-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; } .prem-info { flex: 1; min-width: 0; } .prem-name { font-size: 15px; font-weight: 700; color: var(--prov-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prem-loc { font-size: 11px; color: var(--prov-text3); margin-top: 3px; } .prem-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .prem-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 3px; } .prem-badge-cat { background: var(--color-accent-a10, rgba(13,148,136,.12)); border: 1px solid var(--color-accent-a20, rgba(13,148,136,.25)); color: var(--prov-teal-light); } .prem-badge-gold { background: var(--color-gold-b12, rgba(245,158,11,.12)); border: 1px solid var(--color-gold-b25, rgba(245,158,11,.25)); color: var(--prov-gold-highlight); } .prem-badge-verif { background: var(--color-emerald-a10, rgba(16,185,129,.10)); border: 1px solid var(--color-emerald-a25, rgba(16,185,129,.25)); color: var(--color-emerald-text, #6EE7B7); } .prem-desc { font-size: 12px; color: var(--prov-text2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prem-services { display: flex; flex-wrap: wrap; gap: 5px; } .prem-service { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--color-accent-a10, rgba(13,148,136,.08)); border: 1px solid var(--color-teal-muted-a18, rgba(13,148,136,.15)); color: var(--prov-teal-light); } .prem-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--color-gold-b08, rgba(245,158,11,.1)); } .prem-contact { display: flex; gap: 5px; } .prem-contact-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--prov-surface2); border: 1px solid var(--prov-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--prov-text3); text-decoration: none; transition: var(--transition-fast, all .15s); } .prem-contact-icon:hover { border-color: var(--prov-teal); color: var(--prov-teal-light); } .prem-cta { padding: 7px 16px; border-radius: 10px; background: linear-gradient(135deg, var(--color-gold, #f59e0b), var(--color-bronze, #d97706)); color: var(--color-primary-dark, #071422); font-size: 12px; font-weight: 700; text-decoration: none; transition: var(--transition-fast, all .15s); white-space: nowrap; } .prem-cta:hover { background: linear-gradient(135deg, var(--color-gold-highlight, #fbbf24), var(--color-gold, #f59e0b)); transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════════ JOIN CTA ══════════════════════════════════════════════════════════════════ */ .join-section { margin-top: 64px; padding: 48px 24px; background: var(--prov-surface); border: 1px solid var(--prov-border); border-radius: 20px; text-align: center; } .join-section h2 { font-family: var(--font-display, 'Playfair Display', serif); font-size: 28px; margin-bottom: 12px; } .join-section h2 span { color: var(--prov-teal-light); } .join-section p { color: var(--prov-text2); font-size: 15px; max-width: 520px; margin: 0 auto 28px; } .join-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .join-btn-primary { padding: 12px 28px; border-radius: 10px; background: var(--prov-teal); color: var(--color-white,#fff); font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: var(--transition-fast, all .15s); text-decoration: none; display: inline-block; } .join-btn-primary:hover { background: var(--prov-teal-dk); transform: translateY(-1px); } .join-btn-secondary { padding: 12px 28px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: 15px; font-weight: 600; cursor: pointer; transition: var(--transition-fast, all .15s); text-decoration: none; display: inline-block; } .join-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.38); } /* ══════════════════════════════════════════════════════════════════ SKELETON LOADING ══════════════════════════════════════════════════════════════════ */ .skeleton { background: linear-gradient(90deg, var(--prov-surface) 25%, var(--prov-surface2) 50%, var(--prov-surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card { height: 200px; border-radius: var(--prov-radius); background: var(--prov-surface); border: 1px solid var(--prov-border); overflow: hidden; padding: 22px; } .loading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hdr-nav { display: none; } .hero { padding: 44px 16px 36px; } .controls { padding: 12px 16px; } .search-bar { flex-wrap: wrap; } .filter-select { min-width: 0; flex: 1; } .main { padding: 20px 16px 48px; } .providers-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hdr { padding: 0 16px; height: 54px; } .hdr-logo { font-size: 15px; } .hdr-logo img { height: 28px; width: 28px; } .hdr-actions { gap: 6px; } .hdr-btn { padding: 6px 12px; font-size: 12px; } .hero { padding: 36px 16px 28px; } .hero h1 { font-size: clamp(22px, 4vw, 28px); margin-bottom: 12px; } .hero p { font-size: 14px; margin-bottom: 24px; } .hero-stats { gap: 20px; } .hero-stat-num { font-size: 24px; } .hero-stat-lbl { font-size: 11px; } .controls { padding: 10px 16px; } .search-bar { gap: 8px; margin-bottom: 10px; } .search-input { padding: 9px 12px; font-size: 13px; } .filter-select { padding: 9px 12px; font-size: 12px; min-width: 130px; } .main { padding: 16px 16px 40px; } .results-header { margin-bottom: 18px; } .results-count { font-size: 13px; } .providers-grid { gap: 14px; } .provider-card { padding: 16px; gap: 12px; } .card-top { gap: 12px; } .card-logo { width: 44px; height: 44px; font-size: 18px; } .card-name { font-size: 14px; } .card-location { font-size: 11px; } .badge { padding: 1px 6px; font-size: 10px; } .card-desc { font-size: 12px; line-height: 1.4; } .card-cta { font-size: 13px; padding: 8px 12px; } .join-section h2 { font-size: 20px; } .join-section p { font-size: 13px; } .join-btns { flex-direction: column; } .join-btn-primary, .join-btn-secondary { width: 100%; } .premium-section-title { font-size: 18px; } .prem-logo { width: 48px; height: 48px; font-size: 20px; } .prem-name { font-size: 14px; } .chip { padding: 4px 10px; font-size: 11px; min-height: 28px; } .theme-toggle-btn { width: 30px; height: 30px; font-size: 14px; } /* Stats bar: reducir padding y min-width para evitar wrap en 375px */ .prov-stats-bar { padding: 16px; } .prov-stat-item { min-width: 90px; padding: 8px 12px; } .prov-stat-n { font-size: 1.5rem; } .prov-stat-l { font-size: 11px; } /* Pro-hero: reducir padding vertical en mobile, evitar sección excesivamente alta en 375px */ .pro-hero { padding: 60px 20px 48px; min-height: auto; } .pro-hero-sub { font-size: 0.95rem; margin-bottom: 24px; } .pro-hero-badge { margin-bottom: 16px; } .pro-hero-trust { gap: 12px; margin-top: 20px; } .pro-hero-trust-item { font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════ SECCIÓN EXTRAÍDA DE INLINE (antes en