/* ═══════════════════════════════════════════════════ INMARK ECUADOR — Navbar styles /css/styles.css — cargado como último del para que sobreescriba los estilos inline via cascada. ═══════════════════════════════════════════════════ */ /* ── Color global ── */ :root { --bg: #FFFDFA; } html, body { background: var(--bg); } section.hero { background: var(--bg); } /* ── Shell ── */ header.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,253,250,.78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(28,28,28,.06); transition: background .3s var(--ease), box-shadow .3s var(--ease); } header.nav.scrolled { background: rgba(255,253,250,.97); box-shadow: 0 1px 32px rgba(28,28,28,.07); } header.nav { width: 100%; } /* Nav-inner sobreescribe el antiguo header.nav .container (misma especificidad 0,2,1 → externo gana por cascada) */ header.nav .nav-inner { max-width: var(--container); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 0; } /* ── Separador vertical logo / links ── */ .nav-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; margin: 0 20px; } /* ── Brand ── */ .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.02em; transition: transform .3s var(--ease); flex-shrink: 0; color: var(--ink); } .brand:hover { transform: scale(1.03); } .brand-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); position: relative; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; transition: transform .4s var(--ease-bounce); } .brand:hover .brand-dot { transform: rotate(360deg); } .brand-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } .brand i { font-style: italic; font-family: var(--serif); font-weight: 400; color: var(--primary); font-size: 22px; margin-left: -2px; } /* ── Links desktop ── */ nav.primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; } nav.primary > a { position: relative; padding: 9px 15px; border-radius: var(--radius-pill); font-size: 14.5px; color: var(--ink); font-weight: 500; transition: color .25s, background .25s; overflow: hidden; white-space: nowrap; } nav.primary > a::before { content: ""; position: absolute; inset: 0; background: var(--ink); border-radius: var(--radius-pill); transform: scale(0); transition: transform .35s var(--ease); z-index: -1; } nav.primary > a.active::before, nav.primary > a:hover::before { transform: scale(1); } nav.primary > a.active, nav.primary > a:hover { color: #fff; } /* ── Botón Servicios ── */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown-toggle { display: flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--radius-pill); font-size: 14.5px; color: var(--ink); font-weight: 500; background: none; border: none; cursor: pointer; transition: color .25s; position: relative; overflow: hidden; white-space: nowrap; } .nav-dropdown-toggle::before { content: ""; position: absolute; inset: 0; background: var(--ink); border-radius: var(--radius-pill); transform: scale(0); transition: transform .35s var(--ease); z-index: -1; } .nav-dropdown:hover .nav-dropdown-toggle::before, .nav-dropdown-toggle.active::before { transform: scale(1); } .nav-dropdown:hover .nav-dropdown-toggle, .nav-dropdown-toggle.active { color: #fff; } .nav-arr { display: inline-flex; align-items: center; transition: transform .25s var(--ease); flex-shrink: 0; } .nav-dropdown:hover .nav-arr, .nav-dropdown[data-open] .nav-arr { transform: rotate(180deg); } /* ── Mega-menú ── */ .mega-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(820px, 88vw); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: 0 16px 56px rgba(28,28,28,.11); opacity: 0; pointer-events: none; z-index: 300; transition: opacity .2s var(--ease), transform .2s var(--ease); } /* Puente invisible que cubre el gap entre el botón y el menú */ .mega-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu, .nav-dropdown[data-open] .mega-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega-grid { display: grid; grid-template-columns: 1fr auto 1fr auto minmax(220px,260px); } .mega-grid.mega-grid-4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } .mega-divider { width: 1px; background: var(--border); margin: 8px 6px; align-self: stretch; } .mega-col { padding: 8px; display: flex; flex-direction: column; gap: 4px; } .mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); transition: background .18s var(--ease); text-decoration: none; color: var(--ink); } .mega-item:hover { background: var(--bg-lilac); } .mega-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); transition: background .18s, border-color .18s; } .mega-item:hover .mega-icon { background: var(--primary-100); border-color: var(--primary-100); } .mega-text { display: flex; flex-direction: column; gap: 3px; } .mega-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .mega-desc { font-size: 12px; color: var(--muted); line-height: 1.4; } /* Col 3 — CTA */ .mega-cta-col { background: var(--bg-lilac); border-radius: var(--radius-sm); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; justify-content: center; } .mega-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); margin: 0; } .mega-heading { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); line-height: 1.25; margin: 0; font-weight: 400; } .mega-body { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 0; } .mega-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .2s, transform .2s; } .mega-btn:hover { background: var(--primary-hi); transform: scale(1.02); } .mega-secondary { font-size: 12px; color: var(--primary); font-weight: 500; text-decoration: none; text-align: center; transition: opacity .2s; } .mega-secondary:hover { opacity: .65; } /* ── Nuevo mega-menu cards ── */ .megawrap{ position:absolute;top:100%;left:50%;padding-top:10px; width:min(880px,calc(100vw - 80px)); transform:translateX(-50%) translateY(-8px); opacity:0;pointer-events:none; transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1); z-index:300; } .nav-dropdown[data-open] .megawrap, .nav-dropdown:hover .megawrap{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto} .mega{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 24px 70px -28px rgba(28,28,28,.28),0 2px 10px rgba(28,28,28,.04);overflow:hidden} .mega-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--border)} .mega-eyebrow-tag{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)} .mega-eyebrow-tag .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(114,64,222,.18);animation:pulse 2s ease-in-out infinite} .mega-head .sub{font-size:13px;color:var(--muted-2)} .mega-grid-cards{display:grid;grid-template-columns:repeat(2,1fr);padding:14px;gap:6px} .megacard{position:relative;display:flex;gap:16px;padding:18px;border:1px solid transparent;border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s} .megacard:hover{transform:translateY(-4px);border-color:var(--ink)} .mc-chip{flex:none;width:46px;height:46px;border-radius:var(--radius-sm);background:var(--bg-lilac);display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:var(--primary);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s} .mc-body{display:flex;flex-direction:column;gap:5px;min-width:0} .mc-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .mc-arr{opacity:0;transform:translateX(-4px);color:var(--primary);font-size:14px;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s} .megacard:hover .mc-arr{opacity:1;transform:translateX(0)} .mc-desc{font-size:13.5px;line-height:1.45;color:var(--muted)} .mega-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px;background:var(--bg-lilac);border-top:1px solid var(--border);text-decoration:none;color:var(--ink);transition:gap .3s cubic-bezier(.2,.7,.2,1)} .mega-cta-strip:hover{gap:20px} .mega-cta-strip .l{font-size:14px} .mega-cta-strip .r{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap} .mega-cta-strip .r .arr-circle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px} .caret{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1);font-size:10px;opacity:.6} .nav-dropdown[data-open] .caret,.nav-dropdown:hover .caret{transform:rotate(180deg)} .nav-dropdown-menu{display:none!important} /* ── Acciones nav derecha ── */ .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .btn-primary{background:var(--primary);color:#fff} .btn-primary::before{background:var(--primary)} .btn-primary::after{background:var(--primary-hi)} .btn-primary:hover{color:#fff} .btn-primary .arr{background:rgba(255,255,255,.18)} .btn-primary:hover .arr{background:rgba(255,255,255,.25)} .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--border); background: transparent; color: var(--ink); transition: border-color .2s, color .2s, background .2s; text-decoration: none; white-space: nowrap; } .btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; } .btn-ghost.active { border-color: var(--primary); color: var(--primary); } /* ── Hamburguesa ── */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; border-radius: 8px; transition: background .25s; z-index: 200; background: none; border: none; flex-shrink: 0; } .hamburger:hover { background: rgba(28,28,28,.06); } .hamburger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s, width .3s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; width: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Menú móvil — full-screen ── */ .mobile-nav { position: fixed; inset: 0; background: rgba(255,253,250,.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 150; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); transform: translateY(-10px); } .mobile-nav.open { opacity: 1; pointer-events: all; transform: none; } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Sobreescribe el antiguo .mobile-nav a que aplicaría aquí también */ .mobile-nav .mobile-nav-header a { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); padding: 0; border-radius: 0; } .mobile-nav .mobile-nav-header a:hover { background: transparent; color: var(--ink); } .mobile-close { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-lilac); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .2s; flex-shrink: 0; } .mobile-close:hover { background: var(--primary-100); color: var(--primary); } .mobile-links { display: flex; flex-direction: column; padding: 28px 16px; gap: 4px; flex: 1; overflow-y: auto; } .mobile-links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: var(--radius-sm); font-size: clamp(20px, 5vw, 30px); font-weight: 500; letter-spacing: -.025em; color: var(--ink); transition: color .2s, background .2s; text-decoration: none; } .mobile-links a:hover, .mobile-links a.active { color: var(--primary); background: var(--bg-lilac); } .chev { font-size: .75em; opacity: .35; font-style: normal; transition: opacity .2s; } .mobile-links a:hover .chev, .mobile-links a.active .chev { opacity: .7; } .mobile-nav .mobile-cta { display: block; margin: 0 20px 16px; padding: 16px; border-radius: var(--radius-pill); background: var(--primary); color: #fff !important; font-size: 16px; font-weight: 500; text-align: center; transition: background .25s, transform .2s; text-decoration: none; flex-shrink: 0; } .mobile-nav .mobile-cta:hover { background: var(--primary-hi); transform: scale(1.01); } .mobile-nav-footer { padding: 0 24px 28px; font-size: 13px; color: var(--muted); text-align: center; flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 900px) { .hamburger { display: flex; } nav.primary { display: none; } .nav-actions { display: none; } .nav-sep { display: none; } } @media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } } /* ── Proyectos: hero mínimo ── */ .projects-hero { padding: 48px 0 32px; border-bottom: 0.5px solid var(--border); } .projects-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .projects-eyebrow-line { display: inline-block; width: 24px; height: 1px; background: var(--muted-2); flex-shrink: 0; } .projects-eyebrow-text { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 500; } .projects-title { font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--ink); } .projects-em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary); } /* ── Proyectos: lista vertical ── */ .projects-list { padding: 0 0 48px; } .project-item { border-bottom: 0.5px solid var(--border); } .project-visual { position: relative; height: 380px; overflow: hidden; } .project-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%); } .project-visual-bottom { position: absolute; bottom: 24px; left: 32px; right: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; z-index: 1; } .project-visual-name { font-family: var(--serif); font-style: italic; font-size: 28px; color: #fff; line-height: 1.2; flex-shrink: 0; } .project-visual-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .project-tag { background: rgba(255,255,255,.18); color: #fff; font-size: 11px; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; } .project-meta { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: var(--bg); } .project-num { font-size: 11px; color: var(--muted-2); letter-spacing: .04em; min-width: 80px; } .project-result { font-family: var(--serif); font-style: italic; color: var(--primary); font-size: 13px; text-align: center; flex: 1; } .project-arr-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-lilac); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: background .2s, transform .2s; } .project-item:hover .project-arr-circle { background: var(--primary-100); transform: scale(1.08); } /* ── Proyectos: CTA final ── */ .projects-cta { margin-top: 16px; background: var(--bg-lilac); border-radius: var(--radius); padding: 48px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .projects-cta-eyebrow { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; font-weight: 600; } .projects-cta-title { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink); margin: 0; font-weight: 400; line-height: 1.2; } .projects-cta-btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; flex-shrink: 0; } .projects-cta-btn:hover { background: var(--primary-hi); transform: scale(1.02); } @media (max-width: 768px) { .projects-hero { padding: 32px 0 24px; } .project-visual { height: 240px; } .project-visual-bottom { left: 20px; right: 20px; bottom: 16px; } .project-meta { padding: 14px 20px; } .projects-cta { flex-direction: column; align-items: flex-start; } .projects-cta-btn { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════ NOSOTROS ═══════════════════════════════════════════ */ /* ── 1. Hero ── */ .nos-hero { padding: 48px 0 40px; border-bottom: 0.5px solid var(--border); } .nos-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .nos-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .nos-eyebrow-line { display: inline-block; width: 24px; height: 1px; background: var(--muted-2); flex-shrink: 0; } .nos-eyebrow-text { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 500; } .nos-h1 { font-size: clamp(32px, 3.5vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0; color: var(--ink); } .nos-h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary); } .nos-hero-right { display: flex; flex-direction: column; justify-content: center; height: 100%; } .nos-hero-p { border-left: 2px solid var(--primary); padding-left: 20px; font-size: 16px; color: var(--muted); line-height: 1.7; margin: 0; } .nos-hero-p strong { color: var(--ink); font-weight: 600; } /* ── 2. Manifiesto ── */ .nos-manifiesto { padding: 48px 0; border-bottom: 0.5px solid var(--border); } .nos-manifiesto-text { font-size: 20px; font-weight: 500; line-height: 1.6; max-width: 680px; margin: 0 0 28px; color: var(--ink); } .nos-manifiesto-text em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary); } .nos-firma { display: flex; align-items: center; gap: 12px; } .nos-firma-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); flex-shrink: 0; } .nos-firma-nombre { font-size: 13px; font-weight: 600; color: var(--ink); display: block; } .nos-firma-rol { font-size: 12px; color: var(--muted); display: block; } /* ── 3. Números ── */ .nos-numeros { padding: 48px 0; border-bottom: 0.5px solid var(--border); } .nos-numeros-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .nos-num-item { padding: 0 32px; border-right: 0.5px solid var(--border); } .nos-num-item:first-child { padding-left: 0; } .nos-num-item:last-child { border-right: none; } .nos-num-valor { font-family: var(--serif); font-style: italic; font-size: 40px; color: var(--ink); line-height: 1; margin-bottom: 8px; } .nos-num-valor span { color: var(--primary); } .nos-num-label { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 200px; } /* ── 4. Valores ── */ .nos-valores { padding: 48px 0; border-bottom: 0.5px solid var(--border); } .nos-valores-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 500; margin-bottom: 24px; } .nos-valores-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .nos-valor-card { background: var(--bg-soft); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 24px; } .nos-valor-num { font-size: 11px; color: var(--muted-2); margin-bottom: 10px; display: block; letter-spacing: .04em; } .nos-valor-titulo { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); font-weight: 400; margin: 0 0 8px; } .nos-valor-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; } /* ── 5. Diferencial ── */ .nos-diferencial { padding: 48px 0; border-bottom: 0.5px solid var(--border); } .nos-diferencial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .nos-dif-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-weight: 600; margin-bottom: 12px; } .nos-dif-titulo { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; margin: 0 0 14px; } .nos-dif-titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary); } .nos-dif-p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; } .nos-dif-items { display: flex; flex-direction: column; gap: 10px; } .nos-dif-item { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft); border: 0.5px solid var(--border); align-items: flex-start; } .nos-dif-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-lilac); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; } .nos-dif-item-titulo { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 3px; } .nos-dif-item-sub { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; } /* ── 6. CTA final ── */ .nos-cta { margin-top: 16px; padding: 48px 40px; background: var(--primary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nos-cta-titulo { font-family: var(--serif); font-style: italic; font-size: 24px; font-weight: 400; color: #fff; margin: 0; } .nos-cta-btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: var(--radius-pill); background: #fff; color: var(--primary); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .2s; flex-shrink: 0; } .nos-cta-btn:hover { opacity: .88; transform: scale(1.02); } /* ── Responsive nosotros ── */ @media (max-width: 768px) { .nos-hero-grid, .nos-diferencial-grid { grid-template-columns: 1fr; } .nos-numeros-grid, .nos-valores-grid { grid-template-columns: 1fr; } .nos-num-item { padding: 20px 0; border-right: none; border-bottom: 0.5px solid var(--border); } .nos-num-item:last-child { border-bottom: none; } .nos-h1 { font-size: 28px; } .nos-manifiesto-text { font-size: 17px; } .nos-cta { flex-direction: column; align-items: flex-start; } .nos-cta-btn { width: 100%; justify-content: center; } }/* ── Footer wordmark sweep ── */ .foot-wordmark { position: relative; overflow: hidden; } .foot-wordmark::after { content: "inmark."; position: absolute; inset: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(120px, 22vw, 320px); line-height: .85; letter-spacing: -.04em; text-align: center; background: linear-gradient( 90deg, transparent 0%, transparent 15%, rgba(192,193,255,.6) 30%, rgba(255,255,255,.8) 45%, #ECF3B3 50%, rgba(255,255,255,.8) 55%, rgba(192,193,255,.6) 70%, transparent 85%, transparent 100% ); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: footerSweep 12s ease-in-out infinite; pointer-events: none; } @keyframes footerSweep { 0% { background-position: 200% 0%; opacity: 0; } 8% { opacity: 1; } 52% { background-position: -50% 0%; opacity: 1; } 65% { opacity: 0; } 100% { background-position: -50% 0%; opacity: 0; } } .no-footer-fx .foot-wordmark::after { display: none; } /* ═══════════ HERO PÁGINAS INTERNAS — LAYOUT UNIFICADO ═══════════ */ .inmark-hero{ padding:80px 0 0;position:relative;overflow:hidden; border-bottom:1px solid var(--border); } .inmark-hero-blob{ position:absolute;border-radius:50%;filter:blur(100px); opacity:.25;pointer-events:none;z-index:0; } .inmark-hero-blob.one{ width:500px;height:500px;background:var(--primary-100); top:-160px;right:-80px;animation:ihb1 18s ease-in-out infinite; } .inmark-hero-blob.two{ width:350px;height:350px;background:var(--bg-lime); bottom:-80px;left:5%;opacity:.35;animation:ihb2 22s ease-in-out infinite; } @keyframes ihb1{0%,100%{transform:scale(1)}50%{transform:scale(1.1) translate(-20px,30px)}} @keyframes ihb2{0%,100%{transform:scale(1)}50%{transform:scale(1.08) translate(30px,-20px)}} .inmark-hero .container{position:relative;z-index:1;max-width:var(--container)!important} .ih-top{ display:grid;grid-template-columns:1fr 1fr; gap:48px;align-items:end;padding-bottom:60px; } .ih-left{display:flex;flex-direction:column;align-items:flex-start} .ih-eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:6px 14px 6px 8px;background:#fff; border:1px solid var(--border);border-radius:var(--radius-pill); font-size:13px;font-weight:500;margin-bottom:32px; animation:fadeUp .8s var(--ease) both; } .ih-eyebrow .pulse{ width:8px;height:8px;border-radius:50%;background:var(--primary); box-shadow:0 0 0 4px rgba(114,64,222,.18); animation:pulse 2s ease-in-out infinite; } h1.ih-title{ margin:0;font-size:clamp(56px,7.5vw,120px); line-height:.9;letter-spacing:-.05em;font-weight:500; text-align:left; } h1.ih-title .line{display:block;overflow:hidden} h1.ih-title .line > span{ display:inline-block; transform:translateY(0) !important; animation:none !important; } h1.ih-title .line:nth-child(1) > span{animation-delay:.1s} h1.ih-title .line:nth-child(2) > span{animation-delay:.22s} h1.ih-title .line:nth-child(3) > span{animation-delay:.34s} h1.ih-title .ins{color:var(--primary)} .ih-right{ display:flex;flex-direction:column;gap:24px; padding-bottom:16px; animation:fadeUp 1s var(--ease) .5s both; } .ih-desc{font-size:19px;line-height:1.6;color:var(--muted);max-width:40ch} .ih-desc em{color:var(--ink);font-style:normal;font-weight:500} .ih-strip{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); animation:fadeUp 1s var(--ease) .7s both; } .ih-strip > div{ padding:20px 28px;border-right:1px solid var(--border); display:flex;align-items:center;gap:12px; } .ih-strip > div:last-child{border-right:none} .ih-strip .ih-icon{ width:36px;height:36px;border-radius:10px; background:var(--bg-lilac);display:flex; align-items:center;justify-content:center; color:var(--primary);font-size:16px;flex-shrink:0; } .ih-strip .ih-text strong{display:block;font-size:14px;font-weight:500;color:var(--ink)} .ih-strip .ih-text span{font-size:13px;color:var(--muted)} @media(max-width:768px){ .ih-top{grid-template-columns:1fr;gap:24px} .ih-strip{grid-template-columns:1fr} } /* ═══════════ MEGAMENÚ NUEVO — FIX DEFINITIVO ═══════════ */ .megacard:hover .mc-title{color:#fff !important} .megacard:hover .mc-desc{color:rgba(255,255,255,.65) !important} .megacard:hover .mc-chip{background:rgba(255,255,255,.15) !important;color:#fff !important}