/* ============================================================ ELEMENTAR — LANDING PAGE Design System: Clean, institutional, technical Colors: White/Off-white, Gray, Graphite, Copper/Burnt Orange ============================================================ */ /* ——— CSS RESET & FOUNDATIONS ——— */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Color Palette */ --white: #FFFFFF; --off-white: #F8F8F8; --gray-100: #F2F2F2; --gray-200: #E5E5E5; --gray-300: #D4D4D4; --gray-400: #A3A3A3; --gray-500: #737373; --gray-600: #525252; --graphite: #2F2F2F; --dark: #1A1A1A; --black: #0D0D0D; --accent: #C96A2B; --accent-light: #D4813F; --accent-dark: #A85520; --accent-glow: rgba(201, 106, 43, 0.15); --accent-glow-strong: rgba(201, 106, 43, 0.30); --whatsapp: #25D366; --whatsapp-dark: #1EBE57; /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing */ --section-py: clamp(64px, 8vw, 120px); --container-px: clamp(20px, 5vw, 40px); --container-max: 1160px; /* Borders & Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05); --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06); --shadow-accent: 0 8px 30px rgba(201, 106, 43, 0.25); /* Transitions */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --duration: 0.3s; --duration-long: 0.6s; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; } body { font-family: var(--font); color: var(--graphite); background-color: var(--off-white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* ——— CONTAINER ——— */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); } /* ——— SECTION DEFAULTS ——— */ .section { padding: var(--section-py) 0; position: relative; overflow: hidden; } .section--light { background: var(--off-white); } .section--dark { background: var(--graphite); } .section--accent { background: var(--dark); } .section__label { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section__label--light { color: var(--accent-light); } .section__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; color: var(--graphite); margin-bottom: 16px; max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; } .section__title--light { color: var(--white); } .section__description { font-size: clamp(1rem, 2vw, 1.125rem); color: var(--gray-500); max-width: 600px; margin: 0 auto 40px; text-align: center; line-height: 1.7; } .section__description--light { color: var(--gray-300); } .text-accent { color: var(--accent); } .text-accent-light { color: var(--accent-light); } .section__cta { text-align: center; margin-top: 48px; } /* ——— GEOMETRIC DECORATIONS ——— */ .section__geo { position: absolute; border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; pointer-events: none; } .section__geo--1 { width: 200px; height: 200px; top: -40px; right: -60px; transform: rotate(25deg); } .section__geo--2 { width: 120px; height: 120px; bottom: 30px; left: -30px; transform: rotate(-15deg); } /* ——— BUTTONS ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-weight: 700; font-size: 0.95rem; border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration) var(--ease); text-align: center; white-space: nowrap; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity: 0; transition: opacity var(--duration) var(--ease); } .btn:hover::before { opacity: 1; } .btn--primary { background: var(--accent); color: var(--white); box-shadow: var(--shadow-accent); } .btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(201, 106, 43, 0.35); } .btn--primary:active { transform: translateY(0); } .btn--white { background: var(--white); color: var(--accent); box-shadow: var(--shadow-lg); } .btn--white:hover { background: var(--gray-100); transform: translateY(-2px); box-shadow: var(--shadow-xl); } .btn--lg { padding: 16px 32px; font-size: 1rem; } .btn--full { width: 100%; } .btn__icon { width: 20px; height: 20px; flex-shrink: 0; } /* ============================================================ HERO SECTION ============================================================ */ .hero { background: var(--white); padding: clamp(80px, 10vw, 120px) 0 var(--section-py); position: relative; overflow: hidden; } .hero__container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-glow); color: var(--accent); font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-full); margin-bottom: 20px; border: 1px solid rgba(201, 106, 43, 0.15); } .hero__badge-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } .hero__title { font-size: clamp(1.85rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.15; color: var(--graphite); margin-bottom: 18px; letter-spacing: -0.02em; } .hero__subtitle { font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--gray-500); line-height: 1.6; margin-bottom: 28px; max-width: 520px; } .hero__bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } .hero__bullets li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--gray-600); font-weight: 500; } .bullet-check { color: var(--accent); font-weight: 700; font-size: 1rem; } .hero__cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .hero__microcopy { font-size: 0.8rem; color: var(--gray-400); padding-left: 4px; } /* Hero Visual */ .hero__visual { position: relative; } .hero__image-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .hero__image { width: 100%; height: 320px; object-fit: cover; } .hero__image-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201, 106, 43, 0.08), transparent 60%); pointer-events: none; } .hero__badge-projects { position: absolute; bottom: -16px; right: 20px; background: var(--white); padding: 14px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; border: 1px solid var(--gray-200); } .hero__badge-number { font-size: 1.5rem; font-weight: 900; color: var(--accent); line-height: 1; } .hero__badge-label { font-size: 0.7rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; } /* Hero Geo */ .hero__geo { position: absolute; border: 1px solid var(--gray-200); border-radius: 4px; pointer-events: none; opacity: 0.4; } .hero__geo--1 { width: 300px; height: 300px; top: -80px; right: -100px; transform: rotate(30deg); } .hero__geo--2 { width: 150px; height: 150px; bottom: -40px; left: -40px; transform: rotate(-20deg); } /* ============================================================ PROBLEM SECTION ============================================================ */ .problem__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 48px; } .problem__text .section__title { text-align: left; margin-left: 0; } .problem__text .section__description { text-align: left; margin-left: 0; margin-bottom: 0; } .problem__list { display: flex; flex-direction: column; gap: 14px; } .problem__item { display: flex; align-items: center; gap: 14px; background: var(--white); padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); font-size: 0.95rem; font-weight: 500; color: var(--gray-600); transition: all var(--duration) var(--ease); box-shadow: var(--shadow-sm); } .problem__item:hover { border-color: #e74c3c; box-shadow: 0 4px 16px rgba(231,76,60,0.08); transform: translateX(4px); } .problem__icon { font-size: 1.1rem; flex-shrink: 0; } .problem__transition { display: flex; align-items: center; gap: 20px; justify-content: center; } .transition-line { height: 1px; flex: 1; max-width: 100px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .transition-text { font-size: 1.1rem; color: var(--accent); font-weight: 600; white-space: nowrap; } /* ============================================================ SOLUTION SECTION (DARK) ============================================================ */ .differentials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 700px; margin: 0 auto; } .differential__item { display: flex; align-items: center; gap: 14px; padding: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); transition: all var(--duration) var(--ease); } .differential__item:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); transform: translateY(-2px); } .differential__icon-wrap { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--accent-glow); border-radius: var(--radius-sm); flex-shrink: 0; } .differential__icon-wrap svg { width: 20px; height: 20px; color: var(--accent-light); } .differential__item h3 { font-size: 0.875rem; font-weight: 600; color: var(--gray-200); line-height: 1.4; } /* ============================================================ SERVICES SECTION ============================================================ */ .services__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; } .service-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 28px; position: relative; overflow: hidden; transition: all var(--duration-long) var(--ease); box-shadow: var(--shadow-sm); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .service-card__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); opacity: 0; transition: opacity var(--duration) var(--ease); } .service-card:hover .service-card__accent { opacity: 1; } .service-card--featured { border-color: var(--accent); } .service-card--featured .service-card__accent { opacity: 1; } .service-card__tag { display: inline-block; background: var(--accent-glow); color: var(--accent); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 12px; } .service-card__icon { width: 48px; height: 48px; background: var(--accent-glow); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: all var(--duration) var(--ease); } .service-card:hover .service-card__icon { background: var(--accent); } .service-card__icon svg { width: 24px; height: 24px; color: var(--accent); transition: color var(--duration) var(--ease); } .service-card:hover .service-card__icon svg { color: var(--white); } .service-card__title { font-size: 1.15rem; font-weight: 700; color: var(--graphite); margin-bottom: 10px; } .service-card__text { font-size: 0.9rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 16px; } .service-card__benefits { display: flex; flex-direction: column; gap: 6px; } .service-card__benefits li { font-size: 0.85rem; color: var(--gray-600); font-weight: 500; padding-left: 18px; position: relative; } .service-card__benefits li::before { content: '✔'; position: absolute; left: 0; color: var(--accent); font-size: 0.75rem; } /* ============================================================ AUTHORITY SECTION ============================================================ */ .authority__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; margin-bottom: 48px; } .authority__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 24px 20px; text-align: center; transition: all var(--duration) var(--ease); } .authority__card:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); transform: translateY(-3px); } .authority__card-icon { font-size: 1.8rem; margin-bottom: 12px; } .authority__card h3 { font-size: 0.85rem; font-weight: 600; color: var(--gray-300); line-height: 1.4; } /* Stats */ .authority__stats { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 32px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); } .stat { text-align: center; display: flex; flex-direction: column; align-items: center; } .stat__number { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; color: var(--accent-light); line-height: 1; } .stat__plus { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 900; color: var(--accent-light); } .stat__label { font-size: 0.75rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; } .stat__divider { width: 1px; height: 48px; background: rgba(255,255,255,0.1); } /* ============================================================ EXPERTISE / MARIANA ROLDI SECTION ============================================================ */ .expertise__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; align-items: start; } /* Photo Column */ .expertise__photo-col { display: flex; flex-direction: column; align-items: center; gap: 20px; } .expertise__photo-wrapper { position: relative; width: 100%; max-width: 340px; aspect-ratio: 3 / 4; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .expertise__photo-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, var(--gray-100), var(--gray-200)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border: 2px dashed var(--gray-300); border-radius: var(--radius-xl); } .expertise__photo-placeholder svg { width: 64px; height: 64px; color: var(--gray-400); } .expertise__photo-placeholder span { font-size: 0.85rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.08em; } .expertise__photo { width: 100%; height: 100%; object-fit: cover; } .expertise__photo-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(201, 106, 43, 0.12), transparent); pointer-events: none; } .expertise__name-card { text-align: center; padding: 16px 24px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: 100%; max-width: 340px; } .expertise__name { font-size: 1.2rem; font-weight: 800; color: var(--graphite); margin-bottom: 4px; } .expertise__role { font-size: 0.8rem; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; } /* Content Column */ .expertise__content-col { display: flex; flex-direction: column; gap: 32px; } .expertise__text-block p { font-size: 0.95rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 14px; } .expertise__text-block p:last-child { margin-bottom: 0; } /* Credentials */ .expertise__credentials { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); } .expertise__credentials-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--graphite); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); } .expertise__credentials-title svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; } /* Timeline */ .expertise__timeline { display: flex; flex-direction: column; gap: 0; position: relative; } .expertise__timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--accent), var(--accent-light), var(--gray-200)); border-radius: 2px; } .expertise__timeline-item { display: flex; gap: 18px; padding: 12px 0; position: relative; transition: all var(--duration) var(--ease); } .expertise__timeline-item:hover { transform: translateX(4px); } .expertise__timeline-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid var(--accent); flex-shrink: 0; margin-top: 2px; position: relative; z-index: 1; transition: all var(--duration) var(--ease); } .expertise__timeline-item:hover .expertise__timeline-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); } .expertise__timeline-content { flex: 1; } .expertise__timeline-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); background: var(--accent-glow); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 4px; } .expertise__timeline-content p { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; margin: 0; } .expertise__timeline-content p strong { color: var(--graphite); font-weight: 700; } /* Insight Quote */ .expertise__insight { position: relative; background: linear-gradient(135deg, var(--graphite), var(--dark)); border-radius: var(--radius-xl); padding: 40px 36px; margin-top: 48px; overflow: hidden; } .expertise__insight-icon { position: absolute; top: 20px; left: 24px; } .expertise__insight-icon svg { width: 48px; height: 48px; color: var(--accent-light); } .expertise__insight-text { font-size: clamp(1rem, 2vw, 1.1rem); color: var(--gray-300); line-height: 1.75; margin: 0; padding-left: 0; border: none; font-style: italic; position: relative; z-index: 1; } .expertise__insight-text strong { color: var(--accent-light); font-style: normal; } /* Institutional Closing */ .expertise__closing { display: flex; align-items: center; gap: 24px; margin-top: 40px; } .expertise__closing-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .expertise__closing-text { font-size: 0.95rem; color: var(--gray-500); text-align: center; max-width: 600px; line-height: 1.65; flex-shrink: 0; } .expertise__closing-text strong { color: var(--accent); font-weight: 700; } /* Geometric Decorations */ .expertise__geo { position: absolute; border: 1px solid var(--gray-200); border-radius: 4px; pointer-events: none; opacity: 0.3; } .expertise__geo--1 { width: 180px; height: 180px; top: -40px; right: -50px; transform: rotate(22deg); } .expertise__geo--2 { width: 100px; height: 100px; bottom: 60px; left: -30px; transform: rotate(-18deg); } .expertise__geo--3 { width: 60px; height: 60px; top: 30%; right: 5%; transform: rotate(45deg); border-color: var(--accent); opacity: 0.12; } /* ============================================================ STEPS SECTION ============================================================ */ .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; } .step { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; text-align: center; transition: all var(--duration) var(--ease); box-shadow: var(--shadow-sm); } .step:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); } .step__number { font-size: 2rem; font-weight: 900; color: var(--accent); opacity: 0.2; line-height: 1; margin-bottom: 14px; } .step:hover .step__number { opacity: 0.5; } .step__connector { display: none; } .step__title { font-size: 1rem; font-weight: 700; color: var(--graphite); margin-bottom: 6px; } .step__text { font-size: 0.875rem; color: var(--gray-500); line-height: 1.5; } /* ============================================================ OBJECTION SECTION ============================================================ */ .objection { text-align: center; max-width: 600px; margin: 0 auto; } .objection__icon { width: 64px; height: 64px; background: var(--accent-glow); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .objection__icon svg { width: 28px; height: 28px; color: var(--accent-light); } .objection .section__title { margin-bottom: 16px; } .objection .section__description { margin-bottom: 32px; } .objection__badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .objection__badge { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; color: var(--gray-300); transition: all var(--duration) var(--ease); } .objection__badge:hover { border-color: var(--accent); background: var(--accent-glow); } .objection__badge svg { width: 16px; height: 16px; color: var(--accent-light); } /* ============================================================ FORM SECTION ============================================================ */ .lead-form { max-width: 540px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 18px; background: var(--white); padding: 32px 28px; border-radius: var(--radius-xl); border: 1px solid var(--gray-200); box-shadow: var(--shadow-lg); } .form__group { display: flex; flex-direction: column; gap: 6px; position: relative; } .form__label { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.05em; } .form__required { color: var(--accent); } .form__input { width: 100%; padding: 14px 16px; font-family: var(--font); font-size: 0.95rem; color: var(--graphite); background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); transition: all var(--duration) var(--ease); outline: none; } .form__input::placeholder { color: var(--gray-400); } .form__input:focus { border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 3px var(--accent-glow); } .form__select { appearance: none; cursor: pointer; padding-right: 40px; } .form__select-arrow { position: absolute; right: 14px; bottom: 14px; width: 18px; height: 18px; color: var(--gray-400); pointer-events: none; } .form__textarea { resize: vertical; min-height: 80px; } .form__disclaimer { font-size: 0.75rem; color: var(--gray-400); text-align: center; margin-top: 4px; } /* ============================================================ CTA FINAL ============================================================ */ .section--cta-final { background: linear-gradient(135deg, var(--accent-dark), var(--accent), var(--accent-light)); padding: var(--section-py) 0; position: relative; overflow: hidden; } .cta-final__content { text-align: center; position: relative; z-index: 1; } .cta-final__title { font-size: clamp(1.75rem, 4.5vw, 2.8rem); font-weight: 900; color: var(--white); line-height: 1.15; margin-bottom: 12px; } .cta-final__subtitle { font-size: clamp(1rem, 2.5vw, 1.2rem); color: rgba(255,255,255,0.85); margin-bottom: 32px; } .cta-final__urgency { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 16px; font-weight: 500; } .cta-final__geo { position: absolute; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; pointer-events: none; } .cta-final__geo--1 { width: 250px; height: 250px; top: -60px; right: -80px; transform: rotate(20deg); } .cta-final__geo--2 { width: 180px; height: 180px; bottom: -50px; left: -50px; transform: rotate(-25deg); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--black); padding: 24px 0; text-align: center; } .footer__text { font-size: 0.8rem; color: var(--gray-500); } /* ============================================================ STICKY WHATSAPP BUTTON ============================================================ */ .whatsapp-sticky { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: var(--whatsapp); color: var(--white); padding: 14px 22px; border-radius: var(--radius-full); box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35); font-size: 0.9rem; font-weight: 700; transition: all var(--duration) var(--ease); animation: whatsapp-bounce 3s infinite; } .whatsapp-sticky:hover { background: var(--whatsapp-dark); transform: scale(1.05); box-shadow: 0 8px 32px rgba(37, 211, 102, 0.45); } .whatsapp-sticky svg { width: 22px; height: 22px; } @keyframes whatsapp-bounce { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-6px); } 30% { transform: translateY(0); } 45% { transform: translateY(-3px); } 60% { transform: translateY(0); } } /* ============================================================ ANIMATIONS ============================================================ */ [data-animate] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-animate="fade-left"] { transform: translateX(40px); } [data-animate="fade-right"] { transform: translateX(-40px); } [data-animate].animate-in { opacity: 1; transform: translateY(0) translateX(0); } /* ============================================================ RESPONSIVE — TABLET (768px+) ============================================================ */ @media (min-width: 768px) { .hero__container { grid-template-columns: 1fr 1fr; gap: 48px; } .hero__image { height: 400px; } .problem__grid { grid-template-columns: 1fr 1fr; gap: 48px; } .expertise__grid { grid-template-columns: 340px 1fr; gap: 48px; } .expertise__closing { gap: 32px; } .services__grid { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } .lead-form { grid-template-columns: 1fr 1fr; padding: 40px 36px; } .form__group--full { grid-column: 1 / -1; } .lead-form .btn--full { grid-column: 1 / -1; } .lead-form .form__disclaimer { grid-column: 1 / -1; } } /* ============================================================ RESPONSIVE — DESKTOP (1024px+) ============================================================ */ @media (min-width: 1024px) { .hero__container { gap: 64px; } .hero__image { height: 460px; } .differentials { grid-template-columns: repeat(4, 1fr); max-width: 100%; } .authority__grid { grid-template-columns: repeat(4, 1fr); } .expertise__grid { grid-template-columns: 380px 1fr; gap: 64px; } .expertise__photo-wrapper { max-width: 380px; } .expertise__name-card { max-width: 380px; } .expertise__insight { padding: 48px 56px; } .step__connector { display: block; position: absolute; top: 28px; right: -20px; width: 40px; height: 2px; background: var(--gray-200); } .step:last-child .step__connector { display: none; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (max 480px) ============================================================ */ @media (max-width: 480px) { .hero { padding-top: 60px; } .differentials { grid-template-columns: 1fr; } .authority__grid { grid-template-columns: 1fr; } .authority__stats { gap: 20px; padding: 24px; } .stat__divider { display: none; } .authority__stats { flex-direction: column; } .steps { grid-template-columns: 1fr; } .whatsapp-sticky__text { display: none; } .whatsapp-sticky { padding: 16px; border-radius: 50%; } .whatsapp-sticky svg { width: 26px; height: 26px; } .objection__badges { flex-direction: column; align-items: center; } .expertise__closing { flex-direction: column; gap: 16px; } .expertise__insight { padding: 28px 24px; } } /* Padding bottom for sticky button */ .footer { padding-bottom: 80px; } /* ============================================================ FAQ SECTION ============================================================ */ .container--narrow { max-width: 800px; } .faq__accordion { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; } .faq__item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--duration) var(--ease); } .faq__item:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); } .faq__item.is-active { border-color: var(--accent); box-shadow: var(--shadow-md); } .faq__header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; background: none; border: none; cursor: pointer; text-align: left; gap: 20px; } .faq__question { font-size: 1.05rem; font-weight: 700; color: var(--graphite); line-height: 1.4; transition: color var(--duration) var(--ease); } .faq__item.is-active .faq__question { color: var(--accent); } .faq__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all var(--duration) var(--ease); flex-shrink: 0; } .faq__icon svg { width: 20px; height: 20px; } .faq__item.is-active .faq__icon { transform: rotate(45deg); color: var(--accent); } .faq__content { max-height: 0; overflow: hidden; transition: max-height var(--duration) var(--ease); } .faq__item.is-active .faq__content { max-height: 500px; /* Adjust based on content */ } .faq__answer { padding: 0 28px 24px; font-size: 0.95rem; color: var(--gray-600); line-height: 1.7; } .faq__footer-cta { margin-top: 56px; text-align: center; background: var(--gray-100); padding: 48px 32px; border-radius: var(--radius-xl); border: 1px dashed var(--gray-300); } .faq__cta-text { font-size: 1.15rem; font-weight: 700; color: var(--graphite); margin-bottom: 24px; } @media (max-width: 768px) { .faq__header { padding: 20px; } .faq__answer { padding: 0 20px 20px; } .faq__footer-cta { padding: 32px 20px; } }
Point Repair Oficina Mecânica | Sua oficina de confiança na Zona Norte de SP
Bem-vindo à Point Repair

