*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:#f4f1ea; --card:#ffffff; --ink:#272118; --muted:#807566; --soft:#faf8f4;
      --border:#ebe4d8;
      --accent:#3c9173;
      --accent-soft:color-mix(in srgb, var(--accent) 14%, #fffdf9);
      --accent-ink:color-mix(in srgb, var(--accent) 74%, #241c12);
      --coral:#a5553e; --coral-soft:#f9eae2; --amber:#89662c; --amber-soft:#f6eedd;
      --radius:22px; --radius-sm:14px; --radius-pill:30px;
      --shadow:0 6px 22px rgba(60,40,20,.06); --shadow-lg:0 16px 38px rgba(60,40,20,.12);
      /* compat aliases (algunos estilos del JS usan estos nombres) */
      --green:var(--accent-ink); --red:var(--coral); --text:var(--ink); --text-muted:var(--muted);
      --white:#fff;
    }

    body {
      font-family: 'Hanken Grotesk', system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }

    /* HEADER */
    header {
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: blur(8px);
      padding: 0 clamp(20px,5vw,48px);
      position: sticky; top: 0; z-index: 100;
      border-bottom: 1px solid var(--border);
    }
    .header-inner {
      max-width: 1160px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 66px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px; white-space: nowrap;
      color: var(--ink); font-weight: 800; font-size: 20px; letter-spacing: -.02em;
    }
    .logo svg { width: 28px; height: 28px; color: var(--accent); }
    .btn-resena {
      background: var(--accent-ink); color: #fff;
      padding: 11px 20px; border-radius: var(--radius-pill);
      font-size: 14px; font-weight: 700;
      box-shadow: 0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent);
      transition: .15s; white-space: nowrap;
    }
    .btn-resena:hover { filter: brightness(1.05); transform: translateY(-1px); }

    /* HERO */
    .hero {
      text-align: center;
      padding: 54px clamp(20px,5vw,48px) 38px;
      background: transparent; color: var(--ink);
    }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
      background: var(--accent-soft); color: var(--accent-ink);
      font-weight: 700; font-size: 13px; padding: 7px 15px;
      border-radius: var(--radius-pill); margin-bottom: 20px;
    }
    .hero-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
    .hero h1 {
      font-size: clamp(30px, 4.4vw, 46px); font-weight: 800;
      letter-spacing: -.03em; line-height: 1.08;
      max-width: 760px; margin: 0 auto 16px; text-wrap: balance;
    }
    .hero h1 span { color: var(--accent); }
    .hero p {
      font-size: clamp(16px, 2vw, 18px); color: var(--muted);
      max-width: 560px; margin: 0 auto 26px; line-height: 1.55;
    }
    .btn-hero-resena {
      display: inline-block; background: var(--accent-ink); color: #fff;
      padding: 14px 28px; border-radius: var(--radius-pill);
      font-size: 16px; font-weight: 700;
      box-shadow: 0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent);
      transition: .15s;
    }
    .btn-hero-resena:hover { filter: brightness(1.05); transform: translateY(-1px); }
    .hero .hero-anonima { font-size: 13px; color: var(--muted); margin: 28px auto 0; text-align: center; }
    .hero-stats {
      display: flex; justify-content: center; gap: 10px;
      flex-wrap: wrap; margin-top: 26px;
    }
    .hero-stats .stat {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius-pill); padding: 8px 18px;
      font-size: 14px; color: var(--muted);
    }
    .hero-stats .stat b { color: var(--ink); font-weight: 800; }

    /* EYEBROW DE SECCION */
    .section-eyebrow {
      max-width: 1160px; margin: 0 auto; padding: 0 0 10px;
      display: flex; align-items: baseline; gap: 9px;
    }
    .section-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .section-eyebrow span { font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .eyebrow-exp .dot { background: var(--muted); }
    .eyebrow-exp span { color: var(--muted); }
    .eyebrow-emp .dot { background: var(--accent); }
    .eyebrow-emp span { color: var(--accent-ink); }

    /* BLOQUE EXPERIENCIAS DE SELECCION */
    .exp-block { max-width: 1160px; margin: 0 auto 38px; }
    .exp-inner { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
    .exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .exp-head-text h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
    .exp-head-text p { font-size: 13.5px; color: var(--muted); max-width: 520px; line-height: 1.5; }
    .exp-ver-todas {
      font-size: 13px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; flex-shrink: 0;
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill);
      padding: 9px 16px; box-shadow: var(--shadow); transition: .15s;
    }
    .exp-ver-todas:hover { border-color: color-mix(in srgb,var(--accent) 40%,var(--border)); transform: translateY(-1px); }
    .exp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .exp-card { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 9px; }
    .exp-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: var(--radius-pill); padding: 4px 10px; width: fit-content; }
    .exp-tag.bad { background: var(--coral-soft); color: var(--coral); }
    .exp-tag.neutral { background: var(--amber-soft); color: var(--amber); }
    .exp-tag.good { background: var(--accent-soft); color: var(--accent-ink); }
    .exp-quote { font-size: 13px; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
    .exp-meta { font-size: 11.5px; color: var(--muted); }
    .exp-meta a { color: var(--accent-ink); font-weight: 700; }
    .exp-meta a:hover { text-decoration: underline; }

    /* FILTROS */
    .filters {
      background: color-mix(in srgb, var(--bg) 90%, transparent);
      backdrop-filter: blur(8px);
      padding: 14px clamp(20px,5vw,48px) 0;
      position: sticky; top: 66px; z-index: 90;
    }
    .filters-inner { max-width: 1160px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
    .filters-top { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .filters-top .search-wrap { flex: 1; min-width: 220px; }
    .filters-top #buscar { box-shadow: none; }
    .filters-bottom { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
    .search-wrap { position: relative; flex: 1; min-width: 220px; }
    .search-wrap svg {
      position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
      color: var(--muted); width: 18px; height: 18px;
    }
    #buscar {
      width: 100%; padding: 12px 16px 12px 44px;
      border: 1px solid var(--border); border-radius: var(--radius-pill);
      font-size: 15px; font-family: inherit; outline: none;
      background: var(--card); color: var(--ink);
      box-shadow: var(--shadow); transition: border-color .15s;
    }
    #buscar:focus { border-color: var(--accent); }
    #filtro-rubro, #ordenar {
      padding: 11px 16px; border: 1px solid var(--border);
      border-radius: var(--radius-pill); font-size: 14px; font-family: inherit;
      background: var(--card); color: var(--ink); cursor: pointer; outline: none;
    }
    #filtro-rubro:focus, #ordenar:focus { border-color: var(--accent); }
    .filter-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
    .star-filter-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 2px; }
    .pill {
      padding: 10px 15px; border-radius: var(--radius-pill);
      border: 1px solid var(--border); background: var(--card);
      font-size: 14px; font-family: inherit; font-weight: 600;
      cursor: pointer; transition: .13s; color: var(--muted); white-space: nowrap;
    }
    .pill:hover { color: var(--ink); border-color: color-mix(in srgb,var(--accent) 40%,var(--border)); }
    .pill.active-si      { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
    .pill.active-depende { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
    .pill.active-no      { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }
    .pill.active-dt      { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
    .pill:disabled       { opacity: .4; cursor: default; pointer-events: none; }

    /* GRID */
    .main {
      max-width: 1160px; margin: 0 auto clamp(20px,5vw,48px);
      background: var(--soft); border: 1px solid var(--border); border-top: none;
      border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
      padding: 24px clamp(20px,5vw,48px) 24px;
    }
    .grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
    }

    /* CARD */
    .card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 22px;
      display: flex; flex-direction: column; gap: 14px;
      box-shadow: var(--shadow); transition: .16s; cursor: pointer;
      color: inherit; overflow: hidden;
    }
    .card:hover {
      transform: translateY(-3px); box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb,var(--accent) 40%,var(--border));
    }
    .card-header { display: flex; align-items: center; gap: 13px; }
    .card-logo {
      width: 54px; height: 54px; border-radius: var(--radius-sm);
      background: var(--soft); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
    }
    .card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
    .card-logo.logo-dark { background: #272118; }
    .card-logo-placeholder {
      width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 800; color: #fff; background: var(--accent-ink); border-radius: var(--radius-sm);
    }
    .card-info { flex: 1; min-width: 0; }
    .card-nombre {
      font-size: 18px; font-weight: 800; letter-spacing: -.01em;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .card-rubro { font-size: 13px; color: var(--muted); margin-top: 1px; }
    .card-score { text-align: right; flex-shrink: 0; }
    .rating-num { font-weight: 800; font-size: 22px; display: block; line-height: 1; }
    .stars { display: inline-flex; gap: 1px; font-size: 13px; line-height: 1; }
    .star { color: var(--amber); }

    /* Pill recomendación (dentro de card) */
    .rec-pill {
      display: flex; align-items: center; gap: 8px; white-space: nowrap;
      font-size: 13.5px; font-weight: 700;
      border-radius: var(--radius-pill); padding: 9px 14px; width: fit-content; max-width: 100%;
    }
    .rec-ico { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; color: #fff; flex-shrink: 0; }
    .rec-si      { background: var(--accent-soft); color: var(--accent-ink); }
    .rec-si      .rec-ico { background: var(--accent); }
    .rec-no      { background: var(--coral-soft); color: var(--coral); }
    .rec-no      .rec-ico { background: var(--coral); }
    .rec-depende, .rec-dividido { background: var(--amber-soft); color: var(--amber); }
    .rec-depende .rec-ico, .rec-dividido .rec-ico { background: var(--amber); }
    .rec-none { background: var(--soft); color: var(--muted); border: 1px solid var(--border); }

    /* Chips de subcategorías */
    .subcats { display: flex; flex-wrap: wrap; gap: 6px; }
    .subcat {
      display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
      font-size: 12px; color: var(--muted);
      background: var(--soft); border: 1px solid var(--border);
      border-radius: var(--radius-pill); padding: 5px 11px;
    }
    .subcat b { font-weight: 700; }
    .subcat i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; display: inline-block; }
    .subcat.tone-good i { background: var(--accent); }
    .subcat.tone-bad i { background: var(--coral); }
    .subcat.tone-neutral i { background: var(--amber); }
    .card-footer {
      margin-top: auto; font-size: 14px; font-weight: 700; color: var(--accent);
      display: flex; align-items: center; gap: 6px;
    }

    /* EMPTY */
    .empty { text-align: center; padding: 64px 24px; color: var(--muted); grid-column: 1/-1; }
    .empty p { font-size: 16px; margin-top: 8px; }
    .btn-limpiar {
      margin-top: 16px; display: inline-block; padding: 11px 22px;
      border: 1px solid var(--border); border-radius: var(--radius-pill);
      font-size: 14px; font-family: inherit; background: var(--card);
      color: var(--accent-ink); font-weight: 700; cursor: pointer;
    }
    .btn-limpiar:hover { background: var(--soft); }

    /* CARGAR MÁS */
    .load-more-wrap { text-align: center; padding: 32px 0 8px; }
    .btn-cargar-mas {
      padding: 13px 30px; border: 1px solid var(--border); border-radius: var(--radius-pill);
      font-size: 14px; font-family: inherit; background: var(--card);
      color: var(--ink); font-weight: 700; cursor: pointer; box-shadow: var(--shadow); transition: .15s;
    }
    .btn-cargar-mas:hover { border-color: var(--accent); color: var(--accent-ink); }
    .load-more-count { font-size: 13px; color: var(--muted); margin-top: 10px; }

    /* FOOTER */
    footer {
      text-align: center; padding: 36px 24px; font-size: 13px;
      color: var(--muted); margin-top: 48px; border-top: 1px solid var(--border);
    }
    footer a { color: var(--accent-ink); font-weight: 600; }
    footer a:hover { text-decoration: underline; }

    /* Botón flotante */
    .btn-flotante {
      position: fixed; bottom: 28px; right: 28px;
      background: var(--accent-ink); color: #fff;
      padding: 13px 22px; border-radius: var(--radius-pill);
      font-size: 14px; font-weight: 700;
      box-shadow: 0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent);
      transition: all .2s; opacity: 0; pointer-events: none; z-index: 200;
    }
    .btn-flotante.visible { opacity: 1; pointer-events: auto; }
    .btn-flotante:hover { filter: brightness(1.05); transform: translateY(-2px); }

    /* Chips DT en card home */
    .subcat-dt-warning {
      display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
      background: var(--coral-soft); border: 1px solid color-mix(in srgb, var(--coral) 28%, var(--border));
      color: var(--coral); border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap;
      font-weight: 700;
    }
    .subcat-dt-neutral {
      display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
      background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 28%, var(--border));
      color: var(--amber); border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap;
      font-weight: 700;
    }

    @media (max-width: 700px) {
      .hero { padding: 40px 16px 30px; }
      .hero-tag { white-space: nowrap; }
      .filters { position: static; }
      .filters-top { flex-direction: column; align-items: stretch; }
      .filters-top .search-wrap { min-width: 0; }
      .filters-top select { width: 100%; }
      .filters-bottom { justify-content: flex-start; }
      .rec-pill { white-space: nowrap; }
      .grid { grid-template-columns: 1fr; }
      .btn-flotante { display: none; }
      .exp-cards { grid-template-columns: 1fr; }
      .exp-inner { padding: 20px; }
    }