ayr2026/blog.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <title>Blog | Amor y Roma — Recursos y Estrategias</title>
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="style/blog.css">
</head>
<body>
  <div id="fluid-bg" aria-hidden="true">
    <canvas id="fluidCanvas"></canvas>
  </div>
  <div id="menu-container"></div>

  <main>
    <!-- HERO -->
    <section class="blog-hero-compact">
      <div class="hero-compact-content">
        <span class="badge-filosofia">Ideas que construyen marcas</span>
        <h1 class="hero-compact-title">Estrategia, diseño y tecnología explicados sin tecnicismos</h1>
        <p class="hero-compact-subtitle">
          Consejos prácticos de branding, web y marketing digital para hacer crecer tu negocio con esencia y estructura.
        </p>
      </div>
    </section>

    <!-- FILTROS -->
    <section class="blog-filters-section" id="blog-filters-header">
      <div class="filters-container">
        <div class="filters-top-row">
          <div class="search-wrapper-compact">
            <span class="search-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <path d="m21 21-4.35-4.35"/>
              </svg>
            </span>
            <input type="text" id="blog-search" placeholder="Buscá por tema: branding, web, redes..." autocomplete="off" aria-label="Buscar artículos">
            <button class="search-clear" id="search-clear" type="button" aria-label="Limpiar búsqueda">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6 6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <div class="filter-group-compact">
            <button class="filter-btn active" data-filter="all">Todos</button>
            <button class="filter-btn" data-filter="destacados">Destacados</button>
          </div>
        </div>

        <div class="filters-bottom-row">
          <div class="filter-categories-compact">
            <button class="category-btn active" data-category="all">Todas</button>
            <button class="category-btn" data-category="branding">Branding</button>
            <button class="category-btn" data-category="web">Web</button>
            <button class="category-btn" data-category="redes">Redes</button>
            <button class="category-btn" data-category="automatizaciones">Automatizaciones</button>
            <button class="category-btn" data-category="paid">Paid Media</button>
            <button class="category-btn" data-category="estrategia">Estrategia</button>
            <button class="category-btn" data-category="casos">Casos</button>
          </div>

          <div class="filter-secondary-compact">
            <select id="sort-select" class="sort-select-compact">
              <option value="recent">Más recientes</option>
              <option value="popular">Más populares</option>
            </select>
          </div>
        </div>

        <div class="results-info-compact">
          <span id="results-count">Mostrando <strong>todos</strong> los artículos</span>
          <button class="reset-filters-compact" id="reset-filters">Limpiar filtros</button>
        </div>
      </div>
    </section>

    <!-- DESTACADOS (Se llena dinámicamente con JS) -->
    <section class="featured-posts" id="featured-posts" style="display: none;">
      <div class="section-header">
        <h2 class="section-title">Más leídos</h2>
        <p class="section-subtitle">Los artículos que más están ayudando a marcas como la tuya.</p>
      </div>
      <div class="featured-grid" id="featured-grid">
        <!-- JS inyecta las tarjetas aquí -->
      </div>
    </section>

    <!-- GRID DE ARTÍCULOS (Se llena dinámicamente con JS) -->
    <section class="blog-grid-section">
      <div class="section-header">
        <h2 class="section-title" id="grid-section-title">Ideas frescas</h2>
        <p class="section-subtitle">Encontrá nuestros últimos articulos de vanguardia.</p>
      </div>
      <div class="blog-grid" id="blog-grid">
        <!-- JS inyecta las tarjetas aquí -->
      </div>

      <div class="empty-state" id="empty-state" style="display: none;">
        <div class="empty-icon">🔍</div>
        <h3>No encontramos artículos con esos filtros</h3>
        <p>Probá con otros términos o limpiá los filtros para ver todo el contenido.</p>
        <button class="btn btn-primary" id="empty-reset">Ver todos los artículos</button>
      </div>

      <div class="load-more-container">
        <button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
      </div>
    </section>
  </main>

  <div id="footer-container"></div>

  <script src="scripts/main.js"></script>
  <script src="scripts/blog.js"></script>
  <script src="scripts/fluid.js"></script>
</body>
</html>