diff --git a/biolink.html b/biolink.html index 2aa6a89..908319a 100644 --- a/biolink.html +++ b/biolink.html @@ -1,38 +1,57 @@ - + - - Estudio Creativo - Biolink + + Estudio Creativo - Enlaces + + + + + + + - + + - -
-
- Estudio Creativo -

Estudio Creativo

- -
-
-

Transformando ideas en experiencias visuales extraordinarias

-
+ + + + +
+ +
+
+ + + + +
+

Estudio Creativo

+

Transformando ideas en experiencias visuales extraordinarias.

+
+ +
- -
+ +
-
Sitio Web
+
Sitio Web Oficial
 - -
+ +
Branding & Identidad
@@ -41,8 +60,8 @@
- -
+ +
Planes y Servicios
@@ -51,45 +70,58 @@
- - - -
+ +
-
Whatsapp
+
Hablemos por WhatsApp
- -
+ + +
+ - - + + + \ No newline at end of file diff --git a/includes/menu.html b/includes/menu.html index a4ef306..29778a4 100644 --- a/includes/menu.html +++ b/includes/menu.html @@ -33,13 +33,13 @@
-

Inicio

+

Amor&Roma

@@ -59,16 +59,16 @@
-

Contacto

+

Hablemos

- info@amoryroma.com.ar + Envianos un mail

- +54 388 611-8304 + Whatsapp

diff --git a/scripts/servicios.js b/scripts/servicios.js new file mode 100644 index 0000000..8a252df --- /dev/null +++ b/scripts/servicios.js @@ -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(); +}); \ No newline at end of file diff --git a/servicios.html b/servicios.html index 1ae3ebf..6932f3c 100644 --- a/servicios.html +++ b/servicios.html @@ -3,27 +3,319 @@ - - Servicios - [Nombre de la agencia] + + Servicios - Amor y Roma +
-

Sección 1

Contenido pendiente de definir.

-

Sección 2

Contenido pendiente de definir.

-

Sección 3

Contenido pendiente de definir.

-

Sección 4

Contenido pendiente de definir.

-

Sección 5

Contenido pendiente de definir.

-

Sección 6

Contenido pendiente de definir.

-

Sección 7

Contenido pendiente de definir.

-

Sección 8

Contenido pendiente de definir.

+ +
+
+ Nuestros servicios +

Soluciones a medida para cada etapa de tu marca

+

Combinamos estrategia, diseño y tecnología para construir marcas con esencia y estructura.

+ Explorar servicios +
+
+ + +
+
+ +
+ + + + + +
+ + +
+ + + + + +
+
+
+ + +
+
+ + +
+
+ +
+
+ Servicio Recurrente +

Gestión de Redes Sociales

+

Contenido, estrategia y comunidad para marcas que quieren crecer con presencia digital constante.

+
+
+
+

Objetivo

+

Construir una comunidad activa y fiel alrededor de tu marca mediante contenido de valor, storytelling visual y dirección creativa personalizada.

+
+
+

Alcance

+
    +
  • Grilla temática mensual personalizada
    • +
  • Diseño gráfico y dirección de arte
    • +
  • Copywriting persuasivo
    • +
  • Producción de Reels y TikToks
    • +
  • Moderación de comunidad
    • +
  • Reportes mensuales con métricas clave
    • +
+
+
+
+
+ Desde + $250.000/mes +
+ Cotizar este servicio +
+
+ + +
+
+ +
+
+ Proyecto One-Off +

Branding & Identidad de Marca

+

Construimos la esencia visual y estratégica de tu marca desde cero o mediante un rediseño integral.

+
+
+
+

Objetivo

+

Definir el ADN de tu marca: su personalidad, arquetipo, voz y universo visual para que comunique con coherencia en todos los puntos de contacto.

+
+
+

Entregables

+
    +
  • Diagnóstico de marca y propuesta de valor
    • +
  • Diseño de logotipo, isotipo y variantes
    • +
  • Paleta cromática y sistema tipográfico
    • +
  • Personaje/mascota de marca (opcional)
    • +
  • Manual de Identidad Visual completo
    • +
  • Kit de plantillas para redes y papelería
    • +
+
+
+
+
+ Desde + $450.000/proyecto +
+ Cotizar este servicio +
+
+ + +
+
+ +
+
+ Proyecto One-Off +

Desarrollo Web a Medida

+

Sitios rápidos, seguros y diseñados específicamente para tu embudo de ventas. Cero plantillas prefabricadas.

+
+
+
+

Objetivo

+

Construir activos digitales propios que transmitan credibilidad, conviertan visitantes en clientes y escalen con tu negocio.

+
+
+

Modalidades

+
    +
  • Landing Page de alta conversión
    • +
  • Sitio Web Institucional / Corporativo
    • +
  • Catálogo Digital / E-commerce
    • +
  • Optimización SEO técnico on-page
    • +
  • Integración con Analytics y Meta Pixel
    • +
  • WhatsApp API y canales de contacto
    • +
+
+
+
+
+ Desde + $380.000/proyecto +
+ Cotizar este servicio +
+
+ + +
+
+ +
+
+ Proyecto One-Off +

Automatizaciones de Conversación

+

Convertí el tráfico orgánico en prospectos calificados sin demandar tiempo manual de tu equipo.

+
+
+
+

Objetivo

