/* ============================================================= LP · PARQUES Y PLANTAS INDUSTRIALES Skin: "Industrial Premium 2025" ============================================================= */ /* ================================================================= 1. TOKENS LOCALES ================================================================= */ .site { /* Manual de marca: Janna LT Bold (titulos) + Brown Pro (cuerpo). Ambas son comerciales, no hay webfont libre. Sustitutos cargados desde Google Fonts en el de cada pagina. */ --font-display: 'Outfit', system-ui, sans-serif; --font-sans: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --bg: #F7F6EF; --bg-alt: #EFEDE3; --bg-cream: #FBFAF4; --bg-card: #FFFFFF; --bg-dark: #0E0E1F; --bg-dark-alt: #1A1A30; --bg-dark-soft: #25253D; --ink: #0E0E1F; --ink-soft: #2D2D45; --ink-muted: #6E6E84; --ink-light: #B5B5C2; --paper: #FAFAF7; --orange: #E55030; --orange-light: #FF7752; --orange-soft: rgba(229, 80, 48, 0.08); --orange-deep: #C13E22; --whatsapp: #25D366; --whatsapp-deep: #1EBE5C; --line: #DEDCD2; --line-strong: #C5C2B5; --line-dark: rgba(255, 255, 255, 0.08); --line-dark-strong: rgba(255, 255, 255, 0.16); --shadow-sm: 0 2px 4px rgba(14, 14, 31, 0.04), 0 1px 2px rgba(14, 14, 31, 0.06); --shadow-md: 0 8px 16px -4px rgba(14, 14, 31, 0.06), 0 4px 8px -2px rgba(14, 14, 31, 0.04); --shadow-lg: 0 24px 48px -12px rgba(14, 14, 31, 0.18), 0 8px 16px -4px rgba(229, 80, 48, 0.08); --shadow-orange: 0 16px 40px -8px rgba(229, 80, 48, 0.4); background-color: var(--bg); color: var(--ink); font-family: var(--font-sans); font-weight: 400; } /* ================================================================= 2. TYPOGRAPHY ================================================================= */ .site h1, .site h2, .site h3, .site h4, .site .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); line-height: 1.02; } .site h2.display, .site .section-head h2 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; line-height: 1; } .site h1 em, .site h2 em, .site .display em { font-style: italic; color: var(--orange); font-weight: 600; } .site .display--inverse { color: var(--paper); } .site .display--inverse em { color: var(--orange-light); } .site .display--on-orange { color: var(--paper); } .site .display--on-orange em { color: var(--paper); font-style: italic; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } .site p { color: var(--ink-soft); line-height: 1.55; font-weight: 400; } .site strong { color: var(--ink); font-weight: 600; } /* ----- KICKER (editorial, NO pill ai-generated) ----- */ .site .kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-5); } .site .kicker__line { display: inline-block; width: 8px; height: 8px; background: var(--orange); flex-shrink: 0; border-radius: var(--r-leve); } .site .kicker--inverse { color: rgba(255, 255, 255, 0.78); } .site .kicker--inverse .kicker__line { background: var(--orange); } .site .kicker--on-orange { color: var(--paper); } .site .kicker--on-orange .kicker__line { background: var(--paper); } /* ================================================================= 3. SECTION SCAFFOLD ================================================================= */ .site .section { padding-block: clamp(5rem, 8vw, 8rem); position: relative; } .site .section-head { max-width: 780px; margin-bottom: var(--space-9); } .site .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .site .section-head--center .kicker { justify-content: center; } .site .section-head--split { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-10); max-width: none; align-items: end; } @media (min-width: 900px) { .site .section-head--split { grid-template-columns: 1.4fr 1fr; gap: var(--space-9); } } .site .section-head__lede { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-muted); margin: 0; max-width: 56ch; } .site .section-head__lede--stacked { margin-top: var(--space-5); max-width: 64ch; } .site .section-cta { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap; } /* ================================================================= 4. BUTTONS ================================================================= */ .site .btn { border-radius: var(--r-leve); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; padding: 12px 22px; text-transform: none; gap: var(--space-2); transition: background-color var(--duration) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .site .btn--lg { padding: 15px 26px; font-size: 1rem; } .site .btn--sm { padding: 8px 16px; font-size: 0.8125rem; } .site .btn--block { width: 100%; } .site .btn--primary { background: var(--orange); color: var(--paper); border-color: var(--orange); box-shadow: var(--shadow-orange); } .site .btn--primary:hover:not(:disabled) { background: var(--orange-deep); border-color: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 24px 48px -8px rgba(229, 80, 48, 0.5); } .site .btn--primary svg { transition: transform var(--duration) var(--ease-out); } .site .btn--primary:hover svg { transform: translateX(4px); } .site .btn--inverse { background: var(--ink); color: var(--paper); border-color: var(--ink); } .site .btn--inverse:hover:not(:disabled) { background: var(--bg-dark-alt); transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(14, 14, 31, 0.4); } .site .btn--inverse svg { transition: transform var(--duration) var(--ease-out); } .site .btn--inverse:hover svg { transform: translateX(4px); } /* ================================================================= 5. HEADER ================================================================= */ .site .site-header { background: rgba(247, 246, 239, 0.85); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px) saturate(180%); } .site .site-header__inner { padding-block: var(--space-3); gap: var(--space-5); } .site .site-header__logo { display: flex; align-items: center; line-height: 1; } .site .site-header__logo-img { height: 40px; width: auto; display: block; } .site .site-header__nav { margin-left: auto; margin-right: var(--space-5); display: none; gap: var(--space-6); } @media (min-width: 960px) { .site .site-header__nav { display: flex; } } .site .site-header__nav a { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); transition: color var(--duration) var(--ease-out); position: relative; } /* Header nav: solo cambia el color de la palabra al hover (sin subrayado, sin cuadrito) */ .site .site-header__nav > a, .site .nav-drop__toggle { position: relative; transition: color var(--duration) var(--ease-out); } .site .site-header__nav > a:hover, .site .site-header__nav > a:focus-visible, .site .nav-drop:hover .nav-drop__toggle, .site .nav-drop__toggle:focus-visible { color: var(--orange); } .site .header-phone { display: none; } @media (min-width: 1280px) { .site .header-phone { display: inline-flex; } } .site .header-phone svg { flex-shrink: 0; } /* ================================================================= 6. HERO ================================================================= */ .site .hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: 0; background: var(--bg); position: relative; overflow: hidden; } .site .hero__atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .site .hero__mesh { position: absolute; inset: -20%; background: radial-gradient(ellipse at 80% 20%, rgba(229, 80, 48, 0.18), transparent 45%), radial-gradient(ellipse at 20% 80%, rgba(14, 14, 31, 0.08), transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(229, 80, 48, 0.08), transparent 50%); filter: blur(40px); } .site .hero__plexus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .site .hero .kicker { color: var(--ink-soft); } .site .hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-9); align-items: start; margin-bottom: var(--space-9); } @media (min-width: 960px) { .site .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-9); align-items: center; } } .site .hero__copy { display: flex; flex-direction: column; } .site .hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-bottom: var(--space-5); max-width: 14ch; } .site .hero__lede { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.55; color: var(--ink-soft); max-width: 50ch; margin-bottom: var(--space-6); font-weight: 400; } .site .hero__lede strong { color: var(--ink); font-weight: 600; } .site .hero__bullets { list-style: none; padding: 0; margin: 0 0 var(--space-7) 0; display: grid; gap: var(--space-3); } .site .hero__bullets li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9375rem; color: var(--ink); font-weight: 500; } .site .hero__bullets li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--paper); background: var(--orange); border-radius: var(--r-leve); padding: 4px; } .site .hero__phone { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: rgba(255, 255, 255, 0.70); border: 1px solid var(--line); border-radius: var(--r-leve); margin-top: auto; backdrop-filter: blur(8px); } .site .hero__phone-label { font-size: 0.8125rem; color: var(--ink-muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .site .hero__phone-num { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-left: auto; letter-spacing: -0.01em; transition: color var(--duration) var(--ease-out); } .site .hero__phone-num:hover { color: var(--orange); } .site .hero__phone-num svg { color: var(--orange); } /* HERO FORM */ .site .hero-form { background: var(--bg-card); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-leve); box-shadow: var(--shadow-lg); position: relative; } .site .hero-form::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-leve); padding: 1px; background: linear-gradient(135deg, rgba(229, 80, 48, 0.5), transparent 40%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .site .hero-form .form { gap: var(--space-3); } .site .hero-form .form-row { gap: var(--space-3); } .site .hero-form .form-field { gap: 6px; } .site .hero-form__head { margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); } .site .hero-form__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 10px; background: rgba(229, 80, 48, 0.1); color: var(--orange); border-radius: var(--r-leve); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); } .site .hero-form__badge-dot { width: 6px; height: 6px; border-radius: var(--r-leve); background: var(--orange); animation: dotPulse 2s ease-in-out infinite; } .site .hero-form__head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--space-2); color: var(--ink); line-height: 1.05; } .site .hero-form__head p { font-size: 0.875rem; color: var(--ink-muted); margin: 0; } .site .hero-form__head strong { color: var(--ink); font-weight: 600; } .site .hero-form .form-label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: var(--space-2); } .site .hero-form .form-label__hint { color: var(--ink-muted); font-weight: 400; font-size: 0.75rem; } .site .hero-form .required { color: var(--orange); } .site .hero-form .form-input, .site .hero-form .form-select, .site .hero-form .form-textarea { background: var(--bg-cream); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r-leve); padding: 9px 13px; font-family: var(--font-sans); font-size: 0.9375rem; } .site .hero-form .form-input::placeholder, .site .hero-form .form-textarea::placeholder { color: var(--ink-light); } .site .hero-form .form-input:focus, .site .hero-form .form-select:focus, .site .hero-form .form-textarea:focus { border-color: var(--orange); background: var(--bg-card); box-shadow: 0 0 0 4px rgba(229, 80, 48, 0.12); outline: none; } .site .hero-form .btn--primary { margin-top: var(--space-2); } .site .hero-form .form-help { font-size: 0.75rem; color: var(--ink-muted); margin-top: var(--space-2); } .site .hero-form .form-help a { color: var(--ink); text-decoration: underline; } /* HERO STATS BAND - FULL WIDTH */ .site .hero__stats-band { width: 100%; background: var(--bg); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin-top: var(--space-9); position: relative; z-index: 2; } .site .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-6) 0; } .site .stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; } .site .stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; color: var(--ink); letter-spacing: -0.04em; } .site .stat__value i { font-style: normal; color: var(--orange); font-weight: 600; } .site .stat__value .stat__slash { color: var(--orange); letter-spacing: 0.05em; } .site .stat__value .stat__seven { color: var(--navy-700); letter-spacing: 0.02em; } .site .stat__label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2); } .site .stat__divider { width: 1px; height: 50px; background: var(--line-strong); flex-shrink: 0; } @media (max-width: 900px) { .site .hero__stats { grid-template-columns: 1fr; gap: var(--space-5); } .site .stat__divider { display: none; } } /* ================================================================= 7. TICKER NARANJA (debajo del hero) ================================================================= */ .site .ticker { background: var(--orange); color: var(--paper); padding: 16px 0; overflow: hidden; position: relative; z-index: 2; border-top: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .site .ticker__track { display: flex; gap: 28px; align-items: center; white-space: nowrap; animation: tickerScroll 50s linear infinite; width: max-content; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .site .ticker__sep { color: rgba(255, 255, 255, 0.6); font-size: 0.5rem; } .site .ticker:hover .ticker__track { animation-play-state: paused; } @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ================================================================= 8. LO QUE OFRECEMOS - BENTO ================================================================= */ .site .section--ofrecemos.section--proceso { background: var(--bg-cream); border-top: 1px solid var(--line); } .site .bento { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 700px) { .site .bento { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .site .bento { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--space-3); } .site .bento__card--featured { grid-column: 1; grid-row: 1 / span 2; } .site .bento__card:not(.bento__card--featured) { min-height: 200px; } } .site .bento__card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); position: relative; overflow: hidden; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .bento__card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(229, 80, 48, 0.06), transparent 60%); pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease-out); } .site .bento__card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-md); } .site .bento__card:hover::before { opacity: 1; } /* FEATURED CARD - MANIFESTO en navy con decoración abstracta (sin foto) */ .site .bento__card--featured { background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; position: relative; isolation: isolate; } .site .bento__card--featured::before { content: none; } /* Decoración abstracta: grid + glow naranja + circles tipo radar */ .site .bento__featured-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .site .bento__featured-grid { position: absolute; inset: 0; width: 100%; height: 100%; } .site .bento__featured-glow { position: absolute; top: -40%; right: -30%; width: 80%; height: 80%; background: radial-gradient( circle at center, rgba(229, 80, 48, 0.32) 0%, rgba(229, 80, 48, 0.12) 25%, transparent 60% ); pointer-events: none; } .site .bento__featured-lines { position: absolute; bottom: -30px; right: -30px; width: 220px; height: 220px; opacity: 0.7; } .site .bento__featured-watermark { position: absolute; top: var(--space-5); right: var(--space-5); width: 120px; height: auto; opacity: 0.12; pointer-events: none; filter: brightness(0) invert(1); } .site .bento__featured-body { position: relative; z-index: 1; flex: 1; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } @media (min-width: 1024px) { .site .bento__featured-body { padding: var(--space-7); } } .site .bento__card--featured h3 { color: #FFFFFF !important; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-top: var(--space-2); } .site .bento__card--featured p { color: rgba(255, 255, 255, 0.78) !important; font-size: 0.9375rem; line-height: 1.5; max-width: 44ch; } .site .bento__card--featured .bento__featured-lead { color: rgba(255, 255, 255, 0.9) !important; font-weight: 500; } .site .bento__card--featured .bento__icon { color: var(--orange); width: 72px; height: 72px; } .site .bento__card--featured .bento__bullets li { color: rgba(255, 255, 255, 0.92) !important; font-size: 0.9375rem; line-height: 1.4; } .site .bento__card--featured .bento__bullets { border-top-color: rgba(255, 255, 255, 0.14); margin-top: var(--space-4); padding-top: var(--space-4); gap: var(--space-3); } .site .bento__icon { width: 44px; height: 44px; color: var(--orange); display: flex; align-items: center; justify-content: center; } .site .bento__icon svg { width: 100%; height: 100%; } .site .bento__card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0; } .site .bento__card p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } .site .bento__bullets { list-style: none; padding: 0; margin: var(--space-3) 0 0 0; display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.18); } .site .bento__bullets li { position: relative; padding-left: var(--space-5); font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.95); } .site .bento__bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 12px; height: 1.5px; background: var(--orange); } /* ================================================================= 9. SOLUCIONES ================================================================= */ .site .section--soluciones { background: var(--orange); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } /* Header en blanco sobre naranja */ .site .section--soluciones .kicker { color: #fff; } .site .section--soluciones .kicker__line { background: #fff; } .site .section--soluciones .kicker::after { background: #fff; } .site .section--soluciones .display { color: #fff; } .site .section--soluciones .display em { color: var(--ink); } .site .section--soluciones .section-head__lede { color: rgba(255,255,255,0.9); } /* Watermark sutil del isotipo */ .site .section--soluciones .container { position: relative; z-index: 1; } /* CTA al final: botón en navy oscuro para contraste sobre naranja */ .site .section--soluciones .section-cta .btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); padding: 16px 30px; box-shadow: 0 10px 26px -10px rgba(14,14,31,0.5); } .site .section--soluciones .section-cta .btn--primary:hover { background: #000; border-color: #000; transform: translateY(-2px); } .site .solutions { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 600px) { .site .solutions { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .site .solutions { grid-template-columns: repeat(3, 1fr); } } .site .solution { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .solution:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-md); } .site .solution__num { position: absolute; bottom: -1.5rem; right: -0.5rem; font-family: var(--font-display); font-size: clamp(6rem, 12vw, 9rem); font-weight: 700; color: rgba(229, 80, 48, 0.08); letter-spacing: -0.04em; line-height: 1; pointer-events: none; transition: color var(--duration) var(--ease-out); z-index: 0; } .site .solution:hover .solution__num { color: rgba(229, 80, 48, 0.16); } .site .solution__icon { width: 48px; height: 48px; color: var(--orange); background: rgba(229, 80, 48, 0.1); border-radius: var(--r-leve); display: flex; align-items: center; justify-content: center; padding: 10px; flex-shrink: 0; position: relative; z-index: 1; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site .solution__icon svg { width: 100%; height: 100%; } .site .solution:hover .solution__icon { background: var(--orange); color: var(--paper); transform: scale(1.05); } .site .solution h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; margin: 0; } .site .solution p { position: relative; z-index: 1; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); margin: 0; } /* ================================================================= 10. INDUSTRIAS (DARK) - más compactas ================================================================= */ .site .section--industrias { background: var(--bg-dark); color: var(--paper); position: relative; overflow: hidden; } .site .section--industrias::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(ellipse, rgba(229, 80, 48, 0.08), transparent 60%); filter: blur(80px); pointer-events: none; } .site .industries { display: grid; grid-template-columns: 1fr; gap: var(--space-3); position: relative; z-index: 1; } @media (min-width: 600px) { .site .industries { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .site .industries { grid-template-columns: repeat(6, 1fr); } .site .industries > :nth-child(1) { grid-column: 1 / span 2; } .site .industries > :nth-child(2) { grid-column: 3 / span 2; } .site .industries > :nth-child(3) { grid-column: 5 / span 2; } .site .industries > :nth-child(4) { grid-column: 2 / span 2; } .site .industries > :nth-child(5) { grid-column: 4 / span 2; } } /* CAMBIO: ya no son cuadradas, layout horizontal compacto */ .site .industry { position: relative; background: color-mix(in srgb, var(--bg-dark) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-dark-strong); border-radius: var(--r-leve); padding: var(--space-5) var(--space-6); display: flex; flex-direction: row; align-items: center; gap: var(--space-4); overflow: hidden; min-height: 0; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), background var(--duration) var(--ease-out); } .site .industry:hover { border-color: var(--orange); transform: translateY(-3px); background: color-mix(in srgb, var(--bg-dark) 60%, transparent); } .site .industry__top { display: flex; align-items: center; flex-shrink: 0; } .site .industry__icon { width: 44px; height: 44px; color: var(--orange); display: flex; align-items: center; justify-content: center; background: rgba(229, 80, 48, 0.1); border-radius: var(--r-leve); padding: 8px; flex-shrink: 0; } .site .industry__icon svg { width: 100%; height: 100%; } .site .industry__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--paper); letter-spacing: -0.02em; line-height: 1.25; } .site .industry__name i { font-style: italic; color: rgba(255, 255, 255, 0.55); font-weight: 500; font-size: 0.9em; } /* ================================================================= 11. COBERTURA ================================================================= */ .site .section--cobertura { background: var(--bg-cream); } .site .coverage { display: grid; grid-template-columns: 1fr; gap: var(--space-9); align-items: center; } @media (min-width: 900px) { .site .coverage { grid-template-columns: 1fr 1.1fr; gap: var(--space-10); } } .site .coverage__copy h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; margin-bottom: var(--space-5); } .site .coverage__lede { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-muted); margin-bottom: var(--space-6); max-width: 50ch; } .site .cov-list { list-style: none; padding: 0; margin: 0 0 var(--space-7) 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .site .cov-list li { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); transition: padding var(--duration) var(--ease-out); } .site .cov-list li:hover { padding-left: var(--space-3); } .site .cov-list__code { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--orange-deep); background: rgba(229, 80, 48, 0.1); padding: 5px 10px; border-radius: var(--r-leve); text-align: center; width: fit-content; white-space: nowrap; } .site .cov-list li > span:last-child { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .site .coverage__map { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-5); margin: 0; position: relative; overflow: hidden; } .site .coverage__map-img { width: 100%; height: auto; max-width: 600px; display: block; margin: 0 auto; border-radius: var(--r-leve); min-height: 300px; background: linear-gradient(135deg, rgba(229, 80, 48, 0.1), rgba(14, 14, 31, 0.05)); } .site .coverage__map-cap { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .site .coverage__map-cap span:nth-child(2) { color: var(--orange); } /* ================================================================= 12. CLIENTES - MARQUEE ================================================================= */ .site .section--clientes { background: var(--bg); padding-block: clamp(4rem, 6vw, 6rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .site .marquee { width: 100%; overflow: hidden; margin: var(--space-9) 0 var(--space-7) 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .site .marquee__track { display: flex; gap: var(--space-4); width: max-content; animation: marqueeScroll 50s linear infinite; } .site .marquee:hover .marquee__track { animation-play-state: paused; } .site .marquee__item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 130px; width: 260px; padding: var(--space-5) var(--space-7); background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-leve); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .marquee__item:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 8px 20px -4px rgba(14, 14, 31, 0.08); } .site .marquee__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .site .marquee__track, .site .ticker__track { animation: none; } .site .hero-form__badge-dot { animation: none; } } /* ================================================================= 13. ¿POR QUÉ ELEGIRNOS? - NÚMEROS OUTLINE ================================================================= */ .site .section--why { background: var(--orange); color: var(--paper); position: relative; overflow: hidden; } .site .section--why::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; } .site .section--why::after { content: ''; position: absolute; top: 10%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 60%); filter: blur(60px); pointer-events: none; } .site .section--why .section-head { position: relative; z-index: 1; } .site .section--why .display { color: var(--paper); } /* Logo decorativo gigante en la sección naranja (esquina inferior derecha) */ .site .why-bg-logo { position: absolute; bottom: var(--space-6); right: var(--space-7); width: 200px; height: auto; pointer-events: none; z-index: 1; opacity: 0.10; filter: brightness(0) invert(1); } .site .why-bg-logo img { width: 100%; height: auto; display: block; } @media (max-width: 1024px) { .site .why-bg-logo { bottom: var(--space-5); right: var(--space-5); width: 140px; } } @media (max-width: 720px) { .site .why-bg-logo { width: 100px; opacity: 0.14; } } .site .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7) var(--space-7); position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: var(--space-9); } @media (min-width: 700px) { .site .why-grid { grid-template-columns: 1fr 1fr; gap: var(--space-9) var(--space-9); } } .site .why-item { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } @media (min-width: 600px) { .site .why-item { grid-template-columns: auto 1fr; gap: var(--space-5); } } .site .why-item__num { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); letter-spacing: -0.04em; transition: -webkit-text-stroke var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .site .why-item:hover .why-item__num { color: var(--paper); -webkit-text-stroke: 1.5px var(--paper); } .site .why-item__body h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--paper); line-height: 1.15; margin-bottom: var(--space-2); } .site .why-item__body p { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); max-width: 38ch; } .site .section--why .section-cta { margin-top: var(--space-10); } .site .section--why .btn--inverse { background: var(--ink); border-color: var(--ink); color: var(--paper); } .site .section--why .btn--inverse:hover:not(:disabled) { background: var(--bg-dark-alt); box-shadow: 0 16px 40px -8px rgba(14, 14, 31, 0.45); } .site .why-phone { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--paper); letter-spacing: -0.01em; padding: 12px 18px; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-leve); transition: background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); } .site .why-phone:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--paper); } /* ================================================================= 14. WHATSAPP FLOTANTE (pill con texto) ================================================================= */ .site .wa-float { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 100; display: inline-flex; align-items: center; gap: var(--space-3); padding: 12px 20px 12px 14px; background: var(--whatsapp); color: var(--paper); border-radius: var(--r-leve); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(14, 14, 31, 0.15); transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .wa-float__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; } .site .wa-float__icon svg { width: 100%; height: 100%; } .site .wa-float__label { position: relative; z-index: 2; white-space: nowrap; } .site .wa-float:hover { background: var(--whatsapp-deep); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37, 211, 102, 0.5), 0 8px 16px rgba(14, 14, 31, 0.2); } .site .wa-float__pulse { position: absolute; inset: 0; border-radius: var(--r-leve); background: var(--whatsapp); opacity: 0.4; z-index: 1; animation: waPulse 2.4s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.45; } 70% { transform: scale(1.08); opacity: 0; } 100% { transform: scale(1.08); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .site .wa-float__pulse { animation: none; opacity: 0; } } /* En mobile: arriba del sticky CTA, ocultar texto en pantallas chicas */ @media (max-width: 720px) { .site .wa-float { bottom: 86px; right: var(--space-4); padding: 10px 16px 10px 12px; font-size: 0.875rem; } .site .wa-float__icon { width: 26px; height: 26px; } } @media (max-width: 380px) { .site .wa-float__label { display: none; } .site .wa-float { padding: 12px; width: 52px; height: 52px; justify-content: center; } } /* ================================================================= 15. STICKY MOBILE CTA ================================================================= */ .site .sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: var(--space-3); background: rgba(247, 246, 239, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); gap: var(--space-2); box-shadow: 0 -8px 24px rgba(14, 14, 31, 0.06); } .site .sticky-cta__phone { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-leve); font-size: 0.9375rem; font-weight: 500; color: var(--ink); background: var(--bg-card); } .site .sticky-cta__quote { flex: 1.2; padding: 12px 16px; font-size: 0.9375rem; font-weight: 500; } @media (max-width: 720px) { .site .sticky-cta { display: flex; } .site main { padding-bottom: 80px; } } /* ================================================================= 16. FOOTER ================================================================= */ .site .site-footer { background: var(--bg-dark); margin-top: 0; border-top: 1px solid var(--line-dark); } .site .site-footer__col h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; font-weight: 500; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: var(--space-3); } .site .site-footer__brand h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--paper); } .site .site-footer__col p { color: rgba(255, 255, 255, 0.65); } .site .site-footer__col a { color: rgba(255, 255, 255, 0.78); } .site .site-footer__col a:hover { color: var(--orange); } .site .site-footer__cert { font-family: var(--font-mono); border-radius: var(--r-leve); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; border-color: var(--line-dark-strong); color: rgba(255, 255, 255, 0.6); } /* ================================================================= 17. RESPONSIVE ================================================================= */ @media (max-width: 700px) { .site .hero__phone { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .site .hero__phone-num { margin-left: 0; font-size: 1.25rem; } .site .hero-form { padding: var(--space-5); } .site .section-cta { flex-direction: column; gap: var(--space-3); } .site .section-cta .btn, .site .section-cta .why-phone { width: 100%; justify-content: center; } .site .marquee__item { min-width: 180px; height: 70px; } .site .marquee__item span { font-size: 0.9375rem; } } /* ================================================================= OPERACIÓN VISIBLE - hero card + 4 tiles row ================================================================= */ .site .section--operation { background: var(--bg); } .site .operation-grid { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-9); } /* HERO CARD - acceso.jpg ancho completo con overlay editorial */ .site .op-hero { position: relative; width: 100%; border-radius: var(--r-leve); overflow: hidden; background: var(--ink); aspect-ratio: 21 / 9; min-height: 320px; } @media (max-width: 720px) { .site .op-hero { aspect-ratio: 4 / 5; min-height: 480px; } } .site .op-hero__media { position: absolute; inset: 0; } .site .op-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .site .op-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(14, 14, 31, 0.92) 0%, rgba(14, 14, 31, 0.7) 35%, rgba(14, 14, 31, 0.05) 60%, transparent 100% ); display: flex; align-items: center; padding: var(--space-7) var(--space-8); } @media (max-width: 720px) { .site .op-hero__overlay { background: linear-gradient( 180deg, rgba(14, 14, 31, 0.1) 0%, rgba(14, 14, 31, 0.4) 45%, rgba(14, 14, 31, 0.95) 80% ); align-items: flex-end; padding: var(--space-6); } } .site .op-hero__content { max-width: 480px; color: var(--paper); } .site .op-hero .kicker { margin-bottom: var(--space-4); } .site .op-hero .kicker--inverse { color: rgba(255, 255, 255, 0.92); } .site .op-hero .kicker__line { background: var(--orange-light); } .site .op-hero h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--paper); margin: 0 0 var(--space-3); } @media (min-width: 1024px) { .site .op-hero h3 { font-size: 2.25rem; } } @media (max-width: 720px) { .site .op-hero h3 { font-size: 1.5rem; } } .site .op-hero p { font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); margin: 0; } @media (max-width: 720px) { .site .op-hero p { font-size: 0.9375rem; } } /* ROW DE 4 CARDS */ .site .op-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 640px) { .site .op-row { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site .op-row { grid-template-columns: repeat(4, 1fr); } } .site .op-tile { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .op-tile:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 12px 32px -8px rgba(14, 14, 31, 0.12); } .site .op-tile__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-card-deep); } .site .op-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.6s var(--ease-out); } .site .op-tile:hover .op-tile__media img { transform: scale(1.04); } .site .op-tile__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .site .op-tile__body h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .site .op-tile__body p { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); margin: 0; } @media (max-width: 720px) { .site .op-tile__media { aspect-ratio: 16 / 10; } .site .op-tile__body { padding: var(--space-4); } } /* ================================================================= MODAL CONTACTO ================================================================= */ .site .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); pointer-events: none; opacity: 0; transition: opacity 0.25s var(--ease-out); } .site .modal--open { pointer-events: auto; opacity: 1; } .site .modal__overlay { position: absolute; inset: 0; background: rgba(14, 14, 31, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .site .modal__dialog { position: relative; background: var(--bg-card); border-radius: var(--r-leve); width: 100%; max-width: 980px; max-height: 92vh; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); transform: scale(0.96) translateY(8px); transition: transform 0.3s var(--ease-out); } .site .modal--open .modal__dialog { transform: scale(1) translateY(0); } .site .modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; border-radius: var(--r-leve); background: rgba(14, 14, 31, 0.85); color: var(--paper); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--duration), transform var(--duration); } .site .modal__close:hover { background: var(--ink); transform: scale(1.06); } .site .modal__split { display: grid; grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; } @media (min-width: 880px) { .site .modal__split { grid-template-columns: 1.15fr 0.85fr; max-height: none; } } .site .modal__form-side { padding: var(--space-6) var(--space-6) var(--space-5); overflow-y: auto; } @media (min-width: 880px) { .site .modal__form-side { padding: var(--space-8) var(--space-8) var(--space-6); max-height: 92vh; } } .site .modal__head { margin-bottom: var(--space-5); } .site .modal__head .kicker { margin-bottom: var(--space-3); } .site .modal__head h2 { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0 0 var(--space-2); } .site .modal__head h2 em { font-style: italic; color: var(--orange); } .site .modal__head p { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; } .site .modal__form { gap: var(--space-3); } .site .modal__form .form-row { gap: var(--space-3); } .site .modal__form .form-field { gap: 6px; } .site .modal__form .form-label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); } .site .modal__form .form-input, .site .modal__form .form-select { background: var(--bg-cream); border: 1.5px solid var(--line); border-radius: var(--r-leve); padding: 9px 13px; font-size: 0.9375rem; color: var(--ink); } .site .modal__form .form-input:focus, .site .modal__form .form-select:focus { border-color: var(--orange); background: var(--bg-card); box-shadow: 0 0 0 4px rgba(229, 80, 48, 0.12); outline: none; } .site .modal__form .required { color: var(--orange); } .site .modal__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .site .modal__divider::before, .site .modal__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .site .modal__direct { display: grid; gap: var(--space-3); } .site .modal__direct-cta { display: flex; align-items: center; gap: var(--space-4); padding: 14px 18px; border-radius: var(--r-leve); border: 1.5px solid var(--line); text-decoration: none; background: var(--bg-card); transition: border-color var(--duration), transform var(--duration), box-shadow var(--duration); } .site .modal__direct-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -4px rgba(14, 14, 31, 0.12); } .site .modal__direct-cta--phone:hover { border-color: var(--orange); } .site .modal__direct-cta--whatsapp:hover { border-color: var(--whatsapp); } .site .modal__direct-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-leve); display: inline-flex; align-items: center; justify-content: center; } .site .modal__direct-cta--phone .modal__direct-icon { background: var(--orange); color: var(--paper); } .site .modal__direct-cta--phone .modal__direct-icon svg { width: 20px; height: 20px; } .site .modal__direct-cta--whatsapp .modal__direct-icon { background: var(--whatsapp); color: var(--paper); } .site .modal__direct-cta--whatsapp .modal__direct-icon svg { width: 26px; height: 26px; } .site .modal__direct-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .site .modal__direct-label { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; } .site .modal__direct-value { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .site .modal__legal { font-size: 0.75rem; color: var(--ink-muted); margin-top: var(--space-4); text-align: center; } .site .modal__legal a { color: var(--ink); text-decoration: underline; } /* MEDIA SIDE */ .site .modal__media-side { position: relative; display: none; overflow: hidden; background: var(--ink); min-height: 220px; } @media (min-width: 880px) { .site .modal__media-side { display: block; } } .site .modal__media-img { width: 100%; height: 100%; object-fit: cover; display: block; } .site .modal__media-logo { position: absolute; top: var(--space-5); left: var(--space-5); z-index: 3; background: rgba(255, 255, 255, 0.96); padding: 6px 16px; border-radius: var(--r-leve); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site .modal__media-logo img { height: 28px; width: auto; display: block; } .site .modal__media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 31, 0.1) 0%, rgba(14, 14, 31, 0.55) 60%, rgba(14, 14, 31, 0.92) 100% ); display: flex; align-items: flex-end; padding: var(--space-7); } .site .modal__media-card { color: var(--paper); } .site .modal__media-card p { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; color: var(--paper); margin: 0; } @media (max-width: 720px) { .site .modal { padding: 0; align-items: flex-end; } .site .modal__dialog { max-height: 100vh; height: auto; border-radius: var(--r-leve); max-width: 100%; } .site .modal__form-side { padding: var(--space-6) var(--space-5); } .site .modal__head h2 { font-size: 1.375rem; } } @media (prefers-reduced-motion: reduce) { .site .modal, .site .modal__dialog { transition: none; } } /* ============================================================= SITE ADDITIONS - Home corporativa (integer.mx) Extiende el sistema de la LP aprobada para el sitio completo. ============================================================= */ /* ---------- NAV DROPDOWN (Soluciones) ---------- */ .site .nav-drop { position: relative; display: inline-flex; align-items: center; } .site .nav-drop__toggle { display: inline-flex; align-items: center; gap: 6px; } .site .nav-drop__toggle svg { transition: transform var(--duration) var(--ease-out); } .site .nav-drop:hover .nav-drop__toggle svg, .site .nav-drop:focus-within .nav-drop__toggle svg { transform: rotate(180deg); } .site .nav-drop__menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 280px; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--r-leve); box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility var(--duration); z-index: var(--z-dropdown); } /* puente invisible para no perder el hover */ .site .nav-drop__menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .site .nav-drop:hover .nav-drop__menu, .site .nav-drop:focus-within .nav-drop__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site .nav-drop__menu a { padding: 10px 14px; border-radius: var(--r-leve); font-size: 0.875rem; white-space: nowrap; } .site .nav-drop__menu a:hover { background: var(--gray-50); color: var(--color-primary); } /* ---------- SOLUCIONES · 4 PILARES ---------- */ @media (min-width: 1024px) { .site .solutions--pillars { grid-template-columns: 1fr 1fr; } } .site .solution--link { text-decoration: none; color: inherit; cursor: pointer; } .site .solution--link h3 { transition: color var(--duration) var(--ease-out); } .site .solution--link:hover h3 { color: var(--color-primary); } .site .solution__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site .solution__list li { position: relative; padding-left: 22px; font-size: 0.9rem; color: var(--muted, var(--color-text-muted)); line-height: var(--leading-snug); } .site .solution__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 2px; background: var(--orange, var(--orange-500)); border-radius: var(--r-leve); } .site .solution__more { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--orange, var(--orange-500)); } .site .solution__more svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); } .site .solution--link:hover .solution__more svg { transform: translateX(4px); } .site .solution__more svg { transition: transform var(--duration) var(--ease-out); } .site .solution--link:hover .solution__more svg { transform: translateX(4px); } /* ---------- TESTIMONIOS ---------- */ .site .section--testimonios { background: var(--bg-alt, var(--gray-50)); } .site .testimonials { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 900px) { .site .testimonials { grid-template-columns: repeat(3, 1fr); } } .site .testimonial { position: relative; margin: 0; background: var(--bg-card, var(--white)); border: 1px solid var(--line, var(--color-border)); border-radius: var(--r-leve); padding: var(--space-7) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .testimonial:hover { border-color: var(--orange-200); transform: translateY(-4px); box-shadow: var(--shadow-md); } .site .testimonial__mark { position: absolute; top: 14px; right: 22px; font-family: var(--font-display); font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--orange-100); pointer-events: none; } .site .testimonial blockquote { margin: 0; font-size: 0.95rem; line-height: var(--leading-relaxed); color: var(--color-text); } .site .testimonial figcaption { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line, var(--color-border)); display: flex; flex-direction: column; gap: 2px; } .site .testimonial__name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink, var(--color-text)); } .site .testimonial__role { font-size: 0.78rem; color: var(--muted, var(--color-text-muted)); letter-spacing: 0.01em; } /* ---------- FOOTER · social + legal ---------- */ .site .site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); } .site .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-leve); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--gray-200); transition: border-color var(--duration), color var(--duration), background var(--duration); } .site .site-footer__social a:hover { border-color: var(--orange-400); color: var(--white); background: rgba(229, 80, 49, 0.18); } .site .site-footer__legal { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--gray-400); margin-top: 6px; } /* ---------- STUB · página en construcción ---------- */ .site .stub { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--space-11) var(--space-5); } .site .stub h1 { margin-bottom: var(--space-3); } .site .stub p { color: var(--color-text-muted); margin-bottom: var(--space-6); } /* ============================================================= SITE ADDITIONS v2 - feedback Home ============================================================= */ /* ---------- KICKERS (eyebrows): subrayado naranja ---------- Mismo font del sistema (mono uppercase); se elimina la línea lateral y se agrega una línea corta naranja bajo el texto. */ .site .kicker { position: relative; display: inline-flex; align-items: center; background: none; padding: 0 0 9px; border: none; border-radius: var(--r-leve); } .site .kicker__line { display: none; } .site .kicker::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: var(--r-leve); background: var(--orange, var(--orange-500)); } .site .section-head--center .kicker { justify-content: center; } .site .section-head--center .kicker::after { left: 50%; transform: translateX(-50%); } /* Centrado real: el lede dentro de headers centrados también se centra */ .site .section-head--center .section-head__lede, .site .section-head--center .section-head__lede--stacked { margin-left: auto; margin-right: auto; text-align: center; } .site .kicker--inverse { color: var(--gray-300); } .site .kicker--inverse::after { background: var(--orange-light, #FF7752); } .site .kicker--on-orange { color: var(--paper, #FAFAF7); } .site .kicker--on-orange::after { background: var(--paper, #FAFAF7); } /* ---------- HERO · contacto directo (chips) ---------- */ .site .hero__contact { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line, var(--color-border)); } .site .hero__contact-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .site .contact-chip { display: inline-flex; align-items: center; padding: 11px 22px; border: none; border-radius: var(--r-leve); background: var(--orange, var(--orange-500)); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--white); transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .contact-chip:hover { background: var(--orange-600); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ---------- NAV BURGER + MENÚ MÓVIL ---------- */ .site .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--r-leve); cursor: pointer; } @media (min-width: 960px) { .site .nav-burger { display: none; } } .site .nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink, var(--color-text)); border-radius: var(--r-leve); transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out); } .site .nav-burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site .nav-burger--open span:nth-child(2) { opacity: 0; } .site .nav-burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site .mobile-nav { border-top: 1px solid var(--color-border); background: var(--white); box-shadow: var(--shadow-md); } @media (min-width: 960px) { .site .mobile-nav { display: none !important; } } .site .mobile-nav nav { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-5); } .site .mobile-nav__group { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); } .site .mobile-nav__group:first-child { margin-top: 0; } .site .mobile-nav nav a { padding: 10px 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink, var(--color-text)); border-bottom: 1px solid var(--gray-100); } .site .mobile-nav nav a:hover { color: var(--color-primary); } .site .mobile-nav__jobs { color: var(--orange, var(--orange-500)) !important; } /* ============================================================= SITE ADDITIONS v3 - bento interactivo Cards en blanco por default; el navy aparece al pasar el cursor (hover) en cada card, incluida la destacada. ============================================================= */ /* Cards normales: navy al hover */ .site .bento__card { transition: background var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .bento__card h3, .site .bento__card p, .site .bento__card .bento__icon { transition: color var(--duration-slow) var(--ease-out); } .site .bento__card:not(.bento__card--featured):hover { background: var(--ink); border-color: var(--ink); } .site .bento__card:not(.bento__card--featured):hover h3 { color: #FFFFFF; } .site .bento__card:not(.bento__card--featured):hover p { color: rgba(255, 255, 255, 0.78); } .site .bento__card:not(.bento__card--featured):hover .bento__icon { color: var(--orange-light, #FF7752); } /* ============================================================= SITE ADDITIONS v4 - carrusel del bento La card destacada queda fija; las 4 cards informativas se muestran una a la vez con flechas. ============================================================= */ @media (min-width: 1024px) { .site .bento { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto; } .site .bento__card--featured { grid-column: 1; grid-row: 1; } } .site .bento-carousel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .site .bento-carousel__viewport { flex: 1; overflow: hidden; border-radius: var(--r-leve); display: flex; } .site .bento-carousel__track { display: flex; width: 100%; transition: transform 0.45s var(--ease-out); } .site .bento-carousel__track .bento__card { flex: 0 0 100%; min-width: 100%; min-height: 280px; justify-content: center; } @media (min-width: 1024px) { .site .bento-carousel__track .bento__card { min-height: 100%; } } .site .bento-carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); } .site .bento-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-leve); border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); cursor: pointer; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site .bento-carousel__btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); transform: translateY(-2px); } .site .bento-carousel__count { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); min-width: 64px; text-align: center; } /* Header compacto en anchos medios (960-1279px) */ @media (min-width: 960px) and (max-width: 1279px) { .site .site-header__nav { gap: var(--space-4); margin-right: var(--space-4); } .site .site-header__nav a { font-size: 0.875rem; } } /* ============================================================= PÁGINAS DE SERVICIO - componentes compartidos (hero interno, proceso, tech, duo, control, cta final) ============================================================= */ /* ---------- HERO INTERNO: grid técnico + glow ---------- */ .site .hero-int { position: relative; padding: calc(var(--space-10) + 72px) 0 var(--space-10); background: linear-gradient(180deg, var(--paper) 0%, #FFFFFF 100%); overflow: hidden; } .site .hero-int__bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(14, 14, 31, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 14, 31, 0.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); } .site .hero-int__bg::after { content: ""; position: absolute; top: -180px; right: -160px; width: 520px; height: 520px; background: radial-gradient(circle at center, rgba(229, 80, 48, 0.16) 0%, rgba(229, 80, 48, 0.06) 40%, transparent 70%); } .site .hero-int__inner { position: relative; max-width: 720px; } .site .hero-int__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 var(--space-5); } .site .hero-int__title em { font-style: normal; color: var(--orange); } .site .hero-int__lede { font-size: 1.0625rem; line-height: var(--leading-relaxed); color: var(--muted); max-width: 58ch; margin-bottom: var(--space-6); } .site .hero-int__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* ---------- PROCESO (timeline RH) ---------- */ .site .section--proceso { background: var(--bg-alt); } .site .process { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: flex; flex-direction: column; } .site .process__step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: var(--space-5); padding: var(--space-6) 0; } .site .process__step + .process__step { border-top: 1px solid var(--line); } .site .process__num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--orange); line-height: 1; padding-top: 4px; } .site .process__body h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-2); } .site .process__body p { color: var(--muted); font-size: 0.95rem; line-height: var(--leading-relaxed); margin: 0 0 var(--space-3); max-width: 64ch; } .site .process__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .site .process__tags span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: 5px 12px; } @media (max-width: 560px) { .site .process__step { grid-template-columns: 1fr; gap: var(--space-2); } } /* ---------- TECH (recurso tecnológico) ---------- */ .site .tech { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; } @media (min-width: 980px) { .site .tech { grid-template-columns: 1.05fr 1fr; } } .site .tech__lede { color: var(--muted); line-height: var(--leading-relaxed); max-width: 52ch; margin-bottom: var(--space-5); } .site .tech__photo { margin: 0; border-radius: var(--r-leve); overflow: hidden; border: 1px solid var(--line); } .site .tech__photo img { display: block; width: 100%; height: 280px; object-fit: cover; } .site .tech-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 560px) { .site .tech-grid { grid-template-columns: 1fr 1fr; } } .site .tech-item { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .tech-item:hover { border-color: var(--orange-200); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .site .tech-item svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--orange); } /* ---------- DUO (procesos + barreras) ---------- */ .site .duo { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 860px) { .site .duo { grid-template-columns: 1fr 1fr; } } .site .duo__card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-7) var(--space-6); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .duo__card:hover { border-color: var(--orange-200); transform: translateY(-4px); box-shadow: var(--shadow-md); } .site .duo__card h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-3); } .site .duo__card p { color: var(--muted); font-size: 0.95rem; line-height: var(--leading-relaxed); margin: 0; } /* ---------- CENTRO DE CONTROL (oscura) ---------- */ .site .section--control { background: var(--ink); color: var(--paper); } .site .control { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 980px) { .site .control { grid-template-columns: 1.1fr 1fr; } } .site .display--inverse { color: #FFFFFF; } .site .display--inverse em { color: var(--orange-light); } .site .control__lede { color: rgba(255, 255, 255, 0.72); line-height: var(--leading-relaxed); max-width: 56ch; margin-bottom: var(--space-5); } .site .control-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .site .control-list li { position: relative; padding-left: 26px; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; line-height: var(--leading-snug); } .site .control-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 2px; background: var(--orange-light); border-radius: var(--r-leve); } .site .control__photo { margin: 0; border-radius: var(--r-leve); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); } .site .control__photo img { display: block; width: 100%; height: 340px; object-fit: cover; } .site .control__photo figcaption { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: rgba(255, 255, 255, 0.04); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); } .site .control__badge { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-light); border: 1px solid rgba(255, 119, 82, 0.4); border-radius: var(--r-leve); padding: 4px 10px; } /* ---------- CTA FINAL (naranja) ---------- */ .site .section--cta-final { background: var(--orange); color: var(--paper); } .site .cta-final { text-align: center; max-width: 720px; margin: 0 auto; } .site .cta-final p { color: rgba(255, 255, 255, 0.88); font-size: 1.0625rem; line-height: var(--leading-relaxed); margin: var(--space-4) 0 var(--space-6); } .site .cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); } /* ============================================================= VIGILANCIA v2 - feedback ============================================================= */ /* Scroll suave + offset por header sticky */ html { scroll-behavior: smooth; } .site [id] { scroll-margin-top: 96px; } /* ---------- Cards de metodología con foto ---------- */ .site .solution--media { padding: 0; overflow: hidden; } .site .solution__media { margin: 0; height: 168px; overflow: hidden; } .site .solution__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .site .solution--media:hover .solution__media img { transform: scale(1.05); } .site .solution__content { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; } .site .solution--media { position: relative; } .site .solution--media .solution__num { position: absolute; top: 152px; left: 16px; z-index: 2; font-size: 0.95rem; color: #FFFFFF; opacity: 0.95; text-shadow: 0 1px 6px rgba(14, 14, 31, 0.6); } /* ---------- Proceso: línea conectora + activación ---------- */ .site .process-wrap { position: relative; max-width: 880px; margin: 0 auto; } .site .process-line { position: absolute; top: 44px; bottom: 44px; left: 17px; width: 2px; background: var(--line); border-radius: var(--r-leve); } .site .process-line__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--orange); border-radius: var(--r-leve); transition: height 0.15s linear; } .site .process { max-width: none; } .site .process__step + .process__step { border-top: none; } .site .process__num { position: relative; z-index: 1; color: var(--gray-400); background: var(--bg-alt); padding: 8px 0; align-self: start; transition: color 0.4s var(--ease-out); } .site .process__step.is-active .process__num { color: var(--orange); } /* Número del proceso en el HOME ("lo que ofrecemos") usa el fondo cream de su sección */ .site .section--ofrecemos.section--proceso .process__num { background: var(--bg-cream); } /* Pills del proceso: blanco translúcido */ .site .process__tags span { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--ink-soft); } @media (max-width: 560px) { .site .process-line { display: none; } .site .process__num { background: transparent; padding: 0; } } /* ---------- Tech: columnas centradas verticalmente ---------- */ @media (min-width: 980px) { .site .tech { align-items: center; } } /* ---------- Acentos naranjas en texto ---------- */ .site .hl { color: var(--orange); font-weight: 600; } /* ---------- Control: foto centrada ---------- */ .site .control__photo { align-self: center; } /* ============================================================= CONSULTORÍA - componentes propios ============================================================= */ /* ---------- Eval-grid (qué evaluamos · íconos) ---------- */ .site .section--evalua { background: var(--bg-alt); } .site .eval-grid { list-style: none; margin: 0; padding: 4px 4px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .site .eval-grid::-webkit-scrollbar { display: none; } @media (min-width: 640px) { .site .eval-grid { grid-auto-columns: 42%; } } @media (min-width: 1000px) { .site .eval-grid { grid-auto-columns: 23.5%; } } .site .eval-item { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-5); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .eval-item:hover { border-color: var(--orange-200); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .site .eval-item__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.10); color: var(--orange); margin-bottom: var(--space-4); } .site .eval-item__icon svg { width: 26px; height: 26px; } .site .eval-item h3 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.2; } .site .eval-item p { font-size: 0.875rem; color: var(--muted); line-height: var(--leading-snug); margin: 0; } /* ---------- Área-list (áreas de consultoría) ---------- */ .site .area-list { border-top: 1px solid var(--line); } .site .area { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-3); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; position: relative; transition: padding var(--duration) var(--ease-out); } .site .area::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(229, 80, 48, 0.05); transition: width var(--duration) var(--ease-out); z-index: 0; } .site .area:hover::before { width: 100%; } .site .area > * { position: relative; z-index: 1; } .site .area:hover { padding-left: var(--space-5); } .site .area__idx { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--line); line-height: 1; transition: color var(--duration) var(--ease-out); } .site .area:hover .area__idx { color: var(--orange); } .site .area__body h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; } .site .area__body p { color: var(--muted); font-size: 0.95rem; line-height: var(--leading-snug); margin: 0; max-width: 70ch; } .site .area__arrow { width: 26px; height: 26px; color: var(--line); transition: color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site .area:hover .area__arrow { color: var(--orange); transform: translateX(4px); } @media (max-width: 620px) { .site .area { grid-template-columns: 44px 1fr; } .site .area__arrow { display: none; } .site .area__idx { font-size: 1.5rem; } } /* ---------- Auditorías anónimas ---------- */ .site .anonimas { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 900px) { .site .anonimas { grid-template-columns: 1fr 1fr; } } .site .anonimas__copy p { color: var(--muted); line-height: var(--leading-relaxed); max-width: 52ch; } .site .detect-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 560px) { .site .detect-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } } .site .detect-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); } .site .detect-list svg { flex-shrink: 0; width: 18px; height: 18px; padding: 5px; border-radius: var(--r-leve); background: var(--orange); color: #FFFFFF; box-sizing: content-box; } /* ---------- Manejo de crisis (oscura) ---------- */ .site .section--crisis { background: var(--ink); color: var(--paper); } .site .crisis__lede { color: rgba(255, 255, 255, 0.72) !important; } .site .crisis-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); } @media (min-width: 760px) { .site .crisis-grid { grid-template-columns: repeat(3, 1fr); } } .site .crisis-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-leve); padding: var(--space-6); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site .crisis-card:hover { border-color: var(--orange-light); transform: translateY(-4px); } .site .crisis-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin: 0 0 var(--space-2); } .site .crisis-card p { color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; line-height: var(--leading-snug); margin: 0; } .site .crisis__note { text-align: center; color: rgba(255, 255, 255, 0.78); max-width: 60ch; margin: 0 auto; } .site .crisis__note strong { color: var(--orange-light); } /* ============================================================= TECNOLOGÍA - componentes propios ============================================================= */ /* ---------- Spec-grid (ficha técnica: ícono al lado) ---------- */ .site .spec-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } @media (min-width: 720px) { .site .spec-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } } .site .spec { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); } .site .spec__icon { flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.10); color: var(--orange); } .site .spec__icon svg { width: 26px; height: 26px; } .site .spec__body h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; line-height: 1.2; } .site .spec__body p { font-size: 0.9rem; color: var(--muted); line-height: var(--leading-snug); margin: 0; } /* ---------- Feature-split (foto + copy) ---------- */ .site .feature-split { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 920px) { .site .feature-split { grid-template-columns: 1fr 1fr; } } .site .feature-split__photo { margin: 0; border-radius: var(--r-leve); overflow: hidden; border: 1px solid var(--line); } .site .feature-split__photo img { display: block; width: 100%; height: 360px; object-fit: cover; } .site .feature-split__copy p { color: var(--muted); line-height: var(--leading-relaxed); max-width: 54ch; margin-bottom: var(--space-4); } .site .feature-split__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site .feature-split__list li { position: relative; padding-left: 24px; color: var(--ink); font-size: 0.95rem; } .site .feature-split__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 13px; height: 2px; background: var(--orange); border-radius: var(--r-leve); } /* ---------- Banda (conexión a Centro de Control) ---------- */ .site .section--band { background: var(--bg-alt); } .site .band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); background: var(--ink); border-radius: var(--r-leve); padding: var(--space-8); } .site .band__copy { max-width: 60ch; } .site .band__copy h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; margin: 0 0 var(--space-2); line-height: 1.15; } .site .band__copy p { color: rgba(255, 255, 255, 0.72); margin: 0; line-height: var(--leading-snug); } /* ---------- Footer: legibilidad del copy de marca ---------- */ .site .site-footer__brand p { color: var(--gray-200); } .site .site-footer__brand p strong { color: var(--orange-light, #FF7752); font-weight: 700; } /* ---------- Tecnología: foto de plataforma menos alargada ---------- */ .site.page-tecnologia .control__photo img { height: auto; aspect-ratio: 4 / 3; } /* ============================================================= SERVICIOS ESPECIALIZADOS - filas alternadas ============================================================= */ .site .section--feature-alt { background: var(--bg-alt); } .site .feature-split--reverse .feature-split__photo { order: 2; } @media (max-width: 919px) { .site .feature-split--reverse .feature-split__photo { order: 0; } } .site .feature-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-2); } @media (min-width: 520px) { .site .feature-cols { grid-template-columns: 1fr 1fr; } } .site .feature-cols h4 { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); margin: 0 0 var(--space-3); } /* ============================================================= ESPECIALIZADOS v2 - tres tratamientos distintos ============================================================= */ /* Traslado: feat-strip (3 mini-features horizontales) */ .site .feat-strip { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-2); } @media (min-width: 480px) { .site .feat-strip { grid-template-columns: repeat(3, 1fr); } } .site .feat-strip__item { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--orange); } .site .feat-strip__item svg { width: 24px; height: 24px; color: var(--orange); } .site .feat-strip__item strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); } .site .feat-strip__item span { font-size: 0.85rem; color: var(--muted); line-height: var(--leading-snug); } /* Eventos: icon-rows */ .site .icon-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .site .icon-rows li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.92rem; color: var(--ink); line-height: var(--leading-snug); } .site .icon-rows__i { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.12); color: var(--orange); } .site .icon-rows__i svg { width: 13px; height: 13px; } .site .feat-col h4 { font-family: var(--font-display); font-size: clamp(0.68rem, 1.5vw, 0.8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; color: var(--orange); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); } /* Cadenas: risk-list (filas-tarjeta) */ .site .risk-list { display: flex; flex-direction: column; gap: var(--space-3); } .site .risk-row { display: flex; align-items: center; gap: var(--space-4); background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-leve); padding: var(--space-4) var(--space-5); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .risk-row:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); } .site .risk-row svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--orange); } .site .risk-row > div strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); } .site .risk-row > div span { font-size: 0.85rem; color: var(--muted); } /* ---------- Especializados v3 ---------- */ /* Eventos: filas con misma altura para alinear ambas columnas */ .site .icon-rows li { min-height: 44px; align-items: center; } /* Cadenas: etiqueta de categoría en vez de ícono */ .site .risk-row__tag { flex-shrink: 0; width: 88px; text-align: center; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--orange); background: rgba(229, 80, 48, 0.10); border-radius: var(--r-leve); padding: 7px 12px; } /* ============================================================= NOSOTROS - componentes ============================================================= */ /* Hero naranja */ .site .hero-int--orange { background: var(--orange); color: var(--paper); } .site .hero-int--orange .hero-int__bg { display: none; } .site .hero-int--orange .hero-int__title { color: #FFFFFF; } .site .hero-int--orange .hero-int__title em { color: var(--ink); } .site .hero-int--orange .hero-int__lede { color: rgba(255, 255, 255, 0.92); } /* Quiénes somos */ .site .about-text { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); } .site .about-text p { font-size: 1.0625rem; line-height: var(--leading-relaxed); color: var(--muted); } /* Normatividad */ .site .section--norma { background: var(--bg-alt); } .site .norma-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 600px) { .site .norma-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .site .norma-grid { grid-template-columns: repeat(4, 1fr); } } .site .norma { background: var(--bg-card); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r-leve); padding: var(--space-5); } .site .norma__label { display: block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; } .site .norma__value { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin-bottom: var(--space-3); } .site .norma p { font-size: 0.85rem; color: var(--muted); line-height: var(--leading-snug); margin: 0; } /* Valores */ .site .valores-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 700px) { .site .valores-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .site .valores-grid { grid-template-columns: repeat(6, 1fr); } } .site .valor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); border: 1px solid var(--line); border-radius: var(--r-leve); transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site .valor:hover { border-color: var(--orange-200); transform: translateY(-3px); } .site .valor__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: var(--orange); color: #FFFFFF; } .site .valor__icon svg { width: 30px; height: 30px; } .site .valor h3 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink); margin: 0; } /* Nuestra imagen */ .site .imagen { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 920px) { .site .imagen { grid-template-columns: 1.1fr 0.9fr; } } .site .imagen__copy p { color: var(--muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); max-width: 54ch; } .site .conducta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 480px) { .site .conducta { grid-template-columns: 1fr 1fr; } } .site .conducta li { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); line-height: var(--leading-snug); } .site .conducta svg { flex-shrink: 0; width: 26px; height: 26px; color: var(--orange); } /* Servicios-nav reusa solutions--pillars */ .site .section--servicios-nav { background: var(--bg-alt); } /* ============================================================= NOSOTROS v2 - refinamientos ============================================================= */ /* Hero naranja con textura */ .site .hero-int--orange { position: relative; overflow: hidden; } .site .hero-int--orange::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 100% at 80% 0%, #000 20%, transparent 75%); pointer-events: none; } .site .hero-int--orange::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px; background: radial-gradient(circle at center, rgba(14,14,31,0.18) 0%, transparent 65%); pointer-events: none; } .site .hero-int--orange .container { position: relative; z-index: 1; } /* Quiénes somos: tira de stats */ .site .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); } @media (min-width: 780px) { .site .about-stats { grid-template-columns: repeat(4, 1fr); } } .site .about-stats__v { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--orange); line-height: 1; } .site .about-stats__l { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--muted); } /* Valores: icono en chip suave + descriptor */ .site .valor__icon { width: 54px; height: 54px; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.10); color: var(--orange); } .site .valor__icon svg { width: 28px; height: 28px; } .site .valor p { font-size: 0.8rem; color: var(--muted); line-height: var(--leading-snug); margin: 0; } /* Alternancia de fondos */ .site .section--imagen { background: var(--bg-alt); } .site .section--white { background: var(--bg, #FFFFFF); } /* ============================================================= NOSOTROS v3 - títulos display + underline, layout mejorado ============================================================= */ /* Título de sección (font de headers + subrayado naranja) */ .site .section-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); position: relative; display: inline-block; padding-bottom: 16px; margin: 0 0 var(--space-6); line-height: 1.1; } .site .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; background: var(--orange); border-radius: var(--r-leve); } .site .section-title--center { display: block; text-align: center; } .site .section-title--center::after { left: 50%; transform: translateX(-50%); } /* Hero naranja: degradado + isotipo de marca (sin retícula) */ .site .hero-int--orange { position: relative; overflow: hidden; background: linear-gradient(135deg, #F26A3E 0%, var(--orange) 45%, #C9431F 100%); color: var(--paper); } .site .hero-int--orange::before, .site .hero-int--orange::after { content: none; } .site .hero-int--orange__mark { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 420px; max-width: 55%; margin: 0; opacity: 0.12; pointer-events: none; z-index: 0; } .site .hero-int--orange__mark img { display: block; width: 100%; height: auto; } .site .hero-int--orange__mark img { width: 100%; display: block; } .site .hero-int--orange .container { position: relative; z-index: 1; } .site .hero-int--orange .hero-int__title { color: #FFFFFF; } .site .hero-int--orange .hero-int__lede { color: rgba(255, 255, 255, 0.92); } /* Acerca de Integer: 2 columnas (copy + panel de datos) */ .site .about { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; } @media (min-width: 920px) { .site .about { grid-template-columns: 1.3fr 1fr; } } .site .about__copy p { font-size: 1.0625rem; line-height: var(--leading-relaxed); color: var(--muted); margin-bottom: var(--space-4); max-width: 56ch; } .site .about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-leve); overflow: hidden; } .site .about__fact { background: var(--bg-card); padding: var(--space-6) var(--space-5); } .site .about__fact-v { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--orange); line-height: 1; } .site .about__fact-l { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--muted); line-height: var(--leading-snug); } /* Valores: círculos grandes naranja, etiqueta grande, sin descriptor */ .site .valores-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (min-width: 700px) { .site .valores-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .site .valores-grid { grid-template-columns: repeat(6, 1fr); } } .site .valor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); padding: 0; border: none; background: none; } .site .valor:hover { transform: none; } .site .valor__icon { width: 88px; height: 88px; border-radius: var(--r-leve); background: var(--orange); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(229, 80, 48, 0.28); transition: transform var(--duration) var(--ease-out); } .site .valor:hover .valor__icon { transform: translateY(-4px); } .site .valor__icon svg { width: 44px; height: 44px; } .site .valor h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); margin: 0; } /* Nuestra imagen: foto + copy + conducta */ .site .section--imagen { background: var(--bg-alt); } .site .imagen { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; } @media (min-width: 920px) { .site .imagen { grid-template-columns: 1.15fr 0.85fr; } } .site .imagen__photo { margin: 0; border-radius: var(--r-leve); overflow: hidden; border: 1px solid var(--line); } .site .imagen__photo img { display: block; width: 100%; height: 560px; object-fit: cover; } .site .imagen__copy p { color: var(--muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); max-width: 56ch; } .site .conducta { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 520px) { .site .conducta { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } } .site .conducta li { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); padding: 0; background: none; border: none; min-height: 40px; } .site .conducta__b { flex-shrink: 0; width: 9px; height: 9px; border-radius: var(--r-leve); background: var(--orange); transform: rotate(45deg); } /* Testimonios: logo de la empresa */ .site .testimonial__logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left; margin-bottom: var(--space-2); filter: none; } /* ============================================================= NOSOTROS v4 - ajustes finos ============================================================= */ /* 1) Título de sección: tamaño uniforme intermedio */ .site .section-title { font-size: clamp(1.55rem, 2.6vw, 2.05rem); } /* 2) Normatividad: cards naranjas, padding más pegado */ .site .norma { background: var(--orange); border: none; border-radius: var(--r-leve); padding: var(--space-4) var(--space-4) var(--space-5); color: #FFFFFF; } .site .norma__label { color: rgba(255, 255, 255, 0.85); } .site .norma__value { color: #FFFFFF; margin-bottom: var(--space-2); } .site .norma p { color: rgba(255, 255, 255, 0.92); } /* 3) Valores: sin mayúsculas + interacción al hover */ .site .valor h3 { text-transform: none; letter-spacing: -0.01em; transition: color var(--duration) var(--ease-out); } .site .valor:hover h3 { color: var(--orange); } .site .valor__icon { transition: transform var(--duration) var(--ease-out), background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .valor:hover .valor__icon { transform: translateY(-6px) scale(1.04); background: var(--ink); box-shadow: 0 14px 30px rgba(14, 14, 31, 0.22); } /* 4) Conducta: rombo sin esquina redondeada (como el isotipo) */ .site .conducta__b { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.12); transform: none; display: inline-flex; align-items: center; justify-content: center; position: relative; } .site .conducta__b::after { content: ""; width: 11px; height: 7px; border-left: 2.2px solid var(--orange); border-bottom: 2.2px solid var(--orange); transform: rotate(-45deg) translateY(-1px); } /* 5) Servicios: cards más llamativas (solo en Nosotros) */ .site.page-nosotros .section--servicios-nav .solution__icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: rgba(229, 80, 48, 0.10); color: var(--orange); transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .site.page-nosotros .section--servicios-nav .solution__icon svg { width: 28px; height: 28px; } .site.page-nosotros .section--servicios-nav .solution--link { transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site.page-nosotros .section--servicios-nav .solution--link:hover { border-color: var(--orange); transform: translateY(-5px); box-shadow: var(--shadow-md); } .site.page-nosotros .section--servicios-nav .solution--link:hover .solution__icon { background: var(--orange); color: #FFFFFF; } /* 6) Logos de testimonios: tamaños equilibrados por marca */ .site .testimonial__logo--amway { height: 26px; } .site .testimonial__logo--arcelor { height: 40px; } .site .testimonial__logo--print { height: 52px; } /* ============================================================= NOSOTROS v5 - botón "Ver servicio" + logos + nombres ============================================================= */ /* "Ver servicio" como botón naranja (solo Nosotros) */ .site.page-nosotros .section--servicios-nav .solution__more { align-self: flex-start; margin-top: var(--space-4); padding: 10px 18px; background: var(--orange); color: #FFFFFF; border-radius: var(--r-leve); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; gap: 8px; transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); } .site.page-nosotros .section--servicios-nav .solution--link:hover .solution__more { background: var(--orange-600); } .site.page-nosotros .section--servicios-nav .solution__more svg { width: 15px; height: 15px; } /* Logos de testimonios aún más grandes (arcelor / print) */ .site .testimonial__logo--amway { height: 28px; } .site .testimonial__logo--arcelor { height: 56px; } .site .testimonial__logo--print { height: 88px; } /* Nombres de testimonios en naranja */ .site .testimonial__name { color: var(--orange); } /* ---------- Nuestra imagen: carrusel de fotos (fade) ---------- */ .site .imagen__carousel { position: relative; } .site .imagen__carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s var(--ease-out); } .site .imagen__carousel img:first-of-type { position: relative; } .site .imagen__carousel img.is-active { opacity: 1; } .site .imagen__dots { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .site .imagen__dots span { width: 8px; height: 8px; border-radius: var(--r-leve); background: rgba(255, 255, 255, 0.55); transition: background var(--duration) var(--ease-out), width var(--duration) var(--ease-out); } .site .imagen__dots span.is-active { background: var(--orange); width: 22px; border-radius: var(--r-leve); } /* ============================================================= BLOG - listado, buscador, filtros, destacado, grid ============================================================= */ .site .section--blog { padding-top: var(--space-8); } /* Controles */ .site .blog-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); } .site .blog-search { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: 10px 18px; flex: 1 1 280px; max-width: 380px; transition: border-color var(--duration) var(--ease-out); } .site .blog-search:focus-within { border-color: var(--orange); } .site .blog-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; } .site .blog-search input { border: none; background: none; outline: none; font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); width: 100%; } .site .blog-filters { display: flex; flex-wrap: wrap; gap: 8px; } .site .blog-chip { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: 7px 16px; cursor: pointer; transition: all var(--duration) var(--ease-out); } .site .blog-chip:hover { border-color: var(--orange-200); } .site .blog-chip.is-active { background: var(--orange); border-color: var(--orange); color: #FFFFFF; } /* Card base */ .site .blog-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .blog-card:hover { border-color: var(--orange-200); transform: translateY(-4px); box-shadow: var(--shadow-md); } .site .blog-card__media { overflow: hidden; aspect-ratio: 16 / 10; } .site .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .site .blog-card:hover .blog-card__media img { transform: scale(1.05); } .site .blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .site .blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .site .blog-card__cat { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange); background: rgba(229,80,48,0.10); border-radius: var(--r-leve); padding: 4px 10px; } .site .blog-card__dot { font-size: 0.78rem; color: var(--muted); } .site .blog-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; margin: 0; } .site .blog-card__excerpt { font-size: 0.9rem; color: var(--muted); line-height: var(--leading-snug); margin: 0; } /* Destacado */ .site .blog-featured { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--ink); border-radius: var(--r-leve); overflow: hidden; text-decoration: none; color: var(--paper); margin-bottom: var(--space-8); transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .blog-featured:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } @media (min-width: 860px) { .site .blog-featured { grid-template-columns: 1.2fr 1fr; } } .site .blog-featured__media { overflow: hidden; min-height: 280px; } .site .blog-featured__media img { width: 100%; height: 100%; object-fit: cover; } .site .blog-featured__body { padding: var(--space-8); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); } .site .blog-featured__tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-light); border: 1px solid rgba(255,119,82,0.4); border-radius: var(--r-leve); padding: 4px 12px; } .site .blog-featured__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #FFFFFF; margin: 0; } .site .blog-featured__excerpt { color: rgba(255,255,255,0.72); line-height: var(--leading-relaxed); margin: 0; } .site .blog-featured__meta { display: flex; gap: 10px; color: rgba(255,255,255,0.6); font-size: 0.82rem; } /* Grid */ .site .blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 600px) { .site .blog-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .site .blog-grid { grid-template-columns: repeat(3, 1fr); } } .site .blog-empty { text-align: center; color: var(--muted); padding: var(--space-8) 0; } /* ============================================================= BLOG v2 - pills sin mono-uppercase, hero propio ============================================================= */ /* Pills de categoría: font de títulos, sin mayúsculas */ .site .blog-card__cat { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: none; letter-spacing: 0; } .site .blog-featured__tag { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-transform: none; letter-spacing: 0; } /* Hero del blog: oscuro con glow + textura de puntos (distinto a servicios) */ .site.page-blog .hero-int { background: var(--ink); color: var(--paper); } .site.page-blog .hero-int__bg { background-image: radial-gradient(rgba(255,255,255,0.06) 1.4px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 25%, transparent 80%); mask-image: radial-gradient(120% 100% at 20% 0%, #000 25%, transparent 80%); } .site.page-blog .hero-int__bg::after { top: -160px; right: -140px; background: radial-gradient(circle at center, rgba(229,80,48,0.30) 0%, rgba(229,80,48,0.08) 45%, transparent 72%); } .site.page-blog .hero-int__title { color: #FFFFFF; } .site.page-blog .hero-int__title em { color: var(--orange-light, #FF7752); } .site.page-blog .hero-int__lede { color: rgba(255,255,255,0.72); } .site.page-blog .hero-int .kicker { color: var(--orange-light, #FF7752); } /* ============================================================= BLOG - POST INDIVIDUAL ============================================================= */ .site .post-hero { padding: calc(var(--space-9) + 64px) 0 var(--space-6); background: var(--bg-alt); } .site .post-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); margin-bottom: var(--space-5); } .site .post-breadcrumb a { color: var(--muted); text-decoration: none; } .site .post-breadcrumb a:hover { color: var(--orange); } .site .post-hero__cat { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; color: var(--orange); background: rgba(229,80,48,0.10); border-radius: var(--r-leve); padding: 5px 14px; margin-bottom: var(--space-4); } .site .post-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 var(--space-5); max-width: 20ch; } .site .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--muted); font-size: 0.9rem; } .site .post-meta__dot { width: 4px; height: 4px; border-radius: var(--r-leve); background: var(--gray-300); } .site .post-cover { margin: 0; } .site .post-cover__inner { max-width: 980px; margin: 0 auto; padding: 0 var(--space-5); margin-top: calc(-1 * var(--space-7)); } .site .post-cover img { width: 100%; border-radius: var(--r-leve); display: block; aspect-ratio: 16 / 8; object-fit: cover; box-shadow: var(--shadow-lg); } .site .post-body { max-width: 720px; margin: var(--space-8) auto 0; padding: 0 var(--space-5); } .site .post-body > .lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--space-6); font-weight: 500; } .site .post-body h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: var(--space-7) 0 var(--space-3); line-height: 1.2; } .site .post-body h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: var(--space-5) 0 var(--space-2); } .site .post-body p { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); margin: 0 0 var(--space-4); } .site .post-body strong { color: var(--ink); font-weight: 600; } .site .post-body .hl { color: var(--orange); font-weight: 600; } .site .post-end { max-width: 720px; margin: var(--space-8) auto 0; padding: 0 var(--space-5); } .site .post-cta { background: var(--orange); color: #FFFFFF; border-radius: var(--r-leve); padding: var(--space-7); text-align: center; } .site .post-cta h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #FFFFFF; margin: 0 0 var(--space-4); } .site .post-back { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-6); color: var(--ink-soft); text-decoration: none; font-weight: 600; } .site .post-back:hover { color: var(--orange); } .site .post-back svg { width: 16px; height: 16px; } .site .post-related { margin-top: var(--space-10); } .site .post-related .section-head { margin-bottom: var(--space-6); } /* ============================================================= POST v2 - ajustes ============================================================= */ /* 2) la portada ya no se encima con la meta */ .site .post-cover__inner { margin-top: var(--space-6); } /* 4) título a lo ancho (sin límite de 20ch) */ .site .post-hero__title { max-width: none; } /* 5) texto del cuerpo uniforme (lead = párrafo normal) */ .site .post-body > .lead { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); font-weight: 400; margin: 0 0 var(--space-4); } /* 8) subtítulos H2 en naranja */ .site .post-body h2 { color: var(--orange); } /* 10) meta de las cards SIEMPRE en una sola línea */ .site .blog-card__meta { flex-wrap: nowrap; white-space: nowrap; gap: 8px; } .site .blog-card__cat { flex-shrink: 0; } .site .blog-card__dot { flex-shrink: 0; font-size: 0.76rem; } /* ============================================================= CONTACTO ============================================================= */ .site .contacto { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } @media (min-width: 920px) { .site .contacto { grid-template-columns: 0.85fr 1.15fr; } } .site .contacto-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-5); } .site .contacto-list li { display: flex; gap: var(--space-4); align-items: flex-start; } .site .contacto-list__ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-leve); background: rgba(229,80,48,0.10); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; } .site .contacto-list__ic svg { width: 22px; height: 22px; } .site .contacto-list__l { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; } .site .contacto-list a, .site .contacto-list__v { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.35; } .site .contacto-list a:hover { color: var(--orange); } .site .contacto-list__v { font-size: 0.95rem; } .site .btn--whatsapp { background: #25D366; color: #FFFFFF; } .site .btn--whatsapp:hover { background: #1faa52; } .site .btn--block { display: inline-flex; width: 100%; justify-content: center; } .site .contacto__creds { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .site .contacto__creds span { font-family: var(--font-sans); font-size: 0.8rem; color: var(--muted); letter-spacing: 0; } .site .contacto__form { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); padding: var(--space-7); } .site .contacto__form-note { color: var(--muted); font-size: 0.92rem; margin: 0 0 var(--space-5); } .site .contacto__form .section-title { margin-bottom: var(--space-2); } /* Cobertura en bullets */ .site .contacto-cobertura { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .site .contacto-cobertura li { position: relative; padding-left: 18px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.35; } .site .contacto-cobertura li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: var(--r-leve); background: var(--orange); } /* ============================================================= HERO CONTACTO - variante Radar (naranja) ============================================================= */ .site .hero-c { position: relative; color: #fff; overflow: hidden; background: linear-gradient(135deg,#F26A3E 0%,#E55030 52%,#C9431F 100%); } .site .hero-c .hero-int__title { color: #fff; } .site .hero-c .hero-int__title em { color: #fff; font-style: normal; } .site .hero-c .hero-int__lede { color: rgba(255,255,255,0.9); } .site .kicker--on-orange { color: #fff; } .site .kicker--on-orange .kicker__line { background: #fff; } .site .hero-c--radar .hero-c__bg { position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle at 88% 18%, transparent 0, transparent 60px, rgba(255,255,255,0.13) 61px, transparent 63px), radial-gradient(circle at 88% 18%, transparent 0, transparent 130px, rgba(255,255,255,0.11) 131px, transparent 133px), radial-gradient(circle at 88% 18%, transparent 0, transparent 210px, rgba(255,255,255,0.09) 211px, transparent 213px), radial-gradient(circle at 88% 18%, transparent 0, transparent 300px, rgba(255,255,255,0.07) 301px, transparent 303px), radial-gradient(circle at 88% 18%, transparent 0, transparent 400px, rgba(255,255,255,0.05) 401px, transparent 403px); } /* ============================================================= AVISO DE PRIVACIDAD (legal) ============================================================= */ .site .legal-body { max-width: 760px; margin: var(--space-8) auto 0; padding: 0 var(--space-5); } .site .legal-body > .lead { font-size: 1.0625rem; line-height: 1.75; color: var(--muted); margin: 0 0 var(--space-6); } .site .legal-body h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: var(--space-7) 0 var(--space-3); } .site .legal-body p { font-size: 1rem; line-height: 1.75; color: var(--muted); margin: 0 0 var(--space-4); } .site .legal-body strong { color: var(--ink); font-weight: 600; } .site .legal-body ul { margin: 0 0 var(--space-4); padding-left: 1.2rem; color: var(--muted); line-height: 1.7; } .site .legal-body li { margin-bottom: 6px; } .site .legal-body a { color: var(--orange); } .site .legal-note { margin-top: var(--space-7); padding: var(--space-5); background: var(--bg-alt); border-radius: var(--r-leve); font-size: 0.9rem; color: var(--muted); } /* ===== HOME: hero de una sola columna (sin form) ===== */ .hero--solo .hero__container { display: flex; justify-content: center; } .hero--solo .hero__copy--center { width: 100%; } @media (min-width: 960px) { .hero--solo .hero__copy--center { max-width: 820px; } } .hero__copy--center { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero__copy--center .kicker { justify-content: center; } .hero__bullets--center { display: inline-flex; flex-direction: column; gap: .6rem; text-align: left; margin: 1.6rem auto 0; } .hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } @media (max-width: 560px){ .hero__actions { width: 100%; } .hero__actions .btn { width: 100%; justify-content: center; } } /* Botón fantasma (borde) para hero claro */ .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); } .btn--ghost:hover { border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 7%, transparent); } /* Separador de punto discreto (reemplaza el "·" tipográfico) */ .dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: var(--r-leve); background: currentColor; opacity: .4; margin: 0 .5em; vertical-align: middle; } .coverage__map-cap-dot { display: inline-block; width: 3px; height: 3px; border-radius: var(--r-leve); background: currentColor; opacity: .45; margin: 0 .55em; vertical-align: middle; } /* ===== SOLUCIONES: mesh gradient naranja animado ===== */ .site .section--soluciones { background: var(--orange); } .site .soluciones-mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .site .soluciones-mesh__layer { position: absolute; inset: -20%; filter: blur(60px); opacity: 0.9; will-change: transform; } .site .soluciones-mesh__b1 { background: radial-gradient(circle at 30% 30%, var(--orange-light) 0%, transparent 48%); animation: solDrift1 18s ease-in-out infinite; } .site .soluciones-mesh__b2 { background: radial-gradient(circle at 70% 40%, var(--orange-deep) 0%, transparent 44%); animation: solDrift2 22s ease-in-out infinite; } .site .soluciones-mesh__b3 { background: radial-gradient(circle at 50% 78%, #ff9d6b 0%, transparent 42%); animation: solDrift3 26s ease-in-out infinite; } .site .soluciones-mesh__b4 { background: radial-gradient(circle at 85% 80%, var(--orange-deep) 0%, transparent 40%); animation: solDrift1 30s ease-in-out infinite reverse; } @keyframes solDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8%,6%) scale(1.15)} } @keyframes solDrift2 { 0%,100%{transform:translate(0,0) scale(1.1)} 50%{transform:translate(-7%,5%) scale(.95)} } @keyframes solDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5%,-8%) scale(1.2)} } .site .soluciones-mesh__grain { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } .site .soluciones-mesh__spot { position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.16), transparent 60%); transition: background 0.1s; } @media (prefers-reduced-motion: reduce) { .site .soluciones-mesh__layer { animation: none; } } /* ===== NOSOTROS HERO: mesh naranja + isotipos flotantes ===== */ .site .hero-int--orange { position: relative; overflow: hidden; } .site .hero-int__mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .site .hero-int__mesh-layer { position: absolute; inset: -20%; filter: blur(60px); opacity: 0.85; will-change: transform; } .site .hero-int__mesh-b1 { background: radial-gradient(circle at 25% 35%, var(--orange-light) 0%, transparent 45%); animation: solDrift1 20s ease-in-out infinite; } .site .hero-int__mesh-b2 { background: radial-gradient(circle at 75% 30%, var(--orange-deep) 0%, transparent 42%); animation: solDrift2 24s ease-in-out infinite; } .site .hero-int__mesh-b3 { background: radial-gradient(circle at 55% 80%, #ff9d6b 0%, transparent 40%); animation: solDrift3 28s ease-in-out infinite; } .site .hero-int__mesh-grain { position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } .site .hero-int__spot { position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx,70%) var(--my,40%), rgba(255,255,255,0.14), transparent 60%); transition: background 0.1s; } @media (prefers-reduced-motion: reduce) { .site .hero-int__mesh-layer { animation: none; } } .site .hero-int--orange .hero-int__inner { position: relative; z-index: 1; } .site .hero-int--orange .kicker--on-orange { color: #fff; margin-bottom: var(--space-4); } .site .hero-int--orange .kicker--on-orange .kicker__line, .site .hero-int--orange .kicker--on-orange::after { background: #fff; } /* ===== NOSOTROS: normatividad interactiva ===== */ .site .section--norma .norma { position: relative; overflow: hidden; cursor: default; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out); } /* barra superior que se expande en hover */ .site .section--norma .norma::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background: var(--orange); transition: width .35s var(--ease-out); } .site .section--norma .norma:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(14,14,31,0.28); border-color: var(--orange); } .site .section--norma .norma:hover::before { width: 100%; } .site .section--norma .norma:hover .norma__value { color: var(--orange); } .site .section--norma .norma__value { transition: color .28s var(--ease-out); } /* ===== NOSOTROS: servicios como índice editorial ===== */ .site .serv-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .site .serv-index li { border-bottom: 1px solid var(--line); } .site .serv-index__row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-2); text-decoration: none; color: inherit; transition: padding .3s var(--ease-out), background .3s var(--ease-out); } .site .serv-index__row:hover { padding-left: var(--space-5); background: var(--orange-soft); } .site .serv-index__num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--line); line-height: 1; transition: color .3s var(--ease-out); } .site .serv-index__row:hover .serv-index__num { color: var(--orange); } .site .serv-index__main h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; transition: color .3s var(--ease-out); } .site .serv-index__row:hover .serv-index__main h3 { color: var(--orange-deep); } .site .serv-index__main p { color: var(--muted); font-size: 0.95rem; line-height: var(--leading-snug); margin: 0; max-width: 60ch; } .site .serv-index__arrow { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-leve); border: 1.5px solid var(--line); color: var(--ink-soft); transition: transform .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); } .site .serv-index__row:hover .serv-index__arrow { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateX(4px); } @media (max-width: 560px) { .site .serv-index__row { grid-template-columns: 54px 1fr; gap: var(--space-4); } .site .serv-index__arrow { display: none; } .site .serv-index__num { font-size: 1.8rem; } } /* ===== NOSOTROS: shuffle grid (cuadrícula que se baraja) ===== */ .site .shuffle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-radius: var(--r-leve); overflow: hidden; } /* celdas cuadradas */ .site .shuffle-grid__cell { aspect-ratio: 1 / 1; } /* celda hueco: muestra el isotipo de marca en vez de foto repetida */ .site .shuffle-grid__cell.is-empty .shuffle-grid__img { background-image: none !important; background: var(--orange-soft); display: flex; align-items: center; justify-content: center; } .site .shuffle-grid__cell.is-empty .shuffle-grid__img::after { content: ""; width: 38%; height: 38%; background: url("/assets/logo/isotipo-256.png") center/contain no-repeat; opacity: 0.5; } @media (max-width: 760px) { .site .shuffle-grid { grid-template-columns: repeat(2, 1fr); } } .site .shuffle-grid__cell { position: relative; overflow: hidden; border-radius: var(--r-leve); background: var(--bg-alt); aspect-ratio: 1 / 1; } .site .shuffle-grid__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); } @media (max-width: 920px) { .site .shuffle-grid { height: 420px; } } @media (prefers-reduced-motion: reduce) { .site .shuffle-grid__img { transition: none; } } /* ===== HOME HERO: más grande y llamativo (sin bullets) ===== */ .site .hero--solo .hero__copy--center { max-width: 960px; } .site .hero--solo .hero__title { font-size: clamp(2.75rem, 7vw, 6rem); letter-spacing: -0.045em; max-width: 18ch; margin-bottom: var(--space-6); } .site .hero--solo .hero__lede { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; max-width: 58ch; margin-bottom: var(--space-7); } .site .hero--solo .kicker { font-size: 0.8rem; letter-spacing: 0.16em; margin-bottom: var(--space-5); } .site .hero--solo .hero__actions .btn--lg { font-size: 1.05rem; padding: 1.05rem 2.1rem; } /* dar más aire vertical al hero */ .site .hero--solo { padding-top: clamp(3rem, 7vh, 6rem); } .site .hero--solo .hero__container { padding-bottom: clamp(2.5rem, 5vh, 4.5rem); } /* ===== HOME HERO: badge pill + animaciones de aparición ===== */ .site .hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: var(--r-leve); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: color-mix(in srgb, #fff 65%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; margin-bottom: var(--space-6); transition: border-color .25s var(--ease-out), background .25s var(--ease-out); } .site .hero__badge:hover { border-color: color-mix(in srgb, var(--orange) 45%, transparent); } .site .hero__badge-text { font-weight: 500; } .site .hero__badge-link { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-leve); background: var(--orange); color: #fff; font-weight: 600; font-size: 0.8rem; white-space: nowrap; } .site .hero__badge-link svg { transition: transform .25s var(--ease-out); } .site .hero__badge:hover .hero__badge-link svg { transform: translateX(3px); } @media (max-width: 560px) { .site .hero__badge-text { display: none; } } /* Animaciones de aparición escalonada (recreación de "appear") */ @keyframes heroAppear { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } .site .hero-appear { opacity: 0; animation: heroAppear 0.7s var(--ease-out) forwards; } .site .hero-appear--d1 { animation-delay: 0.12s; } .site .hero-appear--d2 { animation-delay: 0.26s; } .site .hero-appear--d3 { animation-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .site .hero-appear { opacity: 1; animation: none; } } /* ===== LO QUE OFRECEMOS: iconos naranjas en vez de números ===== */ .site .process__icon { position: relative; z-index: 1; flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: var(--bg-cream); border: 1.5px solid color-mix(in srgb, var(--orange) 30%, transparent); color: var(--orange); transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); } .site .process__icon svg { width: 26px; height: 26px; } /* mismo layout de grid que el número original */ .site .section--ofrecemos.section--proceso .process__step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); align-items: start; } /* al activar el paso (scroll), el icono se llena de naranja */ .site .section--ofrecemos.section--proceso .process__step.is-active .process__icon { background: var(--orange); border-color: var(--orange); color: #fff; } /* la línea de progreso pasa por el centro de los iconos (56/2 = 28px) */ .site .section--ofrecemos.section--proceso .process-line { left: 27px; } /* ===== HOME HERO: CTA de llamada diferenciado (no botón gemelo) ===== */ .site .hero__call { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 6px 6px 6px 6px; transition: color .25s var(--ease-out); } .site .hero__call-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-leve); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--orange); flex-shrink: 0; transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); } .site .hero__call-icon svg { width: 20px; height: 20px; } .site .hero__call:hover .hero__call-icon { background: var(--orange); border-color: var(--orange); color: #fff; } .site .hero__call-text { display: flex; flex-direction: column; text-align: left; line-height: 1.2; } .site .hero__call-label { font-size: 0.78rem; color: var(--ink-soft); font-weight: 500; } .site .hero__call-num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; } @media (max-width: 560px) { .site .hero__actions { flex-direction: column; align-items: center; } } /* ===== LO QUE OFRECEMOS: split en dos columnas ===== */ .site .ofrecemos-split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; } @media (min-width: 980px) { .site .ofrecemos-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-9, 4rem); } } .site .ofrecemos-split .process-wrap { margin: 0; max-width: none; } /* Card del diagnóstico (columna derecha) */ .site .diag-cta { position: relative; border-radius: var(--r-leve); background: linear-gradient(145deg, var(--orange-light) 0%, var(--orange) 55%, var(--orange-deep) 100%); overflow: hidden; padding: clamp(1.6rem, 3vw, 2.4rem); color: #fff; } .site .diag-cta__inner { position: relative; z-index: 1; } .site .diag-cta__eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.18); padding: 5px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--r-leve); margin-bottom: var(--space-4); } .site .diag-cta__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 var(--space-3); } .site .diag-cta__lede { color: rgba(255,255,255,0.92); font-size: 1rem; line-height: 1.55; margin: 0 0 var(--space-5); max-width: 42ch; } /* Preview tipo mockup */ .site .diag-cta__preview { position: relative; margin-bottom: var(--space-6); } .site .diag-preview { position: relative; z-index: 1; background: #fff; border-radius: var(--r-leve); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); } .site .diag-preview__bar { display: flex; gap: 6px; align-items: center; padding: 11px 14px; background: #f3f1ea; border-bottom: 1px solid #e7e3d6; } .site .diag-preview__bar span { width: 9px; height: 9px; border-radius: var(--r-leve); background: #d8d3c4; } .site .diag-preview__bar span:first-child { background: var(--orange); } .site .diag-preview__body { padding: 18px 20px 18px; } .site .diag-preview__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .site .diag-preview__tag { display: inline-block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-deep); background: var(--orange-soft); border: 1px solid color-mix(in srgb, var(--orange) 22%, transparent); padding: 4px 9px; border-radius: var(--r-leve); } .site .diag-preview__step { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; color: #9a9483; } .site .diag-preview__track { height: 5px; border-radius: var(--r-leve); background: #ece8db; overflow: hidden; margin-bottom: 16px; } .site .diag-preview__track span { display: block; height: 100%; width: 25%; background: var(--orange); border-radius: var(--r-leve); transition: width .5s var(--ease-out); } .site .diag-preview__q { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: var(--ink); margin: 0 0 14px; min-height: 2.6em; transition: opacity .3s var(--ease-out); } .site .diag-preview__opts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site .diag-preview__opts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid #e7e3d6; border-radius: var(--r-leve); font-size: 0.8rem; color: var(--ink-soft); transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); } .site .diag-preview__radio { width: 15px; height: 15px; border-radius: var(--r-leve); border: 2px solid #cfc9b8; flex-shrink: 0; position: relative; transition: border-color .25s var(--ease-out); } .site .diag-preview__opts li.is-picked { border-color: var(--orange); background: var(--orange-soft); color: var(--ink); } .site .diag-preview__opts li.is-picked .diag-preview__radio { border-color: var(--orange); } .site .diag-preview__opts li.is-picked .diag-preview__radio::after { content: ""; position: absolute; inset: 2px; border-radius: var(--r-leve); background: var(--orange); } .site .diag-preview__meta { display: flex; flex-wrap: wrap; gap: 14px; } .site .diag-preview__meta span { font-size: 0.62rem; color: #9a9483; letter-spacing: 0.02em; } /* glow naranja debajo del mockup */ .site .diag-cta__glow { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); width: 80%; height: 120px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--orange) 55%, transparent) 0%, transparent 70%); filter: blur(20px); z-index: 0; pointer-events: none; } /* ===== Botón animado (blob que se expande + texto que desliza) ===== */ .site .btn-anim { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; padding: 15px 22px; border-radius: var(--r-leve); background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none; overflow: hidden; isolation: isolate; } .site .btn-anim__base { position: relative; z-index: 2; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); } .site .btn-anim:hover .btn-anim__base { transform: translateX(40px); opacity: 0; } .site .btn-anim__hover { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; transform: translateX(-40px); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); } .site .btn-anim:hover .btn-anim__hover { transform: translateX(0); opacity: 1; } .site .btn-anim__blob { position: absolute; z-index: 1; top: 45%; left: 18%; width: 12px; height: 12px; border-radius: var(--r-leve); background: var(--orange); transform: scale(1); transition: transform .4s var(--ease-out), top .4s var(--ease-out), left .4s var(--ease-out), border-radius .4s var(--ease-out); } .site .btn-anim:hover .btn-anim__blob { top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--r-leve); transform: scale(1.05); } /* Variante SÓLIDA del botón animado (hero): arranca naranja lleno, sin puntito visible */ .site .btn-anim--solid { background: var(--orange); color: #fff; } .site .btn-anim--solid .btn-anim__base { color: #fff; } .site .btn-anim--solid .btn-anim__hover { color: #fff; } /* el blob arranca ya cubriendo todo (no puntito) y en hover se intensifica a deep */ .site .btn-anim--solid .btn-anim__blob { top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--r-leve); background: var(--orange); transform: scale(1); } .site .btn-anim--solid:hover .btn-anim__blob { background: var(--orange-deep); transform: scale(1.05); } .site .btn-anim--lg { width: auto; max-width: none; padding: 14px 24px; font-size: 1rem; } /* Botón diagnóstico: blanco con flecha naranja en círculo */ .site .diag-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 12px 12px 24px; border-radius: var(--r-leve); background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .site .diag-btn__arrow { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-leve); background: var(--orange); color: #fff; flex-shrink: 0; transition: transform .25s var(--ease-out); } .site .diag-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.5); } .site .diag-btn:hover .diag-btn__arrow { transform: translateX(3px); } /* ===== INDUSTRIAS: carrusel de fondo a toda la sección ===== */ /* ===== COBERTURA: 2 filas por estado (pill + ciudades) ===== */ .site .cov-list--states li { grid-template-columns: 132px 1fr; } .site .cov-list--states .cov-list__code { font-size: 0.82rem; padding: 7px 14px; } .site .cov-list__cities { font-family: var(--font-sans); font-weight: 500; color: var(--ink-soft); font-size: 1.02rem; } @media (max-width: 480px) { .site .cov-list--states li { grid-template-columns: 110px 1fr; } .site .cov-list__cities { font-size: 0.92rem; } } /* ===== ACERCA DE INTEGER: dos fotos apiladas ===== */ .site .section--feature .feature-split { align-items: stretch; } .site .feature-split__photos { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; } .site .feature-split__photos .feature-split__photo { flex: 1; margin: 0; } .site .feature-split__photos .feature-split__photo img { height: 100%; min-height: 220px; } @media (max-width: 760px) { .site .feature-split__photos { flex-direction: column; } .site .feature-split__photos .feature-split__photo img { height: 240px; } } /* ===== NUESTRA IMAGEN: header con línea naranja y espacio (como Normatividad) ===== */ .site .imagen__title { position: relative; display: inline-block; padding-bottom: 18px; margin-bottom: var(--space-5); } .site .imagen__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; background: var(--orange); border-radius: var(--r-leve); } /* ===== SERVICIOS: hero beige con retícula naranja interactiva ===== */ .site .hero-int--grid { position: relative; overflow: hidden; background: var(--bg-alt); --mx: 50%; --my: 50%; } .site .hero-int--grid .hero-int__bg { display: none; } .site .hero-int__gridlayer { position: absolute; inset: -40px; background-image: linear-gradient(to right, var(--orange) 1px, transparent 1px), linear-gradient(to bottom, var(--orange) 1px, transparent 1px); background-size: 42px 42px; animation: heroGridMove 7s linear infinite; will-change: background-position; pointer-events: none; } .site .hero-int__gridlayer--base { opacity: 0.08; } .site .hero-int__gridlayer--spot { opacity: 0.55; -webkit-mask-image: radial-gradient(280px circle at var(--mx) var(--my), #000 0%, transparent 70%); mask-image: radial-gradient(280px circle at var(--mx) var(--my), #000 0%, transparent 70%); } @keyframes heroGridMove { from { background-position: 0 0; } to { background-position: 42px 42px; } } .site .hero-int__gridglow { position: absolute; inset: 0; pointer-events: none; } .site .hero-int__gridglow::before { content: ""; position: absolute; right: -15%; top: -25%; width: 45%; height: 55%; border-radius: var(--r-leve); background: radial-gradient(circle, rgba(229,80,48,.22), transparent 65%); filter: blur(110px); } .site .hero-int__gridglow::after { content: ""; position: absolute; left: -12%; bottom: -25%; width: 42%; height: 52%; border-radius: var(--r-leve); background: radial-gradient(circle, rgba(255,119,82,.18), transparent 65%); filter: blur(120px); } .site .hero-int--grid .container { position: relative; z-index: 2; } .site .hero-int--grid .hero-int__title { color: var(--ink); } .site .hero-int--grid .hero-int__title em { color: var(--orange); font-style: normal; } .site .hero-int--grid .hero-int__lede { color: var(--ink-soft); } /* Breadcrumb del eyebrow con > naranja */ .site .hero-int--grid .kicker { color: var(--orange); } .site .hero-int--grid .kicker__line { background: var(--orange); } .site .hero-bc__sep { color: var(--orange); margin: 0 8px; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .site .hero-int__gridlayer { animation: none; } } /* ===== ACERCA DE INTEGER: foto que crece al hacer scroll ===== */ .site .section--feature .feature-split { align-items: center; } .site .feature-grow { overflow: hidden; border-radius: var(--r-leve); transform: scale(var(--grow, 0.86)); transition: transform 0.15s linear, border-radius 0.3s var(--ease-out); will-change: transform; } .site .feature-grow img { display: block; width: 100%; height: 520px; object-fit: cover; transform: scale(1.08); transition: transform 0.3s var(--ease-out); } @media (max-width: 760px) { .site .feature-grow img { height: 360px; } } @media (prefers-reduced-motion: reduce) { .site .feature-grow { transform: scale(1); transition: none; } } /* ===== NORMATIVIDAD: cards blancas con acento naranja ===== */ .site .section--norma .norma { background: var(--bg-card) !important; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-leve); position: relative; overflow: hidden; color: var(--ink); } .site .section--norma .norma__label { color: var(--orange) !important; font-weight: 700; } .site .section--norma .norma__value { color: var(--ink) !important; } .site .section--norma .norma p { color: var(--muted) !important; } /* icono check naranja en la esquina superior derecha */ .site .section--norma .norma__check { position: absolute; top: var(--space-4); right: var(--space-4); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-leve); background: var(--orange-soft); color: var(--orange); } .site .section--norma .norma__check svg { width: 15px; height: 15px; } .site .section--norma .norma:hover { border-left-color: var(--orange-deep); } /* ===== VIGILANCIA: 4 elementos como filas alternadas (foto + texto) ===== */ .site .elem-list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 760px) { .site .elem-list { grid-template-columns: 1fr 1fr; } } .site .elem-row { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); overflow: hidden; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .elem-row:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(14,14,31,0.25); } .site .elem-row__media { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; } .site .elem-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .site .elem-row:hover .elem-row__media img { transform: scale(1.05); } .site .elem-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--r-leve); border: 1.5px solid color-mix(in srgb, var(--orange) 30%, transparent); background: var(--orange-soft); color: var(--orange); margin-bottom: var(--space-4); transition: background .3s var(--ease-out), color .3s var(--ease-out); } .site .elem-row__icon svg { width: 26px; height: 26px; } .site .elem-row:hover .elem-row__icon { background: var(--orange); color: #fff; } .site .elem-row__body h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-3); } .site .elem-row__body p { color: var(--muted); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4); max-width: 48ch; } .site .elem-row__more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--orange); } .site .elem-row__more svg { transition: transform .25s var(--ease-out); } .site .elem-row:hover .elem-row__more svg { transform: translateX(4px); } @media (max-width: 820px) { .site .elem-row { grid-template-columns: 1fr; gap: var(--space-4); } .site .elem-row--reverse .elem-row__media { order: 0; } } /* ===== VIGILANCIA: proceso recurso humano con iconos ===== */ .site #recurso-humano .process__step { grid-template-columns: 56px 1fr; align-items: start; } .site #recurso-humano .process-line { left: 27px; } /* el icono se llena de naranja cuando el paso está activo (scroll) */ .site #recurso-humano .process__step.is-active .process__icon { background: var(--orange); border-color: var(--orange); color: #fff; } /* ===== VIGILANCIA: recurso tecnológico, cubos solo bajo el cursor + teclas pegadas ===== */ .site .section--tech { position: relative; overflow: hidden; background: var(--orange); --mx: 50%; --my: 50%; } /* capa de cubos 3D isométricos: SOLO visible donde está el cursor (sin desplazamiento) */ .site .section--tech__boxes { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='68' viewBox='0 0 58 68'%3E%3Cg stroke='%23ffffff' stroke-width='1.1' stroke-opacity='0.85' stroke-linejoin='round'%3E%3Cpath d='M29 0 L58 17 L29 34 L0 17 Z' fill='%23ffffff' fill-opacity='0.22'/%3E%3Cpath d='M0 17 L29 34 L29 68 L0 51 Z' fill='none'/%3E%3Cpath d='M58 17 L29 34 L29 68 L58 51 Z' fill='none'/%3E%3C/g%3E%3C/svg%3E"); background-size: 78px 92px; opacity: 0; -webkit-mask-image: radial-gradient(150px circle at var(--mx) var(--my), #000 0%, transparent 72%); mask-image: radial-gradient(150px circle at var(--mx) var(--my), #000 0%, transparent 72%); transition: opacity .25s var(--ease-out); } /* al pasar el mouse por la sección, los cubos aparecen (pero solo bajo el cursor por la máscara) */ .site .section--tech:hover .section--tech__boxes { opacity: 1; } .site .section--tech .container { position: relative; z-index: 1; } /* textos de la columna izquierda en blanco sobre el naranja */ .site .section--tech .kicker { color: #fff; } .site .section--tech .kicker__line { background: #fff; } .site .section--tech .display { color: #fff; } .site .section--tech .display em { color: var(--ink); font-style: normal; } .site .section--tech .tech__lede { color: rgba(255,255,255,0.92); } .site .section--tech .tech__photo { border: 2px solid rgba(255,255,255,0.25); border-radius: var(--r-leve); overflow: hidden; } /* Cajas tech: blancas con separación normal y leve profundidad */ .site .section--tech .tech-grid { gap: var(--space-3); } .site .section--tech .tech-item { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-leve); margin: 0; padding: var(--space-4); color: var(--ink); font-size: 0.86rem; box-shadow: 0 6px 14px -8px rgba(0,0,0,0.25); transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out); cursor: default; } .site .section--tech .tech-item svg { color: var(--orange); flex-shrink: 0; width: 24px; height: 24px; } .site .section--tech .tech-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 40%, transparent); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.3); } /* centrar verticalmente la grid de teclas con la columna de foto+copy */ .site .section--tech .tech { align-items: center; } /* ===== Metodología: cards verticales (body con padding) ===== */ .site .elem-row__body { padding: var(--space-5) var(--space-5) var(--space-6); } .site .elem-row__body h3 { font-size: clamp(1.25rem, 2vw, 1.5rem) !important; } .site .elem-row__icon { margin-top: calc(-1 * var(--space-5) - 27px); position: relative; background: var(--orange) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 20px -8px rgba(229,80,48,0.5); } /* ===== VIGILANCIA: reducir espacio entre header y proceso en recurso humano ===== */ .site #recurso-humano .section-head { margin-bottom: var(--space-6); } /* ===== CENTRO DE CONTROL: espacio entre título y párrafo ===== */ .site .control__copy .display { margin-bottom: var(--space-5); } /* ===== CONSULTORÍA: iconos en áreas (en vez de números) ===== */ .site .area__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--r-leve); border: 1.5px solid color-mix(in srgb, var(--orange) 30%, transparent); background: var(--orange-soft); color: var(--orange); transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out); } .site .area__icon svg { width: 26px; height: 26px; } .site .area:hover .area__icon { background: var(--orange); color: #fff; } @media (max-width: 600px) { .site .area__icon { width: 44px; height: 44px; } .site .area__icon svg { width: 22px; height: 22px; } } /* ===== CONSULTORÍA: áreas como cards con foto (grid 2x2) ===== */ .site .area-list--cards { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 760px) { .site .area-list--cards { grid-template-columns: 1fr 1fr; } } .site .area-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-leve); overflow: hidden; transition: border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); } .site .area-card:hover { border-color: var(--orange); transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(14,14,31,0.25); } .site .area-card__media { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; } .site .area-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); } .site .area-card:hover .area-card__media img { transform: scale(1.05); } .site .area-card__body { padding: var(--space-5) var(--space-5) var(--space-6); } .site .area-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--r-leve); background: var(--orange); color: #fff; margin-top: calc(-1 * var(--space-5) - 27px); margin-bottom: var(--space-4); position: relative; box-shadow: 0 8px 20px -8px rgba(229,80,48,0.5); } .site .area-card__icon svg { width: 26px; height: 26px; } .site .area-card__body h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-2); } .site .area-card__body p { color: var(--muted); line-height: var(--leading-relaxed); margin: 0; } /* ===== ESPECIALIZADOS: parallax suave en fotos ===== */ .site .feature-split__photo--parallax { position: relative; overflow: hidden; } .site .feature-split__photo--parallax img { display: block; width: 100%; height: 420px; object-fit: cover; /* escala extra para tener margen de movimiento sin dejar huecos */ transform: scale(1.18) translateY(var(--py, 0)); will-change: transform; } @media (max-width: 760px) { .site .feature-split__photo--parallax img { height: 320px; } } @media (prefers-reduced-motion: reduce) { .site .feature-split__photo--parallax img { transform: none; } } /* ===== CONSULTORÍA: carrusel deslizable "lo que evaluamos" ===== */ .site .eval-wrap { position: relative; } .site .eval-nav { display: flex; gap: var(--space-2); justify-content: flex-end; margin-bottom: var(--space-4); } .site .eval-nav__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-leve); border: 1.5px solid var(--line); background: var(--bg-card); color: var(--ink); cursor: pointer; transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); } .site .eval-nav__btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); } .site .eval-nav__btn svg { width: 18px; height: 18px; } /* ocultar scrollbar visualmente pero permitir scroll */ .site .eval-grid::-webkit-scrollbar { height: 6px; } .site .eval-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--orange) 40%, transparent); border-radius: var(--r-leve); } /* ===== CONSULTORÍA: menos espacio header-cards en "lo que evaluamos" ===== */ .site #auditoria .section-head { margin-bottom: var(--space-7); } .site #auditoria .section-head__lede { margin-bottom: 0; } /* carrusel full width: rompe el container y ocupa todo el ancho del viewport */ .site #auditoria .eval-wrap { margin-top: 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .site #auditoria .eval-grid { padding-top: 4px; padding-left: max(var(--space-6), calc((100vw - 1200px) / 2 + var(--space-6))); padding-right: var(--space-6); } /* ===== CONSULTORÍA: hover sutil en cards de áreas ===== */ .site .area-card:hover .area-card__media img { transform: scale(1.06); } .site .area-card__icon { transition: transform .3s var(--ease-out); } .site .area-card:hover .area-card__icon { transform: scale(1.08); } .site .area-card__body h3 { transition: color .25s var(--ease-out); } .site .area-card:hover .area-card__body h3 { color: var(--orange); } /* ===== CONSULTORÍA: pattern de fondo en manejo de crisis (oscura) ===== */ .site .section--crisis { position: relative; overflow: hidden; } .site .section--crisis::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(229,80,48,0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,80,48,0.10) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 75%); pointer-events: none; z-index: 0; } /* glow naranja sutil arriba */ .site .section--crisis::after { content: ""; position: absolute; top: -15%; left: 50%; transform: translateX(-50%); width: 60%; height: 50%; background: radial-gradient(ellipse, rgba(229,80,48,0.16), transparent 65%); filter: blur(100px); pointer-events: none; z-index: 0; } .site .section--crisis .container { position: relative; z-index: 1; } /* ===== BLOG: hero con texto animado (typewriter) ===== */ .site .hero-blog { background: var(--bg-alt); text-align: center; position: relative; overflow: hidden; } .site .hero-blog__inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .site .hero-blog .kicker { justify-content: center; } .site .hero-blog__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); margin: var(--space-3) 0 var(--space-5); } /* la palabra animada dentro de un recuadro con borde punteado naranja */ .site .hero-blog__typewrap { display: inline-flex; align-items: center; position: relative; } .site .hero-blog__type { color: var(--orange); min-height: 1.1em; } .site .hero-blog__caret { color: var(--orange); font-weight: 400; margin-left: 2px; animation: blogCaret 1s steps(1) infinite; } @keyframes blogCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .site .hero-blog__lede { color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 54ch; } @media (prefers-reduced-motion: reduce) { .site .hero-blog__caret { animation: none; } } /* ===== BLOG: anular el hero oscuro viejo (ahora el hero es claro/beige) ===== */ .site.page-blog .hero-blog { background: var(--bg-alt); color: var(--ink); } .site.page-blog .hero-blog .hero-int__bg { display: none; } .site.page-blog .hero-blog__title { color: var(--ink); } .site.page-blog .hero-blog__lede { color: var(--ink-soft); } .site.page-blog .hero-blog .kicker { color: var(--orange); } .site.page-blog .hero-blog .kicker__line { background: var(--orange); } /* ===== HOME: cards de soluciones más slim (icono al lado del título) ===== */ .site .solution__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); } .site .solution__head h3 { margin: 0; } .site .solution__icon { width: 44px; height: 44px; padding: 9px; } /* ===== VIGILANCIA: metodología con icono al lado del título (menos altura) ===== */ .site .elem-row__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .site .elem-row__head h3 { margin: 0 !important; font-size: clamp(1.2rem, 2vw, 1.5rem) !important; } /* el icono ya no flota sobre la imagen: tamaño normal, sin margin negativo */ .site .elem-row__head .elem-row__icon { margin-top: 0 !important; margin-bottom: 0 !important; width: 46px !important; height: 46px !important; flex-shrink: 0; } .site .elem-row__head .elem-row__icon svg { width: 24px; height: 24px; } /* menos padding en el body */ .site .elem-row__body { padding: var(--space-4) var(--space-5) var(--space-5) !important; } /* ===== VIGILANCIA: espacio entre título y párrafo en recurso tecnológico ===== */ .site .section--tech .tech__copy .display { margin-bottom: var(--space-5); } /* ===== SERVICIOS: botones del hero a la MISMA altura (pills CTA) ===== */ .site .hero-int__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); } /* el btn-anim de "Solicitar cotización" mantiene su altura base */ .site .hero-int__actions .btn-anim--lg { padding: 14px 26px; } /* el WhatsApp (diag-btn) igualado a la misma altura: círculo más chico + mismo padding vertical */ .site .hero-int__actions .diag-btn--wa { padding: 14px 8px 14px 24px; border: 1px solid var(--line-strong); box-shadow: 0 6px 18px -10px rgba(14,14,31,0.25); } .site .hero-int__actions .diag-btn--wa .diag-btn__arrow { width: 30px; height: 30px; } .site .hero-int__actions .diag-btn--wa .diag-btn__arrow svg { width: 15px; height: 15px; } .site .hero-int__actions .diag-btn--wa:hover { box-shadow: 0 14px 30px -12px rgba(14,14,31,0.3); } /* ===== CONSULTORÍA: áreas con icono al lado del título (menos altura) ===== */ .site .area-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .site .area-card__head h3 { margin: 0 !important; font-size: clamp(1.2rem, 2vw, 1.5rem) !important; } .site .area-card__head .area-card__icon { margin-top: 0 !important; margin-bottom: 0 !important; width: 46px !important; height: 46px !important; flex-shrink: 0; } .site .area-card__head .area-card__icon svg { width: 24px; height: 24px; } .site .area-card__body { padding: var(--space-4) var(--space-5) var(--space-5) !important; } /* ===== ESPECIALIZADOS: espacio entre título y párrafo en las 3 secciones ===== */ .site .section--feature .feature-split__copy .display { margin-bottom: var(--space-5); } /* ============================================================ AJUSTES SESION (fotos esp / confian / numeros why / boton wa) ============================================================ */ /* Fix nosotros "Lo que nos hace distintos": los numeros usaban -webkit-text-stroke (contorno con relleno transparente). Ese contorno renderiza con doble linea en varios navegadores/fuentes y se veia como una falla. Lo cambiamos a relleno blanco translucido SIN contorno: limpio y consistente en cualquier navegador. En hover pasan a blanco solido, igual que antes. Tambien quitamos la grid de fondo de la seccion, que ademas se transparentaba en los numeros. */ .site .section--why::before { background-image: none; } .site .why-item__num { color: rgba(255, 255, 255, 0.20); -webkit-text-stroke: 0; } .site .why-item:hover .why-item__num { color: var(--paper); -webkit-text-stroke: 0; } /* Fix contacto: el boton "Escribenos por WhatsApp" era full width y dejaba mucho espacio verde sobrante a los lados con el texto corto. Que abrace su contenido y quede alineado a la izquierda como el resto de la columna. */ .site .contacto__info .btn--whatsapp { width: auto; } /* ============================================================ AJUSTES SESION 2 (cobertura region / clientes + nodos) ============================================================ */ /* Cobertura: en vez de listar 2 estados con ciudades (se veia pobre), region del noreste + estados como pills, sin mencionar ciudades. */ .site .cov-region { margin: 0 0 var(--space-7) 0; } .site .cov-region__label { display: block; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4); } .site .cov-region__states { display: flex; flex-wrap: wrap; gap: var(--space-3); } .site .cov-pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--orange-deep); background: rgba(229, 80, 48, 0.10); border: 1px solid rgba(229, 80, 48, 0.18); padding: 0.65rem 1.3rem; border-radius: var(--r-leve); } /* Patron reutilizable para romper secciones blancas seguidas: fondo crema + glows naranjas en contra esquinas + grid blueprint. Se aplica agregando la clase .section--pattern a la
. */ .site .section--pattern { background: var(--bg-cream); position: relative; overflow: hidden; } .site .section--pattern::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(62% 80% at 0% 0%, rgba(229, 80, 48, 0.30), transparent 66%), radial-gradient(62% 80% at 100% 100%, rgba(229, 80, 48, 0.28), transparent 66%); } .site .section--pattern::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(229, 80, 48, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(229, 80, 48, 0.07) 1px, transparent 1px); background-size: 42px 42px; } .site .section--pattern > * { position: relative; z-index: 1; } /* Fix nosotros "Nuestra imagen": las celdas del shuffle-grid no tenian position:relative, por eso las fotos (absolute inset:0) se salian de su celda y la cuadricula se veia vacia. */ .site .shuffle-grid__cell { position: relative; } /* ================================================================= AJUSTE: ESQUINAS RECTAS (solo componentes indicados en imagenes) Todo lo demas conserva su radio actual. ================================================================= */ /* Botones (aparecen en casi todas las imagenes) */ .site .btn, .site .btn-anim, .site .btn-anim__blob, .site .btn-anim:hover .btn-anim__blob, .site .btn-anim--solid .btn-anim__blob, .site .why-phone { border-radius: var(--r-leve) !important; } /* Home: tarjetas de soluciones 01-04 + su icono */ .site .solution, .site .solution__icon { border-radius: var(--r-leve) !important; } /* Home: banner "Profesionales uniformados" + tarjetas de operacion */ .site .op-hero, .site .op-hero__media, .site .op-tile, .site .op-tile__media { border-radius: var(--r-leve) !important; } /* Home: logos de clientes (marquee) */ .site .marquee__item { border-radius: var(--r-leve) !important; } /* Home: mapa de cobertura */ .site .coverage__map, .site .coverage__map-img { border-radius: var(--r-leve) !important; } /* Vigilancia: tarjetas de elementos (Recurso Humano / Tecnologico) + icono + foto */ .site .elem-row, .site .elem-row__media, .site .elem-row__icon { border-radius: var(--r-leve) !important; } /* Vigilancia: foto del Centro de Control */ .site .control__photo { border-radius: var(--r-leve) !important; } /* Nosotros: tarjetas "Experiencia comprobada" + sus etiquetas */ .site .risk-row, .site .risk-row__tag { border-radius: var(--r-leve) !important; } /* Nosotros: tarjetas de normatividad/credenciales + check de esquina */ .site .norma, .site .section--norma .norma, .site .norma__check, .site .section--norma .norma__check { border-radius: var(--r-leve) !important; } /* Nosotros: foto enmarcada del equipo (feature split) */ .site .feature-split__photo { border-radius: var(--r-leve) !important; } /* Nosotros: galeria barajada (cuadricula de fotos) */ .site .shuffle-grid, .site .shuffle-grid__cell { border-radius: var(--r-leve) !important; } /* ================================================================= AJUSTE: SIN ITALICAS (conserva color y enfasis, solo texto recto) ================================================================= */ .site em, .site i, .site h1 em, .site h2 em, .site .display em, .site .display--inverse em, .site .display--on-orange em, .site .industry__name i, .site .modal__head h2 em { font-style: normal !important; } /* ================================================================= AJUSTE 2: MAS ESQUINAS RECTAS ================================================================= */ /* Boton WhatsApp (diag): pildora recta + flecha en cuadro (no bolita) */ .site .diag-btn, .site .diag-btn__arrow { border-radius: var(--r-leve) !important; } /* "Llamanos directo": el icono pasa de circulo a cuadro, como los otros */ .site .hero__call-icon, .site .hero__call:hover .hero__call-icon { border-radius: var(--r-leve) !important; } /* Consultoria: tarjetas de areas (Analisis de Riesgos / Auditorias) + foto + icono */ .site .area-card, .site .area-card__media, .site .area-card__icon { border-radius: var(--r-leve) !important; } /* Consultoria: tarjetas de evaluacion (Seguridad fisica / Empleados...) + icono */ .site .eval-item, .site .eval-item__icon { border-radius: var(--r-leve) !important; } /* Consultoria: tarjetas oscuras de crisis (Actos criminales...) */ .site .crisis-card { border-radius: var(--r-leve) !important; } /* ================================================================= AJUSTE 3: botones de telefono estilo "WhatsApp/diagnostico" (pildora blanca + cajita naranja a la derecha con icono de telefono) ================================================================= */ .site .hero__call { background: #fff; border: 0; padding: 12px 12px 12px 24px; gap: 12px; color: var(--ink); border-radius: var(--r-leve); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .site .hero__call:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); } .site .hero__call-text { order: 0; } .site .hero__call-label { display: none; } .site .hero__call-num { line-height: 1; } .site .hero__call-icon { order: 2; width: 38px; height: 38px; padding: 0; border: 0; background: var(--orange); color: #fff; border-radius: var(--r-leve); flex-shrink: 0; transition: transform .25s var(--ease-out); } .site .hero__call:hover .hero__call-icon { background: var(--orange); color: #fff; transform: translateX(3px); } .site .hero__call-icon svg { width: 18px; height: 18px; } /* Botones de telefono delineados (.why-phone) al mismo patron */ .site .why-phone { background: #fff; color: var(--ink); border: 0; padding: 12px 12px 12px 24px; gap: 12px; border-radius: var(--r-leve); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); } .site .why-phone:hover { background: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); } .site .why-phone svg { order: 2; width: 38px; height: 38px; padding: 10px; box-sizing: border-box; background: var(--orange); color: #fff; border-radius: var(--r-leve); flex-shrink: 0; transition: transform .25s var(--ease-out); } .site .why-phone:hover svg { transform: translateX(3px); } /* Curvatura leve global (referencia: leve leve curvatura en esquinas) */ :root { --r-leve: 6px; } /* ================================================================= AJUSTE 4: WhatsApp identico a "Iniciar diagnostico" (neutralizar overrides del modificador --wa) ================================================================= */ .site .hero-int__actions .diag-btn--wa { padding: 12px 12px 12px 24px; border: 0; box-shadow: none; } .site .hero-int__actions .diag-btn--wa:hover { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); } .site .hero-int__actions .diag-btn--wa .diag-btn__arrow { width: 38px; height: 38px; } .site .hero-int__actions .diag-btn--wa .diag-btn__arrow svg { width: 18px; height: 18px; } /* ================================================================= AJUSTE 5: misma altura en botones CTA (criterio = boton de telefono) ================================================================= */ :root { --btn-h: 62px; } .site .btn--lg, .site .btn-anim, .site .diag-btn, .site .why-phone, .site .hero__call { min-height: var(--btn-h); } /* ================================================================= AJUSTE 6: carrusel (Auditoria de seguridad, consultoria) ================================================================= */ .site .carousel { overflow: hidden; } .site .carousel-track { display: flex; gap: 20px; transition: transform .55s cubic-bezier(.22, .61, .36, 1); will-change: transform; list-style: none; margin: 0; padding: 0; } .site .carousel .eval-item { flex: 0 0 calc(50% - 10px); box-sizing: border-box; } @media (max-width: 720px) { .site .carousel .eval-item { flex: 0 0 100%; } } .site .carousel-controls { display: flex; align-items: center; gap: 14px; margin-top: 24px; } .site .c-dots { display: flex; gap: 8px; } .site .c-dots .dot { width: 9px; height: 9px; border-radius: var(--r-leve); border: 0; background: var(--ink); opacity: .25; cursor: pointer; padding: 0; transition: .35s; } .site .c-dots .dot.on { opacity: 1; width: 24px; background: var(--orange); } .site .c-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: var(--r-leve); cursor: pointer; font-size: 1.5rem; line-height: 1; font-family: var(--font-sans); transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); } .site .c-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-1px); } /* ================================================================= AJUSTE 7: hover de boton unificado (tipo boton de telefono) fondo claro -> sombra oscura ; fondo oscuro -> sombra brillante ================================================================= */ .site .btn:hover, .site .btn-anim:hover, .site .diag-btn:hover, .site .why-phone:hover, .site .hero__call:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5) !important; } .site :is(.section--control, .section--industrias, .section--crisis) :is(.btn, .btn-anim, .diag-btn, .why-phone, .hero__call):hover { box-shadow: 0 16px 40px -10px rgba(255, 255, 255, 0.32) !important; } /* ================================================================= AJUSTE 8: base recta en fotos que tienen un container debajo (esquina superior leve, inferior recta para que pegue al cuerpo) ================================================================= */ .site .op-tile__media, .site .elem-row__media, .site .area-card__media { border-radius: var(--r-leve) var(--r-leve) 0 0 !important; }