html {
scroll-behavior: smooth;
}
:root {
/* Colors - Updated from Figma CSS */
--color-background: rgba(255, 255, 255, 1);
--color-surface: rgba(255, 255, 253, 1);
--color-text: rgba(51, 51, 51, 1);
--color-text-secondary: rgba(98, 108, 113, 1);
--color-primary: rgba(65, 108, 37, 1);
--color-primary-hover: rgba(56, 93, 32, 1);
--color-primary-active: rgba(48, 79, 27, 1);
--color-secondary: rgba(65, 108, 37, 0.1);
--color-secondary-hover: rgba(65, 108, 37, 0.15);
--color-secondary-active: rgba(65, 108, 37, 0.2);
--color-border: rgba(229, 231, 235, 1);
--color-btn-primary-text: rgba(255, 255, 255, 1);
--color-card-border: rgba(229, 231, 235, 1);
--color-card-border-inner: rgba(243, 244, 246, 1);
--color-error: rgba(239, 68, 68, 1);
--color-success: rgba(65, 108, 37, 1);
--color-warning: rgba(245, 158, 11, 1);
--color-info: rgba(98, 108, 113, 1);
--color-focus-ring: rgba(65, 108, 37, 0.4);
--color-select-caret: rgba(51, 51, 51, 0.8);
/* Common style patterns */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for opacity control */
--color-success-rgb: 33, 128, 141;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
/* Typography */
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 24px;
--font-size-4xl: 30px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 550;
--font-weight-bold: 600;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--letter-spacing-tight: -0.01em;
/* Spacing */
--space-0: 0;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-48: 48px;
--space-80: 80px;
/* Border Radius */
--radius-sm: 6px;
--radius-base: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
0 2px 4px -1px rgba(0, 0, 0, 0.02);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
0 4px 6px -2px rgba(0, 0, 0, 0.02);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
/* Layout */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1140px;
--container-xl: 1440px;
}
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--color-background: rgba(31, 33, 33, 1);
--color-surface: rgba(38, 40, 40, 1);
--color-text: rgba(245, 245, 245, 1);
--color-text-secondary: rgba(167, 169, 169, 0.7);
--color-primary: rgba(50, 184, 198, 1);
--color-primary-hover: rgba(45, 166, 178, 1);
--color-primary-active: rgba(41, 150, 161, 1);
--color-secondary: rgba(119, 124, 124, 0.15);
--color-secondary-hover: rgba(119, 124, 124, 0.25);
--color-secondary-active: rgba(119, 124, 124, 0.3);
--color-border: rgba(119, 124, 124, 0.3);
--color-error: rgba(255, 84, 89, 1);
--color-success: rgba(50, 184, 198, 1);
--color-warning: rgba(230, 129, 97, 1);
--color-info: rgba(167, 169, 169, 1);
--color-focus-ring: rgba(50, 184, 198, 0.4);
--color-btn-primary-text: rgba(19, 52, 59, 1);
--color-card-border: rgba(119, 124, 124, 0.2);
--color-card-border-inner: rgba(119, 124, 124, 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--button-border-secondary: rgba(119, 124, 124, 0.2);
--color-border-secondary: rgba(119, 124, 124, 0.2);
--color-select-caret: rgba(245, 245, 245, 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: 50, 184, 198;
--color-error-rgb: 255, 84, 89;
--color-warning-rgb: 230, 129, 97;
--color-info-rgb: 167, 169, 169;
}
}
/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
--color-background: rgba(31, 33, 33, 1);
--color-surface: rgba(38, 40, 40, 1);
--color-text: rgba(245, 245, 245, 1);
--color-text-secondary: rgba(167, 169, 169, 0.7);
--color-primary: rgba(50, 184, 198, 1);
--color-primary-hover: rgba(45, 166, 178, 1);
--color-primary-active: rgba(41, 150, 161, 1);
--color-secondary: rgba(119, 124, 124, 0.15);
--color-secondary-hover: rgba(119, 124, 124, 0.25);
--color-secondary-active: rgba(119, 124, 124, 0.3);
--color-border: rgba(119, 124, 124, 0.3);
--color-error: rgba(255, 84, 89, 1);
--color-success: rgba(50, 184, 198, 1);
--color-warning: rgba(230, 129, 97, 1);
--color-info: rgba(167, 169, 169, 1);
--color-focus-ring: rgba(50, 184, 198, 0.4);
--color-btn-primary-text: rgba(19, 52, 59, 1);
--color-card-border: rgba(119, 124, 124, 0.15);
--color-card-border-inner: rgba(119, 124, 124, 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--color-border-secondary: rgba(119, 124, 124, 0.2);
--color-select-caret: rgba(245, 245, 245, 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: 50, 184, 198;
--color-error-rgb: 255, 84, 89;
--color-warning-rgb: 230, 129, 97;
--color-info-rgb: 167, 169, 169;
}
[data-color-scheme="light"] {
--color-background: rgba(252, 252, 249, 1);
--color-surface: rgba(255, 255, 253, 1);
--color-text: rgba(19, 52, 59, 1);
--color-text-secondary: rgba(98, 108, 113, 1);
--color-primary: #416C25;
--color-primary-hover: #385D20;
--color-primary-active: #304F1B;
--color-secondary: rgba(65, 108, 37, 0.12);
--color-secondary-hover: rgba(65, 108, 37, 0.2);
--color-secondary-active: rgba(65, 108, 37, 0.25);
--color-border: rgba(65, 108, 37, 0.2);
--color-btn-primary-text: rgba(252, 252, 249, 1);
--color-card-border: rgba(94, 82, 64, 0.12);
--color-card-border-inner: rgba(94, 82, 64, 0.12);
--color-error: rgba(192, 21, 47, 1);
--color-success: #416C25;
--color-warning: rgba(168, 75, 47, 1);
--color-info: rgba(98, 108, 113, 1);
--color-focus-ring: rgba(65, 108, 37, 0.4);
/* RGB versions for light mode */
--color-success-rgb: 65, 108, 37;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
}
/* Base styles */
html {
font-size: var(--font-size-base);
font-family: var(--font-family-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-3xl);
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-md);
}
p {
margin: 0 0 var(--space-16) 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
color: var(--color-primary-hover);
}
code,
pre {
font-family: var(--font-family-mono);
font-size: calc(var(--font-size-base) * 0.95);
background-color: var(--color-secondary);
border-radius: var(--radius-sm);
}
code {
padding: var(--space-1) var(--space-4);
}
pre {
padding: var(--space-16);
margin: var(--space-16) 0;
overflow: auto;
border: 1px solid var(--color-border);
}
pre code {
background: none;
padding: 0;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-base);
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-standard);
border: none;
text-decoration: none;
position: relative;
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-btn-primary-text);
border: 1px solid var(--color-primary);
min-width: 200px !important;
padding: var(--space-12) var(--space-20) !important;
text-align: center !important;
white-space: nowrap !important;
transition: all 0.3s ease;
}
.btn--primary:hover {
background: white;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--primary:active {
background: var(--color-primary-active);
}
.btn--secondary {
background: var(--color-secondary);
color: var(--color-text);
border: 1px solid var(--color-secondary);
min-width: 200px !important;
padding: var(--space-12) var(--space-20) !important;
text-align: center !important;
white-space: nowrap !important;
transition: all 0.3s ease;
}
.btn--secondary:hover {
background: white;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--secondary:active {
background: var(--color-secondary-active);
}
.btn--outline {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
}
.btn--outline:hover {
background: var(--color-secondary);
}
.btn--sm {
padding: var(--space-4) var(--space-12);
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
}
.btn--lg {
padding: var(--space-10) var(--space-20);
font-size: var(--font-size-lg);
border-radius: var(--radius-md);
}
.btn--full-width {
width: 100% !important;
min-width: auto !important;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Form elements */
.form-control {
display: block;
width: 100%;
padding: var(--space-12) var(--space-16);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
font-family: var(--font-family-base);
}
textarea.form-control {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
}
select.form-control {
padding: var(--space-8) var(--space-12);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-12) center;
background-size: 16px;
padding-right: var(--space-32);
}
/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
select.form-control {
background-image: var(--select-caret-dark);
}
}
/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
background-image: var(--select-caret-dark);
}
[data-color-scheme="light"] select.form-control {
background-image: var(--select-caret-light);
}
.form-control:focus {
border-color: var(--color-primary);
outline: var(--focus-outline);
}
.form-label {
display: block;
margin-bottom: var(--space-8);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-base);
font-family: var(--font-family-base);
color: var(--color-text);
}
.form-group {
margin-bottom: var(--space-16);
}
/* Card component */
.card {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card__body {
padding: var(--space-16);
}
.card__header,
.card__footer {
padding: var(--space-16);
border-bottom: 1px solid var(--color-card-border-inner);
}
/* Status indicators - simplified with CSS variables */
.status {
display: inline-flex;
align-items: center;
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.status--success {
background-color: rgba(
var(--color-success-rgb, 33, 128, 141),
var(--status-bg-opacity)
);
color: var(--color-success);
border: 1px solid
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}
.status--error {
background-color: rgba(
var(--color-error-rgb, 192, 21, 47),
var(--status-bg-opacity)
);
color: var(--color-error);
border: 1px solid
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}
.status--warning {
background-color: rgba(
var(--color-warning-rgb, 168, 75, 47),
var(--status-bg-opacity)
);
color: var(--color-warning);
border: 1px solid
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}
.status--info {
background-color: rgba(
var(--color-info-rgb, 98, 108, 113),
var(--status-bg-opacity)
);
color: var(--color-info);
border: 1px solid
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}
/* Container layout */
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-16);
padding-left: var(--space-16);
}
@media (min-width: 640px) {
.container {
max-width: var(--container-sm);
}
}
@media (min-width: 768px) {
.container {
max-width: var(--container-md);
}
}
@media (min-width: 1024px) {
.container {
max-width: var(--container-lg);
}
}
@media (min-width: 1280px) {
.container {
max-width: var(--container-xl);
}
}
/* Utility classes */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: var(--space-4);
}
.gap-8 {
gap: var(--space-8);
}
.gap-16 {
gap: var(--space-16);
}
.m-0 {
margin: 0;
}
.mt-8 {
margin-top: var(--space-8);
}
.mb-8 {
margin-bottom: var(--space-8);
}
.mx-8 {
margin-left: var(--space-8);
margin-right: var(--space-8);
}
.my-8 {
margin-top: var(--space-8);
margin-bottom: var(--space-8);
}
.p-0 {
padding: 0;
}
.py-8 {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.px-8 {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.py-16 {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.px-16 {
padding-left: var(--space-16);
padding-right: var(--space-16);
}
.block {
display: block;
}
.hidden {
display: none;
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
:focus-visible {
outline: var(--focus-outline);
outline-offset: 2px;
}
/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
border: 1px solid var(--color-border-secondary);
}
@font-face {
font-family: 'FKGroteskNeue';
src: url('https://www.perplexity.ai/fonts/FKGroteskNeue.woff2')
format('woff2');
}
/* Override design system colors with green theme */
:root {
/* Unified green color palette (#416C25) */
--color-primary: #416C25;
--color-primary-hover: #385D20;
--color-primary-active: #304F1B;
--color-secondary: rgba(65, 108, 37, 0.12);
--color-secondary-hover: rgba(65, 108, 37, 0.2);
--color-secondary-active: rgba(65, 108, 37, 0.25);
--color-accent: #416C25;
--color-accent-light: #81c784;
--color-border: rgba(65, 108, 37, 0.2);
--color-btn-primary-text: #ffffff;
/* Success colors aligned to primary */
--color-success: #416C25;
--color-success-rgb: 65, 108, 37;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #416C25;
--color-primary-hover: #385D20;
--color-primary-active: #304F1B;
--color-secondary: rgba(65, 108, 37, 0.15);
--color-secondary-hover: rgba(65, 108, 37, 0.25);
--color-secondary-active: rgba(65, 108, 37, 0.3);
--color-accent: #416C25;
--color-success: #416C25;
--color-success-rgb: 65, 108, 37;
}
}
[data-color-scheme="dark"] {
--color-primary: #416C25;
--color-primary-hover: #385D20;
--color-primary-active: #304F1B;
--color-secondary: rgba(65, 108, 37, 0.15);
--color-secondary-hover: rgba(65, 108, 37, 0.25);
--color-secondary-active: rgba(65, 108, 37, 0.3);
--color-accent: #416C25;
--color-success: #416C25;
--color-success-rgb: 65, 108, 37;
}
/* Navigation Styles */
.navbar {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-12) var(--space-16);
}
.navbar-brand h2 {
color: var(--color-primary);
margin: 0;
font-weight: var(--font-weight-bold);
}
.navbar-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-24);
}
.brand-tagline {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-weight: var(--font-weight-normal);
}
.nav-link {
color: var(--color-text);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
.nav-link:hover {
color: var(--color-primary);
}
/* Hero Section */
.hero-section {
position: relative;
overflow: hidden;
padding-top: 120px;
padding-bottom: 8rem;
background: white;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
z-index: 0;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('Hero_back.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
will-change: transform;
}
.hero-overlay {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #16240C;
z-index: 1;
opacity: 0.32;
}
.hero-section .container {
position: relative;
z-index: 2;
}
.hero-content {
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 2rem 0;
}
.hero-title {
font-size: 4rem;
font-weight: var(--font-weight-bold);
letter-spacing: -1.5px;
color: white;
margin-bottom: 2rem;
font-family: var(--font-family-base);
text-align: center;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
line-height: 1.2;
opacity: 0;
animation: fadeIn 0.8s ease forwards;
animation-delay: 0.2s;
}
.hero-subtitle {
font-size: 1.75rem;
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.95);
margin-bottom: 1.5rem;
text-align: center;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
line-height: 1.4;
opacity: 0;
animation: fadeIn 0.8s ease forwards;
animation-delay: 0.4s;
}
.hero-description {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3rem;
max-width: 800px;
line-height: 1.6;
text-align: center;
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: fadeIn 0.8s ease forwards;
animation-delay: 0.6s;
}
.highlight-text {
color: #A4D187;
position: relative;
display: inline-block;
text-shadow: 0 0 10px rgba(165, 214, 167, 0.3);
}
.highlight-text::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background-color: #a5d6a7;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease-out;
box-shadow: 0 0 10px rgba(165, 214, 167, 0.3);
}
.highlight-text:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.hero-actions {
display: flex;
justify-content: center;
gap: var(--space-16);
flex-wrap: wrap;
margin-bottom: 3rem;
}
.btn--hero {
padding: var(--space-16) var(--space-32);
font-size: var(--font-size-lg);
border-radius: var(--radius-md);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
background: var(--color-primary);
color: white;
border: 0px solid white;
}
.btn--hero:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
background: white;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--hero:hover .btn-icon {
stroke: var(--color-primary);
}
.btn--hero .btn-icon {
margin-right: var(--space-8);
transition: stroke 0.3s ease;
}
/* Add spacing for icons in secondary buttons */
.btn .btn-icon {
margin-right: var(--space-8);
transition: stroke 0.3s ease;
}
/* Make secondary button more visible in hero section */
.hero-actions .btn--secondary {
background: rgba(255, 255, 255, 0.9);
color: var(--color-primary);
border: 1px solid rgba(255, 255, 255, 0.9);
}
.hero-actions .btn--secondary:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Dark green hover for "Solicita una demo" button */
.buttons-container .btn--secondary:hover {
background: var(--color-primary-active);
color: white;
border-color: var(--color-primary-active);
}
.hero-stats {
display: flex;
justify-content: center;
gap: 4rem;
margin-top: 3rem;
}
.stat-item {
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
}
.stat-item:nth-child(1) { animation-delay: 0.2s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.6s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: #ffffff;
line-height: 1.1;
margin-bottom: 0.5rem;
text-shadow: 0 0 10px rgba(165, 214, 167, 0.3);
}
.stat-label {
font-size: var(--font-size-sm);
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 10px rgba(165, 214, 167, 0.3);
}
.hero-scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
opacity: 0.7;
transition: opacity 0.3s ease;
cursor: pointer;
}
.hero-scroll-indicator:hover {
opacity: 1;
}
.scroll-arrow {
display: block;
width: 30px;
height: 30px;
border-right: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(45deg);
animation: scrollBounce 2s infinite;
text-decoration: none;
transition: all 0.3s ease;
}
.scroll-arrow:hover {
border-color: var(--color-primary);
transform: rotate(45deg) scale(1.1);
}
@keyframes scrollBounce {
0%, 20%, 50%, 80%, 100% {
transform: rotate(45deg) translateY(0);
}
40% {
transform: rotate(45deg) translateY(-10px);
}
60% {
transform: rotate(45deg) translateY(-5px);
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.3rem;
}
.hero-stats {
gap: 2rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: var(--font-size-xs);
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn--hero {
width: 80%;
max-width: 300px;
}
.hero-stats {
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
}
/* Section Styles */
.section {
padding: var(--space-48) 0;
background: white;
}
.section--gray {
background: white;
}
.section-title {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
text-align: center;
margin-bottom: var(--space-32);
color: var(--color-text);
letter-spacing: -0.24px;
}
/* Value Proposition Grid */
.value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-32);
margin-top: var(--space-32);
}
.value-item {
text-align: left;
padding: 0 0 0 0;
}
.value-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: transparent;
margin: 0;
color: var(--color-text-secondary);
transition: all var(--duration-normal) var(--ease-standard);
}
.value-icon img {
width: 48px;
height: 48px;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(90%) contrast(87%);
transition: all var(--duration-normal) var(--ease-standard);
}
.value-item.active .value-icon {
color: white;
}
.value-item.active .value-icon img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.value-item h3 {
margin: 0;
color: var(--color-text);
line-height: 1.2;
text-align: left;
flex: 1;
display: flex;
align-items: center;
min-height: 48px;
}
.value-item p {
color: var(--color-primary);
margin: 0;
}
/* Ecosystem Diagram */
.ecosystem-diagram {
margin-top: var(--space-32);
text-align: center;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.ecosystem-image {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-card-border);
object-fit: contain;
}
@media (max-width: 768px) {
.ecosystem-diagram {
max-width: 100%;
padding: 0 var(--space-16);
}
.ecosystem-image {
max-width: 100%;
}
}
/* Segment Tabs */
.segment-tabs {
display: flex;
justify-content: center;
gap: var(--space-8);
margin-bottom: var(--space-32);
flex-wrap: wrap;
}
.segment-tab {
padding: var(--space-12) var(--space-20);
border: 2px solid var(--color-border);
background: transparent;
color: var(--color-text);
border-radius: var(--radius-base);
cursor: pointer;
font-weight: var(--font-weight-medium);
transition: all var(--duration-normal) var(--ease-standard);
}
.segment-tab.active,
.segment-tab:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Segment Content */
.segment-content {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-16);
padding-left: var(--space-16);
}
.segment-content.active {
display: block;
z-index: 2;
box-sizing: border-box;
width: 100%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding-right: var(--space-16);
padding-left: var(--space-16);
}
.segment-header {
text-align: center;
margin-bottom: var(--space-48);
margin: 0 auto var(--space-48) auto;
}
.segment-header h3 {
color: var(--color-primary);
margin-bottom: var(--space-16);
}
.segment-header p {
font-size: var(--font-size-xl);
color: var(--color-text-secondary);
margin-top: var(--space-16);
}
/* Sección principal que contiene mockups y demo */
.mockups-demo-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-48);
align-items: start;
margin-bottom: var(--space-48);
}
.mockups-header {
width: 100%;
padding: 2rem 2rem 2rem 2rem;
}
.mockups-header h3 {
color: var(--color-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-16);
line-height: var(--line-height-tight);
}
.mockups-header p {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-top: var(--space-16);
line-height: var(--line-height-normal);
}
/* Carrusel de logos de empresas */
.logos-carousel {
margin-top: var(--space-32);
overflow: hidden;
position: relative;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.logos-carousel-inner {
display: flex;
animation: scroll-logos 15s linear infinite;
gap: var(--space-12);
align-items: center;
width: fit-content;
}
.logo-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.logo-image {
width: 150px;
height: 72px;
object-fit: contain;
object-position: center;
transition: all var(--duration-normal) var(--ease-standard);
filter: none;
border-radius: var(--radius-base);
padding: var(--space-8);
background: transparent;
box-shadow: none;
}
.logo-image:hover {
transform: translateY(-2px);
filter: none;
}
/* Animación del carrusel */
@keyframes scroll-logos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - var(--space-12)));
}
}
/* Pausar animación al hacer hover */
.logos-carousel:hover .logos-carousel-inner {
animation-play-state: paused;
}
/* Responsive para el carrusel de logos */
@media (max-width: 768px) {
.logo-image {
width: 100px;
height: 50px;
padding: var(--space-6);
}
.logos-carousel-inner {
gap: var(--space-24);
}
}
@media (max-width: 480px) {
.logo-image {
width: 80px;
height: 40px;
padding: var(--space-4);
}
.logos-carousel-inner {
gap: var(--space-16);
}
}
/* Sección de Demo */
.demo-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
border-radius: var(--radius-lg);
padding: var(--space-32);
color: white;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.demo-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(50%, -50%);
}
.demo-content {
position: relative;
z-index: 1;
}
.demo-text h3 {
color: white;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-16);
line-height: var(--line-height-tight);
}
.demo-text p {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
margin-bottom: var(--space-24);
line-height: var(--line-height-normal);
}
.demo-features {
display: flex;
flex-direction: column;
gap: var(--space-12);
margin-bottom: var(--space-32);
}
.demo-feature {
display: flex;
align-items: center;
gap: var(--space-12);
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-base);
}
.demo-feature svg {
color: rgba(255, 255, 255, 0.8);
flex-shrink: 0;
}
.demo-button {
display: block;
text-decoration: none;
transition: all var(--duration-normal) var(--ease-standard);
margin-bottom: var(--space-16);
}
.demo-button:hover {
transform: translateY(-2px);
}
.demo-button-content {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-20);
display: flex;
align-items: center;
gap: var(--space-16);
box-shadow: var(--shadow-md);
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
overflow: hidden;
}
.demo-button:hover .demo-button-content {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.demo-logo {
width: 48px;
height: 48px;
object-fit: contain;
flex-shrink: 0;
}
.demo-button-text {
display: flex;
flex-direction: column;
flex: 1;
}
.demo-button-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-4);
}
.demo-button-subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.demo-arrow {
color: var(--color-primary);
transition: transform var(--duration-normal) var(--ease-standard);
}
.demo-button:hover .demo-arrow {
transform: translateX(4px);
}
.demo-note {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.7);
text-align: center;
margin: 0;
font-style: italic;
}
/* Responsive para la sección de demo */
@media (max-width: 1024px) {
.mockups-demo-section {
grid-template-columns: 1fr;
gap: var(--space-32);
}
.demo-section {
padding: var(--space-24);
}
}
@media (max-width: 768px) {
.demo-text h3 {
font-size: var(--font-size-2xl);
}
.demo-button-content {
padding: var(--space-16);
}
.demo-logo {
width: 40px;
height: 40px;
}
.demo-button-title {
font-size: var(--font-size-lg);
}
}
@media (max-width: 480px) {
.demo-section {
padding: var(--space-20);
}
.demo-button-content {
flex-direction: column;
text-align: center;
gap: var(--space-12);
}
.demo-arrow {
transform: rotate(90deg);
}
.demo-button:hover .demo-arrow {
transform: rotate(90deg) translateX(4px);
}
}
.features-section,
.benefits-section,
.mockups-section {
margin-left: auto;
margin-right: auto;
}
.mockups-section h3 {
color: var(--color-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-16);
line-height: var(--line-height-tight);
text-align: center;
}
.mockups-section p {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-bottom: var(--space-32);
line-height: var(--line-height-normal);
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-24);
margin-bottom: var(--space-32);
}
.feature-item {
background: var(--color-surface);
padding: var(--space-24);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
transition: transform var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
.feature-item--empty {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.feature-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: var(--color-secondary);
border-radius: var(--radius-lg);
color: var(--color-primary);
margin-bottom: var(--space-16);
}
.feature-item h4 {
margin-bottom: var(--space-12);
color: var(--color-text);
}
.feature-item p {
color: var(--color-text-secondary);
margin: 0;
}
/* Mockups Section */
.mockups-section {
margin-top: var(--space-32);
padding-top: var(--space-32);
border-top: 1px solid var(--color-border);
}
.mockups-section h3 {
text-align: center;
margin-bottom: var(--space-24);
color: var(--color-primary);
}
/* Carousel Styles */
.carousel {
position: relative;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--color-surface);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
}
.carousel-inner {
display: flex;
transition: transform var(--duration-normal) var(--ease-standard);
width: 100%;
box-sizing: border-box;
}
.carousel-item {
min-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-32);
}
.mockup-image {
max-width: 100%;
width: 400px;
height: 280px;
border-radius: var(--radius-base);
margin-bottom: var(--space-12);
box-shadow: var(--shadow-md);
object-fit: contain;
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.mockup-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
background: var(--color-secondary);
border-radius: var(--radius-base);
border: 2px dashed var(--color-border);
margin-bottom: var(--space-16);
width: 100%;
}
.placeholder-content {
text-align: center;
color: var(--color-text-secondary);
}
.placeholder-content svg {
color: var(--color-primary);
margin-bottom: var(--space-12);
}
.placeholder-content h5 {
margin-bottom: var(--space-8);
color: var(--color-text);
}
.placeholder-content p {
margin: 0;
max-width: 300px;
}
.mockup-description {
text-align: center;
}
.mockup-description h5 {
margin-bottom: var(--space-8);
color: var(--color-text);
}
.mockup-description p {
color: var(--color-text-secondary);
margin: 0;
max-width: 400px;
}
.carousel-prev,
.carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: var(--space-12) var(--space-16);
cursor: pointer;
border-radius: var(--radius-sm);
font-size: var(--font-size-lg);
transition: background var(--duration-fast) var(--ease-standard);
z-index: 10;
}
.carousel-prev:hover,
.carousel-next:hover {
background: rgba(0, 0, 0, 0.7);
}
.carousel-prev {
left: var(--space-16);
}
.carousel-next {
right: var(--space-16);
}
/* Benefits Section Styles */
.benefits-section {
margin-top: var(--space-32);
padding: 2.5rem 2rem 2.5rem 2rem;
border-top: 1px solid var(--color-border);
background: var(--color-secondary);
border-radius: 12px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 2rem;
margin-top: 1rem;
width: 100%;
}
.benefit-item {
background: var(--color-secondary);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
margin: 0.5rem;
border: 2px solid transparent;
}
/* .benefit-item::after {
content: "▼";
position: absolute;
bottom: 1.9em;
right: 1.9rem;
color: var(--color-primary);
font-size: 1.2rem;
transition: all 0.3s ease;
opacity: 0.6;
}
.benefit-item.active::after {
transform: rotate(180deg);
opacity: 1;
} */
.benefit-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
border-color: var(--color-primary);
}
.benefit-item:hover::after {
opacity: 1;
transform: scale(1.2);
}
.benefit-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.benefit-icon {
width: 64px;
height: 64px;
color: var(--color-primary);
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: rgba(65, 108, 37, 0.1);
border-radius: 50%;
flex-shrink: 0;
}
.benefit-icon svg {
width: 40px;
height: 40px;
}
.benefit-item:hover .benefit-icon {
transform: scale(1.05);
}
.benefit-stat {
font-size: 2rem;
font-weight: bold;
color: var(--color-primary);
text-align: right;
}
.benefit-content {
position: relative;
}
.benefit-content h5 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: var(--color-text);
position: relative;
padding-right: 2rem;
}
.benefit-content p {
color: var(--color-text-light);
margin-bottom: 1rem;
margin-top: 1.5rem;
position: relative;
}
.benefit-content p::after {
content: "Más detalles";
position: absolute;
bottom: -1.9rem;
left: 0;
font-size: 0.75rem;
color: var(--color-primary);
font-weight: 500;
opacity: 0;
transition: opacity 0.3s ease;
background: rgba(65, 108, 37, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.benefit-item:hover .benefit-content p::after {
opacity: 1;
}
.benefit-item.active .benefit-content p::after {
content: "Menos detalles";
opacity: 1;
}
.benefit-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background: var(--color-surface);
border-radius: 4px;
margin-top: 2.5rem;
}
.benefit-item.active .benefit-details {
max-height: 200px;
padding: 1rem;
}
.benefit-details ul {
list-style: none;
padding: 0;
margin: 0;
}
.benefit-details li {
padding: 0.5rem 0;
color: var(--color-text);
position: relative;
padding-left: 1.5rem;
}
.benefit-details li:before {
content: "✓";
color: var(--color-primary);
position: absolute;
left: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.benefits-grid {
grid-template-columns: 1fr;
}
.benefit-item {
padding: 1rem;
}
.benefit-header {
flex-direction: column;
text-align: center;
}
.benefit-stat {
margin-top: 0.5rem;
}
}
/* Technology Grid */
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-24);
}
.tech-item {
text-align: center;
padding: var(--space-24);
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
transition: transform var(--duration-normal) var(--ease-standard);
}
.tech-item:hover {
transform: translateY(-4px);
}
.tech-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: var(--color-secondary);
border-radius: var(--radius-full);
margin: 0 auto var(--space-16);
color: var(--color-primary);
}
.tech-item h3 {
margin-bottom: var(--space-12);
color: var(--color-text);
}
.tech-item p {
color: var(--color-text-secondary);
margin: 0;
}
/* Pricing Grid */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-24);
max-width: 1000px;
margin: 0 auto;
}
.pricing-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
padding: var(--space-24);
position: relative;
transition: transform var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.pricing-card--featured {
border: 2px solid var(--color-primary);
transform: scale(1.05);
}
.pricing-card--featured::before {
content: "Más Popular";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: white;
padding: var(--space-4) var(--space-16);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.pricing-header {
text-align: center;
margin-bottom: var(--space-24);
}
.pricing-header h3 {
margin-bottom: var(--space-16);
color: var(--color-text);
}
.price {
display: flex;
flex-direction: column;
align-items: center;
}
.price-value {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.price-period {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-24) 0;
}
.pricing-features li {
padding: var(--space-8) 0;
color: var(--color-text);
border-bottom: 1px solid var(--color-card-border-inner);
}
.pricing-features li:last-child {
border-bottom: none;
}
/* Contact Section */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-32);
max-width: 1000px;
margin: 0 auto;
}
.contact-info h3 {
margin-bottom: var(--space-16);
color: var(--color-primary);
}
.contact-info p {
margin-bottom: var(--space-24);
color: var(--color-text-secondary);
}
.contact-item {
display: flex;
align-items: center;
gap: var(--space-12);
margin-bottom: var(--space-16);
color: var(--color-text);
}
.contact-item svg {
color: var(--color-primary);
}
.contact-form {
background: white;
padding: var(--space-32);
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: none;
margin: 0;
max-width: none;
width: 100%;
font-family: var(--font-family-base);
}
.contact-form .form-control {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1.6;
}
.contact-form .form-label {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
/* Footer */
.footer {
background: var(--color-primary);
color: white;
padding: var(--space-32) 0 var(--space-16) 0;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-24);
margin-bottom: var(--space-24);
}
.footer-section h4,
.footer-section h5 {
color: white;
margin-bottom: var(--space-16);
}
.footer-section p {
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: var(--space-8);
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
.footer-links a:hover {
color: white;
}
/* Footer legal links - horizontal, right aligned, same style as copyright */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
text-align: center;
padding-top: var(--space-24);
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
}
.footer-bottom p {
margin: 0;
flex: 1 1 auto;
text-align: left;
}
.footer-legal-links {
list-style: none;
display: flex;
gap: var(--space-24);
margin: 0;
padding: 0;
flex: 1 1 auto;
justify-content: flex-end;
}
.footer-legal-links li {
margin: 0;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: inherit;
transition: color var(--duration-fast) var(--ease-standard);
}
.footer-legal-links a:hover {
color: white;
}
@media (max-width: 768px) {
.footer-bottom {
flex-direction: column;
gap: var(--space-16);
text-align: center;
}
.footer-bottom p {
text-align: center;
}
.footer-legal-links {
justify-content: center;
gap: var(--space-16);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.navbar-nav {
display: none;
}
.hero-title {
font-size: var(--font-size-3xl);
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.hero-actions .btn {
width: 100%;
max-width: 300px;
}
.segment-tabs {
flex-direction: column;
}
.contact-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: 1fr;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.benefit-item {
flex-direction: column;
text-align: center;
}
.pricing-card--featured {
transform: none;
}
.carousel-prev,
.carousel-next {
padding: var(--space-8) var(--space-12);
font-size: var(--font-size-base);
}
}
/* Features Section - New Layout */
.features-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-48);
align-items: center;
margin-bottom: var(--space-48);
}
.features-row:last-child {
margin-bottom: 0;
}
/* Image containers */
.features-image-left,
.features-image-right {
position: relative;
}
.image-container {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: all var(--duration-normal) var(--ease-standard);
}
.image-container:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.features-image {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
display: block;
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: var(--space-32) var(--space-24) var(--space-24);
transform: translateY(100%);
transition: transform var(--duration-normal) var(--ease-standard);
}
.image-container:hover .image-overlay {
transform: translateY(0);
}
.overlay-content h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-8);
color: white;
}
.overlay-content p {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
/* Feature grids */
.features-grid-right,
.features-grid-left {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-24);
}
.feature-card {
background: var(--color-surface);
padding: var(--space-24);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.feature-card:hover {
border-color: var(--color-primary);
}
.feature-card .feature-icon {
width: 48px;
height: 48px;
background: var(--color-secondary);
border-radius: var(--radius-base);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
color: var(--color-primary);
transition: all var(--duration-normal) var(--ease-standard);
flex-shrink: 0;
}
.feature-card-header {
display: flex;
align-items: center;
gap: var(--space-16);
margin-bottom: var(--space-16);
}
.feature-card:hover .feature-icon {
background: var(--color-primary);
color: white;
transform: scale(1.1);
}
.feature-card h4 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin: 0;
color: var(--color-text);
line-height: var(--line-height-tight);
flex: 1;
}
.feature-card p {
color: var(--color-text-muted);
line-height: var(--line-height-normal);
margin: 0;
flex: 1;
font-size: var(--font-size-base);
}
/* Responsive design for new features layout */
@media (max-width: 1024px) {
.features-row {
grid-template-columns: 1fr;
gap: var(--space-32);
}
.features-grid-right,
.features-grid-left {
grid-template-columns: 1fr 1fr;
}
.features-image-left,
.features-image-right {
order: 2;
}
.features-grid-right,
.features-grid-left {
order: 1;
}
}
@media (max-width: 768px) {
.features-grid-right,
.features-grid-left {
grid-template-columns: 1fr;
}
.features-image {
height: 300px;
}
.feature-card {
padding: var(--space-20);
}
}
@media (max-width: 480px) {
.features-row {
gap: var(--space-24);
}
.features-image {
height: 250px;
}
.overlay-content {
padding: var(--space-20) var(--space-16) var(--space-16);
}
.overlay-content h3 {
font-size: var(--font-size-lg);
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Animation for section content */
.segment-content {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Value Proposition Section */
.value-container {
display: flex;
gap: 2rem;
margin: 2rem 0;
}
.value-items {
flex: 0 0 350px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.value-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
min-height: 100px;
justify-content: flex-start;
}
.value-item:hover {
background-color: var(--color-secondary);
}
.value-item.active {
background-color: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.value-item.active h3 {
color: white;
}
.value-icon {
flex: 0 0 48px;
}
.value-details {
flex: 1;
padding: 2rem;
background-color: var(--color-surface);
border-radius: 8px;
border: 1px solid var(--color-border);
}
.value-detail {
display: none;
}
.value-detail.active {
display: block;
}
.detail-description {
font-size: 1.1rem;
margin-bottom: 2rem;
color: var(--color-text-secondary);
}
.detail-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.detail-feature {
padding: 1rem;
background-color: var(--color-surface);
border-radius: 8px;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.detail-feature h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.detail-feature p {
color: var(--color-text-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.value-container {
flex-direction: column;
}
.value-items {
flex: 0 0 auto;
width: 100%;
}
.value-details {
padding: 1rem;
}
}
/* Features Section */
.features-section {
margin-top: var(--space-32);
padding-top: var(--space-32);
}
.features-section h4 {
text-align: center;
margin-bottom: var(--space-24);
color: var(--color-primary);
}
/* Benefits Section */
.benefits-section {
margin-top: var(--space-32);
padding-top: var(--space-32);
border-top: 1px solid var(--color-border);
}
.benefits-section h4 {
text-align: center;
margin-bottom: var(--space-24);
color: var(--color-primary);
}
/* Mockups Section */
.mockups-section {
margin-top: var(--space-32);
padding-top: var(--space-32);
}
.mockups-section h4 {
text-align: center;
margin-bottom: var(--space-24);
color: var(--color-primary);
}
@media (max-width: 900px) {
.hero-bg-svg {
width: 200px;
}
.hero-title {
font-size: 2rem;
}
.hero-content {
max-width: 100%;
}
}
@media (max-width: 600px) {
.hero-bg-svg {
width: 90px;
opacity: 0.13;
}
.hero-title {
font-size: 1.2rem;
}
.hero-content {
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
}
.segment-content:not(.active) .carousel {
display: none !important;
}
/* Lightbox styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
cursor: pointer;
}
.lightbox.active {
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 90%;
max-height: 90vh;
object-fit: contain;
border-radius: var(--radius-base);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 30px;
cursor: pointer;
z-index: 10000;
}
/* ROI Calculator Section */
.roi-calculator-section {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
padding: var(--space-32) 0;
color: white;
position: relative;
overflow: hidden;
}
/* Elimino los estilos de .calculator-container para restaurar el estado anterior */
.calculator-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-16);
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.calculator-container {
padding: 0 var(--space-8);
}
}
.calculator-header {
text-align: center;
margin-bottom: var(--space-32);
}
.calculator-header h2 {
color: white;
font-size: var(--font-size-3xl);
margin-bottom: var(--space-16);
}
.calculator-header p {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
max-width: 600px;
margin: 0 auto;
}
.calculator-grid {
background: white;
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
padding: var(--space-32);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-32);
min-height: 400px;
}
.calculator-inputs, .calculator-results {
flex: 1 1 0;
}
.calculator-inputs {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.input-group {
display: flex;
flex-direction: column;
margin-bottom: var(--space-16);
}
.input-group label {
color: var(--color-primary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
margin-bottom: var(--space-8);
}
.input-group:last-child {
margin-bottom: 0;
}
.input-group input {
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius-base);
padding: var(--space-12);
color: var(--color-text);
font-size: var(--font-size-base);
transition: all 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: var(--color-primary);
background: white;
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.input-group input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
.calculator-results {
background: var(--color-secondary);
border-radius: var(--radius-lg);
padding: var(--space-24);
display: flex;
flex-direction: column;
gap: var(--space-16);
margin-top: var(--space-24);
}
.result-item {
background: var(--color-surface);
border-radius: var(--radius-base);
padding: var(--space-16);
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: none;
border: 1px solid var(--color-card-border);
}
.result-label {
color: var(--color-primary) !important;
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
}
.result-value {
color: var(--color-primary) !important;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
}
.result-value.positive {
color: var(--color-accent-light);
}
.result-value.negative {
color: #ffeb3b;
}
.calculator-note {
text-align: center;
margin-top: var(--space-24);
color: rgba(255, 255, 255, 0.7);
font-size: var(--font-size-sm);
}
@media (max-width: 768px) {
.calculator-grid {
grid-template-columns: 1fr;
}
.calculator-results {
order: -1;
}
.result-value {
font-size: var(--font-size-xl);
}
}
/* Feedback Form Styles */
.feedback-form {
background: var(--color-secondary);
padding: var(--space-32);
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, 0.1);
margin: var(--space-32) auto;
box-shadow: none;
}
.feedback-form .form-group {
margin-bottom: var(--space-24);
}
.feedback-form .form-label {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-8);
display: block;
color: var(--color-primary);
}
.feedback-form .form-control {
width: 100%;
padding: var(--space-12);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
margin-top: var(--space-4);
}
.feedback-form textarea.form-control {
resize: vertical;
}
.feedback-form .form-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
margin-top: var(--space-8);
}
.feedback-form .form-options label {
background: var(--color-background);
border: 1px solid var(--color-card-border-inner);
border-radius: var(--radius-md);
padding: var(--space-8) var(--space-16);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--space-8);
transition: border-color 0.2s;
font-size: var(--font-size-base);
}
.feedback-form .form-options input[type="radio"],
.feedback-form .form-options input[type="checkbox"] {
accent-color: var(--color-primary);
margin-right: var(--space-4);
}
.feedback-form .form-options label:hover,
.feedback-form .form-options input:focus + label {
border-color: var(--color-primary);
}
.feedback-form .btn {
margin-top: var(--space-16);
}
.section-description {
color: var(--color-text-secondary);
margin-bottom: var(--space-24);
text-align: center;
}
@media (max-width: 768px) {
.feedback-form {
padding: var(--space-16);
}
.feedback-form .form-options {
flex-direction: column;
gap: var(--space-8);
}
}
/* Feedback Form Styles */
.form-options--buttons {
display: flex;
gap: var(--space-16);
flex-wrap: wrap;
}
.form-options--buttons label {
flex: 1;
min-width: 200px;
}
.form-options--buttons input[type="radio"] {
display: none;
}
.form-options--buttons .button-label {
display: block;
padding: var(--space-16);
background: var(--color-surface);
border: 2px solid var(--color-card-border);
border-radius: var(--radius-md);
text-align: center;
cursor: pointer;
transition: all var(--duration-normal) ease;
}
.form-options--buttons input[type="radio"]:checked + .button-label {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.form-row {
display: flex;
gap: var(--space-16);
flex-wrap: wrap;
}
.form-col {
flex: 1;
min-width: 250px;
}
/* Pain Points Ranking */
.pain-points-ranking {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin: var(--space-24) 0;
}
.pain-point-card {
background: var(--color-surface);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: var(--radius-md);
padding: var(--space-16);
cursor: move;
position: relative;
transition: all var(--duration-normal) ease;
}
.pain-point-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pain-point-card.dragging {
opacity: 0.5;
background: var(--color-primary-light);
}
.rank-number {
position: absolute;
top: var(--space-16);
right: var(--space-16);
width: 24px;
height: 24px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
}
.pain-point-card h4 {
margin: 0 0 var(--space-8);
padding-right: 40px;
color: var(--color-text);
}
.pain-point-card p {
margin: 0;
color: var(--color-text-light);
font-size: var(--font-size-sm);
}
.form-options--grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-16);
}
.form-options--grid label {
display: flex;
align-items: center;
gap: var(--space-8);
}
/* Ajuste del ancho del formulario para que coincida con las otras secciones */
.feedback-form,
.contact-grid,
.segment-content {
display: flex;
gap: 2rem;
margin: 2rem 0;
}
/* Alternancia de fondos de secciones principales con verde suave */
#propuesta {
background: var(--color-secondary);
}
#beneficios {
background: white;
}
#funcionalidades {
background: var(--color-secondary);
}
#como-funciona {
background: white;
}
#mockups {
background: var(--color-secondary);
}
/* Cómo funciona section shares carousel styles */
#como-funciona .mockup-description p {
text-align: left;
}
#planes {
background: var(--color-secondary);
}
#contacto {
background: var(--color-secondary);
}
.func-group {
margin-bottom: var(--space-24);
padding: var(--space-16);
background: var(--color-surface);
border-radius: var(--radius-md);
border: 1px solid var(--color-card-border);
}
.func-group-title {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-12);
font-size: var(--font-size-lg);
display: block;
}
.func-group label {
display: flex;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
font-size: var(--font-size-base);
}
/* ===== CÓMO FUNCIONA - OPCIONES DE DISPLAY ===== */
.confidence-text {
text-align: center;
font-size: var(--font-size-lg);
color: var(--color-text);
max-width: 800px;
margin: 0 auto var(--space-32) auto;
line-height: 1.6;
padding: 0 var(--space-16);
}
.steps-horizontal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-20);
margin-top: var(--space-24);
}
.step-card {
background: var(--color-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-24);
text-align: center;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.step-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.step-number {
width: 40px;
height: 40px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
margin: 0 auto var(--space-16) auto;
}
.step-image {
margin-bottom: var(--space-16);
border-radius: var(--radius-md);
overflow: hidden;
}
.step-image .mockup-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-md);
}
.step-card h5 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin-bottom: var(--space-12);
font-weight: 600;
}
.step-card ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.step-card li {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.5;
margin-bottom: var(--space-8);
padding-left: var(--space-20);
position: relative;
}
.step-card li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
font-size: var(--font-size-sm);
}
.steps-timeline {
position: relative;
margin-top: var(--space-32);
padding-left: var(--space-32);
}
.steps-timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-primary);
}
.timeline-step {
position: relative;
margin-bottom: var(--space-32);
padding-left: var(--space-32);
}
.timeline-step::before {
content: '';
position: absolute;
left: -6px;
top: 8px;
width: 12px;
height: 12px;
background: var(--color-primary);
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-step h5 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin-bottom: var(--space-12);
font-weight: 600;
}
.timeline-step ul {
list-style: none;
padding: 0;
margin: 0;
}
.timeline-step li {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.5;
margin-bottom: var(--space-8);
padding-left: var(--space-20);
position: relative;
}
.timeline-step li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
font-size: var(--font-size-sm);
}
.steps-tabs {
margin-top: var(--space-32);
}
.tab-buttons {
display: flex;
justify-content: center;
gap: var(--space-8);
margin-bottom: var(--space-24);
border-bottom: 1px solid var(--color-border);
}
.tab-button {
padding: var(--space-12) var(--space-20);
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.tab-button.active,
.tab-button:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.tab-content {
display: none;
background: white;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-24);
box-shadow: var(--shadow-sm);
}
.tab-content.active {
display: block;
}
.tab-step h5 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin-bottom: var(--space-12);
font-weight: 600;
}
.tab-step ul {
list-style: none;
padding: 0;
margin: 0;
}
.tab-step li {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.5;
margin-bottom: var(--space-8);
padding-left: var(--space-20);
position: relative;
}
.tab-step li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
font-size: var(--font-size-sm);
}
/* Responsive para opciones de display */
@media (max-width: 768px) {
.steps-horizontal {
grid-template-columns: 1fr;
gap: var(--space-16);
}
.tab-buttons {
flex-direction: column;
gap: var(--space-4);
}
.tab-button {
text-align: center;
}
}
/* ===== TIMELINE DE EVOLUCIÓN ===== */
.evolution-timeline {
margin: var(--space-32) 0;
}
.timeline-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.timeline-container::before {
content: '';
position: absolute;
left: 50px;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-primary);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: var(--space-48);
padding-left: 120px;
}
.timeline-marker {
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.marker-icon {
width: 100px;
height: 100px;
background: white;
border: 4px solid var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-3xl);
box-shadow: var(--shadow-lg);
}
.marker-icon svg {
color: var(--color-primary);
width: 32px;
height: 32px;
}
.timeline-item.future .marker-icon {
border-color: var(--color-secondary);
}
.timeline-item.future .marker-icon svg {
color: var(--color-primary);
width: 32px;
height: 32px;
}
.timeline-content {
padding-top: var(--space-16);
}
.timeline-card {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-24);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
position: relative;
}
.timeline-card h3 {
color: var(--color-text);
font-size: var(--font-size-2xl);
margin: 0 0 var(--space-16) 0;
font-weight: 700;
}
.status-badge {
position: absolute;
top: var(--space-16);
right: var(--space-16);
background: var(--color-primary);
color: white;
padding: var(--space-4) var(--space-12);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 1;
}
.status-badge.future {
background: var(--color-secondary);
color: var(--color-primary);
}
.timeline-card p {
color: var(--color-text);
font-size: var(--font-size-lg);
line-height: 1.6;
margin-bottom: var(--space-24);
}
.achievements {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-20);
margin-bottom: var(--space-24);
}
.achievement {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-20);
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: all 0.3s ease;
}
.achievement:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.achievement-icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-12);
}
.achievement-icon svg {
color: var(--color-primary);
width: 24px;
height: 24px;
}
.achievement-text h4 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin: 0 0 var(--space-8) 0;
font-weight: 700;
}
.achievement-text p {
color: var(--color-text-secondary);
font-size: var(--font-size-base);
margin: 0;
}
.cloud-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-20);
margin-bottom: var(--space-32);
}
.cloud-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-20);
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
transition: all 0.3s ease;
}
.cloud-feature:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.cloud-feature .achievement-icon {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-12);
}
.cloud-feature .achievement-icon svg {
color: var(--color-primary);
width: 24px;
height: 24px;
}
.cloud-feature .achievement-text h4 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin: 0 0 var(--space-8) 0;
font-weight: 700;
}
.cloud-feature .achievement-text p {
color: var(--color-text-secondary);
font-size: var(--font-size-base);
margin: 0;
}
/* Responsive para timeline */
@media (max-width: 768px) {
.timeline-container::before {
left: 30px;
}
.timeline-item {
padding-left: 80px;
}
.marker-icon {
width: 60px;
height: 60px;
font-size: var(--font-size-xl);
}
.achievements,
.cloud-features {
grid-template-columns: 1fr;
gap: var(--space-16);
}
.timeline-card {
padding: var(--space-20);
}
}
/* ===== ESTRUCTURA NARRATIVA - EVOLUCIÓN ===== */
.narrative-structure {
margin: var(--space-48) 0;
}
.current-app-narrative,
.cloud-app-narrative {
background: white;
border-radius: var(--radius-lg);
padding: var(--space-40);
margin-bottom: var(--space-32);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
position: relative;
overflow: hidden;
}
.current-app-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--color-primary);
}
.cloud-app-narrative::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--color-secondary);
}
.app-header-narrative {
display: flex;
align-items: center;
gap: var(--space-16);
margin-bottom: var(--space-32);
padding-bottom: var(--space-24);
border-bottom: 1px solid var(--color-border);
}
.app-icon-large {
font-size: var(--font-size-3xl);
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
border-radius: 50%;
box-shadow: var(--shadow-md);
flex-shrink: 0;
}
.cloud-app-narrative .app-icon-large {
background: var(--color-secondary);
}
.app-header-narrative h2 {
color: var(--color-text);
font-size: var(--font-size-2xl);
margin: 0;
font-weight: 700;
flex: 1;
}
.status-badge-large {
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge-large.current {
background: var(--color-primary);
color: white;
}
.status-badge-large.future {
background: var(--color-secondary);
color: white;
animation: pulse 2s infinite;
}
.lead-text {
font-size: var(--font-size-lg);
color: var(--color-text);
line-height: 1.6;
margin-bottom: var(--space-32);
font-weight: 500;
}
.narrative-features {
margin-bottom: var(--space-40);
}
.narrative-feature {
display: flex;
gap: var(--space-20);
margin-bottom: var(--space-32);
padding: var(--space-24);
background: var(--color-surface);
border-radius: var(--radius-lg);
border-left: 4px solid var(--color-primary);
transition: all 0.3s ease;
}
.narrative-feature:hover {
transform: translateX(4px);
box-shadow: var(--shadow-md);
}
.feature-icon-narrative {
font-size: var(--font-size-2xl);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
border-radius: 50%;
box-shadow: var(--shadow-sm);
flex-shrink: 0;
}
.feature-content h4 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin: 0 0 var(--space-8) 0;
font-weight: 600;
}
.feature-content p {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.6;
margin: 0;
}
.clients-integrated {
margin: var(--space-40) 0;
padding: var(--space-32);
background: var(--color-surface);
border-radius: var(--radius-lg);
text-align: center;
}
.clients-integrated h3 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin-bottom: var(--space-24);
font-weight: var(--font-weight-bold);
}
.clients-logos {
display: flex;
justify-content: center;
gap: var(--space-32);
flex-wrap: wrap;
}
.client-name {
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: 600;
text-align: center;
}
.mockups-integrated {
margin: var(--space-40) 0;
padding: var(--space-32);
background: var(--color-surface);
border-radius: var(--radius-lg);
}
.carousel-item h3 {
color: var(--color-text);
font-size: var(--font-size-lg);
margin-bottom: var(--space-16);
text-align: center;
font-weight: var(--font-weight-bold);
}
.evolution-divider {
display: flex;
flex-direction: column;
align-items: center;
margin: var(--space-48) 0;
position: relative;
}
.evolution-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
position: relative;
}
.evolution-line::after {
content: '';
position: absolute;
right: 50%;
top: -6px;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid var(--color-secondary);
}
.evolution-text {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 var(--space-16);
color: var(--color-text);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn--large {
padding: var(--space-16) var(--space-32);
font-size: var(--font-size-lg);
font-weight: 600;
}
/* Responsive para estructura narrativa */
@media (max-width: 768px) {
.current-app-narrative,
.cloud-app-narrative {
padding: var(--space-24);
}
.app-header-narrative {
flex-direction: column;
text-align: center;
gap: var(--space-12);
}
.app-icon-large {
width: 60px;
height: 60px;
font-size: var(--font-size-2xl);
}
.narrative-feature {
flex-direction: column;
text-align: center;
gap: var(--space-16);
}
.feature-icon-narrative {
align-self: center;
}
.clients-logos {
flex-direction: column;
align-items: center;
}
.client-logo {
width: 80px;
height: 40px;
}
.client-item {
min-width: 100px;
}
}
/* ===== ESTILOS PARA EVOLUCIÓN ===== */
.evolution-description {
text-align: center;
font-size: var(--font-size-lg);
color: var(--color-text);
max-width: 800px;
margin: 0 auto var(--space-32) auto;
line-height: 1.6;
padding: 0 var(--space-16);
}
/* ===== MODAL DE ACCESO DIRECTO ===== */
.modal {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: var(--color-surface);
margin: auto;
padding: var(--space-32);
border-radius: var(--radius-lg);
width: 90%;
max-width: 600px;
position: relative;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
}
.modal-close {
color: var(--color-text-secondary);
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: var(--space-16);
right: var(--space-20);
transition: color var(--duration-fast) var(--ease-standard);
}
.modal-close:hover {
color: var(--color-primary);
}
.modal-content h2 {
color: var(--color-primary);
margin-bottom: var(--space-24);
text-align: center;
font-size: var(--font-size-2xl);
}
.access-info {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.access-item {
background: var(--color-secondary);
padding: var(--space-20);
border-radius: var(--radius-base);
border: 1px solid var(--color-border);
}
.access-item h3 {
color: var(--color-primary);
margin-bottom: var(--space-12);
font-size: var(--font-size-lg);
display: flex;
align-items: center;
}
.access-item h3 svg {
color: var(--color-primary);
flex-shrink: 0;
}
.credentials {
background: var(--color-surface);
padding: var(--space-16);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
margin-bottom: var(--space-12);
}
.credential-row {
margin-bottom: var(--space-8);
font-family: var(--font-family-mono);
}
.credential-row:last-child {
margin-bottom: 0;
}
.credential-row code {
background: var(--color-primary);
color: white;
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-sm);
font-weight: var(--font-weight-bold);
margin-left: var(--space-8);
}
.access-note {
color: var(--color-text);
font-weight: var(--font-weight-normal);
margin: 0 0 var(--space-12) 0;
font-size: var(--font-size-base);
}
.tech-requirements {
list-style: none;
padding: 0;
margin: 0;
}
.tech-requirements li {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.5;
margin-bottom: var(--space-8);
padding-left: var(--space-24);
position: relative;
}
.tech-requirements li:last-child {
margin-bottom: 0;
}
.tech-requirements li::before {
content: '◦';
color: var(--color-text-secondary);
position: absolute;
left: var(--space-8);
top: 0;
font-weight: normal;
font-size: var(--font-size-base);
}
.download-btn {
width: auto;
min-width: 200px;
justify-content: center;
margin-top: var(--space-16);
align-self: center;
}
/* Responsive para el modal */
@media (max-width: 768px) {
.modal-content {
width: 95%;
padding: var(--space-24);
}
.access-item {
padding: var(--space-16);
}
}
/* ===== MODAL DE ZOOM DE IMÁGENES ===== */
.image-zoom-content {
max-width: 90vw;
max-height: 90vh;
padding: var(--space-16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
border-radius: var(--radius-lg);
}
.image-zoom-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.zoomed-image {
max-width: 100%;
max-height: 80vh;
border-radius: var(--radius-base);
box-shadow: var(--shadow-lg);
background: transparent;
border: 1px solid var(--color-border);
object-fit: contain;
}
/* Responsive para el modal de zoom */
@media (max-width: 768px) {
.image-zoom-content {
max-width: 95vw;
max-height: 95vh;
padding: var(--space-12);
}
.zoomed-image {
max-height: 70vh;
}
}
/* ===== NOTIFICACIONES ===== */
.notification {
position: fixed;
top: var(--space-20);
right: var(--space-20);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
box-shadow: var(--shadow-lg);
z-index: 10001;
max-width: 400px;
animation: slideIn 0.3s ease-out;
}
.notification-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-16);
gap: var(--space-12);
}
.notification-message {
color: var(--color-text);
font-size: var(--font-size-sm);
line-height: 1.4;
flex: 1;
}
.notification-close {
background: none;
border: none;
color: var(--color-text-secondary);
font-size: var(--font-size-lg);
cursor: pointer;
padding: var(--space-4);
line-height: 1;
}
.notification-close:hover {
color: var(--color-primary);
}
.notification--success {
border-left: 4px solid var(--color-success);
}
.notification--error {
border-left: 4px solid var(--color-error);
}
.notification--info {
border-left: 4px solid var(--color-info);
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* ===== FIN DE ESTILOS ===== */