/* ═══════════════════════════════════════════════════════════════ INARQ PROYECCIONES DEL PERÚ S.A.C. Design System & Complete Stylesheet ═══════════════════════════════════════════════════════════════ */ /* ── CSS Custom Properties ── */ :root { /* Colors */ --c-navy: #0B1D3A; --c-navy-light: #102A52; --c-blue: #1A3A6B; --c-blue-mid: #2A5298; --c-steel: #3E5C8A; --c-steel-light: #5A7DAF; --c-gold: #C9A84C; --c-gold-light: #DFCA82; --c-gold-dark: #A68B3A; --c-grey-100: #F7F8FA; --c-grey-200: #EEF0F4; --c-grey-300: #D5DAE3; --c-grey-400: #9BA5B7; --c-grey-500: #6B7A90; --c-grey-600: #4A566D; --c-white: #FFFFFF; --c-dark: #0A0F1A; --c-success: #22C55E; --c-error: #EF4444; /* Gradients */ --g-navy: linear-gradient(135deg, #0B1D3A 0%, #1A3A6B 100%); --g-gold: linear-gradient(135deg, #C9A84C 0%, #DFCA82 100%); --g-hero: linear-gradient(180deg, rgba(11, 29, 58, 0.85) 0%, rgba(26, 58, 107, 0.7) 50%, rgba(11, 29, 58, 0.9) 100%); --g-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(11, 29, 58, 0.03) 100%); /* Typography */ --f-heading: 'Outfit', sans-serif; --f-body: 'Inter', sans-serif; /* Spacing */ --s-xs: 0.25rem; --s-sm: 0.5rem; --s-md: 1rem; --s-lg: 1.5rem; --s-xl: 2rem; --s-2xl: 3rem; --s-3xl: 4rem; --s-4xl: 6rem; --s-5xl: 8rem; /* Border Radius */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 50%; /* Shadows */ --shadow-sm: 0 1px 3px rgba(11, 29, 58, 0.08); --shadow-md: 0 4px 12px rgba(11, 29, 58, 0.1); --shadow-lg: 0 8px 30px rgba(11, 29, 58, 0.12); --shadow-xl: 0 16px 50px rgba(11, 29, 58, 0.15); --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.3); /* Transitions */ --t-fast: 0.2s ease; --t-normal: 0.3s ease; --t-slow: 0.5s ease; --t-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --max-width: 1200px; --header-h: 80px; } /* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); font-size: 16px; } body { font-family: var(--f-body); font-weight: 400; line-height: 1.7; color: var(--c-grey-600); background: var(--c-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--t-fast); } ul { list-style: none; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--s-xl); } .section { padding: var(--s-5xl) 0; position: relative; } /* ── Section Headers ── */ .section__label { display: flex; align-items: center; gap: var(--s-sm); font-family: var(--f-heading); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; color: var(--c-gold); margin-bottom: var(--s-md); } .section__label--light { color: var(--c-gold-light); } .section__label-line { display: inline-block; width: 32px; height: 2px; background: var(--c-gold); } .section__label--light .section__label-line { background: var(--c-gold-light); } .section__title { font-family: var(--f-heading); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--c-navy); line-height: 1.2; margin-bottom: var(--s-md); } .section__title--light { color: var(--c-white); } .section__description { font-size: 1.05rem; color: var(--c-grey-500); max-width: 640px; line-height: 1.8; } .section__description--light { color: rgba(255, 255, 255, 0.7); } .section__header { text-align: center; margin-bottom: var(--s-3xl); } .section__header .section__label { justify-content: center; } .section__header .section__description { margin: 0 auto; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: var(--s-sm); font-family: var(--f-heading); font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: all var(--t-normal); text-align: center; white-space: nowrap; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.5s ease; } .btn:hover::before { left: 100%; } .btn--primary { background: var(--g-gold); color: var(--c-navy); border-color: var(--c-gold); } .btn--primary:hover { background: var(--c-gold-dark); border-color: var(--c-gold-dark); transform: translateY(-2px); box-shadow: var(--shadow-gold); } .btn--outline { background: transparent; color: var(--c-white); border-color: rgba(255, 255, 255, 0.4); } .btn--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--c-white); transform: translateY(-2px); } .btn--sm { padding: 0.5rem 1.2rem; font-size: 0.85rem; } .btn--md { padding: 0.7rem 1.8rem; } .btn--lg { padding: 0.9rem 2.2rem; font-size: 1rem; } .btn--full { width: 100%; justify-content: center; } /* ── Animations ── */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } 60% { transform: translateY(-3px); } } /* ═══════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); transition: all var(--t-normal); background: transparent; } .header.scrolled { background: rgba(11, 29, 58, 0.97); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15); height: 68px; } .header__container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__logo { display: flex; align-items: center; gap: var(--s-sm); z-index: 10; } .header__logo-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--g-gold); border-radius: var(--r-md); color: var(--c-navy); font-size: 1.2rem; transition: transform var(--t-spring); } .header__logo:hover .header__logo-icon { transform: rotate(-15deg) scale(1.05); } .header__logo-text { display: flex; flex-direction: column; } .header__logo-name { font-family: var(--f-heading); font-weight: 800; font-size: 1.3rem; color: var(--c-white); letter-spacing: 2px; line-height: 1.1; } .header__logo-tagline { font-size: 0.65rem; color: var(--c-gold-light); letter-spacing: 1px; text-transform: uppercase; font-weight: 500; } .header__nav-list { display: flex; gap: var(--s-xl); } .header__nav-list a { font-family: var(--f-heading); font-weight: 500; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.5px; position: relative; padding: var(--s-xs) 0; transition: color var(--t-fast); } .header__nav-list a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--c-gold); transition: width var(--t-normal); } .header__nav-list a:hover, .header__nav-list a.active { color: var(--c-white); } .header__nav-list a:hover::after, .header__nav-list a.active::after { width: 100%; } .header__actions { display: flex; align-items: center; gap: var(--s-md); z-index: 10; } .header__cta i { font-size: 0.8rem; } .header__whatsapp { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #25D366; color: var(--c-white); border-radius: var(--r-full); font-size: 1.1rem; transition: all var(--t-normal); } .header__whatsapp:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); } /* Hamburger */ .header__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 10; } .header__toggle span { display: block; width: 24px; height: 2px; background: var(--c-white); border-radius: 2px; transition: all var(--t-normal); } .header__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .header__toggle.active span:nth-child(2) { opacity: 0; } .header__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.05); animation: heroZoom 20s ease infinite alternate; } @keyframes heroZoom { 0% { transform: scale(1.05); } 100% { transform: scale(1.12); } } .hero__overlay { position: absolute; inset: 0; background: var(--g-hero); } .hero__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero__particle { position: absolute; width: 2px; height: 2px; background: rgba(201, 168, 76, 0.3); border-radius: 50%; animation: float 6s ease-in-out infinite; } .hero__content { position: relative; z-index: 2; text-align: center; padding-top: var(--header-h); } .hero__badge { display: inline-flex; align-items: center; gap: var(--s-sm); background: rgba(201, 168, 76, 0.15); border: 1px solid rgba(201, 168, 76, 0.3); padding: var(--s-sm) var(--s-lg); border-radius: var(--r-2xl); font-size: 0.8rem; font-weight: 500; color: var(--c-gold-light); margin-bottom: var(--s-xl); backdrop-filter: blur(8px); } .hero__badge i { font-size: 0.9rem; } .hero__title { font-family: var(--f-heading); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--c-white); line-height: 1.15; max-width: 900px; margin: 0 auto var(--s-lg); letter-spacing: -0.5px; } .hero__title .highlight { background: var(--g-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(255, 255, 255, 0.75); max-width: 680px; margin: 0 auto var(--s-2xl); line-height: 1.8; } .hero__cta { display: flex; align-items: center; justify-content: center; gap: var(--s-md); flex-wrap: wrap; } .hero__scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; animation: bounce 2s ease infinite; } .hero__scroll-indicator i { font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════════ STATS / INDICADORES ═══════════════════════════════════════════════════════════════ */ .stats { background: var(--g-navy); padding: var(--s-3xl) 0; position: relative; overflow: hidden; } .stats::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(201, 168, 76, 0.05); pointer-events: none; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-xl); } .stats__item { text-align: center; padding: var(--s-xl); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); transition: all var(--t-normal); } .stats__item:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-4px); } .stats__number { font-family: var(--f-heading); font-weight: 800; font-size: 2.8rem; color: var(--c-gold); line-height: 1; margin-bottom: var(--s-xs); } .stats__label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } /* ═══════════════════════════════════════════════════════════════ ABOUT / NOSOTROS ═══════════════════════════════════════════════════════════════ */ .about { background: var(--c-white); } .about__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4xl); align-items: center; } .about__image-wrapper { position: relative; border-radius: var(--r-xl); overflow: visible; } .about__image-wrapper img { width: 100%; height: 450px; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-xl); } .about__image-accent { position: absolute; bottom: -16px; right: -16px; width: 60%; height: 60%; border: 3px solid var(--c-gold); border-radius: var(--r-xl); z-index: -1; opacity: 0.4; } .about__experience-badge { position: absolute; bottom: -20px; left: 28px; background: var(--g-navy); color: var(--c-white); padding: var(--s-lg) var(--s-xl); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--s-md); border: 1px solid rgba(201, 168, 76, 0.3); } .about__experience-number { font-family: var(--f-heading); font-weight: 800; font-size: 2.2rem; color: var(--c-gold); line-height: 1; } .about__experience-text { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 1.3; color: rgba(255, 255, 255, 0.8); } .about__text-col p { margin-bottom: var(--s-md); color: var(--c-grey-500); font-size: 1rem; line-height: 1.8; } .about__tagline { font-family: var(--f-heading); font-weight: 600; font-size: 1.2rem; color: var(--c-gold-dark); padding: var(--s-lg); padding-left: var(--s-xl); border-left: 4px solid var(--c-gold); background: rgba(201, 168, 76, 0.06); border-radius: 0 var(--r-md) var(--r-md) 0; margin: var(--s-xl) 0; font-style: italic; } .about__features { display: flex; flex-wrap: wrap; gap: var(--s-lg); margin-top: var(--s-lg); } .about__feature { display: flex; align-items: center; gap: var(--s-sm); font-weight: 500; font-size: 0.9rem; color: var(--c-navy); } .about__feature i { color: var(--c-gold); font-size: 1rem; } /* ═══════════════════════════════════════════════════════════════ SERVICES / SERVICIOS ═══════════════════════════════════════════════════════════════ */ .services { background: var(--c-grey-100); } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); } .service-card { background: var(--c-white); border-radius: var(--r-xl); padding: var(--s-2xl); position: relative; overflow: hidden; transition: all var(--t-normal); border: 1px solid var(--c-grey-200); cursor: default; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--g-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-normal); } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; } .service-card:hover::before { transform: scaleX(1); } .service-card__icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(26, 58, 107, 0.06); border-radius: var(--r-lg); margin-bottom: var(--s-lg); font-size: 1.5rem; color: var(--c-blue); transition: all var(--t-normal); } .service-card:hover .service-card__icon { background: var(--g-navy); color: var(--c-gold); transform: scale(1.05); } .service-card__title { font-family: var(--f-heading); font-weight: 700; font-size: 1.15rem; color: var(--c-navy); margin-bottom: var(--s-sm); } .service-card__desc { font-size: 0.92rem; color: var(--c-grey-500); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════ ADVANTAGES / POR QUÉ ELEGIRNOS ═══════════════════════════════════════════════════════════════ */ .advantages { background: var(--g-navy); overflow: hidden; } .advantages__bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(42, 82, 152, 0.15) 0%, transparent 50%); pointer-events: none; } .advantages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); position: relative; z-index: 1; } .advantage-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-xl); padding: var(--s-2xl); transition: all var(--t-normal); position: relative; overflow: hidden; } .advantage-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--g-gold); transform: scaleX(0); transform-origin: center; transition: transform var(--t-normal); } .advantage-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-6px); border-color: rgba(201, 168, 76, 0.2); } .advantage-card:hover::after { transform: scaleX(1); } .advantage-card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(201, 168, 76, 0.12); border-radius: var(--r-lg); margin-bottom: var(--s-lg); color: var(--c-gold); font-size: 1.3rem; transition: all var(--t-normal); } .advantage-card:hover .advantage-card__icon { background: rgba(201, 168, 76, 0.2); transform: scale(1.08); } .advantage-card__title { font-family: var(--f-heading); font-weight: 600; font-size: 1.1rem; color: var(--c-white); margin-bottom: var(--s-sm); } .advantage-card__desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════ PROJECTS / PROYECTOS ═══════════════════════════════════════════════════════════════ */ .projects { background: var(--c-white); } .projects__filters { display: flex; justify-content: center; gap: var(--s-sm); margin-bottom: var(--s-2xl); flex-wrap: wrap; } .projects__filter { font-family: var(--f-heading); font-weight: 500; font-size: 0.85rem; padding: var(--s-sm) var(--s-lg); border: 1px solid var(--c-grey-300); border-radius: var(--r-2xl); background: transparent; color: var(--c-grey-500); cursor: pointer; transition: all var(--t-normal); text-transform: uppercase; letter-spacing: 0.5px; } .projects__filter:hover { border-color: var(--c-blue); color: var(--c-blue); } .projects__filter.active { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); } .projects__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-xl); } .project-card { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--c-grey-100); border: 1px solid var(--c-grey-200); transition: all var(--t-normal); cursor: pointer; } .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } .project-card__image { width: 100%; height: 280px; overflow: hidden; } .project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .project-card:hover .project-card__image img { transform: scale(1.08); } .project-card__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 280px; background: linear-gradient(180deg, transparent 30%, rgba(11, 29, 58, 0.8) 100%); opacity: 0; transition: opacity var(--t-normal); display: flex; align-items: flex-end; padding: var(--s-xl); } .project-card:hover .project-card__overlay { opacity: 1; } .project-card__overlay-btn { display: inline-flex; align-items: center; gap: var(--s-sm); font-family: var(--f-heading); font-weight: 600; font-size: 0.85rem; color: var(--c-white); background: rgba(201, 168, 76, 0.9); padding: var(--s-sm) var(--s-lg); border-radius: var(--r-md); transition: background var(--t-fast); } .project-card__overlay-btn:hover { background: var(--c-gold); } .project-card__body { padding: var(--s-lg) var(--s-xl); } .project-card__category { display: inline-block; font-family: var(--f-heading); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c-gold-dark); background: rgba(201, 168, 76, 0.1); padding: 3px 12px; border-radius: var(--r-2xl); margin-bottom: var(--s-sm); } .project-card__title { font-family: var(--f-heading); font-weight: 700; font-size: 1.15rem; color: var(--c-navy); margin-bottom: var(--s-xs); } .project-card__desc { font-size: 0.88rem; color: var(--c-grey-500); margin-bottom: var(--s-sm); line-height: 1.6; } .project-card__location { font-size: 0.8rem; color: var(--c-grey-400); display: flex; align-items: center; gap: 4px; } .project-card__location i { font-size: 0.75rem; color: var(--c-gold); } /* ═══════════════════════════════════════════════════════════════ PARTNERS / SOCIOS ESTRATÉGICOS ═══════════════════════════════════════════════════════════════ */ .partners { background: var(--c-grey-100); } .partners__carousel { overflow: hidden; padding: var(--s-xl) 0; } .partners__track { display: flex; gap: var(--s-2xl); animation: scrollPartners 25s linear infinite; } .partners__track:hover { animation-play-state: paused; } @keyframes scrollPartners { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .partner-item { min-width: 180px; height: 90px; display: flex; align-items: center; justify-content: center; background: var(--c-white); border-radius: var(--r-lg); border: 1px solid var(--c-grey-200); padding: var(--s-lg); transition: all var(--t-normal); flex-shrink: 0; } .partner-item:hover { box-shadow: var(--shadow-md); border-color: var(--c-gold); transform: scale(1.05); } .partner-item__placeholder { font-family: var(--f-heading); font-weight: 600; font-size: 0.85rem; color: var(--c-grey-400); text-transform: uppercase; letter-spacing: 1px; } .partner-item img { max-height: 50px; max-width: 140px; object-fit: contain; filter: grayscale(100%); opacity: 0.6; transition: all var(--t-normal); } .partner-item:hover img { filter: grayscale(0); opacity: 1; } /* ═══════════════════════════════════════════════════════════════ CONTACT / CONTACTO ═══════════════════════════════════════════════════════════════ */ .contact { background: var(--c-white); } .contact__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4xl); align-items: start; } .contact__text { font-size: 1.05rem; color: var(--c-grey-500); margin-bottom: var(--s-2xl); line-height: 1.8; } .contact__details { display: flex; flex-direction: column; gap: var(--s-lg); margin-bottom: var(--s-2xl); } .contact__detail { display: flex; align-items: flex-start; gap: var(--s-md); } .contact__detail-icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: rgba(26, 58, 107, 0.06); border-radius: var(--r-lg); color: var(--c-blue); font-size: 1.1rem; } .contact__detail strong { display: block; font-family: var(--f-heading); font-weight: 600; font-size: 0.9rem; color: var(--c-navy); margin-bottom: 2px; } .contact__detail p { font-size: 0.88rem; color: var(--c-grey-500); line-height: 1.5; } .contact__whatsapp-btn { display: inline-flex; align-items: center; gap: var(--s-sm); background: #25D366; color: var(--c-white); font-family: var(--f-heading); font-weight: 600; font-size: 0.95rem; padding: var(--s-md) var(--s-xl); border-radius: var(--r-md); transition: all var(--t-normal); } .contact__whatsapp-btn:hover { background: #1da851; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); } .contact__whatsapp-btn i { font-size: 1.3rem; } /* Form */ .contact__form-wrapper { background: var(--c-grey-100); border-radius: var(--r-xl); padding: var(--s-2xl); border: 1px solid var(--c-grey-200); } .contact__form-title { font-family: var(--f-heading); font-weight: 700; font-size: 1.3rem; color: var(--c-navy); margin-bottom: var(--s-xl); } .form__group { margin-bottom: var(--s-md); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); } .form__group label { display: block; font-family: var(--f-heading); font-weight: 500; font-size: 0.85rem; color: var(--c-grey-600); margin-bottom: var(--s-xs); } .form__group input, .form__group textarea { width: 100%; padding: var(--s-md); font-family: var(--f-body); font-size: 0.92rem; color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-grey-300); border-radius: var(--r-md); transition: all var(--t-fast); outline: none; } .form__group input:focus, .form__group textarea:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.08); } .form__group input::placeholder, .form__group textarea::placeholder { color: var(--c-grey-400); } .form__group textarea { resize: vertical; min-height: 100px; } .form__feedback { margin-top: var(--s-md); padding: var(--s-md); border-radius: var(--r-md); font-size: 0.9rem; font-weight: 500; display: none; } .form__feedback.success { display: block; background: rgba(34, 197, 94, 0.1); color: var(--c-success); border: 1px solid rgba(34, 197, 94, 0.2); } .form__feedback.error { display: block; background: rgba(239, 68, 68, 0.1); color: var(--c-error); border: 1px solid rgba(239, 68, 68, 0.2); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .footer { background: var(--c-dark); color: rgba(255, 255, 255, 0.65); } .footer__top { padding: var(--s-4xl) 0 var(--s-2xl); } .footer__container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--s-xl); } .footer__top .footer__container { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: var(--s-2xl); } .footer__logo { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-lg); } .footer__about { font-size: 0.88rem; line-height: 1.7; margin-bottom: var(--s-lg); color: rgba(255, 255, 255, 0.5); } .footer__social { display: flex; gap: var(--s-sm); } .footer__social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md); color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; transition: all var(--t-normal); } .footer__social a:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy); transform: translateY(-2px); } .footer__heading { font-family: var(--f-heading); font-weight: 600; font-size: 0.95rem; color: var(--c-white); margin-bottom: var(--s-lg); position: relative; padding-bottom: var(--s-sm); } .footer__heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--c-gold); } .footer__links li { margin-bottom: var(--s-sm); } .footer__links a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); transition: all var(--t-fast); display: flex; align-items: center; gap: var(--s-xs); } .footer__links a::before { content: '›'; color: var(--c-gold); font-weight: 700; } .footer__links a:hover { color: var(--c-gold-light); padding-left: 4px; } .footer__contact li { display: flex; align-items: flex-start; gap: var(--s-sm); margin-bottom: var(--s-md); font-size: 0.85rem; } .footer__contact i { color: var(--c-gold); margin-top: 3px; min-width: 16px; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: var(--s-lg) 0; } .footer__bottom .footer__container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-md); } .footer__legal { display: flex; gap: var(--s-xl); flex-wrap: wrap; } .footer__legal p { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); } .footer__copy { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); } /* ═══════════════════════════════════════════════════════════════ WHATSAPP FLOATING & BACK TO TOP ═══════════════════════════════════════════════════════════════ */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #25D366; color: var(--c-white); font-size: 1.8rem; border-radius: var(--r-full); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 999; transition: all var(--t-normal); animation: pulse 2s ease infinite; } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); } .whatsapp-float__tooltip { position: absolute; right: 70px; background: var(--c-navy); color: var(--c-white); padding: var(--s-sm) var(--s-md); border-radius: var(--r-md); font-size: 0.8rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(10px); transition: all var(--t-normal); pointer-events: none; } .whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; transform: translateX(0); } .back-to-top { position: fixed; bottom: 30px; left: 30px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--c-navy); color: var(--c-white); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md); font-size: 0.9rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--t-normal); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--c-gold); color: var(--c-navy); transform: translateY(-3px); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .about__container { grid-template-columns: 1fr; gap: var(--s-2xl); } .about__image-wrapper img { height: 360px; } .services__grid { grid-template-columns: repeat(2, 1fr); } .advantages__grid { grid-template-columns: repeat(2, 1fr); } .footer__top .footer__container { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); } } @media (max-width: 768px) { :root { --header-h: 70px; } .header__nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(11, 29, 58, 0.98); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--t-normal); z-index: 5; } .header__nav.active { opacity: 1; visibility: visible; } .header__nav-list { flex-direction: column; align-items: center; gap: var(--s-xl); } .header__nav-list a { font-size: 1.3rem; letter-spacing: 1px; } .header__toggle { display: flex; } .header__cta span { display: none; } .hero__title { font-size: clamp(1.8rem, 6vw, 2.6rem); } .hero__scroll-indicator { display: none; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .services__grid { grid-template-columns: 1fr; } .advantages__grid { grid-template-columns: 1fr; } .projects__grid { grid-template-columns: 1fr; } .contact__container { grid-template-columns: 1fr; gap: var(--s-2xl); } .form__row { grid-template-columns: 1fr; } .footer__top .footer__container { grid-template-columns: 1fr; gap: var(--s-xl); } .footer__bottom .footer__container { flex-direction: column; text-align: center; } .footer__legal { justify-content: center; } } @media (max-width: 480px) { .container { padding: 0 var(--s-md); } .section { padding: var(--s-3xl) 0; } .hero__cta { flex-direction: column; } .hero__cta .btn { width: 100%; justify-content: center; } .stats__grid { grid-template-columns: 1fr 1fr; gap: var(--s-md); } .stats__number { font-size: 2rem; } .about__experience-badge { left: 16px; } .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 20px; right: 20px; } .back-to-top { bottom: 20px; left: 20px; width: 38px; height: 38px; } } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: PAGE HEADER BANNER ═══════════════════════════════════════════════════════════════ */ .page-header { position: relative; padding: calc(var(--header-h) + 60px) 0 60px; background: var(--c-navy); overflow: hidden; } .page-header__bg { position: absolute; inset: 0; background: url('../img/hero-banner.png') center/cover no-repeat; opacity: 0.12; } .page-header__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11, 29, 58, 0.95) 0%, rgba(26, 58, 107, 0.85) 100%); } .page-header__content { position: relative; z-index: 2; } .page-header__breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-md); font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); } .page-header__breadcrumb a { color: var(--c-gold-light); transition: color var(--t-fast); } .page-header__breadcrumb a:hover { color: var(--c-gold); } .page-header__breadcrumb i { font-size: 0.6rem; } .page-header__title { font-family: var(--f-heading); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--c-white); line-height: 1.2; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: PAGE CTA SECTION ═══════════════════════════════════════════════════════════════ */ .page-cta { background: var(--g-navy); padding: var(--s-4xl) 0; text-align: center; position: relative; overflow: hidden; } .page-cta::before { content: ''; position: absolute; top: -50%; left: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(201, 168, 76, 0.06); pointer-events: none; } .page-cta h2 { font-family: var(--f-heading); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--c-white); margin-bottom: var(--s-md); } .page-cta p { color: rgba(255, 255, 255, 0.65); font-size: 1.05rem; margin-bottom: var(--s-2xl); max-width: 600px; margin-left: auto; margin-right: auto; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: HOME ABOUT SUMMARY ═══════════════════════════════════════════════════════════════ */ .home-about { background: var(--c-white); } .home-about__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4xl); align-items: center; } .home-about__excerpt { font-size: 1rem; color: var(--c-grey-500); line-height: 1.8; margin-bottom: var(--s-lg); } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: HOME CTA ═══════════════════════════════════════════════════════════════ */ .home-cta { background: var(--g-navy); padding: var(--s-5xl) 0; text-align: center; position: relative; overflow: hidden; } .home-cta__bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 70%, rgba(201, 168, 76, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(42, 82, 152, 0.12) 0%, transparent 50%); pointer-events: none; } .home-cta__title { font-family: var(--f-heading); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--c-white); margin-bottom: var(--s-md); } .home-cta__text { color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; max-width: 600px; margin: 0 auto var(--s-2xl); line-height: 1.7; } .home-cta__buttons { display: flex; align-items: center; justify-content: center; gap: var(--s-md); flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: SECTION CTA CENTER ═══════════════════════════════════════════════════════════════ */ .section__cta-center { text-align: center; margin-top: var(--s-2xl); } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: ABOUT FULL PAGE ═══════════════════════════════════════════════════════════════ */ .about-full { background: var(--c-white); } .about-full__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4xl); align-items: center; } .about-full__text-col p { margin-bottom: var(--s-md); color: var(--c-grey-500); font-size: 1rem; line-height: 1.8; } /* ── Mission / Vision / Values ── */ .mvv { background: var(--c-grey-100); } .mvv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); } .mvv__card { text-align: center; background: var(--c-white); border-radius: var(--r-xl); padding: var(--s-2xl); border: 1px solid var(--c-grey-200); transition: all var(--t-normal); } .mvv__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; } .mvv__card-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: rgba(26, 58, 107, 0.06); border-radius: var(--r-full); margin: 0 auto var(--s-lg); font-size: 1.5rem; color: var(--c-blue); transition: all var(--t-normal); } .mvv__card:hover .mvv__card-icon { background: var(--g-navy); color: var(--c-gold); } .mvv__card-title { font-family: var(--f-heading); font-weight: 700; font-size: 1.15rem; color: var(--c-navy); margin-bottom: var(--s-md); } .mvv__card p { font-size: 0.92rem; color: var(--c-grey-500); line-height: 1.7; } /* ── Strengths ── */ .strengths { background: var(--c-white); } .strengths__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-xl); } .strength-item { display: flex; gap: var(--s-lg); padding: var(--s-xl); background: var(--c-grey-100); border-radius: var(--r-lg); border: 1px solid var(--c-grey-200); transition: all var(--t-normal); } .strength-item:hover { background: var(--c-white); box-shadow: var(--shadow-md); border-color: rgba(201, 168, 76, 0.3); } .strength-item__icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: rgba(201, 168, 76, 0.1); border-radius: var(--r-lg); color: var(--c-gold-dark); font-size: 1.2rem; } .strength-item h4 { font-family: var(--f-heading); font-weight: 600; font-size: 1rem; color: var(--c-navy); margin-bottom: var(--s-xs); } .strength-item p { font-size: 0.88rem; color: var(--c-grey-500); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: SERVICES PAGE ═══════════════════════════════════════════════════════════════ */ .svc-intro { background: var(--c-white); } .svc-intro__text { max-width: 800px; } .svc-intro__text p { color: var(--c-grey-500); font-size: 1rem; line-height: 1.8; margin-top: var(--s-md); } .svc-grid { background: var(--c-grey-100); padding-top: 0; } .services__grid--full { grid-template-columns: repeat(3, 1fr); } .service-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-md); font-family: var(--f-heading); font-weight: 600; font-size: 0.85rem; color: var(--c-gold-dark); transition: all var(--t-fast); } .service-card__link:hover { color: var(--c-blue); gap: 10px; } /* ── Process Timeline ── */ .process { background: var(--c-white); } .process__timeline { max-width: 700px; margin: 0 auto; position: relative; } .process__timeline::before { content: ''; position: absolute; left: 36px; top: 0; bottom: 0; width: 2px; background: var(--c-grey-200); } .process__step { display: flex; gap: var(--s-xl); padding: var(--s-xl) 0; position: relative; } .process__step-number { width: 72px; min-width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--g-navy); border-radius: var(--r-full); font-family: var(--f-heading); font-weight: 800; font-size: 1.3rem; color: var(--c-gold); position: relative; z-index: 2; border: 3px solid var(--c-white); box-shadow: var(--shadow-md); } .process__step-content h3 { font-family: var(--f-heading); font-weight: 700; font-size: 1.15rem; color: var(--c-navy); margin-bottom: var(--s-xs); } .process__step-content p { font-size: 0.92rem; color: var(--c-grey-500); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: PROJECTS PAGE ═══════════════════════════════════════════════════════════════ */ .proj-intro { background: var(--c-white); } .proj-intro__text { max-width: 800px; } .proj-intro__text p { color: var(--c-grey-500); font-size: 1rem; line-height: 1.8; margin-top: var(--s-md); } .proj-gallery { background: var(--c-grey-100); padding-top: 0; } .projects__grid--3col { grid-template-columns: repeat(3, 1fr); } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: PARTNERS PAGE ═══════════════════════════════════════════════════════════════ */ .partners-intro { background: var(--c-white); } .partners-intro__text { max-width: 800px; } .partners-intro__text p { color: var(--c-grey-500); font-size: 1rem; line-height: 1.8; margin-top: var(--s-md); } .partners-grid-section { background: var(--c-grey-100); } .partners-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); } .partner-card { background: var(--c-white); border-radius: var(--r-xl); border: 1px solid var(--c-grey-200); padding: var(--s-2xl); text-align: center; transition: all var(--t-normal); display: flex; flex-direction: column; align-items: center; gap: var(--s-md); } .partner-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(201, 168, 76, 0.3); } .partner-card__placeholder { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: rgba(26, 58, 107, 0.06); border-radius: var(--r-full); font-size: 2rem; color: var(--c-grey-400); } .partner-card img { max-height: 60px; max-width: 160px; object-fit: contain; } .partner-card span { font-family: var(--f-heading); font-weight: 600; font-size: 0.95rem; color: var(--c-navy); } /* ── Partner Benefits ── */ .partner-benefits { background: var(--c-white); } .partner-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin-top: var(--s-2xl); } .partner-benefit { text-align: center; padding: var(--s-2xl); border-radius: var(--r-xl); background: var(--c-grey-100); border: 1px solid var(--c-grey-200); transition: all var(--t-normal); } .partner-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .partner-benefit i { font-size: 2rem; color: var(--c-gold); margin-bottom: var(--s-md); } .partner-benefit h4 { font-family: var(--f-heading); font-weight: 700; font-size: 1.05rem; color: var(--c-navy); margin-bottom: var(--s-sm); } .partner-benefit p { font-size: 0.9rem; color: var(--c-grey-500); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: CONTACT PAGE EXTRAS ═══════════════════════════════════════════════════════════════ */ .form__group select { width: 100%; padding: var(--s-md); font-family: var(--f-body); font-size: 0.92rem; color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-grey-300); border-radius: var(--r-md); transition: all var(--t-fast); outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7A90' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .form__group select:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.08); } .map-section { background: var(--c-grey-100); padding: var(--s-3xl) 0; } /* ── Outline Dark Button ── */ .btn--outline-dark { background: transparent; color: var(--c-navy); border: 2px solid var(--c-navy); } .btn--outline-dark:hover { background: var(--c-navy); color: var(--c-white); transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════════ MULTI-PAGE: RESPONSIVE ADDITIONS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .home-about__container { grid-template-columns: 1fr; gap: var(--s-2xl); } .about-full__container { grid-template-columns: 1fr; gap: var(--s-2xl); } .mvv__grid { grid-template-columns: 1fr; } .strengths__grid { grid-template-columns: 1fr; } .services__grid--full { grid-template-columns: repeat(2, 1fr); } .projects__grid--3col { grid-template-columns: repeat(2, 1fr); } .partners-full-grid { grid-template-columns: repeat(2, 1fr); } .partner-benefits__grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .home-cta__buttons { flex-direction: column; } .home-cta__buttons .btn { width: 100%; justify-content: center; } .services__grid--full { grid-template-columns: 1fr; } .projects__grid--3col { grid-template-columns: 1fr; } .partners-full-grid { grid-template-columns: 1fr; } .process__timeline::before { left: 34px; } } @media (max-width: 480px) { .page-header { padding: calc(var(--header-h) + 30px) 0 30px; } .page-header__title { font-size: 1.6rem; } }