+

Implementar flujos inteligentes que respondan, cualifiquen y deriven leads automáticamente en Instagram, Facebook y WhatsApp.

+
+
+

Alcance

+
    +
  • Flujos de respuesta por palabras clave
    • +
  • Rutas de cualificación de prospectos
    • +
  • Recolección automática de datos (nombre, mail, teléfono)
    • +
  • Notificaciones al equipo comercial
    • +
  • Integración con CRM o base de datos
    • +
  • Automatizaciones multi-paso avanzadas
    • +
+
+
+
+
+ Desde + $180.000/proyecto +
+ Cotizar este servicio +
+
+ + +
+
+ +
+
+ Proyecto Especial +

Trafficker & Paid Media

+

Amplificación estratégica de mensajes para campañas, lanzamientos o temporadas comerciales específicas.

+
+
+
+

Objetivo

+

Maximizar el retorno de tu inversión publicitaria mediante campañas segmentadas, creatividades de alto impacto y optimización diaria.

+
+
+

Alcance

+
    +
  • Auditoría técnica de Business Manager
    • +
  • Configuración de eventos y públicos personalizados
    • +
  • Creación y testeo A/B de creatividades
    • +
  • Campañas en Meta Ads y Google Ads
    • +
  • Monitoreo y optimización diaria de CPA/CPL
    • +
  • Reportes de rendimiento y recomendaciones
    • +
+
+
+
+
+ Desde + $220.000/mes +
+ Cotizar este servicio +
+
+ +
+
+ + +
+ + +
+
+
+

Casos que validan nuestro método

+

Cuatro arquetipos de solución que hemos construido con clientes reales.

+
+
+
+ Identidad Integral +

Construcción de universo de marca

+

Branding completo, personaje propio y administración continua de redes con pauta publicitaria.

+
+
+ Infraestructura B2B +

Credibilidad institucional

+

Sitio web corporativo a medida para consultora de seguridad, enfocado en transmitir seriedad y confianza.

+
+
+ Ecosistema Digital +

Solución integral híbrida

+

Branding + Web a medida + Redes sociales. Nuestro servicio insígnia para empresas de tecnología.

+
+
+ Profesionalización +

Posicionamiento de servicios

+

Web para captar y validar + redes para nutrir. Modelo estándar para pequeñas firmas de servicios.

+
+
+
+
+ + +
+
+

¿No sabés cuál servicio necesitás?

+

Hacé nuestro diagnóstico gratuito y te recomendamos la solución ideal para tu momento.

+
+ Hacer el diagnóstico + Hablemos directamente +
+
+
+ + +
- + \ No newline at end of file diff --git a/style/biolink.css b/style/biolink.css new file mode 100644 index 0000000..0fcdda1 --- /dev/null +++ b/style/biolink.css @@ -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; + } +} \ No newline at end of file diff --git a/style/main.css b/style/main.css index 15d1e41..264e035 100644 --- a/style/main.css +++ b/style/main.css @@ -19,6 +19,7 @@ --bg-base: var(--brand-sage-light); --bg-surface: #ffffff; --bg-surface-elevated: #f5f9f8; + --bg-icon-contrast: var(--brand-teal); --text-primary: var(--brand-plum); --text-secondary: var(--brand-teal); @@ -37,6 +38,7 @@ --border: rgba(0, 63, 82, 0.12); --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); --glow-animation: rgba(186, 18, 77, 0.25); + --bg-contraste-teal: rgba(0,63,82, 1); /* Tipografía de Marca */ --font-title: 'Literata', serif; @@ -61,6 +63,7 @@ --bg-base: var(--bg-dark-web); --bg-surface: #170c1d; --bg-surface-elevated: #221728; + --bg-icon-contrast: var(--brand-sage-light); --text-primary: var(--brand-sage-light); --text-secondary: var(--brand-rose-muted); @@ -78,6 +81,7 @@ --border: rgba(234, 240, 238, 0.12); --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45); --glow-animation: rgba(186, 18, 77, 0.45); + --bg-contraste-teal: rgba(0,63,82, 0.5); } /* ============================================ @@ -594,12 +598,22 @@ body.menu-open .site-header { height: 36px; width: auto; opacity: 0.95; - transition: opacity 0.2s ease; } .menu-brand img:hover { 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) diff --git a/style/main2.css b/style/main2.css deleted file mode 100644 index a059b43..0000000 --- a/style/main2.css +++ /dev/null @@ -1,1587 +0,0 @@ -/* ============================================ - 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'); - -/* ============================================ - BREAKPOINTS (documentación) - -------------------------------------------- - sm : 480px → móvil pequeño - md : 768px → móvil grande / tablet vertical - lg : 1024px → tablet horizontal / desktop pequeño - ============================================ */ - -/* ============================================ - VARIABLES DE TEMA (modo claro por defecto) - ============================================ */ -:root { - /* Paleta Base / Primitivas de Marca */ - --brand-plum: #221728; - --brand-crimson: #ba124d; - --brand-teal: #003f52; - --brand-sage-light: #eaf0ee; - --brand-rose-muted: #dfbdb9; - - /* Tema Claro (Por Defecto) */ - --bg-base: var(--brand-sage-light); - --bg-surface: #ffffff; - --bg-surface-elevated: #f5f9f8; - - --text-primary: var(--brand-plum); - --text-secondary: var(--brand-teal); - --text-muted: rgba(34, 23, 40, 0.65); - --text-on-accent: #ffffff; - - --btn-primary-bg: var(--brand-crimson); - --btn-primary-hover: #9c0f40; - --btn-secondary-bg: var(--brand-teal); - --btn-secondary-hover: #002c3a; - - --badge-bg: var(--brand-rose-muted); - --badge-text: var(--brand-plum); - - --border: rgba(0, 63, 82, 0.12); - --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); - --shadow-btn: 0 4px 14px -3px rgba(186, 18, 77, 0.35); - --shadow-btn-hover: 0 6px 20px -3px rgba(186, 18, 77, 0.45); - --glow-animation: rgba(186, 18, 77, 0.25); - - /* Tipografía de Marca */ - --font-title: 'Literata', serif; - --font-subtitle: 'Literata', serif; - --font-body: 'Raleway', sans-serif; - --font-small: 'Jost', sans-serif; - --font-signature: 'Windsong', cursive; - - --font-family-base: var(--font-body); - --font-size-base: 16px; - - /* Espaciados */ - --spacing-xs: 0.5rem; - --spacing-sm: 1rem; - --spacing-md: 2rem; - --spacing-lg: 4rem; - --header-height: 72px; -} - -/* Modo oscuro */ -[data-theme="dark"] { - --bg-base: var(--brand-plum); - --bg-surface: #2d2034; - --bg-surface-elevated: #392842; - - --text-primary: var(--brand-sage-light); - --text-secondary: var(--brand-rose-muted); - --text-muted: rgba(234, 240, 238, 0.65); - --text-on-accent: #ffffff; - - --btn-primary-bg: var(--brand-crimson); - --btn-primary-hover: #d81a5c; - --btn-secondary-bg: #0b5066; - --btn-secondary-hover: #10637d; - - --badge-bg: rgba(223, 189, 185, 0.18); - --badge-text: var(--brand-rose-muted); - - --border: rgba(234, 240, 238, 0.12); - --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45); - --shadow-btn: 0 4px 14px -3px rgba(186, 18, 77, 0.5); - --shadow-btn-hover: 0 6px 20px -3px rgba(216, 26, 92, 0.6); - --glow-animation: rgba(186, 18, 77, 0.45); -} - -/* ============================================ - RESET BÁSICO - ============================================ */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - font-size: var(--font-size-base); - scroll-behavior: smooth; -} - -body { - font-family: var(--font-family-base); - background-color: var(--bg-base); - color: var(--text-primary); - line-height: 1.5; - min-height: 100vh; - display: flex; - flex-direction: column; - transition: background-color 0.3s ease, color 0.3s ease; -} - -h1, h2, h3 { - font-family: var(--font-title); - font-style: italic; - font-weight: 700; -} - -h4, h5, h6 { - font-family: var(--font-subtitle); - font-style: italic; - font-weight: 400; -} - -small { - font-family: var(--font-small); -} - -button, -.btn, -[class*="btn-"] { - font-family: var(--font-small); -} - -.signature, -.firma { - font-family: var(--font-signature); - font-weight: 400; -} - -body.menu-open { - overflow: hidden; - padding-right: var(--scrollbar-width, 0px); -} - -main { - flex: 1; -} - -img, -video { - max-width: 100%; - display: block; -} - -a { - color: inherit; - text-decoration: none; -} - -ul { - list-style: none; -} - -/* ============================================ - UTILIDADES BASE - ============================================ */ - -/* --- Secciones genéricas --- */ -.section { - padding: var(--spacing-lg) var(--spacing-md); - background-color: var(--bg-base); -} - -.section-header { - text-align: center; - max-width: 700px; - margin: 0 auto var(--spacing-lg); -} - -.section-title { - font-family: var(--font-title); - font-style: italic; - font-size: clamp(2rem, 4vw, 3rem); - color: var(--text-primary); - line-height: 1.15; - margin-bottom: var(--spacing-sm); -} - -.section-subtitle { - font-family: var(--font-body); - font-size: 1.1rem; - color: var(--text-muted); - line-height: 1.6; -} - -/* --- Botones reutilizables --- */ -.btn { - display: inline-block; - padding: 0.85rem 2rem; - border-radius: 999px; - font-family: var(--font-small); - font-weight: 600; - font-size: 0.95rem; - text-align: center; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; -} - -.btn-primary { - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); - border: 1.5px solid var(--btn-primary-bg); - box-shadow: var(--shadow-btn); -} - -.btn-primary:hover { - background-color: var(--btn-primary-hover); - border-color: var(--btn-primary-hover); - color: var(--text-on-accent); - transform: translateY(-2px); - box-shadow: var(--shadow-btn-hover); -} - -.btn-secondary { - background-color: transparent; - color: var(--text-primary); - border: 1.5px solid var(--text-secondary); -} - -.btn-secondary:hover { - background-color: var(--bg-surface-elevated); - border-color: var(--btn-primary-bg); - color: var(--btn-primary-bg); - transform: translateY(-2px); -} - -/* ============================================ - HEADER Y LOGOS - ============================================ */ -.site-header { - background-color: var(--bg-surface); - border-bottom: 1px solid var(--border); - padding: var(--spacing-sm); - position: sticky; - top: 0; - z-index: 100; - box-shadow: var(--shadow); -} - -.main-nav { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1400px; - margin: 0 auto; -} - -.logo { - display: flex; - align-items: center; -} - -.logo img { - height: 40px; - width: auto; -} - -.logo-light { - display: block; -} - -.logo-dark { - display: none; -} - -[data-theme="dark"] .logo-light { - display: none; -} - -[data-theme="dark"] .logo-dark { - display: block; -} - -/* ============================================ - BOTONES DE NAVEGACIÓN (HEADER) - ============================================ */ -.nav-actions { - display: flex; - gap: var(--spacing-sm); - align-items: center; -} - -/* Botón Menú */ -.menu-toggle { - background: none; - border: 1px solid var(--border); - color: var(--text-primary); - padding: 0.45rem 1.1rem; - cursor: pointer; - font-size: 0.95rem; - font-weight: 500; - border-radius: 24px; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - transition: all 0.3s ease; -} - -.menu-toggle:hover { - background-color: var(--bg-surface-elevated); - border-color: var(--text-primary); -} - -.menu-icon { - width: 18px; - height: 18px; - display: block; - flex-shrink: 0; - transition: transform 0.2s ease; -} - -.menu-toggle:hover .menu-icon { - transform: scale(1.08); -} - -/* Botón Switch Tema (Circular) */ -.theme-toggle { - background: none; - border: 1px solid var(--border); - color: var(--text-primary); - padding: 0; - width: 40px; - height: 40px; - cursor: pointer; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - transition: all 0.3s ease; -} - -.theme-toggle:hover { - background-color: var(--bg-surface-elevated); - border-color: var(--text-primary); -} - -.theme-icon { - width: 20px; - height: 20px; - display: block; - position: absolute; - transition: transform 0.5s ease, opacity 0.5s ease; -} - -/* Estado por defecto (claro) */ -.icon-sun { - opacity: 0; - transform: rotate(180deg); - pointer-events: none; -} - -.icon-moon { - opacity: 1; - transform: rotate(0deg); - pointer-events: auto; -} - -/* Estado oscuro */ -[data-theme="dark"] .icon-sun { - opacity: 1; - transform: rotate(0deg); - pointer-events: auto; -} - -[data-theme="dark"] .icon-moon { - opacity: 0; - transform: rotate(-180deg); - pointer-events: none; -} - -/* ============================================ - MENÚ DESPLEGABLE (CON EFECTO AURORA) - ============================================ */ -.menu-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(34, 23, 40, 0.55); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - opacity: 0; - visibility: hidden; - transition: opacity 0.3s ease, visibility 0.3s ease; - z-index: 998; -} - -.menu-overlay.is-open { - opacity: 1; - visibility: visible; -} - -.fullscreen-menu { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - height: 52vh; - background-color: var(--bg-surface); - border-top: 1px solid var(--border); - border-top-left-radius: 20px; - border-top-right-radius: 20px; - transform: translateY(100%); - transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; - z-index: 999; - overflow: hidden; - padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm); - box-shadow: 0 -10px 40px -5px rgba(0, 0, 0, 0.2); - isolation: isolate; -} - -.fullscreen-menu.is-open { - transform: translateY(0); -} - -/* Aurora esmeralda / salvia */ -.fullscreen-menu::before { - content: ""; - position: absolute; - top: -40%; - left: -20%; - width: 140%; - height: 180%; - pointer-events: none; - z-index: -2; - filter: blur(55px); - border-radius: 50%; - opacity: 0.35; - background: radial-gradient( - ellipse at center, - rgba(0, 168, 140, 0.32) 0%, - rgba(0, 63, 82, 0.12) 45%, - transparent 70% - ); - will-change: transform; - animation: aurora-stream-1 18s ease-in-out infinite alternate; -} - -[data-theme="dark"] .fullscreen-menu::before { - opacity: 0.42; - mix-blend-mode: screen; - background: radial-gradient( - ellipse at center, - rgba(0, 220, 160, 0.35) 0%, - rgba(11, 80, 102, 0.28) 45%, - transparent 70% - ); -} - -/* Botón de cierre */ -.menu-close { - position: absolute; - z-index: 1; - top: var(--spacing-sm); - right: var(--spacing-md); - background: none; - border: 1px solid var(--border); - color: var(--text-primary); - font-size: 1.1rem; - width: 36px; - height: 36px; - cursor: pointer; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.25s ease; -} - -.menu-close:hover { - background-color: var(--bg-surface-elevated); - border-color: var(--text-primary); - transform: rotate(90deg); -} - -/* Contenedor y columnas internas */ -.menu-content { - position: relative; - z-index: 2; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-lg); - max-width: 1200px; - margin: 0 auto; - padding-top: 0.5rem; - max-height: 100%; - overflow-y: auto; -} - -.menu-column h3 { - font-family: var(--font-small); - font-style: normal; - font-size: 0.85rem; - letter-spacing: 1.2px; - text-transform: uppercase; - margin-bottom: var(--spacing-sm); - color: var(--text-secondary); - font-weight: 700; - border-bottom: 1px solid var(--border); - padding-bottom: 0.4rem; -} - -.menu-column ul { - display: flex; - flex-direction: column; - gap: 0.35rem; -} - -.menu-column a { - color: var(--text-primary); - font-size: 0.95rem; - padding: 0.25rem 0; - display: inline-block; - transition: transform 0.2s ease, color 0.2s ease; -} - -/* Solo links de navegación (no botones) reciben el desplazamiento */ -.menu-column ul a:hover { - color: var(--btn-primary-bg); - transform: translateX(4px); -} - -/* Columna 3 - Info de Contacto */ -.menu-contact-info { - margin-bottom: var(--spacing-sm); -} - -.menu-contact-info p { - margin-bottom: 0.35rem; - color: var(--text-muted); - font-size: 0.9rem; -} - -.contact-item { - display: flex; - align-items: center; - gap: 0.6rem; - color: var(--text-primary); -} - -.contact-icon { - width: 20px; - height: 16px; - display: inline-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-email { - -webkit-mask-image: url("../assets/iconos/buzon.svg"); - mask-image: url("../assets/iconos/buzon.svg"); -} - -.icon-phone { - -webkit-mask-image: url("../assets/iconos/contacto.svg"); - mask-image: url("../assets/iconos/contacto.svg"); -} - -.menu-social { - display: flex; - gap: var(--spacing-sm); - margin: var(--spacing-xs) 0 var(--spacing-sm); -} - -.menu-social a { - font-size: 0.85rem; - font-weight: 600; - color: var(--text-secondary); -} - -/* Botones del Menú */ -.menu-buttons { - display: flex; - flex-direction: column; - gap: 0.65rem; -} - -.btn-menu { - display: block; - padding: 0.65rem 1.2rem; - text-align: center; - border-radius: 999px; - font-weight: 600; - font-size: 0.9rem; - transition: all 0.25s ease; -} - -.menu-buttons .btn-menu-primary { - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); - border: 1.5px solid var(--btn-primary-bg); - box-shadow: var(--shadow-btn); -} - -.menu-buttons .btn-menu-primary:hover { - background-color: var(--btn-primary-hover); - border-color: var(--btn-primary-hover); - color: var(--text-on-accent); - transform: translateY(-1px); -} - -.menu-buttons .btn-menu-secondary { - background-color: transparent; - border: 1.5px solid var(--text-secondary); - color: var(--text-primary); -} - -.menu-buttons .btn-menu-secondary:hover { - background-color: var(--bg-surface-elevated); - border-color: var(--btn-primary-bg); - color: var(--btn-primary-bg); - transform: translateY(-1px); -} - -/* Logo en el menú (alineado a la derecha) */ -.menu-brand { - margin-top: 1.75rem; - display: flex; - justify-content: flex-end; - align-items: center; -} - -.menu-brand img { - height: 36px; - width: auto; - opacity: 0.95; - transition: opacity 0.2s ease; -} - -.menu-brand img:hover { - opacity: 1; -} - -/* ============================================ - SECCIÓN HERO - ============================================ */ -.hero-section { - min-height: calc(100vh - var(--header-height)); - background-color: var(--bg-base); - display: flex; - align-items: center; - justify-content: center; - padding: var(--spacing-lg) var(--spacing-md); - text-align: center; -} - -.hero-content { - max-width: 900px; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - gap: var(--spacing-md); -} - -.hero-title { - font-family: var(--font-title); - font-style: italic; - font-weight: 700; - font-size: clamp(2rem, 5vw, 3.5rem); - line-height: 1.15; - color: var(--text-primary); - opacity: 0; - transform: translateY(30px); - animation: fadeInUp 0.9s ease-out 0.2s forwards; -} - -.hero-subtitle { - font-family: var(--font-title); - font-style: italic; - font-weight: 400; - font-size: clamp(1rem, 2vw, 1.25rem); - line-height: 1.5; - color: var(--text-muted); - max-width: 700px; - opacity: 0; - transform: translateY(30px); - animation: fadeInUp 0.9s ease-out 0.5s forwards; -} - -.hero-cta-group { - display: flex; - gap: var(--spacing-sm); - flex-wrap: wrap; - justify-content: center; - margin-top: var(--spacing-sm); - opacity: 0; - transform: translateY(30px); - animation: fadeInUp 0.9s ease-out 0.8s forwards; -} - -.hero-cta-primary { - animation: attentionShake 6s ease-in-out infinite; -} - -.hero-cta-primary:hover { - animation-play-state: paused; -} - -/* ============================================ - SECCIÓN SERVICIOS (ACORDEÓN INTERACTIVO) - ============================================ */ -.servicios-container { - display: grid; - grid-template-columns: 1fr 1.5fr; - gap: var(--spacing-lg); - max-width: 1400px; - margin: 0 auto; - align-items: center; - min-height: 600px; -} - -.servicios-intro { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - align-items: flex-start; -} - -.servicios-intro .btn { - margin-top: var(--spacing-sm); -} - -/* Columna Derecha: Acordeón */ -.servicios-accordion { - position: relative; - width: 100%; - height: 600px; - background-color: var(--bg-surface); - border-radius: 16px; - padding: var(--spacing-md); - box-shadow: var(--shadow); - border: 1px solid var(--border); - display: flex; - flex-direction: column; - gap: var(--spacing-xs); - overflow: hidden; -} - -.servicio-item { - flex: 1; - background-color: var(--bg-surface-elevated); - border-radius: 12px; - padding: var(--spacing-sm) var(--spacing-md); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - cursor: pointer; - border: 1px solid var(--border); - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - overflow: hidden; - position: relative; - min-height: 0; -} - -.servicio-item:hover:not(.is-active) { - background-color: var(--bg-surface); - border-color: var(--text-secondary); - transform: translateX(4px); -} - -/* Estado colapsado cuando hay uno activo (declarado antes del activo para claridad) */ -.servicios-accordion.has-active .servicio-item:not(.is-active) { - flex: 0; - min-height: 0; - padding: 0 var(--spacing-md); - opacity: 0; - pointer-events: none; - border-color: transparent; -} - -/* Estado activo (expandido) */ -.servicio-item.is-active { - flex: 10; - background-color: var(--bg-surface-elevated); - box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.1); - border-color: var(--btn-primary-bg); -} - -.servicio-header { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-sm); - width: 100%; - transition: opacity 0.3s ease; -} - -.servicio-icon { - width: 32px; - height: 32px; - object-fit: contain; - flex-shrink: 0; - display: inline-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-branding { - -webkit-mask-image: url("../assets/iconos/branding.svg"); - mask-image: url("../assets/iconos/branding.svg"); -} -.icon-rrss { - -webkit-mask-image: url("../assets/iconos/redes_sociales.svg"); - mask-image: url("../assets/iconos/redes_sociales.svg"); -} -.icon-web { - -webkit-mask-image: url("../assets/iconos/web.svg"); - mask-image: url("../assets/iconos/web.svg"); -} -.icon-auto { - -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"); -} -.icon-add { - -webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); - mask-image: url("../assets/iconos/ad_hoc.svg"); -} - -.servicio-title-short { - font-family: var(--font-title); - font-style: italic; - font-size: 1.1rem; - color: var(--text-primary); - font-weight: 700; - white-space: nowrap; -} - -.servicio-content { - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - gap: var(--spacing-sm); - width: 100%; - max-width: 500px; - height: 100%; - padding: var(--spacing-md); - opacity: 0; - transform: translateY(10px); - transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; -} - -.servicio-item.is-active .servicio-header { - display: none; -} - -.servicio-item.is-active .servicio-content { - display: flex; - opacity: 1; - transform: translateY(0); -} - -.servicio-icon-large { - width: 64px; - height: 64px; - object-fit: contain; - margin-bottom: var(--spacing-xs); - display: inline-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; -} - -.servicio-title-long { - font-family: var(--font-title); - font-style: italic; - font-size: clamp(1.5rem, 2.5vw, 2rem); - color: var(--text-primary); - font-weight: 700; - line-height: 1.2; - text-align: center; -} - -.servicio-description { - font-family: var(--font-body); - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - text-align: center; - max-width: 450px; -} - -.servicio-content .btn { - margin-top: var(--spacing-xs); -} - -.servicio-close { - position: absolute; - top: var(--spacing-sm); - right: var(--spacing-sm); - background: none; - border: 1px solid var(--border); - color: var(--text-muted); - font-size: 1.2rem; - cursor: pointer; - width: 36px; - height: 36px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.25s ease; - z-index: 5; -} - -.servicio-close:hover { - color: var(--btn-primary-bg); - background-color: var(--bg-surface); - border-color: var(--btn-primary-bg); - transform: rotate(90deg); -} - -/* ============================================ - SECCIÓN DIAGNÓSTICO - ============================================ */ -.diagnostico-card { - max-width: 800px; - margin: 0 auto; - background-color: var(--bg-surface); - border-radius: 16px; - padding: var(--spacing-md); - box-shadow: var(--shadow); - border: 1px solid var(--border); -} - -.progreso-wrapper { - margin-bottom: var(--spacing-md); -} - -.progreso-barra { - width: 100%; - height: 8px; - background-color: var(--border); - border-radius: 4px; - overflow: hidden; - margin-bottom: var(--spacing-xs); -} - -.progreso-barra-completado { - height: 100%; - background-color: var(--btn-primary-bg); - width: 0%; - transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); - border-radius: 4px; -} - -.progreso-texto { - font-family: var(--font-small); - font-size: 0.85rem; - color: var(--text-secondary); - text-align: right; -} - -.pregunta-contenedor { - animation: fadeIn 0.4s ease; -} - -.pregunta-titulo { - font-family: var(--font-subtitle); - font-size: 1.35rem; - color: var(--text-primary); - margin-bottom: var(--spacing-md); - font-weight: 400; - line-height: 1.3; -} - -.opciones-contenedor { - display: grid; - grid-template-columns: 1fr; - gap: var(--spacing-sm); -} - -.opcion-tarjeta { - background-color: var(--bg-surface-elevated); - border: 2px solid var(--border); - border-radius: 12px; - padding: var(--spacing-sm); - cursor: pointer; - transition: all 0.25s ease; - font-family: var(--font-body); - font-size: 0.95rem; - color: var(--text-primary); - text-align: left; - width: 100%; -} - -.opcion-tarjeta:hover { - border-color: var(--btn-primary-bg); - background-color: var(--bg-surface); - transform: translateX(4px); -} - -.opcion-tarjeta:active { - transform: scale(0.98); -} - -.opcion-tarjeta.seleccionada { - border-color: var(--btn-primary-bg); - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); -} - -.btn-reiniciar { - background: none; - border: 1.5px solid var(--border); - color: var(--text-secondary); - padding: 0.65rem 1.2rem; - border-radius: 24px; - cursor: pointer; - font-family: var(--font-small); - font-size: 0.9rem; - font-weight: 600; - margin-top: var(--spacing-md); - transition: all 0.25s ease; - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.btn-reiniciar:hover { - border-color: var(--btn-primary-bg); - color: var(--btn-primary-bg); - transform: translateY(-2px); -} - -.resultado-contenedor { - animation: fadeIn 0.5s ease; - background-color: var(--bg-surface-elevated); - border: 2px solid var(--btn-primary-bg); - border-radius: 16px; - padding: var(--spacing-md); - text-align: center; -} - -.resultado-titulo { - font-family: var(--font-title); - font-style: italic; - font-size: clamp(1.5rem, 3vw, 2rem); - color: var(--btn-primary-bg); - margin-bottom: var(--spacing-sm); - font-weight: 700; - line-height: 1.2; -} - -.resultado-diagnostico { - font-size: 1.05rem; - color: var(--text-primary); - margin-bottom: var(--spacing-sm); - line-height: 1.6; -} - -.resultado-solucion { - background-color: var(--bg-surface); - border-left: 4px solid var(--btn-primary-bg); - padding: var(--spacing-sm); - margin: var(--spacing-sm) 0 var(--spacing-md); - text-align: left; - font-size: 0.95rem; - color: var(--text-primary); - border-radius: 0 8px 8px 0; -} - -.resultado-cta { - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); - border: none; - padding: 0.85rem 2rem; - border-radius: 24px; - font-family: var(--font-small); - font-size: 0.95rem; - font-weight: 600; - cursor: pointer; - transition: all 0.25s ease; - box-shadow: var(--shadow-btn); - display: inline-block; -} - -.resultado-cta:hover { - background-color: var(--btn-primary-hover); - transform: translateY(-2px); - box-shadow: var(--shadow-btn-hover); -} - -/* ============================================ - SECCIÓN METODOLOGÍA - ============================================ */ -.metodologia-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--spacing-md); - max-width: 1400px; - margin: 0 auto; -} - -.paso-item { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - transition: all 0.5s ease; - opacity: 0.5; - transform: scale(0.95); -} - -.paso-arco { - position: relative; - width: 100%; - max-width: 120px; - height: 100px; - margin-bottom: var(--spacing-sm); - display: flex; - justify-content: center; - align-items: flex-end; -} - -.arco-svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - background-color: currentColor; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center top; - mask-position: center top; - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-image: url("../assets/vectores/arco.svg"); - mask-image: url("../assets/vectores/arco.svg"); - transition: all 0.5s ease; - filter: grayscale(100%) opacity(0.3); - color: var(--text-muted); -} - -.paso-icono { - position: absolute; - bottom: 10%; - left: 50%; - transform: translateX(-50%); - width: 40px; - height: 40px; - 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; - transition: all 0.5s ease; - filter: grayscale(100%) opacity(0.4); - color: var(--text-muted); -} - -.icon-contacto { - -webkit-mask-image: url("../assets/iconos/contacto.svg"); - mask-image: url("../assets/iconos/contacto.svg"); -} -.icon-propuesta { - -webkit-mask-image: url("../assets/iconos/propuesta.svg"); - mask-image: url("../assets/iconos/propuesta.svg"); -} -.icon-diseno { - -webkit-mask-image: url("../assets/iconos/diseno.svg"); - mask-image: url("../assets/iconos/diseno.svg"); -} -.icon-produccion { - -webkit-mask-image: url("../assets/iconos/produccion.svg"); - mask-image: url("../assets/iconos/produccion.svg"); -} -.icon-revision { - -webkit-mask-image: url("../assets/iconos/revision.svg"); - mask-image: url("../assets/iconos/revision.svg"); -} -.icon-lanzamiento { - -webkit-mask-image: url("../assets/iconos/lanzamiento.svg"); - mask-image: url("../assets/iconos/lanzamiento.svg"); -} - -.paso-info { - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -.paso-titulo { - font-family: var(--font-title); - font-style: italic; - font-size: 1.2rem; - color: var(--text-primary); - font-weight: 700; - transition: all 0.5s ease; -} - -.paso-subtitulo { - font-family: var(--font-body); - font-size: 1rem; - color: var(--text-muted); - transition: all 0.5s ease; -} - -.paso-body { - font-family: var(--font-small); - font-size: 0.85rem; - color: var(--text-muted); - transition: all 0.5s ease; -} - -/* Estados de animación */ -.paso-item.active { - opacity: 1; - transform: scale(1.05); -} - -.paso-item.active .arco-svg { - filter: grayscale(0%) opacity(1); - stroke: var(--brand-crimson); -} - -.paso-item.active .paso-icono { - filter: grayscale(0%) opacity(1); - transform: translateX(-50%) scale(1.1); - color: var(--brand-crimson); -} - -.paso-item.active .paso-titulo { - color: var(--brand-crimson); - font-weight: 700; -} - -.paso-item.active .paso-subtitulo { - color: var(--text-primary); - font-weight: 500; -} - -.paso-item.previous { - opacity: 0.75; - transform: scale(1); -} - -.paso-item.previous .arco-svg { - filter: grayscale(0%) opacity(0.7); - stroke: var(--brand-rose-muted); -} - -.paso-item.previous .paso-icono { - filter: grayscale(0%) opacity(0.8); -} - -.paso-item.previous .paso-titulo { - color: var(--brand-teal); -} - -.paso-item.previous .paso-subtitulo { - color: var(--text-muted); -} - -/* ============================================ - FOOTER - ============================================ */ -.site-footer { - border-top: 1px solid var(--border); - padding: var(--spacing-md) var(--spacing-sm); - margin-top: auto; - background-color: var(--bg-surface); -} - -.footer-content { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: var(--spacing-md); - margin-bottom: var(--spacing-md); - max-width: 1400px; - margin-left: auto; - margin-right: auto; -} - -.footer-col h4 { - margin-bottom: var(--spacing-xs); - color: var(--text-secondary); -} - -.footer-bottom { - border-top: 1px solid var(--border); - padding-top: var(--spacing-sm); - text-align: center; - font-size: 0.875rem; - color: var(--text-muted); -} - -/* ============================================ - ANIMACIONES (KEYFRAMES) - ============================================ */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(30px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes attentionShake { - 0%, 85%, 100% { - transform: translateX(0) rotate(0deg); - } - 87% { - transform: translateX(-4px) rotate(-1deg); - } - 89% { - transform: translateX(4px) rotate(1deg); - } - 91% { - transform: translateX(-3px) rotate(-0.5deg); - } - 93% { - transform: translateX(3px) rotate(0.5deg); - } - 95% { - transform: translateX(0) rotate(0deg); - } -} - -@keyframes aurora-stream-1 { - 0% { - transform: translate(0, 0) rotate(0deg) scale(1); - } - 50% { - transform: translate(7%, 8%) rotate(10deg) scale(1.1); - } - 100% { - transform: translate(-5%, -6%) rotate(-6deg) scale(0.96); - } -} - -@keyframes aurora-stream-2 { - 0% { - transform: translate(0, 0) rotate(0deg) scale(1); - } - 50% { - transform: translate(-8%, -5%) rotate(-12deg) scale(1.14); - } - 100% { - transform: translate(6%, 7%) rotate(8deg) scale(0.94); - } -} - -/* ============================================ - ACCESIBILIDAD — movimiento reducido - ============================================ */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} - -/* ============================================ - RESPONSIVE — agrupado por breakpoint - Orden: mayor → menor - ============================================ */ - -/* ---------- max-width: 1024px ---------- */ -@media (max-width: 1024px) { - .metodologia-grid { - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-md); - } -} - -/* ---------- max-width: 768px ---------- */ -@media (max-width: 768px) { - /* Menú */ - .fullscreen-menu { - height: 85vh; - padding: var(--spacing-md); - padding-bottom: var(--spacing-lg); - } - - .menu-content { - grid-template-columns: 1fr; - gap: var(--spacing-md); - } - - .menu-column h3 { - font-size: 1.1rem; - } - - .menu-column a { - font-size: 1rem; - } - - /* Hero */ - .hero-section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .hero-cta-group { - flex-direction: column; - width: 100%; - max-width: 320px; - } - - .btn { - width: 100%; - } - - /* Servicios */ - .servicios-container { - grid-template-columns: 1fr; - gap: var(--spacing-md); - min-height: auto; - } - - .servicios-accordion { - height: 500px; - } - - .servicios-intro { - text-align: center; - align-items: center; - } - - /* Diagnóstico */ - .section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .diagnostico-card { - padding: var(--spacing-sm); - } - - .section-title { - font-size: 1.75rem; - } - - .section-subtitle { - font-size: 1rem; - } - - .pregunta-titulo { - font-size: 1.15rem; - } - - .opcion-tarjeta { - font-size: 0.9rem; - padding: var(--spacing-xs); - } - - .resultado-titulo { - font-size: 1.4rem; - } - - .resultado-solucion { - font-size: 0.9rem; - } - - /* Metodología */ - .metodologia-grid { - grid-template-columns: repeat(2, 1fr); - gap: var(--spacing-sm); - } - - .paso-arco { - max-width: 100px; - } - - .paso-icono { - width: 32px; - height: 32px; - } - - .paso-titulo { - font-size: 1rem; - } - - .paso-subtitulo { - font-size: 0.8rem; - } -} - -/* ---------- max-width: 480px ---------- */ -@media (max-width: 480px) { - /* Menú */ - .fullscreen-menu { - height: 90vh; - } - - /* Servicios */ - .servicios-accordion { - height: 450px; - padding: var(--spacing-sm); - } - - .servicio-title-short { - font-size: 0.95rem; - } - - .servicio-title-long { - font-size: 1.3rem; - } - - .servicio-icon-large { - width: 48px; - height: 48px; - } - - /* Diagnóstico */ - .diagnostico-card { - padding: var(--spacing-sm); - border-radius: 12px; - } - - .opcion-tarjeta { - padding: var(--spacing-xs); - font-size: 0.85rem; - } - - /* Metodología */ - .metodologia-grid { - grid-template-columns: 1fr; - max-width: 300px; - } -} \ No newline at end of file diff --git a/style/servicios.css b/style/servicios.css new file mode 100644 index 0000000..c5883c4 --- /dev/null +++ b/style/servicios.css @@ -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; + } +} \ No newline at end of file