/* ========================================================= ZIGMA TI — Design system Firma visual: las dos flechas convergentes del isotipo (azul avanzando ⟶ verde respondiendo ⟵) como motivo recurrente de conexión negocio↔tecnología. ========================================================= */ :root { /* ---- Color: derivado del isotipo ---- */ --ink-950: #071B30; --ink-900: #0B2440; --ink-800: #123458; --ink-700: #1B4570; --blue-700: #14568F; --blue-600: #1B75BE; --blue-500: #2C86D8; --blue-400: #59B4E8; --green-600: #5C8F2C; --green-500: #7CB342; --green-300: #A9D178; --paper: #F6F9FC; --surface: #FFFFFF; --line: #E1E8F1; --line-strong: #C9D6E6; --ink: #16233A; --ink-soft: #53637C; --ink-faint: #8698B0; /* ---- Tipografía ---- */ --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); --text-2xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); --text-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* ---- Espaciado: escala base 4px ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-pad: clamp(4rem, 3rem + 4vw, 7rem); /* ---- Forma / profundidad ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --shadow-sm: 0 2px 8px rgba(7, 27, 48, 0.06); --shadow-md: 0 12px 32px rgba(7, 27, 48, 0.10); --shadow-lg: 0 24px 56px rgba(7, 27, 48, 0.16); --container: 1220px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* =================== Reset & base =================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* Safety net (on body only — overflow-x:hidden on the element itself is a known trigger for scroll/position:fixed bugs in some browsers): no single element should be able to force horizontal scrolling on the whole page, on any device. */ max-width: 100%; overflow-x: hidden; font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img { max-width: 100%; display: block; } svg { display: block; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); margin: 0 0 0.5em; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; } p { line-height: 1.7; color: var(--ink-soft); margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } section { position: relative; } .section-pad { padding: var(--section-pad) 0; } /* =================== Section head (reusable) =================== */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); } .eyebrow .chev { color: var(--green-500); } .section-head { max-width: 640px; margin-bottom: var(--sp-8); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { font-size: var(--text-2xl); } .section-head .subhead { font-size: var(--text-md); margin-top: var(--sp-3); } /* =================== Buttons (reusable) =================== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); cursor: pointer; border: 1.5px solid transparent; transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn svg { transition: transform 0.2s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn-primary { background: var(--green-500); color: var(--ink-900); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset; } .btn-primary:hover { background: var(--green-600); color: var(--white, #fff); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; } .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); } .btn-outline { border-color: var(--line-strong); color: var(--ink-900); background: var(--surface); } .btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* =================== Badges (reusable) =================== */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); } .badge .chev { color: var(--green-400, var(--green-500)); flex-shrink: 0; } .badge-pending { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--blue-600); border: 1.25px dashed var(--blue-400); background: rgba(89, 180, 232, 0.08); } /* =================== Signature: chevron mark =================== */ .chev { display: inline-block; width: 0.6em; height: 0.6em; } .chev-list li { position: relative; padding-left: 26px; margin-bottom: var(--sp-3); } .chev-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; background: linear-gradient(135deg, var(--blue-500), var(--green-500)); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%); } /* Divider between hero and next section — echoes the mark's cut */ .chevron-divider { position: relative; height: 72px; background: var(--paper); margin-top: -1px; } .chevron-divider::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, var(--ink-950) 0%, var(--ink-800) 55%, var(--blue-700) 100%); clip-path: polygon(0 0, 100% 0, 100% 22%, 58% 100%, 42% 100%, 0 38%); } /* =================== Cards (reusable) =================== */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-6); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); position: relative; isolation: isolate; perspective: 700px; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-400); } .card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); } .card p { font-size: var(--text-sm); } /* Cursor-following spotlight, scoped to the services grid */ .services-grid .card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(44, 134, 216, 0.14), transparent 72%); opacity: 0; transition: opacity 0.3s var(--ease); z-index: -1; pointer-events: none; } .services-grid .card:hover::before { opacity: 1; } .card--dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } .card--dark:hover { border-color: var(--green-500); box-shadow: 0 24px 48px rgba(0,0,0,0.28); } .card--dark h3 { color: #fff; } .card--dark p, .card--dark li { color: rgba(255,255,255,0.76); } /* =================== Icon tile (reusable) =================== */ .icon-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--ink-900); color: var(--green-500); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); flex-shrink: 0; transform-style: preserve-3d; transition: transform 0.4s var(--ease), background 0.3s var(--ease); } .card:hover .icon-tile { transform: rotateX(-12deg) rotateY(16deg) translateZ(6px) scale(1.06); background: var(--blue-600); color: #fff; } @media (prefers-reduced-motion: reduce) { .card:hover .icon-tile { transform: scale(1.05); } } .icon-tile--ghost { background: rgba(255,255,255,0.06); color: var(--green-500); border: 1px solid rgba(255,255,255,0.14); } /* =================== Reveal / motion utilities =================== */ /* Content is ALWAYS visible by default — .reveal alone never hides anything. main.js only ever hides an element by adding .pre-reveal to it at the exact same moment it starts observing it for the fade-in effect, so the "hidden" state and the mechanism that un-hides it are applied atomically, in one synchronous pass. If main.js is slow, blocked by a proxy/ad-blocker, throttled (e.g. a backgrounded tab), or just fails, .pre-reveal is never added and the content simply stays visible with no animation — it can never get stuck invisible. */ .reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.js-reveal .reveal.pre-reveal { opacity: 0; transform: translateY(22px); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-reveal .reveal.pre-reveal, .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* =================== Nav =================== */ #site-nav { /* backdrop-filter is expensive to keep recalculating, so it's a plain on/off toggle (via .scrolled) instead of being tied to --nav-p like the cheaper background/shadow/padding fades below. */ --nav-p: 0; position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: calc(26px - var(--nav-p) * 12px) 0; background: rgba(7, 27, 48, calc(var(--nav-p) * 0.94)); box-shadow: 0 4px 24px rgba(0, 0, 0, calc(var(--nav-p) * 0.18)); transition: padding 0.2s var(--ease); } #site-nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @media (prefers-reduced-motion: reduce) { #site-nav { transition: none; } } #site-nav .wrap { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 11px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; } .brand img { width: 32px; height: 32px; } .brand .accent { color: var(--green-500); } .nav-links { display: none; align-items: center; gap: 38px; position: relative; } @media (min-width: 900px) { .nav-links { display: flex; } } /* The CTA button already covers this on desktop, so the plain-text "Contáctanos" link only needs to exist inside the mobile drawer. */ @media (min-width: 900px) { .nav-cta-mobile-only { display: none; } } .nav-links a { color: rgba(255,255,255,0.82); font-size: 14.5px; font-weight: 500; position: relative; padding: 4px 0; transition: color 0.2s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: rgba(255,255,255,0.5); transition: width 0.25s var(--ease); } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { width: 100%; } .nav-links a.active { color: #fff; } .nav-indicator { position: absolute; bottom: -2px; height: 2px; background: var(--green-500); border-radius: 2px; opacity: 0; transition: left 0.35s var(--ease), width 0.35s var(--ease), opacity 0.2s ease; pointer-events: none; } .nav-indicator.visible { opacity: 1; } .nav-cta { display: none; } @media (min-width: 900px) { .nav-cta { display: inline-flex; padding: 11px 22px; } } .nav-toggle { position: relative; display: inline-flex; width: 40px; height: 40px; background: none; border: none; color: #fff; cursor: pointer; } .nav-toggle .bar { position: absolute; left: 9px; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease); } .nav-toggle .bar-1 { top: 14px; } .nav-toggle .bar-2 { top: 19px; } .nav-toggle .bar-3 { top: 24px; } .nav-toggle[aria-expanded="true"] .bar-1 { top: 19px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar-2 { opacity: 0; } .nav-toggle[aria-expanded="true"] .bar-3 { top: 19px; transform: rotate(-45deg); } @media (min-width: 900px) { .nav-toggle { display: none; } } .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-950); flex-direction: column; align-items: flex-start; padding: 8px 24px 28px; gap: 20px; box-shadow: 0 16px 32px rgba(0,0,0,0.25); } .nav-links.open .nav-indicator { display: none; } .nav-links.open li { opacity: 0; animation: nav-drop-in 0.4s var(--ease) forwards; } .nav-links.open li:nth-child(2) { animation-delay: 0.02s; } .nav-links.open li:nth-child(3) { animation-delay: 0.07s; } .nav-links.open li:nth-child(4) { animation-delay: 0.12s; } .nav-links.open li:nth-child(5) { animation-delay: 0.17s; } .nav-links.open li:nth-child(6) { animation-delay: 0.22s; } .nav-links.open li:nth-child(7) { animation-delay: 0.27s; } @keyframes nav-drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* =================== Hero =================== */ #hero { background: linear-gradient(165deg, var(--ink-950) 0%, var(--ink-800) 48%, var(--blue-700) 100%); padding: clamp(150px, 120px + 6vw, 200px) 0 clamp(96px, 70px + 6vw, 140px); overflow: hidden; isolation: isolate; } #hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-8); align-items: center; position: relative; z-index: 2; } @media (max-width: 900px) { #hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero-art { order: -1; height: 260px !important; margin-bottom: var(--sp-4); } } #hero .eyebrow { color: var(--green-500); } #hero h1 { color: #fff; font-size: var(--text-3xl); max-width: 15ch; animation: rise 0.8s var(--ease) both 0.05s; } #hero p.lead { color: rgba(255,255,255,0.82); font-size: var(--text-md); max-width: 48ch; margin-bottom: var(--sp-6); animation: rise 0.8s var(--ease) both 0.18s; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-7); animation: rise 0.8s var(--ease) both 0.3s; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; animation: rise 0.8s var(--ease) both 0.42s; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero-art { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; } .hero-art-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hero-art .mark-ring { animation: spin-slow 60s linear infinite; transform-origin: 200px 210px; } .hero-art-logo { position: relative; width: 62%; max-width: 280px; height: auto; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.35)); animation: rise 0.9s var(--ease) both 0.2s; } @keyframes spin-slow { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #hero h1, #hero p.lead, .hero-badges, .hero-actions { animation: none; } .hero-art .mark-ring { animation: none; } .hero-art-logo { animation: none; } } .hero-dotgrid { position: absolute; inset: 0; z-index: 1; opacity: 0.35; pointer-events: none; mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 0%, transparent 75%); } .hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .blob { /* Soft edge comes from the gradient's own fade-to-transparent stops, not filter:blur() — a blurred, continuously-animated filter of this size is expensive to repaint and can make scrolling stutter/freeze on mid-range phones. */ position: absolute; border-radius: 50%; opacity: 0.4; will-change: transform; } .blob-a { width: 480px; height: 480px; left: -140px; top: -100px; background: radial-gradient(circle at 30% 30%, var(--blue-400) 0%, rgba(89, 180, 232, 0.4) 35%, transparent 70%); animation: blob-drift-a 26s ease-in-out infinite; } .blob-b { width: 420px; height: 420px; right: -100px; bottom: -140px; background: radial-gradient(circle at 60% 40%, var(--green-300) 0%, rgba(169, 209, 120, 0.4) 35%, transparent 70%); animation: blob-drift-b 32s ease-in-out infinite; } @keyframes blob-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } } @keyframes blob-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, -40px) scale(1.05); } } @media (max-width: 640px) { .blob-a, .blob-b { width: 280px; height: 280px; } } @media (prefers-reduced-motion: reduce) { .blob-a, .blob-b { animation: none; } } /* =================== Quiénes somos =================== */ #quienes-somos { background: var(--paper); } .qs-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-9); align-items: start; } @media (max-width: 820px) { .qs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } } .pull-quote { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--ink-900); line-height: 1.5; border-left: 3px solid var(--green-500); padding-left: var(--sp-5); position: sticky; top: 120px; } .qs-copy p { font-size: var(--text-md); } /* =================== Servicios =================== */ #servicios { background: var(--surface); } .services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } @media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .services-grid { grid-template-columns: minmax(0, 1fr); } } /* =================== Cómo trabajamos (proceso) =================== */ #proceso { background: var(--paper); } .process-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); counter-reset: step; position: relative; } @media (max-width: 860px) { .process-path { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); } } .process-step { position: relative; padding-top: var(--sp-6); } .process-step .step-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--blue-600); display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); } .process-step .step-num::before { content: ''; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); flex-shrink: 0; } .process-connector { position: absolute; top: 17px; left: calc(16.66% + 17px); right: calc(16.66% + 17px); height: 1.5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px); } @media (max-width: 860px) { .process-connector { display: none; } } .process-step img, .process-step .step-visual { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--sp-5); aspect-ratio: 4/3; } .process-step .step-visual img { width: 100%; height: 100%; object-fit: cover; } .process-step h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); } .process-step p { font-size: var(--text-sm); } /* =================== Misión / Visión / Valores =================== */ #mvv { background: linear-gradient(175deg, var(--ink-950), var(--ink-900) 70%); color: #fff; } .mvv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } @media (max-width: 900px) { .mvv-grid { grid-template-columns: minmax(0, 1fr); } } .mvv-card ul { padding: 0; } .mvv-card li b { color: #fff; } /* =================== Contacto =================== */ #contacto { background: var(--surface); } .contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sp-8); align-items: center; } @media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } } #contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-7); } .form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); } @media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } } .form-group { margin-bottom: var(--sp-5); } .form-group label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--ink-900); margin-bottom: var(--sp-2); } .form-group input, .form-group textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink); background: var(--surface); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(44, 134, 216, 0.14); } .field-control { position: relative; } .field-control input, .field-control textarea { padding-right: 42px; } .field-icon { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) scale(0.6); opacity: 0; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); pointer-events: none; } .field-control--area .field-icon { top: 16px; transform: scale(0.6); } .field-icon--ok { color: var(--green-600); } .field-icon--error { color: #C0392B; } .form-group.is-valid .field-control input, .form-group.is-valid .field-control textarea { border-color: var(--green-500); } .form-group.is-valid .field-icon--ok { opacity: 1; transform: translateY(-50%) scale(1); } .form-group.is-valid .field-control--area .field-icon--ok { transform: scale(1); } .form-group.is-invalid .field-control input, .form-group.is-invalid .field-control textarea { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12); } .form-group.is-invalid .field-icon--error { opacity: 1; transform: translateY(-50%) scale(1); } .form-group.is-invalid .field-control--area .field-icon--error { transform: scale(1); } .field-error { font-size: 0.78rem; color: #C0392B; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s var(--ease), opacity 0.2s var(--ease), margin 0.25s var(--ease); } .form-group.is-invalid .field-error { max-height: 40px; opacity: 1; margin-top: 6px; } .form-note:empty { display: none; } .form-note { font-size: var(--text-xs); color: var(--ink-soft); background: rgba(44, 134, 216, 0.07); border-left: 3px solid var(--blue-500); padding: 12px 16px; border-radius: var(--radius-sm); margin-top: var(--sp-4); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } .form-note--error { background: rgba(192, 57, 43, 0.08); border-left-color: #C0392B; color: #8B2E22; } .form-note--success { background: rgba(124, 179, 66, 0.10); border-left-color: var(--green-500); color: var(--green-600); } #contact-form .btn.is-loading { opacity: 0.75; cursor: progress; pointer-events: none; } #contact-form .btn.is-loading svg { animation: btn-spin 0.8s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #contact-form .btn.is-loading svg { animation: none; } } .info-card { background: var(--ink-950); border-radius: var(--radius-lg); padding: var(--sp-7); color: #fff; } .info-card .eyebrow { color: var(--green-500); } .info-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .info-row:first-of-type { padding-top: 0; } .info-row:last-of-type { border-bottom: none; } .info-row .icon-tile { margin-bottom: 0; width: 40px; height: 40px; } .info-row-body { flex: 1; min-width: 0; } .info-row .info-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 4px; } .info-row .info-value { font-size: var(--text-sm); color: #fff; font-weight: 500; overflow-wrap: anywhere; } .copy-btn { flex-shrink: 0; align-self: center; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.65); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .copy-btn[hidden] { display: none; } .copy-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); } .copy-btn .icon-copied { display: none; } .copy-btn.copied { color: var(--green-500); border-color: var(--green-500); } .copy-btn.copied .icon-copy { display: none; } .copy-btn.copied .icon-copied { display: block; } .mini-map { margin-top: var(--sp-5); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); aspect-ratio: 16 / 7; } .mini-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15) contrast(1.05); } .map-link { margin-top: var(--sp-4); display: inline-flex; gap: 8px; align-items: center; color: var(--green-500); font-weight: 600; font-size: var(--text-sm); transition: gap 0.2s ease; } .map-link:hover { gap: 12px; color: var(--green-300); } /* =================== Footer =================== */ #site-footer { background: var(--ink-950); color: rgba(255,255,255,0.6); padding: var(--sp-7) 0; border-top: 1px solid rgba(255,255,255,0.08); } #site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 700; } .footer-brand img { width: 26px; height: 26px; } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease); } .footer-social a:hover { color: var(--ink-950); background: var(--green-500); border-color: var(--green-500); transform: translateY(-2px); } #site-footer .footer-note { font-size: var(--text-xs); font-family: var(--font-mono); } /* =================== WhatsApp floating button =================== */ .whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; box-shadow: var(--shadow-lg); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 28px 60px rgba(7, 27, 48, 0.28); } @media (max-width: 560px) { .whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; } .whatsapp-float svg { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } } /* =================== Focus visibility =================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2.5px solid var(--blue-400); outline-offset: 2px; }