diff --git a/scripts/blog.js b/scripts/blog.js
index c534b1a..69a24b8 100644
--- a/scripts/blog.js
+++ b/scripts/blog.js
@@ -1,110 +1,252 @@
-document.addEventListener('DOMContentLoaded', () => {
- const searchInput = document.getElementById('blog-search');
- const searchClear = document.getElementById('search-clear');
- const categoryBtns = document.querySelectorAll('.category-btn');
- const filterBtns = document.querySelectorAll('.filter-btn');
- const resetBtn = document.getElementById('reset-filters');
+document.addEventListener('DOMContentLoaded', async () => {
+ const GHOST_API_URL = 'https://blog.amoryroma.com.ar';
+ const GHOST_API_KEY = '82450ba91ca6b5b9628006eec4';
+
+ // Elementos del DOM
+ const featuredSection = document.getElementById('featured-posts');
+ const featuredGrid = document.getElementById('featured-grid');
+ const blogGrid = document.getElementById('blog-grid');
+ const loadMoreBtn = document.getElementById('load-more');
const resultsCount = document.getElementById('results-count');
const emptyState = document.getElementById('empty-state');
-
- const allCards = document.querySelectorAll('.blog-card, .featured-card');
- let activeCategory = 'all';
- let activeFilter = 'all';
- let searchQuery = '';
+ const gridSectionTitle = document.getElementById('grid-section-title');
+ const gridSectionSubtitle = document.getElementById('grid-section-subtitle');
- function filterArticles() {
- let visibleCount = 0;
+ // Estado de los filtros
+ let posts = [];
+ let state = {
+ category: 'all',
+ filter: 'all', // 'all' o 'destacados'
+ search: '',
+ sort: 'recent'
+ };
- allCards.forEach(card => {
- const categories = card.dataset.categories || '';
- const isFeatured = card.dataset.featured === 'true';
- const title = card.querySelector('.featured-title, .card-title')?.textContent.toLowerCase() || '';
- const excerpt = card.querySelector('.featured-excerpt, .card-excerpt')?.textContent.toLowerCase() || '';
-
- // 1. Filtro de categoría
- const matchCategory = activeCategory === 'all' || categories.includes(activeCategory);
+ // Cargar artículos desde Ghost API
+ async function loadPosts() {
+ try {
+ const response = await fetch(`${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all&include=tags,authors`);
+ const data = await response.json();
- // 2. Filtro de tipo (Todos / Destacados)
- const matchFilter = activeFilter === 'all' || (activeFilter === 'destacados' && isFeatured);
-
- // 3. Filtro de búsqueda
- const matchSearch = searchQuery === '' || title.includes(searchQuery) || excerpt.includes(searchQuery);
+ posts = data.posts.map(post => ({
+ id: post.id,
+ slug: post.slug,
+ titulo: post.title,
+ extracto: post.excerpt,
+ categoria: post.primary_tag ? post.primary_tag.name.toLowerCase() : 'general',
+ tags: post.tags ? post.tags.map(t => t.name.toLowerCase()) : [],
+ imagen: post.feature_image || 'assets/blog/default.jpg',
+ fecha: post.published_at,
+ tiempo_lectura: Math.ceil(post.reading_time) || 5,
+ destacado: post.featured
+ }));
- if (matchCategory && matchFilter && matchSearch) {
- card.style.display = 'flex';
- visibleCount++;
- } else {
- card.style.display = 'none';
+ renderPosts();
+ setupEventListeners();
+ } catch (error) {
+ console.error('Error cargando posts de Ghost:', error);
+ if(emptyState) {
+ emptyState.style.display = 'block';
+ emptyState.querySelector('h3').textContent = 'Error al cargar el blog';
+ emptyState.querySelector('p').textContent = 'Por favor, recarga la página.';
}
+ }
+ }
+
+ function formatDate(dateString) {
+ const options = { day: '2-digit', month: 'short', year: 'numeric' };
+ return new Date(dateString).toLocaleDateString('es-AR', options);
+ }
+
+ function createCard(post, isFeatured = false) {
+ const catFormatted = post.categoria.charAt(0).toUpperCase() + post.categoria.slice(1);
+ const cardClass = isFeatured ? 'featured-card' : 'blog-card';
+ const badge = isFeatured && post.destacado ? '
Destacado' : '';
+ const metaClass = isFeatured ? 'featured-meta' : 'card-meta';
+ const titleClass = isFeatured ? 'featured-title' : 'card-title';
+ const excerptClass = isFeatured ? 'featured-excerpt' : 'card-excerpt';
+ const linkClass = isFeatured ? 'btn-read' : 'card-link';
+ const linkText = isFeatured ? 'Leer artículo →' : 'Leer artículo';
+
+ return `
+
+
+
+ ${!isFeatured ? `
${catFormatted}` : ''}
+ ${badge}
+
+
+ ${catFormatted}
+
+
+
${post.titulo}
+
${post.extracto}
+
+
+ `;
+ }
+
+ function renderPosts() {
+ // 1. FILTRAR
+ let filtered = posts.filter(post => {
+ const matchCategory = state.category === 'all' || post.categoria === state.category;
+ const matchFilter = state.filter === 'all' || (state.filter === 'destacados' && post.destacado);
+ const q = state.search.toLowerCase();
+ const matchSearch = !q ||
+ post.titulo.toLowerCase().includes(q) ||
+ post.extracto.toLowerCase().includes(q) ||
+ post.tags.some(tag => tag.includes(q));
+
+ return matchCategory && matchFilter && matchSearch;
});
- // Actualizar contador y estado vacío
- if (resultsCount) {
- resultsCount.innerHTML = `Mostrando
${visibleCount} artículo${visibleCount !== 1 ? 's' : ''}`;
+ // 2. ORDENAR
+ if (state.sort === 'recent') {
+ filtered.sort((a, b) => new Date(b.fecha) - new Date(a.fecha));
+ } else if (state.sort === 'popular') {
+ // Como la API pública de Ghost no expone "vistas", simulamos popularidad poniendo los destacados primero
+ filtered.sort((a, b) => (b.destacado === a.destacado) ? 0 : b.destacado ? 1 : -1);
+ }
+
+ // 3. DECIDIR VISTA: ¿Es la vista por defecto (sin filtros)?
+ const isDefaultView = state.category === 'all' && state.filter === 'all' && state.search === '';
+
+ if (isDefaultView) {
+ // VISTA POR DEFECTO: Mostrar Destacados + Últimos 3
+ if (featuredSection) featuredSection.style.display = 'block';
+ if (gridSectionTitle) gridSectionTitle.textContent = 'Últimos artículos';
+ if (gridSectionSubtitle) gridSectionSubtitle.textContent = 'Lo más nuevo y a la vanguardia.';
+ if (loadMoreBtn) {
+ loadMoreBtn.style.display = 'inline-block';
+ loadMoreBtn.textContent = 'Ver todos los artículos en el Blog';
+ loadMoreBtn.onclick = () => window.location.href = `${GHOST_API_URL}/`;
+ }
+
+ const featuredPosts = filtered.filter(p => p.destacado).slice(0, 3);
+ const latestPosts = filtered.slice(0, 3);
+
+ if (featuredGrid) featuredGrid.innerHTML = featuredPosts.map(p => createCard(p, true)).join('');
+ if (blogGrid) blogGrid.innerHTML = latestPosts.map(p => createCard(p, false)).join('');
+
+ if (resultsCount) resultsCount.innerHTML = `Mostrando los
últimos 3 artículos`;
+ if (emptyState) emptyState.style.display = 'none';
+
+ } else {
+ // VISTA FILTRADA: Ocultar Destacados, mostrar TODOS los resultados en la grilla principal
+ if (featuredSection) featuredSection.style.display = 'none';
+ if (loadMoreBtn) loadMoreBtn.style.display = 'none'; // Ocultamos "cargar más" porque ya mostramos todos los filtrados
+
+ // Actualizar títulos según el filtro
+ if (gridSectionTitle) {
+ if (state.search) gridSectionTitle.textContent = `Resultados de búsqueda`;
+ else if (state.category !== 'all') gridSectionTitle.textContent = `Artículos de ${state.category.charAt(0).toUpperCase() + state.category.slice(1)}`;
+ else if (state.filter === 'destacados') gridSectionTitle.textContent = `Artículos Destacados`;
+ }
+ if (gridSectionSubtitle) gridSectionSubtitle.textContent = `Se encontraron ${filtered.length} artículo${filtered.length !== 1 ? 's' : ''}`;
+
+ if (blogGrid) {
+ if (filtered.length === 0) {
+ blogGrid.innerHTML = '';
+ if (emptyState) {
+ emptyState.style.display = 'block';
+ emptyState.querySelector('h3').textContent = 'No encontramos artículos con esos filtros';
+ }
+ } else {
+ if (emptyState) emptyState.style.display = 'none';
+ // Mostramos TODOS los artículos que coinciden con el filtro, no solo 3
+ blogGrid.innerHTML = filtered.map(p => createCard(p, false)).join('');
+ }
+ }
+
+ if (resultsCount) {
+ resultsCount.innerHTML = `Mostrando
${filtered.length} artículo${filtered.length !== 1 ? 's' : ''}`;
+ }
+ }
+ }
+
+ function setupEventListeners() {
+ // 1. Botones de Categoría
+ document.querySelectorAll('.category-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+ e.target.classList.add('active');
+ state.category = e.target.dataset.category;
+ renderPosts();
+ });
+ });
+
+ // 2. Botones de Filtro (Todos / Destacados)
+ document.querySelectorAll('.filter-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+ e.target.classList.add('active');
+ state.filter = e.target.dataset.filter;
+ renderPosts();
+ });
+ });
+
+ // 3. Buscador
+ const searchInput = document.getElementById('blog-search');
+ const searchClear = document.getElementById('search-clear');
+
+ if (searchInput) {
+ searchInput.addEventListener('input', (e) => {
+ state.search = e.target.value;
+ if (searchClear) searchClear.classList.toggle('visible', state.search.length > 0);
+ renderPosts();
+ });
}
- if (emptyState) {
- emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
- }
-
- // Mostrar/ocultar botón de limpiar búsqueda
if (searchClear) {
- searchClear.classList.toggle('visible', searchQuery.length > 0);
+ searchClear.addEventListener('click', () => {
+ if (searchInput) {
+ searchInput.value = '';
+ state.search = '';
+ searchClear.classList.remove('visible');
+ searchInput.focus();
+ renderPosts();
+ }
+ });
}
- }
- // Event Listeners
- if (searchInput) {
- searchInput.addEventListener('input', (e) => {
- searchQuery = e.target.value.toLowerCase().trim();
- filterArticles();
- });
- }
+ // 4. Ordenamiento
+ const sortSelect = document.getElementById('sort-select');
+ if (sortSelect) {
+ sortSelect.addEventListener('change', (e) => {
+ state.sort = e.target.value;
+ renderPosts();
+ });
+ }
- if (searchClear) {
- searchClear.addEventListener('click', () => {
- searchInput.value = '';
- searchQuery = '';
- searchInput.focus();
- filterArticles();
- });
- }
-
- categoryBtns.forEach(btn => {
- btn.addEventListener('click', () => {
- categoryBtns.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- activeCategory = btn.dataset.category;
- filterArticles();
- });
- });
-
- filterBtns.forEach(btn => {
- btn.addEventListener('click', () => {
- filterBtns.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- activeFilter = btn.dataset.filter;
- filterArticles();
- });
- });
-
- if (resetBtn) {
- resetBtn.addEventListener('click', () => {
- activeCategory = 'all';
- activeFilter = 'all';
- searchQuery = '';
+ // 5. Botón Limpiar Filtros
+ const resetBtn = document.getElementById('reset-filters');
+ const emptyReset = document.getElementById('empty-reset');
+
+ function resetAll() {
+ state = { category: 'all', filter: 'all', search: '', sort: 'recent' };
+
+ // Resetear UI
+ document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+ document.querySelector('.category-btn[data-category="all"]').classList.add('active');
+
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+ document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
+
if (searchInput) searchInput.value = '';
+ if (searchClear) searchClear.classList.remove('visible');
+ if (sortSelect) sortSelect.value = 'recent';
- categoryBtns.forEach(b => b.classList.remove('active'));
- document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
-
- filterBtns.forEach(b => b.classList.remove('active'));
- document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
-
- filterArticles();
- });
+ renderPosts();
+ }
+
+ if (resetBtn) resetBtn.addEventListener('click', resetAll);
+ if (emptyReset) emptyReset.addEventListener('click', resetAll);
}
- // Ejecutar al inicio
- filterArticles();
+ // Iniciar
+ await loadPosts();
});
\ No newline at end of file
diff --git a/style/blog.css b/style/blog.css
index f5fff8b..1097b79 100644
--- a/style/blog.css
+++ b/style/blog.css
@@ -54,13 +54,12 @@
}
/* ============================================
- SECCIÓN FILTROS Y BUSCADOR (INTEGRADOS, NO STICKY)
+ SECCIÓN FILTROS Y BUSCADOR
============================================ */
.blog-filters-section {
padding: var(--spacing-md) var(--spacing-md);
background-color: var(--bg-surface-t0);
- border-bottom: 1px solid var(--border);
- position: relative; /* Sin sticky, fluye normal */
+ position: relative;
z-index: 1;
}
@@ -73,7 +72,6 @@
gap: var(--spacing-sm);
}
-/* Fila superior: Buscador + Filtros principales */
.filters-top-row {
display: flex;
gap: var(--spacing-sm);
@@ -82,7 +80,6 @@
flex-wrap: wrap;
}
-/* Buscador con forma redondeada (pill) */
.search-wrapper-compact {
flex: 1;
min-width: 280px;
@@ -92,7 +89,7 @@
align-items: center;
background-color: var(--bg-base);
border: 1.5px solid var(--border);
- border-radius: 999px; /* Forma redondeada como los botones */
+ border-radius: 999px;
padding: 0.5rem 0.5rem 0.5rem 1.1rem;
transition: all 0.3s ease;
}
@@ -150,7 +147,6 @@
justify-content: center;
}
-/* Filtros principales (Todos / Destacados) */
.filter-group-compact {
display: flex;
gap: 0.5rem;
@@ -182,10 +178,9 @@
color: var(--text-on-accent);
}
-/* Fila inferior: Categorías + Ordenamiento */
.filters-bottom-row {
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
@@ -197,7 +192,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
- flex: 1;
+ justify-content: center;
}
.category-btn {
@@ -249,7 +244,6 @@
border-color: var(--brand-teal);
}
-/* Info de resultados */
.results-info-compact {
display: flex;
justify-content: center;
@@ -279,7 +273,7 @@
}
/* ============================================
- TAGS CON MEJOR CONTRASTE (UNIFICADO)
+ TAGS DE CATEGORÍAS
============================================ */
.category-tag {
font-family: var(--font-small);
@@ -293,89 +287,16 @@
transition: all 0.2s ease;
}
-/* Branding */
-.category-tag.branding {
- background-color: var(--brand-crimson);
- color: #ffffff;
- border-color: var(--brand-crimson);
-}
-[data-theme="dark"] .category-tag.branding {
- background-color: rgba(186, 18, 77, 0.95);
- color: #ffffff;
- border-color: rgba(186, 18, 77, 1);
-}
+.category-tag.branding { background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson); }
+.category-tag.web { background-color: var(--brand-teal); color: #ffffff; border-color: var(--brand-teal); }
+.category-tag.automatizaciones { background-color: var(--brand-plum); color: #ffffff; border-color: var(--brand-plum); }
+.category-tag.redes { background-color: #00a88c; color: #ffffff; border-color: #00a88c; }
+.category-tag.paid { background-color: #6b4c9a; color: #ffffff; border-color: #6b4c9a; }
+.category-tag.estrategia { background-color: #d97706; color: #ffffff; border-color: #d97706; }
+.category-tag.casos { background-color: #475569; color: #ffffff; border-color: #475569; }
-/* Web */
-.category-tag.web {
- background-color: var(--brand-teal);
- color: #ffffff;
- border-color: var(--brand-teal);
-}
-[data-theme="dark"] .category-tag.web {
- background-color: rgba(0, 63, 82, 0.95);
- color: #ffffff;
- border-color: rgba(0, 63, 82, 1);
-}
-
-/* Automatizaciones */
-.category-tag.automatizaciones {
- background-color: var(--brand-plum);
- color: #ffffff;
- border-color: var(--brand-plum);
-}
-[data-theme="dark"] .category-tag.automatizaciones {
- background-color: rgba(23, 12, 29, 0.95);
- color: var(--brand-sage-light);
- border-color: rgba(23, 12, 29, 1);
-}
-
-/* Redes */
-.category-tag.redes {
- background-color: #00a88c;
- color: #ffffff;
- border-color: #00a88c;
-}
-[data-theme="dark"] .category-tag.redes {
- background-color: rgba(5, 104, 87, 0.95);
- color: #ffffff;
- border-color: rgba(0, 168, 140, 1);
-}
-
-/* Paid Media */
-.category-tag.paid {
- background-color: #6b4c9a;
- color: #ffffff;
- border-color: #6b4c9a;
-}
-[data-theme="dark"] .category-tag.paid {
- background-color: rgba(107, 76, 154, 0.95);
- color: #ffffff;
- border-color: rgba(107, 76, 154, 1);
-}
-
-/* Estrategia */
-.category-tag.estrategia {
- background-color: #d97706;
- color: #ffffff;
- border-color: #d97706;
-}
-[data-theme="dark"] .category-tag.estrategia {
- background-color: rgba(217, 119, 6, 0.95);
- color: #ffffff;
- border-color: rgba(217, 119, 6, 1);
-}
-
-/* Casos */
-.category-tag.casos {
- background-color: #475569;
- color: #ffffff;
- border-color: #475569;
-}
-[data-theme="dark"] .category-tag.casos {
- background-color: rgba(71, 85, 105, 0.95);
- color: #ffffff;
- border-color: rgba(71, 85, 105, 1);
-}
+[data-theme="dark"] .category-tag.automatizaciones { background-color: rgba(23, 12, 29, 0.95); color: var(--brand-sage-light); border-color: rgba(23, 12, 29, 1); }
+[data-theme="dark"] .category-tag.redes { background-color: rgba(5, 104, 87, 0.95); color: #ffffff; border-color: rgba(0, 168, 140, 1); }
.category-tag:hover {
transform: translateY(-1px);
@@ -383,7 +304,7 @@
}
/* ============================================
- ARTÍCULOS DESTACADOS (VERSIÓN SIMÉTRICA)
+ ARTÍCULOS DESTACADOS
============================================ */
.featured-posts {
padding: var(--spacing-lg) var(--spacing-md);
@@ -414,7 +335,7 @@
.featured-posts .section-title {
font-family: var(--font-title);
font-style: italic;
- font-size: clamp(2rem, 4vw, 2.8rem);
+ font-size: clamp(1.2rem, 2vw, 1.8rem);
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
line-height: 1.2;
@@ -447,24 +368,16 @@
position: relative;
display: flex;
flex-direction: column;
- min-height: 480px;
+ min-height: 250px !important;
}
-/* Glow sutil para destacar en hover */
.featured-card::before {
content: "";
position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ top: 0; left: 0; right: 0; bottom: 0;
border-radius: 20px;
padding: 2px;
- background: linear-gradient(135deg,
- rgba(186, 18, 77, 0.3) 0%,
- rgba(0, 63, 82, 0.3) 50%,
- rgba(186, 18, 77, 0.3) 100%
- );
+ background: linear-gradient(135deg, rgba(186, 18, 77, 0.3) 0%, rgba(0, 63, 82, 0.3) 50%, rgba(186, 18, 77, 0.3) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -478,9 +391,7 @@
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}
-.featured-card:hover::before {
- opacity: 1;
-}
+.featured-card:hover::before { opacity: 1; }
.featured-badge {
position: absolute;
@@ -502,7 +413,7 @@
.featured-image {
position: relative;
overflow: hidden;
- aspect-ratio: 16/10;
+ aspect-ratio: 16/8;
flex-shrink: 0;
}
@@ -513,9 +424,7 @@
transition: transform 0.5s ease;
}
-.featured-card:hover .featured-image img {
- transform: scale(1.05);
-}
+.featured-card:hover .featured-image img { transform: scale(1.05); }
.featured-content {
padding: var(--spacing-md);
@@ -535,18 +444,27 @@
.featured-title {
font-family: var(--font-title);
font-style: italic;
- font-size: 1.3rem;
+ font-size: 1.1rem;
color: var(--text-primary);
- line-height: 1.3;
+ line-height: 1.2;
margin-bottom: var(--spacing-xs);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
.featured-excerpt {
font-family: var(--font-body);
- font-size: 0.95rem;
+ font-size: 0.8rem;
color: var(--text-muted);
- line-height: 1.6;
+ line-height: 1.5;
flex: 1;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ margin-bottom: 0.3rem !important;
}
.featured-footer {
@@ -586,9 +504,45 @@
============================================ */
.blog-grid-section {
padding: var(--spacing-lg) var(--spacing-md);
- background-color: var(--bg-surface);
+ background-color: var(--bg-surface-t3);
+}
+.blog-grid-section .section-header {
+ max-width: 1400px;
+ margin: 0 auto var(--spacing-lg);
+ text-align: left;
+ padding-left: var(--spacing-sm);
+ position: relative;
}
+.blog-grid-section .section-header::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 60px;
+ background: linear-gradient(180deg, var(--brand-teal) 0%, var(--brand-crimson) 100%);
+ border-radius: 2px;
+}
+.blog-grid-section .section-title {
+ font-family: var(--font-title);
+ font-style: italic;
+ font-size: clamp(1.2rem, 2vw, 1.8rem);
+ color: var(--text-primary);
+ margin-bottom: var(--spacing-xs);
+ line-height: 1.2;
+ padding-left: var(--spacing-md);
+}
+
+.blog-grid-section .section-subtitle {
+ font-family: var(--font-body);
+ font-size: 1.1rem;
+ color: var(--text-muted);
+ line-height: 1.6;
+ padding-left: var(--spacing-md);
+ max-width: 600px;
+}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -626,9 +580,7 @@
transition: transform 0.5s ease;
}
-.blog-card:hover .card-image img {
- transform: scale(1.08);
-}
+.blog-card:hover .card-image img { transform: scale(1.08); }
.card-category {
position: absolute;
@@ -662,9 +614,7 @@
color: var(--text-muted);
}
-.reading-time-mini {
- font-weight: 600;
-}
+.reading-time-mini { font-weight: 600; }
.card-title {
font-family: var(--font-title);
@@ -683,23 +633,6 @@
flex: 1;
}
-.card-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 0.4rem;
- margin-top: var(--spacing-xs);
-}
-
-.tag {
- font-family: var(--font-small);
- font-size: 0.75rem;
- padding: 0.25rem 0.7rem;
- background-color: var(--bg-surface);
- border: 1px solid var(--border);
- border-radius: 999px;
- color: var(--text-secondary);
-}
-
.card-link {
font-family: var(--font-small);
font-size: 0.9rem;
@@ -726,12 +659,6 @@
display: none;
}
-.empty-icon {
- font-size: 4rem;
- margin-bottom: var(--spacing-sm);
- opacity: 0.5;
-}
-
.empty-state h3 {
font-family: var(--font-title);
font-style: italic;
@@ -753,358 +680,40 @@
margin-top: var(--spacing-lg);
}
-/* ============================================
- NEWSLETTER
- ============================================ */
-.newsletter-section {
- padding: var(--spacing-lg) var(--spacing-md);
- background-color: transparent;
-}
-
-.newsletter-card {
- max-width: 900px;
- margin: 0 auto;
- background-color: var(--brand-teal);
- border-radius: 24px;
- padding: var(--spacing-lg) var(--spacing-md);
- display: grid;
- grid-template-columns: 1.5fr 1fr;
- gap: var(--spacing-lg);
- align-items: center;
- position: relative;
- overflow: hidden;
-}
-
-.newsletter-card::before {
- content: "";
- position: absolute;
- top: -100px;
- right: -100px;
- width: 300px;
- height: 300px;
- border-radius: 50%;
- background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%);
- opacity: 0.3;
- filter: blur(60px);
-}
-
-.newsletter-content {
- position: relative;
- z-index: 1;
-}
-
-.newsletter-title {
- font-family: var(--font-title);
- font-style: italic;
- font-size: clamp(1.8rem, 3vw, 2.5rem);
- color: #ffffff;
- margin-bottom: var(--spacing-xs);
-}
-
-.newsletter-subtitle {
- font-family: var(--font-body);
- font-size: 1rem;
- color: rgba(255, 255, 255, 0.85);
- line-height: 1.6;
-}
-
-.newsletter-form {
- display: flex;
- gap: var(--spacing-sm);
- position: relative;
- z-index: 1;
- justify-content: center;
-}
-
-.newsletter-form input {
- flex: 1;
- max-width: 320px; /* Limitar ancho para que parezca botón */
- padding: 0.85rem 1.5rem;
- border: 1.5px solid rgba(255, 255, 255, 0.3);
- border-radius: 999px;
- font-family: var(--font-body);
- font-size: 0.95rem;
- font-weight: 500;
- background-color: rgba(255, 255, 255, 0.15); /* Fondo sutil tipo botón */
- color: #ffffff; /* ← CLAVE: Texto blanco siempre visible */
- backdrop-filter: blur(4px);
- transition: all 0.3s ease;
-}
-
-.newsletter-form input::placeholder {
- color: var(--text-muted);
-}
-
-.newsletter-form .btn {
- white-space: nowrap;
- background-color: var(--brand-crimson);
- color: var(--text-on-accent);
- border: 1.5px solid var(--brand-crimson);
-}
-
-.newsletter-form .btn:hover {
- background-color: #ffffff;
- color: var(--brand-teal);
- border-color: #ffffff;
-}
-/* ============================================
- PÁGINA DE ARTÍCULO INDIVIDUAL (articulo.php)
- ============================================ */
-.articulo-header {
- max-width: 900px;
- margin: 0 auto;
- padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md) var(--spacing-md);
- text-align: center;
-}
-
-.articulo-header .badge-filosofia {
- display: inline-block;
- padding: 0.4rem 1rem;
- border-radius: 999px;
- background-color: var(--badge-bg);
- color: var(--badge-text);
- font-family: var(--font-small);
- font-weight: 600;
- font-size: 0.85rem;
- letter-spacing: 0.5px;
- text-transform: uppercase;
- margin-bottom: var(--spacing-sm);
-}
-
-.articulo-header h1 {
- font-family: var(--font-title);
- font-style: italic;
- font-weight: 700;
- font-size: clamp(2rem, 5vw, 3.5rem);
- line-height: 1.15;
- color: var(--text-primary);
- margin-bottom: var(--spacing-md);
-}
-
-.articulo-meta {
- display: flex;
- justify-content: center;
- gap: var(--spacing-md);
- color: var(--text-muted);
- font-family: var(--font-small);
- font-size: 0.9rem;
- margin-bottom: var(--spacing-md);
- flex-wrap: wrap;
-}
-
-.articulo-imagen {
- width: 100%;
- max-height: 500px;
- object-fit: cover;
- border-radius: 16px;
- margin-top: var(--spacing-md);
- box-shadow: var(--shadow);
-}
-
-.articulo-contenido {
- max-width: 800px;
- margin: 0 auto;
- padding: var(--spacing-lg) var(--spacing-md);
- font-family: var(--font-body);
- font-size: 1.1rem;
- line-height: 1.8;
- color: var(--text-primary);
-}
-
-.articulo-contenido h2,
-.articulo-contenido h3 {
- font-family: var(--font-title);
- font-style: italic;
- color: var(--text-primary);
- margin-top: 2.5rem;
- margin-bottom: 1rem;
-}
-
-.articulo-contenido p {
- margin-bottom: 1.5rem;
-}
-
-.articulo-contenido ul,
-.articulo-contenido ol {
- margin-bottom: 1.5rem;
- padding-left: 1.5rem;
-}
-
-.articulo-contenido li {
- margin-bottom: 0.5rem;
-}
-
-.articulo-contenido img {
- max-width: 100%;
- height: auto;
- border-radius: 12px;
- margin: 2rem 0;
- box-shadow: var(--shadow);
-}
-
-.articulo-contenido blockquote {
- border-left: 4px solid var(--brand-crimson);
- padding-left: var(--spacing-md);
- font-style: italic;
- color: var(--text-secondary);
- margin: 2rem 0;
- font-size: 1.2rem;
-}
-
-.volver-link {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- color: var(--brand-crimson);
- text-decoration: none;
- font-family: var(--font-small);
- font-weight: 600;
- font-size: 0.95rem;
- margin-bottom: var(--spacing-md);
- transition: all 0.2s ease;
-}
-
-.volver-link:hover {
- color: var(--brand-teal);
- gap: 0.7rem;
-}
-
-
/* ============================================
RESPONSIVE BLOG
============================================ */
@media (max-width: 1024px) {
- .blog-grid,
- .featured-grid {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .featured-card {
- min-height: 420px;
- }
+ .blog-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); }
+ .featured-card { min-height: 420px; }
}
@media (max-width: 768px) {
- .articulo-header {
- padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
- }
- .articulo-contenido {
- padding: var(--spacing-md) var(--spacing-sm);
- font-size: 1rem;
- }
- .articulo-meta {
- flex-direction: column;
- gap: 0.5rem;
- }
- .blog-hero-compact {
- padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
- }
-
- .blog-filters-section {
- padding: var(--spacing-sm);
- }
-
- .filters-top-row {
- flex-direction: column;
- align-items: stretch;
- }
-
- .search-wrapper-compact {
- max-width: 100%;
- min-width: 100%;
- }
-
- .filter-group-compact {
- justify-content: center;
- }
-
- .filters-bottom-row {
- flex-direction: column;
- align-items: stretch;
- }
-
+ .blog-hero-compact { padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-md); }
+ .blog-filters-section { padding: var(--spacing-sm); }
+ .filters-top-row { flex-direction: column; align-items: stretch; }
+ .search-wrapper-compact { max-width: 100%; min-width: 100%; }
+ .filter-group-compact { justify-content: center; }
+ .filters-bottom-row { flex-direction: column; align-items: stretch; }
.filter-categories-compact {
- overflow-x: auto;
- flex-wrap: nowrap;
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- padding-bottom: 4px;
- }
-
- .filter-categories-compact::-webkit-scrollbar {
- display: none;
- }
-
- .category-btn {
- flex-shrink: 0;
- }
-
- .filter-secondary-compact {
- align-self: flex-end;
- }
-
- .blog-grid,
- .featured-grid {
- grid-template-columns: 1fr;
- max-width: 500px;
- }
-
- .featured-card {
- min-height: auto;
- }
-
- .newsletter-card {
- grid-template-columns: 1fr;
- text-align: center;
- }
-
- .newsletter-form {
- flex-direction: column;
- align-items: center;
- }
-
- .newsletter-form input {
- max-width: 100%;
- width: 100%;
- }
-
- .newsletter-form .btn {
- width: 100%;
- max-width: 320px;
+ overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
+ scrollbar-width: none; padding-bottom: 4px;
}
+ .filter-categories-compact::-webkit-scrollbar { display: none; }
+ .category-btn { flex-shrink: 0; }
+ .filter-secondary-compact { align-self: flex-end; }
+ .blog-grid, .featured-grid { grid-template-columns: 1fr; max-width: 500px; }
+ .featured-card { min-height: auto; }
}
@media (max-width: 480px) {
- .blog-hero-compact .hero-compact-title {
- font-size: 2rem;
- }
-
- .search-wrapper-compact {
- padding: 0.4rem 0.4rem 0.4rem 1rem;
- }
-
- .search-wrapper-compact input {
- font-size: 0.9rem;
- }
-
- .filter-btn {
- font-size: 0.8rem;
- padding: 0.4rem 0.8rem;
- }
-
- .featured-title,
- .card-title {
- font-size: 1.2rem;
- }
+ .blog-hero-compact .hero-compact-title { font-size: 2rem; }
+ .search-wrapper-compact { padding: 0.4rem 0.4rem 0.4rem 1rem; }
+ .search-wrapper-compact input { font-size: 0.9rem; }
+ .filter-btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
+ .featured-title, .card-title { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
- .blog-card,
- .featured-card,
- .filter-btn,
- .category-btn,
- .search-wrapper-compact,
- .category-tag {
- transition: none;
- }
+ .blog-card, .featured-card, .filter-btn, .category-btn, .search-wrapper-compact, .category-tag { transition: none; }
}
\ No newline at end of file
diff --git a/style/contacto.css b/style/contacto.css
index d21a075..312be32 100644
--- a/style/contacto.css
+++ b/style/contacto.css
@@ -95,8 +95,7 @@
width: 40px;
height: 40px;
flex-shrink: 0;
- background-color: var(--brand-crimson);
- border-radius: 10px;
+ border-radius: 1px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
@@ -108,22 +107,27 @@
.canal-email {
-webkit-mask-image: url("../assets/iconos/buzon.svg");
mask-image: url("../assets/iconos/buzon.svg");
- background-color: var(--brand-teal);
+ background-color: var(--brand-teal-contraste);
}
.canal-whatsapp {
- -webkit-mask-image: url("../assets/vectores/whatsapp.svg");
- mask-image: url("../assets/vectores/whatsapp.svg");
- background-color: #25D366;
+ -webkit-mask-image: url("../assets/logos/whatsapp.svg");
+ mask-image: url("../assets/logos/whatsapp.svg");
+ background-color: var(--brand-teal-contraste);
}
.canal-instagram {
- -webkit-mask-image: url("../assets/vectores/insta.svg");
- mask-image: url("../assets/vectores/insta.svg");
- background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
+ -webkit-mask-image: url("../assets/logos/instagram.svg");
+ mask-image: url("../assets/logos/instagram.svg");
+ background-color: var(--brand-teal-contraste);
}
.canal-linkedin {
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
- background-color: #0A66C2;
+ -webkit-mask-image: url("../assets/logos/linkedin.svg");
+ mask-image: url("../assets/logos/linkedin.svg");
+ background-color: var(--brand-teal-contraste);
+}
+.canal-facebook {
+ -webkit-mask-image: url("../assets/logos/facebook.svg");
+ mask-image: url("../assets/logos/facebook.svg");
+ background-color: var(--brand-teal-contraste);
}
.canal-contenido {
- Destacado
- 
- Destacado
- 
- Destacado
-