/* ============================================================ NODIO — overrides sobre la plantilla Gratech (Grantheme) Paleta + tipografía + ajustes puntuales de contenido. ============================================================ */ :root, :root[data-theme=dark], :root[data-theme=dark] .light-area { --primary-color: #2f6f8f; --primary10: rgba(47, 111, 143, 0.1); --primary-tint: #dbe6ea; --primary-light: #8fd0ea; --gradient-bg: linear-gradient(100deg, #2f6f8f -10%, #12181d 260%); --secondary-color: #1c1b19; --main-bg: #f4f1eb; --sub-bg: #ece6d9; --heading-color: #1c1b19; --paragraph: #57534a; --span: #57534a; --border: #e0d8c6; --white: #ffffff; --black: #000000; } body{ font-family:'Inter',sans-serif; background-color:var(--main-bg); } h1,h2,h3,h4,h5,h6{ font-family:'Manrope',sans-serif; } .section-header h2{ text-transform:none; } /* utilidades reutilizadas de la migración anterior */ .p-40{ padding:40px; } @media (max-width:575px){ .p-40{ padding:26px; } } .ul-style-2{ list-style:none;padding:0;margin:0 0 18px; } .ul-style-2 li{ position:relative;padding-left:26px;margin-bottom:10px;color:var(--paragraph); } .ul-style-2 li:before{ content:'\f00c';font-family:"Font Awesome 6 Free";font-weight:900; position:absolute;left:0;top:2px;color:var(--primary-color);font-size:.8rem; } .border-top-1-dark{ border-top:1px solid var(--border); } /* ============================================================ Header: la plantilla lo da SIEMPRE fixed y con texto blanco (asume que siempre hay una foto/degradado oscuro detrás). Como nuestro header es claro, forzamos color oscuro con especificidad suficiente y reservamos el hueco con padding-top en . ============================================================ */ .header-area.header-two-area{ background:rgba(244,241,235,.94) !important; backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--border) !important; } .header-area.header-two-area::after{ display:none; } .header-area.header-two-area .header__container{ padding-top:10px;padding-bottom:10px; } .header-area.header-two-area .header__main .main-menu ul li a, .header-area.header-two-area .header__main .main-menu nav ul li a{ color:var(--heading-color) !important; font-size:.92rem; } .header-area.header-two-area .header__main .bars i{ color:var(--heading-color) !important; } .header-area .logo img{ height:26px; width:auto; } .header-area.header-two-area .d-xl-flex .btn-one{ padding:10px 20px;font-size:.88rem; } .header-area.header-two-area .nh-whatsapp{ width:36px;height:36px;font-size:.92rem; } body{ padding-top:60px; } /* la plantilla capitaliza cada palabra (convención inglesa); en español queda raro ("Cuéntanos Tu Proceso") — lo desactivamos */ .btn-one, h1, h2, h3, h4, h5, h6, .banner__inner-page, .banner__inner-page span{ text-transform:none !important; } /* la plantilla también auto-inicializa meanmenu sobre el mismo nav; usamos nuestro propio panel lateral (sidebar-area), así que lo ocultamos */ .mean-container{ display:none !important; } /* meanmenu solo oculta el nav de escritorio (con JS) por debajo de 480px, pero nuestro botón de hamburguesa aparece por debajo de 1200px (d-xl-none): entre 480px y 1199px se veían los dos a la vez. Forzamos el mismo corte. */ @media (max-width:1199.98px){ .header-area .main-menu{ display:none !important; } } /* en móviles muy estrechos, el ancho fijo del panel lateral (350px) se pasa del viewport; lo limitamos a un porcentaje para que quepa siempre */ @media (max-width:380px){ .sidebar-area{ width:88vw !important; } } .nodio-mobile-nav{ list-style:none;margin:0 0 20px;padding:0; } .nodio-mobile-nav li{ border-bottom:1px solid rgba(255,255,255,.12); } .nodio-mobile-nav li a{ display:block;padding:14px 0;color:#fff;font-weight:600;font-size:1.05rem; } .nh-whatsapp{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%; border:1.5px solid var(--border);color:var(--heading-color);font-size:1.05rem; transition:background .2s ease,color .2s ease,border-color .2s ease; } .nh-whatsapp:hover{ background:#25D366;border-color:#25D366;color:#fff; } /* ---------- Hero: gradiente propio en vez de foto de stock ---------- OJO: la plantilla solo posiciona `.slide-bg` cuando va dentro de `.banner__slider` (el swiper). Como usamos una sola diapositiva sin swiper, hay que darle la posición nosotros mismos. */ .banner-two-area{ min-height:720px;display:flex;align-items:center; } .banner-two-area .slide-bg{ position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2; background:url(../assets/photos/hero-bg.jpg) center center/cover no-repeat; } .banner-two-area .hero-overlay{ position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1; background:linear-gradient(100deg, rgba(6,10,16,.62) 0%, rgba(6,10,16,.32) 45%, rgba(6,10,16,.15) 70%); } .banner-two-area .container{ position:relative;z-index:1; } .banner-two__content h4{ color:var(--primary-color) !important; } .banner-two__content{ padding:70px 0 !important; } .banner-two__content h1{ font-size:52px !important;line-height:1.15 !important; } @media (max-width:767px){ .banner-two__content h1{ font-size:36px !important; } } /* eyebrow en píldora, centrado */ .hero-pill-eyebrow{ display:inline-flex;align-items:center;gap:10px; border:1px solid rgba(255,255,255,.22);border-radius:999px; padding:9px 20px;font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:600; color:rgba(255,255,255,.9);background:rgba(255,255,255,.05);backdrop-filter:blur(6px); margin-bottom:24px; } .hero-pill-eyebrow .dot{ width:8px;height:8px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 10px 2px rgba(47,111,143,.7); } .hero-center-content{ max-width:760px;margin:0 auto; } .hero-mini-stats{ display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:34px; } .hero-mini-stats div{ display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1rem; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); border-radius:999px;padding:12px 22px;backdrop-filter:blur(8px); } .hero-mini-stats i{ width:26px;height:26px;border-radius:50%;flex:none; background:rgba(47,111,143,.4);color:var(--primary-light); display:flex;align-items:center;justify-content:center;font-size:.82rem; } @media (max-width:575px){ .hero-mini-stats div{ padding:10px 16px;font-size:.88rem; } } /* etiquetas decorativas en las esquinas */ .hero-corner{ position:absolute;font-size:.66rem;letter-spacing:.15em;font-weight:700; color:rgba(255,255,255,.38);line-height:1.7;z-index:2; } .hero-corner-left{ left:5%;bottom:6%; } .hero-corner-right{ right:6%;bottom:8%;text-align:right; } /* ---------- Brand: la plantilla usa el degradado del CTA (oscuro) de fondo, pensado para pasar por encima de una foto de héroe con logos claros. Con nuestros logos de color, necesita fondo claro. ---------- */ .brand__wrp{ background:var(--main-bg) !important; margin-top:0 !important; padding:36px 0 !important; overflow:hidden; } /* marquee CSS puro: la pista lleva los logos duplicados x2 y se desplaza -50% de su ancho total, así el bucle no tiene corte ni salto visible */ .logo-marquee{ overflow:hidden;width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .logo-marquee-track{ display:flex;align-items:center;gap:64px;width:max-content; animation:logoMarquee 32s linear infinite; } .logo-marquee:hover .logo-marquee-track{ animation-play-state:paused; } .logo-marquee-track img{ height:36px;width:auto;max-width:130px;object-fit:contain;flex:none; } @keyframes logoMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (max-width:575px){ .logo-marquee-track{ gap:40px; } .logo-marquee-track img{ height:28px; } } /* ---------- About: sustituye el collage de 2 fotos por el logo ---------- */ .about-two__left-item .about-visual{ position:relative;display:flex;align-items:center;justify-content:center; min-height:360px;background:var(--secondary-color);border-radius:24px;overflow:hidden; } .about-two__left-item .about-visual::before{ content:'';position:absolute;width:70%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, rgba(47,111,143,.35) 0%, transparent 72%); } .about-two__left-item .about-visual img{ position:relative;z-index:1;width:52%;max-width:220px;height:auto; } /* ---------- "Por qué NODIO" fusionado dentro de Quiénes somos (franja horizontal a ancho completo, bajo las dos columnas) ---------- */ .about-merge-strip{ border-top:1px solid var(--border);margin-top:44px;padding-top:36px; display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap; } .ams-head{ flex:0 0 300px;max-width:320px; } .ams-head h3{ font-size:22px;line-height:1.28;margin-bottom:8px;letter-spacing:-.01em; } .ams-head p{ margin:0;font-size:15px;color:var(--paragraph);display:flex;align-items:center;gap:9px; } .ams-items{ flex:1 1 420px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } .ams-item{ display:flex;gap:14px;align-items:flex-start; } .ams-icon{ width:40px;height:40px;border-radius:50%;flex:none; background:var(--primary-tint);color:var(--primary-color); display:flex;align-items:center;justify-content:center;font-size:.95rem; } .ams-item h5{ font-size:14px;margin-bottom:3px; } .ams-item p{ font-size:12.5px;color:var(--paragraph);margin:0;line-height:1.45; } @media (max-width:991px){ .ams-items{ grid-template-columns:1fr; } .ams-head{ flex:1 1 100%;max-width:none;margin-bottom:6px; } } /* eyebrow con línea corta, para secciones oscuras */ .nodio-eyebrow-line{ display:inline-flex;align-items:center;gap:12px;margin-bottom:14px; font-family:'Manrope',sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.18em;color:rgba(255,255,255,.7); } .nodio-eyebrow-line span{ width:28px;height:2px;background:var(--primary-color);display:inline-block; } .nodio-eyebrow-line.nodio-eyebrow-dark{ color:var(--paragraph); } .text-accent-blue{ color:var(--primary-color); } /* ---------- Quiénes somos (preview en Inicio) — versión compacta, más horizontal, sección reducida a ~mitad de altura ---------- */ .nodio-h2-tight{ font-size:clamp(28px,2.4vw,38px) !important;line-height:1.18 !important; letter-spacing:-0.015em;margin-bottom:14px !important; } .nodio-lead{ font-size:16px;color:var(--paragraph);line-height:1.55;margin-bottom:18px; } .nodio-lead strong{ color:var(--heading-color); } /* cita en píldora, con icono */ .nodio-quote-pill{ display:flex;align-items:center;gap:16px; background:var(--primary10);border:1px solid rgba(47,111,143,.18); border-radius:16px;padding:16px 22px;margin-bottom:22px; } .nqp-icon{ width:40px;height:40px;border-radius:50%;flex:none; background:var(--primary-color);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1rem; } .nqp-text{ display:flex;flex-direction:column;gap:2px; } .nqp-text strong{ color:var(--heading-color);font-size:15.5px;font-weight:700;line-height:1.35; } .nqp-text span{ color:var(--paragraph);font-size:13.5px;line-height:1.35; } /* tres argumentos como tarjetas anchas y bajas, con icono + número */ .argument-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px; } .arg-card{ background:#fff;border:1px solid var(--border);border-radius:16px; padding:20px 20px 18px; box-shadow:0 1px 2px rgba(0,0,0,.02), 0 10px 24px rgba(0,0,0,.03); transition:transform .2s ease,box-shadow .2s ease; } .arg-card:hover{ transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.06); } .arg-card-top{ display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; } .arg-icon{ width:44px;height:44px;border-radius:50%;flex:none; background:var(--primary-tint);color:var(--primary-color); display:flex;align-items:center;justify-content:center;font-size:1.05rem; } .arg-num{ color:#b9c0c6;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px; } .arg-label{ color:var(--primary-color);font-weight:800;font-size:10px;letter-spacing:.05em; text-transform:uppercase;margin-bottom:8px; } .arg-card h5{ font-size:15px;margin-bottom:6px;line-height:1.3; } .arg-card p{ font-size:12.5px;color:var(--paragraph);margin:0;line-height:1.5; } @media (max-width:767px){ .argument-cards{ grid-template-columns:1fr; } } /* fila del CTA con nota lateral */ .about-cta-row{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; } .about-cta-caption{ padding-left:20px;border-left:1px solid var(--border); font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--paragraph); line-height:1.6;text-transform:uppercase; } /* ---------- panel de evolución horizontal (sustituye a la foto) ---------- */ .evolution-panel{ background:var(--secondary-color);border-radius:14px;padding:30px 30px 26px; position:relative;overflow:hidden; } .evolution-panel::before{ content:'';position:absolute;top:-40%;right:-15%;width:60%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, rgba(47,111,143,.28) 0%, transparent 72%); } .evolution-panel::after{ content:'';position:absolute;right:-70px;bottom:-70px;width:230px;height:230px; border:1px solid rgba(143,208,234,.16);border-radius:50%;pointer-events:none; } .evolution-eyebrow{ position:relative;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;letter-spacing:.14em; margin-bottom:14px; } .evolution-eyebrow strong{ color:#fff;font-weight:800; } .evolution-heading{ position:relative;color:#fff;font-size:clamp(20px,2vw,26px);line-height:1.25; letter-spacing:-0.01em;margin-bottom:24px; } .evolution-flow-h{ position:relative;display:flex;align-items:flex-start;gap:10px; } .ev-step-h{ flex:1 1 0;min-width:0;transition:transform .25s ease; } .ev-icon{ width:40px;height:40px;border-radius:50%;flex:none; background:rgba(47,111,143,.35);color:var(--primary-light); display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:12px; transition:background .25s ease,box-shadow .25s ease; } .ev-step-h:hover{ transform:translateY(-2px); } .ev-step-h:hover .ev-icon{ background:rgba(47,111,143,.6);box-shadow:0 0 0 5px rgba(47,111,143,.14); } .ev-step-h h5{ color:#fff;font-size:13.5px;margin-bottom:2px;line-height:1.25; } .ev-step-h p{ color:rgba(255,255,255,.55);font-size:11.5px;margin:0;line-height:1.35; } .ev-arrow{ color:rgba(255,255,255,.25);font-size:.7rem;flex:none;margin-top:13px; } .evolution-caption{ position:relative;color:rgba(255,255,255,.5);font-size:12px;line-height:1.55;margin:22px 0 0; padding-top:18px;border-top:1px solid rgba(255,255,255,.1); } @media (max-width:575px){ .evolution-flow-h{ flex-wrap:wrap; } .ev-arrow{ display:none; } .ev-step-h{ flex:1 1 40%; } } .proof-row{ display:flex;flex-wrap:wrap;gap:0;margin-top:20px; border:1px solid var(--border);border-radius:14px;overflow:hidden; } .proof-item{ flex:1 1 0;padding:16px 18px;border-right:1px solid var(--border); display:flex;align-items:center;gap:12px;transition:background .2s ease; } .proof-item:hover{ background:rgba(47,111,143,.05); } .proof-item:last-child{ border-right:none; } .proof-icon{ width:38px;height:38px;border-radius:50%;flex:none; background:var(--primary-tint);color:var(--primary-color); display:flex;align-items:center;justify-content:center;font-size:.92rem; } .proof-text{ display:flex;flex-direction:column;gap:2px;min-width:0; } .proof-num{ font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--heading-color); } .proof-label{ font-size:11.5px;color:var(--paragraph); } @media (max-width:767px){ .proof-item{ flex:1 1 100%;border-right:none;border-bottom:1px solid var(--border); } .proof-item:last-child{ border-bottom:none; } } /* cita final de marca, bajo la fila de datos */ .about-testimonial{ margin-top:20px;padding:22px 24px 20px;background:#fff; border:1px solid var(--border);border-radius:16px; } .ats-icon{ color:var(--primary-color);font-size:1.15rem;opacity:.55;margin-bottom:10px; } .about-testimonial p{ font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;line-height:1.4; color:var(--heading-color);margin:0 0 16px; } .ats-sign{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .ats-logo{ font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--heading-color); } .ats-logo .dot{ color:var(--primary-color); } .ats-line{ width:22px;height:1px;background:var(--border); } .ats-sign > span:last-child{ font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--paragraph);text-transform:uppercase; } /* botón píldora pequeño (variante compacta del CTA) */ .btn-pill-sm{ display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap; background:var(--primary-color);color:#fff;font-weight:700;font-size:.85rem; padding:11px 20px;border-radius:999px;transition:transform .2s ease; } .btn-pill-sm:hover{ color:#fff;transform:translateY(-2px); } /* ============================================================ Servicios (Inicio) — spec pixel-precisa sobre captura de referencia ============================================================ */ .services-section{ position:relative;overflow:hidden; background: radial-gradient(circle at 92% 8%, rgba(47,111,143,.40) 0%, rgba(28,27,25,.22) 18%, rgba(20,19,17,0) 42%), radial-gradient(circle at 48% 110%, rgba(47,111,143,.22) 0%, rgba(20,19,17,0) 48%), linear-gradient(115deg, #1c1b19 0%, #171614 43%, #1e2b32 72%, #1c1b19 100%); color:#f5f7f8;padding:80px 24px; } .services-section::before{ content:'';position:absolute;width:460px;height:460px;top:-235px;right:330px; border:1px solid rgba(47,111,143,.35);border-radius:50%;pointer-events:none; } .services-section::after{ content:'';position:absolute;width:380px;height:380px;right:-190px;top:185px; border:1px solid rgba(47,111,143,.30);border-radius:50%;pointer-events:none; } /* usa el mismo .container de Bootstrap que el resto del sitio, para que el margen izquierdo/derecho coincida siempre con las secciones vecinas (antes tenía su propio max-width:1386px y quedaba desalineado) */ .services-container{ position:relative;z-index:2; } .services-header{ max-width:850px;margin-bottom:32px; } .services-eyebrow{ display:flex;align-items:center;gap:16px; font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:.35em;text-transform:uppercase; color:var(--primary-light);margin-bottom:22px; } .services-eyebrow::before{ content:'';width:43px;height:1px;background:var(--primary-light); } .services-title{ margin:0;max-width:820px;font-family:'Manrope',sans-serif; font-size:clamp(34px,3.5vw,55px);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:#f5f7f8; } .services-title span{ color:var(--primary-light); } .services-description{ max-width:720px;margin:16px 0 20px;font-size:18px;line-height:1.4;font-weight:400;color:#aebbc5; } .services-button{ display:inline-flex;align-items:center;justify-content:center;gap:14px; min-width:156px;height:45px;padding:0 25px; border:1px solid rgba(47,111,143,.45);border-radius:4px; background:linear-gradient(180deg, var(--primary-color), #1c4a5e); color:#fff;font-family:'Manrope',sans-serif;font-size:13px;font-weight:650;text-decoration:none; transition:.25s ease; } .services-button:hover{ color:#fff;transform:translateY(-2px);border-color:var(--primary-light);box-shadow:0 8px 25px rgba(47,111,143,.28); } .services-grid{ display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;margin-top:20px; } .service-card{ position:relative;min-height:205px;padding:25px 25px 22px;border-radius:15px; background: radial-gradient(circle at 5% 5%, rgba(47,111,143,.10), transparent 35%), linear-gradient(135deg, #fbfbfa 0%, #f7f6f3 55%, #f2f1ed 100%); border:1px solid rgba(255,255,255,.5); box-shadow:0 2px 3px rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.08); color:var(--heading-color); } .service-card-top{ display:flex;align-items:flex-start;gap:22px; } .service-icon{ width:65px;height:65px;flex:0 0 65px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:var(--primary-tint);color:var(--primary-color);font-size:1.6rem; } .service-card h3{ margin:16px 40px 6px 0;font-family:'Manrope',sans-serif;font-size:18px;line-height:1.25; font-weight:700;letter-spacing:-.02em;color:var(--heading-color); } .service-card p{ margin:0 0 40px;max-width:320px;font-size:15px;line-height:1.42;font-weight:400;color:var(--paragraph); } .service-number{ position:absolute;top:17px;right:20px;font-family:'Manrope',sans-serif;font-size:16px;font-weight:500;color:#b9c0c6; } .service-link{ position:absolute;left:25px;bottom:22px;display:inline-flex;align-items:center;gap:10px; color:var(--primary-color);font-family:'Manrope',sans-serif;font-size:12px;font-weight:750; letter-spacing:.08em;text-transform:uppercase;text-decoration:none; } .service-link i{ font-size:11px;transition:transform .2s ease; } .service-link:hover{ color:var(--primary-color); } .service-link:hover i{ transform:translateX(4px); } .services-benefits{ margin-top:24px;min-height:115px;display:grid;grid-template-columns:repeat(3,1fr) 175px; align-items:center;padding:0 28px;border-radius:17px; border:1px solid rgba(47,111,143,.32); background:linear-gradient(110deg, rgba(28,27,25,.96), rgba(30,45,54,.9)); box-shadow:inset 0 1px rgba(255,255,255,.015); } .benefit{ min-height:64px;display:flex;align-items:center;gap:20px; padding:18px 32px 18px 0;border-right:1px solid rgba(47,111,143,.34); } .benefit + .benefit{ padding-left:32px; } .benefit-icon{ width:62px;height:62px;flex:0 0 62px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(47,111,143,.35);color:var(--primary-light);font-size:1.3rem; } .benefit h4{ margin:0 0 5px;font-family:'Manrope',sans-serif;font-size:15px;line-height:1.2;font-weight:650;color:#fff; } .benefit p{ margin:0;font-size:13px;color:#9fadb7; } .benefit-tag{ align-items:center;justify-content:center;flex-direction:column;text-align:right; font-size:11px;letter-spacing:.1em;font-weight:700;color:rgba(255,255,255,.4);line-height:1.7; } @media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .services-benefits{ grid-template-columns:repeat(2,1fr);gap:20px;padding:28px;min-height:0; } .benefit{ border-right:0;padding:8px 0; } .benefit + .benefit{ padding-left:0; } .benefit-tag{ display:none !important; } } @media (max-width:700px){ .services-section{ padding:55px 20px; } .services-title{ font-size:34px; } .services-description{ font-size:16px; } .services-grid{ grid-template-columns:1fr; } .service-card{ min-height:auto; } .services-benefits{ grid-template-columns:1fr; } } /* ---------- FAQ: sin imagen lateral ---------- */ .faq-area .faq__image{ display:none; } .faq-area .col-lg-7{ margin: 0 auto; } /* ---------- Footer ---------- */ .footer-two-area .footer-title{ color:#fff; } /* el CTA final trae un margen negativo pensado para solaparse con el footer de la plantilla original; con el nuestro se pisan */ .quote__wrp{ margin-bottom:0 !important; } .quote-area{ padding-bottom:60px; } /* ============================================================ Página interior: banner con degradado (sin foto de stock) ============================================================ */ .banner__inner-page.nodio-inner-banner{ background:radial-gradient(120% 160% at 15% 10%, #24384a 0%, #1c1b19 55%, #141414 100%) !important; } /* la plantilla superpone su propio degradado azul de fábrica encima (::before); lo anulamos */ .banner__inner-page.nodio-inner-banner::before{ background:none !important; } .banner__inner-page .breadcrumb-list a, .banner__inner-page .breadcrumb-list span{ color:rgba(255,255,255,.75); } .banner__inner-page .breadcrumb-list a:hover{ color:#fff; } /* ============================================================ Rejilla dividida con líneas (mismo lenguaje que las 4 capacidades) ============================================================ */ .svc-grid > [class*="col-"]{ position:relative;border-top:1px solid var(--border);padding-top:8px; } .svc-grid > [class*="col-"]:first-child{ border-top:none; } @media (min-width:768px){ .svc-grid > [class*="col-"]:nth-child(2n+1){ border-left:none; } .svc-grid > [class*="col-md-6"]{ border-left:1px solid var(--border); } .svc-grid > [class*="col-"]:nth-child(-n+2){ border-top:none; } } @media (min-width:992px){ .svc-grid > [class*="col-"]:nth-child(2n+1){ border-left:1px solid var(--border); } .svc-grid > [class*="col-"]:nth-child(3n+1){ border-left:none !important; } .svc-grid > [class*="col-"]:nth-child(-n+2){ border-top:1px solid var(--border); } .svc-grid > [class*="col-"]:nth-child(-n+3){ border-top:none; } } .svc-grid-sm > [class*="col-"]{ border-top:1px solid var(--border);padding-top:8px; } @media (min-width:992px){ .svc-grid-sm > [class*="col-"]:nth-child(2){ border-left:1px solid var(--border); } } /* ============================================================ Servicios (interior) — bloques ampliados de detalle (01/02/03/05) ============================================================ */ .svc-feature{ padding:48px 0;border-top:1px solid var(--border); } .svc-feature:first-of-type{ border-top:none;padding-top:8px; } .svc-feature-num{ display:flex;align-items:center;gap:16px;margin-bottom:16px; font-family:'Manrope',sans-serif;font-weight:800;font-size:2rem;color:rgba(47,111,143,.35); } .svc-feature-num::after{ content:'';flex:1;max-width:70px;height:2px;background:var(--border); } .svc-feature h3{ font-size:clamp(22px,2.2vw,30px);line-height:1.25;margin-bottom:14px;letter-spacing:-.01em; } .svc-feature-desc{ font-size:16px;color:var(--paragraph);line-height:1.6;margin-bottom:22px; } .svc-feature-list{ display:flex;flex-direction:column;gap:18px; } .svc-feature-list + .svc-feature-focus{ margin-top:22px; } .sfl-item{ display:flex;align-items:flex-start;gap:14px; } .sfl-icon{ width:40px;height:40px;border-radius:50%;flex:none; background:var(--primary-tint);color:var(--primary-color); display:flex;align-items:center;justify-content:center;font-size:1rem; } .sfl-item p{ margin:0;font-size:14.5px;color:var(--heading-color);line-height:1.4;padding-top:9px; } .svc-feature-focus{ border-left:3px solid var(--primary-color);background:var(--primary10); border-radius:0 12px 12px 0;padding:14px 20px;margin-top:22px; } .svc-feature-focus strong{ display:block;color:var(--primary-color);font-size:11px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px; } .svc-feature-focus p{ margin:0;font-size:14.5px;color:var(--heading-color);line-height:1.45; } /* ---------- pipeline horizontal claro (servicio 02) ---------- */ .pipeline-flow{ display:flex;align-items:flex-start;gap:14px;margin-top:36px; padding:26px 28px;background:var(--main-bg);border:1px solid var(--border);border-radius:18px; } .pf-step{ flex:1 1 0;min-width:0; } .pf-icon{ width:42px;height:42px;border-radius:50%;flex:none; background:var(--primary-tint);color:var(--primary-color); display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:12px; } .pf-step h5{ font-size:14px;margin-bottom:3px;line-height:1.3; } .pf-step p{ font-size:12.5px;color:var(--paragraph);margin:0;line-height:1.4; } .pf-arrow{ color:var(--border);font-size:.8rem;flex:none;margin-top:16px; } @media (max-width:767px){ .pipeline-flow{ flex-wrap:wrap; } .pf-arrow{ display:none; } .pf-step{ flex:1 1 40%; } } /* ---------- mockup de panel de datos, CSS puro (servicio 05) ---------- */ .dash-mock{ margin-top:36px;background:#fff;border:1px solid var(--border);border-radius:18px; padding:20px 24px 26px;box-shadow:0 2px 3px rgba(0,0,0,.03), 0 12px 28px rgba(0,0,0,.04); } .dash-mock-head{ display:flex;align-items:center;gap:6px;margin-bottom:20px; } .dm-dot{ width:8px;height:8px;border-radius:50%;background:var(--border); } .dm-title{ margin-left:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px;color:var(--heading-color); } .dash-mock-kpis{ display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap; } .dm-kpi{ flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:8px; background:var(--main-bg);border:1px solid var(--border);border-radius:12px;padding:10px 14px; } .dm-kpi-label{ font-size:12.5px;font-weight:700;color:var(--heading-color); } .dm-kpi-trend{ font-size:.8rem; } .dm-kpi-trend.up{ color:#2f8f5c; } .dm-kpi-trend.down{ color:#b9483f; } .dash-mock-chart{ display:flex;align-items:flex-end;gap:10px;height:110px; border-bottom:1px solid var(--border);padding-bottom:2px; } .dm-bar{ flex:1 1 0;border-radius:5px 5px 0 0; background:linear-gradient(180deg, var(--primary-color), rgba(47,111,143,.55)); } @media (max-width:480px){ .dm-kpi{ flex:1 1 100%; } } /* ============================================================ Diagrama de flujo animado (SVG) — Servicios ============================================================ */ .flow-section{ overflow:hidden;background:var(--secondary-color); } /* el diagrama tiene texto a tamaño fijo pensado para 1200px de ancho; si se encoge al ancho de un móvil el texto queda ilegible, así que en pantallas estrechas se deja a su tamaño real y se desliza en horizontal */ .flow-wrap{ margin-top:20px; } .flow-diagram{ width:100%;height:auto;display:block; } @media (max-width:991px){ .flow-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px; } .flow-diagram{ width:auto;min-width:820px; } } .flow-node-box{ fill:#242322;stroke:rgba(255,255,255,.14);stroke-width:1; } .flow-node-box.brain{ fill:url(#brainGrad);stroke:var(--primary-color);stroke-width:2; } .flow-node-box.leaf{ fill:#1c1b19; } .flow-label{ font-family:'Inter',sans-serif;fill:#fff;font-size:14px;font-weight:600; } .flow-sub{ font-family:'Inter',sans-serif;fill:rgba(255,255,255,.68);font-size:11.5px; } .flow-tag{ font-family:'Inter',sans-serif;fill:var(--primary-light);font-size:10.5px;font-weight:700;letter-spacing:.06em; } .flow-path{ fill:none;stroke:rgba(47,111,143,.45);stroke-width:1.6;stroke-dasharray:5 6;animation:flowdash 4.5s linear infinite; } .flow-path.p2{ animation-duration:5.2s; } .flow-path.p3{ animation-duration:6s; } .flow-path.trunk{ stroke:rgba(47,111,143,.6);stroke-width:2; } @keyframes flowdash{ to{ stroke-dashoffset:-220; } } .flow-node{ opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease; } .flow-diagram.in .flow-node{ opacity:1;transform:none; } .flow-diagram.in .flow-node[data-d="0"]{ transition-delay:.05s; } .flow-diagram.in .flow-node[data-d="1"]{ transition-delay:.35s; } .flow-diagram.in .flow-node[data-d="2"]{ transition-delay:.55s; } .flow-diagram.in .flow-node[data-d="3"]{ transition-delay:.75s; } .flow-diagram.in .flow-node[data-d="4"]{ transition-delay:.95s; } .flow-diagram.in .flow-node[data-d="5"]{ transition-delay:1.15s; } .flow-brain-pulse{ fill:none;stroke:var(--primary-color);stroke-width:1.5;opacity:0;transform-origin:center;animation:brainpulse 2.6s ease-out infinite; } @keyframes brainpulse{ 0%{opacity:.7;transform:scale(.7)} 100%{opacity:0;transform:scale(1.9)} } .flow-legend{ display:flex;gap:28px;flex-wrap:wrap;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1); } .flow-legend li{ display:flex;align-items:center;gap:9px;font-size:.85rem;color:rgba(255,255,255,.68); } .flow-legend .dot{ width:9px;height:9px;border-radius:50%; } .flow-legend .dot.c1{ background:var(--primary-color); } .flow-legend .dot.c2{ background:#5c5c60; } /* ---------- panel de monitorización, más vistoso, con números y gráficas (servicio 03) ---------- */ .ops-panel{ background:#fff;border:1px solid var(--border);border-radius:20px; padding:24px 26px 28px;box-shadow:0 2px 4px rgba(0,0,0,.03), 0 18px 40px rgba(20,40,60,.06); } .ops-panel-head{ display:flex;align-items:center;gap:6px;margin-bottom:22px; } .ops-panel-head .dm-title{ margin-left:10px; } .ops-live{ margin-left:auto;display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:700;color:#2f8f5c;letter-spacing:.03em; } .ops-live-dot{ width:7px;height:7px;border-radius:50%;background:#2f8f5c; box-shadow:0 0 0 3px rgba(47,143,92,.18);animation:opsLivePulse 1.8s ease-in-out infinite; } @keyframes opsLivePulse{ 0%,100%{opacity:1} 50%{opacity:.4} } .ops-kpis{ display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap; } .ops-kpi{ flex:1 1 0;background:var(--main-bg);border:1px solid var(--border);border-radius:14px; padding:14px 14px;display:flex;flex-direction:column;gap:4px; } .ops-kpi-num{ font-family:'Manrope',sans-serif;font-weight:800;font-size:1.35rem;color:var(--heading-color); } .ops-kpi-label{ font-size:11px;color:var(--paragraph);line-height:1.3; } .ops-chart-row{ display:flex;gap:20px;align-items:center; } .ops-chart{ flex:1 1 0;min-width:0; } .ops-chart-label{ display:block;font-size:11.5px;font-weight:700;color:var(--paragraph);margin-bottom:10px; } .ops-line-chart{ width:100%;height:90px;display:block;overflow:visible; } .ops-line-area{ fill:rgba(47,111,143,.12);stroke:none; } .ops-line-stroke{ fill:none;stroke:var(--primary-color);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; } .ops-gauge{ position:relative;width:112px;height:112px;flex:none; } .ops-gauge svg{ width:100%;height:100%;transform:rotate(-90deg); } .og-bg{ fill:none;stroke:var(--main-bg);stroke-width:9; } .og-fill{ fill:none;stroke:var(--primary-color);stroke-width:9;stroke-linecap:round; stroke-dasharray:216 264;stroke-dashoffset:0; } .ops-gauge-text{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; } .ops-gauge-num{ font-family:'Manrope',sans-serif;font-weight:800;font-size:1.3rem;color:var(--heading-color); } .ops-gauge-label{ font-size:9.5px;color:var(--paragraph);text-align:center;line-height:1.25;margin-top:2px; } @media (max-width:480px){ .ops-kpi{ flex:1 1 100%; } } @media (max-width:575px){ .ops-chart-row{ flex-direction:column; } .ops-gauge{ align-self:center; } } /* ---------- helper reveal-on-scroll ---------- */ .reveal-io{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .reveal-io.in{opacity:1;transform:none} /* ---------- Quiénes somos / Contacto: paneles auxiliares ---------- */ .info-card{ background:var(--main-bg);border:1px solid var(--border);border-radius:16px; padding:32px;height:100%; } .info-card .num{ color:var(--primary-color);font-weight:800;font-size:1.4rem;margin-bottom:8px; } .stack-card{ display:flex;align-items:center;gap:14px;background:var(--main-bg); border:1px solid var(--border);border-radius:14px;padding:18px 20px;height:100%; } .stack-card img{ height:30px;width:auto;flex:none; } .stack-card span{ font-weight:700;font-size:.92rem;color:var(--heading-color); } .contact-info-card{ display:flex;align-items:center;gap:16px;background:var(--main-bg); border:1px solid var(--border);border-radius:16px;padding:26px;height:100%; } .contact-info-card i{ font-size:1.4rem;color:var(--primary-color); } .contact-info-card h5{ margin-bottom:4px; } /* ===================================================================== PULIDO UI/UX (auditoría ui-ux-pro-max) — solo CSS, aditivo. Prioridades: accesibilidad > interacción > tipografía/contraste. ===================================================================== */ /* 1. Foco visible para teclado (el tema lo anulaba con outline:none) */ a:focus-visible, button:focus-visible, .accordion-button:focus-visible, [tabindex]:focus-visible, .btn-one:focus-visible, .btn-pill-sm:focus-visible, .services-button:focus-visible, .service-link:focus-visible{ outline:3px solid var(--primary-color) !important;outline-offset:3px;border-radius:6px; } .services-section a:focus-visible, .footer-two-area a:focus-visible, .banner-two-area a:focus-visible, .sidebar-area a:focus-visible, .sidebar-area button:focus-visible{ outline-color:var(--primary-light) !important; } /* 2. Objetivos táctiles >= 44px */ .header-area.header-two-area .nh-whatsapp{ width:44px;height:44px; } .footer__item .social-icon a{ min-width:44px;min-height:44px; } /* 3. Contraste (WCAG AA 4.5:1) */ .banner-two__content h1 span{ color:var(--primary-light) !important; } .hero-corner{ color:rgba(255,255,255,.72); } .arg-num, .service-number{ color:#6b7680; } .ev-step-h p{ color:rgba(255,255,255,.75); } .ev-arrow{ color:rgba(255,255,255,.5); } .evolution-caption{ color:rgba(255,255,255,.72); } .faq-area .section-header h5{ color:var(--primary-color); } .footer__copyright p, .footer__copyright p span{ color:rgba(255,255,255,.72); } /* 4. Texto pequeño demasiado pequeño / interlineado del proof-row */ .arg-label{ font-size:10.5px;letter-spacing:.03em;line-height:1.3; } .evolution-heading .text-accent-blue{ color:var(--primary-light); } .arg-card p{ font-size:13.5px; } .proof-text{ line-height:1.3; } .proof-num{ line-height:1.25; } .proof-label{ font-size:13px;line-height:1.35; } .ev-step-h p{ font-size:12.5px; } .nqp-text span{ font-size:14px; } /* 5. Titulares equilibrados (evita huérfanos tipo "ti.") */ h1, h2, h3, .nodio-h2-tight, .services-title{ text-wrap:balance; } p, .nodio-lead{ text-wrap:pretty; } /* 6. Footer: columnas alineadas por arriba, no centradas */ .footer__wrp{ align-items:flex-start; } /* 7. Movimiento reducido: sin marquee, sin reveals, sin pulsos */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } .logo-marquee-track{ animation:none !important;flex-wrap:wrap;justify-content:center;width:auto; } .logo-marquee-track img[aria-hidden="true"]{ display:none; } .wow, .reveal-io{ visibility:visible !important;opacity:1 !important;transform:none !important; } } /* ===================================================================== MEJORA GRÁFICA (ui-ux-pro-max) — misma paleta y tipografías de marca. Composición asimétrica, profundidad y coherencia entre piezas. ===================================================================== */ /* ---- Hero: texto a la izquierda, portátil de la foto visible a la derecha ---- */ .hero-cta-row{ display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px; } .hero-btn{ display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 26px;border-radius:12px; font-family:'Manrope',sans-serif;font-weight:700;font-size:.98rem;text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .hero-btn-primary{ color:#fff;background:linear-gradient(180deg,#3a83a8,#2f6f8f); box-shadow:0 10px 28px rgba(47,111,143,.45), inset 0 1px 0 rgba(255,255,255,.25); } .hero-btn-primary:hover{ color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(47,111,143,.6), inset 0 1px 0 rgba(255,255,255,.3); } .hero-btn-ghost{ color:#fff;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);backdrop-filter:blur(6px); } .hero-btn-ghost:hover{ color:#fff;border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-2px); } .hero-mini-stats div{ font-size:.92rem;padding:9px 18px;background:rgba(255,255,255,.06); } @media (min-width:992px){ .banner-two-area .hero-overlay{ background: linear-gradient(90deg, rgba(6,10,16,.92) 0%, rgba(6,10,16,.72) 34%, rgba(6,10,16,.18) 62%, rgba(6,10,16,0) 80%), linear-gradient(0deg, rgba(6,10,16,.45) 0%, rgba(6,10,16,0) 30%); } .hero-center-content{ max-width:none;margin:0;text-align:left !important; } .hero-center-content > *{ max-width:640px; } .banner-two__content h1{ font-size:clamp(44px,4.3vw,62px) !important;line-height:1.08 !important;letter-spacing:-.02em;text-wrap:balance; } .banner-two__content p{ font-size:1.12rem;color:rgba(255,255,255,.82); } .hero-cta-row, .hero-mini-stats{ justify-content:flex-start; } .hero-corner-left{ display:none !important; } } /* ---- Franja de tecnologías: monocroma y uniforme; color al pasar el ratón ---- */ .brand__wrp{ border-bottom:1px solid var(--border); } .logo-marquee-track{ gap:56px; } .logo-marquee-track img{ width:104px;height:32px;max-width:none;object-fit:contain; filter:grayscale(1) contrast(1.05);opacity:.6;transition:filter .25s ease, opacity .25s ease; } .logo-marquee-track img:hover{ filter:none;opacity:1; } /* ---- Cabeceras de páginas interiores: rejilla técnica + halo, alineadas a la izquierda ---- */ .banner__inner-page.nodio-inner-banner{ position:relative;overflow:hidden;padding-top:110px !important;padding-bottom:100px !important; background: radial-gradient(60% 120% at 88% 0%, rgba(47,111,143,.45) 0%, rgba(47,111,143,0) 60%), linear-gradient(120deg,#1c1b19 0%,#182229 60%,#1e3441 100%) !important; } .banner__inner-page.nodio-inner-banner::before{ content:'' !important;position:absolute;inset:0;background: linear-gradient(rgba(143,208,234,.07) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,rgba(143,208,234,.07) 1px,transparent 1px) 0 0/44px 44px !important; -webkit-mask-image:linear-gradient(100deg,transparent 15%,#000 85%);mask-image:linear-gradient(100deg,transparent 15%,#000 85%); pointer-events:none; } .banner__inner-page.nodio-inner-banner::after{ content:'';position:absolute;width:420px;height:420px;right:6%;top:-180px;border-radius:50%; border:1px solid rgba(143,208,234,.22);pointer-events:none; } .banner__inner-page.nodio-inner-banner .container{ position:relative;z-index:1; } .banner__inner-page.nodio-inner-banner h2{ font-size:clamp(34px,4.2vw,58px);letter-spacing:-.02em;line-height:1.08;margin-bottom:22px; } .banner__inner-page .breadcrumb-list{ display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:.88rem; } /* ---- Tarjetas: iconos con degradado, elevación y borde luminoso al hover ---- */ .service-icon, .arg-icon, .proof-icon, .ams-icon{ background:linear-gradient(145deg,#eaf2f5,#cfe0e7); box-shadow:inset 0 0 0 1px rgba(47,111,143,.18); transition:background .25s ease,color .25s ease,transform .25s ease; } .service-card{ transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; overflow:hidden; } .service-card::before{ content:'';position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--primary-color),var(--primary-light)); transform:scaleX(0);transform-origin:left;transition:transform .35s ease; } .service-card:hover{ transform:translateY(-5px);box-shadow:0 2px 3px rgba(0,0,0,.08),0 22px 44px rgba(0,0,0,.28),0 0 0 1px rgba(143,208,234,.35); } .service-card:hover::before{ transform:scaleX(1); } .service-card:hover .service-icon{ background:var(--primary-color);color:#fff;transform:scale(1.06); } .service-link i{ transition:transform .2s ease; } .service-card:hover .service-link i{ transform:translateX(4px); } .arg-card:hover .arg-icon{ background:var(--primary-color);color:#fff; } /* ---- Cita: de gris apagado a tarjeta cálida con barra de marca ---- */ .nodio-quote-pill{ background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary-color); border-radius:14px;box-shadow:0 8px 24px rgba(28,27,25,.06); } /* ---- Paneles oscuros: textura de rejilla sutil ---- */ .evolution-panel{ background-image: linear-gradient(rgba(143,208,234,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(143,208,234,.05) 1px,transparent 1px); background-size:32px 32px; } /* ---- FAQ: tarjetas con estado abierto claro ---- */ .faq-area .accordion-item{ border:1px solid var(--border) !important;border-radius:14px !important;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease; } .faq-area .accordion-item:hover{ box-shadow:0 10px 26px rgba(28,27,25,.08); } .faq-area .accordion-button:not(.collapsed){ color:var(--primary-color);background:var(--primary10);box-shadow:none; } /* ---- Quiénes somos: titular principal más contenido ---- */ main h1.mb-3{ font-size:clamp(34px,4.2vw,58px);line-height:1.1;letter-spacing:-.02em; } @media (prefers-reduced-motion: reduce){ .service-card, .service-card::before, .hero-btn{ transition:none !important; } .service-card:hover{ transform:none; } } /* ajustes tras revisión visual */ .banner-two-area{ min-height:800px; } @media (min-width:992px){ .banner-two__content{ padding:96px 0 80px !important; } .hero-mini-stats{ margin-top:26px; } } .logo-marquee-track img{ filter:grayscale(1) brightness(.72) contrast(1.15);opacity:.8; } .logo-marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }