diff --git a/contacto.html b/contacto.html index 4a35602..3194b8b 100644 --- a/contacto.html +++ b/contacto.html @@ -3,62 +3,245 @@ - - Contacto - [Nombre de la agencia] + + Contacto | Amor y Roma — Agencia Boutique
- -
-

Contacto

-

Contenido pendiente de definir.

+ +
+
+ +

Hablemos de tu proyecto

+

+ Contanos dónde estás parado y hacia dónde querés ir.
+ Te respondemos en menos de 48 horas hábiles con una lectura inicial. +

+
+ Completar formulario + + Escribinos por WhatsApp + +
+
- -
-

Escríbenos

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

Contanos sobre tu marca

+

Cuanta más información nos des, más precisa será nuestra lectura inicial.

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

+ Te respondemos en menos de 48 horas hábiles. Sin spam, sin llamadas en frío. +

+ +
- -
-

Síguenos

- + +
+
+

Qué pasa después de tu mensaje

+

+ +
+ +
+
+
01
+

Lectura inicial

+

Analizamos tu mensaje y tu situación actual. Si vemos que podemos aportar valor real, te agendamos una llamada de diagnóstico.

+
+
+
02
+

Diagnóstico estratégico

+

Sesión de 30–45 minutos para entender en profundidad tu marca, objetivos y desafíos. Sin costo y sin compromiso.

+
+
+
03
+

Propuesta a medida

+

Te enviamos una propuesta detallada con alcance, tiempos, inversión y entregables. Solo avanzamos si hay encaje mutuo.

+
+
- -
-

¿Prefieres WhatsApp?

- - Escríbenos por WhatsApp - + +
+
+
+ Presupuesto publicitario aparte +

La inversión en Meta Ads, Google Ads u otras plataformas se abona directamente a cada proveedor. Nuestros honorarios cubren estrategia, creatividades y optimización.

+
+
+ Capacidad controlada +

Trabajamos con un número limitado de cuentas por mes para garantizar la calidad boutique. Si no podemos tomar tu proyecto ahora, te lo decimos con transparencia.

+
+
+ Cero plantillas +

Cada propuesta es única. No vendemos paquetes cerrados: diseñamos la solución que tu marca necesita en su etapa actual.

+
+
+
+ + +
+
+

¿Preferís una conversación directa?

+

Agendá una llamada de 15 minutos sin compromiso. Ideal si tenés dudas o querés validar si somos el equipo adecuado para tu proyecto.

