/* ============================================================ RANKMALLORCA — Design System Skill 06 tokens → CSS variables Mobile-first | Inter via Google Fonts ============================================================ */ /* ---------- Google Fonts preconnect (added in ) ------- */ /* ---------- DESIGN TOKENS ----------------------------------- */ :root { /* Colors */ --color-primary: #1B3A6B; /* Deep Mallorca Blue */ --color-secondary: #C4783A; /* Terra Canyamel — CTAs de conversión */ --color-accent: #2A9D8F; /* Mediterranean Aqua — métricas, focus */ --color-bg: #FAFAF8; /* Fondo principal */ --color-bg-alt: #F2EDE6; /* Fondo alternativo / cards */ --color-text: #1A1A1A; --color-text-muted: #5A5A5A; --color-border: #D0CAC2; --color-white: #FFFFFF; /* Secondary hover */ --color-secondary-dark: #A8632F; --color-primary-dark: #142D54; /* Typography */ --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* Font sizes — mobile base */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 2rem; /* 32px */ --fs-4xl: 2.5rem; /* 40px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: 3.5rem; /* 56px */ /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed:1.6; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Border radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full:9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); /* Transitions */ --transition: 200ms ease; /* Max widths */ --max-content: 1200px; --max-text: 680px; } /* ---------- RESET ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--color-text); } /* ---------- TYPOGRAPHY SCALE -------------------------------- */ .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-base { font-size: var(--fs-base); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-2xl { font-size: var(--fs-2xl); } .text-3xl { font-size: var(--fs-3xl); } .text-4xl { font-size: var(--fs-4xl); } .font-medium { font-weight: var(--fw-medium); } .font-bold { font-weight: var(--fw-bold); } .font-black { font-weight: var(--fw-black); } .text-muted { color: var(--color-text-muted); } .text-white { color: var(--color-white); } .text-primary{ color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-accent { color: var(--color-accent); } /* ---------- LAYOUT ------------------------------------------ */ .container { width: 100%; max-width: var(--max-content); margin-inline: auto; padding-inline: var(--space-5); } @media (min-width: 768px) { .container { padding-inline: var(--space-8); } } @media (min-width: 1024px) { .container { padding-inline: var(--space-12); } } .section { padding-block: var(--space-16); } @media (min-width: 768px) { .section { padding-block: var(--space-20); } } @media (min-width: 1024px) { .section { padding-block: var(--space-24); } } .section--alt { background-color: var(--color-bg-alt); } .section--dark { background-color: var(--color-primary); color: var(--color-white); } .section-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: var(--space-4); } .section-title { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-tight); margin-bottom: var(--space-4); } @media (min-width: 768px) { .section-title { font-size: var(--fs-4xl); } } .section-subtitle { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: var(--max-text); line-height: var(--lh-relaxed); margin-bottom: var(--space-10); } .section--dark .section-title, .section--dark .section-subtitle { color: var(--color-white); } .section--dark .section-subtitle { opacity: 0.85; } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* ---------- NAVIGATION -------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background-color: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav__logo { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--color-primary); letter-spacing: -0.02em; } .nav__logo span { color: var(--color-secondary); } .nav__links { display: none; align-items: center; gap: var(--space-8); } .nav__link { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); transition: color var(--transition); } .nav__link:hover { color: var(--color-primary); } /* Dropdown */ .nav__dropdown { position: relative; } .nav__dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-2); z-index: 200; } .nav__dropdown:hover .nav__dropdown-menu { display: block; } .nav__dropdown-item { display: block; padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--color-text); border-radius: var(--radius-sm); transition: background var(--transition); } .nav__dropdown-item:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav__right { display: flex; align-items: center; gap: var(--space-4); } .lang-switcher { display: none; gap: var(--space-1); align-items: center; } .lang-switcher a { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-muted); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: all var(--transition); } .lang-switcher a:hover, .lang-switcher a.active { color: var(--color-primary); background: var(--color-bg-alt); } .nav__hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-2); background: none; border: none; color: var(--color-text); } .nav__hamburger span { display: block; width: 22px; height: 2px; background: currentColor; transition: all var(--transition); transform-origin: center; } @media (min-width: 900px) { .nav__links { display: flex; } .lang-switcher { display: flex; } .nav__hamburger { display: none; } } /* Mobile menu overlay */ .mobile-menu { display: none; position: fixed; inset: 0; background: var(--color-white); z-index: 150; flex-direction: column; padding: var(--space-6); overflow-y: auto; } .mobile-menu.is-open { display: flex; } .mobile-menu__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); } .mobile-menu__close { background: none; border: none; font-size: var(--fs-2xl); cursor: pointer; color: var(--color-text); line-height: 1; } .mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .mobile-menu__link { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } .mobile-menu__lang { display: flex; gap: var(--space-3); margin-top: var(--space-8); } .mobile-menu__lang a { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-muted); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .mobile-menu__lang a.active { border-color: var(--color-primary); color: var(--color-primary); } /* Mobile sticky CTA bar */ .mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; padding: var(--space-3) var(--space-4); background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); } .mobile-cta-bar .btn { width: 100%; justify-content: center; } @media (min-width: 900px) { .mobile-cta-bar { display: none; } } /* ---------- BUTTONS ----------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 28px; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: all var(--transition); text-align: center; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .btn--primary { background-color: var(--color-secondary); color: var(--color-white); border-color: var(--color-secondary); } .btn--primary:hover { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); } .btn--ghost { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--ghost:hover { background-color: var(--color-primary); color: var(--color-white); } .btn--ghost-white { background-color: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.5); } .btn--ghost-white:hover { background-color: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .btn--sm { padding: 10px 20px; font-size: var(--fs-sm); } .btn--lg { padding: 18px 36px; font-size: var(--fs-lg); } /* ---------- HERO -------------------------------------------- */ .hero { padding-block: var(--space-16); background-color: var(--color-bg); overflow: hidden; } @media (min-width: 1024px) { .hero { padding-block: var(--space-24); } } .hero__inner { display: grid; gap: var(--space-10); align-items: center; } @media (min-width: 1024px) { .hero__inner { grid-template-columns: 60fr 40fr; gap: var(--space-16); } } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-secondary); background: rgba(196,120,58,0.08); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-5); } .hero__title { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--color-text); margin-bottom: var(--space-5); } @media (min-width: 768px) { .hero__title { font-size: var(--fs-5xl); } } @media (min-width: 1024px) { .hero__title { font-size: var(--fs-6xl); } } .hero__subtitle { font-size: var(--fs-lg); color: var(--color-text-muted); line-height: var(--lh-relaxed); margin-bottom: var(--space-8); max-width: 540px; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .hero__visual { display: none; } @media (min-width: 1024px) { .hero__visual { display: flex; align-items: center; justify-content: center; position: relative; } } .hero__map { width: 100%; max-width: 380px; opacity: 0.15; fill: var(--color-primary); } .hero__badges { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); } .hero__stat-badge { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-md); } .hero__stat-badge strong { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--color-primary); } .hero__stat-badge span { font-size: var(--fs-sm); color: var(--color-text-muted); } /* ---------- SOCIAL PROOF STRIP ------------------------------ */ .strip { background-color: var(--color-primary); color: var(--color-white); padding-block: var(--space-4); overflow: hidden; } .strip__inner { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; } .strip__sep { opacity: 0.4; flex-shrink: 0; } /* Desktop: centered flex */ @media (min-width: 768px) { .strip__inner { justify-content: center; flex-wrap: wrap; white-space: normal; } } /* Mobile: marquee */ @media (max-width: 767px) { .strip__inner { animation: marquee 18s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Duplicate content for seamless loop is done in HTML */ } /* ---------- PROBLEM SECTION --------------------------------- */ .problem__grid { display: grid; gap: var(--space-6); margin-top: var(--space-10); } @media (min-width: 768px) { .problem__grid { grid-template-columns: repeat(3, 1fr); } } .problem__item { display: flex; gap: var(--space-4); } .problem__icon { font-size: var(--fs-2xl); flex-shrink: 0; line-height: 1; } .problem__item-title { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); } .problem__item-text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); } /* ---------- SERVICES GRID ----------------------------------- */ .services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-10); } @media (min-width: 768px) { .services__grid { grid-template-columns: repeat(4, 1fr); } } .service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: all var(--transition); position: relative; overflow: hidden; } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .service-card--featured { border-left: 4px solid var(--color-secondary); } .service-card__icon { font-size: var(--fs-2xl); margin-bottom: var(--space-3); } .service-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: var(--space-2); } .service-card__tagline { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-normal); } .service-card__link { display: block; width: 100%; height: 100%; position: absolute; inset: 0; } /* ---------- HOW IT WORKS ------------------------------------ */ .steps { display: grid; gap: var(--space-8); margin-top: var(--space-10); position: relative; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } } .step { position: relative; text-align: center; } .step__number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-bg-alt); border: 2px solid var(--color-secondary); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--color-secondary); margin-bottom: var(--space-4); } .step__title { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); } .step__desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); } /* ---------- RESULTS CARDS ----------------------------------- */ .results__grid { display: grid; gap: var(--space-5); margin-top: var(--space-10); } @media (min-width: 768px) { .results__grid { grid-template-columns: repeat(3, 1fr); } } .result-card { background: var(--color-bg-alt); border-left: 4px solid var(--color-secondary); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: var(--space-6); } .result-card__number { font-size: var(--fs-4xl); font-weight: var(--fw-black); color: var(--color-primary); line-height: 1; margin-bottom: var(--space-2); } .result-card__label { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text); margin-bottom: var(--space-2); } .result-card__note { font-size: var(--fs-xs); color: var(--color-text-muted); } /* ---------- FAQ ACCORDION ----------------------------------- */ .faq { max-width: var(--max-text); margin-inline: auto; margin-top: var(--space-10); } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__question { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-5); font-size: var(--fs-base); font-weight: var(--fw-medium); cursor: pointer; background: none; border: none; width: 100%; text-align: left; color: var(--color-text); gap: var(--space-4); } .faq__question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .faq__icon { font-size: var(--fs-lg); color: var(--color-secondary); flex-shrink: 0; transition: transform var(--transition); font-weight: var(--fw-regular); line-height: 1; } .faq__item.is-open .faq__icon { transform: rotate(45deg); } .faq__answer { display: none; padding-bottom: var(--space-5); font-size: var(--fs-base); color: var(--color-text-muted); line-height: var(--lh-relaxed); } .faq__item.is-open .faq__answer { display: block; } /* ---------- FORM --------------------------------------------- */ .form { display: grid; gap: var(--space-4); } @media (min-width: 768px) { .form--two-col { grid-template-columns: repeat(2, 1fr); } .form--two-col .form__field--full { grid-column: 1 / -1; } } .form__field { display: flex; flex-direction: column; gap: var(--space-2); } .form__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); } .form__input, .form__select, .form__textarea { padding: 12px var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text); font-size: var(--fs-base); transition: border-color var(--transition); width: 100%; appearance: none; } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(42,157,143,0.15); } .form__textarea { min-height: 100px; resize: vertical; } .form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } .form__disclaimer { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-relaxed); } /* ---------- CTA FINAL SECTION ------------------------------- */ .cta-final { background-color: var(--color-primary); padding-block: var(--space-20); } .cta-final__inner { display: grid; gap: var(--space-12); align-items: start; } @media (min-width: 1024px) { .cta-final__inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } .cta-final__copy .section-title { color: var(--color-white); margin-bottom: var(--space-4); } .cta-final__copy .section-subtitle { color: rgba(255,255,255,0.8); margin-bottom: var(--space-6); } .cta-final__trusts { display: flex; flex-direction: column; gap: var(--space-3); } .trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: rgba(255,255,255,0.85); } .trust-item::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--color-accent); border-radius: var(--radius-full); color: white; font-size: 11px; flex-shrink: 0; font-weight: var(--fw-bold); } .cta-final__form { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); } .cta-final__form-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: var(--space-6); } /* ---------- FOOTER ------------------------------------------ */ .footer { background-color: var(--color-primary-dark); color: rgba(255,255,255,0.7); padding-block: var(--space-16); } .footer__grid { display: grid; gap: var(--space-10); } @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .footer__logo { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--color-white); margin-bottom: var(--space-4); } .footer__logo span { color: var(--color-secondary); } .footer__tagline { font-size: var(--fs-sm); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); } .footer__heading { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-white); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); } .footer__links { display: flex; flex-direction: column; gap: var(--space-2); } .footer__link { font-size: var(--fs-sm); color: rgba(255,255,255,0.65); transition: color var(--transition); } .footer__link:hover { color: var(--color-white); } .footer__bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.4); } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); } .footer__legal a { color: rgba(255,255,255,0.4); transition: color var(--transition); } .footer__legal a:hover { color: rgba(255,255,255,0.7); } /* ---------- BREADCRUMB -------------------------------------- */ .breadcrumb { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-muted); } .breadcrumb__inner { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .breadcrumb__sep { opacity: 0.4; } .breadcrumb a { color: var(--color-text-muted); transition: color var(--transition); } .breadcrumb a:hover { color: var(--color-primary); } /* ---------- PAGE HERO (inner pages) ------------------------- */ .page-hero { background: var(--color-bg); padding-block: var(--space-12) var(--space-16); } .page-hero__title { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -0.02em; margin-bottom: var(--space-4); } @media (min-width: 768px) { .page-hero__title { font-size: var(--fs-4xl); } } .page-hero__subtitle { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: var(--max-text); line-height: var(--lh-relaxed); margin-bottom: var(--space-8); } /* ---------- SERVICE LIST ------------------------------------ */ .service-list { display: grid; gap: var(--space-5); margin-top: var(--space-8); } .service-item { border-left: 3px solid var(--color-secondary); padding-left: var(--space-5); } .service-item__title { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); } .service-item__text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); } /* ---------- UTILITY ----------------------------------------- */ .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mt-12 { margin-top: var(--space-12); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center{ align-items: center; } /* ---------- PROGRAMMATIC PAGE ------------------------------- */ .local-stats { display: grid; gap: var(--space-4); margin-top: var(--space-8); } @media (min-width: 768px) { .local-stats { grid-template-columns: repeat(3, 1fr); } } .stat-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; } .stat-card__value { font-size: var(--fs-3xl); font-weight: var(--fw-black); color: var(--color-primary); line-height: 1; margin-bottom: var(--space-2); } .stat-card__label { font-size: var(--fs-sm); color: var(--color-text-muted); } /* ---------- JAVASCRIPT helpers ------------------------------ */ .js-hidden { display: none !important; } /* ============================================================ VISUAL v2 — Premium polish (BigSEO-level impact) ============================================================ */ /* --- Hero background upgrade -------------------------------- */ .hero { background: linear-gradient(155deg, #FAFAF8 55%, #EEE8DF 100%); position: relative; } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(27,58,107,0.04) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } @media (min-width: 1200px) { .hero__title { font-size: 4.2rem; letter-spacing: -0.03em; } } /* --- Numbers impact section --------------------------------- */ .numbers-section { background: var(--color-primary); padding-block: var(--space-16); } .numbers-section__inner { display: grid; gap: 0; text-align: center; } @media (min-width: 768px) { .numbers-section__inner { grid-template-columns: repeat(3, 1fr); } } .numbers-section__item { padding: var(--space-8) var(--space-6); position: relative; } @media (min-width: 768px) { .numbers-section__item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; bottom: 15%; width: 1px; background: rgba(255,255,255,0.12); } } .big-number { font-size: 3.5rem; font-weight: 800; color: var(--color-secondary); line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--space-3); display: block; } @media (min-width: 768px) { .big-number { font-size: 4.5rem; } } .big-number__label { font-size: var(--fs-base); font-weight: var(--fw-medium); color: #fff; margin-bottom: var(--space-2); } .big-number__note { font-size: var(--fs-sm); color: rgba(255,255,255,0.45); max-width: 220px; margin-inline: auto; line-height: 1.5; } /* --- Dark problem section overrides ------------------------- */ .section--dark .problem__item-title { color: #fff; } .section--dark .problem__item-text { color: rgba(255,255,255,0.62); } .section--dark .problem__icon { background: rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: var(--space-3); flex-shrink: 0; line-height: 1; } /* --- Quote section ----------------------------------------- */ .quote-section { padding-block: var(--space-20); background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .quote-block { max-width: 800px; margin-inline: auto; text-align: center; padding-inline: var(--space-4); } .quote-block__mark { font-size: 5rem; line-height: 0.5; color: var(--color-secondary); opacity: 0.25; font-family: Georgia, 'Times New Roman', serif; display: block; margin-bottom: var(--space-5); user-select: none; } .quote-block__text { font-size: var(--fs-2xl); font-weight: 500; line-height: 1.45; color: var(--color-text); margin-bottom: var(--space-6); } @media (min-width: 768px) { .quote-block__text { font-size: var(--fs-3xl); } } .quote-block__footer { font-size: var(--fs-sm); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .quote-block__footer::before, .quote-block__footer::after { content: ''; height: 1px; width: 40px; background: var(--color-border); display: inline-block; } /* --- Enhanced service cards --------------------------------- */ .service-card { border-top: 3px solid transparent; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .service-card:hover { border-top-color: var(--color-secondary); } .service-card--featured { border-left: none; border-top: 3px solid var(--color-secondary); background: linear-gradient(135deg, #fff 0%, #FDF8F4 100%); } .service-card__arrow { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-secondary); font-weight: var(--fw-medium); opacity: 0; transform: translateX(-6px); transition: all var(--transition); display: block; } .service-card:hover .service-card__arrow { opacity: 1; transform: translateX(0); } /* --- Case study section ------------------------------------ */ .case-section { background: var(--color-bg-alt); } .case-study-grid { display: grid; gap: var(--space-5); margin-top: var(--space-10); } @media (min-width: 768px) { .case-study-grid { grid-template-columns: repeat(3, 1fr); } } .case-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: all var(--transition); position: relative; overflow: hidden; } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-secondary); } .case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .case-card__sector { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; } .case-card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.35; } .case-card__metric { margin-top: auto; display: flex; align-items: baseline; gap: var(--space-2); } .case-card__metric-value { font-size: 3rem; font-weight: 800; color: var(--color-primary); line-height: 1; letter-spacing: -0.03em; } .case-card__metric-label { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.3; } .case-card__zone { font-size: var(--fs-xs); color: var(--color-text-muted); padding: var(--space-1) var(--space-3); background: var(--color-bg-alt); border-radius: var(--radius-full); display: inline-block; align-self: flex-start; } .case-card--cta { background: var(--color-primary); border-color: var(--color-primary); justify-content: center; align-items: center; text-align: center; min-height: 240px; } .case-card--cta::before { background: var(--color-secondary); } .case-card--cta .case-card__title { color: #fff; font-size: var(--fs-xl); } .case-card--cta .case-card__sector { color: rgba(255,255,255,0.5); } /* --- Enhanced steps connector line ------------------------- */ @media (min-width: 768px) { .steps { position: relative; } .steps::before { content: ''; position: absolute; top: 23px; left: calc(12.5% + 24px); right: calc(12.5% + 24px); height: 2px; background: repeating-linear-gradient( 90deg, var(--color-border) 0px, var(--color-border) 8px, transparent 8px, transparent 16px ); z-index: 0; } .step__number { position: relative; z-index: 1; } } /* --- Results cards upgrade --------------------------------- */ .result-card { border-left: none; border-top: 4px solid var(--color-secondary); border-radius: var(--radius-xl); background: var(--color-white); padding: var(--space-8); box-shadow: var(--shadow-sm); transition: all var(--transition); } .result-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .result-card__number { font-size: 3.5rem; letter-spacing: -0.04em; } /* --- Trust section upgrade --------------------------------- */ .trust-section { background: var(--color-primary); padding-block: var(--space-20); } .trust-section .section-title { color: #fff; } .trust-section .section-subtitle { color: rgba(255,255,255,0.75); } .trust-section .btn--ghost { border-color: rgba(255,255,255,0.4); color: #fff; } .trust-section .btn--ghost:hover { background: #fff; color: var(--color-primary); } /* ============================================================ CSS v2 — SUPPLEMENT: grids + case-card internals ============================================================ */ /* Numbers section layout */ .numbers-section__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-10); text-align: center; } @media (min-width: 768px) { .numbers-section__inner { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } } .numbers-section__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } /* Quote block internals */ .quote-block { max-width: 800px; margin-inline: auto; text-align: center; } .quote-block__author { margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--color-muted); font-weight: var(--fw-medium); } /* Case cards grid */ .case-cards__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-12); } @media (min-width: 768px) { .case-cards__grid { grid-template-columns: repeat(3, 1fr); } } /* Case card internals */ .case-card { background: var(--color-white); border-radius: var(--radius-xl); border: 1px solid var(--color-border); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); position: relative; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-secondary); } .case-card:hover { box-shadow: 0 12px 40px rgba(27,58,107,0.1); transform: translateY(-3px); } .case-card--cta { background: var(--color-primary); border-color: transparent; color: #fff; } .case-card--cta::before { background: var(--color-secondary); } .case-card--cta .case-card__metric-value, .case-card--cta .case-card__metric-label, .case-card--cta .case-card__desc { color: rgba(255,255,255,0.9); } .case-card--cta .case-card__badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); } .case-card__header { display: flex; align-items: center; gap: var(--space-3); } .case-card__badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--color-bg); color: var(--color-primary); padding: var(--space-1) var(--space-3); border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; } .case-card__metrics { display: flex; gap: var(--space-6); } .case-card__metric { display: flex; flex-direction: column; gap: var(--space-1); } .case-card__metric-value { font-size: 3rem; font-weight: 800; color: var(--color-primary); line-height: 1; letter-spacing: -0.03em; } .case-card__metric-label { font-size: var(--fs-sm); color: var(--color-muted); font-weight: var(--fw-medium); line-height: 1.3; } .case-card__desc { font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; flex: 1; } .case-card__sector { font-size: var(--fs-xs); color: var(--color-muted); font-weight: var(--fw-medium); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } /* Trust section — dark override */ .trust-section { background: var(--color-primary); } .trust-section .section-label { color: var(--color-accent); } .trust-section .section-title { color: #fff; } .trust-section .section-subtitle { color: rgba(255,255,255,0.75); } .trust-section .text-sm.text-muted { color: rgba(255,255,255,0.45); } /* ============================================================ WhatsApp float button ============================================================ */ .wa-float { position: fixed; bottom: 22px; right: 22px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform var(--transition), box-shadow var(--transition); } .wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(0,0,0,0.3); } @media (max-width: 767px) { /* sube el botón por encima de la barra sticky móvil */ .wa-float { bottom: 84px; right: 16px; } }