/* ═══════════════════════════════════════════════════════════════ 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; } /* ══════════════════════════════════════════════════════════════════ ██ TEMA: CORPORATIVO AZUL ██ Azul institucional + naranja cálido · Estilo corporativo · Profesional ██ Diagonal accents · Cards con sombras definidas · Tipografía bold ══════════════════════════════════════════════════════════════════ */ body.theme-corporativo { /* Primary palette — Corporate Blue */ --c-navy: #0F2A4A; --c-navy-light: #153760; --c-blue: #1A5FAB; --c-blue-mid: #2878CC; --c-steel: #3C8FD5; --c-steel-light: #6CB8E8; /* Accent — Corporate Orange */ --c-gold: #E8922E; --c-gold-light: #F5B041; --c-gold-dark: #C87A1A; /* Greys — warm neutral tint */ --c-grey-100: #F6F8FB; --c-grey-200: #EBF0F7; --c-grey-300: #D1DCEB; --c-grey-400: #8EA3B8; --c-grey-500: #5C7A94; --c-grey-600: #3A5670; /* Gradients */ --g-navy: linear-gradient(135deg, #0F2A4A 0%, #1A5FAB 100%); --g-gold: linear-gradient(135deg, #E8922E 0%, #F5B041 100%); --g-hero: linear-gradient(180deg, rgba(15,42,74,0.92) 0%, rgba(26,95,171,0.70) 50%, rgba(15,42,74,0.94) 100%); --g-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(26,95,171,0.03) 100%); /* Shadows — blue tint */ --shadow-sm: 0 2px 4px rgba(15,42,74,0.08); --shadow-md: 0 4px 14px rgba(15,42,74,0.10); --shadow-lg: 0 8px 28px rgba(15,42,74,0.12); --shadow-xl: 0 16px 48px rgba(15,42,74,0.15); --shadow-gold: 0 4px 20px rgba(232,146,46,0.30); /* Structure — corporate clean */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; } /* --- Corporativo: Header --- */ body.theme-corporativo .header { backdrop-filter: blur(12px); } body.theme-corporativo .header.scrolled { background: rgba(15,42,74,0.97); box-shadow: 0 4px 20px rgba(15,42,74,0.25); } body.theme-corporativo .header__whatsapp { background: #25D366; border-radius: var(--r-md); } body.theme-corporativo .header__logo-name { font-weight: 800; letter-spacing: 1.5px; } body.theme-corporativo .header__logo-tagline { color: var(--c-gold); letter-spacing: 0.5px; } /* --- Corporativo: Hero with diagonal accent --- */ body.theme-corporativo .hero__particle { background: rgba(232,146,46,0.25); } body.theme-corporativo .hero__badge { background: rgba(232,146,46,0.12); border: 1px solid rgba(232,146,46,0.30); border-radius: var(--r-md); backdrop-filter: blur(8px); } body.theme-corporativo .hero__badge i { color: #F5B041; } body.theme-corporativo .hero__title { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } body.theme-corporativo .hero__title .highlight { background: linear-gradient(135deg, #E8922E, #F5B041); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Diagonal stripe overlay at bottom of hero */ body.theme-corporativo .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient( -45deg, #E8922E, #E8922E 10px, #1A5FAB 10px, #1A5FAB 20px, #6CB8E8 20px, #6CB8E8 30px ); z-index: 2; } /* --- Corporativo: Buttons bold corporate style --- */ body.theme-corporativo .btn { border-radius: var(--r-md); font-weight: 600; letter-spacing: 0.5px; text-transform: none; } body.theme-corporativo .btn--primary { box-shadow: 0 4px 16px rgba(232,146,46,0.25); } body.theme-corporativo .btn--primary:hover { box-shadow: 0 6px 24px rgba(232,146,46,0.4); transform: translateY(-2px); } /* --- Corporativo: STRUCTURE — Services 3 columns --- */ body.theme-corporativo .services__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* --- Corporativo: STRUCTURE — Service cards with top gradient bar --- */ body.theme-corporativo .service-card { border-radius: var(--r-lg); border: 1px solid var(--c-grey-200); box-shadow: var(--shadow-md); padding: 2rem; position: relative; overflow: hidden; transition: all 0.35s ease; } body.theme-corporativo .service-card::before { height: 4px; background: linear-gradient(90deg, #1A5FAB, #E8922E, #F5B041); transform: scaleX(1); opacity: 0.7; border-radius: var(--r-lg) var(--r-lg) 0 0; } body.theme-corporativo .service-card:hover { transform: translateY(-8px); box-shadow: 0 12px 36px rgba(15,42,74,0.14); border-color: rgba(26,95,171,0.2); } body.theme-corporativo .service-card:hover::before { opacity: 1; } /* --- Corporativo: STRUCTURE — Service icons with corporate feel --- */ body.theme-corporativo .service-card__icon { width: 60px; height: 60px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(26,95,171,0.08), rgba(232,146,46,0.06)); font-size: 1.4rem; transition: all 0.35s ease; } body.theme-corporativo .service-card:hover .service-card__icon { background: var(--g-navy); color: #F5B041; transform: scale(1.08); box-shadow: 0 4px 16px rgba(15,42,74,0.2); } /* --- Corporativo: STRUCTURE — Advantages with orange accent --- */ body.theme-corporativo .advantage-card { border-radius: var(--r-lg); border-bottom: 3px solid rgba(232,146,46,0.4); transition: all 0.3s ease; } body.theme-corporativo .advantage-card::after { background: linear-gradient(90deg, #E8922E, #F5B041, transparent); height: 3px; bottom: -3px; opacity: 0; transition: opacity 0.3s ease; } body.theme-corporativo .advantage-card:hover { transform: translateY(-6px) scale(1.01); border-bottom-color: #E8922E; } body.theme-corporativo .advantage-card:hover::after { opacity: 1; } body.theme-corporativo .advantage-card__icon { border-radius: var(--r-md); width: 52px; height: 52px; background: rgba(232,146,46,0.10); transition: all 0.3s ease; } body.theme-corporativo .advantage-card:hover .advantage-card__icon { background: rgba(232,146,46,0.20); box-shadow: 0 4px 12px rgba(232,146,46,0.15); } /* --- Corporativo: STRUCTURE — Projects 2-column with tall images --- */ body.theme-corporativo .projects__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } body.theme-corporativo .project-card { border-radius: var(--r-lg); border: 1px solid var(--c-grey-200); box-shadow: var(--shadow-md); overflow: hidden; } body.theme-corporativo .project-card__image { height: 280px; } body.theme-corporativo .project-card:hover { box-shadow: 0 12px 36px rgba(15,42,74,0.12); transform: translateY(-4px); } body.theme-corporativo .project-card__category { background: rgba(232,146,46,0.12); color: #C87A1A; border-radius: var(--r-sm); font-weight: 600; } /* --- Corporativo: Stats with diagonal stripe accent --- */ body.theme-corporativo .stats { position: relative; } body.theme-corporativo .stats::before { background: rgba(232,146,46,0.04); } body.theme-corporativo .stats::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( -45deg, #E8922E, #E8922E 8px, #1A5FAB 8px, #1A5FAB 16px ); z-index: 1; } body.theme-corporativo .stats__grid { grid-template-columns: repeat(4, 1fr); } body.theme-corporativo .stats__item { border-radius: var(--r-lg); padding: 2rem 1.5rem; position: relative; } body.theme-corporativo .stats__item:hover { transform: translateY(-4px) scale(1.03); } body.theme-corporativo .stats__number { font-weight: 800; } /* --- Corporativo: About section --- */ body.theme-corporativo .about__image-wrapper img { border-radius: var(--r-lg); box-shadow: 0 12px 36px rgba(15,42,74,0.15); } body.theme-corporativo .about__image-accent { border-color: #E8922E; border-width: 3px; } body.theme-corporativo .about__experience-badge { border-color: rgba(232,146,46,0.4); background: rgba(15,42,74,0.9); backdrop-filter: blur(8px); border-radius: var(--r-lg); } body.theme-corporativo .about__tagline { border-left-color: #E8922E; background: rgba(232,146,46,0.05); border-radius: 0 var(--r-md) var(--r-md) 0; } body.theme-corporativo .about__feature i { color: #E8922E; } /* --- Corporativo: Partners — clean corporate --- */ body.theme-corporativo .partners { background: var(--c-grey-100); } /* --- Corporativo: CTA section with diagonal accent --- */ body.theme-corporativo .home-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( -45deg, #E8922E, #E8922E 8px, #6CB8E8 8px, #6CB8E8 16px, #1A5FAB 16px, #1A5FAB 24px ); z-index: 1; } /* --- Corporativo: Footer dark corporate --- */ body.theme-corporativo .footer { background: linear-gradient(180deg, #0F2A4A, #091B32); } body.theme-corporativo .footer__heading { position: relative; padding-bottom: 10px; } body.theme-corporativo .footer__heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: linear-gradient(90deg, #E8922E, #F5B041); border-radius: 2px; } body.theme-corporativo .footer__bottom { border-top-color: rgba(232,146,46,0.15); } /* --- Corporativo: Page header with diagonal bar --- */ body.theme-corporativo .page-header { position: relative; overflow: hidden; } body.theme-corporativo .page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: repeating-linear-gradient( -45deg, #E8922E, #E8922E 10px, #1A5FAB 10px, #1A5FAB 20px, #6CB8E8 20px, #6CB8E8 30px ); z-index: 2; } /* --- Corporativo: Projects filter --- */ body.theme-corporativo .projects__filter { border-radius: var(--r-md); } /* --- Corporativo: Section labels with orange line --- */ body.theme-corporativo .section__label-line { background: linear-gradient(90deg, #E8922E, #F5B041); } /* --- Corporativo: Responsive — Services 2col on tablet --- */ @media (max-width: 900px) { body.theme-corporativo .services__grid { grid-template-columns: repeat(2, 1fr); } body.theme-corporativo .projects__grid { grid-template-columns: 1fr; } body.theme-corporativo .stats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { body.theme-corporativo .services__grid { grid-template-columns: 1fr; } body.theme-corporativo .stats__grid { grid-template-columns: 1fr; } }