/* ═══════════════════════════════════════════════════════════════ INARQ — Theme Overrides (Design + Structure) El tema "clasico" usa los valores por defecto de :root en styles.css. Cada tema alternativo se aplica con una clase en . ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ ██ TEMA: MODERNO ESMERALDA ██ Paleta esmeralda + ámbar · Bordes suaves · Iconos circulares ██ Grid 2-col en servicios · Cards con borde izquierdo ══════════════════════════════════════════════════════════════════ */ body.theme-esmeralda { /* Primary palette */ --c-navy: #0A2E1F; --c-navy-light: #0F3D2A; --c-blue: #145A3A; --c-blue-mid: #1B7A50; --c-steel: #2D8B5F; --c-steel-light: #4AAF7A; /* Accent */ --c-gold: #E8A838; --c-gold-light: #F0C46A; --c-gold-dark: #C88E2A; /* Gradients */ --g-navy: linear-gradient(135deg, #0A2E1F 0%, #145A3A 100%); --g-gold: linear-gradient(135deg, #E8A838 0%, #F0C46A 100%); --g-hero: linear-gradient(180deg, rgba(10,46,31,0.88) 0%, rgba(20,90,58,0.72) 50%, rgba(10,46,31,0.92) 100%); --g-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(10,46,31,0.03) 100%); /* Shadows with green tint */ --shadow-sm: 0 1px 3px rgba(10,46,31,0.08); --shadow-md: 0 4px 12px rgba(10,46,31,0.1); --shadow-lg: 0 8px 30px rgba(10,46,31,0.12); --shadow-xl: 0 16px 50px rgba(10,46,31,0.15); --shadow-gold: 0 4px 20px rgba(232,168,56,0.3); /* Structure: wider radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; } /* --- Esmeralda: Header --- */ body.theme-esmeralda .header.scrolled { background: rgba(10,46,31,0.97); } body.theme-esmeralda .header__whatsapp { background: #25D366; } /* --- Esmeralda: Hero particles & badge --- */ body.theme-esmeralda .hero__particle { background: rgba(232,168,56,0.3); } body.theme-esmeralda .hero__badge { background: rgba(232,168,56,0.15); border-color: rgba(232,168,56,0.3); } /* --- Esmeralda: STRUCTURE — Services grid 2 columns --- */ body.theme-esmeralda .services__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } /* --- Esmeralda: STRUCTURE — Service cards with left accent border --- */ body.theme-esmeralda .service-card { border-left: 4px solid var(--c-gold); border-radius: 0 var(--r-xl) var(--r-xl) 0; padding-left: 2rem; } body.theme-esmeralda .service-card::before { display: none; /* remove top bar - we use left border */ } /* --- Esmeralda: STRUCTURE — Circular service icons --- */ body.theme-esmeralda .service-card__icon { border-radius: 50%; width: 64px; height: 64px; background: rgba(20,90,58,0.1); } body.theme-esmeralda .service-card:hover .service-card__icon { background: var(--g-navy); color: var(--c-gold); } /* --- Esmeralda: STRUCTURE — Advantage cards with left accent border --- */ body.theme-esmeralda .advantage-card { border-left: 3px solid rgba(232,168,56,0.5); border-radius: 0 var(--r-lg) var(--r-lg) 0; } body.theme-esmeralda .advantage-card::after { display: none; } body.theme-esmeralda .advantage-card__icon { border-radius: 50%; width: 56px; height: 56px; } /* --- Esmeralda: STRUCTURE — Projects single column with larger image --- */ body.theme-esmeralda .projects__grid { grid-template-columns: 1fr; max-width: 800px; margin-left: auto; margin-right: auto; } body.theme-esmeralda .project-card__image { height: 340px; } /* --- Esmeralda: STRUCTURE — Stats in 2 rows of 2 --- */ body.theme-esmeralda .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } body.theme-esmeralda .stats__item { border-radius: var(--r-xl); padding: 2rem; } /* --- Esmeralda: About — reversed image (right side) --- */ body.theme-esmeralda .about__container { direction: rtl; } body.theme-esmeralda .about__container > * { direction: ltr; } body.theme-esmeralda .about__image-accent { border-color: var(--c-gold); left: -16px; right: auto; } body.theme-esmeralda .about__experience-badge { border-color: rgba(232,168,56,0.3); right: 28px; left: auto; } /* --- Esmeralda: STRUCTURE — Buttons pill-shaped --- */ body.theme-esmeralda .btn { border-radius: 50px; } body.theme-esmeralda .projects__filter { border-radius: var(--r-md); } /* --- Esmeralda: STRUCTURE — Footer columns 4 equal --- */ body.theme-esmeralda .footer__container { gap: 2rem; } body.theme-esmeralda .stats::before { background: rgba(232,168,56,0.05); } /* ══════════════════════════════════════════════════════════════════ ██ TEMA: MIDNIGHT LUXE ██ Charcoal oscuro + rosa dorado · Glassmorphism · Cards flotantes ██ Grid servicios con tarjetas elevadas · Iconos con glow ══════════════════════════════════════════════════════════════════ */ body.theme-midnight { /* Primary palette */ --c-navy: #1A1A2E; --c-navy-light: #222240; --c-blue: #2D2D50; --c-blue-mid: #3D3D6B; --c-steel: #4A4A7A; --c-steel-light: #6A6AAA; /* Accent — Rose Gold */ --c-gold: #E8A0BF; --c-gold-light: #F0C0D8; --c-gold-dark: #C87898; /* Greys */ --c-grey-100: #F5F3F7; --c-grey-200: #EBE8F0; --c-grey-300: #D5D0E0; --c-grey-400: #9B94B0; --c-grey-500: #6B6480; --c-grey-600: #4A4560; /* Gradients */ --g-navy: linear-gradient(135deg, #1A1A2E 0%, #2D2D50 50%, #16213E 100%); --g-gold: linear-gradient(135deg, #E8A0BF 0%, #F0C0D8 100%); --g-hero: linear-gradient(180deg, rgba(26,26,46,0.92) 0%, rgba(45,45,80,0.75) 50%, rgba(26,26,46,0.95) 100%); --g-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(26,26,46,0.04) 100%); /* Shadows — purple tint */ --shadow-sm: 0 1px 4px rgba(26,26,46,0.1); --shadow-md: 0 4px 16px rgba(26,26,46,0.12); --shadow-lg: 0 8px 32px rgba(26,26,46,0.15); --shadow-xl: 0 20px 60px rgba(26,26,46,0.18); --shadow-gold: 0 4px 24px rgba(232,160,191,0.35); /* Structure — extra round */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; } /* --- Midnight: Header glass effect --- */ body.theme-midnight .header { backdrop-filter: blur(16px); } body.theme-midnight .header.scrolled { background: rgba(26,26,46,0.92); backdrop-filter: blur(20px); } body.theme-midnight .header__whatsapp { background: #25D366; } /* --- Midnight: Hero --- */ body.theme-midnight .hero__particle { background: rgba(232,160,191,0.25); } body.theme-midnight .hero__badge { background: rgba(232,160,191,0.12); border-color: rgba(232,160,191,0.25); backdrop-filter: blur(12px); } body.theme-midnight .hero__title .highlight { background: linear-gradient(135deg, #E8A0BF, #F0C0D8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Midnight: STRUCTURE — Services section dark background --- */ body.theme-midnight .services { background: #F5F3F7; } /* --- Midnight: STRUCTURE — Service cards glassmorphism --- */ body.theme-midnight .service-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border: 1px solid rgba(232,160,191,0.15); border-radius: var(--r-xl); box-shadow: 0 8px 32px rgba(26,26,46,0.06); padding: 2.5rem; } body.theme-midnight .service-card::before { height: 3px; background: linear-gradient(90deg, #E8A0BF, #F0C0D8, transparent); transform: scaleX(1); opacity: 0.6; } body.theme-midnight .service-card:hover { transform: translateY(-12px); box-shadow: 0 20px 60px rgba(26,26,46,0.12); border-color: rgba(232,160,191,0.3); } body.theme-midnight .service-card:hover::before { opacity: 1; } /* --- Midnight: STRUCTURE — Service icons with glow --- */ body.theme-midnight .service-card__icon { width: 68px; height: 68px; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(232,160,191,0.1), rgba(45,45,80,0.08)); box-shadow: 0 4px 16px rgba(232,160,191,0.12); font-size: 1.6rem; } body.theme-midnight .service-card:hover .service-card__icon { background: linear-gradient(135deg, #1A1A2E, #2D2D50); color: #E8A0BF; box-shadow: 0 4px 24px rgba(232,160,191,0.3); transform: scale(1.1) rotate(-5deg); } /* --- Midnight: STRUCTURE — Advantages with glassmorphism --- */ body.theme-midnight .advantage-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(232,160,191,0.12); backdrop-filter: blur(8px); border-radius: var(--r-xl); } body.theme-midnight .advantage-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-8px) scale(1.02); border-color: rgba(232,160,191,0.25); box-shadow: 0 12px 40px rgba(232,160,191,0.1); } body.theme-midnight .advantage-card::after { background: linear-gradient(90deg, #E8A0BF, transparent); } body.theme-midnight .advantage-card__icon { background: rgba(232,160,191,0.15); border-radius: var(--r-xl); box-shadow: 0 4px 12px rgba(232,160,191,0.08); } body.theme-midnight .advantage-card:hover .advantage-card__icon { background: rgba(232,160,191,0.25); box-shadow: 0 4px 20px rgba(232,160,191,0.2); } /* --- Midnight: STRUCTURE — Projects 3-col grid --- */ body.theme-midnight .projects__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } body.theme-midnight .project-card { border-radius: var(--r-xl); border: 1px solid rgba(232,160,191,0.1); } body.theme-midnight .project-card__image { height: 220px; } body.theme-midnight .project-card:hover { box-shadow: 0 16px 40px rgba(26,26,46,0.15); } body.theme-midnight .project-card__category { background: rgba(232,160,191,0.12); color: #C87898; } /* --- Midnight: STRUCTURE — Stats with glassmorphism --- */ body.theme-midnight .stats__item { backdrop-filter: blur(8px); background: rgba(255,255,255,0.06); border: 1px solid rgba(232,160,191,0.1); border-radius: var(--r-xl); padding: 2rem; } body.theme-midnight .stats__item:hover { background: rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(232,160,191,0.1); } body.theme-midnight .stats::before { background: rgba(232,160,191,0.05); } /* --- Midnight: STRUCTURE — About with glass overlay on image --- */ body.theme-midnight .about__image-wrapper img { border-radius: var(--r-xl); box-shadow: 0 12px 40px rgba(26,26,46,0.2); } body.theme-midnight .about__image-accent { border-color: rgba(232,160,191,0.3); border-width: 2px; } body.theme-midnight .about__experience-badge { border-color: rgba(232,160,191,0.3); backdrop-filter: blur(10px); border-radius: var(--r-xl); } body.theme-midnight .about__tagline { border-left-color: #E8A0BF; background: rgba(232,160,191,0.06); } body.theme-midnight .about__feature i { color: #E8A0BF; } /* --- Midnight: STRUCTURE — Buttons luxe style --- */ body.theme-midnight .btn--primary { border-radius: var(--r-2xl); letter-spacing: 0.5px; } body.theme-midnight .btn--outline { border-radius: var(--r-2xl); } body.theme-midnight .projects__filter { border-radius: var(--r-2xl); } /* --- Midnight: Footer dark --- */ body.theme-midnight .footer { background: linear-gradient(180deg, #1A1A2E, #12121F); } /* --- Midnight: Partners --- */ body.theme-midnight .partners { background: #F5F3F7; } /* ══════════════════════════════════════════════════════════════════ ██ TEMA: OCÉANO ÁRTICO ██ Azul profundo + plata helada · Bordes afilados · Estructura compacta ██ Grid 4-col servicios · Cards con borde superior + sin sombra ══════════════════════════════════════════════════════════════════ */ body.theme-artico { /* Primary palette */ --c-navy: #0D2137; --c-navy-light: #132D48; --c-blue: #1A4971; --c-blue-mid: #2171A8; --c-steel: #3A8EC2; --c-steel-light: #5AAED8; /* Accent — Silver/Ice */ --c-gold: #78B4CC; --c-gold-light: #A8D4E6; --c-gold-dark: #5A98B2; /* Greys — cool blue tint */ --c-grey-100: #F3F7FA; --c-grey-200: #E6EEF4; --c-grey-300: #C8D8E4; --c-grey-400: #8AA4B8; --c-grey-500: #5A7A90; --c-grey-600: #3A5A70; /* Gradients */ --g-navy: linear-gradient(135deg, #0D2137 0%, #1A4971 100%); --g-gold: linear-gradient(135deg, #78B4CC 0%, #A8D4E6 100%); --g-hero: linear-gradient(180deg, rgba(13,33,55,0.90) 0%, rgba(26,73,113,0.70) 50%, rgba(13,33,55,0.93) 100%); --g-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(13,33,55,0.02) 100%); /* Shadows — minimal */ --shadow-sm: 0 1px 2px rgba(13,33,55,0.05); --shadow-md: 0 2px 6px rgba(13,33,55,0.06); --shadow-lg: 0 4px 12px rgba(13,33,55,0.08); --shadow-xl: 0 8px 24px rgba(13,33,55,0.10); --shadow-gold: 0 2px 10px rgba(120,180,204,0.2); /* Structure — Sharp & compact */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; --r-2xl: 8px; } /* --- Ártico: Header --- */ body.theme-artico .header { border-bottom: 1px solid rgba(120,180,204,0.1); } body.theme-artico .header.scrolled { background: rgba(13,33,55,0.98); border-bottom-color: rgba(120,180,204,0.15); } body.theme-artico .header__whatsapp { background: #25D366; border-radius: 4px; } body.theme-artico .header__logo-icon { border-radius: 3px; } /* --- Ártico: Hero --- */ body.theme-artico .hero__particle { background: rgba(120,180,204,0.3); } body.theme-artico .hero__badge { background: rgba(120,180,204,0.12); border-color: rgba(120,180,204,0.3); border-radius: 3px; } body.theme-artico .hero__title .highlight { background: linear-gradient(135deg, #78B4CC, #A8D4E6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- Ártico: STRUCTURE — Buttons sharp --- */ body.theme-artico .btn { border-radius: 3px; } body.theme-artico .btn--primary { text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.82rem; } /* --- Ártico: STRUCTURE — Services 4 columns compact --- */ body.theme-artico .services__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } /* --- Ártico: STRUCTURE — Service cards — flat, bordered, top accent --- */ body.theme-artico .service-card { border-radius: 4px; border: 1px solid var(--c-grey-300); box-shadow: none; padding: 1.5rem; border-top: 3px solid var(--c-blue-mid); background: var(--c-white); } body.theme-artico .service-card::before { display: none; } body.theme-artico .service-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(13,33,55,0.08); border-top-color: var(--c-gold); } /* --- Ártico: STRUCTURE — Service icons square & small --- */ body.theme-artico .service-card__icon { width: 44px; height: 44px; border-radius: 3px; font-size: 1.1rem; background: rgba(26,73,113,0.08); } body.theme-artico .service-card:hover .service-card__icon { background: var(--g-navy); color: var(--c-gold); border-radius: 3px; } /* --- Ártico: STRUCTURE — Service text tighter --- */ body.theme-artico .service-card__title { font-size: 1rem; margin-bottom: 0.35rem; } body.theme-artico .service-card__desc { font-size: 0.85rem; line-height: 1.5; } /* --- Ártico: STRUCTURE — Advantages 4-col compact --- */ body.theme-artico .advantages__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } body.theme-artico .advantage-card { border-radius: 4px; padding: 1.5rem; border-top: 2px solid rgba(120,180,204,0.4); } body.theme-artico .advantage-card::after { display: none; } body.theme-artico .advantage-card:hover { transform: translateY(-3px); border-top-color: #78B4CC; } body.theme-artico .advantage-card__icon { width: 40px; height: 40px; border-radius: 3px; font-size: 1rem; margin-bottom: 0.8rem; } /* --- Ártico: STRUCTURE — Projects 3-col compact --- */ body.theme-artico .projects__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } body.theme-artico .project-card { border-radius: 4px; border: 1px solid var(--c-grey-300); box-shadow: none; } body.theme-artico .project-card:hover { box-shadow: 0 4px 12px rgba(13,33,55,0.08); } body.theme-artico .project-card__image { height: 200px; } body.theme-artico .project-card__category { border-radius: 3px; background: rgba(120,180,204,0.1); color: #5A98B2; } /* --- Ártico: STRUCTURE — Stats tight horizontal bar --- */ body.theme-artico .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } body.theme-artico .stats__item { border-radius: 0; border-right: 1px solid rgba(255,255,255,0.08); padding: 2rem 1.5rem; background: transparent; } body.theme-artico .stats__item:last-child { border-right: none; } body.theme-artico .stats__item:hover { background: rgba(255,255,255,0.04); transform: none; } body.theme-artico .stats__number { font-size: 2.4rem; } body.theme-artico .stats::before { background: rgba(120,180,204,0.05); } /* --- Ártico: STRUCTURE — About tighter layout --- */ body.theme-artico .about__container { gap: 2.5rem; } body.theme-artico .about__image-wrapper img { border-radius: 4px; } body.theme-artico .about__image-accent { border-color: var(--c-gold); border-radius: 4px; border-width: 2px; } body.theme-artico .about__experience-badge { border-color: rgba(120,180,204,0.3); border-radius: 4px; } body.theme-artico .about__tagline { border-left-color: #78B4CC; background: rgba(120,180,204,0.06); border-radius: 0 3px 3px 0; } body.theme-artico .about__feature i { color: #78B4CC; } body.theme-artico .about__image-wrapper { border-radius: 4px; } /* --- Ártico: STRUCTURE — Filters & Partners --- */ body.theme-artico .projects__filter { border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.78rem; } body.theme-artico .partners { background: #F3F7FA; } /* --- Ártico: Footer --- */ body.theme-artico .footer { background: linear-gradient(180deg, #0D2137, #091825); } body.theme-artico .footer__col { border-right: 1px solid rgba(255,255,255,0.06); padding-right: 1.5rem; } body.theme-artico .footer__col:last-child { border-right: none; } /* --- Ártico: Page headers sharp --- */ body.theme-artico .page-header { border-bottom: 3px solid #78B4CC; }