Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 fanfuso
|
c193e4acd9 | ||
 ppugliese
|
1e36901fe3 |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
+82
-50
@@ -1,38 +1,57 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="es" data-theme="light">
|
||||||
<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">
|
||||||
<link rel="stylesheet" href="style/main.css">
|
<meta name="description" content="Enlaces oficiales de Estudio Creativo. Transformando ideas en experiencias visuales extraordinarias.">
|
||||||
<title>Estudio Creativo - Biolink</title>
|
<title>Estudio Creativo - Enlaces</title>
|
||||||
|
|
||||||
<link rel="icon" href="images/icons/favicon.png" type="image/x-icon">
|
<link rel="icon" href="images/icons/favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
|
<!-- Fuentes sincronizadas con main.css -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="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" rel="stylesheet">
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
<link rel="stylesheet" href="style/biolink.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="body">
|
<body class="body biolink-page">
|
||||||
<div class="container">
|
|
||||||
<div class="profile">
|
<!-- Botón flotante de cambio de tema (opcional pero recomendado) -->
|
||||||
<img src="images/logos/logo-color.png" alt="Estudio Creativo" class="profile-image">
|
<button class="theme-toggle biolink-theme-toggle" id="theme-toggle" aria-label="Cambiar tema">
|
||||||
<h1 class="profile-name">Estudio Creativo</h1>
|
<svg class="theme-icon icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||||
|
<svg class="theme-icon icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||||
</div>
|
</button>
|
||||||
<div>
|
|
||||||
<p class="profile-bio">Transformando ideas en experiencias visuales extraordinarias</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<main class="biolink-container">
|
||||||
|
<!-- Perfil -->
|
||||||
|
<div class="profile">
|
||||||
|
<div class="profile-image-wrapper">
|
||||||
|
<!-- Logo para tema claro -->
|
||||||
|
<img src="assets/logos/logo_ciruela.png" alt="Logo Estudio Creativo" class="biolink-logo light">
|
||||||
|
<!-- Logo para tema oscuro -->
|
||||||
|
<img src="assets/logos/logo_frio.png" alt="Logo Estudio Creativo" class="biolink-logo dark">
|
||||||
|
</div>
|
||||||
|
<h1 class="profile-name">Estudio Creativo</h1>
|
||||||
|
<p class="profile-bio">Transformando ideas en experiencias visuales extraordinarias.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enlaces Principales -->
|
||||||
<div class="links">
|
<div class="links">
|
||||||
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank">
|
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="link-icon icon-biolink">
|
<div class="link-icon">
|
||||||
<i class="fas fa-globe"></i>
|
<i class="fas fa-globe"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="link-text">Sitio Web</div>
|
<div class="link-text">Sitio Web Oficial</div>
|
||||||
<div class="link-arrow">
|
<div class="link-arrow">
|
||||||
<i class="fas fa-chevron-right"></i>
|
<i class="fas fa-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank">
|
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="link-icon icon-biolink">
|
<div class="link-icon">
|
||||||
<i class="fas fa-crown"></i>
|
<i class="fas fa-crown"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="link-text">Branding & Identidad</div>
|
<div class="link-text">Branding & Identidad</div>
|
||||||
@@ -41,8 +60,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank">
|
<a href="https://www.amoryroma.com.ar" class="link-button" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="link-icon icon-biolink">
|
<div class="link-icon">
|
||||||
<i class="fas fa-list-ol"></i>
|
<i class="fas fa-list-ol"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="link-text">Planes y Servicios</div>
|
<div class="link-text">Planes y Servicios</div>
|
||||||
@@ -51,45 +70,58 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!--<a href="#social" class="link-button">
|
<a href="https://wa.me/543886118304" class="link-button-wa" target="_blank" rel="noopener noreferrer">
|
||||||
<div class="link-icon icon-biolink">
|
<div class="link-icon">
|
||||||
<i class="fas fa-hashtag"></i>
|
|
||||||
</div>
|
|
||||||
<div class="link-text">Novedades</div>
|
|
||||||
<div class="link-arrow">
|
|
||||||
<i class="fas fa-chevron-right"></i>
|
|
||||||
</div>
|
|
||||||
</a>-->
|
|
||||||
|
|
||||||
<a href="https://wa.me/5493885777470" class="link-button" target="_blank">
|
|
||||||
<div class="link-icon icon-biolink">
|
|
||||||
<i class="fa-brands fa-whatsapp"></i>
|
<i class="fa-brands fa-whatsapp"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="link-text">Whatsapp</div>
|
<div class="link-text">Hablemos por WhatsApp</div>
|
||||||
<div class="link-arrow">
|
<div class="link-arrow">
|
||||||
<i class="fas fa-chevron-right"></i>
|
<i class="fas fa-chevron-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="social-links">
|
<!-- Redes Sociales -->
|
||||||
<a href="https://instagram.com/amoryroma.creativo" class="social-link" target="_blank">
|
<div class="social-links">
|
||||||
<i class="fab fa-instagram"></i>
|
<a href="https://instagram.com/amoryroma.creativo" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
|
||||||
</a>
|
<i class="fab fa-instagram"></i>
|
||||||
<a href="/cdn-cgi/l/email-protection#45262a2b312426312a0524282a373c372a28246b262a286b2437" class="social-link">
|
</a>
|
||||||
<i class="fas fa-envelope"></i>
|
<a href="https://web.facebook.com/amoryroma.creativo/" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
|
||||||
</a>
|
<i class="fab fa-facebook-f"></i>
|
||||||
<a href="tel:+5493885777470" class="social-link">
|
</a>
|
||||||
<i class="fas fa-phone"></i>
|
<a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
|
||||||
</a>
|
<i class="fab fa-linkedin-in"></i>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
<a href="mailto:contacto@amoryroma.com.ar" class="social-link" aria-label="Correo electrónico">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
<footer class="footerbio">
|
<footer class="footerbio">
|
||||||
<img src="images/logos/coor.png" alt="Amor & Roma" class="footerbio-logo">
|
<div class="footer-logo-wrapper">
|
||||||
<div>© 2025 Estudio Creativo. Todos los derechos reservados.</div>
|
<img src="assets/logos/logo_ciruela.png" alt="Logo Estudio Creativo" class="footer-biolink-logo light">
|
||||||
|
<img src="assets/logos/logo_frio.png" alt="Logo Estudio Creativo" class="footer-biolink-logo dark">
|
||||||
|
</div>
|
||||||
|
<div class="footerbio-text">© 2026 Amor&Roma. Todos los derechos reservados.</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Script mínimo para el toggle de tema (si no lo tienes ya en un archivo externo) -->
|
||||||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
|
<script>
|
||||||
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
|
const html = document.documentElement;
|
||||||
|
|
||||||
|
// Cargar tema guardado
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
|
html.setAttribute('data-theme', savedTheme);
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const currentTheme = html.getAttribute('data-theme');
|
||||||
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||||
|
html.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+38
-17
@@ -1,38 +1,59 @@
|
|||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
|
|
||||||
|
<!-- SECCIÓN 1: Contenido Principal (Columnas, enlaces y CTAs) -->
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<div class="footer-col" id="footer-brand">
|
<div class="footer-col" id="footer-brand">
|
||||||
<!-- Marca / logo -->
|
<a href="inicio.html" class="logo">
|
||||||
<span>[Logo]</span>
|
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
|
||||||
<p>[Descripción breve]</p>
|
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
|
||||||
|
</a>
|
||||||
|
<p><br>Impulsamos crecimiento, con estrategia, datos y ejecución.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-col" id="footer-links">
|
<div class="footer-col" id="footer-links">
|
||||||
<h4>Enlaces</h4>
|
<h4>Explorar</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="inicio.html">Inicio</a></li>
|
<li><a href="inicio.html">Inicio</a></li>
|
||||||
<li><a href="servicios.html">Servicios</a></li>
|
<li><a href="servicios.html">Servicios</a></li>
|
||||||
<li><a href="planes.html">Planes</a></li>
|
<li><a href="planes.html">Planes</a></li>
|
||||||
<li><a href="portfolio.html">Portfolio</a></li>
|
<li><a href="portfolio.html">Portfolio</a></li>
|
||||||
<li><a href="nosotros.html">Nosotros</a></li>
|
|
||||||
<li><a href="blog.html">Blog</a></li>
|
<li><a href="blog.html">Blog</a></li>
|
||||||
<li><a href="contacto.html">Contacto</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-col" id="footer-contact">
|
<div class="footer-col" id="footer-contact">
|
||||||
<h4>Contacto</h4>
|
<h4>Soluciones</h4>
|
||||||
<p>[Teléfono]</p>
|
|
||||||
<p>[Email]</p>
|
|
||||||
<p>[Dirección]</p>
|
|
||||||
</div>
|
|
||||||
<div class="footer-col" id="footer-social">
|
|
||||||
<h4>Redes</h4>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#" target="_blank" rel="noopener">[Red 1]</a></li>
|
<li><a href="servicios.html">Branding</a></li>
|
||||||
<li><a href="#" target="_blank" rel="noopener">[Red 2]</a></li>
|
<li><a href="servicios.html">Redes Sociales</a></li>
|
||||||
<li><a href="#" target="_blank" rel="noopener">[Red 3]</a></li>
|
<li><a href="servicios.html">Diseño Web</a></li>
|
||||||
|
<li><a href="servicios.html">Automatización</a></li>
|
||||||
|
<li><a href="servicios.html">Paid Media</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-col" id="footer-social">
|
||||||
|
<h4></h4>
|
||||||
|
<div class="menu-buttons">
|
||||||
|
<a href="contacto.html" class="btn-menu btn-menu-primary">¿Tenés un proyecto en mente?</a>
|
||||||
|
<a href="inicio.html#diagnostico" class="btn-menu btn-menu-secondary">Empezar diagnóstico</a>
|
||||||
|
<div class="menu-social">
|
||||||
|
<a href="https://www.instagram.com/amoryroma.creativo" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i> Instagram</a>
|
||||||
|
<a href="https://web.facebook.com/amoryroma.creativo/" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i> Facebook</a>
|
||||||
|
<a href="https://www.linkedin.com/company/amoryroma-estudiocreativo/about/" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- SECCIÓN 2: Franja exclusiva para los arcos (Sin repetición, centrados y sin superposición) -->
|
||||||
|
<div class="footer-decor-section" aria-hidden="true">
|
||||||
|
<div class="footer-arches-graphic"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SECCIÓN 3: Copyright y Avisos Legales -->
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<p>© <span id="current-year"></span> [Nombre de la agencia]. Todos los derechos reservados.</p>
|
<p>© <span id="current-year"></span> Amor & Roma. Todos los derechos reservados.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
+9
-7
@@ -33,13 +33,13 @@
|
|||||||
<div class="menu-content">
|
<div class="menu-content">
|
||||||
<!-- Columna 1: Inicio -->
|
<!-- Columna 1: Inicio -->
|
||||||
<div class="menu-column">
|
<div class="menu-column">
|
||||||
<h3>Inicio</h3>
|
<h3>Amor&Roma</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="inicio.html#hero">Inicio</a></li>
|
<li><a href="inicio.html">Comencemos</a></li>
|
||||||
<li><a href="inicio.html#servicios">Servicios</a></li>
|
<li><a href="inicio.html#servicios">Qué hacemos?</a></li>
|
||||||
<li><a href="inicio.html#diagnostico">Diagnóstico</a></li>
|
<li><a href="inicio.html#diagnostico">Diagnóstico</a></li>
|
||||||
<li><a href="inicio.html#planes-destacados">Destacados</a></li>
|
<li><a href="inicio.html#planes-destacados">Destacados</a></li>
|
||||||
<li><a href="inicio.html#sportfolio">Desafios</a></li>
|
<li><a href="inicio.html#portfolio">Desafios</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -59,16 +59,16 @@
|
|||||||
|
|
||||||
<!-- Columna 3: Contacto y botones -->
|
<!-- Columna 3: Contacto y botones -->
|
||||||
<div class="menu-column">
|
<div class="menu-column">
|
||||||
<h3>Contacto</h3>
|
<h3>Hablemos</h3>
|
||||||
<div class="menu-contact-info">
|
<div class="menu-contact-info">
|
||||||
<p class="contact-item">
|
<p class="contact-item">
|
||||||
<span class="contact-icon icon-email" aria-hidden="true"></span>
|
<span class="contact-icon icon-email" aria-hidden="true"></span>
|
||||||
<span>info@amoryroma.com.ar</span>
|
<span> <a href="mailto:contacto@amoryroma.com.ar">Envianos un mail</a> </span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="contact-item">
|
<p class="contact-item">
|
||||||
<span class="contact-icon icon-phone" aria-hidden="true"></span>
|
<span class="contact-icon icon-phone" aria-hidden="true"></span>
|
||||||
<span>+54 388 611-8304</span>
|
<span><a href="https://wa.me/543886118304">Whatsapp</a></span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="menu-social">
|
<div class="menu-social">
|
||||||
@@ -85,8 +85,10 @@
|
|||||||
|
|
||||||
<!-- Logo de marca integrado en el menú -->
|
<!-- Logo de marca integrado en el menú -->
|
||||||
<div class="menu-brand">
|
<div class="menu-brand">
|
||||||
|
<a href="inicio.html" class="logo">
|
||||||
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
|
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
|
||||||
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
|
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+3
-3
@@ -29,7 +29,7 @@
|
|||||||
<div class="servicios-container">
|
<div class="servicios-container">
|
||||||
<!-- Columna Izquierda: Texto introductorio -->
|
<!-- Columna Izquierda: Texto introductorio -->
|
||||||
<div class="servicios-intro">
|
<div class="servicios-intro">
|
||||||
<h2 class="servicios-title">¿Qué necesita hoy tu negocio?</h2>
|
<h2 class="servicios-title">Soluciones digitales diseñadas para hacer crecer tu negocio</h2>
|
||||||
<p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
|
<p class="servicios-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
|
||||||
<a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
|
<a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,8 +132,8 @@
|
|||||||
<!-- Sección 3: Diagnóstico -->
|
<!-- Sección 3: Diagnóstico -->
|
||||||
<section id="diagnostico" class="diagnostico-section">
|
<section id="diagnostico" class="diagnostico-section">
|
||||||
<div class="diagnostico-header">
|
<div class="diagnostico-header">
|
||||||
<h2 class="diagnostico-title">¿Qué necesita hoy tu negocio?</h2>
|
<h2 class="diagnostico-title">¿Cuál es el siguiente paso estratégico para tu negocio?</h2>
|
||||||
<p class="diagnostico-subtitle">Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.</p>
|
<p class="diagnostico-subtitle">Un recorrido de orientación diseñado para entender el momento actual de tu marca,<br> y definir con precisión quirúrgica la solución que necesitas.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="diagnostico-card">
|
<div class="diagnostico-card">
|
||||||
|
|||||||
@@ -0,0 +1,74 @@
|
|||||||
|
/* ============================================
|
||||||
|
SELECTOR DE SERVICIOS
|
||||||
|
============================================ */
|
||||||
|
function initServiciosSelector() {
|
||||||
|
const tabs = document.querySelectorAll('.servicio-tab');
|
||||||
|
const pills = document.querySelectorAll('.servicio-pill');
|
||||||
|
const panels = document.querySelectorAll('.servicio-panel');
|
||||||
|
|
||||||
|
if (tabs.length === 0 || panels.length === 0) return;
|
||||||
|
|
||||||
|
function activarServicio(servicioId) {
|
||||||
|
// Desactivar todos los tabs y pills
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
tab.setAttribute('aria-selected', 'false');
|
||||||
|
});
|
||||||
|
pills.forEach(pill => {
|
||||||
|
pill.classList.remove('active');
|
||||||
|
pill.setAttribute('aria-selected', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Desactivar todos los panels
|
||||||
|
panels.forEach(panel => panel.classList.remove('active'));
|
||||||
|
|
||||||
|
// Activar el tab y pill correspondientes
|
||||||
|
const tabActivo = document.querySelector(`.servicio-tab[data-servicio="${servicioId}"]`);
|
||||||
|
const pillActivo = document.querySelector(`.servicio-pill[data-servicio="${servicioId}"]`);
|
||||||
|
const panelActivo = document.getElementById(`panel-${servicioId}`);
|
||||||
|
|
||||||
|
if (tabActivo) {
|
||||||
|
tabActivo.classList.add('active');
|
||||||
|
tabActivo.setAttribute('aria-selected', 'true');
|
||||||
|
}
|
||||||
|
if (pillActivo) {
|
||||||
|
pillActivo.classList.add('active');
|
||||||
|
pillActivo.setAttribute('aria-selected', 'true');
|
||||||
|
}
|
||||||
|
if (panelActivo) {
|
||||||
|
panelActivo.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll suave al panel
|
||||||
|
if (panelActivo) {
|
||||||
|
panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners para tabs
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
const servicioId = tab.dataset.servicio;
|
||||||
|
activarServicio(servicioId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Event listeners para pills
|
||||||
|
pills.forEach(pill => {
|
||||||
|
pill.addEventListener('click', () => {
|
||||||
|
const servicioId = pill.dataset.servicio;
|
||||||
|
activarServicio(servicioId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Soporte para hash en URL (ej: servicios.html#branding)
|
||||||
|
const hash = window.location.hash.replace('#', '');
|
||||||
|
if (hash && document.getElementById(`panel-${hash}`)) {
|
||||||
|
activarServicio(hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inicializar cuando el DOM esté listo
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initServiciosSelector();
|
||||||
|
});
|
||||||
+303
-11
@@ -3,27 +3,319 @@
|
|||||||
<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="Servicios de Amor y Roma: gestión de redes, branding, desarrollo web, automatizaciones y paid media.">
|
||||||
<title>Servicios - [Nombre de la agencia]</title>
|
<title>Servicios - Amor y Roma</title>
|
||||||
<link rel="stylesheet" href="style/main.css">
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
<link rel="stylesheet" href="style/servicios.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="menu-container"></div>
|
<div id="menu-container"></div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section id="servicios-section-1"><h2>Sección 1</h2><p>Contenido pendiente de definir.</p></section>
|
<!-- Sección 1: Hero -->
|
||||||
<section id="servicios-section-2"><h2>Sección 2</h2><p>Contenido pendiente de definir.</p></section>
|
<section id="servicios-hero" class="servicios-hero">
|
||||||
<section id="servicios-section-3"><h2>Sección 3</h2><p>Contenido pendiente de definir.</p></section>
|
<div class="servicios-hero-content">
|
||||||
<section id="servicios-section-4"><h2>Sección 4</h2><p>Contenido pendiente de definir.</p></section>
|
<span class="servicios-hero-tag">Nuestros servicios</span>
|
||||||
<section id="servicios-section-5"><h2>Sección 5</h2><p>Contenido pendiente de definir.</p></section>
|
<h1 class="servicios-hero-title">Soluciones a medida para cada etapa de tu marca</h1>
|
||||||
<section id="servicios-section-6"><h2>Sección 6</h2><p>Contenido pendiente de definir.</p></section>
|
<p class="servicios-hero-subtitle">Combinamos estrategia, diseño y tecnología para construir marcas con esencia y estructura.</p>
|
||||||
<section id="servicios-section-7"><h2>Sección 7</h2><p>Contenido pendiente de definir.</p></section>
|
<a href="#servicios-selector" class="btn btn-primary servicios-hero-cta">Explorar servicios</a>
|
||||||
<section id="servicios-section-8"><h2>Sección 8</h2><p>Contenido pendiente de definir.</p></section>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección 2: Selector de servicios -->
|
||||||
|
<section id="servicios-selector" class="servicios-selector-section">
|
||||||
|
<div class="servicios-selector-container">
|
||||||
|
<!-- Tabs desktop -->
|
||||||
|
<div class="servicios-tabs" role="tablist" aria-label="Selector de servicios">
|
||||||
|
<button class="servicio-tab active" role="tab" aria-selected="true" aria-controls="panel-redes" data-servicio="redes">
|
||||||
|
<span class="tab-icon icon-redes" aria-hidden="true"></span>
|
||||||
|
<span class="tab-label">Gestión de Redes</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-branding" data-servicio="branding">
|
||||||
|
<span class="tab-icon icon-branding" aria-hidden="true"></span>
|
||||||
|
<span class="tab-label">Branding</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-web" data-servicio="web">
|
||||||
|
<span class="tab-icon icon-web" aria-hidden="true"></span>
|
||||||
|
<span class="tab-label">Desarrollo Web</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-automatizaciones" data-servicio="automatizaciones">
|
||||||
|
<span class="tab-icon icon-automatizaciones" aria-hidden="true"></span>
|
||||||
|
<span class="tab-label">Automatizaciones</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-tab" role="tab" aria-selected="false" aria-controls="panel-paid" data-servicio="paid">
|
||||||
|
<span class="tab-icon icon-paid" aria-hidden="true"></span>
|
||||||
|
<span class="tab-label">Paid Media</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pills mobile (scroll horizontal) -->
|
||||||
|
<div class="servicios-pills" role="tablist" aria-label="Selector de servicios mobile">
|
||||||
|
<button class="servicio-pill active" role="tab" aria-selected="true" aria-controls="panel-redes" data-servicio="redes">
|
||||||
|
<span class="pill-icon icon-redes" aria-hidden="true"></span>
|
||||||
|
<span>Redes</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-branding" data-servicio="branding">
|
||||||
|
<span class="pill-icon icon-branding" aria-hidden="true"></span>
|
||||||
|
<span>Branding</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-web" data-servicio="web">
|
||||||
|
<span class="pill-icon icon-web" aria-hidden="true"></span>
|
||||||
|
<span>Web</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-automatizaciones" data-servicio="automatizaciones">
|
||||||
|
<span class="pill-icon icon-automatizaciones" aria-hidden="true"></span>
|
||||||
|
<span>Automatizaciones</span>
|
||||||
|
</button>
|
||||||
|
<button class="servicio-pill" role="tab" aria-selected="false" aria-controls="panel-paid" data-servicio="paid">
|
||||||
|
<span class="pill-icon icon-paid" aria-hidden="true"></span>
|
||||||
|
<span>Paid Media</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección 3: Panel de contenido dinámico -->
|
||||||
|
<section id="servicios-panel" class="servicios-panel-section">
|
||||||
|
<div class="servicios-panel-container">
|
||||||
|
|
||||||
|
<!-- Panel: Gestión de Redes Sociales -->
|
||||||
|
<div class="servicio-panel active" id="panel-redes" role="tabpanel" data-servicio="redes">
|
||||||
|
<div class="panel-icono-decorativo">
|
||||||
|
<span class="decorativo-icon icon-redes-deco" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-categoria">Servicio Recurrente</span>
|
||||||
|
<h2 class="panel-titulo">Gestión de Redes Sociales</h2>
|
||||||
|
<p class="panel-subtitulo">Contenido, estrategia y comunidad para marcas que quieren crecer con presencia digital constante.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Objetivo</h3>
|
||||||
|
<p class="panel-texto">Construir una comunidad activa y fiel alrededor de tu marca mediante contenido de valor, storytelling visual y dirección creativa personalizada.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Alcance</h3>
|
||||||
|
<ul class="panel-lista">
|
||||||
|
<li>Grilla temática mensual personalizada</li>
|
||||||
|
<li>Diseño gráfico y dirección de arte</li>
|
||||||
|
<li>Copywriting persuasivo</li>
|
||||||
|
<li>Producción de Reels y TikToks</li>
|
||||||
|
<li>Moderación de comunidad</li>
|
||||||
|
<li>Reportes mensuales con métricas clave</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<div class="panel-precio">
|
||||||
|
<span class="precio-label">Desde</span>
|
||||||
|
<span class="precio-valor">$250.000<span class="precio-periodo">/mes</span></span>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html?servicio=redes" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel: Branding -->
|
||||||
|
<div class="servicio-panel" id="panel-branding" role="tabpanel" data-servicio="branding">
|
||||||
|
<div class="panel-icono-decorativo">
|
||||||
|
<span class="decorativo-icon icon-branding-deco" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-categoria">Proyecto One-Off</span>
|
||||||
|
<h2 class="panel-titulo">Branding & Identidad de Marca</h2>
|
||||||
|
<p class="panel-subtitulo">Construimos la esencia visual y estratégica de tu marca desde cero o mediante un rediseño integral.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Objetivo</h3>
|
||||||
|
<p class="panel-texto">Definir el ADN de tu marca: su personalidad, arquetipo, voz y universo visual para que comunique con coherencia en todos los puntos de contacto.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Entregables</h3>
|
||||||
|
<ul class="panel-lista">
|
||||||
|
<li>Diagnóstico de marca y propuesta de valor</li>
|
||||||
|
<li>Diseño de logotipo, isotipo y variantes</li>
|
||||||
|
<li>Paleta cromática y sistema tipográfico</li>
|
||||||
|
<li>Personaje/mascota de marca (opcional)</li>
|
||||||
|
<li>Manual de Identidad Visual completo</li>
|
||||||
|
<li>Kit de plantillas para redes y papelería</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<div class="panel-precio">
|
||||||
|
<span class="precio-label">Desde</span>
|
||||||
|
<span class="precio-valor">$450.000<span class="precio-periodo">/proyecto</span></span>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html?servicio=branding" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel: Desarrollo Web -->
|
||||||
|
<div class="servicio-panel" id="panel-web" role="tabpanel" data-servicio="web">
|
||||||
|
<div class="panel-icono-decorativo">
|
||||||
|
<span class="decorativo-icon icon-web-deco" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-categoria">Proyecto One-Off</span>
|
||||||
|
<h2 class="panel-titulo">Desarrollo Web a Medida</h2>
|
||||||
|
<p class="panel-subtitulo">Sitios rápidos, seguros y diseñados específicamente para tu embudo de ventas. Cero plantillas prefabricadas.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Objetivo</h3>
|
||||||
|
<p class="panel-texto">Construir activos digitales propios que transmitan credibilidad, conviertan visitantes en clientes y escalen con tu negocio.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Modalidades</h3>
|
||||||
|
<ul class="panel-lista">
|
||||||
|
<li>Landing Page de alta conversión</li>
|
||||||
|
<li>Sitio Web Institucional / Corporativo</li>
|
||||||
|
<li>Catálogo Digital / E-commerce</li>
|
||||||
|
<li>Optimización SEO técnico on-page</li>
|
||||||
|
<li>Integración con Analytics y Meta Pixel</li>
|
||||||
|
<li>WhatsApp API y canales de contacto</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<div class="panel-precio">
|
||||||
|
<span class="precio-label">Desde</span>
|
||||||
|
<span class="precio-valor">$380.000<span class="precio-periodo">/proyecto</span></span>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html?servicio=web" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel: Automatizaciones -->
|
||||||
|
<div class="servicio-panel" id="panel-automatizaciones" role="tabpanel" data-servicio="automatizaciones">
|
||||||
|
<div class="panel-icono-decorativo">
|
||||||
|
<span class="decorativo-icon icon-automatizaciones-deco" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-categoria">Proyecto One-Off</span>
|
||||||
|
<h2 class="panel-titulo">Automatizaciones de Conversación</h2>
|
||||||
|
<p class="panel-subtitulo">Convertí el tráfico orgánico en prospectos calificados sin demandar tiempo manual de tu equipo.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Objetivo</h3>
|
||||||
|
<p class="panel-texto">Implementar flujos inteligentes que respondan, cualifiquen y deriven leads automáticamente en Instagram, Facebook y WhatsApp.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Alcance</h3>
|
||||||
|
<ul class="panel-lista">
|
||||||
|
<li>Flujos de respuesta por palabras clave</li>
|
||||||
|
<li>Rutas de cualificación de prospectos</li>
|
||||||
|
<li>Recolección automática de datos (nombre, mail, teléfono)</li>
|
||||||
|
<li>Notificaciones al equipo comercial</li>
|
||||||
|
<li>Integración con CRM o base de datos</li>
|
||||||
|
<li>Automatizaciones multi-paso avanzadas</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<div class="panel-precio">
|
||||||
|
<span class="precio-label">Desde</span>
|
||||||
|
<span class="precio-valor">$180.000<span class="precio-periodo">/proyecto</span></span>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html?servicio=automatizaciones" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panel: Paid Media -->
|
||||||
|
<div class="servicio-panel" id="panel-paid" role="tabpanel" data-servicio="paid">
|
||||||
|
<div class="panel-icono-decorativo">
|
||||||
|
<span class="decorativo-icon icon-paid-deco" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-categoria">Proyecto Especial</span>
|
||||||
|
<h2 class="panel-titulo">Trafficker & Paid Media</h2>
|
||||||
|
<p class="panel-subtitulo">Amplificación estratégica de mensajes para campañas, lanzamientos o temporadas comerciales específicas.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Objetivo</h3>
|
||||||
|
<p class="panel-texto">Maximizar el retorno de tu inversión publicitaria mediante campañas segmentadas, creatividades de alto impacto y optimización diaria.</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-columna">
|
||||||
|
<h3 class="panel-subtitulo-seccion">Alcance</h3>
|
||||||
|
<ul class="panel-lista">
|
||||||
|
<li>Auditoría técnica de Business Manager</li>
|
||||||
|
<li>Configuración de eventos y públicos personalizados</li>
|
||||||
|
<li>Creación y testeo A/B de creatividades</li>
|
||||||
|
<li>Campañas en Meta Ads y Google Ads</li>
|
||||||
|
<li>Monitoreo y optimización diaria de CPA/CPL</li>
|
||||||
|
<li>Reportes de rendimiento y recomendaciones</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
<div class="panel-precio">
|
||||||
|
<span class="precio-label">Desde</span>
|
||||||
|
<span class="precio-valor">$220.000<span class="precio-periodo">/mes</span></span>
|
||||||
|
</div>
|
||||||
|
<a href="contacto.html?servicio=paid" class="btn btn-secondary panel-cta">Cotizar este servicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección 4: Separador visual -->
|
||||||
|
<section class="servicios-separador"></section>
|
||||||
|
|
||||||
|
<!-- Sección 5: Casos de éxito -->
|
||||||
|
<section class="servicios-casos">
|
||||||
|
<div class="servicios-casos-container">
|
||||||
|
<div class="casos-header">
|
||||||
|
<h2 class="casos-titulo">Casos que validan nuestro método</h2>
|
||||||
|
<p class="casos-subtitulo">Cuatro arquetipos de solución que hemos construido con clientes reales.</p>
|
||||||
|
</div>
|
||||||
|
<div class="casos-grid">
|
||||||
|
<article class="caso-card">
|
||||||
|
<span class="caso-tag">Identidad Integral</span>
|
||||||
|
<h3 class="caso-nombre">Construcción de universo de marca</h3>
|
||||||
|
<p class="caso-descripcion">Branding completo, personaje propio y administración continua de redes con pauta publicitaria.</p>
|
||||||
|
</article>
|
||||||
|
<article class="caso-card">
|
||||||
|
<span class="caso-tag">Infraestructura B2B</span>
|
||||||
|
<h3 class="caso-nombre">Credibilidad institucional</h3>
|
||||||
|
<p class="caso-descripcion">Sitio web corporativo a medida para consultora de seguridad, enfocado en transmitir seriedad y confianza.</p>
|
||||||
|
</article>
|
||||||
|
<article class="caso-card">
|
||||||
|
<span class="caso-tag">Ecosistema Digital</span>
|
||||||
|
<h3 class="caso-nombre">Solución integral híbrida</h3>
|
||||||
|
<p class="caso-descripcion">Branding + Web a medida + Redes sociales. Nuestro servicio insígnia para empresas de tecnología.</p>
|
||||||
|
</article>
|
||||||
|
<article class="caso-card">
|
||||||
|
<span class="caso-tag">Profesionalización</span>
|
||||||
|
<h3 class="caso-nombre">Posicionamiento de servicios</h3>
|
||||||
|
<p class="caso-descripcion">Web para captar y validar + redes para nutrir. Modelo estándar para pequeñas firmas de servicios.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección 6: CTA Final -->
|
||||||
|
<section class="servicios-cta">
|
||||||
|
<div class="servicios-cta-card">
|
||||||
|
<h2 class="servicios-cta-titulo">¿No sabés cuál servicio necesitás?</h2>
|
||||||
|
<p class="servicios-cta-subtitulo">Hacé nuestro diagnóstico gratuito y te recomendamos la solución ideal para tu momento.</p>
|
||||||
|
<div class="servicios-cta-buttons">
|
||||||
|
<a href="inicio.html#diagnostico" class="btn btn-cta-primary">Hacer el diagnóstico</a>
|
||||||
|
<a href="contacto.html" class="btn btn-cta-secondary">Hablemos directamente</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección 7: Espacio de cierre -->
|
||||||
|
<section class="servicios-cierre"></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/servicios.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,464 @@
|
|||||||
|
/* ============================================
|
||||||
|
PÁGINA BIOLINK (Estudio Creativo)
|
||||||
|
============================================ */
|
||||||
|
.biolink-page {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
background-image: radial-gradient(circle at 50% 0%, var(--brand-rose-muted) 0%, transparent 40%);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .biolink-page {
|
||||||
|
background-image: radial-gradient(circle at 50% 0%, rgba(186, 18, 77, 0.15) 0%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Botón de tema flotante para biolink */
|
||||||
|
.biolink-theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: var(--spacing-sm);
|
||||||
|
right: var(--spacing-sm);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.biolink-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: var(--spacing-md);
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Perfil --- */
|
||||||
|
.profile {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-md); /* Reducido */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem; /* Reducido de 0.5rem a 0.25rem */
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 200px;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 0.25rem; /* Reducido de spacing-xs a 0.25rem */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-image-wrapper:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.biolink-logo {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
max-width: 200px;
|
||||||
|
max-height: 160px;
|
||||||
|
transition: opacity 0.4s ease-in-out, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.biolink-logo.light {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.biolink-logo.dark {
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .biolink-logo.light {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .biolink-logo.dark {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-name {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-bio {
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 400px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Enlaces --- */
|
||||||
|
.links {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
/*estilos de botones clasicos*/
|
||||||
|
.link-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button:hover {
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 12px 24px -6px rgba(186, 18, 77, 0.15);
|
||||||
|
background-color: var(--bg-surface-elevated);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*estilos del boton de whatsapp*/
|
||||||
|
.link-button-wa {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.04);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--brand-teal);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa:hover {
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 12px 24px -6px rgba(26, 143, 168, 0.3);
|
||||||
|
background-color: var(--bg-surface-elevated);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: var(--badge-bg);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.link-icon-wa {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: var(--brand-sage-light);
|
||||||
|
color: var(--brand-teal);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa .link-icon {
|
||||||
|
border-color: rgba(16, 99, 125, 0.5);
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(0, 63, 82, 0.15) 0%,
|
||||||
|
rgba(16, 99, 125, 0.08) 100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajustes específicos para modo oscuro */
|
||||||
|
[data-theme="dark"] .link-button-wa {
|
||||||
|
border-color: rgba(16, 99, 125, 0.6);
|
||||||
|
background: linear-gradient(135deg,
|
||||||
|
rgba(16, 99, 125, 0.2) 0%,
|
||||||
|
rgba(0, 168, 140, 0.08) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .link-button-wa .link-icon {
|
||||||
|
background-color: rgba(16, 99, 125, 0.35);
|
||||||
|
color: #1a8fa8; /* Teal más luminoso para modo oscuro */
|
||||||
|
border-color: rgba(26, 143, 168, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .link-button-wa:hover {
|
||||||
|
border-color: #1a8fa8;
|
||||||
|
box-shadow: 0 12px 24px -6px rgba(26, 143, 168, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .link-button-wa:hover .link-icon {
|
||||||
|
background-color: #1a8fa8;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #1a8fa8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icono de WhatsApp - Tema Claro */
|
||||||
|
.link-button-wa .link-icon {
|
||||||
|
background-color: rgba(0, 63, 82, 0.12); /* Fondo teal suave */
|
||||||
|
color: var(--brand-teal); /* Icono teal vibrante */
|
||||||
|
border: 1px solid rgba(0, 63, 82, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa:hover .link-icon {
|
||||||
|
background-color: var(--brand-teal); /* Fondo teal sólido al hover */
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: var(--brand-teal);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button:hover .link-icon {
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button-wa:hover .link-icon {
|
||||||
|
background-color: var(--brand-teal);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: transform 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button:hover .link-arrow {
|
||||||
|
transform: translateX(5px);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
}
|
||||||
|
.link-button-wa:hover .link-arrow {
|
||||||
|
transform: translateX(5px);
|
||||||
|
color: var(--brand-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Redes Sociales --- */
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: var(--spacing-xs);
|
||||||
|
margin-bottom: var(--spacing-md); /* Agregado: más espacio abajo */
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background-color: var(--brand-plum);
|
||||||
|
border-color: var(--brand-plum);
|
||||||
|
color: #ffffff;
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 20px -4px rgba(23, 12, 29, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
FOOTER BIOLINK (Corregido)
|
||||||
|
============================================ */
|
||||||
|
.footerbio {
|
||||||
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
border-top: none; /* Cambiado: quitamos la línea */
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contenedor del footer - debe ser relative para posicionar los logos */
|
||||||
|
.footerbio .footer-logo-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 0 auto 0.5rem auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ambos logos se superponen */
|
||||||
|
.footerbio .footer-biolink-logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: opacity 0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MODO CLARO - se ve el claro, se oculta el oscuro */
|
||||||
|
.footerbio .footer-biolink-logo.light {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbio .footer-biolink-logo.dark {
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MODO OSCURO - se oculta el claro, se ve el oscuro */
|
||||||
|
[data-theme="dark"] .footerbio .footer-biolink-logo.light {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .footerbio .footer-biolink-logo.dark {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerbio-text {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
RESPONSIVE MÓVIL
|
||||||
|
============================================ */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.biolink-container {
|
||||||
|
padding-top: calc(var(--header-height) + var(--spacing-xs));
|
||||||
|
padding-left: 1rem; /* Agregado: espacio lateral izquierdo */
|
||||||
|
padding-right: 1rem; /* Agregado: espacio lateral derecho */
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-image-wrapper {
|
||||||
|
width: 160px;
|
||||||
|
height: 120px;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.biolink-logo {
|
||||||
|
max-width: 160px;
|
||||||
|
max-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-name {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-bio {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0 0.5rem; /* Evita que el texto toque los bordes */
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
gap: 0.75rem; /* Un poco más compacto entre botones */
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button {
|
||||||
|
padding: 0.85rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
gap: 0.75rem; /* Íconos sociales un poco más juntos */
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
+237
-86
@@ -1,14 +1,14 @@
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
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;700family=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)
|
VARIABLES DE TEMA (modo claro por defecto)
|
||||||
============================================ */
|
============================================ */
|
||||||
:root {
|
:root {
|
||||||
/* Paleta Base / Primitivas de Marca */
|
/* Paleta Base / Primitivas de Marca */
|
||||||
--brand-plum: #221728;
|
--brand-plum: #170c1d;
|
||||||
--brand-crimson: #ba124d;
|
--brand-crimson: #ba124d;
|
||||||
--brand-teal: #003f52;
|
--brand-teal: #003f52;
|
||||||
--brand-sage-light: #eaf0ee;
|
--brand-sage-light: #eaf0ee;
|
||||||
@@ -19,7 +19,8 @@
|
|||||||
--bg-base: var(--brand-sage-light);
|
--bg-base: var(--brand-sage-light);
|
||||||
--bg-surface: #ffffff;
|
--bg-surface: #ffffff;
|
||||||
--bg-surface-elevated: #f5f9f8;
|
--bg-surface-elevated: #f5f9f8;
|
||||||
|
--bg-icon-contrast: var(--brand-teal);
|
||||||
|
|
||||||
--text-primary: var(--brand-plum);
|
--text-primary: var(--brand-plum);
|
||||||
--text-secondary: var(--brand-teal);
|
--text-secondary: var(--brand-teal);
|
||||||
--text-muted: rgba(34, 23, 40, 0.65);
|
--text-muted: rgba(34, 23, 40, 0.65);
|
||||||
@@ -30,12 +31,14 @@
|
|||||||
--btn-secondary-bg: var(--brand-teal);
|
--btn-secondary-bg: var(--brand-teal);
|
||||||
--btn-secondary-hover: #002c3a;
|
--btn-secondary-hover: #002c3a;
|
||||||
|
|
||||||
|
|
||||||
--badge-bg: var(--brand-rose-muted);
|
--badge-bg: var(--brand-rose-muted);
|
||||||
--badge-text: var(--brand-plum);
|
--badge-text: var(--brand-plum);
|
||||||
|
|
||||||
--border: rgba(0, 63, 82, 0.12);
|
--border: rgba(0, 63, 82, 0.12);
|
||||||
--shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08);
|
--shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08);
|
||||||
--glow-animation: rgba(186, 18, 77, 0.25);
|
--glow-animation: rgba(186, 18, 77, 0.25);
|
||||||
|
--bg-contraste-teal: rgba(0,63,82, 1);
|
||||||
|
|
||||||
/* Tipografía de Marca */
|
/* Tipografía de Marca */
|
||||||
--font-title: 'Literata', serif;
|
--font-title: 'Literata', serif;
|
||||||
@@ -58,8 +61,9 @@
|
|||||||
/* Modo oscuro */
|
/* Modo oscuro */
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
--bg-base: var(--bg-dark-web);
|
--bg-base: var(--bg-dark-web);
|
||||||
--bg-surface: #221728;
|
--bg-surface: #170c1d;
|
||||||
--bg-surface-elevated: #392842;
|
--bg-surface-elevated: #221728;
|
||||||
|
--bg-icon-contrast: var(--brand-sage-light);
|
||||||
|
|
||||||
--text-primary: var(--brand-sage-light);
|
--text-primary: var(--brand-sage-light);
|
||||||
--text-secondary: var(--brand-rose-muted);
|
--text-secondary: var(--brand-rose-muted);
|
||||||
@@ -77,6 +81,7 @@
|
|||||||
--border: rgba(234, 240, 238, 0.12);
|
--border: rgba(234, 240, 238, 0.12);
|
||||||
--shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
|
--shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45);
|
||||||
--glow-animation: rgba(186, 18, 77, 0.45);
|
--glow-animation: rgba(186, 18, 77, 0.45);
|
||||||
|
--bg-contraste-teal: rgba(0,63,82, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -106,13 +111,17 @@ body {
|
|||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
font-family: var(--font-title);
|
font-family: var(--font-title);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4, h5, h6 {
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
font-family: var(--font-subtitle);
|
font-family: var(--font-subtitle);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -161,24 +170,31 @@ ul {
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
HEADER Y LOGOS
|
HEADER Y LOGOS
|
||||||
============================================ */
|
============================================ */
|
||||||
|
#menu-container {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header.is-hidden {
|
.site-header.is-hidden {
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header.is-scrolled {
|
.site-header.is-scrolled {
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.menu-open .site-header {
|
body.menu-open .site-header {
|
||||||
transform: translateY(0) !important;
|
transform: translateY(0) !important;
|
||||||
}
|
}
|
||||||
@@ -355,7 +371,8 @@ body.menu-open .site-header {
|
|||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
|
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
overflow: hidden; /* Clave para contener los destellos de la aurora */
|
overflow: hidden;
|
||||||
|
/* Clave para contener los destellos de la aurora */
|
||||||
padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
|
||||||
box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2);
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
@@ -378,12 +395,10 @@ body.menu-open .site-header {
|
|||||||
filter: blur(55px);
|
filter: blur(55px);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
background: radial-gradient(
|
background: radial-gradient(ellipse at center,
|
||||||
ellipse at center,
|
rgba(0, 168, 140, 0.32) 0%,
|
||||||
rgba(0, 168, 140, 0.32) 0%,
|
rgba(0, 63, 82, 0.12) 45%,
|
||||||
rgba(0, 63, 82, 0.12) 45%,
|
transparent 70%);
|
||||||
transparent 70%
|
|
||||||
);
|
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -391,12 +406,10 @@ body.menu-open .site-header {
|
|||||||
[data-theme="dark"] .fullscreen-menu::before {
|
[data-theme="dark"] .fullscreen-menu::before {
|
||||||
opacity: 0.42;
|
opacity: 0.42;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
background: radial-gradient(
|
background: radial-gradient(ellipse at center,
|
||||||
ellipse at center,
|
rgba(0, 220, 160, 0.35) 0%,
|
||||||
rgba(0, 220, 160, 0.35) 0%,
|
rgba(11, 80, 102, 0.28) 45%,
|
||||||
rgba(11, 80, 102, 0.28) 45%,
|
transparent 70%);
|
||||||
transparent 70%
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Botón de cierre */
|
/* Botón de cierre */
|
||||||
@@ -539,7 +552,8 @@ body.menu-open .site-header {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
transform: none !important; /* Evita heredar el translateX de los links */
|
transform: none !important;
|
||||||
|
/* Evita heredar el translateX de los links */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Botón 1: Sólido Primario */
|
/* Botón 1: Sólido Primario */
|
||||||
@@ -584,12 +598,22 @@ body.menu-open .site-header {
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
width: auto;
|
width: auto;
|
||||||
opacity: 0.95;
|
opacity: 0.95;
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-brand img:hover {
|
.menu-brand img:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
.menu-brand a,
|
||||||
|
.menu-brand .logo {
|
||||||
|
transform: none !important;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-brand a:hover,
|
||||||
|
.menu-brand .logo:hover {
|
||||||
|
transform: none !important;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
KEYFRAMES (ONDAS DE AURORA BOREAL)
|
KEYFRAMES (ONDAS DE AURORA BOREAL)
|
||||||
@@ -598,9 +622,11 @@ body.menu-open .site-header {
|
|||||||
0% {
|
0% {
|
||||||
transform: translate(0, 0) rotate(0deg) scale(1);
|
transform: translate(0, 0) rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translate(7%, 8%) rotate(10deg) scale(1.1);
|
transform: translate(7%, 8%) rotate(10deg) scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translate(-5%, -6%) rotate(-6deg) scale(0.96);
|
transform: translate(-5%, -6%) rotate(-6deg) scale(0.96);
|
||||||
}
|
}
|
||||||
@@ -610,15 +636,18 @@ body.menu-open .site-header {
|
|||||||
0% {
|
0% {
|
||||||
transform: translate(0, 0) rotate(0deg) scale(1);
|
transform: translate(0, 0) rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translate(-8%, -5%) rotate(-12deg) scale(1.14);
|
transform: translate(-8%, -5%) rotate(-12deg) scale(1.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translate(6%, 7%) rotate(8deg) scale(0.94);
|
transform: translate(6%, 7%) rotate(8deg) scale(0.94);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|
||||||
.fullscreen-menu::before,
|
.fullscreen-menu::before,
|
||||||
.fullscreen-menu::after {
|
.fullscreen-menu::after {
|
||||||
animation: none;
|
animation: none;
|
||||||
@@ -634,7 +663,7 @@ body.menu-open .site-header {
|
|||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
padding-bottom: var(--spacing-lg);
|
padding-bottom: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-content {
|
.menu-content {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
@@ -656,7 +685,7 @@ body.menu-open .site-header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SECCIONES Y FOOTER
|
SECCIONES Y FOOTER — AMOR & ROMA
|
||||||
============================================ */
|
============================================ */
|
||||||
main section {
|
main section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
@@ -670,32 +699,72 @@ main section h2 {
|
|||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding-top: var(--spacing-lg);
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
background-color: var(--bg-surface);
|
background-color: var(--bg-surface);
|
||||||
|
position: relative;
|
||||||
|
/* Eliminamos overflow: hidden para permitir que los elementos respiren con orden */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1. Contenido principal (Columnas de texto y botones) */
|
||||||
.footer-content {
|
.footer-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin-left: auto;
|
margin: 0 auto var(--spacing-md) auto;
|
||||||
margin-right: auto;
|
padding: 0 var(--spacing-sm);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-col h4 {
|
.footer-col h4 {
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
|
font-family: 'Literata', serif;
|
||||||
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 2. Sección 2: El contenedor exclusivo para los arcos (Sin repetición) */
|
||||||
|
.footer-decor-section {
|
||||||
|
width: 100%;
|
||||||
|
height: 90px; /* Altura controlada para dar presencia sin invadir */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: var(--spacing-sm) 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-arches-graphic {
|
||||||
|
width: 1200px; /* Ancho ajustado para que luzca como un detalle sutil */
|
||||||
|
height: 250px;
|
||||||
|
background-color: currentColor;
|
||||||
|
color: var(--text-muted);
|
||||||
|
opacity: 0.15;
|
||||||
|
|
||||||
|
-webkit-mask-image: url("../assets/vectores/arcos3.svg");
|
||||||
|
mask-image: url("../assets/vectores/arcos3.svg");
|
||||||
|
-webkit-mask-repeat: no-repeat; /* Evita por completo que se repitan */
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center; /* Centrados perfectamente en la sección 2 */
|
||||||
|
mask-position: center;
|
||||||
|
-webkit-mask-size: contain; /* Respeta la proporción geométrica original */
|
||||||
|
mask-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. Sección 3: Copyright y Avisos Legales */
|
||||||
.footer-bottom {
|
.footer-bottom {
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
padding-top: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
font-family: 'Jost', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
@@ -759,6 +828,7 @@ main section h2 {
|
|||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
animation: fadeInUp 0.9s ease-out 0.8s forwards;
|
animation: fadeInUp 0.9s ease-out 0.8s forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
BOTONES (reutilizables)
|
BOTONES (reutilizables)
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -815,6 +885,7 @@ main section h2 {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@@ -823,21 +894,29 @@ main section h2 {
|
|||||||
|
|
||||||
/* Shake sutil para llamar la atención (cada 6s) */
|
/* Shake sutil para llamar la atención (cada 6s) */
|
||||||
@keyframes attentionShake {
|
@keyframes attentionShake {
|
||||||
0%, 85%, 100% {
|
|
||||||
|
0%,
|
||||||
|
85%,
|
||||||
|
100% {
|
||||||
transform: translateX(0) rotate(0deg);
|
transform: translateX(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
87% {
|
87% {
|
||||||
transform: translateX(-4px) rotate(-1deg);
|
transform: translateX(-4px) rotate(-1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
89% {
|
89% {
|
||||||
transform: translateX(4px) rotate(1deg);
|
transform: translateX(4px) rotate(1deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
91% {
|
91% {
|
||||||
transform: translateX(-3px) rotate(-0.5deg);
|
transform: translateX(-3px) rotate(-0.5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
93% {
|
93% {
|
||||||
transform: translateX(3px) rotate(0.5deg);
|
transform: translateX(3px) rotate(0.5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
95% {
|
95% {
|
||||||
transform: translateX(0) rotate(0deg);
|
transform: translateX(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
@@ -854,6 +933,7 @@ main section h2 {
|
|||||||
|
|
||||||
/* Respetar preferencia de movimiento reducido */
|
/* Respetar preferencia de movimiento reducido */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|
||||||
.hero-title,
|
.hero-title,
|
||||||
.hero-subtitle,
|
.hero-subtitle,
|
||||||
.hero-cta-group {
|
.hero-cta-group {
|
||||||
@@ -861,6 +941,7 @@ main section h2 {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-cta-primary {
|
.hero-cta-primary {
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
@@ -874,13 +955,13 @@ main section h2 {
|
|||||||
.hero-section {
|
.hero-section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-cta-group {
|
.hero-cta-group {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -1017,26 +1098,32 @@ main section h2 {
|
|||||||
-webkit-mask-image: url("../assets/iconos/branding.svg");
|
-webkit-mask-image: url("../assets/iconos/branding.svg");
|
||||||
mask-image: url("../assets/iconos/branding.svg");
|
mask-image: url("../assets/iconos/branding.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rrss {
|
.icon-rrss {
|
||||||
-webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
|
-webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
|
||||||
mask-image: url("../assets/iconos/redes_sociales.svg");
|
mask-image: url("../assets/iconos/redes_sociales.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-web {
|
.icon-web {
|
||||||
-webkit-mask-image: url("../assets/iconos/web.svg");
|
-webkit-mask-image: url("../assets/iconos/web.svg");
|
||||||
mask-image: url("../assets/iconos/web.svg");
|
mask-image: url("../assets/iconos/web.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-auto {
|
.icon-auto {
|
||||||
-webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
|
-webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
|
||||||
mask-image: url("../assets/iconos/automatizaciones.svg");
|
mask-image: url("../assets/iconos/automatizaciones.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-paid {
|
.icon-paid {
|
||||||
-webkit-mask-image: url("../assets/iconos/paid_media.svg");
|
-webkit-mask-image: url("../assets/iconos/paid_media.svg");
|
||||||
mask-image: url("../assets/iconos/paid_media.svg");
|
mask-image: url("../assets/iconos/paid_media.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-add {
|
.icon-add {
|
||||||
-webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
|
-webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
|
||||||
mask-image: url("../assets/iconos/ad_hoc.svg");
|
mask-image: url("../assets/iconos/ad_hoc.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**/
|
/**/
|
||||||
|
|
||||||
.servicio-title-short {
|
.servicio-title-short {
|
||||||
@@ -1148,11 +1235,11 @@ main section h2 {
|
|||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicios-accordion {
|
.servicios-accordion {
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicios-intro {
|
.servicios-intro {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1164,20 +1251,21 @@ main section h2 {
|
|||||||
height: 450px;
|
height: 450px;
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicio-title-short {
|
.servicio-title-short {
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicio-title-long {
|
.servicio-title-long {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servicio-icon-large {
|
.servicio-icon-large {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SECCIÓN DIAGNÓSTICO
|
SECCIÓN DIAGNÓSTICO
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -1260,6 +1348,7 @@ SECCIÓN DIAGNÓSTICO
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(10px);
|
transform: translateY(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@@ -1401,32 +1490,32 @@ RESPONSIVE DIAGNÓSTICO
|
|||||||
.diagnostico-section {
|
.diagnostico-section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnostico-card {
|
.diagnostico-card {
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnostico-title {
|
.diagnostico-title {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diagnostico-subtitle {
|
.diagnostico-subtitle {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pregunta-titulo {
|
.pregunta-titulo {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opcion-tarjeta {
|
.opcion-tarjeta {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
padding: var(--spacing-xs);
|
padding: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.resultado-titulo {
|
.resultado-titulo {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resultado-solucion {
|
.resultado-solucion {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
@@ -1437,12 +1526,13 @@ RESPONSIVE DIAGNÓSTICO
|
|||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opcion-tarjeta {
|
.opcion-tarjeta {
|
||||||
padding: var(--spacing-xs);
|
padding: var(--spacing-xs);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
SECCIÓN METODOLOGÍA
|
SECCIÓN METODOLOGÍA
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -1546,27 +1636,33 @@ SECCIÓN METODOLOGÍA
|
|||||||
filter: grayscale(100%) opacity(0.4);
|
filter: grayscale(100%) opacity(0.4);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
.icon-contacto{
|
|
||||||
|
.icon-contacto {
|
||||||
-webkit-mask-image: url("../assets/iconos/contacto.svg");
|
-webkit-mask-image: url("../assets/iconos/contacto.svg");
|
||||||
mask-image: url("../assets/iconos/contacto.svg");
|
mask-image: url("../assets/iconos/contacto.svg");
|
||||||
}
|
}
|
||||||
.icon-propuesta{
|
|
||||||
|
.icon-propuesta {
|
||||||
-webkit-mask-image: url("../assets/iconos/propuesta.svg");
|
-webkit-mask-image: url("../assets/iconos/propuesta.svg");
|
||||||
mask-image: url("../assets/iconos/propuesta.svg");
|
mask-image: url("../assets/iconos/propuesta.svg");
|
||||||
}
|
}
|
||||||
.icon-diseno{
|
|
||||||
|
.icon-diseno {
|
||||||
-webkit-mask-image: url("../assets/iconos/diseno.svg");
|
-webkit-mask-image: url("../assets/iconos/diseno.svg");
|
||||||
mask-image: url("../assets/iconos/diseno.svg");
|
mask-image: url("../assets/iconos/diseno.svg");
|
||||||
}
|
}
|
||||||
.icon-produccion{
|
|
||||||
|
.icon-produccion {
|
||||||
-webkit-mask-image: url("../assets/iconos/produccion.svg");
|
-webkit-mask-image: url("../assets/iconos/produccion.svg");
|
||||||
mask-image: url("../assets/iconos/produccion.svg");
|
mask-image: url("../assets/iconos/produccion.svg");
|
||||||
}
|
}
|
||||||
.icon-revision{
|
|
||||||
|
.icon-revision {
|
||||||
-webkit-mask-image: url("../assets/iconos/revision.svg");
|
-webkit-mask-image: url("../assets/iconos/revision.svg");
|
||||||
mask-image: url("../assets/iconos/revision.svg");
|
mask-image: url("../assets/iconos/revision.svg");
|
||||||
}
|
}
|
||||||
.icon-lanzamiento{
|
|
||||||
|
.icon-lanzamiento {
|
||||||
-webkit-mask-image: url("../assets/iconos/lanzamiento.svg");
|
-webkit-mask-image: url("../assets/iconos/lanzamiento.svg");
|
||||||
mask-image: url("../assets/iconos/lanzamiento.svg");
|
mask-image: url("../assets/iconos/lanzamiento.svg");
|
||||||
}
|
}
|
||||||
@@ -1594,7 +1690,8 @@ SECCIÓN METODOLOGÍA
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
}
|
}
|
||||||
.paso-body{
|
|
||||||
|
.paso-body {
|
||||||
font-family: var(--font-small);
|
font-family: var(--font-small);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
@@ -1669,33 +1766,33 @@ RESPONSIVE METODOLOGÍA
|
|||||||
.metodologia-section {
|
.metodologia-section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.metodologia-grid {
|
.metodologia-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.metodologia-title {
|
.metodologia-title {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metodologia-subtitle {
|
.metodologia-subtitle {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paso-arco {
|
.paso-arco {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paso-icono {
|
.paso-icono {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paso-titulo {
|
.paso-titulo {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paso-subtitulo {
|
.paso-subtitulo {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
@@ -1713,7 +1810,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
.paso-item {
|
.paso-item {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arco-svg,
|
.arco-svg,
|
||||||
.paso-icono,
|
.paso-icono,
|
||||||
.paso-titulo,
|
.paso-titulo,
|
||||||
@@ -1915,7 +2012,8 @@ RESPONSIVE METODOLOGÍA
|
|||||||
}
|
}
|
||||||
|
|
||||||
.plan-featured {
|
.plan-featured {
|
||||||
order: -1; /* El destacado aparece primero en mobile */
|
order: -1;
|
||||||
|
/* El destacado aparece primero en mobile */
|
||||||
}
|
}
|
||||||
|
|
||||||
.plan-badge {
|
.plan-badge {
|
||||||
@@ -2050,7 +2148,8 @@ RESPONSIVE METODOLOGÍA
|
|||||||
.slide-image-wrapper::before {
|
.slide-image-wrapper::before {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
padding-top: 75%; /* Ratio 4:3 */
|
padding-top: 75%;
|
||||||
|
/* Ratio 4:3 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-image {
|
.carousel-image {
|
||||||
@@ -2151,7 +2250,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
padding: var(--spacing-md) 0;
|
padding: var(--spacing-md) 0;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
|
|
||||||
/* Efecto fade en los bordes izquierdo y derecho */
|
/* Efecto fade en los bordes izquierdo y derecho */
|
||||||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
@@ -2170,9 +2269,10 @@ RESPONSIVE METODOLOGÍA
|
|||||||
0% {
|
0% {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
/* Se mueve exactamente el 50% porque el contenido está duplicado */
|
/* Se mueve exactamente el 50% porque el contenido está duplicado */
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2185,7 +2285,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
padding: var(--spacing-md) 0;
|
padding: var(--spacing-md) 0;
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
|
|
||||||
/* Efecto fade en los bordes */
|
/* Efecto fade en los bordes */
|
||||||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
|
||||||
@@ -2199,8 +2299,13 @@ RESPONSIVE METODOLOGÍA
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes marquee-scroll {
|
@keyframes marquee-scroll {
|
||||||
0% { transform: translateX(0); }
|
0% {
|
||||||
100% { transform: translateX(-50%); }
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contenedor de cada icono: tamaño fijo para alinear */
|
/* Contenedor de cada icono: tamaño fijo para alinear */
|
||||||
@@ -2209,8 +2314,10 @@ RESPONSIVE METODOLOGÍA
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 110px; /* Ancho fijo de la caja */
|
width: 110px;
|
||||||
height: 60px; /* Altura fija de la caja */
|
/* Ancho fijo de la caja */
|
||||||
|
height: 60px;
|
||||||
|
/* Altura fija de la caja */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* El icono en sí: se adapta dentro de la caja sin deformarse */
|
/* El icono en sí: se adapta dentro de la caja sin deformarse */
|
||||||
@@ -2223,7 +2330,8 @@ RESPONSIVE METODOLOGÍA
|
|||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
-webkit-mask-position: center;
|
-webkit-mask-position: center;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
-webkit-mask-size: contain; /* Clave: contiene el SVG sin deformarlo */
|
-webkit-mask-size: contain;
|
||||||
|
/* Clave: contiene el SVG sin deformarlo */
|
||||||
mask-size: contain;
|
mask-size: contain;
|
||||||
filter: grayscale(100%) opacity(0.5);
|
filter: grayscale(100%) opacity(0.5);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
@@ -2237,16 +2345,56 @@ RESPONSIVE METODOLOGÍA
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Iconos específicos */
|
/* Iconos específicos */
|
||||||
.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); }
|
.icon-analytics {
|
||||||
.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.svg"); }
|
-webkit-mask-image: url("../assets/vectores/analytics.svg");
|
||||||
.icon-google { -webkit-mask-image: url("../assets/vectores/google.svg"); mask-image: url("../assets/vectores/google.svg"); }
|
mask-image: url("../assets/vectores/analytics.svg");
|
||||||
.icon-googleads { -webkit-mask-image: url("../assets/vectores/googleads.svg"); mask-image: url("../assets/vectores/googleads.svg"); }
|
}
|
||||||
.icon-insta { -webkit-mask-image: url("../assets/vectores/insta.svg"); mask-image: url("../assets/vectores/insta.svg"); }
|
|
||||||
.icon-meta { -webkit-mask-image: url("../assets/vectores/meta.svg"); mask-image: url("../assets/vectores/meta.svg"); }
|
.icon-face {
|
||||||
.icon-openai { -webkit-mask-image: url("../assets/vectores/openai.svg"); mask-image: url("../assets/vectores/openai.svg"); }
|
-webkit-mask-image: url("../assets/vectores/face.svg");
|
||||||
.icon-tiktok { -webkit-mask-image: url("../assets/vectores/tiktok.svg"); mask-image: url("../assets/vectores/tiktok.svg"); max-width: 250px; }
|
mask-image: url("../assets/vectores/face.svg");
|
||||||
.icon-whatsapp { -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); mask-image: url("../assets/vectores/whatsapp.svg"); }
|
}
|
||||||
.icon-wordpress { -webkit-mask-image: url("../assets/vectores/wordpress.svg"); mask-image: url("../assets/vectores/wordpress.svg"); }
|
|
||||||
|
.icon-google {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/google.svg");
|
||||||
|
mask-image: url("../assets/vectores/google.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-googleads {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/googleads.svg");
|
||||||
|
mask-image: url("../assets/vectores/googleads.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-insta {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/insta.svg");
|
||||||
|
mask-image: url("../assets/vectores/insta.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-meta {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/meta.svg");
|
||||||
|
mask-image: url("../assets/vectores/meta.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-openai {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/openai.svg");
|
||||||
|
mask-image: url("../assets/vectores/openai.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-tiktok {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/tiktok.svg");
|
||||||
|
mask-image: url("../assets/vectores/tiktok.svg");
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-whatsapp {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/whatsapp.svg");
|
||||||
|
mask-image: url("../assets/vectores/whatsapp.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wordpress {
|
||||||
|
-webkit-mask-image: url("../assets/vectores/wordpress.svg");
|
||||||
|
mask-image: url("../assets/vectores/wordpress.svg");
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================
|
/* ============================================
|
||||||
RESPONSIVE MARQUEE
|
RESPONSIVE MARQUEE
|
||||||
@@ -2263,6 +2411,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
width: 75px;
|
width: 75px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-track {
|
.marquee-track {
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
@@ -2403,17 +2552,17 @@ RESPONSIVE METODOLOGÍA
|
|||||||
.cta-section {
|
.cta-section {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-card {
|
.cta-card {
|
||||||
padding: var(--spacing-md) var(--spacing-sm);
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta-buttons {
|
.cta-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-cta-primary,
|
.btn-cta-primary,
|
||||||
.btn-cta-secondary {
|
.btn-cta-secondary {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -2422,6 +2571,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
.cta-card::before,
|
.cta-card::before,
|
||||||
.cta-card::after {
|
.cta-card::after {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
@@ -2431,6 +2581,7 @@ RESPONSIVE METODOLOGÍA
|
|||||||
|
|
||||||
/* Respetar preferencia de movimiento reducido */
|
/* Respetar preferencia de movimiento reducido */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|
||||||
.btn-cta-primary,
|
.btn-cta-primary,
|
||||||
.btn-cta-secondary {
|
.btn-cta-secondary {
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|||||||
-1587
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,733 @@
|
|||||||
|
/* ============================================
|
||||||
|
SERVICIOS - HERO
|
||||||
|
============================================ */
|
||||||
|
.servicios-hero {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
min-height: 70vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: -20%;
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, var(--glow-animation) 0%, transparent 70%);
|
||||||
|
filter: blur(60px);
|
||||||
|
opacity: 0.4;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero-content {
|
||||||
|
max-width: 800px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero-tag {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
border: 1px solid var(--brand-crimson);
|
||||||
|
border-radius: 999px;
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero-title {
|
||||||
|
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.15;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero-subtitle {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto var(--spacing-md);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-hero-cta {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - SELECTOR (TABS + PILLS)
|
||||||
|
============================================ */
|
||||||
|
.servicios-selector-section {
|
||||||
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .servicios-selector-section {
|
||||||
|
background-color: rgba(45, 32, 52, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-selector-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs desktop */
|
||||||
|
.servicios-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: transparent;
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-tab:hover {
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
color: var(--brand-crimson);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-tab.active {
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
display: block;
|
||||||
|
background-color: currentColor;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
|
mask-position: center;
|
||||||
|
-webkit-mask-size: contain;
|
||||||
|
mask-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-redes { -webkit-mask-image: url("../assets/iconos/redes_sociales.svg"); mask-image: url("../assets/iconos/redes_sociales.svg"); }
|
||||||
|
.icon-branding { -webkit-mask-image: url("../assets/iconos/branding.svg"); mask-image: url("../assets/iconos/branding.svg"); }
|
||||||
|
.icon-web { -webkit-mask-image: url("../assets/iconos/web.svg"); mask-image: url("../assets/iconos/web.svg"); }
|
||||||
|
.icon-automatizaciones { -webkit-mask-image: url("../assets/iconos/automatizaciones.svg"); mask-image: url("../assets/iconos/automatizaciones.svg"); }
|
||||||
|
.icon-paid { -webkit-mask-image: url("../assets/iconos/paid_media.svg"); mask-image: url("../assets/iconos/paid_media.svg"); }
|
||||||
|
|
||||||
|
/* Pills mobile (ocultas en desktop) */
|
||||||
|
.servicios-pills {
|
||||||
|
display: none;
|
||||||
|
overflow-x: auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-pills::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-pill {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
background: var(--bg-surface-elevated);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-pill.active {
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: block;
|
||||||
|
background-color: currentColor;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
|
mask-position: center;
|
||||||
|
-webkit-mask-size: contain;
|
||||||
|
mask-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - PANEL DE CONTENIDO
|
||||||
|
============================================ */
|
||||||
|
.servicios-panel-section {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-panel-container {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-panel {
|
||||||
|
display: none;
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
animation: slideInPanel 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-panel.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInPanel {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* icono */
|
||||||
|
.panel-icono-decorativo {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--spacing-lg);
|
||||||
|
right: var(--spacing-lg);
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decorativo-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
background-color: currentColor;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
|
mask-position: center;
|
||||||
|
-webkit-mask-size: contain;
|
||||||
|
mask-size: contain;
|
||||||
|
color: var(--bg-icon-contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Iconos específicos para el panel decorativo */
|
||||||
|
.icon-redes-deco {
|
||||||
|
-webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
|
||||||
|
mask-image: url("../assets/iconos/redes_sociales.svg");
|
||||||
|
}
|
||||||
|
.icon-branding-deco {
|
||||||
|
-webkit-mask-image: url("../assets/iconos/branding.svg");
|
||||||
|
mask-image: url("../assets/iconos/branding.svg");
|
||||||
|
}
|
||||||
|
.icon-web-deco {
|
||||||
|
-webkit-mask-image: url("../assets/iconos/web.svg");
|
||||||
|
mask-image: url("../assets/iconos/web.svg");
|
||||||
|
}
|
||||||
|
.icon-automatizaciones-deco {
|
||||||
|
-webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
|
||||||
|
mask-image: url("../assets/iconos/automatizaciones.svg");
|
||||||
|
}
|
||||||
|
.icon-paid-deco {
|
||||||
|
-webkit-mask-image: url("../assets/iconos/paid_media.svg");
|
||||||
|
mask-image: url("../assets/iconos/paid_media.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Asegurar que el panel tenga position relative para el icono absoluto */
|
||||||
|
.servicio-panel {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* En modo oscuro, el icono se ve un poco más visible */
|
||||||
|
[data-theme="dark"] .panel-icono-decorativo {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive: achicar el icono en mobile */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.panel-icono-decorativo {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
top: var(--spacing-sm);
|
||||||
|
right: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header del panel */
|
||||||
|
.panel-header {
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
padding-bottom: var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-categoria {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
background-color: var(--bg-contraste-teal);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
border-radius: 999px;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-titulo {
|
||||||
|
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
line-height: 1.2;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.1s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-subtitulo {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 700px;
|
||||||
|
line-height: 1.6;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body del panel */
|
||||||
|
.panel-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-columna {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.3s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-columna:last-child {
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-subtitulo-seccion {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-texto {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-lista {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-lista li {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-lista li::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.5rem;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--brand-teal);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer del panel */
|
||||||
|
.panel-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: var(--spacing-md);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeInUp 0.6s ease-out 0.5s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-precio {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.precio-label {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.precio-valor {
|
||||||
|
font-family: var(--font-title);
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.precio-periodo {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-cta {
|
||||||
|
padding: 0.85rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(15px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - SEPARADOR
|
||||||
|
============================================ */
|
||||||
|
.servicios-separador {
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(to right, transparent, var(--border), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - CASOS DE ÉXITO
|
||||||
|
============================================ */
|
||||||
|
.servicios-casos {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-casos-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.casos-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.casos-titulo {
|
||||||
|
font-size: clamp(1.8rem, 3vw, 2.5rem);
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.casos-subtitulo {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.casos-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-card {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-card:hover {
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-tag {
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--brand-teal);
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-nombre {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caso-descripcion {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - CTA FINAL
|
||||||
|
============================================ */
|
||||||
|
.servicios-cta {
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
background-color: var(--bg-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-card {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: var(--brand-teal);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: var(--spacing-lg) var(--spacing-md);
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 60px -10px rgba(0, 63, 82, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-card::before,
|
||||||
|
.servicios-cta-card::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(80px);
|
||||||
|
opacity: 0.35;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-card::before {
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-card::after {
|
||||||
|
bottom: -100px;
|
||||||
|
right: -100px;
|
||||||
|
background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-titulo {
|
||||||
|
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto var(--spacing-md);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta-primary {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: var(--brand-teal);
|
||||||
|
border: 1.5px solid #ffffff;
|
||||||
|
padding: 0.85rem 2rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta-primary:hover {
|
||||||
|
background-color: var(--brand-crimson);
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: var(--brand-crimson);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1.5px solid rgba(255, 255, 255, 0.6);
|
||||||
|
padding: 0.85rem 2rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-family: var(--font-small);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-cta-secondary:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: #ffffff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
SERVICIOS - CIERRE
|
||||||
|
============================================ */
|
||||||
|
.servicios-cierre {
|
||||||
|
height: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
RESPONSIVE SERVICIOS
|
||||||
|
============================================ */
|
||||||
|
@media (max-width: 968px) {
|
||||||
|
.panel-body {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.servicios-hero {
|
||||||
|
min-height: 60vh;
|
||||||
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-tabs {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-pills {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-selector-section {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-panel-section {
|
||||||
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-panel {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-cta {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.casos-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicios-cta-card {
|
||||||
|
padding: var(--spacing-md) var(--spacing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.servicios-hero-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servicio-panel {
|
||||||
|
padding: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-titulo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.precio-valor {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.servicio-panel,
|
||||||
|
.panel-titulo,
|
||||||
|
.panel-subtitulo,
|
||||||
|
.panel-columna,
|
||||||
|
.panel-footer {
|
||||||
|
animation: none;
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user