/* Fondo animado */
    body::before {
      content:''; position:fixed; inset:0; z-index:0;
      background: radial-gradient(ellipse 60% 50% at 20% 10%, rgba(110,9,26,0.12) 0%, transparent 70%),
                  radial-gradient(ellipse 50% 60% at 80% 80%, rgba(107,22,9,0.07) 0%, transparent 70%);
      pointer-events:none;
    }

    /* HEADER — .header-actions/.nav-links/.nav-link/.nav-toggle/.btn-back centralizados
       en base.css (idénticos en todas las páginas públicas). */

    /* AD SLOT — ad-index-top (marcador de posición, sin backend)
       Reserva de espacio para un slot de Google Ad Manager (GPT). No fijamos
       height ni aspect-ratio en el contenedor real del anuncio: el tamaño final
       lo decide GPT según los tamaños candidatos configurados en el slot,
       nosotros solo reservamos el ancho (width:100%; max-width:<candidato más
       ancho de ese nivel>). El min-height de abajo es solo orientativo para que
       el placeholder se vea como una caja durante esta fase de maqueta — SE
       RETIRA al conectar las etiquetas reales de GPT.
       Breakpoints Bootstrap: <768px móvil, 768–1399px tablet/escritorio pequeño,
       ≥1400px escritorio. Tamaños candidatos por nivel:
         Móvil:    320×100 o 320×50
         Tablet:   728×90  o 468×60
         Escritorio: 970×90 o 728×90 */
    /* GAM (GPT) desactivado temporalmente a favor de Auto ads de AdSense — ver
       project-overview.md, sección "Publicidad"
    .ad-slot-wrap { position:relative; z-index:1; display:flex; justify-content:center; padding:1.25rem 2rem 0; }
    .ad-slot {
      width:100%;
      background:#ffd400; border:2px dashed #111; border-radius:6px;
      display:flex; align-items:center; justify-content:center; text-align:center; padding:0.75rem 1rem;
    }
    .ad-slot--index-top { max-width:320px; min-height:100px; }
    .ad-slot__label {
      display:none;
      font-family:'Space Mono',monospace; font-weight:700; letter-spacing:0.04em;
      font-size:0.85rem; color:#111;
    }
    .ad-slot__label--mobile { display:block; }

    @media(min-width:768px) {
      .ad-slot--index-top { max-width:728px; min-height:90px; }
      .ad-slot__label { font-size:clamp(0.65rem, 2vw, 0.9rem); }
      .ad-slot__label--mobile { display:none; }
      .ad-slot__label--tablet { display:block; }
    }

    @media(min-width:1400px) {
      .ad-slot--index-top { max-width:970px; min-height:90px; }
      .ad-slot__label--tablet { display:none; }
      .ad-slot__label--desktop { display:block; }
    }
    */

    /* HERO */
    .hero { position:relative; z-index:1; text-align:center; padding: 5rem 2rem 3rem; }
    .hero-tag { display:inline-block; font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.15em; padding:5px 14px; border:1px solid var(--accent); border-radius:50px; color:var(--accent); margin-bottom:1.5rem; }
    .hero h1 { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; line-height:1.05; letter-spacing:-0.03em; margin-bottom:1rem; }
    .hero h1 em { font-style:normal; background: linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .hero-sub { font-size:1rem; color:var(--text-dim); max-width:480px; margin:0 auto 2.5rem; line-height:1.6; }
    .stats-row { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; }

    @keyframes heroFadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
    .hero-tag { animation: heroFadeUp 0.6s ease-out both; }
    .hero h1 { animation: heroFadeUp 0.7s ease-out 0.2s both; }
    .hero-sub { animation: heroFadeUp 0.7s ease-out 0.5s both; }
    .stats-row { animation: heroFadeUp 0.7s ease-out 0.8s both; }
    .stat { text-align:center; }
    .stat-n { font-family:'Space Mono',monospace; font-size:1.8rem; font-weight:700; color:var(--accent2); }
    .stat-l { font-size:0.75rem; color:var(--text-dim); letter-spacing:0.08em; margin-top:2px; }

    /* FILTROS */
    .filters-wrap { position:relative; z-index:1; padding: 1.5rem 2rem; max-width:1300px; margin:0 auto; }
    .search-bar { position:relative; margin-bottom:1.2rem; }
    .search-bar input { width:100%; padding:14px 20px 14px 48px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:'Syne',sans-serif; font-size:0.95rem; outline:none; transition:border-color 0.2s; }
    .search-bar input:focus { border-color:var(--accent); box-shadow:var(--glow); }
    .search-bar input::placeholder { color:var(--text-dim); }
    .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:0.4; font-size:18px; }
    .filter-chips { display:flex; gap:8px; flex-wrap:wrap; }
    .chip { font-family:'Space Mono',monospace; font-size:0.7rem; padding:6px 14px; border-radius:50px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all 0.2s; white-space:nowrap; }
    .chip:hover, .chip.active { border-color:var(--accent); color:var(--accent); background:rgba(110,9,26,0.1); }
    .chip.active { font-weight:700; }

    /* GRID EMPRESAS */
    .grid-wrap { position:relative; z-index:1; padding: 0.5rem 2rem 4rem; max-width:1300px; margin:0 auto; }
    .results-info { font-family:'Space Mono',monospace; font-size:0.72rem; color:var(--text-dim); margin-bottom:0.5rem; }
    .section-title { font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; margin-bottom:1.625rem; color:var(--accent); }
    .companies-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }

    @keyframes cardCascadeIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

    .company-card {
      background: var(--surface); border:1px solid var(--border); border-radius:var(--radius);
      padding:20px; cursor:pointer; transition:border-color 0.25s, box-shadow 0.25s, transform 0.25s; position:relative; overflow:hidden;
      text-decoration:none; color:inherit;
      animation: cardCascadeIn 0.9s ease both;
      display:flex; flex-direction:column; height:100%;
    }
    .company-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(110,9,26,0.05),transparent); opacity:0; transition:opacity 0.25s; }
    .company-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow); }
    .company-card:hover::before { opacity:1; }

    .card-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
    .company-logo { width:44px; height:44px; border-radius:10px; overflow:hidden; background:var(--surface2); border:1px solid var(--border); flex-shrink:0; display:grid; place-items:center; font-size:1.2rem; }
    .company-logo img { width:100%; height:100%; object-fit:contain; padding:4px; }
    .card-meta { flex:1; min-width:0; }
    .company-name { font-weight:700; font-size:0.95rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .company-website { font-family:'Space Mono',monospace; font-size:0.65rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .company-desc { font-size:0.82rem; color:var(--text-dim); line-height:1.55; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .card-footer { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
    .badge { font-family:'Space Mono',monospace; font-size:0.62rem; padding:3px 9px; border-radius:50px; letter-spacing:0.05em; }
    .badge-cat { background:rgba(110,9,26,0.15); color:var(--accent); border:1px solid rgba(110,9,26,0.3); }
    .badge-country { background:rgba(107,22,9,0.08); color:var(--accent2); border:1px solid rgba(107,22,9,0.2); }

    /* AD — TARJETA PATROCINADA / SLOT ad-slot--sponsored-result (marcador de posición, sin backend)
       Slot de tipo Fluid: a diferencia de ad-slot--index-top (Etapa 1), no tiene
       tamaños candidatos fijos por breakpoint — ocupa el 100% del ancho de su
       columna en el grid y su alto se ajusta al contenido, sin min-height
       orientativo ni restricción de tamaño. Pensado para que Google Ad Manager
       inyecte contenido estructurado (imagen, título, texto, enlace) dentro del
       propio layout de la tarjeta, no una creatividad de imagen ya terminada. */
    .sponsored-card { border:2px dashed #111; background:repeating-linear-gradient(135deg, rgba(255,212,0,0.18), rgba(255,212,0,0.18) 10px, var(--surface) 10px, var(--surface) 20px); cursor:default; }
    .sponsored-card:hover { border-color:#111; transform:none; box-shadow:none; }
    .sponsored-card:hover::before { opacity:0; }
    .sponsored-badge { position:absolute; top:12px; right:12px; background:#ffd400; color:#111; font-family:'Space Mono',monospace; font-size:0.6rem; font-weight:700; padding:3px 10px; border-radius:50px; letter-spacing:0.06em; }
    .badge-ad { background:#ffd400; color:#111; border:1px solid #111; }

    /* EMPTY / LOADING */
    .empty-state { text-align:center; padding:5rem 2rem; color:var(--text-dim); }
    .empty-state .icon { font-size:3rem; margin-bottom:1rem; }
    .loading-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
    .skeleton { height:180px; background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%); background-size:200% 100%; border-radius:var(--radius); border:1px solid var(--border); animation:shimmer 1.5s infinite; }
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* PAGINACIÓN */
    .pagination { display:flex; justify-content:center; gap:8px; margin-top:2.5rem; }
    .page-btn { font-family:'Space Mono',monospace; font-size:0.75rem; width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all 0.2s; }
    .page-btn:hover, .page-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(110,9,26,0.1); }
    .page-btn:disabled { opacity:0.3; cursor:default; }

    /* PENDING BANNER */
    .pending-banner { position:relative; z-index:1; max-width:1300px; margin:0 auto 0; padding:0 2rem; }
    .pending-notice { background:rgba(108,9,42,0.08); border:1px solid rgba(108,9,42,0.3); border-radius:var(--radius); padding:12px 18px; display:flex; align-items:center; gap:12px; font-size:0.83rem; }
    .pending-notice a { color:var(--accent3); text-decoration:none; font-weight:700; }
    .pending-notice a:hover { text-decoration:underline; }

    /* FOOTER */
    .site-footer { position:relative; z-index:1; background:#05050f; color:#9a9ac0; margin-top:3rem; padding:3rem 2rem 2rem; }
    .footer-inner { max-width:1300px; margin:0 auto; display:flex; flex-wrap:wrap; gap:2.5rem 3rem; justify-content:space-between; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.08); }
    .footer-brand .logo-text { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:-0.02em; color:#fff; }
    .footer-brand .logo-text span { color:var(--accent2-bright); }
    .footer-tagline { font-size:0.8rem; margin-top:10px; max-width:220px; line-height:1.6; color:#8888ac; }
    .footer-col { display:flex; flex-direction:column; gap:9px; min-width:140px; }
    .footer-heading { font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:#666690; margin-bottom:4px; }
    .footer-col a { color:#9a9ac0; text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
    .footer-col a:hover { color:var(--accent2-bright); }
    .footer-bottom { max-width:1300px; margin:0 auto; padding-top:1.4rem; font-family:'Space Mono',monospace; font-size:0.7rem; color:#666690; }

    @media(max-width:600px) {
      .hero { padding:3rem 1rem 2rem; }
      .filters-wrap, .grid-wrap { padding-left:1rem; padding-right:1rem; }
      .stats-row { gap:1.5rem; }
      .companies-grid, .loading-grid { grid-template-columns: 1fr; }
      .site-footer { padding:2.5rem 1rem 1.5rem; }
    }