cambios php

This commit is contained in:
2026-09-21 02:57:06 -03:00
parent 82816cb680
commit e36ec1e8ca
31 changed files with 659 additions and 1389 deletions
+160 -252
View File
@@ -4,193 +4,163 @@
<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>
<!-- SECCIÓN 1: HERO COMPACTO -->
<section class="blog-hero-compact">
<div class="hero-compact-content">
<span class="badge-filosofia"></span>
<h1 class="hero-compact-title">Ideas que construyen marcas</h1>
<p class="hero-compact-subtitle">
Estrategia, diseño y tecnología explicados sin tecnicismos innecesarios.
</p>
</div>
</section>
<!-- SECCIÓN 2: HEADER DE FILTROS (STICKY CON BUSCADOR) -->
<section class="blog-filters-header" id="blog-filters-header">
<div class="filters-header-container">
<!-- Fila superior: Buscador + Filtros principales -->
<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>
<!-- Fila inferior: Categorías + Ordenamiento -->
<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>
<option value="alphabetical">A-Z</option>
</select>
</div>
</div>
<!-- Info de resultados -->
<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>
<!-- SECCIÓN 3: ARTÍCULOS DESTACADOS -->
<section class="featured-posts" id="featured-posts">
<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">
<!-- Artículo destacado 1 -->
<article class="featured-card" data-categories="branding estrategia" data-tags="identidad, marca, posicionamiento" data-featured="true">
<div class="featured-image">
<img src="../assets/blog/branding-completo.jpg" alt="Guía completa de branding">
<span class="featured-badge">Más leído</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag branding">Branding</span>
<time datetime="2024-01-15">15 Ene 2024</time>
</div>
<h3 class="featured-title">Guía completa: Cómo construir una identidad de marca que perdure</h3>
<p class="featured-excerpt">
Desde el diagnóstico inicial hasta el manual de identidad. Todo lo que necesitás saber para crear una marca con esencia y solidez estratégica.
<!-- 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 class="featured-footer">
<span class="reading-time">⏱ 12 min de lectura</span>
<a href="#" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
</section>
<!-- Artículo destacado 2 -->
<article class="featured-card" data-categories="web" data-tags="landing page, conversión, diseño" data-featured="true">
<div class="featured-image">
<img src="../assets/blog/landing-page.jpg" alt="Landing pages">
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag web">Web</span>
<time datetime="2024-01-10">10 Ene 2024</time>
</div>
<h3 class="featured-title">Landing pages que convierten: 7 principios probados</h3>
<p class="featured-excerpt">
Estructura, copy y diseño working together para transformar visitantes en clientes reales.
</p>
<div class="featured-footer">
<span class="reading-time">⏱ 8 min de lectura</span>
<a href="#" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<!-- Artículo destacado 3 -->
<article class="featured-card" data-categories="automatizaciones" data-tags="instagram, chatbots, leads" data-featured="true">
<div class="featured-image">
<img src="../assets/blog/automatizacion.jpg" alt="Automatizaciones">
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag automatizaciones">Automatizaciones</span>
<time datetime="2024-01-05">5 Ene 2024</time>
</div>
<h3 class="featured-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
<p class="featured-excerpt">
Flujos inteligentes que trabajan 24/7 mientras vos te enfocás en lo que mejor sabés hacer.
</p>
<div class="featured-footer">
<span class="reading-time"> 9 min de lectura</span>
<a href="#" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
</div>
</section>
<!-- SECCIÓN 4: GRID DE ARTÍCULOS -->
<section class="blog-grid-section">
<div class="blog-grid" id="blog-grid">
<!-- ARTÍCULO 1 -->
<article class="blog-card" data-categories="redes estrategia" data-tags="contenido, planificación, calendario" data-featured="false">
<div class="card-image">
<img src="../assets/blog/contenido-redes.jpg" alt="Contenido para redes">
<span class="card-category redes">Redes</span>
<!-- 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="card-content">
<div class="card-meta">
<time datetime="2024-01-20">20 Ene 2024</time>
<span class="reading-time-mini">8 min</span>
<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 -->
<section class="featured-posts" id="featured-posts">
<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">
<!-- Artículo Destacado 1 -->
<article class="featured-card" data-categories="branding" data-featured="true">
<div class="featured-image">
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag branding">Branding</span>
<time datetime="2024-01-18">18 Ene 2024</time>
</div>
<h3 class="card-title">Planificación de contenido: el método de los 3 pilares</h3>
<p class="card-excerpt">
Cómo estructurar tu calendario editorial para mantener coherencia sin volverte loco.
<h3 class="featured-title">Tu logo no es tu marca (y por qué importa)</h3>
<p class="featured-excerpt">
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
</p>
<div class="card-tags">
<span class="tag">Contenido</span>
<span class="tag">Planificación</span>
<div class="featured-footer">
<span class="reading-time">⏱ 6 min de lectura</span>
<a href="articulos/to-logo-no-es-tu-marca.html" class="btn-read">Leer artículo →</a>
</div>
<a href="#" class="card-link">Leer artículo</a>
</div>
</article>
<!-- ARTÍCULO 2 -->
<article class="blog-card" data-categories="branding" data-tags="logo, identidad, diseño" data-featured="false">
<!-- Artículo Destacado 2 -->
<article class="featured-card" data-categories="web" data-featured="true">
<div class="featured-image">
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag web">Web</span>
<time datetime="2024-01-10">10 Ene 2024</time>
</div>
<h3 class="featured-title">Landing pages que convierten: 7 principios probados</h3>
<p class="featured-excerpt">
No es magia, es método. Una landing page efectiva no depende de la suerte ni de tendencias pasajeras.
</p>
<div class="featured-footer">
<span class="reading-time"> 8 min de lectura</span>
<a href="articulos/landing-pages-que-convierten.html" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
<!-- Artículo Destacado 3 -->
<article class="featured-card" data-categories="automatizaciones" data-featured="true">
<div class="featured-image">
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
<span class="featured-badge">Destacado</span>
</div>
<div class="featured-content">
<div class="featured-meta">
<span class="category-tag automatizaciones">Automatizaciones</span>
<time datetime="2024-01-05">5 Ene 2024</time>
</div>
<h3 class="featured-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
<p class="featured-excerpt">
Responder el mismo mensaje 50 veces al día no es escalable. Las automatizaciones bien hechas te permiten captar prospectos.
</p>
<div class="featured-footer">
<span class="reading-time">⏱ 9 min de lectura</span>
<a href="articulos/automatizaciones-instagram.html" class="btn-read">Leer artículo →</a>
</div>
</div>
</article>
</div>
</section>
<!-- GRID DE ARTÍCULOS
<section class="blog-grid-section">
<div class="blog-grid" id="blog-grid">
<article class="blog-card" data-categories="branding" data-featured="true">
<div class="card-image">
<img src="../assets/blog/logo-design.jpg" alt="Diseño de logo">
<img src="assets/blog/logo-marca.jpg" alt="Tu logo no es tu marca">
<span class="card-category branding">Branding</span>
</div>
<div class="card-content">
@@ -200,135 +170,73 @@
</div>
<h3 class="card-title">Tu logo no es tu marca (y por qué importa)</h3>
<p class="card-excerpt">
La diferencia entre un símbolo bonito y una identidad estratégica que realmente funciona.
Muchos emprendedores confunden el símbolo con la sustancia. Tener un logo bonito no es tener una marca.
</p>
<div class="card-tags">
<span class="tag">Logo</span>
<span class="tag">Identidad</span>
</div>
<a href="#" class="card-link">Leer artículo</a>
<a href="articulos/tu-logo-no-es-tu-marca.html" class="card-link">Leer artículo</a>
</div>
</article>
<!-- ARTÍCULO 3 -->
<article class="blog-card" data-categories="web paid" data-tags="seo, google ads, tráfico" data-featured="false">
<article class="blog-card" data-categories="web" data-featured="true">
<div class="card-image">
<img src="../assets/blog/seo-web.jpg" alt="SEO">
<img src="assets/blog/landing-page.jpg" alt="Landing pages que convierten">
<span class="card-category web">Web</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-12">12 Ene 2024</time>
<span class="reading-time-mini">10 min</span>
<time datetime="2024-01-10">10 Ene 2024</time>
<span class="reading-time-mini">8 min</span>
</div>
<h3 class="card-title">SEO vs Paid Media: cuándo usar cada uno</h3>
<h3 class="card-title">Landing pages que convierten: 7 principios probados</h3>
<p class="card-excerpt">
No son enemigos, son complementarios. Te explicamos cómo combinarlos estratégicamente.
No es magia, es método. Una landing page efectiva no depende de la suerte.
</p>
<div class="card-tags">
<span class="tag">SEO</span>
<span class="tag">Google Ads</span>
</div>
<a href="#" class="card-link">Leer artículo</a>
<a href="articulos/landing-pages-que-convierten.html" class="card-link">Leer artículo</a>
</div>
</article>
<!-- ARTÍCULO 4 -->
<article class="blog-card" data-categories="casos estrategia" data-tags="caso de éxito, tecnología, ecosistema" data-featured="false">
<article class="blog-card" data-categories="automatizaciones" data-featured="true">
<div class="card-image">
<img src="../assets/blog/caso-tech.jpg" alt="Caso de éxito">
<span class="card-category casos">Casos</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-08">8 Ene 2024</time>
<span class="reading-time-mini">7 min</span>
</div>
<h3 class="card-title">Caso de éxito: Ecosistema digital para startup tech</h3>
<p class="card-excerpt">
Cómo construimos una presencia integral desde cero: branding, web y redes en 90 días.
</p>
<div class="card-tags">
<span class="tag">Caso de Éxito</span>
<span class="tag">Tecnología</span>
</div>
<a href="#" class="card-link">Leer artículo</a>
</div>
</article>
<!-- ARTÍCULO 5 -->
<article class="blog-card" data-categories="automatizaciones redes" data-tags="manychat, instagram, ventas" data-featured="false">
<div class="card-image">
<img src="../assets/blog/chatbot.jpg" alt="Chatbot">
<img src="assets/blog/automatizacion.jpg" alt="Automatizaciones en Instagram">
<span class="card-category automatizaciones">Automatizaciones</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2024-01-03">3 Ene 2024</time>
<time datetime="2024-01-05">5 Ene 2024</time>
<span class="reading-time-mini">9 min</span>
</div>
<h3 class="card-title">Chatbots que no parecen robots: la clave está en el copy</h3>
<h3 class="card-title">Automatizaciones en Instagram: de 0 a 100 leads/mes</h3>
<p class="card-excerpt">
Cómo escribir flujos de conversación que suenen humanos y realmente vendan.
Responder el mismo mensaje 50 veces al día no es escalable.
</p>
<div class="card-tags">
<span class="tag">ManyChat</span>
<span class="tag">Ventas</span>
</div>
<a href="#" class="card-link">Leer artículo</a>
<a href="articulos/automatizaciones-instagram.html" class="card-link">Leer artículo</a>
</div>
</article>
<!-- ARTÍCULO 6 -->
<article class="blog-card" data-categories="estrategia branding" data-tags="posicionamiento, competencia, diferenciación" data-featured="false">
<div class="card-image">
<img src="../assets/blog/posicionamiento.jpg" alt="Posicionamiento">
<span class="card-category estrategia">Estrategia</span>
</div>
<div class="card-content">
<div class="card-meta">
<time datetime="2023-12-28">28 Dic 2023</time>
<span class="reading-time-mini">11 min</span>
</div>
<h3 class="card-title">Posicionamiento: cómo destacar en un mercado saturado</h3>
<p class="card-excerpt">
Estrategias prácticas para encontrar tu espacio único y volverte inolvidable.
</p>
<div class="card-tags">
<span class="tag">Posicionamiento</span>
<span class="tag">Diferenciación</span>
</div>
<a href="#" class="card-link">Leer artículo</a>
</div>
</article>
</div>
<!-- ESTADO VACÍO (cuando no hay resultados) -->
<div class="empty-state" id="empty-state" style="display: none;">
<div class="empty-icon">🔍</div>
<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>
<!-- PAGINACIÓN / CARGAR MÁS -->
<div class="load-more-container">
<button class="btn btn-secondary" id="load-more">Cargar más artículos</button>
</div>
</section>
</section> -->
<!-- SECCIÓN 5: NEWSLETTER -->
<!-- NEWSLETTER -->
<section class="newsletter-section">
<div class="newsletter-card">
<div class="newsletter-content">
<h2 class="newsletter-title">Ideas frescas en tu inbox</h2>
<p class="newsletter-subtitle">
Suscribite y recibí nuestras mejores estrategias de branding, web y marketing digital.
Sin spam, solo contenido de valor.
Suscribite y recibí nuestras mejores estrategias de branding, web y marketing digital.
</p>
</div>
<form class="newsletter-form" id="newsletter-form">
<button type="submit" class="btn btn-primary">Tu email profesional</button>
<input type="email" placeholder="Tu email profesional" required>
<button type="submit" class="btn btn-primary">Suscribirme</button>
</form>
</div>
@@ -339,6 +247,6 @@
<script src="scripts/main.js"></script>
<script src="scripts/blog.js"></script>
<link rel="stylesheet" href="style/blog.css">
<script src="scripts/fluid.js"></script>
</body>
</html>