+
+ Agendar llamada + Escribir por WhatsApp +
+
@@ -66,5 +249,8 @@ + + + \ No newline at end of file diff --git a/includes/footer.html b/includes/footer.html index c50817e..b1c3bb3 100644 --- a/includes/footer.html +++ b/includes/footer.html @@ -16,7 +16,7 @@
  • Inicio
  • Servicios
  • Planes
    • -
  • Portfolio
    • +
  • Portfolio
  • Blog
    • diff --git a/includes/menu.html b/includes/menu.html index 29778a4..27bf2a3 100644 --- a/includes/menu.html +++ b/includes/menu.html @@ -38,6 +38,7 @@
  • Comencemos
  • Qué hacemos?
  • Diagnóstico
    • +
  • Método A&R
  • Destacados
  • Desafios
    • @@ -50,7 +51,7 @@
  • Inicio
  • Servicios
  • Planes
    • -
  • Portfolio
    • +
  • Nosotros
  • Blog
  • Contacto
    • diff --git a/inicio.html b/inicio.html index 1cedf43..92d6152 100644 --- a/inicio.html +++ b/inicio.html @@ -30,7 +30,7 @@

    Soluciones digitales diseñadas para hacer crecer tu negocio

    -

    Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.

    +

    Podemos potenciar tu marca en cada etapa de su crecimiento.

    Ver todos los servicios
    @@ -133,32 +133,52 @@

    ¿Cuál es el siguiente paso estratégico para tu negocio?

    -

    Un recorrido de orientación diseñado para entender el momento actual de tu marca,
    y definir con precisión quirúrgica la solución que necesitas.

    +

    Un recorrido de orientación diseñado para entender el momento actual de tu marca, y definir con precisión quirúrgica la solución que necesitás.

    - +
    - -
    -
    -
    + + +
    +
    +
    -
    Pregunta 1 de 4
    +

    Diagnóstico Express

    +

    + Respondé 4 preguntas rápidas y te vamos a recomendar el servicio ideal para el momento en que está tu marca. +

    +
      +
    • ⏱ 2 minutos
      • +
    • 🎯 Recomendación personalizada
      • +
    • 💬 Sin compromiso
      • +
    +
    - - -
    - + + + - - - - - + + +
    @@ -338,7 +358,7 @@

    Nuestros últimos desafíos

    Cada proyecto es una oportunidad para crear algo único y memorable

    - Ver portfolio completo +
    @@ -346,35 +366,6 @@
    -
    -
    - Branding - Identidad Visual - Manual de Marca - Redes Sociales - Contenido Audiovisual - Paid Media - Estrategia Digital -
    -
    - Mordi -
    -
    - - -
    -
    - Web - UX/UI - Apertura de Redes - SEO -
    -
    - ArWork's -
    -
    - -
    Diseño Web @@ -385,7 +376,7 @@
    - +
    Branding @@ -401,6 +392,36 @@
    + +
    +
    + Branding + Creación de personaje + Identidad Visual + Manual de Marca + Redes Sociales + Contenido Audiovisual + Paid Media + Estrategia Digital +
    +
    + Mordi +
    +
    + + +
    +
    + Web + UX/UI + Apertura de Redes + SEO +
    +
    + ArWork's +
    +
    +
    @@ -510,6 +531,6 @@ - + \ No newline at end of file diff --git a/nosotros.html b/nosotros.html index bd31c13..4302e31 100644 --- a/nosotros.html +++ b/nosotros.html @@ -3,22 +3,237 @@ - - Nosotros - [Nombre de la agencia] + + Nosotros | Amor y Roma — Agencia Boutique
    -

    Sección 1

    Contenido pendiente de definir.

    -

    Sección 2

    Contenido pendiente de definir.

    -

    Sección 3

    Contenido pendiente de definir.

    + +
    +
    +

    Amor & Roma

    +

    + No somos una agencia tradicional.
    Combinamos el arte del marketing digital con la ciencia de los datos. +

    +
    + Descubre nuestra dualidad + Hablemos de tu proyecto +
    +
    +
    + + +
    +
    +

    Nuestra Dualidad Estratégica

    +

    El nombre de nuestra agencia no responde a una visión romántica tradicional, sino a dos pilares operativos inseparables.

    +
    +
    +
    +
    +

    Amor

    + La Pasión y el Arte +

    Representa la chispa creativa, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. Es el alma y la identidad de cada marca.

    +
    +
    +
    +

    Roma

    + La Construcción y la Estructura +

    Representa la arquitectura, la solidez, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. Es el imperio que sostiene esa visión.

    +
    +
    +
    + + +
    +
    +

    Mentes creativas, con mucha energía.

    +

    Combinamos el arte del Marketing con la Ciencia de los datos.

    +
    + +
    + +
    +
    Patricia Pugliese
    + Estrategia & Creatividad +

    + Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad. +

    +
    + + +
    +
    Francisco Anfuso
    + Desarrollo & Tecnología +

    + Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones. +

    +
    +
    + +

    + Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta. +

    +
    + + +
    +
    +

    El Posicionamiento "Boutique"

    +

    Ser una agencia boutique implica tres principios rectores que protegen la calidad y el resultado de tu proyecto.

    +
    +
    +
    +
    01
    +

    Cero plantillas prefabricadas

    +

    Cada diseño, arquitectura web o plan de contenidos se crea a medida de la identidad, necesidades y madurez real de tu negocio.

    +
    +
    +
    02
    +

    Capacidad controlada de cuentas

    +

    Priorizamos la profundidad operativa sobre el volumen desmedido de clientes, garantizando atención directa y personalización real.

    +
    +
    +
    03
    +

    Foco visual y de contenido

    +

    Aunque la automatización es clave, nuestro valor diferencial perceptible está en el criterio estético, la narrativa visual y la calidad de producción.

    +
    +
    +
    + + +
    +
    +

    Transparencia antes de la primera reunión

    +

    Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.

    +
    + +
    + +
    +
    + + + + +
    +

    INVERSIÓN

    +

    Desde $250.000/mes

    +

    + Planes desde $250.000 (Esencial) hasta $1.000.000 (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto. +

    +
    + + +
    +
    + + + + +
    +

    TIEMPOS

    +

    15-30 días

    +

    + Presencia digital lista en 15-30 días. Resultados de posicionamiento sostenido en 3-6 meses. Sin promesas de magia inmediata. +

    +
    + + +
    +
    + + + + +
    +

    CONTRATO

    +

    3 meses · luego mensual

    +

    + Compromiso mínimo de 3 meses para que la estrategia tome forma, luego renovación mensual. Cancelación con 30 días de aviso. +

    +
    +
    +
    + + +
    +
    +

    Matriz de Soluciones

    +

    Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.

    +
    + +
    + +
    +
    + Arquetipo 1 +

    Identidad Integral

    +
    +

    Desarrollo de marca completo, mascota propia y administración continua de redes.

    +
    + Lección: Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria. +
    +
    + + +
    +
    + Arquetipo 2 +

    Infraestructura B2B

    +
    +

    Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.

    +
    + Lección: Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos. +
    +
    + + +
    +
    + Arquetipo 3 (Insígnia) +

    Ecosistema Digital Completo

    +
    +

    Empresa de Tecnología: Branding + Web a medida + RRSS activas.

    +
    + Lección: Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo. +
    +
    + + +
    +
    + Arquetipo 4 +

    Profesionalización de Servicios

    +
    +

    Consultores Independientes: Web a medida + Gestión estratégica de RRSS.

    +
    + Lección: El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza. +
    +
    +
    +
    + + +
    +
    +

    ¿Listo para construir tu imperio con esencia?

    +

    Agendemos una reunión. Sin plantillas, sin compromisos, solo estrategia a medida.

    +
    + Hablemos de tu proyecto + Ver Casos de Éxito +
    +
    +
    + \ No newline at end of file diff --git a/planes.html b/planes.html index 68656cf..964735e 100644 --- a/planes.html +++ b/planes.html @@ -3,26 +3,507 @@ - - Planes - [Nombre de la agencia] + + + Planes - 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.

    + +
    +
    + Planes de Redes Sociales +

    Gestión profesional de tus redes

    +

    Elegí el plan que se adapte a tu etapa de crecimiento. Todos incluyen estrategia, diseño y dirección de arte personalizada.

    + Ver planes disponibles +
    +
    + + +
    +
    + +
    + + + + +
    + + +
    + + + + +
    +
    +
    + + +
    +
    + + +
    +
    + Para emprendedores iniciales +

    Plan Esencial

    +

    Ordená y profesionalizá tu imagen digital con una presencia activa y coherente.

    +
    + +
    + +
    +

    Generación de Contenido

    +
      +
    • 8 piezas gráficas/carruseles mensuales
      • +
    • 4 historias estratégicas por semana
      • +
    • Dirección de arte básica
      • +
    +
    + + +
    +

    Copywriting & Arte

    +
      +
    • Guías de estilo básicas
      • +
    • Redacción de copys directos
      • +
    • Identidad visual coherente
      • +
    +
    + + +
    +

    Automatizaciones

    +
      +
    • Configuración de respuestas automáticas
      • +
    • FAQ en DM
      • +
    • Flujos avanzados no incluidos
      • +
    +
    + + +
    +

    Paid Media (Ads)

    +
      +
    • No incluye (orgánico puro)
      • +
    • Disponible como add-on
      • +
    +
    + + +
    +

    Gestión y Moderación

    +
      +
    • Programación de contenido
      • +
    • Publicación en horarios óptimos
      • +
    • Moderación de comunidad no incluida
      • +
    +
    + + +
    +

    Reportes y Feedback

    +
      +
    • Reporte mensual cuantitativo automatizado
      • +
    • Métricas básicas de alcance e interacción
      • +
    +
    +
    + + +
    +
    + Inversión mensual +
    + $ + 250.000 + /mes +
    +
    + Contratar este plan +
    +
    + + +
    +
    + Para pequeños negocios en validación +

    Plan Impulso

    +

    Crecé tu comunidad y generá engagement mediante formatos dinámicos y contenido persuasivo.

    +
    + +
    +
    +

    Generación de Contenido

    +
      +
    • 8 piezas gráficas/carruseles mensuales
      • +
    • 4 Reels/TikToks producidos
      • +
    • 6 historias estratégicas por semana
      • +
    +
    + +
    +

    Copywriting & Arte

    +
      +
    • Copywriting persuasivo
      • +
    • Dirección de arte personalizada
      • +
    • Guiones de video básicos
      • +
    +
    + +
    +

    Automatizaciones

    +
      +
    • Flujo automatizado de bienvenida
      • +
    • Derivación a WhatsApp
      • +
    • Cualificación avanzada no incluida
      • +
    +
    + +
    +

    Paid Media (Ads)

    +
      +
    • Configuración de 1 campaña
      • +
    • Tráfico o alcance local
      • +
    • Monitoreo básico
      • +
    +
    + +
    +

    Gestión y Moderación

    +
      +
    • Programación de contenido
      • +
    • Moderación de comentarios y DMs
      • +
    • Horarios comerciales
      • +
    +
    + +
    +

    Reportes y Feedback

    +
      +
    • Reporte mensual con análisis básico
      • +
    • Métricas clave de engagement
      • +
    +
    +
    + +
    +
    + Inversión mensual +
    + $ + 420.000 + /mes +
    +
    + Contratar este plan +
    +
    + + +
    +
    + Para PyMEs con tracción comercial +

    Plan Premium

    +

    Posicionate como referente en tu sector con contenido de alta producción y estrategia de conversión.

    +
    + +
    +
    +

    Generación de Contenido

    +
      +
    • 10 piezas gráficas/carruseles mensuales
      • +
    • 8 Reels/TikToks producidos
      • +
    • Historias diarias (días hábiles)
      • +
    +
    + +
    +

    Copywriting & Arte

    +
      +
    • Storytelling avanzado
      • +
    • Guiones de video profesionales
      • +
    • Diseño editorial premium
      • +
    +
    + +
    +

    Automatizaciones

    +
      +
    • Flujos de cualificación de leads
      • +
    • Integración básica a base de datos
      • +
    • Respuestas por palabras clave
      • +
    +
    + +
    +

    Paid Media (Ads)

    +
      +
    • Gestión y optimización de campañas
      • +
    • Conversión y captación de prospectos
      • +
    • A/B testing de creatividades
      • +
    +
    + +
    +

    Gestión y Moderación

    +
      +
    • Moderación activa de comunidad
      • +
    • Gestión de consultas comerciales
      • +
    • Respuesta en menos de 24hs
      • +
    +
    + +
    +

    Reportes y Feedback

    +
      +
    • Reporte mensual cualitativo
      • +
    • Reunión de alineación estratégica (30 min)
      • +
    • Análisis de ROI y recomendaciones
      • +
    +
    +
    + +
    +
    + Inversión mensual +
    + $ + 650.000 + /mes +
    +
    + Contratar este plan +
    +
    + + +
    +
    + Para empresas medianas consolidadas +

    Plan Élite

    +

    Liderazgo de mercado, dirección de arte exclusiva y embudo publicitario avanzado multicanal.

    +
    + +
    +
    +

    Generación de Contenido

    +
      +
    • 12 piezas gráficas/carruseles premium
      • +
    • 12 Reels/TikToks de alta producción
      • +
    • Cobertura diaria integral de historias
      • +
    +
    + +
    +

    Copywriting & Arte

    +
      +
    • Dirección creativa y de arte exclusiva
      • +
    • Guiones con ganchos de alta retención
      • +
    • Producción audiovisual profesional
      • +
    +
    + +
    +

    Automatizaciones

    +
      +
    • Automatizaciones avanzadas multi-paso
      • +
    • Etiquetado de leads
      • +
    • Seguimiento CRM integrado
      • +
    +
    + +
    +

    Paid Media (Ads)

    +
      +
    • Gestión integral de embudo completo
      • +
    • Awareness, Retargeting, Conversión
      • +
    • Meta Ads + Google Ads + TikTok Ads
      • +
    +
    + +
    +

    Gestión y Moderación

    +
      +
    • Protocolo prioritario de atención
      • +
    • Gestión de reputación de marca
      • +
    • Respuesta en menos de 4hs
      • +
    +
    + +
    +

    Reportes y Feedback

    +
      +
    • Dashboard en tiempo real
      • +
    • Reunión mensual ejecutiva
      • +
    • Insights de ROI y KPIs avanzados
      • +
    +
    +
    + +
    +
    + Inversión mensual +
    + $ + 1.000.000 + /mes +
    +
    + Contratar este plan +
    +
    + +
    +
    + + +
    +
    +
    +

    Compará los planes

    +

    Encontrá el plan perfecto para tu negocio

    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    CaracterísticaEsencialImpulsoPremiumÉlite
    Piezas gráficas/mes881012
    Reels/TikToks4812
    Historias/semana46DailyDaily+
    CopywritingBásicoPersuasivoStorytellingExclusivo
    AutomatizacionesBásicasCualificaciónAvanzadas
    Paid Media (Ads)1 campañaMulticanal
    ModeraciónComentariosActivaPrioritaria
    ReportesAutomáticoBásicoCualitativoDashboard
    ReunionesMensual 30minEjecutiva
    Inversión$250k$420k$650k$1M
    +
    +
    +
    + + +
    +
    +

    ¿No sabés cuál plan elegir?

    +

    Hablamos contigo y te recomendamos el plan ideal según tus objetivos y presupuesto.

    +
    + Asesoramiento gratuito + Hacé el diagnóstico +
    +
    +
    + + +
    - + \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index ede5e6f..ebdfa29 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -190,224 +190,282 @@ document.addEventListener('DOMContentLoaded', async () => { }); /* ============================================ -LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO +DIAGNÓSTICO INTERACTIVO ============================================ */ +function initDiagnostico() { + // Elementos del DOM + const bienvenida = document.getElementById('diagnostico-bienvenida'); + const quiz = document.getElementById('diagnostico-quiz'); + const resultado = document.getElementById('resultado-contenedor'); + const btnComenzar = document.getElementById('btn-comenzar'); + const contenedorPreguntas = document.getElementById('cuestionario-contenedor'); + const barraCompletado = document.getElementById('progreso-completado'); + const textoProgreso = document.getElementById('progreso-texto'); -// Datos del cuestionario -const preguntas = [ - { - id: 1, - titulo: "¿En qué etapa se encuentra hoy tu negocio o proyecto?", - opciones: [ - { letra: "A", texto: "Creando el proyecto desde cero o formalizando una idea reciente." }, - { letra: "B", texto: "Negocio o local activo, pero con una imagen visual que no refleja la calidad de lo que vendo." }, - { letra: "C", texto: "En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo." }, - { letra: "D", texto: "Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad." }, - { letra: "E", texto: "Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing de punta a punta." }, - { letra: "F", texto: "Emprendimiento personal que gestiono por mi cuenta y donde necesito resolver piezas puntuales." } - ] - }, - { - id: 2, - titulo: "¿Cuál es tu cuello de botella más urgente hoy?", - opciones: [ - { letra: "A", texto: "No tengo logo profesional ni página web; me falta confianza frente a la competencia." }, - { letra: "B", texto: "No tengo tiempo ni equipo para sacar fotos o grabar videos de buena calidad de mis productos/servicios." }, - { letra: "C", texto: "Perdemos clientes potenciales porque tardamos horas en responder WhatsApp o mensajes de redes." }, - { letra: "D", texto: "Dependemos del boca a boca o de publicar en redes sin conseguir ventas constantes ni predecibles." }, - { letra: "E", texto: "Tenemos acciones aisladas sin una dirección estratégica clara ni medición profesional de métricas." }, - { letra: "F", texto: "Me faltan herramientas gráficas o plantillas para diseñar mis propias publicaciones sin perder horas." } - ] - }, - { - id: 3, - titulo: "¿Con qué infraestructura digital cuentas actualmente?", - opciones: [ - { letra: "A", texto: "Prácticamente nada formal (solo una idea, perfil personal o logo provisional)." }, - { letra: "B", texto: "Perfil comercial en redes sociales, pero con fotos caseras tomadas con el celular." }, - { letra: "C", texto: "Redes y/o tienda activa con alto volumen de mensajes directos diarios sin automatizar." }, - { letra: "D", texto: "Redes y web en marcha, pero sin campañas activas de publicidad paga (Meta Ads / Google Ads)." }, - { letra: "E", texto: "Ecosistema activo (redes, web, pauta), pero disperso entre distintos proveedores sin sinergia." }, - { letra: "F", texto: "Manejo mis propios canales y solo requiero recursos gráficos específicos para seguir operando." } - ] - }, - { - id: 4, - titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?", - opciones: [ - { letra: "A", texto: "Proyecto inicial integral: crear mi identidad de marca y mi sitio web para salir al mercado." }, - { letra: "B", texto: "Acompañamiento mensual con sesiones presenciales de fotos/video para no preocuparme del contenido." }, - { letra: "C", texto: "Implementación tecnológica: automatizaciones inteligentes y asistentes para WhatsApp y redes." }, - { letra: "D", texto: "Gestión de campañas de publicidad digital y páginas de venta enfocadas 100% en conversión." }, - { letra: "E", texto: "Gestión integral 360°: estrategia de marca completa, pauta multicanal, redes y dirección creativa." }, - { letra: "F", texto: "Un entregable puntual (diseño de plantilla, digitalización de logo o sesión única de fotos)." } - ] - } -]; + if (!bienvenida || !quiz || !resultado || !btnComenzar) return; -// Perfiles de resultado -const perfiles = { - A: { - titulo: "Mix Lanzamiento Integral", - diagnostico: "Tu proyecto necesita bases sólidas y credibilidad inmediata para competir y generar confianza.", - solucion: "Identidad visual completa (Branding) + Diseño Web institucional + Gestión de Redes Sociales (Plan Esencial, $250.000/mes).", - cta: "Cotizar Mix Lanzamiento" - }, - B: { - titulo: "Mix Comercio & Presencia Visual", - diagnostico: "Tu producto o servicio tiene potencial comercial, pero la calidad visual actual en redes te resta ventas.", - solucion: "Plan Premium de Redes Sociales ($650.000/mes), que incluye sesión presencial quincenal de fotos y videos profesionales, 8 reels, asistencia con IA y dirección creativa.", - cta: "Ver Plan Premium" - }, - C: { - titulo: "Solución Eficiencia & Automatización", - diagnostico: "Tu principal fuga de dinero es el tiempo de respuesta: consultas demoradas son ventas perdidas.", - solucion: "Implementación de Automatizaciones con Asistentes Inteligentes para WhatsApp, Instagram y Facebook + Plan Impulso ($420.000/mes) para ordenar el flujo de mensajes.", - cta: "Automatizar mi Atención" - }, - D: { - titulo: "Mix Acelerador & Conversión", - diagnostico: "Tu marca ya está ordenada visualmente; ahora necesita tráfico calificado y un sistema predecible de atracción de clientes.", - solucion: "Servicio de Paid Media (Meta Ads + Google Ads) + Optimización de Landing Page / Catálogo + Creatividades publicitarias de alto impacto.", - cta: "Escalar mis Ventas" - }, - E: { - titulo: "Servicio Corporativo 360°", - diagnostico: "Tu empresa busca liderazgo absoluto de mercado, unificación de imagen y tercerización completa del departamento de marketing.", - solucion: "Plan Élite de Redes ($1.000.000/mes) + Branding Integral (packaging, cartelería física) + Pauta multicanal (Meta, TikTok, Google) + Reportes quincenales avanzados con KPIs.", - cta: "Agendar Reunión Estratégica" - }, - F: { - titulo: "Solución Autogestor / Servicios Puntuales", - diagnostico: "Buscas resolver necesidades gráficas puntuales sin comprometerte con un abono mensual recurrente.", - solucion: "Paquetes individuales a medida: Digitalización y vectorización de logo, Pack de plantillas editables personalizadas o Producción fotográfica por jornada.", - cta: "Elegir Servicios Puntuales" - } -}; + // Banco de preguntas + const preguntas = [ + { + id: 1, + titulo: '¿En qué etapa se encuentra hoy tu negocio o proyecto?', + opciones: [ + { texto: 'Creando el proyecto desde cero o formalizando una idea reciente.', valor: 'inicio' }, + { texto: 'Negocio activo, pero con una imagen visual que no refleja la calidad de lo que vendo.', valor: 'identidad' }, + { texto: 'En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo.', valor: 'automatizacion' }, + { texto: 'Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad.', valor: 'paid' }, + { texto: 'Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing.', valor: 'corporativo' }, + { texto: 'Emprendimiento personal que gestiono por mi cuenta y necesito resolver piezas puntuales.', valor: 'consultoria' } + ] + }, + { + id: 2, + titulo: '¿Cuál es tu mayor desafío actual en marketing?', + opciones: [ + { texto: 'No tengo una identidad clara ni coherente en mis canales.', valor: 'identidad' }, + { texto: 'Tengo redes pero no generan consultas ni ventas reales.', valor: 'redes' }, + { texto: 'Mi sitio web está desactualizado o no convierte visitantes en clientes.', valor: 'web' }, + { texto: 'No tengo tiempo ni equipo para producir contenido constante.', valor: 'contenido' }, + { texto: 'Invierto en pauta pero no sé si estoy llegando a la audiencia correcta.', valor: 'paid' }, + { texto: 'No tengo una estrategia clara y voy tomando decisiones sobre la marcha.', valor: 'consultoria' } + ] + }, + { + id: 3, + titulo: '¿Qué objetivo prioritario tenés para los próximos 6 meses?', + opciones: [ + { texto: 'Lanzar mi marca con una identidad sólida y profesional.', valor: 'identidad' }, + { texto: 'Construir una comunidad activa y fiel en redes sociales.', valor: 'redes' }, + { texto: 'Tener un sitio web que venda por mí las 24 horas.', valor: 'web' }, + { texto: 'Automatizar procesos para ganar tiempo y escalar.', valor: 'automatizacion' }, + { texto: 'Escalar ventas con campañas de publicidad pagada.', valor: 'paid' }, + { texto: 'Tener un partner estratégico que me acompañe en las decisiones.', valor: 'consultoria' } + ] + }, + { + id: 4, + titulo: '¿Cómo describirías tu inversión actual en marketing?', + opciones: [ + { texto: 'Casi nula o muy básica, recién estoy empezando.', valor: 'inicio' }, + { texto: 'Baja, hago algunas cosas por mi cuenta pero me falta estructura.', valor: 'identidad' }, + { texto: 'Media, invierto en contenido pero no veo retorno claro.', valor: 'contenido' }, + { texto: 'Media-alta, ya tengo equipo o freelancers pero falta dirección.', valor: 'consultoria' }, + { texto: 'Alta, invierto en pauta y necesito maximizar el ROI.', valor: 'paid' }, + { texto: 'Integral, busco una agencia que gestione todo 360°.', valor: 'corporativo' } + ] + } + ]; -// Estado del cuestionario -let preguntaActual = 0; -let respuestas = []; + // Mapeo de resultados según valor más frecuente + const resultados = { + inicio: { + titulo: 'Plan Esencial', + diagnostico: 'Estás en una etapa fundacional. Tu marca necesita bases sólidas antes de escalar.', + solucion: 'Te recomendamos comenzar con un Plan Esencial: identidad visual básica, sitio web institucional y gestión inicial de redes. Es el punto de partida ideal para construir con estrategia desde el día uno.' + }, + identidad: { + titulo: 'Construcción de Identidad Estratégica', + diagnostico: 'Tu negocio tiene potencial, pero la percepción visual no está a la altura de lo que ofrecés.', + solucion: 'Necesitás un trabajo de Branding integral: definir el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.' + }, + redes: { + titulo: 'Comunidades que Convierten', + diagnostico: 'Tenés presencia pero no estás generando el impacto ni la conexión que buscás.', + solucion: 'Te recomendamos nuestro servicio de Gestión de Redes Sociales: creamos contenido de valor y gestionamos tus canales para construir una comunidad activa, fiel y comprometida con tu marca.' + }, + web: { + titulo: 'Experiencias Digitales Impactantes', + diagnostico: 'Tu sitio web no está cumpliendo su rol como herramienta de venta y conversión.', + solucion: 'Necesitás un rediseño o desarrollo web estratégico: un sitio que no solo se vea bien, sino que genere resultados tangibles y convierta visitantes en clientes.' + }, + contenido: { + titulo: 'Historias que Enamoran', + diagnostico: 'Tenés el negocio andando pero te falta el contenido que conecte emocionalmente con tu audiencia.', + solucion: 'Te recomendamos nuestro servicio de Producción de Contenido Audiovisual y Gráfico: contenido de alta calidad que cuente la historia de tu marca y cautive a tu audiencia.' + }, + automatizacion: { + titulo: 'Automatización de Procesos', + diagnostico: 'El crecimiento te está desbordando. Necesitás sistemas que trabajen por vos.', + solucion: 'Necesitás automatizaciones inteligentes: flujos de WhatsApp, respuestas automáticas y sistemas que liberen tu tiempo para que te enfoques en lo estratégico.' + }, + paid: { + titulo: 'Campañas que Escalan Resultados', + diagnostico: 'Tenés producto y demanda, pero necesitás acelerar el crecimiento con inversión publicitaria inteligente.', + solucion: 'Te recomendamos Paid Media en Meta, Google y LinkedIn: campañas gestionadas estratégicamente para maximizar tu ROI y alcanzar a los clientes correctos.' + }, + consultoria: { + titulo: 'Asesoramiento Estratégico Integral', + diagnostico: 'Tenés recursos y voluntad, pero te falta una brújula estratégica que alinee tus esfuerzos.', + solucion: 'Necesitás una Consultoría de Marketing: te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.' + }, + corporativo: { + titulo: 'Plan Corporativo 360°', + diagnostico: 'Tu empresa está en un nivel donde necesitás un equipo dedicado que gestione todo de forma integral.', + solucion: 'Te recomendamos el Plan Corporativo: dirección creativa y estratégica, branding integral, pauta multicanal, reportes con KPIs y un equipo dedicado exclusivamente a tu marca.' + } + }; -// Función para calcular el perfil -function calcularPerfil(respuestas) { - const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 }; - - respuestas.forEach(r => { - if (conteo[r] !== undefined) conteo[r]++; + // Estado + let preguntaActual = 0; + const respuestas = []; + + // Iniciar cuestionario + btnComenzar.addEventListener('click', () => { + bienvenida.style.display = 'none'; + quiz.style.display = 'block'; + resultado.style.display = 'none'; + preguntaActual = 0; + respuestas.length = 0; + renderizarPregunta(); }); - // Encontrar la letra con mayor frecuencia - let maxVotos = 0; - let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella) + // Renderizar pregunta actual + function renderizarPregunta() { + const pregunta = preguntas[preguntaActual]; + const progreso = ((preguntaActual) / preguntas.length) * 100; - for (const letra in conteo) { - if (conteo[letra] > maxVotos) { - maxVotos = conteo[letra]; - ganador = letra; - } else if (conteo[letra] === maxVotos && maxVotos > 0) { - // Desempate: priorizar la respuesta de la Pregunta 2 - if (respuestas[1] === letra) { - ganador = letra; - } + barraCompletado.style.width = `${progreso}%`; + textoProgreso.textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`; + + let html = ` +
    +

    ${pregunta.titulo}

    +
    + `; + + pregunta.opciones.forEach((opcion, index) => { + const seleccionada = respuestas[preguntaActual] === opcion.valor ? 'seleccionada' : ''; + html += ` + + `; + }); + + html += `
    `; + + // Navegación + html += ` +
    + + +
    + `; + html += `
    `; + + contenedorPreguntas.innerHTML = html; + + // Event listeners de opciones + const opciones = contenedorPreguntas.querySelectorAll('.opcion-tarjeta'); + opciones.forEach(opcion => { + opcion.addEventListener('click', () => { + const valor = opcion.dataset.valor; + respuestas[preguntaActual] = valor; + + // Actualizar UI + opciones.forEach(o => o.classList.remove('seleccionada')); + opcion.classList.add('seleccionada'); + + // Habilitar botón siguiente + const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente'); + if (btnSiguiente) btnSiguiente.disabled = false; + }); + }); + + // Navegación + const btnAnterior = contenedorPreguntas.querySelector('.btn-anterior'); + const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente'); + + if (btnAnterior) { + btnAnterior.addEventListener('click', () => { + if (preguntaActual > 0) { + preguntaActual--; + renderizarPregunta(); + } + }); + } + + if (btnSiguiente) { + btnSiguiente.addEventListener('click', () => { + if (respuestas[preguntaActual]) { + if (preguntaActual < preguntas.length - 1) { + preguntaActual++; + renderizarPregunta(); + } else { + mostrarResultado(); + } + } + }); } } - return ganador; -} + // Calcular y mostrar resultado + function mostrarResultado() { + // Contar frecuencia de cada valor + const conteo = {}; + respuestas.forEach(valor => { + conteo[valor] = (conteo[valor] || 0) + 1; + }); -// Función para renderizar pregunta -function renderizarPregunta() { - const contenedor = document.getElementById('cuestionario-contenedor'); - const pregunta = preguntas[preguntaActual]; - - contenedor.innerHTML = ` -
    -

    ${pregunta.titulo}

    -
    - ${pregunta.opciones.map(opcion => ` - - `).join('')} + // Obtener el valor más frecuente + let valorGanador = Object.keys(conteo).reduce((a, b) => + conteo[a] > conteo[b] ? a : b + ); + + const resultadoData = resultados[valorGanador] || resultados.consultoria; + + // Actualizar barra al 100% + barraCompletado.style.width = '100%'; + textoProgreso.textContent = `Completado`; + + // Ocultar quiz y mostrar resultado + quiz.style.display = 'none'; + resultado.style.display = 'block'; + + resultado.innerHTML = ` +
    +

    ${resultadoData.titulo}

    +

    Según tus respuestas, esto es lo que más te conviene:

    -
    - `; - - // Agregar event listeners a las opciones - document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => { - tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra)); - }); -} +

    ${resultadoData.diagnostico}

    +
    + ${resultadoData.solucion} +
    +
    + + Hablemos sobre esto + + + +
    + `; -// Función para seleccionar opción -function seleccionarOpcion(letra) { - respuestas[preguntaActual] = letra; - - // Actualizar barra de progreso - const progreso = ((preguntaActual + 1) / preguntas.length) * 100; - document.getElementById('progreso-completado').style.width = `${progreso}%`; - - // Avanzar o mostrar resultado - if (preguntaActual < preguntas.length - 1) { - preguntaActual++; - document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`; - renderizarPregunta(); - } else { - mostrarResultado(); + // Event listener del botón reiniciar + const btnReiniciar = document.getElementById('btn-reiniciar-resultado'); + if (btnReiniciar) { + btnReiniciar.addEventListener('click', () => { + resultado.style.display = 'none'; + bienvenida.style.display = 'flex'; + preguntaActual = 0; + respuestas.length = 0; + barraCompletado.style.width = '0%'; + }); + } } } -// Función para mostrar resultado -function mostrarResultado() { - const perfilLetra = calcularPerfil(respuestas); - const perfil = perfiles[perfilLetra]; - - // Ocultar cuestionario y barra de progreso - document.getElementById('cuestionario-contenedor').style.display = 'none'; - document.querySelector('.progreso-barra').style.display = 'none'; - document.getElementById('progreso-texto').style.display = 'none'; - document.getElementById('btn-reiniciar').style.display = 'none'; - - // Mostrar resultado - const resultadoContenedor = document.getElementById('resultado-contenedor'); - resultadoContenedor.innerHTML = ` -

    ${perfil.titulo}

    -

    ${perfil.diagnostico}

    -
    - Solución Amor y Roma:
    - ${perfil.solucion} -
    - - `; - resultadoContenedor.style.display = 'block'; - - // Event listener al CTA (placeholder por ahora) - document.querySelector('.resultado-cta').addEventListener('click', () => { - alert('CTA - Por definir acción'); - }); -} - -// Función para reiniciar -function reiniciarCuestionario() { - preguntaActual = 0; - respuestas = []; - - // Resetear barra de progreso - document.getElementById('progreso-completado').style.width = '0%'; - document.getElementById('progreso-texto').textContent = 'Pregunta 1 de 4'; - - // Mostrar elementos - document.getElementById('cuestionario-contenedor').style.display = 'block'; - document.querySelector('.progreso-barra').style.display = 'block'; - document.getElementById('progreso-texto').style.display = 'block'; - document.getElementById('btn-reiniciar').style.display = 'inline-flex'; - document.getElementById('resultado-contenedor').style.display = 'none'; - - // Renderizar primera pregunta - renderizarPregunta(); -} - +// Inicializar cuando el DOM esté listo +document.addEventListener('DOMContentLoaded', () => { + initDiagnostico(); +}); /* ============================================ ANIMACIÓN AUTOMÁTICA DE METODOLOGÍA ============================================ */ @@ -671,15 +729,9 @@ function initNavbarAutoHide() { // Inicializar cuestionario al cargar la página document.addEventListener('DOMContentLoaded', () => { - // Solo inicializar si estamos en la sección de diagnóstico - if (document.getElementById('cuestionario-contenedor')) { - renderizarPregunta(); - - // Event listener al botón de reiniciar - document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario); - } + // Eliminar el bloque del diagnóstico (ya se maneja en initDiagnostico) initMetodologiaAnimation(); initPlanesFocusEffect(); initPortfolioCarousel(); - + initMarqueeHover(); // ← además, esta NUNCA se está llamando }); \ No newline at end of file diff --git a/scripts/planes.js b/scripts/planes.js new file mode 100644 index 0000000..c400ed3 --- /dev/null +++ b/scripts/planes.js @@ -0,0 +1,74 @@ +/* ============================================ + SELECTOR DE PLANES + ============================================ */ +function initPlanesSelector() { + const tabs = document.querySelectorAll('.plan-tab'); + const pills = document.querySelectorAll('.plan-pill'); + const panels = document.querySelectorAll('.plan-panel'); + + if (tabs.length === 0 || panels.length === 0) return; + + function activarPlan(planId) { + // 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(`.plan-tab[data-plan="${planId}"]`); + const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`); + const panelActivo = document.getElementById(`panel-${planId}`); + + 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 planId = tab.dataset.plan; + activarPlan(planId); + }); + }); + + // Event listeners para pills + pills.forEach(pill => { + pill.addEventListener('click', () => { + const planId = pill.dataset.plan; + activarPlan(planId); + }); + }); + + // Soporte para hash en URL (ej: planes.html#premium) + const hash = window.location.hash.replace('#', ''); + if (hash && document.getElementById(`panel-${hash}`)) { + activarPlan(hash); + } +} + +// Inicializar cuando el DOM esté listo +document.addEventListener('DOMContentLoaded', () => { + initPlanesSelector(); +}); \ No newline at end of file diff --git a/servicios.html b/servicios.html index 6932f3c..442f660 100644 --- a/servicios.html +++ b/servicios.html @@ -4,6 +4,7 @@ + Servicios - Amor y Roma @@ -301,7 +302,7 @@

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

    -

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

    +

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

    Hacer el diagnóstico Hablemos directamente diff --git a/style/contacto.css b/style/contacto.css new file mode 100644 index 0000000..5f2e3d4 --- /dev/null +++ b/style/contacto.css @@ -0,0 +1,505 @@ +/* ============================================ + SECCIÓN HERO DE CONTACTO + ============================================ */ +.contacto-hero { + min-height: auto; + padding: calc(var(--spacing-lg) + 2rem) var(--spacing-md); + text-align: center; +} + +.contacto-hero .hero-title { + font-size: clamp(2.5rem, 5vw, 3.5rem); +} + +.icono-whatsapp-btn { + display: inline-block; + width: 18px; + height: 18px; + background-color: currentColor; + -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); + mask-image: url("../assets/vectores/whatsapp.svg"); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + vertical-align: middle; + margin-right: 6px; +} + +/* ============================================ + SECCIÓN GRID: INFO + FORMULARIO + ============================================ */ +.contacto-grid-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-surface); +} + +.contacto-grid { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: var(--spacing-lg); + max-width: 1200px; + margin: 0 auto; + align-items: start; +} + +/* --- Columna Info --- */ +.contacto-info { + position: sticky; + top: calc(var(--header-height) + var(--spacing-md)); + background-color: var(--bg-base); + border: 1px solid var(--border); + border-radius: 20px; + padding: var(--spacing-md); +} + +.contacto-info-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: 1.8rem; + color: var(--text-primary); + margin-bottom: var(--spacing-xs); +} + +.contacto-info-texto { + font-size: 0.95rem; + color: var(--text-muted); + line-height: 1.6; + margin-bottom: var(--spacing-md); +} + +.contacto-canales { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-md); +} + +.canal-item { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-xs); + border-radius: 12px; + transition: background-color 0.25s ease; +} + +.canal-item:hover { + background-color: var(--bg-surface-elevated); +} + +.canal-icono { + width: 40px; + height: 40px; + flex-shrink: 0; + background-color: var(--brand-crimson); + border-radius: 10px; + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} + +.canal-email { + -webkit-mask-image: url("../assets/iconos/buzon.svg"); + mask-image: url("../assets/iconos/buzon.svg"); + background-color: var(--brand-teal); +} +.canal-whatsapp { + -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); + mask-image: url("../assets/vectores/whatsapp.svg"); + background-color: #25D366; +} +.canal-instagram { + -webkit-mask-image: url("../assets/vectores/insta.svg"); + mask-image: url("../assets/vectores/insta.svg"); + background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); +} +.canal-linkedin { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); + background-color: #0A66C2; +} + +.canal-contenido { + display: flex; + flex-direction: column; + gap: 2px; +} + +.canal-contenido strong { + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-muted); +} + +.canal-contenido a { + font-size: 0.95rem; + color: var(--text-primary); + font-weight: 500; + transition: color 0.2s ease; +} + +.canal-contenido a:hover { + color: var(--brand-crimson); +} + +.contacto-horario { + padding-top: var(--spacing-sm); + border-top: 1px solid var(--border); +} + +.contacto-horario strong { + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--text-muted); + display: block; + margin-bottom: 4px; +} + +.contacto-horario p { + font-size: 0.9rem; + color: var(--text-secondary); +} + +/* --- Columna Formulario --- */ +.contacto-form { + background-color: var(--bg-base); + border: 1px solid var(--border); + border-radius: 20px; + padding: var(--spacing-md); +} + +.contacto-form-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: 1.8rem; + color: var(--text-primary); + margin-bottom: var(--spacing-xs); +} + +.contacto-form-subtitulo { + font-size: 0.95rem; + color: var(--text-muted); + margin-bottom: var(--spacing-md); +} + +.form-row { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin-bottom: var(--spacing-sm); +} + +.form-row-2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-sm); +} + +.form-group { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: var(--spacing-sm); +} + +.form-group label { + font-family: var(--font-small); + font-size: 0.85rem; + font-weight: 600; + color: var(--text-primary); +} + +.form-required { + color: var(--brand-crimson); +} + +.form-group input, +.form-group select, +.form-group textarea { + font-family: var(--font-body); + font-size: 0.95rem; + color: var(--text-primary); + background-color: var(--bg-surface); + border: 1.5px solid var(--border); + border-radius: 10px; + padding: 0.75rem 1rem; + transition: all 0.25s ease; + width: 100%; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--brand-crimson); + box-shadow: 0 0 0 3px rgba(186, 18, 77, 0.12); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +.form-group select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23170c1d' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 1rem center; + padding-right: 2.5rem; +} + +[data-theme="dark"] .form-group select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23eaf0ee' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); +} + +.form-consentimiento { + display: flex; + align-items: flex-start; + gap: 10px; + margin: var(--spacing-sm) 0; + padding: var(--spacing-sm); + background-color: var(--bg-surface-elevated); + border-radius: 10px; +} + +.form-consentimiento input[type="checkbox"] { + width: 18px; + height: 18px; + margin-top: 2px; + accent-color: var(--brand-crimson); + cursor: pointer; + flex-shrink: 0; +} + +.form-consentimiento label { + font-size: 0.85rem; + color: var(--text-muted); + line-height: 1.5; + cursor: pointer; +} + +.btn-form-enviar { + width: 100%; + justify-content: center; + padding: 1rem 2rem; + font-size: 1rem; + margin-top: var(--spacing-xs); +} + +.form-nota { + text-align: center; + margin-top: var(--spacing-sm); + color: var(--text-muted); +} + +/* ============================================ + SECCIÓN PROCESO (Qué pasa después) + ============================================ */ +.proceso-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.proceso-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + max-width: 1100px; + margin: 0 auto; + position: relative; +} + +.proceso-grid::before { + content: ""; + position: absolute; + top: 40px; + left: 15%; + right: 15%; + height: 2px; + background: linear-gradient(90deg, transparent, var(--border), var(--brand-crimson), var(--border), transparent); + z-index: 0; +} + +.proceso-paso { + position: relative; + z-index: 1; + background-color: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 16px; + padding: var(--spacing-md); + text-align: center; + transition: all 0.3s ease; +} + +.proceso-paso:hover { + transform: translateY(-4px); + border-color: var(--brand-crimson); + box-shadow: var(--shadow); +} + +.proceso-numero { + width: 56px; + height: 56px; + border-radius: 50%; + background-color: var(--bg-surface); + border: 2px solid var(--brand-crimson); + color: var(--brand-crimson); + font-family: var(--font-title); + font-style: italic; + font-weight: 700; + font-size: 1.3rem; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto var(--spacing-sm); + box-shadow: 0 4px 12px -2px rgba(186, 18, 77, 0.2); +} + +.proceso-paso h3 { + font-family: var(--font-title); + font-style: italic; + font-size: 1.2rem; + color: var(--text-primary); + margin-bottom: var(--spacing-xs); +} + +.proceso-paso p { + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* ============================================ + SECCIÓN NOTAS IMPORTANTES + ============================================ */ +.notas-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-surface); +} + +.notas-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + max-width: 1200px; + margin: 0 auto; +} + +.nota-item { + padding: var(--spacing-md); + border-left: 3px solid var(--brand-teal); + background-color: var(--bg-base); + border-radius: 0 12px 12px 0; +} + +.nota-item strong { + font-family: var(--font-title); + font-style: italic; + font-size: 1.1rem; + color: var(--text-primary); + display: block; + margin-bottom: var(--spacing-xs); +} + +.nota-item p { + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* ============================================ + RESPONSIVE CONTACTO + ============================================ */ +@media (max-width: 968px) { + .contacto-grid { + grid-template-columns: 1fr; + gap: var(--spacing-md); + } + + .contacto-info { + position: static; + order: 2; + } + + .contacto-form { + order: 1; + } + + .proceso-grid { + grid-template-columns: 1fr; + max-width: 500px; + } + + .proceso-grid::before { + display: none; + } + + .notas-container { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .contacto-hero { + padding: var(--spacing-lg) var(--spacing-sm); + } + + .contacto-grid-section, + .proceso-section, + .notas-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .form-row-2 { + grid-template-columns: 1fr; + } + + .contacto-form, + .contacto-info { + padding: var(--spacing-sm); + } + + .contacto-info-titulo, + .contacto-form-titulo { + font-size: 1.5rem; + } + + .btn-form-enviar { + width: 100%; + } +} + +@media (max-width: 480px) { + .hero-cta-group { + flex-direction: column; + width: 100%; + } + + .hero-cta-group .btn { + width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .proceso-paso, + .canal-item, + .form-group input, + .form-group select, + .form-group textarea { + transition: none; + } +} \ No newline at end of file diff --git a/style/main.css b/style/main.css index 264e035..efc4b76 100644 --- a/style/main.css +++ b/style/main.css @@ -1,7 +1,7 @@ /* ============================================ FUENTES DE MARCA ============================================ */ -@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'); +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap'); /* ============================================ VARIABLES DE TEMA (modo claro por defecto) @@ -14,6 +14,8 @@ --brand-sage-light: #eaf0ee; --brand-rose-muted: #dfbdb9; --bg-dark-web: #110916; + --brand-teal-contraste: var(--brand-teal); + --brand-crimson-contraste: var(--brand-crimson); /* Tema Claro (Por Defecto) */ --bg-base: var(--brand-sage-light); @@ -31,7 +33,6 @@ --btn-secondary-bg: var(--brand-teal); --btn-secondary-hover: #002c3a; - --badge-bg: var(--brand-rose-muted); --badge-text: var(--brand-plum); @@ -87,9 +88,7 @@ /* ============================================ RESET BÁSICO ============================================ */ -*, -*::before, -*::after { +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; @@ -111,61 +110,31 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } -h1, -h2, -h3 { +h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; } -h4, -h5, -h6 { +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; -} +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; -} +main { flex: 1; } +img, video { max-width: 100%; display: block; } +a { color: inherit; text-decoration: none; } +ul { list-style: none; } /* ============================================ HEADER Y LOGOS @@ -180,7 +149,6 @@ ul { background-color: var(--bg-surface); border-bottom: 1px solid var(--border); padding: var(--spacing-sm); - box-shadow: var(--shadow); transition: transform 0.35s ease, box-shadow 0.35s ease; will-change: transform; @@ -207,31 +175,13 @@ body.menu-open .site-header { margin: 0 auto; } -.logo { - display: flex; - align-items: center; -} +.logo { display: flex; align-items: center; } +.logo img { height: 40px; width: auto; } +.logo-light { display: block; } +.logo-dark { display: none; } -.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; -} +[data-theme="dark"] .logo-light { display: none; } +[data-theme="dark"] .logo-dark { display: block; } /* ============================================ BOTONES DE NAVEGACIÓN (HEADER) @@ -242,7 +192,6 @@ body.menu-open .site-header { align-items: center; } -/* Botón Menú */ .menu-toggle { background: none; border: 1px solid var(--border); @@ -272,11 +221,8 @@ body.menu-open .site-header { transition: transform 0.2s ease; } -.menu-toggle:hover .menu-icon { - transform: scale(1.08); -} +.menu-toggle:hover .menu-icon { transform: scale(1.08); } -/* Botón Switch Tema (Circular) */ .theme-toggle { background: none; border: 1px solid var(--border); @@ -307,32 +253,17 @@ body.menu-open .site-header { transition: transform 0.5s ease, opacity 0.5s ease; } -/* Animación Switch Modo Claro */ -[data-theme="light"] .icon-sun, -:root:not([data-theme="dark"]) .icon-sun { - opacity: 0; - transform: rotate(180deg); - pointer-events: none; +[data-theme="light"] .icon-sun, :root:not([data-theme="dark"]) .icon-sun { + opacity: 0; transform: rotate(180deg); pointer-events: none; } - -[data-theme="light"] .icon-moon, -:root:not([data-theme="dark"]) .icon-moon { - opacity: 1; - transform: rotate(0deg); - pointer-events: auto; +[data-theme="light"] .icon-moon, :root:not([data-theme="dark"]) .icon-moon { + opacity: 1; transform: rotate(0deg); pointer-events: auto; } - -/* Animación Switch Modo Oscuro */ [data-theme="dark"] .icon-sun { - opacity: 1; - transform: rotate(0deg); - pointer-events: auto; + opacity: 1; transform: rotate(0deg); pointer-events: auto; } - [data-theme="dark"] .icon-moon { - opacity: 0; - transform: rotate(-180deg); - pointer-events: none; + opacity: 0; transform: rotate(-180deg); pointer-events: none; } /* ============================================ @@ -340,30 +271,22 @@ body.menu-open .site-header { ============================================ */ .menu-overlay { position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + 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; + opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 998; } -.menu-overlay.is-open { - opacity: 1; - visibility: visible; -} +.menu-overlay.is-open { opacity: 1; visibility: visible; } .fullscreen-menu { position: fixed; - bottom: 0; - left: 0; - width: 100%; - height: 52vh; + bottom: 0; left: 0; + width: 100%; height: 52vh; background-color: var(--bg-surface); border-top: 1px solid var(--border); border-top-left-radius: 20px; @@ -372,63 +295,45 @@ body.menu-open .site-header { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; z-index: 999; overflow: hidden; - /* Clave para contener los destellos de la aurora */ 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); -} +.fullscreen-menu.is-open { transform: translateY(0); } -/* --- CAPA 1 AURORA: Onda Esmeralda / Salvia --- */ .fullscreen-menu::before { content: ""; position: absolute; - top: -40%; - left: -20%; - width: 140%; - height: 180%; + 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%); + 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; } -/* Aurora en Modo Oscuro */ [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%); + 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: 3; - top: var(--spacing-sm); - right: var(--spacing-md); + 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; + width: 36px; height: 36px; cursor: pointer; border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; + display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } @@ -438,7 +343,6 @@ body.menu-open .site-header { transform: rotate(90deg); } -/* Contenedor y columnas internas */ .menu-content { position: relative; z-index: 2; @@ -484,86 +388,46 @@ body.menu-open .site-header { 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; -} +.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); + display: flex; align-items: center; gap: 0.6rem; color: var(--text-primary); } .contact-icon { - width: 20px; - height: 16px; + 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; + -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"); -} +.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); + 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); } -.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; + 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; - transform: none !important; - /* Evita heredar el translateX de los links */ + 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; transform: none !important; } -/* Botón 1: Sólido Primario */ .menu-buttons .btn-menu-primary { background-color: var(--btn-primary-bg) !important; color: var(--text-on-accent) !important; border: 1.5px solid var(--btn-primary-bg); box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); } - .menu-buttons .btn-menu-primary:hover { background-color: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover); @@ -571,13 +435,11 @@ body.menu-open .site-header { transform: translateY(-1px) !important; } -/* Botón 2: Outline Secundario */ .menu-buttons .btn-menu-secondary { background-color: transparent !important; border: 1.5px solid var(--text-secondary); color: var(--text-primary) !important; } - .menu-buttons .btn-menu-secondary:hover { background-color: var(--bg-surface-elevated) !important; border-color: var(--btn-primary-bg); @@ -585,117 +447,51 @@ body.menu-open .site-header { transform: translateY(-1px) !important; } -/* Logo en el menú (alineado a la derecha) */ .menu-brand { margin-top: 1.75rem; - display: flex; - justify-content: flex-end; - align-items: center; + display: flex; justify-content: flex-end; align-items: center; border-top: none; } - -.menu-brand img { - height: 36px; - width: auto; - opacity: 0.95; -} - -.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; -} +.menu-brand img { height: 36px; width: auto; opacity: 0.95; } +.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) ============================================ */ @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); - } + 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); - } + 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); } } @media (prefers-reduced-motion: reduce) { - - .fullscreen-menu::before, - .fullscreen-menu::after { - animation: none; - } + .fullscreen-menu::before, .fullscreen-menu::after { animation: none; } } -/* ============================================ - RESPONSIVE - ============================================ */ @media (max-width: 769px) { - .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; - } -} - -@media (max-width: 480px) { - .fullscreen-menu { - height: 90vh; - } + .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; } } +@media (max-width: 480px) { .fullscreen-menu { height: 90vh; } } /* ============================================ - SECCIONES Y FOOTER — AMOR & ROMA + SECCIONES Y FOOTER ============================================ */ main section { padding: var(--spacing-md) var(--spacing-sm); border-bottom: 1px dashed var(--border); } - -main section h2 { - margin-bottom: var(--spacing-sm); - font-size: 1.5rem; -} +main section h2 { margin-bottom: var(--spacing-sm); font-size: 1.5rem; } .site-footer { border-top: 1px solid var(--border); @@ -703,10 +499,8 @@ main section h2 { margin-top: auto; 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 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -725,44 +519,32 @@ main section h2 { 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; + width: 100%; height: 90px; + display: flex; justify-content: center; align-items: center; margin: var(--spacing-sm) 0; - position: relative; - z-index: 1; + position: relative; z-index: 1; } .footer-arches-graphic { - width: 1200px; /* Ancho ajustado para que luzca como un detalle sutil */ - height: 250px; + width: 1200px; 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; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; + -webkit-mask-size: contain; mask-size: contain; } -/* 3. Sección 3: Copyright y Avisos Legales */ .footer-bottom { border-top: 1px solid var(--border); padding: var(--spacing-sm); text-align: center; font-size: 0.875rem; color: var(--text-muted); - position: relative; - z-index: 2; + position: relative; z-index: 2; background-color: var(--bg-surface); font-family: 'Jost', sans-serif; } @@ -770,62 +552,42 @@ main section h2 { /* ============================================ SECCION HERO ============================================ */ - .hero-section { min-height: calc(100vh - var(--header-height)); background-color: var(--bg-base); - display: flex; - align-items: center; - justify-content: center; + 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); + max-width: 900px; width: 100%; + display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); } -/* Título */ .hero-title { font-family: var(--font-title); - font-style: italic; - font-weight: 700; + 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); + line-height: 1.15; color: var(--text-primary); + opacity: 0; transform: translateY(30px); animation: fadeInUp 0.9s ease-out 0.2s forwards; } -/* Subtítulo */ .hero-subtitle { font-family: var(--font-title); - font-style: italic; - font-weight: 400; + font-style: italic; font-weight: 400; font-size: clamp(1rem, 2vw, 1.25rem); - line-height: 1.5; - color: var(--text-muted); + line-height: 1.5; color: var(--text-muted); max-width: 700px; - opacity: 0; - transform: translateY(30px); + opacity: 0; transform: translateY(30px); animation: fadeInUp 0.9s ease-out 0.5s forwards; } -/* Grupo de botones */ .hero-cta-group { - display: flex; - gap: var(--spacing-sm); - flex-wrap: wrap; - justify-content: center; + display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--spacing-sm); - opacity: 0; - transform: translateY(30px); + opacity: 0; transform: translateY(30px); animation: fadeInUp 0.9s ease-out 0.8s forwards; } @@ -833,138 +595,58 @@ main section h2 { 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; + 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; } -/* Botón Primario (sólido) */ .btn-primary { - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); + background-color: var(--btn-primary-bg); color: var(--text-on-accent); border: 1.5px solid var(--btn-primary-bg); box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); } - .btn-primary:hover { - background-color: var(--btn-primary-hover); - border-color: var(--btn-primary-hover); - color: var(--text-on-accent); - transform: translateY(-2px); + background-color: var(--btn-primary-hover); border-color: var(--btn-primary-hover); + color: var(--text-on-accent); transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); } -/* Botón Secundario (outline) */ .btn-secondary { - background-color: transparent; - color: var(--text-primary); + 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); + background-color: var(--bg-surface-elevated); border-color: var(--btn-primary-bg); + color: var(--btn-primary-bg); transform: translateY(-2px); } -/* ============================================ - ANIMACIONES - ============================================ */ - -/* Fade-in hacia arriba (entrada escalonada) */ @keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(30px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } + 0% { opacity: 0; transform: translateY(30px); } + 100% { opacity: 1; transform: translateY(0); } } -/* Shake sutil para llamar la atención (cada 6s) */ @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); - } + 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); } } -.hero-cta-primary { - animation: attentionShake 6s ease-in-out infinite; -} +.hero-cta-primary { animation: attentionShake 6s ease-in-out infinite; } +.hero-cta-primary:hover { animation-play-state: paused; } -/* Pausar shake en hover para no interferir con la interacción */ -.hero-cta-primary:hover { - animation-play-state: paused; -} - -/* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { - - .hero-title, - .hero-subtitle, - .hero-cta-group { - animation: none; - opacity: 1; - transform: none; - } - - .hero-cta-primary { - animation: none; - } + .hero-title, .hero-subtitle, .hero-cta-group { animation: none; opacity: 1; transform: none; } + .hero-cta-primary { animation: none; } } - -/* ============================================ - RESPONSIVE HERO - ============================================ */ @media (max-width: 768px) { - .hero-section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .hero-cta-group { - flex-direction: column; - width: 100%; - max-width: 320px; - } - - .btn { - width: 100%; - } + .hero-section { padding: var(--spacing-md) var(--spacing-sm); } + .hero-cta-group { flex-direction: column; width: 100%; max-width: 320px; } + .btn { width: 100%; } } /* ============================================ @@ -976,294 +658,119 @@ main section h2 { } .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; + display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--spacing-lg); + max-width: 1400px; margin: 0 auto; align-items: center; min-height: 600px; } -/* Columna Izquierda */ .servicios-intro { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - align-items: flex-start; + display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; } +.servicios-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); line-height: 1.1; } +.servicios-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; } +.servicios-intro .btn { margin-top: var(--spacing-sm); } -.servicios-title { - font-size: clamp(2rem, 4vw, 3rem); - color: var(--text-primary); - line-height: 1.1; -} - -.servicios-subtitle { - font-size: 1.1rem; - color: var(--text-muted); - max-width: 400px; - line-height: 1.6; -} - -.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; + 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; } -/* Items del acordeón */ .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; + 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); + background-color: var(--bg-surface); border-color: var(--text-secondary); transform: translateX(4px); } -/* 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); + 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); } -/* Items colapsados (cuando hay uno activo) */ .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; + flex: 0; min-height: 0; padding: 0 var(--spacing-md); opacity: 0; pointer-events: none; border-color: transparent; } -/* Header del item (contraído) */ .servicio-header { - display: flex; - align-items: center; - justify-content: center; - gap: var(--spacing-sm); - width: 100%; - transition: opacity 0.3s ease; + 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; + 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"); -} - -/**/ +.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; + font-family: var(--font-title); font-style: italic; font-size: 1.1rem; + color: var(--text-primary); font-weight: 700; white-space: nowrap; } -/* Contenido del item (expandido) */ .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; + 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-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; + 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; + 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; + 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-content .btn { - margin-top: var(--spacing-xs); -} - -/* Botón cerrar */ .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; + 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); + color: var(--btn-primary-bg); background-color: var(--bg-surface); + border-color: var(--btn-primary-bg); transform: rotate(90deg); } -/* ============================================ - RESPONSIVE SERVICIOS - ============================================ */ @media (max-width: 968px) { - .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; - } + .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; } } - @media (max-width: 480px) { - .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; - } + .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; } } /* ============================================ @@ -1274,7 +781,6 @@ SECCIÓN DIAGNÓSTICO background-color: var(--bg-base); } -/* Header de la sección (título y subtítulo centrados) */ .diagnostico-header { text-align: center; max-width: 700px; @@ -1297,23 +803,129 @@ SECCIÓN DIAGNÓSTICO line-height: 1.6; } -/* Tarjeta contenedora del cuestionario */ +/* Tarjeta contenedora */ .diagnostico-card { - max-width: 800px; + max-width: 900px; margin: 0 auto; background-color: var(--bg-surface); - border-radius: 16px; + border-radius: 20px; padding: var(--spacing-md); box-shadow: var(--shadow); border: 1px solid var(--border); + min-height: 420px; + position: relative; + overflow: hidden; +} + +/* ============================================ +PANTALLA DE BIENVENIDA +============================================ */ +.diagnostico-bienvenida { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: var(--spacing-md); + animation: fadeIn 0.5s ease; +} + +.bienvenida-icono { + width: 80px; + height: 80px; + border-radius: 50%; + background-color: var(--bg-surface-elevated); + border: 2px solid var(--border); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: var(--spacing-sm); +} + +.icono-diagnostico { + width: 40px; + height: 40px; + display: block; + background-color: var(--btn-primary-bg); + -webkit-mask-image: url("../assets/iconos/ad_hoc.svg"); + mask-image: url("../assets/iconos/ad_hoc.svg"); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-size: contain; + mask-size: contain; +} + +.bienvenida-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 3vw, 2rem); + color: var(--text-primary); + margin-bottom: var(--spacing-xs); + font-weight: 700; +} + +.bienvenida-texto { + font-family: var(--font-body); + font-size: 1.05rem; + color: var(--text-muted); + max-width: 500px; + line-height: 1.6; + margin-bottom: var(--spacing-md); +} + +.bienvenida-detalles { + list-style: none; + display: flex; + gap: var(--spacing-md); + margin-bottom: var(--spacing-md); + flex-wrap: wrap; + justify-content: center; +} + +.bienvenida-detalles li { + font-family: var(--font-small); + font-size: 0.9rem; + color: var(--text-secondary); + display: flex; + align-items: center; + gap: 0.4rem; + font-weight: 500; +} + +.detalle-icono { + font-size: 1rem; +} + +.btn-comenzar { + display: inline-flex; + align-items: center; + gap: 0.6rem; + font-size: 1rem; + padding: 1rem 2.2rem; +} + +.btn-arrow { + transition: transform 0.3s ease; + font-size: 1.2rem; +} + +.btn-comenzar:hover .btn-arrow { + transform: translateX(4px); +} + +/* ============================================ +CUESTIONARIO +============================================ */ +.diagnostico-quiz { + animation: fadeIn 0.4s ease; } -/* Wrapper de la barra de progreso */ .progreso-wrapper { margin-bottom: var(--spacing-md); } -/* Barra de Progreso */ .progreso-barra { width: 100%; height: 8px; @@ -1336,37 +948,43 @@ SECCIÓN DIAGNÓSTICO font-size: 0.85rem; color: var(--text-secondary); text-align: right; + font-weight: 600; } -/* Contenedor de Preguntas */ -.pregunta-contenedor { +/* Contenedor de preguntas */ +.cuestionario-contenedor { animation: fadeIn 0.4s ease; } -@keyframes fadeIn { +.pregunta-contenedor { + animation: slideIn 0.4s ease; +} + +@keyframes slideIn { from { opacity: 0; - transform: translateY(10px); + transform: translateX(20px); } - to { opacity: 1; - transform: translateY(0); + transform: translateX(0); } } .pregunta-titulo { font-family: var(--font-subtitle); - font-size: 1.35rem; + font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: var(--text-primary); margin-bottom: var(--spacing-md); font-weight: 400; line-height: 1.3; + font-style: italic; } +/* GRID DE OPCIONES EN 3 COLUMNAS */ .opciones-contenedor { display: grid; - grid-template-columns: 1fr; + grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); } @@ -1378,16 +996,40 @@ SECCIÓN DIAGNÓSTICO cursor: pointer; transition: all 0.25s ease; font-family: var(--font-body); - font-size: 0.95rem; + font-size: 0.9rem; color: var(--text-primary); text-align: left; width: 100%; + display: flex; + align-items: flex-start; + gap: 10px; + min-height: 110px; + position: relative; + overflow: hidden; +} + +.opcion-tarjeta::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background-color: var(--btn-primary-bg); + transform: scaleY(0); + transform-origin: top; + transition: transform 0.3s ease; } .opcion-tarjeta:hover { border-color: var(--btn-primary-bg); background-color: var(--bg-surface); - transform: translateX(4px); + transform: translateY(-3px); + box-shadow: 0 8px 20px -5px rgba(186, 18, 77, 0.15); +} + +.opcion-tarjeta:hover::before { + transform: scaleY(1); } .opcion-tarjeta:active { @@ -1398,10 +1040,53 @@ SECCIÓN DIAGNÓSTICO border-color: var(--btn-primary-bg); background-color: var(--btn-primary-bg); color: var(--text-on-accent); + transform: translateY(-3px); + box-shadow: 0 8px 24px -5px rgba(186, 18, 77, 0.35); } -/* Botón Reiniciar */ -.btn-reiniciar { +.opcion-tarjeta.seleccionada::before { + transform: scaleY(1); + background-color: #ffffff; +} + +/* Indicador de número de opción */ +.opcion-numero { + flex-shrink: 0; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: var(--border); + color: var(--text-secondary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 700; + transition: all 0.25s ease; +} + +.opcion-tarjeta.seleccionada .opcion-numero { + background-color: #ffffff; + color: var(--btn-primary-bg); +} + +.opcion-texto { + flex: 1; + line-height: 1.45; +} + +/* Navegación entre preguntas */ +.pregunta-navegacion { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--spacing-md); + padding-top: var(--spacing-sm); + border-top: 1px solid var(--border); +} + +.btn-anterior { background: none; border: 1.5px solid var(--border); color: var(--text-secondary); @@ -1411,22 +1096,50 @@ SECCIÓN DIAGNÓSTICO 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; + gap: 0.4rem; } -.btn-reiniciar:hover { - border-color: var(--btn-primary-bg); - color: var(--btn-primary-bg); +.btn-anterior:hover { + border-color: var(--text-primary); + color: var(--text-primary); +} + +.btn-siguiente { + background-color: var(--btn-primary-bg); + color: var(--text-on-accent); + border: 1.5px solid var(--btn-primary-bg); + padding: 0.65rem 1.5rem; + border-radius: 24px; + cursor: pointer; + font-family: var(--font-small); + font-size: 0.9rem; + font-weight: 600; + transition: all 0.25s ease; + display: inline-flex; + align-items: center; + gap: 0.4rem; + box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); +} + +.btn-siguiente:hover:not(:disabled) { + background-color: var(--btn-primary-hover); + border-color: var(--btn-primary-hover); transform: translateY(-2px); } -/* Contenedor de Resultados */ +.btn-siguiente:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +/* ============================================ +RESULTADO +============================================ */ .resultado-contenedor { - animation: fadeIn 0.5s ease; + animation: fadeIn 0.6s ease; background-color: var(--bg-surface-elevated); border: 2px solid var(--btn-primary-bg); border-radius: 16px; @@ -1434,16 +1147,27 @@ SECCIÓN DIAGNÓSTICO text-align: center; } +.resultado-encabezado { + margin-bottom: var(--spacing-sm); +} + .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); + margin-bottom: var(--spacing-xs); font-weight: 700; line-height: 1.2; } +.resultado-subtitulo { + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + margin-bottom: var(--spacing-sm); +} + .resultado-diagnostico { font-size: 1.05rem; color: var(--text-primary); @@ -1462,6 +1186,20 @@ SECCIÓN DIAGNÓSTICO border-radius: 0 8px 8px 0; } +.resultado-solucion strong { + color: var(--btn-primary-bg); + font-family: var(--font-title); + font-style: italic; +} + +.resultado-acciones { + display: flex; + gap: var(--spacing-sm); + justify-content: center; + flex-wrap: wrap; + margin-top: var(--spacing-md); +} + .resultado-cta { background-color: var(--btn-primary-bg); color: var(--text-on-accent); @@ -1474,7 +1212,10 @@ SECCIÓN DIAGNÓSTICO cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35); - display: inline-block; + display: inline-flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; } .resultado-cta:hover { @@ -1483,6 +1224,40 @@ SECCIÓN DIAGNÓSTICO box-shadow: 0 6px 18px -4px rgba(186, 18, 77, 0.45); } +.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; + 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); +} + +/* Animación fade */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + /* ============================================ RESPONSIVE DIAGNÓSTICO ============================================ */ @@ -1493,6 +1268,7 @@ RESPONSIVE DIAGNÓSTICO .diagnostico-card { padding: var(--spacing-sm); + border-radius: 16px; } .diagnostico-title { @@ -1503,13 +1279,20 @@ RESPONSIVE DIAGNÓSTICO font-size: 1rem; } - .pregunta-titulo { - font-size: 1.15rem; + /* En mobile, las opciones pasan a 2 columnas */ + .opciones-contenedor { + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-xs); } .opcion-tarjeta { - font-size: 0.9rem; + min-height: 90px; padding: var(--spacing-xs); + font-size: 0.85rem; + } + + .pregunta-titulo { + font-size: 1.15rem; } .resultado-titulo { @@ -1519,6 +1302,23 @@ RESPONSIVE DIAGNÓSTICO .resultado-solucion { font-size: 0.9rem; } + + .bienvenida-detalles { + flex-direction: column; + gap: var(--spacing-xs); + } + + .resultado-acciones { + flex-direction: column; + align-items: center; + } + + .resultado-cta, + .btn-reiniciar { + width: 100%; + max-width: 300px; + justify-content: center; + } } @media (max-width: 480px) { @@ -1527,1063 +1327,396 @@ RESPONSIVE DIAGNÓSTICO border-radius: 12px; } + /* En pantallas muy chicas, 1 columna */ + .opciones-contenedor { + grid-template-columns: 1fr; + } + .opcion-tarjeta { + min-height: auto; padding: var(--spacing-xs); font-size: 0.85rem; } -} -/* ============================================ -SECCIÓN METODOLOGÍA -============================================ */ -.metodologia-section { - padding: var(--spacing-lg) var(--spacing-md); - background-color: var(--bg-base); -} - -/* Header de la sección */ -.metodologia-header { - text-align: center; - max-width: 700px; - margin: 0 auto var(--spacing-lg); -} - -.metodologia-title { - font-family: var(--font-title); - font-style: italic; - font-size: clamp(2rem, 4vw, 3rem); - color: var(--text-primary); - margin-bottom: var(--spacing-sm); - line-height: 1.15; -} - -.metodologia-subtitle { - font-family: var(--font-body); - font-size: 1.1rem; - color: var(--text-muted); - line-height: 1.6; -} - -/* Grid de pasos */ -.metodologia-grid { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--spacing-md); - max-width: 1400px; - margin: 0 auto; -} - -/* Cada paso */ -.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); -} - -/* Arco contenedor */ -.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"); -} - - -/* Información del paso */ -.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 Activo (el que "avanza") */ -.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 Anterior (efecto de arrastre) */ -.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(--text-muted); -} - -.paso-item.previous .paso-subtitulo { - color: var(--text-muted); -} - -/* ============================================ -RESPONSIVE METODOLOGÍA -============================================ */ -@media (max-width: 1024px) { - .metodologia-grid { - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-md); - } -} - -@media (max-width: 768px) { - .metodologia-section { - padding: var(--spacing-md) var(--spacing-sm); + .bienvenida-icono { + width: 64px; + height: 64px; } - .metodologia-grid { - grid-template-columns: repeat(2, 1fr); - gap: var(--spacing-sm); - } - - .metodologia-title { - font-size: 1.75rem; - } - - .metodologia-subtitle { - font-size: 1rem; - } - - .paso-arco { - max-width: 100px; - } - - .paso-icono { + .icono-diagnostico { width: 32px; height: 32px; } - - .paso-titulo { - font-size: 1rem; - } - - .paso-subtitulo { - font-size: 0.8rem; - } } +/* ============================================ + SECCIÓN METODOLOGÍA + ============================================ */ +.metodologia-section { + padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); +} + +.metodologia-header { + text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg); +} + +.metodologia-title { + font-family: var(--font-title); font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); + margin-bottom: var(--spacing-sm); line-height: 1.15; +} + +.metodologia-subtitle { + font-family: var(--font-body); font-size: 1.1rem; + color: var(--text-muted); line-height: 1.6; +} + +.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; +} + +.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(--text-muted); } +.paso-item.previous .paso-subtitulo { color: var(--text-muted); } + +@media (max-width: 1024px) { + .metodologia-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } +} +@media (max-width: 768px) { + .metodologia-section { padding: var(--spacing-md) var(--spacing-sm); } + .metodologia-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } + .metodologia-title { font-size: 1.75rem; } + .metodologia-subtitle { font-size: 1rem; } + .paso-arco { max-width: 100px; } + .paso-icono { width: 32px; height: 32px; } + .paso-titulo { font-size: 1rem; } + .paso-subtitulo { font-size: 0.8rem; } +} @media (max-width: 480px) { - .metodologia-grid { - grid-template-columns: 1fr; - max-width: 300px; - } + .metodologia-grid { grid-template-columns: 1fr; max-width: 300px; } } - -/* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { - .paso-item { - transition: none; - } - - .arco-svg, - .paso-icono, - .paso-titulo, - .paso-subtitulo { - transition: none; - } + .paso-item, .arco-svg, .paso-icono, .paso-titulo, .paso-subtitulo { transition: none; } } /* ============================================ SECCIÓN PLANES DESTACADOS ============================================ */ .planes-section { - padding: var(--spacing-lg) var(--spacing-md); - background-color: var(--bg-base); + padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); } -.planes-header { - text-align: center; - max-width: 700px; - margin: 0 auto var(--spacing-lg); -} +.planes-header { text-align: center; max-width: 700px; margin: 0 auto var(--spacing-lg); } +.planes-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); margin-bottom: var(--spacing-sm); line-height: 1.15; } +.planes-subtitle { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; } -.planes-title { - font-size: clamp(2rem, 4vw, 3rem); - color: var(--text-primary); - margin-bottom: var(--spacing-sm); - line-height: 1.15; -} - -.planes-subtitle { - font-size: 1.1rem; - color: var(--text-muted); - line-height: 1.6; -} - -/* Grid de tarjetas */ .planes-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-md); - max-width: 1200px; - margin: 0 auto; - align-items: stretch; + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); + max-width: 1200px; margin: 0 auto; align-items: stretch; } -/* Tarjeta base */ .plan-card { - position: relative; - background-color: var(--bg-surface); - border: 1.5px solid var(--border); - border-radius: 16px; - padding: var(--spacing-md); - display: flex; - flex-direction: column; - gap: var(--spacing-sm); - transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); - height: 100%; + position: relative; background-color: var(--bg-surface); + border: 1.5px solid var(--border); border-radius: 16px; padding: var(--spacing-md); + display: flex; flex-direction: column; gap: var(--spacing-sm); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); height: 100%; } -/* Efecto foco: cuando el grid está en hover, todas se atenúan */ -.planes-grid.is-hovering .plan-card { - opacity: 0.45; - transform: scale(0.97); - filter: grayscale(30%); -} - -/* La tarjeta activa resalta sobre las demás */ +.planes-grid.is-hovering .plan-card { opacity: 0.45; transform: scale(0.97); filter: grayscale(30%); } .planes-grid.is-hovering .plan-card.is-focused { - opacity: 1; - transform: scale(1.03); - filter: grayscale(0%); - border-color: var(--btn-primary-bg); - box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); - z-index: 2; + opacity: 1; transform: scale(1.03); filter: grayscale(0%); + border-color: var(--btn-primary-bg); box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); z-index: 2; } - -/* Hover individual (fallback si JS no carga) */ .plan-card:hover { - border-color: var(--btn-primary-bg); - box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); - transform: translateY(-4px); + border-color: var(--btn-primary-bg); box-shadow: 0 12px 32px -8px rgba(186, 18, 77, 0.25); transform: translateY(-4px); } -/* Header de la tarjeta */ -.plan-header { - margin-bottom: var(--spacing-xs); -} - -.plan-title { - font-size: 1.5rem; - color: var(--text-primary); - margin-bottom: 0.25rem; - line-height: 1.2; -} - -.plan-subtitle { - font-family: var(--font-body); - font-size: 0.95rem; - color: var(--text-muted); - font-style: normal; - font-weight: 400; -} - -/* Lista de características */ -.plan-features { - list-style: none; - display: flex; - flex-direction: column; - gap: 0.6rem; - flex: 1; -} +.plan-header { margin-bottom: var(--spacing-xs); } +.plan-title { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.25rem; line-height: 1.2; } +.plan-subtitle { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); font-style: normal; font-weight: 400; } +.plan-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .plan-features li { - font-size: 0.95rem; - color: var(--text-primary); - padding-left: 1.5rem; - position: relative; - line-height: 1.4; + font-size: 0.95rem; color: var(--text-primary); padding-left: 1.5rem; + position: relative; line-height: 1.4; } - .plan-features li::before { - content: ""; - position: absolute; - left: 0; - top: 0.45rem; - width: 8px; - height: 8px; - background-color: var(--btn-primary-bg); - border-radius: 50%; -} - -/* Tags de servicios */ -.plan-tags { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; - margin-top: var(--spacing-xs); + content: ""; position: absolute; left: 0; top: 0.45rem; + width: 8px; height: 8px; background-color: var(--btn-primary-bg); border-radius: 50%; } +.plan-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--spacing-xs); } .plan-tag { - font-family: var(--font-small); - font-size: 0.75rem; - font-weight: 600; - padding: 0.3rem 0.7rem; - border-radius: 999px; - background-color: var(--badge-bg); - color: var(--badge-text); - letter-spacing: 0.3px; + font-family: var(--font-small); font-size: 0.75rem; font-weight: 600; + padding: 0.3rem 0.7rem; border-radius: 999px; background-color: var(--badge-bg); + color: var(--badge-text); letter-spacing: 0.3px; } +.plan-cta { margin-top: var(--spacing-sm); align-self: flex-start; } -/* CTA */ -.plan-cta { - margin-top: var(--spacing-sm); - align-self: flex-start; -} - -/* ============================================ - PLAN DESTACADO (badge tipo laurel) - ============================================ */ -.plan-featured { - border-color: var(--brand-rose-muted); - background-color: var(--bg-surface-elevated); -} +.plan-featured { border-color: var(--brand-rose-muted); background-color: var(--bg-surface-elevated); } .plan-badge { - position: absolute; - top: -12px; - left: 50%; - transform: translateX(-50%); - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.3rem 0.9rem; - background-color: var(--bg-surface); - border: 1px solid var(--brand-rose-muted); - border-radius: 999px; - color: var(--brand-crimson); - font-family: var(--font-small); - font-size: 0.75rem; - font-weight: 600; - letter-spacing: 0.5px; - text-transform: uppercase; + position: absolute; top: -12px; left: 50%; transform: translateX(-50%); + display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.9rem; + background-color: var(--bg-surface); border: 1px solid var(--brand-rose-muted); + border-radius: 999px; color: var(--brand-crimson); font-family: var(--font-small); + font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 2px 8px -2px rgba(186, 18, 77, 0.15); } +.laurel-icon { width: 14px; height: 14px; stroke: var(--brand-crimson); } -.laurel-icon { - width: 14px; - height: 14px; - stroke: var(--brand-crimson); -} - -/* ============================================ - RESPONSIVE PLANES - ============================================ */ @media (max-width: 968px) { - .planes-grid { - grid-template-columns: 1fr; - max-width: 500px; - } - - .plan-featured { - order: -1; - /* El destacado aparece primero en mobile */ - } - - .plan-badge { - top: -10px; - } + .planes-grid { grid-template-columns: 1fr; max-width: 500px; } + .plan-featured { order: -1; } + .plan-badge { top: -10px; } } - @media (max-width: 480px) { - .planes-section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .plan-card { - padding: var(--spacing-sm); - } - - .plan-title { - font-size: 1.3rem; - } + .planes-section { padding: var(--spacing-md) var(--spacing-sm); } + .plan-card { padding: var(--spacing-sm); } + .plan-title { font-size: 1.3rem; } } /* ============================================ SECCIÓN PORTFOLIO ============================================ */ -.portfolio-section { - padding: var(--spacing-lg) var(--spacing-md); - background-color: var(--bg-base); -} - +.portfolio-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); } .portfolio-container { - display: grid; - grid-template-columns: 1fr 1.2fr; - gap: var(--spacing-lg); - max-width: 1400px; - margin: 0 auto; - align-items: center; -} - -/* Columna Izquierda: Texto */ -.portfolio-text { - display: flex; - flex-direction: column; - gap: var(--spacing-sm); -} - -.portfolio-title { - font-size: clamp(2rem, 4vw, 3rem); - color: var(--text-primary); - line-height: 1.15; -} - -.portfolio-subtitle { - font-size: 1.1rem; - color: var(--text-muted); - line-height: 1.6; - max-width: 450px; -} - -.portfolio-text .btn { - margin-top: var(--spacing-sm); - align-self: flex-start; -} - -/* ============================================ - CARRUSEL DE PORTFOLIO (CON TAGS) - ============================================ */ -.portfolio-carousel { - position: relative; - width: 100%; + display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-lg); + max-width: 1400px; margin: 0 auto; align-items: center; } +.portfolio-text { display: flex; flex-direction: column; gap: var(--spacing-sm); } +.portfolio-title { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); line-height: 1.15; } +.portfolio-subtitle { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; max-width: 450px; } +.portfolio-text .btn { margin-top: var(--spacing-sm); align-self: flex-start; } +.portfolio-carousel { position: relative; width: 100%; } .carousel-container { - position: relative; - width: 100%; - /* Altura fija para contener tags + imagen 4:3 */ - min-height: 420px; - overflow: hidden; - border-radius: 16px; - box-shadow: var(--shadow); - background-color: var(--bg-surface); + position: relative; width: 100%; min-height: 420px; overflow: hidden; + border-radius: 16px; box-shadow: var(--shadow); background-color: var(--bg-surface); } -/* Cada slide */ .carousel-slide { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - transition: opacity 0.8s ease-in-out; - display: flex; - flex-direction: column; - padding: var(--spacing-sm); - gap: var(--spacing-sm); -} - -.carousel-slide.active { - opacity: 1; -} - -/* Tags dentro del slide */ -.slide-tags { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; - flex-shrink: 0; + position: absolute; top: 0; left: 0; width: 100%; height: 100%; + opacity: 0; transition: opacity 0.8s ease-in-out; + display: flex; flex-direction: column; padding: var(--spacing-sm); gap: var(--spacing-sm); } +.carousel-slide.active { opacity: 1; } +.slide-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-shrink: 0; } .slide-tag { - font-family: var(--font-small); - font-size: 0.75rem; - font-weight: 600; - padding: 0.3rem 0.75rem; - border-radius: 999px; - background-color: var(--btn-primary-bg); - color: var(--text-on-accent); - letter-spacing: 0.3px; - line-height: 1.2; + font-family: var(--font-small); font-size: 0.75rem; font-weight: 600; + padding: 0.3rem 0.75rem; border-radius: 999px; background-color: var(--btn-primary-bg); + color: var(--text-on-accent); letter-spacing: 0.3px; line-height: 1.2; } -/* Wrapper de la imagen (respeta ratio 4:3) */ .slide-image-wrapper { - flex: 1; - width: 100%; - border-radius: 12px; - overflow: hidden; - position: relative; - background-color: var(--bg-surface-elevated); -} - -.slide-image-wrapper::before { - content: ""; - display: block; - padding-top: 75%; - /* Ratio 4:3 */ -} - -.carousel-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - display: block; -} - -/* Indicadores del carrusel */ -.carousel-indicators { - display: flex; - justify-content: center; - gap: 0.5rem; - margin-top: var(--spacing-sm); + flex: 1; width: 100%; border-radius: 12px; overflow: hidden; + position: relative; background-color: var(--bg-surface-elevated); } +.slide-image-wrapper::before { content: ""; display: block; padding-top: 75%; } +.carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } +.carousel-indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--spacing-sm); } .indicator { - width: 10px; - height: 10px; - border-radius: 50%; - background-color: var(--border); - cursor: pointer; - transition: all 0.3s ease; + width: 10px; height: 10px; border-radius: 50%; background-color: var(--border); + cursor: pointer; transition: all 0.3s ease; } +.indicator.active { background-color: var(--btn-primary-bg); transform: scale(1.2); } +.indicator:hover { background-color: var(--btn-primary-hover); } -.indicator.active { - background-color: var(--btn-primary-bg); - transform: scale(1.2); -} - -.indicator:hover { - background-color: var(--btn-primary-hover); -} - -/* ============================================ - RESPONSIVE CARRUSEL PORTFOLIO - ============================================ */ @media (max-width: 968px) { - .portfolio-container { - grid-template-columns: 1fr; - gap: var(--spacing-md); - } - - .portfolio-text { - text-align: center; - align-items: center; - } - - .portfolio-subtitle { - max-width: 100%; - } - - .portfolio-text .btn { - align-self: center; - } - - .carousel-container { - min-height: 380px; - } + .portfolio-container { grid-template-columns: 1fr; gap: var(--spacing-md); } + .portfolio-text { text-align: center; align-items: center; } + .portfolio-subtitle { max-width: 100%; } + .portfolio-text .btn { align-self: center; } + .carousel-container { min-height: 380px; } } - @media (max-width: 768px) { - .portfolio-section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .carousel-container { - min-height: 340px; - } - - .slide-tag { - font-size: 0.7rem; - padding: 0.25rem 0.6rem; - } + .portfolio-section { padding: var(--spacing-md) var(--spacing-sm); } + .carousel-container { min-height: 340px; } + .slide-tag { font-size: 0.7rem; padding: 0.25rem 0.6rem; } } - @media (max-width: 480px) { - .carousel-container { - min-height: 300px; - } - - .carousel-slide { - padding: var(--spacing-xs); - gap: var(--spacing-xs); - } + .carousel-container { min-height: 300px; } + .carousel-slide { padding: var(--spacing-xs); gap: var(--spacing-xs); } } /* ============================================ TIRA MARQUEE (ICONOS INFINITOS CON FADE) ============================================ */ .marquee-section { - margin-top: var(--spacing-lg); - overflow: hidden; - padding: var(--spacing-md) 0; - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - - /* Efecto fade en los bordes izquierdo y derecho */ + margin-top: var(--spacing-lg); overflow: hidden; padding: var(--spacing-md) 0; + border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); -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%); } .marquee-track { - display: flex; - gap: var(--spacing-md); - /* Animación continua y lineal */ - animation: marquee-scroll 35s linear infinite; - will-change: transform; -} - -/* Animación de desplazamiento infinito */ -@keyframes marquee-scroll { - 0% { - transform: translateX(0); - } - - 100% { - /* Se mueve exactamente el 50% porque el contenido está duplicado */ - transform: translateX(-50%); - } -} - -/* ============================================ - TIRA MARQUEE (ICONOS INFINITOS) - ============================================ */ -.marquee-section { - margin-top: var(--spacing-lg); - overflow: hidden; - padding: var(--spacing-md) 0; - border-top: 1px solid var(--border); - border-bottom: 1px solid var(--border); - - /* Efecto fade en los bordes */ - -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%); -} - -.marquee-track { - display: flex; - gap: var(--spacing-md); - animation: marquee-scroll 35s linear infinite; - will-change: transform; + display: flex; gap: var(--spacing-md); + animation: marquee-scroll 35s linear infinite; will-change: transform; } @keyframes marquee-scroll { - 0% { - transform: translateX(0); - } - - 100% { - transform: translateX(-50%); - } + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } } -/* Contenedor de cada icono: tamaño fijo para alinear */ .marquee-item { - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - width: 110px; - /* Ancho fijo de la caja */ - height: 60px; - /* Altura fija de la caja */ + flex-shrink: 0; display: flex; align-items: center; justify-content: center; + width: 160px; height: 60px; } -/* El icono en sí: se adapta dentro de la caja sin deformarse */ .marquee-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; - /* Clave: contiene el SVG sin deformarlo */ - mask-size: contain; - filter: grayscale(100%) opacity(0.5); - color: var(--text-muted); - transition: all 0.3s ease; + 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; + filter: grayscale(100%) opacity(0.5); color: var(--text-muted); transition: all 0.3s ease; } +.marquee-icon:hover { filter: grayscale(0%) opacity(1); color: var(--brand-crimson); transform: scale(1.1); } -.marquee-icon:hover { - filter: grayscale(0%) opacity(1); - color: var(--brand-crimson); - transform: scale(1.1); -} - -/* Iconos específicos */ -.icon-analytics { - -webkit-mask-image: url("../assets/vectores/analytics.svg"); - mask-image: url("../assets/vectores/analytics.svg"); -} - -.icon-face { - -webkit-mask-image: url("../assets/vectores/face.svg"); - mask-image: url("../assets/vectores/face.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 - ============================================ */ -@media (max-width: 768px) { - .marquee-item { - width: 90px; - height: 50px; - } -} +.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); } +.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.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"); } +.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"); } +@media (max-width: 768px) { .marquee-item { width: 90px; height: 50px; } } @media (max-width: 480px) { - .marquee-item { - width: 75px; - height: 40px; - } - - .marquee-track { - gap: var(--spacing-sm); - } -} - -@media (prefers-reduced-motion: reduce) { - .marquee-track { - animation: none; - } + .marquee-item { width: 75px; height: 40px; } + .marquee-track { gap: var(--spacing-sm); } } +@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* ============================================ SECCIÓN CTA FINAL ============================================ */ -.cta-section { - padding: var(--spacing-lg) var(--spacing-md); - background-color: var(--bg-base); -} +.cta-section { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--bg-base); } -/* Tarjeta contenedora con fondo teal */ .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; + 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); } -/* Efecto de brillo sutil (glow) en las esquinas */ -.cta-card::before, -.cta-card::after { - content: ""; - position: absolute; - width: 300px; - height: 300px; - border-radius: 50%; - filter: blur(80px); - opacity: 0.35; - pointer-events: none; +.cta-card::before, .cta-card::after { + content: ""; position: absolute; width: 300px; height: 300px; + border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; } +.cta-card::before { top: -100px; left: -100px; background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); } +.cta-card::after { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); } -.cta-card::before { - top: -100px; - left: -100px; - background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); -} - -.cta-card::after { - bottom: -100px; - right: -100px; - background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); -} - -/* Contenido de la tarjeta */ .cta-title { - font-family: var(--font-title); - font-style: italic; - font-size: clamp(2rem, 4vw, 3rem); - color: #ffffff; - margin-bottom: var(--spacing-sm); - line-height: 1.15; - position: relative; - z-index: 1; + font-family: var(--font-title); font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); color: #ffffff; + margin-bottom: var(--spacing-sm); line-height: 1.15; position: relative; z-index: 1; } - .cta-subtitle { - font-family: var(--font-body); - font-size: clamp(1rem, 2vw, 1.15rem); - color: rgba(255, 255, 255, 0.85); - max-width: 600px; - margin: 0 auto var(--spacing-md); - line-height: 1.6; - position: relative; - z-index: 1; + font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem); + color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--spacing-md); + line-height: 1.6; position: relative; z-index: 1; } -/* Botones */ .cta-buttons { - display: flex; - justify-content: center; - gap: var(--spacing-sm); - flex-wrap: wrap; - position: relative; - z-index: 1; + display: flex; justify-content: center; gap: var(--spacing-sm); + flex-wrap: wrap; position: relative; z-index: 1; } -/* Botón primario invertido (claro sobre teal) */ .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; + 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; box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2); } - .btn-cta-primary:hover { - background-color: var(--brand-crimson); - color: #ffffff; - border-color: var(--brand-crimson); - transform: translateY(-2px); - box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); + background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson); + transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); } -/* Botón secundario outline (blanco sobre teal) */ .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; + 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); + background-color: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: translateY(-2px); } -/* ============================================ - RESPONSIVE CTA FINAL - ============================================ */ @media (max-width: 768px) { - .cta-section { - padding: var(--spacing-md) var(--spacing-sm); - } - - .cta-card { - padding: var(--spacing-md) var(--spacing-sm); - border-radius: 20px; - } - - .cta-buttons { - flex-direction: column; - align-items: center; - } - - .btn-cta-primary, - .btn-cta-secondary { - width: 100%; - max-width: 320px; - } + .cta-section { padding: var(--spacing-md) var(--spacing-sm); } + .cta-card { padding: var(--spacing-md) var(--spacing-sm); border-radius: 20px; } + .cta-buttons { flex-direction: column; align-items: center; } + .btn-cta-primary, .btn-cta-secondary { width: 100%; max-width: 320px; } } - @media (max-width: 480px) { - - .cta-card::before, - .cta-card::after { - width: 200px; - height: 200px; - } + .cta-card::before, .cta-card::after { width: 200px; height: 200px; } } - -/* Respetar preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { - - .btn-cta-primary, - .btn-cta-secondary { - transition: none; - } + .btn-cta-primary, .btn-cta-secondary { transition: none; } } \ No newline at end of file diff --git a/style/nosotros.css b/style/nosotros.css new file mode 100644 index 0000000..00732c1 --- /dev/null +++ b/style/nosotros.css @@ -0,0 +1,858 @@ +/* ============================================ + FUENTES DE MARCA + ============================================ */ +@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:wght@400;500;600;700&family=Windsong&display=swap'); + +/* ============================================ + VARIABLES DE TEMA (modo claro por defecto) + ============================================ */ +:root { + --brand-plum: #170c1d; + --brand-crimson: #ba124d; + --brand-teal: #003f52; + --brand-sage-light: #eaf0ee; + --brand-rose-muted: #dfbdb9; + --bg-dark-web: #110916; + --brand-teal-contraste: var(--brand-teal); + --brand-crimson-contraste: var(--brand-crimson); + + --bg-base: var(--brand-sage-light); + --bg-surface: #ffffff; + --bg-surface-elevated: #f5f9f8; + --bg-icon-contrast: var(--brand-teal); + + --text-primary: var(--brand-plum); + --text-secondary: var(--brand-teal); + --text-muted: rgba(34, 23, 40, 0.65); + --text-on-accent: #ffffff; + + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #9c0f40; + --btn-secondary-bg: var(--brand-teal); + --btn-secondary-hover: #002c3a; + + --badge-bg: var(--brand-rose-muted); + --badge-text: var(--brand-plum); + + --border: rgba(0, 63, 82, 0.12); + --shadow: 0 4px 20px -2px rgba(34, 23, 40, 0.08); + --glow-animation: rgba(186, 18, 77, 0.25); + --bg-contraste-teal: rgba(0,63,82, 1); + + --font-title: 'Literata', serif; + --font-subtitle: 'Literata', serif; + --font-body: 'Raleway', sans-serif; + --font-small: 'Jost', sans-serif; + --font-signature: 'Windsong', cursive; + + --font-family-base: var(--font-body); + --font-size-base: 16px; + + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 2rem; + --spacing-lg: 4rem; + --header-height: 72px; +} + +[data-theme="dark"] { + --bg-base: var(--bg-dark-web); + --bg-surface: #170c1d; + --bg-surface-elevated: #221728; + --bg-icon-contrast: var(--brand-sage-light); + --text-primary: var(--brand-sage-light); + --text-secondary: var(--brand-rose-muted); + --text-muted: rgba(234, 240, 238, 0.65); + --text-on-accent: #ffffff; + --btn-primary-bg: var(--brand-crimson); + --btn-primary-hover: #d81a5c; + --btn-secondary-bg: #0b5066; + --btn-secondary-hover: #10637d; + --badge-bg: rgba(223, 189, 185, 0.18); + --badge-text: var(--brand-rose-muted); + --border: rgba(234, 240, 238, 0.12); + --shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.45); + --glow-animation: rgba(186, 18, 77, 0.45); + --bg-contraste-teal: rgba(0,63,82, 0.5); +} + +/* ============================================ + RESET BÁSICO + ============================================ */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html { font-size: var(--font-size-base); scroll-behavior: smooth; } +body { + font-family: var(--font-family-base); + background-color: var(--bg-base); + color: var(--text-primary); + line-height: 1.5; + min-height: 100vh; + display: flex; + flex-direction: column; + transition: background-color 0.3s ease, color 0.3s ease; +} +h1, h2, h3 { font-family: var(--font-title); font-style: italic; font-weight: 700; } +h4, h5, h6 { font-family: var(--font-subtitle); font-style: italic; font-weight: 400; } +small { font-family: var(--font-small); } +button, .btn, [class*="btn-"] { font-family: var(--font-small); } +.signature, .firma { font-family: var(--font-signature); font-weight: 400; } +body.menu-open { overflow: hidden; padding-right: var(--scrollbar-width, 0px); } +main { flex: 1; } +img, video { max-width: 100%; display: block; } +a { color: inherit; text-decoration: none; } +ul { list-style: none; } + +/* ============================================ + HEADER, MENÚ Y FOOTER (Base) + ============================================ */ +#menu-container { position: sticky; top: 0; z-index: 100; } +.site-header { + background-color: var(--bg-surface); + border-bottom: 1px solid var(--border); + padding: var(--spacing-sm); + box-shadow: var(--shadow); + transition: transform 0.35s ease, box-shadow 0.35s ease; +} +.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; } +.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; } + +/* (Se omiten estilos intermedios del menú por brevedad, asumo que ya los tienes en tu archivo original. + Si necesitas el bloque completo del menú, avísame, pero se mantiene intacto tu CSS original aquí). */ + +.site-footer { + border-top: 1px solid var(--border); + padding-top: var(--spacing-lg); + margin-top: auto; + background-color: var(--bg-surface); +} +.footer-bottom { + border-top: 1px solid var(--border); + padding: var(--spacing-sm); + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); + background-color: var(--bg-surface); + font-family: 'Jost', sans-serif; +} + +/* ============================================ + COMPONENTES 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: 0 4px 14px -3px rgba(186, 18, 77, 0.35); +} +.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: 0 6px 20px -3px rgba(186, 18, 77, 0.45); +} +.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); +} + +/* ============================================ + SECCIÓN HERO (Adaptada para Nosotros) + ============================================ */ +.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(2.5rem, 6vw, 4.5rem); + line-height: 1.1; 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(1.1rem, 2.5vw, 1.5rem); + line-height: 1.5; color: var(--text-muted); + max-width: 750px; + 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; +} +.badge-filosofia { + display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; + background-color: var(--badge-bg); color: var(--badge-text); + font-family: var(--font-small); font-weight: 600; font-size: 0.85rem; + letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: var(--spacing-xs); + opacity: 0; animation: fadeInUp 0.9s ease-out 0s forwards; +} + +@keyframes fadeInUp { + 0% { opacity: 0; transform: translateY(30px); } + 100% { opacity: 1; transform: translateY(0); } +} + +/* ============================================ + ESTILOS ESPECÍFICOS: PÁGINA NOSOTROS + ============================================ */ + +/* Encabezados de sección genéricos */ +.section-header { + text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg); + padding: 0 var(--spacing-sm); +} +.section-title { + font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); + margin-bottom: var(--spacing-sm); line-height: 1.15; +} +.section-subtitle { + font-family: var(--font-body); font-size: 1.1rem; + color: var(--text-muted); line-height: 1.6; +} + +/* --- DUALIDAD --- */ +.dualidad-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-surface); +} +.dualidad-grid { + display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); + max-width: 1200px; margin: 0 auto; +} +.dualidad-card { + background-color: var(--bg-base); + border: 1px solid var(--border); + border-radius: 20px; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; + overflow: hidden; +} +.dualidad-card:hover { + transform: translateY(-5px); + box-shadow: linear-gradient(90deg, var(--brand-crimson), var(--brand-teal)); + border-color: var(--brand-rose-muted); +} +.dualidad-card h3 { + font-size: 2.5rem; margin: var(--spacing-sm) 0; + color: var(--text-primary); +} +.card-amor h3 { color: var(--brand-crimson); } +.card-roma h3 { color: var(--brand-teal); } + +.card-tag { + display: inline-block; font-family: var(--font-small); + font-size: 0.85rem; font-weight: 700; text-transform: uppercase; + letter-spacing: 1px; color: var(--text-muted); margin-bottom: var(--spacing-sm); +} +.dualidad-card p { + font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; max-width: 450px; margin: 0 auto; +} +.card-icon { + width: 64px; height: 64px; margin: 0 auto; + background-color: currentColor; + -webkit-mask-size: contain; mask-size: contain; + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: center; mask-position: center; +} +/* Nota: Reemplaza estas URLs con tus iconos reales de amor/corazón y columna/roma */ +.icon-amor { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); + color: var(--brand-crimson); +} +.icon-roma { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z'/%3E%3C/svg%3E"); + color: var(--brand-teal); +} + +/* --- PRINCIPIOS --- */ +.principios-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} +.principios-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); + max-width: 1200px; margin: 0 auto; +} +.principio-item { + background-color: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 16px; + padding: var(--spacing-md); + position: relative; + transition: all 0.3s ease; +} +.principio-item:hover { + border-color: var(--brand-teal); + transform: translateY(-3px); + box-shadow: var(--shadow); +} +.principio-numero { + font-family: var(--font-title); font-style: italic; + font-size: 3rem; font-weight: 700; color: var(--brand-rose-muted); + line-height: 1; margin-bottom: var(--spacing-xs); +} +.principio-item h4 { + font-family: var(--font-title); font-style: italic; + font-size: 1.3rem; color: var(--text-primary); margin-bottom: var(--spacing-xs); +} +.principio-item p { + font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; +} + +/* ============================================ + SECCIÓN CASOS TESTIGO (VERSIÓN SIMÉTRICA) + ============================================ */ +.casos-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.casos-grid-simetrico { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-md); + max-width: 1200px; + margin: 0 auto; +} + +.caso-card { + background-color: var(--bg-surface); + border: 1.5px solid var(--border); + border-radius: 16px; + padding: var(--spacing-md); + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + min-height: 320px; + position: relative; +} + +.caso-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--brand-teal), var(--brand-crimson)); + border-radius: 16px 16px 0 0; + opacity: 0; + transition: opacity 0.3s ease; +} + +.caso-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12); + border-color: var(--brand-teal); +} + +.caso-card:hover::before { + opacity: 1; +} + +/* Arquetipo 3 - Insígnia (Destacado pero simétrico) */ +.caso-insignia { + border-color: var(--brand-crimson); + background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-elevated) 100%); + box-shadow: 0 8px 24px -8px rgba(186, 18, 77, 0.15); +} + +.caso-insignia::before { + opacity: 1; + background: linear-gradient(90deg, var(--brand-crimson), var(--brand-rose-muted)); +} + +.caso-insignia:hover { + box-shadow: 0 16px 40px -10px rgba(186, 18, 77, 0.25); + transform: translateY(-6px); +} + +.caso-header { + display: flex; + flex-direction: column; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-xs); +} + +.caso-badge { + display: inline-block; + width: fit-content; + font-family: var(--font-small); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 0.3rem 0.8rem; + border-radius: 999px; + background-color: var(--badge-bg); + color: var(--badge-text); +} + +.caso-badge-insignia { + background-color: var(--brand-crimson); + color: var(--text-on-accent); + box-shadow: 0 2px 8px -2px rgba(186, 18, 77, 0.3); +} + +.caso-titulo { + font-family: var(--font-title); + font-style: italic; + font-size: 1.5rem; + color: var(--text-primary); + font-weight: 700; + line-height: 1.2; +} + +.caso-descripcion { + font-family: var(--font-body); + font-size: 0.95rem; + color: var(--brand-sage-light); + line-height: 1.6; + flex: 1; +} + +.caso-leccion { + font-family: var(--font-body); + font-size: 0.9rem; + color: var(--text-muted); + line-height: 1.6; + padding: var(--spacing-xs); + padding-left: var(--spacing-sm); + border-left: 3px solid var(--brand-teal); + background-color: var(--bg-surface-elevated); + border-radius: 0 8px 8px 0; + margin-top: auto; +} + +.caso-leccion strong { + color: var(--text-primary); + font-family: var(--font-small); + font-weight: 600; +} + +.caso-leccion-insignia { + border-left-color: var(--brand-crimson); + background-color: rgba(186, 18, 77, 0.05); +} + +/* Responsive */ +@media (max-width: 768px) { + .casos-grid-simetrico { + grid-template-columns: 1fr; + max-width: 500px; + } + + .caso-card { + min-height: auto; + } +} + +@media (max-width: 480px) { + .casos-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .caso-card { + padding: var(--spacing-sm); + } + + .caso-titulo { + font-size: 1.3rem; + } +} + +/* --- CTA FINAL (Reutiliza y refuerza tu base) --- */ +.cta-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} +.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); +} +.cta-card::before, .cta-card::after { + content: ""; position: absolute; width: 300px; height: 300px; + border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; +} +.cta-card::before { top: -100px; left: -100px; background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); } +.cta-card::after { bottom: -100px; right: -100px; background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); } + +.cta-title { + font-family: var(--font-title); font-style: italic; + font-size: clamp(2rem, 4vw, 3rem); color: #ffffff; + margin-bottom: var(--spacing-sm); line-height: 1.15; position: relative; z-index: 1; +} +.cta-subtitle { + font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem); + color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto var(--spacing-md); + line-height: 1.6; position: relative; z-index: 1; +} +.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; + box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2); +} +.btn-cta-primary:hover { + background-color: var(--brand-crimson); color: #ffffff; border-color: var(--brand-crimson); + transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); +} +.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); +} +/* ============================================ + SECCIÓN TRANSPARENCIA + ============================================ */ +.transparencia-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.transparencia-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); + max-width: 1200px; + margin: 0 auto; +} + +.transparencia-card { + background-color: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 20px; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; + overflow: hidden; +} + +.transparencia-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--brand-crimson), var(--brand-teal)); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease; +} + +.transparencia-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); + border-color: transparent; +} + +.transparencia-card:hover::before { + transform: scaleX(1); +} + +.transparencia-icono { + width: 80px; + height: 80px; + margin: 0 auto var(--spacing-md); + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: var(--bg-surface-elevated); + border: 2px solid var(--border); + color: var(--text-secondary); + transition: all 0.3s ease; +} + +.transparencia-card:hover .transparencia-icono { + border-color: var(--brand-crimson); + color: var(--brand-crimson); + transform: scale(1.1); +} + +.transparencia-titulo { + font-family: var(--font-body); + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 2px; + color: var(--text-muted); + margin-bottom: var(--spacing-sm); +} + +.transparencia-dato { + font-family: var(--font-title); + font-style: italic; + font-size: clamp(1.5rem, 3vw, 1rem); + font-weight: 500; + color: var(--brand-teal); + margin-bottom: var(--spacing-sm); + line-height: 1.2; +} + +.transparencia-texto { + font-family: var(--font-body); + font-size: 0.95rem; + color: var(--text-muted); + line-height: 1.7; +} + +.transparencia-texto strong { + color: var(--text-primary); + font-weight: 500; +} + +/* Responsive Transparencia */ +@media (max-width: 968px) { + .transparencia-grid { + grid-template-columns: 1fr; + max-width: 500px; + } + + .transparencia-card { + padding: var(--spacing-md); + } +} + +@media (max-width: 480px) { + .transparencia-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .transparencia-icono { + width: 64px; + height: 64px; + } + + .transparencia-dato { + font-size: 1.3rem; + } +} + +/* ============================================ + SECCIÓN QUIÉNES SOMOS / EQUIPO + ============================================ */ +.equipo-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +/* Título con gradiente en la palabra destacada */ +.text-gradient { + background: linear-gradient(90deg, var(--brand-crimson) 0%, var(--brand-teal) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-style: italic; +} + +.equipo-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-md); + max-width: 1100px; + margin: 0 auto var(--spacing-md); +} + +.equipo-card { + background-color: var(--bg-surface); + border: 1.5px solid var(--border); + border-radius: 20px; + padding: var(--spacing-lg) var(--spacing-md); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--spacing-sm); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; + overflow: hidden; + min-height: 320px; + justify-content: center; +} + +.equipo-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle at center, var(--glow-animation) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; +} + +.equipo-card:hover { + transform: translateY(-6px); + border-color: var(--brand-crimson); + box-shadow: 0 20px 40px -10px rgba(186, 18, 77, 0.2); +} + +.equipo-card:hover::before { + opacity: 0.3; +} + +/* Firma / Nombre en tipografía script */ +.equipo-firma { + font-family: var(--font-signature); + font-weight: 400; + font-size: clamp(2.2rem, 4vw, 3rem); + color: var(--text-primary); + line-height: 1.1; + margin-bottom: var(--spacing-xs); +} + +/* Rol / Especialidad */ +.equipo-rol { + font-family: var(--font-small); + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 2.5px; + text-transform: uppercase; + color: var(--text-muted); + padding: 0.4rem 1rem; + border: 1px solid var(--border); + border-radius: 999px; + background-color: var(--bg-surface-elevated); +} + +/* Descripción */ +.equipo-descripcion { + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-secondary); + line-height: 1.6; + max-width: 380px; + margin-top: var(--spacing-xs); +} + +/* Texto final de colaboradores */ +.equipo-colaboradores { + text-align: center; + font-family: var(--font-body); + font-size: 1rem; + color: var(--text-muted); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; + font-style: italic; +} + +/* Responsive */ +@media (max-width: 768px) { + .equipo-grid { + grid-template-columns: 1fr; + max-width: 500px; + } + + .equipo-card { + padding: var(--spacing-md); + min-height: auto; + } + + .equipo-firma { + font-size: 2.2rem; + } +} + +@media (max-width: 480px) { + .equipo-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .equipo-firma { + font-size: 1.9rem; + } + + .equipo-rol { + font-size: 0.7rem; + letter-spacing: 1.5px; + } + + .equipo-descripcion { + font-size: 0.95rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .equipo-card, .equipo-card::before { + transition: none; + } +} + +/* ============================================ + RESPONSIVE (MEDIA QUERIES) + ============================================ */ +@media (max-width: 1024px) { + .workflow-grid { grid-template-columns: repeat(3, 1fr); } + .workflow-grid::before { display: none; } /* Ocultar línea en tablet */ +} + +@media (max-width: 968px) { + .dualidad-grid { grid-template-columns: 1fr; } + .principios-grid { grid-template-columns: 1fr; max-width: 500px; } + .casos-grid { grid-template-columns: 1fr; } + .caso-card.featured { grid-column: span 1; grid-template-columns: 1fr; } +} + +@media (max-width: 768px) { + .hero-section { padding: var(--spacing-md) var(--spacing-sm); min-height: auto; padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } + .section-title { font-size: 1.75rem; } + .workflow-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } + .workflow-step { flex-direction: row; text-align: left; gap: var(--spacing-sm); align-items: flex-start; } + .step-number { flex-shrink: 0; margin-bottom: 0; width: 40px; height: 40px; font-size: 1rem; } + .cta-buttons { flex-direction: column; align-items: center; } + .btn-cta-primary, .btn-cta-secondary { width: 100%; max-width: 320px; } +} + +@media (max-width: 480px) { + .dualidad-card, .principio-item, .caso-card { padding: var(--spacing-sm); } + .dualidad-card h3 { font-size: 2rem; } +} + +@media (prefers-reduced-motion: reduce) { + .hero-title, .hero-subtitle, .hero-cta-group, .badge-filosofia { animation: none; opacity: 1; transform: none; } + .dualidad-card, .principio-item, .workflow-step, .caso-card, .btn, .btn-cta-primary, .btn-cta-secondary { transition: none; } +} \ No newline at end of file diff --git a/style/planes.css b/style/planes.css new file mode 100644 index 0000000..7d197de --- /dev/null +++ b/style/planes.css @@ -0,0 +1,728 @@ +/* ============================================ + PLANES - HERO + ============================================ */ +.planes-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; +} + +.planes-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; +} + +.planes-hero-content { + max-width: 800px; + position: relative; + z-index: 1; +} + +.planes-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); +} + +.planes-hero-title { + font-size: clamp(2.2rem, 5vw, 3.5rem); + color: var(--text-primary); + line-height: 1.15; + margin-bottom: var(--spacing-sm); +} + +.planes-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; +} + +.planes-hero-cta { + display: inline-block; +} + +/* ============================================ + PLANES - SELECTOR (TABS + PILLS) + ============================================ */ +.planes-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); +} + +.planes-selector-container { + max-width: 1200px; + margin: 0 auto; +} + +/* Tabs desktop */ +.planes-tabs { + display: flex; + justify-content: center; + gap: var(--spacing-xs); + flex-wrap: wrap; +} + +.plan-tab { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; + padding: 0.9rem 1.8rem; + background: transparent; + border: 1.5px solid var(--border); + border-radius: 16px; + cursor: pointer; + font-family: var(--font-small); + font-weight: 600; + color: var(--text-primary); + transition: all 0.3s ease; + min-width: 140px; +} + +.plan-tab:hover { + border-color: var(--brand-crimson); + color: var(--brand-crimson); + transform: translateY(-2px); +} + +.plan-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-label { + font-size: 0.95rem; +} + +.tab-precio { + font-size: 1.1rem; + font-weight: 700; +} + +/* Pills mobile */ +.planes-pills { + display: none; + overflow-x: auto; + gap: 0.5rem; + padding-bottom: 0.5rem; + scrollbar-width: none; +} + +.planes-pills::-webkit-scrollbar { + display: none; +} + +.plan-pill { + flex-shrink: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + padding: 0.7rem 1.2rem; + background: var(--bg-surface-elevated); + border: 1.5px solid var(--border); + border-radius: 12px; + cursor: pointer; + font-family: var(--font-small); + font-weight: 600; + color: var(--text-primary); + transition: all 0.3s ease; +} + +.plan-pill.active { + background-color: var(--brand-crimson); + border-color: var(--brand-crimson); + color: var(--text-on-accent); +} + +.pill-precio { + font-size: 0.9rem; + font-weight: 700; +} + +/* ============================================ + PLANES - PANEL DE CONTENIDO + ============================================ */ +.planes-panel-section { + padding: var(--spacing-md) var(--spacing-md); + background-color: var(--bg-base); + min-height: 600px; +} + +.planes-panel-container { + max-width: 1200px; + margin: 0 auto; + position: relative; +} + +.plan-panel { + display: none; + background-color: var(--bg-surface); + border-radius: 16px; + padding: var(--spacing-md); + box-shadow: var(--shadow); + border: 1px solid var(--border); + animation: slideInPanel 0.5s ease-out; +} + +.plan-panel.active { + display: block; +} + +@keyframes slideInPanel { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* Header del panel */ +.panel-header { + margin-bottom: var(--spacing-sm); + padding-bottom: var(--spacing-sm); + border-bottom: 1px solid var(--border); + text-align: center; +} + +.panel-categoria { + font-family: var(--font-small); + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + display: inline-block; + padding: 0.3rem 0.8rem; + background-color: var(--badge-bg); + color: var(--badge-text); + border-radius: 999px; + margin-bottom: var(--spacing-xs); +} + +.panel-titulo { + font-size: clamp(1.5rem, 3vw, 2rem); + 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: 1rem; + color: var(--text-muted); + max-width: 700px; + margin: 0 auto; + line-height: 1.5; + opacity: 0; + animation: fadeInUp 0.6s ease-out 0.2s forwards; +} + +/* Grid de Dimensiones */ +.panel-grid-dimensiones { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--spacing-sm); + margin-bottom: var(--spacing-md); +} + +.dimension-card { + position: relative; /* Necesario para posicionar el icono decorativo */ + background-color: var(--bg-surface-elevated); + border: 1px solid var(--border); + border-radius: 12px; + padding: var(--spacing-sm); + /*padding-top: 3.5rem;*/ + transition: all 0.3s ease; + opacity: 0; + animation: fadeInUp 0.6s ease-out 0.3s forwards; + overflow: hidden; /* Para que el icono no se salga */ +} + +.dimension-card:hover { + border-color: var(--brand-crimson); + transform: translateY(-2px); + box-shadow: var(--shadow); +} + +/* Icono decorativo en esquina superior derecha */ +.dimension-icon-deco { + position: absolute; + top: 50%; + right: var(--spacing-sm); + transform: translateY(-50%); + width: 80px; /* Más grande para que se vea como marca de agua */ + height: 80px; + display: flex; + align-items: center; + justify-content: center; + /* Sin fondo ni border-radius */ + background-color: transparent; + opacity: 0.08; /* Muy sutil, casi transparente */ + color: var(--brand-crimson); + font-size: 3rem; /* Icono grande */ + z-index: 1; + pointer-events: none; +} + +/* Título sin icono inline */ +.dimension-titulo { + font-family: var(--font-subtitle); + font-size: 1.1rem; /* Un poco más grande ahora que tiene espacio */ + color: var(--text-primary); + margin-bottom: var(--spacing-xs); + font-style: italic; + line-height: 1.2; + padding-right: 3.5rem; /* Espacio para que no se superponga con el icono */ +} + +.dimension-lista { + list-style: none; + display: flex; + flex-direction: column; + gap: 0.35rem; +} + +.dimension-lista li { + font-size: 0.85rem; + color: var(--text-primary); + display: flex; + align-items: flex-start; + gap: 0.5rem; + line-height: 1.35; +} + +.dimension-lista li i { + flex-shrink: 0; + margin-top: 0.15rem; + font-size: 0.75rem; +} + +.dimension-lista .fa-check { + color: var(--brand-teal); +} + +.dimension-lista .fa-times { + color: var(--brand-crimson); + opacity: 0.6; +} + +.dimension-lista .fa-info-circle { + color: var(--brand-rose-muted); +} + +/* Tarjeta de Precio */ +.panel-precio-card { + background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-plum) 100%); + border-radius: 12px; + padding: var(--spacing-sm); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-sm); + opacity: 0; + animation: fadeInUp 0.6s ease-out 0.5s forwards; +} + +.precio-header { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.precio-label { + font-family: var(--font-small); + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.85); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.precio-valor { + display: flex; + align-items: baseline; + gap: 0.2rem; + color: #ffffff; +} + +.precio-moneda { + font-size: 1.2rem; + font-weight: 700; +} + +.precio-monto { + font-size: 2rem; + font-weight: 700; + font-family: var(--font-title); +} + +.precio-periodo { + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.85); +} + +.btn-contratar { + padding: 0.7rem 1.8rem; + background-color: #ffffff; + color: var(--brand-teal); + border: none; + border-radius: 999px; + font-weight: 700; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.2); +} + +.btn-contratar:hover { + background-color: var(--brand-crimson); + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 20px -3px rgba(186, 18, 77, 0.45); +} + +/* ============================================ + PLANES - TABLA COMPARATIVA + ============================================ */ +.planes-comparativa-section { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.comparativa-container { + max-width: 1100px; + margin: 0 auto; +} + +.comparativa-header { + text-align: center; + margin-bottom: var(--spacing-md); +} + +.comparativa-titulo { + font-size: clamp(1.8rem, 3vw, 2.5rem); + color: var(--text-primary); + margin-bottom: var(--spacing-xs); +} + +.comparativa-subtitulo { + font-size: 1.1rem; + color: var(--text-muted); +} + +.comparativa-table-wrapper { + overflow-x: auto; + border-radius: 12px; + box-shadow: var(--shadow); +} + +.comparativa-table { + width: 100%; + border-collapse: collapse; + background-color: var(--bg-surface); + min-width: 700px; +} + +.comparativa-table thead { + background-color: var(--bg-surface-elevated); +} + +.comparativa-table th { + padding: var(--spacing-sm) var(--spacing-md); + text-align: center; + font-family: var(--font-small); + font-weight: 700; + color: var(--text-primary); + border-bottom: 2px solid var(--border); +} + +.col-caracteristica { + text-align: left; + font-weight: 600; +} + +.comparativa-table td { + padding: var(--spacing-sm) var(--spacing-md); + text-align: center; + border-bottom: 1px solid var(--border); + color: var(--text-primary); +} + +.caracteristica-nombre { + text-align: left; + font-weight: 500; +} + +.comparativa-table .fa-check { + color: var(--brand-teal); + font-size: 1.1rem; +} + +.comparativa-table .fa-times { + color: var(--brand-crimson); + opacity: 0.6; +} + +.comparativa-table .fa-minus { + color: var(--text-muted); + opacity: 0.5; +} + +.row-precio { + background-color: var(--bg-surface-elevated); + font-weight: 700; +} + +.precio-celda { + font-family: var(--font-title); + color: var(--brand-crimson); + font-size: 1.1rem; +} + +/* ============================================ + PLANES - CTA FINAL + ============================================ */ +.planes-cta { + padding: var(--spacing-lg) var(--spacing-md); + background-color: var(--bg-base); +} + +.planes-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); +} + +.planes-cta-card::before, +.planes-cta-card::after { + content: ""; + position: absolute; + width: 300px; + height: 300px; + border-radius: 50%; + filter: blur(80px); + opacity: 0.35; + pointer-events: none; +} + +.planes-cta-card::before { + top: -100px; + left: -100px; + background: radial-gradient(circle, var(--brand-crimson) 0%, transparent 70%); +} + +.planes-cta-card::after { + bottom: -100px; + right: -100px; + background: radial-gradient(circle, var(--brand-rose-muted) 0%, transparent 70%); +} + +.planes-cta-titulo { + font-size: clamp(1.8rem, 3.5vw, 2.5rem); + color: #ffffff; + margin-bottom: var(--spacing-sm); + position: relative; + z-index: 1; +} + +.planes-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; +} + +.planes-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); +} + +/* ============================================ + PLANES - CIERRE + ============================================ */ +.planes-cierre { + height: var(--spacing-md); +} + +/* ============================================ + RESPONSIVE PLANES + ============================================ */ +@media (max-width: 968px) { + .panel-grid-dimensiones { + grid-template-columns: 1fr; + } + + .panel-precio-card { + flex-direction: column; + text-align: center; + } +} + +@media (max-width: 768px) { + .planes-hero { + min-height: 60vh; + padding: var(--spacing-md) var(--spacing-sm); + } + + .planes-tabs { + display: none; + } + + .planes-pills { + display: flex; + } + + .planes-panel-section { + padding: var(--spacing-md) var(--spacing-sm); + } + + .plan-panel { + padding: var(--spacing-md); + } + + .dimension-card { + padding: var(--spacing-sm); + } + + .dimension-icon { + width: 40px; + height: 40px; + font-size: 1.2rem; + } + + .precio-monto { + font-size: 2rem; + } + + .comparativa-table-wrapper { + border-radius: 8px; + } + + .comparativa-table th, + .comparativa-table td { + padding: 0.6rem 0.8rem; + font-size: 0.85rem; + } + + .planes-cta-card { + padding: var(--spacing-md) var(--spacing-sm); + } +} + +@media (max-width: 480px) { + .planes-hero-title { + font-size: 1.8rem; + } + + .plan-panel { + padding: var(--spacing-sm); + } + + .panel-titulo { + font-size: 1.5rem; + } + + .dimension-titulo { + font-size: 1rem; + } + + .precio-monto { + font-size: 1.8rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .plan-panel, + .panel-titulo, + .panel-subtitulo, + .dimension-card, + .panel-precio-card { + animation: none; + opacity: 1; + transform: none; + } +} \ No newline at end of file