/* ================================================================ EXEJUS — styles.css Paleta: Azul medianoche (#0D1B2A), Blanco cálido (#F8F7F4), Ámbar (#E8A020) Mobile-first · sin dependencias externas ================================================================ */ /* ---------------------------------------------------------------- 1. CUSTOM PROPERTIES (Design Tokens) ---------------------------------------------------------------- */ :root { --navy: #0D1B2A; --navy-mid: #162436; --navy-light: #1E3349; --white: #F8F7F4; --white-pure: #FFFFFF; --grey-100: #F1F0ED; --grey-200: #E4E2DD; --grey-400: #9E9A91; --grey-600: #635F58; --gold: #E8A020; --gold-light: #F5C060; --gold-dark: #C47F10; --text-primary: var(--navy); --text-secondary: var(--grey-600); --text-muted: var(--grey-400); --text-inverse: var(--white); --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.75rem; --fs-5xl: 3.5rem; --fs-6xl: 4.5rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(13,27,42,.06), 0 1px 2px rgba(13,27,42,.04); --shadow-md: 0 4px 16px rgba(13,27,42,.08), 0 2px 6px rgba(13,27,42,.05); --shadow-lg: 0 16px 48px rgba(13,27,42,.12), 0 4px 12px rgba(13,27,42,.06); --shadow-xl: 0 32px 80px rgba(13,27,42,.18); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-xslow: 700ms; --container-max: 1200px; --container-pad: var(--sp-6); } /* ================================================================ 2. RESET & BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; color: var(--text-primary); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } address { font-style: normal; } em { font-style: italic; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); } /* Fallback: si JS no carga, los elementos reveal siguen siendo visibles */ /* JS añade la clase .js-loaded al cuando arranca */ html:not(.js-loaded) .reveal { opacity: 1; transform: none; } /* ---------------------------------------------------------------- 3. UTILITARIOS TIPOGRAFÍA ---------------------------------------------------------------- */ .section-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); background: rgba(232,160,32,.1); border: 1px solid rgba(232,160,32,.25); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-full); margin-bottom: var(--sp-4); } .section-tag--light { color: var(--gold-light); background: rgba(245,192,96,.08); border-color: rgba(245,192,96,.3); } /* ---------------------------------------------------------------- 4. CONTENEDOR ---------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } @media (min-width: 768px) { :root { --container-pad: var(--sp-8); } } @media (min-width: 1280px) { :root { --container-pad: var(--sp-10); } } /* ---------------------------------------------------------------- 5. BOTONES ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); white-space: nowrap; border: 2px solid transparent; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 4px 20px rgba(232,160,32,.35); } .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: 0 8px 32px rgba(232,160,32,.5); } .btn-ghost { background: transparent; color: var(--white); border-color: rgba(248,247,244,.3); } .btn-ghost:hover { border-color: var(--white); background: rgba(248,247,244,.08); } .btn-nav { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); font-size: var(--fs-xs); padding: 0.55rem 1.1rem; } .btn-nav:hover { background: var(--navy); color: var(--white); } .btn-submit { width: 100%; justify-content: center; padding: 1rem 2rem; font-size: var(--fs-base); } .btn-loading { display: none; } .btn-submit.is-loading .btn-text, .btn-submit.is-loading .btn-arrow { display: none; } .btn-submit.is-loading .btn-loading { display: inline; } /* ---------------------------------------------------------------- 6. NAVEGACIÓN ---------------------------------------------------------------- */ .nav-wrapper { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--dur-slow), box-shadow var(--dur-slow); } .nav-wrapper.scrolled { background: rgba(248,247,244,.96); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } .nav-inner { display: flex; align-items: center; gap: var(--sp-6); max-width: var(--container-max); margin-inline: auto; padding: var(--sp-4) var(--container-pad); } .nav-logo { display: flex; align-items: baseline; gap: 1px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1; color: var(--white); transition: color var(--dur-base); flex-shrink: 0; } .nav-wrapper.scrolled .nav-logo { color: var(--navy); } .logo-mark { color: var(--gold); letter-spacing: -0.04em; } .logo-text { letter-spacing: 0.08em; } .nav-links { display: none; align-items: center; gap: var(--sp-8); margin-left: auto; } .nav-links a { font-size: var(--fs-sm); font-weight: 500; color: rgba(248,247,244,.8); transition: color var(--dur-fast); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: var(--gold); transition: width var(--dur-base) var(--ease-out); } .nav-links a:hover { color: var(--white); } .nav-links a:hover::after { width: 100%; } .nav-wrapper.scrolled .nav-links a { color: var(--grey-600); } .nav-wrapper.scrolled .nav-links a:hover { color: var(--navy); } .nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-2); margin-left: auto; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--dur-base), opacity var(--dur-base); } .nav-wrapper.scrolled .nav-toggle span { background: var(--navy); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { display: none; background: var(--white-pure); border-top: 1px solid var(--grey-200); padding: var(--sp-6) var(--container-pad); } .nav-mobile.is-open { display: block; } .nav-mobile ul { display: flex; flex-direction: column; gap: var(--sp-4); } .mobile-link { font-size: var(--fs-lg); font-weight: 500; color: var(--text-primary); padding: var(--sp-2) 0; display: block; } .mobile-cta { display: block; text-align: center; margin-top: var(--sp-2); } @media (min-width: 768px) { .nav-links { display: flex; } .nav-toggle { display: none; } } /* ---------------------------------------------------------------- 7. REVEAL (Intersection Observer) ---------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-xslow) var(--ease-out), transform var(--dur-xslow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 120ms; } .reveal-delay-2 { transition-delay: 240ms; } .reveal-delay-3 { transition-delay: 360ms; } .reveal-delay-4 { transition-delay: 480ms; } /* ---------------------------------------------------------------- 8. HERO SECTION ---------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; background: var(--navy); display: flex; align-items: center; overflow: hidden; padding-top: 80px; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-mesh { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 30%, rgba(232,160,32,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 20% 80%, rgba(30,51,73,.8) 0%, transparent 70%), linear-gradient(135deg, var(--navy) 0%, #142030 50%, #0A1520 100%); } .hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(248,247,244,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(248,247,244,.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 30%, rgba(0,0,0,.4) 70%, transparent); } .hero-container { position: relative; z-index: 1; padding-block: var(--sp-24) var(--sp-20); max-width: 900px; } .hero-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 500; color: rgba(248,247,244,.7); background: rgba(248,247,244,.06); border: 1px solid rgba(248,247,244,.12); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-full); margin-bottom: var(--sp-6); letter-spacing: 0.04em; width: fit-content; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,32,.6); } 50% { box-shadow: 0 0 0 6px rgba(232,160,32,0); } } .hero-title { font-family: var(--font-display); font-size: clamp(var(--fs-3xl), 6vw, var(--fs-6xl)); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--white); margin-bottom: var(--sp-6); } .hero-title em { color: var(--gold); font-style: italic; } .hero-sub { font-size: clamp(var(--fs-base), 2vw, var(--fs-lg)); font-weight: 300; color: rgba(248,247,244,.65); max-width: 580px; line-height: 1.7; margin-bottom: var(--sp-8); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-12); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-number { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--white); line-height: 1; } .stat-label { font-size: var(--fs-xs); color: rgba(248,247,244,.5); letter-spacing: 0.04em; } .stat-divider { width: 1px; height: 40px; background: rgba(248,247,244,.15); } .scroll-indicator { position: absolute; bottom: var(--sp-8); left: var(--container-pad); display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248,247,244,.35); } .scroll-line { width: 40px; height: 1px; background: rgba(248,247,244,.2); position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: var(--gold); animation: scroll-anim 2s ease-in-out infinite; } @keyframes scroll-anim { 0% { left: -100%; } 100% { left: 100%; } } /* ---------------------------------------------------------------- 9. SECTION HEADERS COMPARTIDOS ---------------------------------------------------------------- */ .section-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-12); } .section-title { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--sp-4); } .section-sub { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; } /* ---------------------------------------------------------------- 10. SERVICIOS ---------------------------------------------------------------- */ .services { padding-block: var(--sp-24); background: var(--white); } .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } .service-card { position: relative; background: var(--white-pure); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--sp-8); overflow: hidden; transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; } .card-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); } .service-card:hover .card-accent { transform: scaleX(1); } .accent-blue { background: linear-gradient(90deg, var(--navy), #2B6CB0); } .accent-gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); } .service-card--featured { background: var(--navy); border-color: var(--navy); } .service-card--featured .card-title, .service-card--featured .card-desc, .service-card--featured .card-link { color: var(--white); } .service-card--featured .card-icon { color: var(--gold); background: rgba(232,160,32,.15); } .service-card--featured .card-features li { color: rgba(248,247,244,.7); } .service-card--featured .card-features li::before { background: var(--gold); } .service-card--featured:hover { box-shadow: 0 32px 80px rgba(13,27,42,.4); } .card-badge { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; color: var(--navy); background: var(--gold); padding: 2px var(--sp-2); border-radius: var(--radius-full); letter-spacing: 0.04em; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-lg); background: rgba(13,27,42,.06); color: var(--navy); margin-bottom: var(--sp-6); transition: background var(--dur-base), transform var(--dur-base); } .service-card:hover .card-icon { transform: scale(1.08); } .card-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); line-height: 1.2; } .card-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.65; margin-bottom: var(--sp-6); } .service-card--featured .card-desc { color: rgba(248,247,244,.65); } .card-features { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); } .card-features li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); } .card-features li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); } .card-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--gold-dark); transition: gap var(--dur-base), color var(--dur-base); } .card-link:hover { gap: var(--sp-3); color: var(--gold); } .service-card--featured .card-link { color: var(--gold); } .service-card--featured .card-link:hover { color: var(--gold-light); } /* ---------------------------------------------------------------- 11. PRUEBA SOCIAL ---------------------------------------------------------------- */ .social-proof { padding-block: var(--sp-24); background: var(--grey-100); } .logos-track { overflow: hidden; margin-bottom: var(--sp-16); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .logos-inner { display: flex; animation: logos-scroll 24s linear infinite; } .logos-inner:hover { animation-play-state: paused; } .logos-group { display: flex; flex-shrink: 0; align-items: center; } .logo-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 var(--sp-6); background: var(--white-pure); border: 1px solid var(--grey-200); border-radius: var(--radius-full); margin-right: var(--sp-3); } .logo-item span { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--grey-400); white-space: nowrap; letter-spacing: 0.04em; } @keyframes logos-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial { background: var(--white-pure); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); transition: box-shadow var(--dur-slow), transform var(--dur-slow); } .testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .testimonial-stars { color: var(--gold); letter-spacing: 2px; font-size: var(--fs-sm); } .testimonial-text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--grey-200); } .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white); font-size: var(--fs-xs); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .testimonial-author strong { display: block; font-size: var(--fs-sm); color: var(--text-primary); font-weight: 600; line-height: 1.3; } .testimonial-author span { font-size: var(--fs-xs); color: var(--text-muted); } /* ---------------------------------------------------------------- 12. CONTACTO ---------------------------------------------------------------- */ .contact { position: relative; padding-block: var(--sp-24); background: var(--navy); overflow: hidden; } .contact-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(232,160,32,.08) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 10% 20%, rgba(30,51,73,.6) 0%, transparent 70%); } .contact-container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--sp-12); } @media (min-width: 900px) { .contact-container { grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; } } .contact-title { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--white); margin-bottom: var(--sp-4); } .contact-title em { color: var(--gold); } .contact-sub { font-size: var(--fs-base); color: rgba(248,247,244,.6); line-height: 1.7; margin-bottom: var(--sp-8); } .contact-details { display: flex; flex-direction: column; gap: var(--sp-4); } .contact-detail-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: rgba(248,247,244,.7); transition: color var(--dur-base); } a.contact-detail-item:hover { color: var(--gold); } .contact-form-wrap { background: var(--white-pure); border-radius: var(--radius-xl); padding: var(--sp-8); box-shadow: var(--shadow-xl); } .contact-form { display: flex; flex-direction: column; gap: var(--sp-5); } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } } .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-group label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } .form-group label span { color: var(--gold-dark); } .form-group input, .form-group textarea, .form-group select { width: 100%; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-primary); background: var(--grey-100); border: 1.5px solid var(--grey-200); border-radius: var(--radius-md); padding: 0.7rem 1rem; transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base); outline: none; -webkit-appearance: none; appearance: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--navy); background: var(--white-pure); box-shadow: 0 0 0 3px rgba(13,27,42,.08); } .form-group.has-error input, .form-group.has-error textarea, .form-group.has-error select { border-color: #e53e3e; } .form-error { font-size: var(--fs-xs); color: #e53e3e; min-height: 16px; } .form-group textarea { resize: vertical; min-height: 120px; } .select-wrap { position: relative; } .select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); } .form-group--check { flex-direction: row; align-items: flex-start; gap: 0; } .checkbox-label { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; } .checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-custom { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--grey-200); border-radius: var(--radius-sm); background: var(--grey-100); margin-top: 2px; transition: all var(--dur-base); position: relative; } .checkbox-label input:checked + .checkbox-custom { background: var(--navy); border-color: var(--navy); } .checkbox-label input:checked + .checkbox-custom::after { content: ''; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border: 2px solid var(--white); border-top: none; border-left: none; transform: rotate(45deg); } .checkbox-label a { color: var(--navy); font-weight: 500; text-decoration: underline; } .form-status { font-size: var(--fs-sm); text-align: center; padding: var(--sp-3); border-radius: var(--radius-md); } .form-status.is-success { color: #276749; background: #f0fff4; border: 1px solid #c6f6d5; } .form-status.is-error { color: #9b2c2c; background: #fff5f5; border: 1px solid #fed7d7; } /* ---------------------------------------------------------------- 13. FOOTER ---------------------------------------------------------------- */ .footer { background: #080F18; color: rgba(248,247,244,.5); padding-top: var(--sp-16); } .footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(248,247,244,.08); } @media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr 2fr; } } .footer-brand .nav-logo { color: var(--white); margin-bottom: var(--sp-4); } .footer-brand p { font-size: var(--fs-sm); line-height: 1.7; } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .footer-col { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-col strong { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(248,247,244,.9); margin-bottom: var(--sp-2); } .footer-col a { font-size: var(--fs-sm); transition: color var(--dur-base); } .footer-col a:hover { color: var(--gold); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-6); font-size: var(--fs-xs); } /* ---------------------------------------------------------------- 14. RESPONSIVE EXTRAS MOBILE ---------------------------------------------------------------- */ @media (max-width: 767px) { .stat-divider { height: 28px; } .scroll-indicator { display: none; } .section-header { margin-bottom: var(--sp-8); } .contact-form-wrap { padding: var(--sp-6); } .footer-nav { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------- 15. PREFERS REDUCED MOTION ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- 16. SERVICIOS — GRID DE 6 (3 + 3, dos filas perfectas) ---------------------------------------------------------------- */ /* Mobile: 1 columna — hereda de .services-grid */ .services-grid--six { /* idéntico al base en móvil */ } @media (min-width: 600px) and (max-width: 899px) { /* Tablet: 2 columnas, 3 filas */ .services-grid--six { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { /* Desktop: 3 columnas, 2 filas perfectas sin trucos */ .services-grid--six { grid-template-columns: repeat(3, 1fr); } /* El pseudo-elemento del grid de 5 ya no aplica aquí */ .services-grid--six::after { display: none; } } /* ---------------------------------------------------------------- 17. PILARES DE VALOR — sección "¿Por qué Exejus?" ---------------------------------------------------------------- */ /* Grid de 3 pilares */ .pillars-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); } } /* Tarjeta de pilar base */ .pillar-card { position: relative; background: var(--white-pure); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: var(--sp-8); overflow: hidden; transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Pilar central destacado */ .pillar-card--featured { background: var(--navy); border-color: var(--navy); } .pillar-card--featured .pillar-title, .pillar-card--featured .pillar-desc { color: var(--white); } .pillar-card--featured .pillar-number { color: rgba(232,160,32,.25); } .pillar-card--featured .pillar-icon { color: var(--gold); background: rgba(232,160,32,.12); } .pillar-card--featured .pillar-points li { color: rgba(248,247,244,.7); } .pillar-card--featured .pillar-points li::before { background: var(--gold); } .pillar-card--featured:hover { box-shadow: 0 32px 80px rgba(13,27,42,.4); } /* Número decorativo de fondo */ .pillar-number { position: absolute; top: var(--sp-4); right: var(--sp-6); font-family: var(--font-display); font-size: 4.5rem; font-weight: 700; line-height: 1; color: rgba(13,27,42,.05); user-select: none; pointer-events: none; letter-spacing: -0.04em; } /* Icono del pilar */ .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: rgba(13,27,42,.06); color: var(--navy); margin-bottom: var(--sp-6); transition: transform var(--dur-base) var(--ease-spring); } .pillar-card:hover .pillar-icon { transform: scale(1.08) rotate(-3deg); } /* Título del pilar */ .pillar-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-3); line-height: 1.2; } /* Descripción del pilar */ .pillar-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-6); } /* Puntos clave */ .pillar-points { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--grey-200); } .pillar-card--featured .pillar-points { border-color: rgba(248,247,244,.1); } .pillar-points li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); } .pillar-points li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dark); }