index preliminar
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
# AGENTS.md para Web A&R 2026
|
||||
|
||||
## Estructura del sitio web
|
||||
|
||||
Sitio corporativo simple para agencia de marketing digital:
|
||||
- Archivos HTML principales: index.html, nosotros.html, servicios.html, planes.html
|
||||
- Componentes reutilizables en `include/` (header.html, footer.html)
|
||||
- assets/ y styles/ directorios vacíos - diseño pendiente
|
||||
|
||||
## Convenciones
|
||||
|
||||
- Nombre de la empresa: Amor&Roma (incluye símbolo "&" - no acento)
|
||||
- Estética boutique como enfoque de diseño
|
||||
- Desarrollado con HTML/CSS vanilla (sin frameworks detectados en el código actual)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
+663
@@ -0,0 +1,663 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Amor & Roma — Estudio Creativo</title>
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
|
||||
<canvas id="fluidCanvas"></canvas>
|
||||
|
||||
<!-- ===== OVERLAY ===== -->
|
||||
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
|
||||
|
||||
<!-- ===== MENU BOTTOM SHEET ===== -->
|
||||
<nav class="sheet" id="sheet">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-top">
|
||||
<div class="logo">
|
||||
<a href="index.html">
|
||||
<img src="./assets/logos/logo_ciruela.png" alt="Amor & Roma" class="logo-img">
|
||||
</a>
|
||||
</div>
|
||||
<button class="close-btn" onclick="toggleMenu()">✕</button>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Soluciones Web</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Diseño Web</span>
|
||||
<span class="sheet-link-desc">Sitios informativos modernos</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">E-commerce</span>
|
||||
<span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Google Ads</span>
|
||||
<span class="sheet-link-desc">Publicidad en Search y Display</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Redes Sociales</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Community Manager</span>
|
||||
<span class="sheet-link-desc">Administración profesional de redes</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Creación de Contenido</span>
|
||||
<span class="sheet-link-desc">Contenido original y atractivo</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Meta Ads</span>
|
||||
<span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sheet-col">
|
||||
<div class="sheet-col-title">Branding</div>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Diseño de Logos</span>
|
||||
<span class="sheet-link-desc">Personalizados y profesionales</span>
|
||||
</a>
|
||||
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
|
||||
<span class="sheet-link-icon">⊞</span>
|
||||
<span class="sheet-link-main">Identidad de Marca</span>
|
||||
<span class="sheet-link-desc">Creación y desarrollo de marca</span>
|
||||
</a>
|
||||
<a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
|
||||
<span class="sheet-link-icon">✉</span>
|
||||
<span class="sheet-link-main">Contacto</span>
|
||||
<span class="sheet-link-desc">Empezá tu proyecto</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HEADER ===== -->
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="#inicio">
|
||||
<img src="./assets/logos/logo_frio.png" alt="Amor & Roma" class="logo-img">
|
||||
</a>
|
||||
</div>
|
||||
<button class="menu-btn" onclick="toggleMenu()" aria-label="Abrir menú">
|
||||
<span class="bars"><span></span><span></span><span></span></span>
|
||||
<span class="menu-label">Menú</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="inicio">
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow">Estudio Creativo · Agencia Boutique</div>
|
||||
<h1>Marcas con <span class="grad-word">esencia,</span><br>construidas con <span class="grad-word">estrategia.</span></h1>
|
||||
<p>Branding, diseño web y marketing digital para negocios que quieren crecer sin perder lo que los hace únicos.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#servicios" class="btn btn-solid">Ver servicios</a>
|
||||
<a href="#contacto" class="btn btn-outline">Contactanos</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-hint"><div class="line"></div>Scroll</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SERVICIOS ===== -->
|
||||
<section class="servicios" id="servicios">
|
||||
<div class="eyebrow">Lo que hacemos</div>
|
||||
<h2>Servicios pensados para marcas con <span class="grad-word">esencia.</span></h2>
|
||||
<p class="lede">Cuatro disciplinas que trabajan juntas, no por separado — cada proyecto se arma con la combinación justa para tu marca.</p>
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab(0,this)"><span class="num">01</span>Branding</button>
|
||||
<button class="tab" onclick="showTab(1,this)"><span class="num">02</span>Diseño Web</button>
|
||||
<button class="tab" onclick="showTab(2,this)"><span class="num">03</span>Marketing Digital</button>
|
||||
<button class="tab" onclick="showTab(3,this)"><span class="num">04</span>IA & Automatización</button>
|
||||
</div>
|
||||
<div class="panel active" data-panel="0">
|
||||
<div class="panel-copy">
|
||||
<h3>Identidad con <em>alma,</em><br>no solo con estilo.</h3>
|
||||
<p>Construimos el sistema visual y verbal que sostiene tu marca: desde el naming y el logo hasta el tono de voz con el que hablás en cada canal.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi identidad de marca →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Naming y concepto de marca</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Diseño de logo e isotipo</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Paleta, tipografía y manual de marca</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Tono de voz y guía de comunicación</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="1">
|
||||
<div class="panel-copy">
|
||||
<h3>Sitios que <em>convierten,</em><br>no solo que se ven bien.</h3>
|
||||
<p>Diseño y desarrollo de sitios web a medida — rápidos, responsivos y pensados para que quien llega, actúe.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi sitio web →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Landing pages y sitios institucionales</div>
|
||||
<div class="item"><span class="icon-min">✦</span> UX/UI a medida</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Optimización SEO técnica</div>
|
||||
<div class="item"><span class="icon-min">✦</span> E-commerce y tiendas online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="2">
|
||||
<div class="panel-copy">
|
||||
<h3>Presencia <em>constante,</em><br>estrategia real.</h3>
|
||||
<p>Gestión de redes, contenido y pauta — con reportes claros para que sepas siempre qué está funcionando y por qué.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero mi estrategia digital →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Community management</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Publicidad en Meta e Instagram Ads</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Estrategia de contenido y calendario</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Reportes mensuales de performance</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel" data-panel="3">
|
||||
<div class="panel-copy">
|
||||
<h3>Tecnología al servicio<br>de <em>tu tiempo.</em></h3>
|
||||
<p>Automatizamos lo repetitivo para que tu equipo se enfoque en lo estratégico — sin perder el trato cercano con tus clientes.</p>
|
||||
<a href="#contacto" class="btn btn-outline">Quiero automatizar procesos →</a>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
<div class="item"><span class="icon-min">✦</span> Chatbots y respuestas automáticas</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Automatización de leads y seguimiento</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Integraciones con CRM y WhatsApp</div>
|
||||
<div class="item"><span class="icon-min">✦</span> Consultoría en IA aplicada a tu negocio</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== PLANES ===== -->
|
||||
<section class="planes" id="planes">
|
||||
<div class="eyebrow">Inversión</div>
|
||||
<h2>Un plan para cada <span class="grad-word">etapa</span> de tu marca.</h2>
|
||||
<p class="lede">Cuatro niveles pensados para acompañar tu crecimiento — desde presencia digital consistente hasta gestión integral de marca.</p>
|
||||
<div class="plans-grid">
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Esencial</div>
|
||||
<div class="plan-stars">★</div>
|
||||
<div class="plan-obj">Establecer una presencia digital profesional y consistente.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>2 redes sociales</li>
|
||||
<li>8 publicaciones + 8 historias / mes</li>
|
||||
<li>1 diseño de marca (logo)</li>
|
||||
<li>Reunión mensual de estrategia</li>
|
||||
<li>Reporte mensual de métricas</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Impulso</div>
|
||||
<div class="plan-stars">★★</div>
|
||||
<div class="plan-obj">Aumentar visibilidad, interacción y generación de leads calificados.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>2 redes · 12 publicaciones + 4 reels</li>
|
||||
<li>Logo + paleta de colores</li>
|
||||
<li>1 campaña Meta Ads + retargeting</li>
|
||||
<li>Automatización de respuestas frecuentes</li>
|
||||
<li>Gestión de Meta Business Suite</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card reco">
|
||||
<div class="badge">Más Popular</div>
|
||||
<div class="plan-name">Premium</div>
|
||||
<div class="plan-stars">★★★</div>
|
||||
<div class="plan-obj">Consolidar y expandir la empresa comercialmente.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>3 redes · 16 publicaciones + 8 reels</li>
|
||||
<li>Sesión de fotos/video quincenal</li>
|
||||
<li>2 campañas Meta Ads + Google Ads</li>
|
||||
<li>Respuestas con IA 24/7</li>
|
||||
<li>Reporte semanal + reunión mensual</li>
|
||||
<li>Soporte prioritario</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
<div class="plan-card">
|
||||
<div class="plan-name">Elite</div>
|
||||
<div class="plan-stars">★★★★</div>
|
||||
<div class="plan-obj">Máximo posicionamiento y gestión integral de marca.</div>
|
||||
<ul class="plan-feats">
|
||||
<li>4 redes · 20 publicaciones + 16 reels</li>
|
||||
<li>Dirección creativa integral de marca</li>
|
||||
<li>3 campañas + TikTok Ads + Google Ads</li>
|
||||
<li>Estrategia 360° con planificación mensual</li>
|
||||
<li>Gestión de reputación online</li>
|
||||
</ul>
|
||||
<a href="#contacto" class="plan-cta">+Info</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#cotizador" class="btn btn-outline plan-main-cta">Consulta tu plan ideal</a>
|
||||
</section>
|
||||
|
||||
<!-- ===== POTENCIADORES DE NEGOCIO ===== -->
|
||||
<section class="servicios-carta" id="servicios-carta">
|
||||
<div class="eyebrow">Potenciadores de negocio</div>
|
||||
<h2>Para complementar cualquier <span class="grad-word">plan,</span><br>o contratar de forma <span class="grad-word">independiente.</span></h2>
|
||||
<p class="lede">Elegí los servicios que necesitás, sin compromiso mensual. Todo lo que tu marca necesita, a tu ritmo.</p>
|
||||
<div class="acc" id="acc">
|
||||
<div class="acc-item open">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">01</span><span class="acc-name">Diseño Web & Desarrollo</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Landing Page Profesional</b>Diseño de una sección, UI/UX + SEO básico <span class="price">Desde $350.000</span></div>
|
||||
<div class="service-row"><b>Sitio Institucional (hasta 7 secciones)</b>Inicio, Servicios, Nosotros, Blog, Contacto <span class="price">Desde $600.000</span></div>
|
||||
<div class="service-row"><b>E-commerce</b>Tienda online autoadministrable con pasarela de pago <span class="price">Desde $900.000</span></div>
|
||||
<div class="service-row"><b>Mantenimiento Web</b>Backups, seguridad y soporte técnico <span class="price">Desde $50.000/mes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">02</span><span class="acc-name">Branding e Identidad Visual</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Diseño de Logotipo</b>3 propuestas + revisiones <span class="price">Desde $180.000</span></div>
|
||||
<div class="service-row"><b>Manual de Marca Completo</b>Logo, paleta, tipografías, tono de voz <span class="price">Desde $300.000</span></div>
|
||||
<div class="service-row"><b>Rediseño de Identidad Visual</b>Actualización de marca existente <span class="price">A cotizar</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">03</span><span class="acc-name">Publicidad Digital Avanzada</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Campaña Google Ads</b>Búsqueda y display <span class="price">Desde $150.000/mes</span></div>
|
||||
<div class="service-row"><b>Campaña TikTok Ads</b>Alcance a audiencias jóvenes <span class="price">Desde $120.000/mes</span></div>
|
||||
<div class="service-row"><b>Auditoría de Campañas</b>Análisis y oportunidades de mejora <span class="price">Desde $90.000</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">04</span><span class="acc-name">Diseño Digital & Gráfico</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Infografías</b>Comunicación visual de datos y procesos <span class="price">Desde $80.000/u</span></div>
|
||||
<div class="service-row"><b>Plantillas para Redes</b>Set editable de 5 piezas <span class="price">Desde $100.000</span></div>
|
||||
<div class="service-row"><b>Material Impreso</b>Flyers, folletos, tarjetas <span class="price">A cotizar</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acc-item">
|
||||
<div class="acc-head" onclick="toggleAcc(this)">
|
||||
<div class="acc-head-left"><span class="acc-num">05</span><span class="acc-name">Producción Audiovisual</span></div>
|
||||
<div class="acc-toggle">+</div>
|
||||
</div>
|
||||
<div class="acc-body">
|
||||
<div class="acc-body-inner">
|
||||
<div class="service-row"><b>Sesión Fotográfica</b>Producto, instalaciones o equipo <span class="price">A cotizar</span></div>
|
||||
<div class="service-row"><b>Reel / Video Corto</b>Hasta 30 segundos, con edición <span class="price">Desde $120.000</span></div>
|
||||
<div class="service-row"><b>Pack de 3 Reels</b>Contenido consistente de alto impacto <span class="price">Desde $300.000</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== PROCESO ===== -->
|
||||
<section class="proceso" id="proceso">
|
||||
<div class="eyebrow">Cómo trabajamos</div>
|
||||
<h2>Tu proyecto, paso a paso, y sin <span class="grad-word">sorpresas.</span></h2>
|
||||
<p class="lede">Un proceso claro y colaborativo — sabés exactamente qué pasa en cada etapa, sin plantillas genéricas.</p>
|
||||
<div class="arcade-grid">
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">01</span></div>
|
||||
<div class="cat">Contacto</div>
|
||||
<div class="step-title">Reunión de brief</div>
|
||||
<div class="step-desc">Nos contás tu marca y objetivos.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">02</span></div>
|
||||
<div class="cat">Propuesta</div>
|
||||
<div class="step-title">Plan de trabajo</div>
|
||||
<div class="step-desc">Entregables, inversión y tiempos.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">03</span></div>
|
||||
<div class="cat">Diseño</div>
|
||||
<div class="step-title">Dirección de arte</div>
|
||||
<div class="step-desc">Concepto visual a tu aprobación.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">04</span></div>
|
||||
<div class="cat">Producción</div>
|
||||
<div class="step-title">Desarrollo</div>
|
||||
<div class="step-desc">Construimos con seguimiento.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch"><span class="num">05</span></div>
|
||||
<div class="cat">Revisión</div>
|
||||
<div class="step-title">Ajustes finales</div>
|
||||
<div class="step-desc">Tu feedback moldea el resultado.</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="arch final"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.4"><path d="M5 12l5 5L19 7"/></svg></div>
|
||||
<div class="cat">Lanzamiento</div>
|
||||
<div class="step-title">Entrega</div>
|
||||
<div class="step-desc">Accesos y capacitación completa.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CIFRAS ===== -->
|
||||
<section class="cifras" id="cifras">
|
||||
<div class="eyebrow">Inversión & tiempos</div>
|
||||
<h2>Transparencia antes de la <span class="grad-word">primera reunión.</span></h2>
|
||||
<p class="lede">Los números, dichos de entrada — no como parte de una negociación, sino como punto de partida.</p>
|
||||
<div class="cifras-grid">
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Inversión</div>
|
||||
<div class="cifra-value">Desde $250.000/mes</div>
|
||||
<div class="cifra-desc">Planes desde <b>$250.000</b> (Esencial) hasta <b>$1.000.000</b> (Elite). El armado inicial —branding, sitio web— se presupuesta por proyecto.</div>
|
||||
</div>
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Tiempos</div>
|
||||
<div class="cifra-value">15–30 días</div>
|
||||
<div class="cifra-desc">Presencia digital lista en <b>15-30 días</b>. Resultados de posicionamiento sostenido en <b>3-6 meses</b>. Sin promesas de magia inmediata.</div>
|
||||
</div>
|
||||
<div class="cifra-card">
|
||||
<div class="cifra-icon"></div>
|
||||
<div class="cifra-label">Contrato</div>
|
||||
<div class="cifra-value">3 meses · luego mensual</div>
|
||||
<div class="cifra-desc">Compromiso mínimo de <b>3 meses</b> para que la estrategia tome forma, luego renovación mensual. Cancelación <b>con 30 días de aviso</b>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== COTIZADOR ===== -->
|
||||
<section class="cotizador" id="cotizador">
|
||||
<div class="eyebrow">Cotizador</div>
|
||||
<h2>¿Cuál es tu <span class="grad-word">plan ideal</span><span class="signopreg">?</span></h2>
|
||||
<p class="lede">3 preguntas rápidas y te decimos qué plan se ajusta mejor a tu marca.</p>
|
||||
<div class="card">
|
||||
<div class="progress">
|
||||
<div class="seg"><i id="p1"></i></div>
|
||||
<div class="seg"><i id="p2"></i></div>
|
||||
<div class="seg"><i id="p3"></i></div>
|
||||
</div>
|
||||
<div class="step active" data-step="0">
|
||||
<div class="q-num">Pregunta 01</div>
|
||||
<div class="q-title">¿Cómo describirías el momento de tu negocio?</div>
|
||||
<div class="options" data-q="0">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Recién empezando</div><div class="opt-sub">Necesito presencia digital desde cero</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">En crecimiento</div><div class="opt-sub">Ya tengo redes, quiero más alcance</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">Establecido</div><div class="opt-sub">Busco consolidar y vender más</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Consolidado</div><div class="opt-sub">Quiero gestión integral de marca</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><span></span><button class="btn btn-cotizador" onclick="next()" disabled id="next0">Siguiente →</button></div>
|
||||
</div>
|
||||
<div class="step" data-step="1">
|
||||
<div class="q-num">Pregunta 02</div>
|
||||
<div class="q-title">¿Qué es lo que más necesitás hoy?</div>
|
||||
<div class="options" data-q="1">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Presencia en redes</div><div class="opt-sub">Contenido consistente y profesional</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">Más leads y ventas</div><div class="opt-sub">Publicidad digital que convierta</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">Producción de contenido</div><div class="opt-sub">Fotos, video y piezas de calidad</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Todo integrado</div><div class="opt-sub">Estrategia 360° gestionada por otros</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="next()" disabled id="next1">Siguiente →</button></div>
|
||||
</div>
|
||||
<div class="step" data-step="2">
|
||||
<div class="q-num">Pregunta 03</div>
|
||||
<div class="q-title">¿Cuál es tu presupuesto mensual aproximado?</div>
|
||||
<div class="options" data-q="2">
|
||||
<div class="opt" data-val="1"><div class="opt-title">Hasta $300.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="2"><div class="opt-title">$300.000 – $450.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="3"><div class="opt-title">$450.000 – $700.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
<div class="opt" data-val="4"><div class="opt-title">Más de $700.000</div><div class="opt-sub">ARS / mes</div></div>
|
||||
</div>
|
||||
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="showResult()" disabled id="next2">Ver resultado →</button></div>
|
||||
</div>
|
||||
<div class="result" id="result">
|
||||
<div class="result-badge">Tu plan recomendado</div>
|
||||
<div class="result-plan" id="rp-name">—</div>
|
||||
<div class="result-price" id="rp-price">—</div>
|
||||
<p class="result-desc" id="rp-desc">—</p>
|
||||
<div class="result-actions">
|
||||
<a class="btn btn-solid" href="#contacto">Quiero este plan</a>
|
||||
<button class="btn btn-cotizador-restart" onclick="restart()">Volver a empezar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== NOSOTROS ===== -->
|
||||
<section class="quienes" id="nosotros">
|
||||
<div class="eyebrow">Nosotros</div>
|
||||
<h2>Mentes creativas, con <span class="grad-word">mucha energía.</span></h2>
|
||||
<p class="lede"> Combinamos el arte del Marketing con la Ciencia de los datos.</p>
|
||||
<div class="team-grid team-grid-simple">
|
||||
<div class="team-card-simple">
|
||||
<div class="team-name">Patricia Pugliese</div>
|
||||
<div class="team-role">Estrategia & Creatividad</div>
|
||||
<div class="team-detail">Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.</div>
|
||||
</div>
|
||||
<div class="team-card-simple">
|
||||
<div class="team-name">Francisco Anfuso</div>
|
||||
<div class="team-role">Desarrollo & Tecnología</div>
|
||||
<div class="team-detail">Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-footer">
|
||||
<p class="team-footer-text">Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FAQ ===== -->
|
||||
<section class="faq" id="faq">
|
||||
<div class="eyebrow">Preguntas Frecuentes</div>
|
||||
<h2>Todo lo que necesitás saber <span class="grad-word">antes de empezar.</span></h2>
|
||||
<p class="lede">Respondemos las dudas más comunes para que llegues con confianza al primer encuentro.</p>
|
||||
<div class="faq-grid">
|
||||
<div class="faq-item open">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Cómo funciona el proceso de trabajo?</em></span>
|
||||
<span class="faq-toggle">−</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Empezamos con una llamada de descubrimiento para conocer tu negocio, objetivos y desafíos. Luego armamos una propuesta a medida, la ejecutamos con entregas parciales y ajustamos hasta que estés 100% conforme. Todo con comunicación clara y tiempos acordados.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Qué incluye exactamente cada plan?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Cada plan tiene un desglose detallado en la sección de Planes. Pero en resumen: incluyen gestión de redes, diseño de marca, publicidad digital, automatizaciones y reportes. Si necesitás algo específico que no esté listado, lo sumamos a medida.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Puedo contratar servicios sueltos sin un plan mensual?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>¡Sí! En la sección "Servicios a la carta" tenés disponibles branding, diseño web, campañas puntuales y producción de contenido. Podés contratarlos de forma independiente, sin compromiso mensual.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Qué resultados puedo esperar?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Depende del punto de partida, pero nuestros clientes suelen ver aumento en alcance, engagement y generación de leads en los primeros 3 meses. Compartimos reportes mensuales para que siempre sepas cómo evoluciona tu marca.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Trabajan con negocios de cualquier rubro?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Trabajamos con marcas de moda, gastronomía, tecnología, salud, educación y más. Lo importante es que tengas claros tus valores y quieras construir una marca con identidad propia — el rubro es secundario.</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Cómo facturan? ¿Hay algún costo de inicio?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Facturamos con factura electrónica tipo C o E. No hay costo de inicio: los planes se abonan mes a mes, con un 50% de anticipo en proyectos puntuales (como diseño web o branding completo).</p></div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-head" onclick="toggleFaq(this)">
|
||||
<span class="faq-q"> <em>¿Puedo cambiar de plan o cancelar cuando quiera?</em></span>
|
||||
<span class="faq-toggle">+</span>
|
||||
</div>
|
||||
<div class="faq-body"><p>Por supuesto. Podés subir o bajar de plan con 15 días de aviso. Si querés cancelar, también con 15 días de anticipación. Sin letra chica ni permanencias forzadas.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CONTACTO ===== -->
|
||||
<section class="contacto" id="contacto">
|
||||
<div class="eyebrow">Contacto</div>
|
||||
<h2>¿Empezamos a <span class="grad-word">construir</span> tu marca?</h2>
|
||||
<p class="lede">Completá el formulario o escribinos directo — te respondemos en menos de 24 horas.</p>
|
||||
<div class="contact-grid">
|
||||
<div class="contact-form-wrap">
|
||||
<form class="contact-form" id="contactForm" onsubmit="return handleSubmit(event)">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="nombre">Nombre completo <span class="req">*</span></label>
|
||||
<input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email <span class="req">*</span></label>
|
||||
<input type="email" id="email" name="email" required placeholder="tu@email.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="empresa">Empresa / Emprendimiento</label>
|
||||
<input type="text" id="empresa" name="empresa" placeholder="Nombre de tu marca">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="telefono">Teléfono</label>
|
||||
<input type="tel" id="telefono" name="telefono" placeholder="+54 9 388 000-0000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="servicio">¿Qué servicio te interesa? <span class="req">*</span></label>
|
||||
<div class="filter-tags" id="servicioFilter">
|
||||
<button type="button" class="filter-tag active" data-value="todos" onclick="selectFilter(event)">Todos</button>
|
||||
<button type="button" class="filter-tag" data-value="branding" onclick="selectFilter(event)">Branding</button>
|
||||
<button type="button" class="filter-tag" data-value="web" onclick="selectFilter(event)">Diseño Web</button>
|
||||
<button type="button" class="filter-tag" data-value="marketing" onclick="selectFilter(event)">Marketing Digital</button>
|
||||
<button type="button" class="filter-tag" data-value="ia" onclick="selectFilter(event)">IA & Automatización</button>
|
||||
<button type="button" class="filter-tag" data-value="otro" onclick="selectFilter(event)">Otro</button>
|
||||
</div>
|
||||
<input type="hidden" id="servicioSeleccionado" name="servicio" value="todos">
|
||||
<input type="text" id="servicioOtro" name="servicio_otro" placeholder="Especificá cuál..." style="display:none; margin-top:10px; width:100%;">
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label for="mensaje">¿Qué necesitás? <span class="req">*</span></label>
|
||||
<textarea id="mensaje" name="mensaje" required placeholder="Contanos sobre tu proyecto, tus objetivos y lo que estás buscando..." rows="5"></textarea>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" required>
|
||||
<span>Acepto la <a href="#" style="color:var(--bordo);">política de privacidad</a></span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-solid" style="padding:14px 44px;">Enviar mensaje</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="contact-direct">
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📧</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Email</div>
|
||||
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">💬</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">WhatsApp</div>
|
||||
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📱</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Redes</div>
|
||||
<div class="contact-socials">
|
||||
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank">Instagram</a>
|
||||
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank">LinkedIn</a>
|
||||
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank">Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-card">
|
||||
<div class="contact-icon">📍</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-label">Argentina</div>
|
||||
<span style="font-size:13px; color:var(--dusty);">Trabajamos remoto worldwide</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<div class="footer-logo"><img src="logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;"></div>
|
||||
<p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div class="footer-col">
|
||||
<h4>Navegación</h4>
|
||||
<a href="#servicios">Servicios</a>
|
||||
<a href="#planes">Planes</a>
|
||||
<a href="#cifras">Cifras</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Servicios</h4>
|
||||
<a href="#servicios">Branding</a>
|
||||
<a href="#servicios">Diseño Web</a>
|
||||
<a href="#servicios">Marketing Digital</a>
|
||||
<a href="#servicios">IA & Automatización</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>Contacto</h4>
|
||||
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
|
||||
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
|
||||
<div class="footer-socials">
|
||||
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
|
||||
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
|
||||
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
|
||||
<span class="footer-legal"><a href="#">Política de privacidad</a><a href="#">Términos y condiciones</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ===== SCRIPTS ===== -->
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="fluid.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+150
@@ -0,0 +1,150 @@
|
||||
// ===== MENU =====
|
||||
function toggleMenu() {
|
||||
document.getElementById('sheet').classList.toggle('open');
|
||||
document.getElementById('overlay').classList.toggle('open');
|
||||
}
|
||||
|
||||
// ===== TABS =====
|
||||
function showTab(i, el) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.querySelector('.panel[data-panel="' + i + '"]').classList.add('active');
|
||||
}
|
||||
|
||||
// ===== ACCORDION =====
|
||||
function toggleAcc(head) {
|
||||
const item = head.parentElement;
|
||||
document.querySelectorAll('.acc-item').forEach(i => { if (i !== item) i.classList.remove('open'); });
|
||||
item.classList.toggle('open');
|
||||
}
|
||||
|
||||
// ===== FAQ =====
|
||||
function toggleFaq(head) {
|
||||
const item = head.parentElement;
|
||||
const isOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item').forEach(i => {
|
||||
i.classList.remove('open');
|
||||
const t = i.querySelector('.faq-toggle');
|
||||
if (t) t.textContent = '+';
|
||||
});
|
||||
if (!isOpen) {
|
||||
item.classList.add('open');
|
||||
const toggle = item.querySelector('.faq-toggle');
|
||||
if (toggle) toggle.textContent = '−';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== COTIZADOR =====
|
||||
const answers = [null, null, null];
|
||||
let current = 0;
|
||||
|
||||
document.querySelectorAll('.opt').forEach(opt => {
|
||||
opt.addEventListener('click', function() {
|
||||
const group = this.parentElement;
|
||||
const q = parseInt(group.dataset.q);
|
||||
group.querySelectorAll('.opt').forEach(o => o.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
answers[q] = parseInt(this.dataset.val);
|
||||
document.getElementById('next' + q).disabled = false;
|
||||
const step = this.closest('.step');
|
||||
const qNum = step.querySelector('.q-num');
|
||||
if (qNum) qNum.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
function updateProgress() {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
document.getElementById('p' + (i + 1)).style.width = i <= current ? '100%' : '0%';
|
||||
}
|
||||
}
|
||||
|
||||
function next() {
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.remove('active');
|
||||
current++;
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
function prev() {
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.remove('active');
|
||||
current--;
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
const plans = [
|
||||
{ name: 'Esencial', price: '$250.000 ARS', desc: 'Ideal para arrancar con presencia digital profesional y consistente, sin sobre-invertir todavía.' },
|
||||
{ name: 'Impulso', price: '$420.000 ARS', desc: 'Pensado para marcas en crecimiento que necesitan más alcance, leads y una primera campaña de publicidad.' },
|
||||
{ name: 'Premium', price: '$650.000 ARS + pauta', desc: 'Nuestro plan más recomendado: gestión integral de contenido, publicidad y estrategia para consolidar y expandir.' },
|
||||
{ name: 'Elite', price: '$1.000.000 ARS', desc: 'Máximo posicionamiento y gestión de marca completa, para negocios listos para escalar en serio.' }
|
||||
];
|
||||
|
||||
function showResult() {
|
||||
document.querySelector('.step[data-step="2"]').classList.remove('active');
|
||||
const avg = Math.round((answers[0] + answers[1] + answers[2]) / 3);
|
||||
const idx = Math.min(Math.max(avg - 1, 0), 3);
|
||||
document.getElementById('rp-name').textContent = plans[idx].name;
|
||||
document.getElementById('rp-price').innerHTML = plans[idx].price + ' <small>/ mes</small>';
|
||||
document.getElementById('rp-desc').textContent = plans[idx].desc;
|
||||
document.getElementById('result').classList.add('active');
|
||||
}
|
||||
|
||||
function restart() {
|
||||
answers[0] = answers[1] = answers[2] = null;
|
||||
current = 0;
|
||||
document.querySelectorAll('.opt').forEach(o => o.classList.remove('selected'));
|
||||
document.querySelectorAll('[id^="next"]').forEach(b => b.disabled = true);
|
||||
document.querySelectorAll('.q-num').forEach(q => q.classList.remove('active'));
|
||||
document.getElementById('result').classList.remove('active');
|
||||
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
|
||||
document.querySelector('.step[data-step="0"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
// ===== FILTRO DE SERVICIOS EN CONTACTO =====
|
||||
function selectFilter(event) {
|
||||
const el = event.currentTarget;
|
||||
const container = el.parentElement;
|
||||
container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
const value = el.dataset.value;
|
||||
document.getElementById('servicioSeleccionado').value = value;
|
||||
const otroInput = document.getElementById('servicioOtro');
|
||||
if (value === 'otro') {
|
||||
otroInput.style.display = 'block';
|
||||
otroInput.required = true;
|
||||
} else {
|
||||
otroInput.style.display = 'none';
|
||||
otroInput.required = false;
|
||||
otroInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== FORMULARIO =====
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const form = document.getElementById('contactForm');
|
||||
const data = new FormData(form);
|
||||
const nombre = data.get('nombre');
|
||||
const email = data.get('email');
|
||||
const mensaje = data.get('mensaje');
|
||||
if (!nombre || !email || !mensaje) {
|
||||
alert('Por favor, completá todos los campos obligatorios.');
|
||||
return false;
|
||||
}
|
||||
const btn = form.querySelector('button[type="submit"]');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'Enviando...';
|
||||
btn.disabled = true;
|
||||
setTimeout(() => {
|
||||
alert('¡Mensaje enviado con éxito! Te responderemos a la brevedad.');
|
||||
form.reset();
|
||||
btn.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||||
document.querySelector('.filter-tag[data-value="todos"]').classList.add('active');
|
||||
document.getElementById('servicioOtro').style.display = 'none';
|
||||
}, 1500);
|
||||
return false;
|
||||
}
|
||||
+768
@@ -0,0 +1,768 @@
|
||||
/* ===== FUENTES ===== */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/* ===== VARIABLES ===== */
|
||||
:root {
|
||||
--teal: #003F52;
|
||||
--ligth-teal: #006d8f;
|
||||
--bordo: #BA124D;
|
||||
--oscuro: #110916;
|
||||
--casi-negro: #0B060E;
|
||||
--dusty: #cec7d1;
|
||||
--claro: #EAF0EE;
|
||||
--rose-gold-1: #DFBDB9;
|
||||
--rose-gold-2: #BA8B7A;
|
||||
--rose-gold-3: #C89A82;
|
||||
--font-display: 'Literata', serif;
|
||||
--font-ui: 'Raleway', sans-serif;
|
||||
--font-body: 'Jost', sans-serif;
|
||||
--font-name: 'Kaleagnetta', handwriting;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--oscuro);
|
||||
color: var(--claro);
|
||||
overflow-x: hidden;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* ===== LOGO ===== */
|
||||
.logo-img { height: 32px; width: auto; display: block; }
|
||||
|
||||
/* ===== CANVAS FLUIDO ===== */
|
||||
#fluidCanvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
background: var(--oscuro);
|
||||
}
|
||||
|
||||
/* Asegurar que el contenido esté por encima */
|
||||
.hero, section, .footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
header {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 26px 48px;
|
||||
background: linear-gradient(180deg, rgba(17,9,22,.9) 0%, rgba(17,9,22,0) 100%);
|
||||
}
|
||||
.menu-btn {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: transparent; border: 1px solid rgba(234,240,238,.2);
|
||||
border-radius: 100px; padding: 10px 20px;
|
||||
color: var(--claro); font-family: var(--font-ui); font-size: 12px;
|
||||
letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
|
||||
cursor: pointer; transition: .25s;
|
||||
}
|
||||
.menu-btn:hover { border-color: var(--claro); color: var(--claro); }
|
||||
.menu-btn .bars { display: flex; flex-direction: column; gap: 3px; }
|
||||
.menu-btn .bars span { width: 14px; height: 1.4px; background: currentColor; display: block; }
|
||||
|
||||
/* ===== OVERLAY & SHEET ===== */
|
||||
.overlay {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,1);
|
||||
opacity: 0; pointer-events: none; transition: .35s; z-index: 90;
|
||||
}
|
||||
.overlay.open { opacity: 1; pointer-events: auto; }
|
||||
|
||||
.sheet {
|
||||
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
|
||||
background: var(--claro); border-radius: 22px 22px 0 0;
|
||||
padding: 10px 36px 30px;
|
||||
transform: translateY(102%);
|
||||
transition: transform .4s cubic-bezier(.2,.8,.2,1);
|
||||
max-height: 55vh; overflow-y: auto;
|
||||
color: var(--oscuro); box-shadow: 0 -8px 40px rgba(0,0,0,.3);
|
||||
}
|
||||
.sheet.open { transform: translateY(0); }
|
||||
.sheet-handle { width: 44px; height: 4px; background: rgba(34,23,40,.2); border-radius: 100px; margin: 0 auto 16px; }
|
||||
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.sheet-top .logo { font-size: 0; }
|
||||
.sheet-top .logo img { height: 28px; width: auto; }
|
||||
.close-btn {
|
||||
width: 32px; height: 32px; border-radius: 100px;
|
||||
border: 1px solid rgba(34,23,40,.2);
|
||||
background: transparent; color: var(--oscuro); font-size: 14px;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
transition: .2s;
|
||||
}
|
||||
.close-btn:hover { border-color: var(--bordo); color: var(--bordo); }
|
||||
|
||||
.sheet-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; }
|
||||
.sheet-col { display: flex; flex-direction: column; gap: 2px; }
|
||||
.sheet-col-title {
|
||||
font-family: var(--font-ui); font-size: 18px; font-weight: 500;
|
||||
letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--bordo); margin-bottom: 8px; padding-right: 12px; text-align: right;
|
||||
}
|
||||
.sheet-link {
|
||||
display: grid; grid-template-columns: 1fr 20px; align-items: center;
|
||||
gap: 8px; padding: 6px 12px; border-radius: 6px;
|
||||
text-decoration: none; color: var(--oscuro); transition: .2s;
|
||||
background: transparent; text-align: right;
|
||||
}
|
||||
.sheet-link:hover { background: rgba(186,18,77,.06); }
|
||||
.sheet-link-icon { font-size: 16px; color: var(--bordo); opacity: .4; text-align: center; grid-row: 1/3; grid-column: 2; }
|
||||
.sheet-link-main {
|
||||
font-family: var(--font-display); font-style: italic; font-weight: 600;
|
||||
font-size: 18px; color: var(--oscuro); line-height: 1.2; grid-column: 1;
|
||||
}
|
||||
.sheet-link-desc {
|
||||
font-family: var(--font-ui); font-size: 14px; color: var(--oscuro);
|
||||
font-weight: 500; opacity: .8; grid-column: 1; margin-top: -2px;
|
||||
}
|
||||
.sheet-link.highlight {
|
||||
background: var(--bordo); border-radius: 6px; padding: 10px 14px; margin-top: 6px;
|
||||
}
|
||||
.sheet-link.highlight .sheet-link-icon { color: #fff; opacity: 1; }
|
||||
.sheet-link.highlight .sheet-link-main { color: #fff; }
|
||||
.sheet-link.highlight .sheet-link-desc { color: rgba(255,255,255,.7); }
|
||||
.sheet-link.highlight:hover { background: #9c0f40; }
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 80px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ===== TIPOGRAFÍA ===== */
|
||||
.eyebrow {
|
||||
font-family: var(--font-ui); font-size: 12px; letter-spacing: .28em;
|
||||
text-transform: uppercase; color: var(--claro); margin-bottom: 22px;
|
||||
display: flex; align-items: center; gap: 12px; opacity: 0.6;
|
||||
}
|
||||
.eyebrow::before {
|
||||
content: ''; width: 30px; height: 1px;
|
||||
background: linear-gradient(90deg, var(--rose-gold-3), var(--rose-gold-1));
|
||||
}
|
||||
h1, h2 {
|
||||
font-family: var(--font-display); font-weight: 500; font-style: italic;
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
max-width: 900px;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.grad-word {
|
||||
background: linear-gradient(100deg, var(--rose-gold-1) 0%, var(--bordo) 70%, var(--ligth-teal) 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
p, .lede {
|
||||
font-family: var(--font-ui); font-size: 22px; line-height: 1.7;
|
||||
color: var(--claro); max-width: 600px; margin: 0 auto 16px; opacity: 0.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
.lede { font-size: 18px; opacity: 0.7; max-width: 640px; }
|
||||
|
||||
/* ===== BOTONES ===== */
|
||||
.btn {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
|
||||
letter-spacing: .05em; padding: 16px 30px; border-radius: 2px;
|
||||
cursor: pointer; transition: .25s; text-decoration: none;
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
}
|
||||
|
||||
.btn-solid {
|
||||
background: var(--bordo); color: #fff; border: 1px solid var(--bordo);
|
||||
}
|
||||
.btn-solid:hover { background: #9c0f40; }
|
||||
.btn-outline {
|
||||
background: transparent; color: var(--claro);
|
||||
border: 1px solid rgba(234,240,238,.2);
|
||||
}
|
||||
.btn-outline:hover { border-color: var(--claro); color: var(--claro); }
|
||||
.hero-actions { display: flex; gap: 16px; justify-content: center; margin-top: 40px; }
|
||||
.hero-actions .btn {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ===== HOME BUTTON ===== */
|
||||
.home-btn {
|
||||
position: absolute; right: 20px; bottom: 20px;
|
||||
font-size: 20px; color: var(--rose-gold-1);
|
||||
text-decoration: none; transition: .3s; z-index: 10;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.home-btn:hover { color: rgba(234,240,238,.4); }
|
||||
|
||||
/* ===== SCROLL HINT ===== */
|
||||
.scroll-hint {
|
||||
position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
|
||||
font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .2em;
|
||||
text-transform: uppercase; color: rgba(234,240,238,.7);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.scroll-hint .line { width: 1px; height: 36px; background: rgba(234,240,238,.5); }
|
||||
|
||||
/* ===== SECCIONES GENERALES ===== */
|
||||
section { padding: 80px 48px; max-width: 1200px; margin: 0 auto; position: relative; }
|
||||
section .eyebrow { justify-content: center; }
|
||||
section h2 { text-align: center; max-width: 800px; margin: 0 auto 12px; }
|
||||
section .lede { text-align: center; max-width: 900px; margin-bottom: 38px; }
|
||||
|
||||
/* ===== SERVICIOS ===== */
|
||||
.tabs {
|
||||
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
|
||||
margin-bottom: 44px; border-bottom: 1px solid rgba(234,240,238,.06);
|
||||
}
|
||||
.tab {
|
||||
font-family: var(--font-ui); font-size: 20px; font-weight: 400;
|
||||
letter-spacing: .03em; color: var(--claro);
|
||||
background: none; border: none; cursor: pointer;
|
||||
padding: 14px 22px; position: relative; transition: .2s;
|
||||
}
|
||||
.tab .num {
|
||||
font-family: var(--font-display); font-style: italic; font-size: 13px;
|
||||
color: var(--claro); margin-right: 8px;
|
||||
}
|
||||
.tab.active { color: var(--claro); }
|
||||
.tab.active::after {
|
||||
content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
|
||||
height: 2px; background: linear-gradient(90deg, var(--rose-gold-3), var(--bordo));
|
||||
}
|
||||
.tab:hover { color: var(--claro); }
|
||||
.panel { display: none; animation: fade .4s ease; }
|
||||
.panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
|
||||
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.panel-copy h3 {
|
||||
font-family: var(--font-display); font-style: italic; font-weight: 500;
|
||||
font-size: 25px; margin-bottom: 16px;
|
||||
}
|
||||
.panel-copy h3 em { color: var(--bordo); font-style: italic; }
|
||||
.panel-copy p { font-size: 15px; max-width: 600px; margin-bottom: 26px; }
|
||||
|
||||
.panel-list { display: flex; flex-direction: column; border-top: 1px solid rgba(234,240,238,.06); }
|
||||
.panel-list .item {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 14px 0; border-bottom: 1px solid rgba(234,240,238,.06);
|
||||
font-family: var(--font-ui); font-size: 15px; color: var(--claro); opacity: 0.8;
|
||||
}
|
||||
.icon-min {
|
||||
font-size: 14px; color: var(--rose-gold-1); opacity: 0.5;
|
||||
flex-shrink: 0; width: 24px; text-align: center;
|
||||
}
|
||||
|
||||
/* ===== PLANES ===== */
|
||||
.plans-grid {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px;
|
||||
}
|
||||
.plan-card {
|
||||
background: rgba(22, 22, 9, 0.85); /* Antes era rgba(234,240,238,.03) */
|
||||
border: 1px solid rgba(234,240,238,.1);
|
||||
border-radius: 10px;
|
||||
padding: 30px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px); /* Opcional: agrega desenfoque al fondo */
|
||||
}
|
||||
.plan-card.reco {
|
||||
border: 1px solid rgba(223,189,185,.2);
|
||||
background: rgba(234,240,238,.04);
|
||||
box-shadow: 0 0 30px rgba(186,18,77,.2);
|
||||
}
|
||||
.badge {
|
||||
align-self: center; font-family: var(--font-ui); font-size: 9px; font-weight: 700;
|
||||
letter-spacing: .1em; text-transform: uppercase;
|
||||
color: var(--bordo); border: 1px solid var(--bordo);
|
||||
padding: 4px 14px; border-radius: 100px; margin-bottom: 14px;
|
||||
}
|
||||
.plan-name {
|
||||
font-family: var(--font-display); font-style: italic; font-weight: 500;
|
||||
font-size: 28px; margin-bottom: 4px;
|
||||
}
|
||||
.plan-stars { color: var(--claro); font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
|
||||
.plan-obj {
|
||||
font-family: var(--font-ui); font-size: 18px; line-height: 1.5;
|
||||
color: var(--claro); margin-bottom: 22px; min-height: 52px;
|
||||
}
|
||||
.plan-feats { list-style: none; flex: 1; margin-bottom: 24px; text-align: left; }
|
||||
.plan-feats li {
|
||||
font-family: var(--font-body); font-size: 18px; line-height: 1.5;
|
||||
padding: 8px 0; border-top: 1px solid rgba(234,240,238,.08);
|
||||
color: rgba(234,240,238,.7);
|
||||
}
|
||||
.plan-feats li:first-child { border-top: none; }
|
||||
.plan-feats li::before { content: '— '; color: var(--claro); opacity: 1; }
|
||||
.plan-cta {
|
||||
font-family: var(--font-ui); font-size: 12px; font-weight: 500;
|
||||
letter-spacing: .04em; text-align: center; padding: 12px;
|
||||
border-radius: 2px; text-decoration: none;
|
||||
border: 1px solid rgba(234,240,238,.15); color: var(--claro);
|
||||
transition: .25s;
|
||||
}
|
||||
.plan-cta:hover { border-color: var(--claro); color: var(--claro); }
|
||||
.plan-main-cta { display: block; max-width: 300px; margin: 0 auto; text-align: center; }
|
||||
|
||||
/* ===== ACCORDION ===== */
|
||||
.acc { border-top: 1px solid rgba(234,240,238,.06); }
|
||||
.acc-item {
|
||||
border-bottom: 1px solid rgba(234,240,238,.06);
|
||||
background: rgba(17, 9, 22, 0.7); /* Fondo sutil para cada item */
|
||||
border-radius: 10px;
|
||||
padding: 2px 0
|
||||
|
||||
}
|
||||
.acc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.acc-head-left { display: flex; align-items: center; gap: 16px; }
|
||||
.acc-num { font-family: var(--font-display); font-style: italic; color: var(--dusty); font-size: 14px; opacity: 1; }
|
||||
.acc-name { font-family: var(--font-ui); font-size: 26px; font-weight: 400; }
|
||||
.acc-toggle {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid rgba(234,240,238,.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: var(--claro);
|
||||
transition: .25s;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
}
|
||||
.acc-toggle::before {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.acc-item.open .acc-toggle { transform: rotate(45deg); border-color: var(--bordo); color: var(--bordo); }
|
||||
.acc-body { max-height: 0; overflow: hidden; transition: .35s ease; }
|
||||
.acc-item.open .acc-body { max-height: 600px; }
|
||||
.acc-body-inner {
|
||||
padding: 0 24px 24px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.service-row {
|
||||
font-family: var(--font-ui); font-size: 14px; color: rgba(234,240,238,.8);
|
||||
padding: 12px 0; border-top: 1px solid rgba(234,240,238,.04);
|
||||
}
|
||||
.service-row b {
|
||||
display: block;
|
||||
color: var(--claro);
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-size: 20px;
|
||||
margin-bottom: 3px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.service-row .price { color: var(--dusty); font-family: var(--font-display); font-style: italic; font-size: 13px; }
|
||||
|
||||
/* ===== PROCESO ===== */
|
||||
.arcade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
||||
.column { position: relative; padding: 0 6px; text-align: center; }
|
||||
.column:not(:last-child)::after {
|
||||
content: ''; position: absolute; right: -7px; top: 14%; bottom: 44px;
|
||||
width: 1px; background: rgba(234,240,238,0.4);
|
||||
}
|
||||
.arch {
|
||||
width: 100%; aspect-ratio: 1/1; max-height: 110px;
|
||||
border: 1.5px solid rgba(223,189,185,0.67); border-bottom: none;
|
||||
border-radius: 100px 100px 0 0;
|
||||
display: flex; align-items: flex-end; justify-content: center;
|
||||
padding-bottom: 16px; margin-bottom: 16px;
|
||||
transition: .3s;
|
||||
}
|
||||
.column:hover .arch { border-color: rgba(223,189,185,.3); }
|
||||
.arch .num {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic; font-weight: 500;
|
||||
font-size: 16px; color: var(--claro);
|
||||
opacity: 0.5; }
|
||||
.arch.final { background: var(--bordo);
|
||||
border-color: var(--bordo); }
|
||||
.arch.final svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
|
||||
.cat {
|
||||
font-family: var(--font-ui); font-size: 14px; letter-spacing: .14em;
|
||||
text-transform: uppercase; color: var(--ligth-teal); font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.column:nth-child(even) .cat { color: var(--bordo); }
|
||||
.step-title {
|
||||
font-family: var(--font-display); font-style: italic; font-weight: 500;
|
||||
font-size: 16px; margin-bottom: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.step-desc {
|
||||
font-family: var(--font-ui); font-size: 12px; line-height: 1.5;
|
||||
color: var(--claro);
|
||||
}
|
||||
|
||||
/* ===== CIFRAS ===== */
|
||||
.cifras-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
.cifra-card {
|
||||
background: rgba(17, 9, 22, 0.85);
|
||||
border: 1px solid rgba(234,240,238,.05);
|
||||
border-radius: 10px;
|
||||
padding: 34px 30px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.cifra-icon {
|
||||
width: 100px; height: 100px; margin: 0 auto 20px;
|
||||
border: 1.5px solid rgba(223,189,185,0.67); border-bottom: none;
|
||||
border-radius: 100px 100px 0 0;
|
||||
}
|
||||
.cifra-label {
|
||||
font-family: var(--font-body); font-size: 16px; letter-spacing: .18em;
|
||||
text-transform: uppercase; color: var(--claro); font-weight: 500; margin-bottom: 12px;
|
||||
}
|
||||
.cifra-value {
|
||||
font-family: var(--font-display); font-style: italic; font-weight: 500;
|
||||
font-size: 20px; color: var(--ligth-teal); margin-bottom: 14px;
|
||||
}
|
||||
.cifra-desc {
|
||||
font-family: var(--font-body); font-size: 16px; line-height: 1.6;
|
||||
color: var(--dusty);
|
||||
}
|
||||
.cifra-desc b { color: var(--claro); font-weight: 400; }
|
||||
|
||||
/* ===== COTIZADOR ===== */
|
||||
.card {
|
||||
background: rgba(17, 9, 22, 0.85);
|
||||
border: 1px solid rgba(234,240,238,.1);
|
||||
border-radius: 14px;
|
||||
padding: 48px 52px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.progress { display: flex; gap: 6px; margin-bottom: 36px; }
|
||||
.progress .seg { height: 3px; flex: 1; background: rgba(234,240,238,.1); border-radius: 100px; overflow: hidden; }
|
||||
.progress .seg i { display: block; height: 100%; width: 0%; background: -gradient(90deg, var(--rose-gold-3), var(--bordo)linear); transition: .4s; }
|
||||
.step { display: none; }
|
||||
.step.active { display: block; animation: fade .35s ease; }
|
||||
.q-num { font-family: var(--font-display); font-style: italic; color: var(--dusty); font-size: 18px; margin-bottom: 10px; }
|
||||
.q-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 26px; margin-bottom: 28px; }
|
||||
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
|
||||
.opt {
|
||||
border: 1px solid rgba(234,240,238,.15);
|
||||
border-radius: 8px;
|
||||
padding: 18px 20px;
|
||||
cursor: pointer;
|
||||
transition: .2s;
|
||||
font-family: var(--font-ui);
|
||||
background: rgba(17, 9, 22, 0.7); /* Fondo semi-transparente para opciones */
|
||||
}
|
||||
.opt:hover { border-color: rgba(223,189,185,.3); }
|
||||
.opt.selected {
|
||||
border-color: var(--bordo);
|
||||
background: rgba(186, 18, 77, 0.2);
|
||||
}
|
||||
.opt-title { font-size: 18px; font-weight: 500; color: var(--claro); margin-bottom: 3px; }
|
||||
.opt-sub { font-size: 16px; color: var(--dusty); }
|
||||
.nav-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.btn-cotizador {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
|
||||
padding: 12px 28px; border-radius: 4px; cursor: pointer; transition: .3s;
|
||||
border: 1px solid var(--bordo); background: transparent; color: var(--bordo);
|
||||
}
|
||||
.btn-cotizador:hover:not(:disabled) { background: var(--bordo); color: #fff; }
|
||||
.btn-cotizador:disabled { opacity: .2; cursor: not-allowed; border-color: #444; color: #666; }
|
||||
.btn-cotizador-back {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
|
||||
padding: 12px 28px; border-radius: 4px; cursor: pointer; transition: .3s;
|
||||
border: 1px solid transparent; background: transparent; color: var(--dusty);
|
||||
}
|
||||
.btn-cotizador-back:hover { color: var(--claro); border-color: rgba(234,240,238,.1); }
|
||||
.btn-cotizador-restart {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
|
||||
padding: 12px 28px; border-radius: 4px; cursor: pointer; transition: .3s;
|
||||
border: 1px solid var(--bordo); background: transparent; color: var(--bordo);
|
||||
}
|
||||
.btn-cotizador-restart:hover { background: var(--bordo); color: #fff; }
|
||||
.result { display: none; text-align: center; padding-top: 10px; }
|
||||
.result.active { display: block; animation: fade .4s ease; }
|
||||
.result-badge {
|
||||
font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em;
|
||||
text-transform: uppercase; color: var(--bordo); margin-bottom: 10px;
|
||||
}
|
||||
.result-plan { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 32px; margin-bottom: 6px; }
|
||||
.result-price { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 22px; color: var(--bordo); margin-bottom: 18px; }
|
||||
.result-desc { font-family: var(--font-body); font-size: 14px; color: var(--dusty); max-width: 400px; margin: 0 auto 30px; line-height: 1.6; }
|
||||
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
/* ===== NOSOTROS ===== */
|
||||
.team-grid-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 800px; margin: 0 auto; }
|
||||
.team-card-simple {
|
||||
background: rgba(17, 9, 22, 0.85);
|
||||
border: 1px solid rgba(234,240,238,.1);
|
||||
border-radius: 12px;
|
||||
padding: 40px 32px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.team-name {
|
||||
font-family: var(--font-name); font-weight: 500;
|
||||
font-size: 50px; margin-bottom: 8px;
|
||||
}
|
||||
.team-role {
|
||||
font-family: var(--font-ui); font-size: 16px; font-weight: 400;
|
||||
letter-spacing: .06em; text-transform: uppercase; color: var(--dusty);
|
||||
margin-bottom: 12px; opacity: 0.6;
|
||||
}
|
||||
.team-detail {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 200;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--claro);
|
||||
}
|
||||
.team-footer {
|
||||
margin-top: 10px; padding-top: 32px;
|
||||
border-top: 1px solid rgba(234,240,238,.04);
|
||||
text-align: center;
|
||||
}
|
||||
.team-footer-text {
|
||||
font-family: var(--font-ui); font-size: 16px; color: var(--dusty);
|
||||
max-width: 700px; margin: 0 auto; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===== FAQ ===== */
|
||||
.faq-grid { border-top: 1px solid rgba(234,240,238,.06); max-width: 900px; margin: 0 auto; }
|
||||
.faq-item { border-bottom: 1px solid rgba(234,240,238,.06); }
|
||||
.faq-head {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 20px 4px; cursor: pointer; transition: .2s;
|
||||
}
|
||||
.faq-head:hover .faq-q { color: var(--claro); }
|
||||
.faq-q {
|
||||
font-family: var(--font-display); font-weight: 200;
|
||||
font-size: 20px; transition: .2s;
|
||||
}
|
||||
.faq-toggle {
|
||||
font-family: var(--font-body); font-size: 18px; font-weight: 300;
|
||||
color: var(--rose-gold-1); width: 28px; height: 28px;
|
||||
display: flex; align-items:center; justify-content: center;
|
||||
border-radius: 100px; border: 1px solid rgba(234,240,238,.1);
|
||||
transition: .25s; flex-shrink: 0;
|
||||
}
|
||||
.faq-item.open .faq-toggle { border-color: var(--bordo); color: var(--bordo); }
|
||||
.faq-body { max-height: 0; overflow: hidden; transition: .4s ease; }
|
||||
.faq-item.open .faq-body { max-height: 100px; }
|
||||
.faq-body p {
|
||||
font-family: var(--font-ui); font-size: 16px; line-height: 1.7;
|
||||
color: var(--claro); padding: 0 4px 14px; max-width: 800px;
|
||||
}
|
||||
|
||||
/* ===== CONTACTO ===== */
|
||||
.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
|
||||
.contact-form-wrap {
|
||||
background: rgba(17, 9, 22, 0.85);
|
||||
border: 1px solid rgba(234,240,238,.1);
|
||||
border-radius: 12px;
|
||||
padding: 40px 36px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.contact-form { display: flex; flex-direction: column; gap: 18px; }
|
||||
.form-row { display: flex; gap: 18px; }
|
||||
.form-group { flex: 1; display: flex; flex-direction: column; gap: 4px; }
|
||||
.form-group.full { flex: 0 0 100%; }
|
||||
.form-group label {
|
||||
font-family: var(--font-ui); font-size: 14px; font-weight: 500;
|
||||
letter-spacing: .04em; text-transform: uppercase; color: rgba(234,240,238,0.8);
|
||||
}
|
||||
.form-group .req { color: var(--bordo); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font-body); font-size: 16px; font-weight: 300;
|
||||
padding: 12px 14px; border-radius: 6px;
|
||||
border: 1px solid rgba(234,240,238,.08);
|
||||
background: rgba(234,240,238,.03); color: var(--claro);
|
||||
transition: .25s; width: 100%;
|
||||
}
|
||||
.form-group input:focus, .form-group textarea:focus {
|
||||
outline: none; border-color: var(--bordo);
|
||||
background: rgba(234,240,238,.06);
|
||||
}
|
||||
.filter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.filter-tag {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
|
||||
padding: 6px 16px; border-radius: 100px;
|
||||
border: 1px solid rgba(234,240,238,.5); background: transparent;
|
||||
color: rgba(234,240,238,.4); cursor: pointer; transition: .2s;
|
||||
}
|
||||
.filter-tag:hover { border-color: var(--claro); color: var(--claro); }
|
||||
.filter-tag.active { background: var(--bordo); border-color: var(--bordo); color: #fff; }
|
||||
.checkbox-label {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-family: var(--font-body); font-size: 13px; color: rgba(234,240,238,.6);
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bordo); }
|
||||
|
||||
.contact-direct { display: flex; flex-direction: column; gap: 16px; }
|
||||
.contact-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
background: rgba(17, 9, 22, 0.85);
|
||||
border: 1px solid rgba(234,240,238,.08);
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.contact-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; margin-top: 2px; }
|
||||
.contact-label {
|
||||
font-family: var(--font-ui); font-size: 14px; font-weight: 500;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--claro); opacity: 0.5;
|
||||
}
|
||||
.contact-info a { font-family: var(--font-body); font-size: 14px; color: var(--claro); text-decoration: none; }
|
||||
.contact-info a:hover { color: var(--claro); }
|
||||
.contact-info span { font-family: var(--font-body); font-size: 13px; color: var(--claro); }
|
||||
.contact-socials { display: flex; gap: 12px; }
|
||||
.contact-socials a {
|
||||
font-family: var(--font-ui); font-size: 13px; font-weight: 400;
|
||||
color: var(--claro); text-decoration: none; opacity: 1;
|
||||
}
|
||||
.contact-socials a:hover { opacity: 1; }
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.footer {
|
||||
background: rgba(0,0,0,.7); border-top: 1px solid rgba(234,240,238,.04);
|
||||
padding: 60px 48px 20px;
|
||||
}
|
||||
.footer-inner {
|
||||
max-width: 1200px; margin: 0 auto; display: grid;
|
||||
grid-template-columns: 1fr 2fr; gap: 60px; padding-bottom: 40px;
|
||||
border-bottom: 1px solid rgba(234,240,238,.04);
|
||||
}
|
||||
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
|
||||
.footer-desc { font-family: var(--font-ui); font-size: 16px; line-height: 1.6; color: var(--claro); max-width: 320px; }
|
||||
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
|
||||
.footer-col h4 {
|
||||
font-family: var(--font-ui); font-size: 12px; font-weight: 700;
|
||||
letter-spacing: .1em; text-transform: uppercase; color: var(--dusty); opacity: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.footer-col a {
|
||||
display: block; font-family: var(--font-body); font-size: 13px;
|
||||
color: var(--dusty); text-decoration: none; padding: 4px 0;
|
||||
transition: .2s;
|
||||
}
|
||||
.footer-col a:hover { color: var(--claro); }
|
||||
.footer-socials { display: flex; gap: 12px; margin-top: 8px; }
|
||||
.footer-socials a {
|
||||
font-family: var(--font-ui); font-size: 11px; font-weight: 500;
|
||||
color: var(--claro); text-decoration: none; padding: 4px 12px;
|
||||
border: 1px solid rgba(234,240,238,.08); border-radius: 100px;
|
||||
transition: .2s;
|
||||
}
|
||||
.footer-socials a:hover { border-color: var(--claro); color: var(--claro); }
|
||||
.footer-bottom {
|
||||
max-width: 1200px; margin: 0 auto; padding-top: 20px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
flex-wrap: wrap; gap: 12px;
|
||||
}
|
||||
.footer-bottom span { font-family: var(--font-body); font-size: 12px; color: rgba(234,240,238,.2); }
|
||||
.footer-legal { display: flex; gap: 20px; }
|
||||
.footer-legal a { font-family: var(--font-body); font-size: 12px; color: rgba(234,240,238,.2); text-decoration: none; }
|
||||
.footer-legal a:hover { color: rgba(234,240,238,.5); }
|
||||
|
||||
/* Todas las cards con fondo oscuro y blur */
|
||||
.plan-card,
|
||||
.cifra-card,
|
||||
.team-card-simple,
|
||||
.contact-card,
|
||||
.contact-form-wrap,
|
||||
.card {
|
||||
background: rgba(11, 5, 14, 0.85) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
-webkit-backdrop-filter: blur(8px) !important;
|
||||
border: 1px solid rgba(234,240,238,0.08);
|
||||
}
|
||||
|
||||
/* ===== MENU (fondo claro) ===== */
|
||||
.sheet {
|
||||
background: rgba(234, 240, 238, 0.95) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
-webkit-backdrop-filter: blur(8px) !important;
|
||||
border: 1px solid rgba(34,23,40,0.08) !important;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 980px) {
|
||||
.plans-grid { grid-template-columns: 1fr 1fr; }
|
||||
.arcade-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
|
||||
.column:nth-child(3)::after, .column:nth-child(6)::after { display: none; }
|
||||
.cifras-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.sheet-body { grid-template-columns: 1fr 1fr; }
|
||||
.sheet-col:last-child { grid-column: 1 / -1; }
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
.footer-inner { grid-template-columns: 1fr; gap: 40px; }
|
||||
.team-grid-simple { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
header { padding: 20px 22px; }
|
||||
.hero { padding: 0 30px; }
|
||||
section { padding: 60px 22px; }
|
||||
.panel.active { grid-template-columns: 1fr; gap: 30px; }
|
||||
.plans-grid { grid-template-columns: 1fr; }
|
||||
.arcade-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
|
||||
.column:nth-child(2n)::after { display: none; }
|
||||
.options { grid-template-columns: 1fr; }
|
||||
.card { padding: 32px 24px; }
|
||||
.acc-body-inner { grid-template-columns: 1fr; }
|
||||
.footer-links { grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.footer { padding: 40px 22px 16px; }
|
||||
.footer-bottom { flex-direction: column; text-align: center; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.sheet {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: rgba(234, 240, 238, 0.95); /* Más opaco */
|
||||
border-radius: 22px 22px 0 0;
|
||||
padding: 10px 36px 30px;
|
||||
transform: translateY(102%);
|
||||
transition: transform .4s cubic-bezier(.2,.8,.2,1);
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
color: var(--oscuro);
|
||||
box-shadow: 0 -8px 40px rgba(0,0,0,.5);
|
||||
backdrop-filter: blur(8px); }
|
||||
.sheet-body { grid-template-columns: 1fr; gap: 16px; }
|
||||
.sheet-col:last-child { grid-column: auto; }
|
||||
.home-btn { right: 12px; bottom: 12px; font-size: 10px; }
|
||||
}
|
||||
Reference in New Issue
Block a user