Sua oficina de confiança na ZN de SP — transparência total

Na Point Repair, seu carro é tratado com tecnologia, precisão e respeito. Revisão multimarcas com diagnóstico computadorizado e garantia.

Agendar avaliação agora Falar no WhatsApp
Diagnóstico de Precisão
Leva e Traz + Reserva
Total Transparência
Especialistas Multimarcas
Compromisso

Cansado de oficinas que você não confia?

Sabemos que muitos motoristas já passaram por experiências ruins: serviços mal feitos, cobranças indevidas ou falta de clareza. Na Point Repair, fazemos diferente.

Transparência total no diagnóstico
Explicação clara do problema técnico
Profissionais qualificados
Compromisso com a sua segurança
Portfólio

Soluções completas para o seu veículo

Especialistas em mecânica leve multimarcas com tecnologia de ponta.

Manutenção Preventiva

  • Troca de óleo e filtros
  • Troca de fluidos (freio, transmissão, direção, arrefecimento)

Diagnóstico e Sistemas

  • Injeção eletrônica
  • Sistema de ignição
  • Diagnóstico computadorizado

Freios e Segurança

  • Sistema de Freios ABS
  • Pastilhas, discos e tambores

Mecânica Geral

  • Suspensão e Amortecedores
  • Câmbio manual e automático
  • Caixa de direção
  • Sincronismo do motor (Correias)

