/* ===== Sirion Applied AI - brand overrides over Davies template ===== */ /* Subtle navy gradient backdrop instead of flat black. NOTE: keep this on only — putting an opaque bg on #wrapper would paint over the hero video (which sits at z-index:-1). */ body.counter-scroll { background-color: var(--black); background-image: radial-gradient(120% 80% at 50% -10%, rgba(0, 217, 255, 0.06) 0%, rgba(6, 11, 20, 0) 60%); background-attachment: fixed; } /* ---- Hero video: dark fallback so it never washes cyan if the video can't decode (e.g. WebM in Safari). ---- */ .section-hero-v1 .bg-video { background-color: var(--black); } .section-hero-v1 .bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; } /* cyan hue tint over the video (the look you liked) */ .section-hero-v1 .bg-video .video-overlay { opacity: 1; } /* ---- Logo (emblem mark + wordmark lockup) ---- */ .logo-site.sirion-logo { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; } .logo-site.sirion-logo .sirion-mark { height: 42px; width: 42px; object-fit: contain; flex: 0 0 auto; /* render the emblem in white to match the wordmark */ filter: grayscale(1) brightness(2.6) contrast(1.05); } .logo-site.sirion-logo .sirion-word { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: var(--white); white-space: nowrap; } .offcanvas-menu .logo-site.sirion-logo .sirion-mark { height: 46px; width: 46px; } @media (max-width: 767px) { .logo-site.sirion-logo .sirion-mark { height: 36px; width: 36px; } .logo-site.sirion-logo .sirion-word { font-size: 19px; } } /* ---- Service: static grid of sector cards (GSAP pin disabled via class rename) ---- */ .section-service-sirion .wrap-control { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .section-service-sirion .wg-service-2 { position: relative; inset: auto; margin: 0; gap: 0; flex-direction: column; padding: 36px; border: 1px solid var(--white-16); border-radius: 20px; background: rgba(255, 255, 255, 0.015); transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; } .section-service-sirion .wg-service-2:hover { border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.04); transform: translateY(-6px); } .section-service-sirion .wg-service-2 .main-image { max-width: unset; width: 100%; margin-bottom: 28px; } .section-service-sirion .wg-service-2 .main-image .image { position: relative; width: 100%; height: 180px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(150deg, rgba(0, 217, 255, 0.28) 0%, rgba(6, 11, 20, 0.5) 55%, rgba(6, 11, 20, 0.85) 100%), url('../images/item/bg-1.jpg'); background-size: cover; background-position: center; } .section-service-sirion .sector-icon { width: 64px; height: 64px; color: #ffffff; opacity: 0.95; filter: drop-shadow(0 0 14px rgba(0, 217, 255, 0.55)); transition: transform 0.3s ease, color 0.3s ease; } .section-service-sirion .wg-service-2:hover .sector-icon { color: var(--primary); transform: scale(1.08); } .section-service-sirion .wg-service-2 .main-image .image img, .section-service-sirion .wg-service-2 .main-image .action, .section-service-sirion .wg-service-2 .image-simu, .section-service-sirion .wg-service-2 .image-2 { display: none; } .section-service-sirion .wg-service-2 .center { width: 100%; align-self: stretch; } .section-service-sirion .wg-service-2 .desc { margin-bottom: 24px; } .section-service-sirion .wg-service-2 .br-line { margin-bottom: 24px; } .section-service-sirion .wg-service-2 .tf-list { margin-bottom: 32px; } @media (max-width: 991px) { .section-service-sirion .wrap-control { grid-template-columns: 1fr; } } /* group labels spanning the full grid width */ .section-service-sirion .sector-group-label { grid-column: 1 / -1; margin-top: 8px; padding-bottom: 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-64); border-bottom: 1px solid var(--white-16); } .section-service-sirion .sector-group-label:not(:first-child) { margin-top: 28px; } /* chat mockup inside the Asistentes de IA card */ .section-service-sirion .main-image .image.chat-demo { height: auto; min-height: 200px; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding: 20px; background-image: linear-gradient(150deg, rgba(0, 217, 255, 0.12) 0%, rgba(6, 11, 20, 0.9) 100%); } .section-service-sirion .chat-bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; } .section-service-sirion .chat-bubble.in { align-self: flex-start; background: rgba(255, 255, 255, 0.1); color: #fff; border-bottom-left-radius: 4px; } .section-service-sirion .chat-bubble.out { align-self: flex-end; background: rgba(0, 217, 255, 0.92); color: #04222b; font-weight: 500; border-bottom-right-radius: 4px; } /* Salud case icon (no client logo) */ .sirion-casos .caso-logo .caso-icon { width: 42px; height: 42px; color: var(--primary); filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.5)); } /* ---- Certificaciones ---- */ .sirion-certs .col-right { padding-bottom: 0; margin-bottom: 48px; } .sirion-certs .cert-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sirion-certs .cert-item { display: flex; align-items: flex-start; gap: 18px; padding: 26px; border: 1px solid var(--white-16); border-radius: 16px; background: rgba(255, 255, 255, 0.015); transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; } .sirion-certs .cert-item:hover { border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.04); transform: translateY(-4px); } .sirion-certs .cert-ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--primary-rgb), 0.1); border: 1px solid rgba(var(--primary-rgb), 0.35); } .sirion-certs .cert-ic svg { width: 26px; height: 26px; color: var(--primary); } .sirion-certs .cert-ic .cert-logo { max-width: 34px; max-height: 34px; object-fit: contain; /* render institution logos in white for a clean, uniform look on dark */ filter: brightness(0) invert(1); opacity: 0.92; } .sirion-certs .cert-name { font-size: 17px; font-weight: 500; color: var(--white); line-height: 1.3; margin-bottom: 6px; } .sirion-certs .cert-org { font-size: 13.5px; letter-spacing: 0.04em; color: var(--white-64); margin: 0; } @media (max-width: 767px) { .sirion-certs .cert-list { grid-template-columns: 1fr; } } /* ---- Certificaciones (estilo Award cascade) ---- */ .sirion-certs-award .tf-swiper { height: 200px; margin-top: 8px; } /* each certification is one self-contained block (org on top, program below) */ .sirion-certs-award .award-item { display: block; } .sirion-certs-award .award-item .award-org { display: block; font-size: 23px; font-weight: 500; line-height: 1.2; } .sirion-certs-award .award-item .award-prog { display: block; margin-top: 4px; font-size: 14px; line-height: 1.3; opacity: 0.7; } .sirion-certs-award .flip-image.cert-flip { display: flex; align-items: center; justify-content: center; padding: 34px; background: linear-gradient(155deg, rgba(0, 217, 255, 0.12) 0%, rgba(6, 11, 20, 0.92) 70%); border: 1px solid var(--white-16); } .sirion-certs-award .cert-flip--text { background: linear-gradient(155deg, rgba(0, 217, 255, 0.2) 0%, rgba(6, 11, 20, 0.92) 70%); } .sirion-certs-award .cert-flip .flip-logo { max-width: 72%; max-height: 56%; object-fit: contain; filter: brightness(0) invert(1); } .sirion-certs-award .flip-text { font-size: 30px; font-weight: 600; line-height: 1.1; color: #fff; text-align: center; letter-spacing: -0.01em; } @media (max-width: 767px) { .sirion-certs-award .flip-text { font-size: 18px; } } /* ---- Sector landing pages ---- */ .sector-hero { position: relative; min-height: 78vh; display: flex; align-items: center; padding: 160px 0 80px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .sector-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 11, 20, 0.97) 0%, rgba(6, 11, 20, 0.85) 30%, rgba(6, 11, 20, 0.35) 68%, rgba(6, 11, 20, 0.15) 100%), linear-gradient(0deg, rgba(6, 11, 20, 0.85) 0%, rgba(6, 11, 20, 0) 45%); } .sector-hero .container { position: relative; z-index: 2; } .sector-hero-content { max-width: 640px; } .sector-breadcrumb { letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; } .sector-hero-content h1 { margin-bottom: 22px; } .sector-lead { max-width: 560px; margin-bottom: 34px; font-size: 18px; line-height: 1.55; color: var(--white-64); } .sector-solutions .sector-list { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; } .sector-solutions .sector-list li { font-size: 19px; padding-bottom: 18px; border-bottom: 1px solid var(--white-16); } @media (max-width: 767px) { .sector-hero { min-height: 72vh; padding: 130px 0 60px; } .sector-hero-content { max-width: 100%; } .sector-solutions .sector-list { grid-template-columns: 1fr; } } /* ---- Otras soluciones (navegación entre landings) ---- */ .sector-otras .otras-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .sector-otras .otra-card { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--white-16); border-radius: 14px; color: var(--white); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .sector-otras .otra-card:hover { border-color: rgba(0, 217, 255, 0.5); background: rgba(0, 217, 255, 0.05); color: var(--white); transform: translateY(-3px); } .sector-otras .otra-icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--primary); } .sector-vercasos { padding: 36px 0 0; text-align: center; } /* 404 */ .error404 { background-image: radial-gradient(80% 70% at 60% 30%, rgba(0, 217, 255, 0.12) 0%, rgba(6, 11, 20, 0) 60%); text-align: left; } @media (max-width: 991px) { .sector-otras .otras-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .sector-otras .otras-grid { grid-template-columns: 1fr; } } /* recolor the template's green decorative glows to brand cyan */ .section-cta .bg-img img, .sirion-casos .bg-img img, .section-pricing .bg-img img { filter: hue-rotate(57deg); } /* ---- Footer ---- */ .tf-footer .footer-logo { margin-bottom: 22px; } .tf-footer .footer-tagline { font-size: 15px; line-height: 1.55; max-width: 360px; margin-bottom: 22px; } .tf-footer .footer-heading { margin-bottom: 22px; } @media (max-width: 991px) { .tf-footer .footer-brand { margin-bottom: 44px; } } /* Floating WhatsApp button */ .wa-float { position: fixed; /* stacked above the #goTop button (bottom:40 right:40, 38px tall) */ right: 31px; bottom: 92px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; } .wa-float svg { width: 34px; height: 34px; } .wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); color: #fff; } @media (max-width: 767px) { .wa-float { right: 13px; bottom: 86px; width: 52px; height: 52px; } .wa-float svg { width: 30px; height: 30px; } } /* ---- Problema: stat cards ---- */ .sirion-problema .wg-stat { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 260px; padding: 48px 40px; border: 1px solid var(--white-16); border-radius: 20px; background: rgba(var(--primary-rgb), 0.04); transition: border-color 0.3s ease, transform 0.3s ease; } .sirion-problema .wg-stat:hover { border-color: rgba(var(--primary-rgb), 0.5); transform: translateY(-6px); } .sirion-problema .stat-number { font-size: clamp(48px, 7vw, 88px); line-height: 1; font-weight: 600; } .sirion-problema .stat-desc { color: var(--white-64); max-width: 320px; } .sirion-problema .problema-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--white-16); } /* ---- Brand / client logos (clean centered strip) ---- */ .section-brand .brand-list.sirion-brand-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 72px; border: 0; margin-top: 36px; } .section-brand .brand-list.sirion-brand-list .img-brand { border: 0 !important; aspect-ratio: auto; padding: 8px 12px; opacity: 0.75; } .section-brand .brand-list.sirion-brand-list .img-brand:hover { opacity: 1; } .sirion-brand-list img { width: auto; max-height: 44px; max-width: 130px; object-fit: contain; filter: brightness(0) invert(1); } .sirion-brand-list .brand-wide { max-width: 200px; max-height: 26px; } /* ---- Casos de Éxito (reuse pricing card shell) ---- */ .sirion-casos .wg-plan { display: flex; flex-direction: column; } .sirion-casos .caso-logo { height: 56px; display: flex; align-items: center; margin-bottom: 18px; } .sirion-casos .caso-logo img { width: auto; max-height: 44px; max-width: 160px; object-fit: contain; filter: brightness(0) invert(1); } .sirion-casos .caso-logo .caso-logo-wide { max-width: 190px; max-height: 30px; } .sirion-casos .plan-tag { margin-top: -6px; margin-bottom: 18px; letter-spacing: 0.08em; text-transform: uppercase; } .sirion-casos .plan-desc { flex: 1 1 auto; } .sirion-casos .caso-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--white-16); } .sirion-casos .caso-metric { display: flex; flex-direction: column; gap: 4px; } .sirion-casos .caso-value { font-size: 30px; font-weight: 600; line-height: 1; } .sirion-casos .caso-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .mt-3 { margin-top: 1rem; } .mt-5 { margin-top: 3rem; } /* ---- Process: support a 4th staggered card (template ships 3) ---- */ @media (min-width: 1200px) { .section-process .swiper-slide:nth-child(4) { margin-top: 216px; left: -417px; } } @media (min-width: 1200px) and (max-width: 1399px) { .section-process .swiper-slide:nth-child(4) { left: -15%; margin-top: 216px; } }