nosotros + blog en curso
This commit is contained in:
Binary file not shown.
@@ -3,66 +3,341 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="Blog de Amor y Roma. Estrategia, branding, desarrollo web y marketing digital con esencia y solidez.">
|
||||||
<title>Blog - [Nombre de la agencia]</title>
|
<title>Blog | Amor y Roma — Recursos y Estrategias</title>
|
||||||
<link rel="stylesheet" href="style/main.css">
|
<link rel="stylesheet" href="style/main.css">
|
||||||
<link rel="stylesheet" href="style/blog.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu-container"></div>
|
<div id="menu-container"></div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- Sección 1: Encabezado del blog -->
|
<!-- SECCIÓN 1: HERO COMPACTO -->
|
||||||
<section id="blog-section-1">
|
<section class="blog-hero-compact">
|
||||||
<h2>Blog</h2>
|
<div class="hero-compact-content">
|
||||||
<p>Contenido pendiente de definir.</p>
|
<span class="badge-filosofia"></span>
|
||||||
</section>
|
<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: Filtros dinámicos -->
|
<!-- SECCIÓN 2: HEADER DE FILTROS (STICKY CON BUSCADOR) -->
|
||||||
<section id="blog-section-2">
|
<section class="blog-filters-header" id="blog-filters-header">
|
||||||
<div class="blog-filters">
|
<div class="filters-header-container">
|
||||||
<label for="filter-category">Categoría:</label>
|
|
||||||
<select id="filter-category">
|
<!-- Fila superior: Buscador + Filtros principales -->
|
||||||
<option value="">Todas</option>
|
<div class="filters-top-row">
|
||||||
<!-- Las opciones se cargarán dinámicamente -->
|
<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>
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label for="filter-date-from">Desde:</label>
|
<!-- Info de resultados -->
|
||||||
<input type="date" id="filter-date-from">
|
<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>
|
||||||
|
|
||||||
<label for="filter-date-to">Hasta:</label>
|
<!-- SECCIÓN 3: ARTÍCULOS DESTACADOS -->
|
||||||
<input type="date" id="filter-date-to">
|
<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>
|
||||||
|
|
||||||
<button type="button" id="btn-apply-filters">Aplicar filtros</button>
|
<div class="featured-grid">
|
||||||
<button type="button" id="btn-clear-filters">Limpiar</button>
|
<!-- 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.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</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>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<div class="card-tags">
|
||||||
|
<span class="tag">Contenido</span>
|
||||||
|
<span class="tag">Planificación</span>
|
||||||
|
</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">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="../assets/blog/logo-design.jpg" alt="Diseño de logo">
|
||||||
|
<span class="card-category branding">Branding</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-meta">
|
||||||
|
<time datetime="2024-01-18">18 Ene 2024</time>
|
||||||
|
<span class="reading-time-mini">6 min</span>
|
||||||
|
</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.
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- ARTÍCULO 3 -->
|
||||||
|
<article class="blog-card" data-categories="web paid" data-tags="seo, google ads, tráfico" data-featured="false">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="../assets/blog/seo-web.jpg" alt="SEO">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<h3 class="card-title">SEO vs Paid Media: cuándo usar cada uno</h3>
|
||||||
|
<p class="card-excerpt">
|
||||||
|
No son enemigos, son complementarios. Te explicamos cómo combinarlos estratégicamente.
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- ARTÍCULO 4 -->
|
||||||
|
<article class="blog-card" data-categories="casos estrategia" data-tags="caso de éxito, tecnología, ecosistema" data-featured="false">
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<p class="card-excerpt">
|
||||||
|
Cómo escribir flujos de conversación que suenen humanos y realmente vendan.
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Sección 3: Listado de artículos -->
|
<!-- SECCIÓN 5: NEWSLETTER -->
|
||||||
<section id="blog-section-3">
|
<section class="newsletter-section">
|
||||||
<div class="blog-list" id="blog-list">
|
<div class="newsletter-card">
|
||||||
<!-- Los artículos se inyectarán aquí desde PHP/DB -->
|
<div class="newsletter-content">
|
||||||
<p>Cargando artículos...</p>
|
<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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form class="newsletter-form" id="newsletter-form">
|
||||||
|
<button type="submit" class="btn btn-primary">Tu email profesional</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Suscribirme</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Sección 4: Paginación -->
|
|
||||||
<section id="blog-section-4">
|
|
||||||
<nav class="blog-pagination" id="blog-pagination" aria-label="Paginación del blog">
|
|
||||||
<!-- Controles de paginación -->
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Sección 5: CTA / Suscripción -->
|
|
||||||
<section id="blog-section-5">
|
|
||||||
<h2>Suscríbete</h2>
|
|
||||||
<p>Contenido pendiente de definir.</p>
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div id="footer-container"></div>
|
<div id="footer-container"></div>
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
<script src="scripts/main.js"></script>
|
||||||
<script src="scripts/efecto.js"></script>
|
<script src="scripts/blog.js"></script>
|
||||||
|
<link rel="stylesheet" href="style/blog.css">
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+3
-3
@@ -148,9 +148,9 @@
|
|||||||
Respondé 4 preguntas rápidas y te vamos a recomendar el servicio ideal para el momento en que está tu marca.
|
Respondé 4 preguntas rápidas y te vamos a recomendar el servicio ideal para el momento en que está tu marca.
|
||||||
</p>
|
</p>
|
||||||
<ul class="bienvenida-detalles">
|
<ul class="bienvenida-detalles">
|
||||||
<li><span class="detalle-icono">⏱</span> 2 minutos</li>
|
<li><span class="detalle-icono"></span><i class="fa-regular fa-alarm-clock"></i> 2 minutos</li>
|
||||||
<li><span class="detalle-icono">🎯</span> Recomendación personalizada</li>
|
<li><span class="detalle-icono"></span><i class="fa-solid fa-bullseye"></i> Recomendación personalizada</li>
|
||||||
<li><span class="detalle-icono">💬</span> Sin compromiso</li>
|
<li><span class="detalle-icono"></span><i class="fa-regular fa-comment-dots"></i> Sin compromiso</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button class="btn btn-primary btn-comenzar" id="btn-comenzar">
|
<button class="btn btn-primary btn-comenzar" id="btn-comenzar">
|
||||||
Comenzar diagnóstico
|
Comenzar diagnóstico
|
||||||
|
|||||||
+131
-131
@@ -5,7 +5,9 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
|
<meta name="description" content="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
|
||||||
<title>Nosotros | Amor y Roma — Agencia Boutique</title>
|
<title>Nosotros | Amor y Roma — Agencia Boutique</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
|
||||||
<link rel="stylesheet" href="style/main.css">
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
<link rel="stylesheet" href="style/nosotros.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu-container"></div>
|
<div id="menu-container"></div>
|
||||||
@@ -48,36 +50,36 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- SECCIÓN: QUIÉNES SOMOS / EQUIPO -->
|
<!-- SECCIÓN: QUIÉNES SOMOS / EQUIPO -->
|
||||||
<section id="nosotros-equipo" class="equipo-section">
|
<section id="nosotros-equipo" class="equipo-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
|
<h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
|
||||||
<p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
|
<p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="equipo-grid">
|
<div class="equipo-grid">
|
||||||
<!-- PATRICIA -->
|
<!-- PATRICIA -->
|
||||||
<article class="equipo-card">
|
<article class="equipo-card">
|
||||||
<div class="equipo-firma">Patricia Pugliese</div>
|
<div class="equipo-firma">Patricia Pugliese</div>
|
||||||
<span class="equipo-rol">Estrategia & Creatividad</span>
|
<span class="equipo-rol">Estrategia & Creatividad</span>
|
||||||
<p class="equipo-descripcion">
|
<p class="equipo-descripcion">
|
||||||
Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
|
Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- FRANCISCO -->
|
||||||
|
<article class="equipo-card">
|
||||||
|
<div class="equipo-firma">Francisco Anfuso</div>
|
||||||
|
<span class="equipo-rol">Desarrollo & Tecnología</span>
|
||||||
|
<p class="equipo-descripcion">
|
||||||
|
Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="equipo-colaboradores">
|
||||||
|
Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</section>
|
||||||
|
|
||||||
<!-- FRANCISCO -->
|
|
||||||
<article class="equipo-card">
|
|
||||||
<div class="equipo-firma">Francisco Anfuso</div>
|
|
||||||
<span class="equipo-rol">Desarrollo & Tecnología</span>
|
|
||||||
<p class="equipo-descripcion">
|
|
||||||
Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="equipo-colaboradores">
|
|
||||||
Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
|
<!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
|
||||||
<section id="nosotros-principios" class="principios-section">
|
<section id="nosotros-principios" class="principios-section">
|
||||||
@@ -105,117 +107,117 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- SECCIÓN 4: TRANSPARENCIA -->
|
<!-- SECCIÓN 4: TRANSPARENCIA -->
|
||||||
<section id="nosotros-transparencia" class="transparencia-section">
|
<section id="nosotros-transparencia" class="transparencia-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title">Transparencia antes de la primera reunión</h2>
|
<h2 class="section-title">Transparencia antes de la primera reunión</h2>
|
||||||
<p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
|
<p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="transparencia-grid">
|
<div class="transparencia-grid">
|
||||||
<!-- Tarjeta 1: INVERSIÓN -->
|
<!-- Tarjeta 1: INVERSIÓN -->
|
||||||
<article class="transparencia-card">
|
<article class="transparencia-card">
|
||||||
<div class="transparencia-icono">
|
<div class="transparencia-icono">
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
<path d="M12 2v20M2 12h20" stroke-linecap="round"/>
|
<path d="M12 2v20M2 12h20" stroke-linecap="round"/>
|
||||||
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="transparencia-titulo">INVERSIÓN</h3>
|
<p class="transparencia-titulo">INVERSIÓN</p>
|
||||||
<p class="transparencia-dato">Desde $250.000/mes</p>
|
<p class="transparencia-dato">Desde $250.000/mes</p>
|
||||||
<p class="transparencia-texto">
|
<p class="transparencia-texto">
|
||||||
Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
|
Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Tarjeta 2: TIEMPOS -->
|
<!-- Tarjeta 2: TIEMPOS -->
|
||||||
<article class="transparencia-card">
|
<article class="transparencia-card">
|
||||||
<div class="transparencia-icono">
|
<div class="transparencia-icono">
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
<circle cx="12" cy="12" r="10" stroke-linecap="round"/>
|
||||||
<path d="M12 6v6l4 2" stroke-linecap="round"/>
|
<path d="M12 6v6l4 2" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="transparencia-titulo">TIEMPOS</h3>
|
<p class="transparencia-titulo">TIEMPOS</p>
|
||||||
<p class="transparencia-dato">15-30 días</p>
|
<p class="transparencia-dato">15-30 días</p>
|
||||||
<p class="transparencia-texto">
|
<p class="transparencia-texto">
|
||||||
Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
|
Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Tarjeta 3: CONTRATO -->
|
<!-- Tarjeta 3: CONTRATO -->
|
||||||
<article class="transparencia-card">
|
<article class="transparencia-card">
|
||||||
<div class="transparencia-icono">
|
<div class="transparencia-icono">
|
||||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
|
||||||
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
|
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="transparencia-titulo">CONTRATO</p>
|
||||||
|
<p class="transparencia-dato">3 meses · luego mensual</p>
|
||||||
|
<p class="transparencia-texto">
|
||||||
|
Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="transparencia-titulo">CONTRATO</h3>
|
</section>
|
||||||
<p class="transparencia-dato">3 meses · luego mensual</p>
|
|
||||||
<p class="transparencia-texto">
|
|
||||||
Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
|
<!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
|
||||||
<section id="nosotros-casos" class="casos-section">
|
<section id="nosotros-casos" class="casos-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2 class="section-title">Matriz de Soluciones</h2>
|
<h2 class="section-title">Matriz de Soluciones</h2>
|
||||||
<p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
|
<p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="casos-grid-simetrico">
|
<div class="casos-grid-simetrico">
|
||||||
<!-- ARQUETIPO 1 -->
|
<!-- ARQUETIPO 1 -->
|
||||||
<article class="caso-card">
|
<article class="caso-card">
|
||||||
<div class="caso-header">
|
<div class="caso-header">
|
||||||
<span class="caso-badge">Arquetipo 1</span>
|
<span class="caso-badge">Arquetipo 1</span>
|
||||||
<h3 class="caso-titulo">Identidad Integral</h3>
|
<h3 class="caso-titulo">Identidad Integral</h3>
|
||||||
</div>
|
</div>
|
||||||
<p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
|
<p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
|
||||||
<div class="caso-leccion">
|
<div class="caso-leccion">
|
||||||
<strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
|
<strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- ARQUETIPO 2 -->
|
<!-- ARQUETIPO 2 -->
|
||||||
<article class="caso-card">
|
<article class="caso-card">
|
||||||
<div class="caso-header">
|
<div class="caso-header">
|
||||||
<span class="caso-badge">Arquetipo 2</span>
|
<span class="caso-badge">Arquetipo 2</span>
|
||||||
<h3 class="caso-titulo">Infraestructura B2B</h3>
|
<h3 class="caso-titulo">Infraestructura B2B</h3>
|
||||||
</div>
|
</div>
|
||||||
<p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
|
<p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
|
||||||
<div class="caso-leccion">
|
<div class="caso-leccion">
|
||||||
<strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
|
<strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- ARQUETIPO 3 (INSÍGNIA) -->
|
<!-- ARQUETIPO 3 (INSÍGNIA) -->
|
||||||
<article class="caso-card caso-insignia">
|
<article class="caso-card caso-insignia">
|
||||||
<div class="caso-header">
|
<div class="caso-header">
|
||||||
<span class="caso-badge caso-badge-insignia">Arquetipo 3 (Insígnia)</span>
|
<span class="caso-badge caso-badge-insignia">Arquetipo 3 (Insígnia)</span>
|
||||||
<h3 class="caso-titulo">Ecosistema Digital Completo</h3>
|
<h3 class="caso-titulo">Ecosistema Digital Completo</h3>
|
||||||
</div>
|
</div>
|
||||||
<p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
|
<p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
|
||||||
<div class="caso-leccion caso-leccion-insignia">
|
<div class="caso-leccion caso-leccion-insignia">
|
||||||
<strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
|
<strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- ARQUETIPO 4 -->
|
<!-- ARQUETIPO 4 -->
|
||||||
<article class="caso-card">
|
<article class="caso-card">
|
||||||
<div class="caso-header">
|
<div class="caso-header">
|
||||||
<span class="caso-badge">Arquetipo 4</span>
|
<span class="caso-badge">Arquetipo 4</span>
|
||||||
<h3 class="caso-titulo">Profesionalización de Servicios</h3>
|
<h3 class="caso-titulo">Profesionalización de Servicios</h3>
|
||||||
|
</div>
|
||||||
|
<p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
|
||||||
|
<div class="caso-leccion">
|
||||||
|
<strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
|
</section>
|
||||||
<div class="caso-leccion">
|
|
||||||
<strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- SECCIÓN 6: CTA FINAL -->
|
<!-- SECCIÓN 6: CTA FINAL -->
|
||||||
<section class="cta-section">
|
<section class="cta-section">
|
||||||
@@ -233,7 +235,5 @@
|
|||||||
<div id="footer-container"></div>
|
<div id="footer-container"></div>
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
<script src="scripts/main.js"></script>
|
||||||
<script src="scripts/efecto.js"></script>
|
|
||||||
<link rel="stylesheet" href="style/nosotros.css">
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+185
@@ -0,0 +1,185 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
console.log('Blog JS cargado');
|
||||||
|
|
||||||
|
const searchInput = document.getElementById('blog-search');
|
||||||
|
const searchClear = document.getElementById('search-clear');
|
||||||
|
const blogGrid = document.getElementById('blog-grid');
|
||||||
|
const emptyState = document.getElementById('empty-state');
|
||||||
|
const resultsCount = document.getElementById('results-count');
|
||||||
|
const filtersHeader = document.getElementById('blog-filters-header');
|
||||||
|
|
||||||
|
if (!searchInput || !blogGrid) {
|
||||||
|
console.error('Faltan elementos del DOM');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let currentFilters = {
|
||||||
|
search: '',
|
||||||
|
category: 'all',
|
||||||
|
featured: 'all',
|
||||||
|
sort: 'recent'
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== EFECTO SCROLL EN FILTROS =====
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
filtersHeader.classList.add('is-scrolled');
|
||||||
|
} else {
|
||||||
|
filtersHeader.classList.remove('is-scrolled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== BUSCADOR =====
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const value = e.target.value.trim();
|
||||||
|
currentFilters.search = value;
|
||||||
|
|
||||||
|
if (searchClear) {
|
||||||
|
searchClear.classList.toggle('visible', value.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterArticles();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (searchClear) {
|
||||||
|
searchClear.addEventListener('click', () => {
|
||||||
|
searchInput.value = '';
|
||||||
|
searchClear.classList.remove('visible');
|
||||||
|
currentFilters.search = '';
|
||||||
|
filterArticles();
|
||||||
|
searchInput.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== FILTROS PRINCIPALES =====
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
currentFilters.featured = btn.dataset.filter;
|
||||||
|
filterArticles();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== CATEGORÍAS =====
|
||||||
|
document.querySelectorAll('.category-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
currentFilters.category = btn.dataset.category;
|
||||||
|
filterArticles();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== ORDENAMIENTO =====
|
||||||
|
const sortSelect = document.getElementById('sort-select');
|
||||||
|
if (sortSelect) {
|
||||||
|
sortSelect.addEventListener('change', (e) => {
|
||||||
|
currentFilters.sort = e.target.value;
|
||||||
|
sortArticles();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== RESET =====
|
||||||
|
const resetFilters = document.getElementById('reset-filters');
|
||||||
|
if (resetFilters) {
|
||||||
|
resetFilters.addEventListener('click', () => {
|
||||||
|
currentFilters = { search: '', category: 'all', featured: 'all', sort: 'recent' };
|
||||||
|
searchInput.value = '';
|
||||||
|
searchClear?.classList.remove('visible');
|
||||||
|
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
document.querySelector('.filter-btn[data-filter="all"]')?.classList.add('active');
|
||||||
|
|
||||||
|
document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
document.querySelector('.category-btn[data-category="all"]')?.classList.add('active');
|
||||||
|
|
||||||
|
if (sortSelect) sortSelect.value = 'recent';
|
||||||
|
|
||||||
|
filterArticles();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== FUNCIÓN DE FILTRADO =====
|
||||||
|
const filterArticles = () => {
|
||||||
|
const articles = document.querySelectorAll('.blog-card, .featured-card');
|
||||||
|
let visibleCount = 0;
|
||||||
|
|
||||||
|
articles.forEach(article => {
|
||||||
|
const categories = article.dataset.categories || '';
|
||||||
|
const tags = article.dataset.tags || '';
|
||||||
|
const isFeatured = article.dataset.featured === 'true';
|
||||||
|
|
||||||
|
const title = article.querySelector('.card-title, .featured-title')?.textContent.toLowerCase() || '';
|
||||||
|
const excerpt = article.querySelector('.card-excerpt, .featured-excerpt')?.textContent.toLowerCase() || '';
|
||||||
|
|
||||||
|
const searchTerm = currentFilters.search.toLowerCase();
|
||||||
|
const matchSearch = searchTerm === '' ||
|
||||||
|
title.includes(searchTerm) ||
|
||||||
|
excerpt.includes(searchTerm) ||
|
||||||
|
categories.toLowerCase().includes(searchTerm) ||
|
||||||
|
tags.toLowerCase().includes(searchTerm);
|
||||||
|
|
||||||
|
const matchCategory = currentFilters.category === 'all' ||
|
||||||
|
categories.toLowerCase().includes(currentFilters.category.toLowerCase());
|
||||||
|
|
||||||
|
let matchFeatured = true;
|
||||||
|
if (currentFilters.featured === 'destacados') {
|
||||||
|
matchFeatured = isFeatured;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (matchSearch && matchCategory && matchFeatured) {
|
||||||
|
article.style.display = '';
|
||||||
|
visibleCount++;
|
||||||
|
} else {
|
||||||
|
article.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
sortArticles();
|
||||||
|
updateResultsCount(visibleCount);
|
||||||
|
|
||||||
|
if (emptyState) {
|
||||||
|
emptyState.style.display = visibleCount === 0 ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortArticles = () => {
|
||||||
|
const articles = Array.from(document.querySelectorAll('.blog-card'));
|
||||||
|
const container = blogGrid;
|
||||||
|
|
||||||
|
switch(currentFilters.sort) {
|
||||||
|
case 'recent':
|
||||||
|
articles.sort((a, b) => {
|
||||||
|
const dateA = new Date(a.querySelector('time')?.datetime || 0);
|
||||||
|
const dateB = new Date(b.querySelector('time')?.datetime || 0);
|
||||||
|
return dateB - dateA;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'alphabetical':
|
||||||
|
articles.sort((a, b) => {
|
||||||
|
const titleA = a.querySelector('.card-title')?.textContent || '';
|
||||||
|
const titleB = b.querySelector('.card-title')?.textContent || '';
|
||||||
|
return titleA.localeCompare(titleB);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
articles.forEach(article => container.appendChild(article));
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateResultsCount = (count) => {
|
||||||
|
if (!resultsCount) return;
|
||||||
|
|
||||||
|
if (count === 0) {
|
||||||
|
resultsCount.innerHTML = 'No se encontraron artículos';
|
||||||
|
} else if (currentFilters.category === 'all' && currentFilters.search === '') {
|
||||||
|
resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículos`;
|
||||||
|
} else {
|
||||||
|
resultsCount.innerHTML = `Mostrando <strong>${count}</strong> artículo${count !== 1 ? 's' : ''}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Inicializar
|
||||||
|
filterArticles();
|
||||||
|
});
|
||||||
+962
@@ -0,0 +1,962 @@
|
|||||||
|
/* ============================================
|
||||||
|
HERO COMPACTO DEL BLOG
|
||||||
|
============================================ */
|
||||||
|
.blog-hero-compact {
|
||||||
|
padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md) var(--spacing-lg);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-compact-content {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-hero-compact .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;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.9s ease-out 0s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-hero-compact .hero-compact-title {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--text-primary);
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.9s ease-out 0.2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-hero-compact .hero-compact-subtitle {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: clamp(1rem, 2vw, 1.15rem);
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 600px;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.9s ease-out 0.4s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SECCIÓN FILTROS Y BUSCADOR (INTEGRADOS, NO STICKY)
|
||||||
|
============================================ */
|
||||||
|
.blog-filters-section {
|
||||||
|
padding: var(--spacing-md) var(--spacing-md);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
position: relative; /* Sin sticky, fluye normal */
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fila superior: Buscador + Filtros principales */
|
||||||
|
.filters-top-row {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buscador con forma redondeada (pill) */
|
||||||
|
.search-wrapper-compact {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 480px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 999px; /* Forma redondeada como los botones */
|
||||||
|
padding: 0.5rem 0.5rem 0.5rem 1.1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper-compact:focus-within {
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
box-shadow: 0 0 0 3px rgba(186, 18, 77, 0.1);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper-compact .search-icon {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper-compact input {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
outline: none;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-wrapper-compact input::placeholder {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-clear {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.4rem;
|
||||||
|
display: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-clear:hover {
|
||||||
|
background-color: var(--bg-surface-elevated);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-clear.visible {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filtros principales (Todos / Destacados) */
|
||||||
|
.filter-group-compact {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover {
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn.active {
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fila inferior: Categorías + Ordenamiento */
|
||||||
|
.filters-bottom-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: var(--spacing-xs);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-categories-compact {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-btn {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.4rem 0.85rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-btn:hover {
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
color: var(--brand-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-btn.active {
|
||||||
|
background-color: var(--brand-teal);
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-secondary-compact {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-select-compact {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 0.45rem 2rem 0.45rem 0.9rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
color: var(--text-primary);
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23170c1d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 0.75rem center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-select-compact:hover {
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Info de resultados */
|
||||||
|
.results-info-compact {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding-top: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-filters-compact {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-filters-compact:hover {
|
||||||
|
background-color: rgba(186, 18, 77, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
TAGS CON MEJOR CONTRASTE (UNIFICADO)
|
||||||
|
============================================ */
|
||||||
|
.category-tag {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.35rem 0.85rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
border: 1.5px solid transparent;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tag:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
ARTÍCULOS DESTACADOS (VERSIÓN SIMÉTRICA)
|
||||||
|
============================================ */
|
||||||
|
.featured-posts {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-posts .section-header {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto var(--spacing-lg);
|
||||||
|
text-align: left;
|
||||||
|
padding-left: var(--spacing-sm);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-posts .section-header::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 60px;
|
||||||
|
background: linear-gradient(180deg, var(--brand-crimson) 0%, var(--brand-teal) 100%);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-posts .section-title {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: clamp(2rem, 4vw, 2.8rem);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
line-height: 1.2;
|
||||||
|
padding-left: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-posts .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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-card {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glow sutil para destacar en hover */
|
||||||
|
.featured-card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
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%
|
||||||
|
);
|
||||||
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||||
|
-webkit-mask-composite: xor;
|
||||||
|
mask-composite: exclude;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-card:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--spacing-sm);
|
||||||
|
left: var(--spacing-sm);
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.35rem 0.8rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
z-index: 2;
|
||||||
|
box-shadow: 0 2px 8px rgba(186, 18, 77, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-image {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 16/10;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-card:hover .featured-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-content {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-title {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-excerpt {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.6;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: var(--spacing-sm);
|
||||||
|
padding-top: var(--spacing-sm);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-time {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-read {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-read:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
color: var(--brand-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
GRID DE ARTÍCULOS
|
||||||
|
============================================ */
|
||||||
|
.blog-grid-section {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.12);
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 16/10;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card:hover .card-image img {
|
||||||
|
transform: scale(1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-category {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--spacing-sm);
|
||||||
|
left: var(--spacing-sm);
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reading-time-mini {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-excerpt {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.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;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link:hover {
|
||||||
|
color: var(--brand-teal);
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estado vacío */
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
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;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
max-width: 500px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-container {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
NEWSLETTER
|
||||||
|
============================================ */
|
||||||
|
.newsletter-section {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.85rem 1.2rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
RESPONSIVE BLOG
|
||||||
|
============================================ */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.blog-grid,
|
||||||
|
.featured-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-card {
|
||||||
|
min-height: 420px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form .btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.blog-card,
|
||||||
|
.featured-card,
|
||||||
|
.filter-btn,
|
||||||
|
.category-btn,
|
||||||
|
.search-wrapper-compact,
|
||||||
|
.category-tag {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
+16
-5
@@ -1,7 +1,15 @@
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
FUENTES DE MARCA
|
FUENTES DE MARCA
|
||||||
============================================ */
|
============================================ */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=WindSong&display=swap');
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Kaleagnetta';
|
||||||
|
src: url(../assets/fonts/Kaleagnetta.woff2);
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
VARIABLES DE TEMA (modo claro por defecto)
|
VARIABLES DE TEMA (modo claro por defecto)
|
||||||
@@ -47,6 +55,7 @@
|
|||||||
--font-body: 'Raleway', sans-serif;
|
--font-body: 'Raleway', sans-serif;
|
||||||
--font-small: 'Jost', sans-serif;
|
--font-small: 'Jost', sans-serif;
|
||||||
--font-signature: 'Windsong', cursive;
|
--font-signature: 'Windsong', cursive;
|
||||||
|
--font-signature2: 'Kaleagnetta', cursive;
|
||||||
|
|
||||||
--font-family-base: var(--font-body);
|
--font-family-base: var(--font-body);
|
||||||
--font-size-base: 16px;
|
--font-size-base: 16px;
|
||||||
@@ -65,6 +74,8 @@
|
|||||||
--bg-surface: #170c1d;
|
--bg-surface: #170c1d;
|
||||||
--bg-surface-elevated: #221728;
|
--bg-surface-elevated: #221728;
|
||||||
--bg-icon-contrast: var(--brand-sage-light);
|
--bg-icon-contrast: var(--brand-sage-light);
|
||||||
|
--brand-teal-contraste: #116c88;
|
||||||
|
--brand-crimson-contraste: #d81a5c;
|
||||||
|
|
||||||
--text-primary: var(--brand-sage-light);
|
--text-primary: var(--brand-sage-light);
|
||||||
--text-secondary: var(--brand-rose-muted);
|
--text-secondary: var(--brand-rose-muted);
|
||||||
@@ -833,9 +844,9 @@ PANTALLA DE BIENVENIDA
|
|||||||
.bienvenida-icono {
|
.bienvenida-icono {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
/*border-radius: 50%;
|
||||||
background-color: var(--bg-surface-elevated);
|
background-color: var(--bg-surface-elevated);
|
||||||
border: 2px solid var(--border);
|
border: 2px solid var(--border);*/
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -843,8 +854,8 @@ PANTALLA DE BIENVENIDA
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icono-diagnostico {
|
.icono-diagnostico {
|
||||||
width: 40px;
|
width: 70px;
|
||||||
height: 40px;
|
height: 70px;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: var(--btn-primary-bg);
|
background-color: var(--btn-primary-bg);
|
||||||
-webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
|
-webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
|
||||||
|
|||||||
+17
-111
@@ -1,107 +1,3 @@
|
|||||||
/* ============================================
|
|
||||||
FUENTES DE MARCA
|
|
||||||
============================================ */
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap');
|
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
VARIABLES DE TEMA (modo claro por defecto)
|
|
||||||
============================================ */
|
|
||||||
:root {
|
|
||||||
--brand-plum: #170c1d;
|
|
||||||
--brand-crimson: #ba124d;
|
|
||||||
--brand-teal: #003f52;
|
|
||||||
--brand-sage-light: #eaf0ee;
|
|
||||||
--brand-rose-muted: #dfbdb9;
|
|
||||||
--bg-dark-web: #110916;
|
|
||||||
--brand-teal-contraste: var(--brand-teal);
|
|
||||||
--brand-crimson-contraste: var(--brand-crimson);
|
|
||||||
|
|
||||||
--bg-base: var(--brand-sage-light);
|
|
||||||
--bg-surface: #ffffff;
|
|
||||||
--bg-surface-elevated: #f5f9f8;
|
|
||||||
--bg-icon-contrast: var(--brand-teal);
|
|
||||||
|
|
||||||
--text-primary: var(--brand-plum);
|
|
||||||
--text-secondary: var(--brand-teal);
|
|
||||||
--text-muted: rgba(34, 23, 40, 0.65);
|
|
||||||
--text-on-accent: #ffffff;
|
|
||||||
|
|
||||||
--btn-primary-bg: var(--brand-crimson);
|
|
||||||
--btn-primary-hover: #9c0f40;
|
|
||||||
--btn-secondary-bg: var(--brand-teal);
|
|
||||||
--btn-secondary-hover: #002c3a;
|
|
||||||
|
|
||||||
--badge-bg: var(--brand-rose-muted);
|
|
||||||
--badge-text: var(--brand-plum);
|
|
||||||
|
|
||||||
--border: rgba(0, 63, 82, 0.12);
|
|
||||||
--shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08);
|
|
||||||
--glow-animation: rgba(186, 18, 77, 0.25);
|
|
||||||
--bg-contraste-teal: rgba(0,63,82, 1);
|
|
||||||
|
|
||||||
--font-title: 'Literata', serif;
|
|
||||||
--font-subtitle: 'Literata', serif;
|
|
||||||
--font-body: 'Raleway', sans-serif;
|
|
||||||
--font-small: 'Jost', sans-serif;
|
|
||||||
--font-signature: 'Windsong', cursive;
|
|
||||||
|
|
||||||
--font-family-base: var(--font-body);
|
|
||||||
--font-size-base: 16px;
|
|
||||||
|
|
||||||
--spacing-xs: 0.5rem;
|
|
||||||
--spacing-sm: 1rem;
|
|
||||||
--spacing-md: 2rem;
|
|
||||||
--spacing-lg: 4rem;
|
|
||||||
--header-height: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--bg-base: var(--bg-dark-web);
|
|
||||||
--bg-surface: #170c1d;
|
|
||||||
--bg-surface-elevated: #221728;
|
|
||||||
--bg-icon-contrast: var(--brand-sage-light);
|
|
||||||
--text-primary: var(--brand-sage-light);
|
|
||||||
--text-secondary: var(--brand-rose-muted);
|
|
||||||
--text-muted: rgba(234, 240, 238, 0.65);
|
|
||||||
--text-on-accent: #ffffff;
|
|
||||||
--btn-primary-bg: var(--brand-crimson);
|
|
||||||
--btn-primary-hover: #d81a5c;
|
|
||||||
--btn-secondary-bg: #0b5066;
|
|
||||||
--btn-secondary-hover: #10637d;
|
|
||||||
--badge-bg: rgba(223, 189, 185, 0.18);
|
|
||||||
--badge-text: var(--brand-rose-muted);
|
|
||||||
--border: rgba(234, 240, 238, 0.12);
|
|
||||||
--shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
|
|
||||||
--glow-animation: rgba(186, 18, 77, 0.45);
|
|
||||||
--bg-contraste-teal: rgba(0,63,82, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================
|
|
||||||
RESET BÁSICO
|
|
||||||
============================================ */
|
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
|
|
||||||
body {
|
|
||||||
font-family: var(--font-family-base);
|
|
||||||
background-color: var(--bg-base);
|
|
||||||
color: var(--text-primary);
|
|
||||||
line-height: 1.5;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
}
|
|
||||||
h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; }
|
|
||||||
h4, h5, h6 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; }
|
|
||||||
small { font-family: var(--font-small); }
|
|
||||||
button, .btn, [class*="btn-"] { font-family: var(--font-small); }
|
|
||||||
.signature, .firma { font-family: var(--font-signature); font-weight: 400; }
|
|
||||||
body.menu-open { overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
|
|
||||||
main { flex: 1; }
|
|
||||||
img, video { max-width: 100%; display: block; }
|
|
||||||
a { color: inherit; text-decoration: none; }
|
|
||||||
ul { list-style: none; }
|
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
HEADER, MENÚ Y FOOTER (Base)
|
HEADER, MENÚ Y FOOTER (Base)
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -344,6 +240,7 @@ ul { list-style: none; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
.caso-card {
|
.caso-card {
|
||||||
|
position: relative;
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
border: 1.5px solid var(--border);
|
border: 1.5px solid var(--border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
@@ -351,9 +248,12 @@ ul { list-style: none; }
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
min-height: 320px;
|
min-height: 320px;
|
||||||
position: relative;
|
overflow: hidden; /* recorta la barra en las esquinas */
|
||||||
|
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
||||||
|
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
|
||||||
|
border-color 0.3s ease;
|
||||||
|
will-change: transform; /* opcional, para suavizar en hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
.caso-card::before {
|
.caso-card::before {
|
||||||
@@ -361,12 +261,18 @@ ul { list-style: none; }
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
right: 0;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson));
|
background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson));
|
||||||
border-radius: 16px 16px 0 0;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
|
pointer-events: none; /* no interfiere con el hover */
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-card > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1; /* contenido por encima de la barra */
|
||||||
}
|
}
|
||||||
|
|
||||||
.caso-card:hover {
|
.caso-card:hover {
|
||||||
@@ -614,7 +520,7 @@ ul { list-style: none; }
|
|||||||
.transparencia-titulo {
|
.transparencia-titulo {
|
||||||
font-family: var(--font-body);
|
font-family: var(--font-body);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
@@ -625,7 +531,7 @@ ul { list-style: none; }
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: clamp(1.5rem, 3vw, 1rem);
|
font-size: clamp(1.5rem, 3vw, 1rem);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--brand-teal);
|
color: var(--brand-teal-contraste);
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
@@ -736,7 +642,7 @@ ul { list-style: none; }
|
|||||||
|
|
||||||
/* Firma / Nombre en tipografía script */
|
/* Firma / Nombre en tipografía script */
|
||||||
.equipo-firma {
|
.equipo-firma {
|
||||||
font-family: var(--font-signature);
|
font-family: var(--font-signature2);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: clamp(2.2rem, 4vw, 3rem);
|
font-size: clamp(2.2rem, 4vw, 3rem);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
|||||||
+6
-6
@@ -70,7 +70,7 @@
|
|||||||
PLANES - SELECTOR (TABS + PILLS)
|
PLANES - SELECTOR (TABS + PILLS)
|
||||||
============================================ */
|
============================================ */
|
||||||
.planes-selector-section {
|
.planes-selector-section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-sm) var(--spacing-xs);
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
@@ -188,7 +188,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-sm);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
animation: slideInPanel 0.5s ease-out;
|
animation: slideInPanel 0.5s ease-out;
|
||||||
@@ -212,7 +212,7 @@
|
|||||||
/* Header del panel */
|
/* Header del panel */
|
||||||
.panel-header {
|
.panel-header {
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
padding-bottom: var(--spacing-sm);
|
padding-bottom: var(--spacing-xs);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -255,7 +255,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dimension-card {
|
.dimension-card {
|
||||||
@@ -331,7 +331,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dimension-lista .fa-check {
|
.dimension-lista .fa-check {
|
||||||
color: var(--brand-teal);
|
color: var(--btn-secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dimension-lista .fa-times {
|
.dimension-lista .fa-times {
|
||||||
@@ -384,7 +384,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.precio-monto {
|
.precio-monto {
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-family: var(--font-title);
|
font-family: var(--font-title);
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-14
@@ -194,9 +194,9 @@
|
|||||||
SERVICIOS - PANEL DE CONTENIDO
|
SERVICIOS - PANEL DE CONTENIDO
|
||||||
============================================ */
|
============================================ */
|
||||||
.servicios-panel-section {
|
.servicios-panel-section {
|
||||||
padding: var(--spacing-lg) var(--spacing-md);
|
padding: var(--spacing-md) var(--spacing-xs);
|
||||||
background-color: var(--bg-base);
|
background-color: var(--bg-base);
|
||||||
min-height: 600px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicios-panel-container {
|
.servicios-panel-container {
|
||||||
@@ -209,7 +209,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: var(--spacing-lg);
|
padding: var(--spacing-md);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
animation: slideInPanel 0.5s ease-out;
|
animation: slideInPanel 0.5s ease-out;
|
||||||
@@ -232,8 +232,8 @@
|
|||||||
/* icono */
|
/* icono */
|
||||||
.panel-icono-decorativo {
|
.panel-icono-decorativo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--spacing-lg);
|
top: var(--spacing-md);
|
||||||
right: var(--spacing-lg);
|
right: var(--spacing-md);
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 160px;
|
height: 160px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -303,7 +303,7 @@
|
|||||||
/* Header del panel */
|
/* Header del panel */
|
||||||
.panel-header {
|
.panel-header {
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-md);
|
||||||
padding-bottom: var(--spacing-md);
|
padding-bottom: var(--spacing-xs);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -318,14 +318,14 @@
|
|||||||
background-color: var(--bg-contraste-teal);
|
background-color: var(--bg-contraste-teal);
|
||||||
color: var(--text-on-accent);
|
color: var(--text-on-accent);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-titulo {
|
.panel-titulo {
|
||||||
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
|
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-md);
|
||||||
line-height: 1.2;
|
line-height: 1;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: fadeInUp 0.6s ease-out 0.1s forwards;
|
animation: fadeInUp 0.6s ease-out 0.1s forwards;
|
||||||
}
|
}
|
||||||
@@ -334,7 +334,7 @@
|
|||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
line-height: 1.6;
|
line-height: 1.4;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: fadeInUp 0.6s ease-out 0.2s forwards;
|
animation: fadeInUp 0.6s ease-out 0.2s forwards;
|
||||||
}
|
}
|
||||||
@@ -343,8 +343,8 @@
|
|||||||
.panel-body {
|
.panel-body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: var(--spacing-md);
|
gap: var(--spacing-xs);
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-columna {
|
.panel-columna {
|
||||||
@@ -400,10 +400,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: var(--spacing-md);
|
padding-top: var(--spacing-xs);
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-xs);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation: fadeInUp 0.6s ease-out 0.5s forwards;
|
animation: fadeInUp 0.6s ease-out 0.5s forwards;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user