Ar Condicionado

  • Higienização profissional ozônio
  • Troca de filtro de cabine

Revisões Especializadas

  • Revisão Pré-compra
  • Pós-compra e Periódica
  • Checklists de viagem
Solicitar orçamento rápido
Vantagens

Muito além de uma oficina comum

Leva e traz do veículo

Comodidade total — buscamos e entregamos seu carro no seu endereço.

Carro reserva

Você não fica na mão enquanto seu carro está em manutenção conosco.

Sala VIP Coworking

Estrutura preparada para você trabalhar com Wi-Fi enquanto aguarda.

Atendimento Humanizado

Explicação técnica clara. Você entende exatamente o que está pagando.

Fluxo

Como funciona nosso atendimento

1

Agendamento

Escolha o melhor dia pelo WhatsApp.

2

Diagnóstico

Análise técnica computadorizada profunda.

3

Aprovação

Orçamento detalhado via WhatsApp.

4

Execução

Serviço com peças de alta qualidade.

5

Entrega

Veículo pronto, revisado e garantido.

Onde estamos

Sua oficina na Freguesia do Ó

Localização estratégica na Zona Norte de SP. Atendemos um raio de até 30km com agilidade total.

Rua Capitão Antônio de Azevedo, 227 — Freguesia do Ó

(11) 93943-7669

Carregando Mapa Interativo...

Clientes

Quem conhece, recomenda

★★★★★

"Atendimento honesto, coisa rara hoje em dia. Explicaram tudo com paciência antes de fazer o serviço."

Ricardo S. — Google Maps

★★★★★

"Usei o serviço de leva e traz e facilitou demais minha rotina. Oficina moderna e muito eficiente!"

Ana Paula M. — Google Maps

★★★★★

"Finalmente uma oficina de extrema confiança na região. Transparência é a palavra chave aqui."

Marcos Oliveira — Google Maps

Seu carro precisa de atenção — e você merece confiança

Evite problemas maiores e gastos desnecessários. Faça sua revisão com quem realmente se importa com você e seu veículo.

Agendar avaliação agora
Especialista realizando diagnóstico em motor moderno
Nossa Oficina

Point Repair Especializada

Somos especialistas em manutenção e reparação automotiva multimarcas, com foco em segurança, transparência e qualidade técnica superior.

Nosso compromisso é oferecer um serviço confiável, onde o cliente entenda cada etapa do processo e se sinta seguro para confiar seu patrimônio em nossas mãos.

Faça parte do nosso time

Estamos sempre em busca de profissionais qualificados e comprometidos com a excelência técnica.

Enviar currículo por E-mail
FAQ

Dúvidas comuns

Sim, trabalhamos com veículos de linha leve multimarcas, tanto nacionais quanto importados, com ferramentas específicas para cada modelo.
Recomendamos fortemente o agendamento prévio via WhatsApp para garantirmos total atenção ao seu veículo e agilidade na entrega.
Sempre. Nenhum serviço é iniciado sem sua aprovação prévia do orçamento detalhado e explicação técnica do problema.
Sim, todos os nossos serviços e peças instaladas possuem garantia conforme a legislação vigente e normas técnicas de segurança.
Sim, dispomos de um espaço coworking VIP com Wi-Fi e café para você trabalhar confortavelmente enquanto cuidamos do seu carro.

Especialistas em manutenção preventiva e reparação automotiva de alta precisão na Zona Norte de São Paulo.

Serviços

Manutenção Geral Diagnóstico Injeção Freios e ABS Suspensão

Contato

(11) 93943-7669

adm.oficinamecanicapoint10@gmail.com

Rua Capitão Antônio de Azevedo, 227 — Freguesia do Ó, SP

© 2026 Point Repair Oficina Mecânica. Orgulhosamente servindo a Zona Norte.