/* ========================================================= Scartaris Seguridad — CSS complementario para Elementor SOLO PARA LA PORTADA (Home) --------------------------------------------------------- Compatible con las DOS estructuras de Elementor: · Secciones y columnas clásicas (.elementor-column) · Contenedores flexbox (.e-con) Las reglas que dependen del marcado van duplicadas y cualificadas, así el mismo archivo sirve para ambas. El sitio ya tiene un tema activo y otras páginas publicadas, así que TODO está acotado a la clase .sc-home. ══ CÓMO ACTIVAR EL ÁMBITO ═══════════════════════════════ La clase sc-home va en las 9 secciones de nivel superior de la Home (pestaña Avanzado → Clases CSS). El JSON ya la trae puesta. Alternativa: si Home es la portada estática del sitio, WordPress ya pone la clase .home en el , y podés reemplazar .sc-home por body.home en todo el archivo. ══════════════════════════════════════════════════════════ DÓNDE PEGARLO · Elementor Free → widget HTML dentro de la propia Home (el JSON ya lo incluye — ver 07-css-solo-home.md) · Elementor Pro → Configuración de página → CSS personalizado NO usar «Personalizar → CSS adicional»: eso genera hoja global y se carga en todo el sitio. ========================================================= */ .sc-home{ --sc-azul: #052A82; --sc-azul-osc: #041F61; --sc-azul-brill: #3A63E8; --sc-navy: #0B1826; --sc-titulo: #14202E; --sc-linea: #E7EAEE; --sc-suave: #F5F6F8; } /* --------------------------------------------------------- 1 · TIPOGRAFÍA Solo si el tema NO usa Poppins. Si ya la usa, borrá este bloque entero. --------------------------------------------------------- */ .sc-home{ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .sc-home h1, .sc-home h2, .sc-home h3, .sc-home h4, .sc-home p, .sc-home li, .sc-home span, .sc-home .elementor-button, .sc-home .elementor-heading-title, .sc-home .elementor-icon-box-title, .sc-home .elementor-icon-list-text{ font-family: inherit; } /* --------------------------------------------------------- 2 · CORRECCIONES DE BASE --------------------------------------------------------- */ /* Los SVG de marca usan stroke, no fill. Acotado a .sc-home a propósito: sin ámbito alteraría los iconos de las demás páginas del sitio. */ .sc-home .elementor-icon svg[stroke], .sc-home .elementor-icon svg[stroke] *{ stroke: currentColor; } .sc-home .elementor-icon svg[fill="none"]{ fill: none; } /* El menú del tema tapa el título al saltar a un ancla. Ajustar a la altura real del menú + 20px. */ #servicios, #empresa, #contacto{ scroll-margin-top: 100px; } @media (prefers-reduced-motion: reduce){ .sc-home *, .sc-home *::before, .sc-home *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* --------------------------------------------------------- 3 · HERO — degradado de 3 paradas (Elementor solo permite 2 en la superposición de fondo. Dejar la superposición DESACTIVADA.) --------------------------------------------------------- */ .sc-home.sc-hero{ position: relative; overflow: hidden; } .sc-home.sc-hero::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8,17,28,.95) 0%, rgba(8,17,28,.72) 45%, rgba(8,17,28,.25) 100%); pointer-events: none; } .sc-home.sc-hero > .elementor-container, .sc-home.sc-hero > .e-con-inner{ position: relative; z-index: 1; } /* El título del hero lleva un ligero apretado de letra */ .sc-home.sc-hero .elementor-heading-title{ letter-spacing: -.01em; } /* ══ ANCHOS DE LÍNEA ═════════════════════════════════════ El diseño limita el título a 640px y el párrafo a 520px. Sin esto el texto se estira hasta los 720px de la columna y las líneas quedan demasiado largas para leer cómodo. ═════════════════════════════════════════════════════════ */ .sc-home.sc-hero .elementor-widget-heading .elementor-heading-title{ max-width: 640px; } .sc-home.sc-hero .elementor-widget-text-editor{ max-width: 520px; } /* Fila de botones en línea (estructura clásica: los widgets de una columna se apilan por defecto) */ .sc-home .sc-btn-row > .elementor-widget-wrap{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center; align-content: flex-start; } .sc-home .sc-btn-row > .elementor-widget-wrap > .elementor-element{ width: auto; max-width: none; } .sc-home .sc-btn-row .elementor-widget-button{ margin-bottom: 0 !important; } /* --------------------------------------------------------- 4 · BARRA DE CONFIANZA --------------------------------------------------------- */ /* ══ EL MONTAJE SOBRE EL HERO ════════════════════════════ La sección no ocupa altura (height: 0) y la tarjeta se sube la mitad de sí misma con translateY(-50%). Así queda centrada exactamente sobre la unión hero / Servicios **sea cual sea su altura**. Antes esto iba con márgenes negativos de -55px, que hay que recalcular cada vez que el texto ocupa una línea más. Este método se ajusta solo. El z-index la mantiene por encima de ambas secciones. ═════════════════════════════════════════════════════════ */ .sc-home.sc-trust{ position: relative; z-index: 20; height: 0; padding-top: 0; padding-bottom: 0; } .sc-home.sc-trust > .elementor-container{ transform: translateY(-50%); } /* ══ LA TARJETA BLANCA ═══════════════════════════════════ Aquí se edita el aspecto de la barra de confianza: fondo, esquinas redondeadas, sombra y relleno interior. Estructura clásica: la clase va en la COLUMNA, pero la caja que se ve es su .elementor-widget-wrap interno. Por eso se estiliza el hijo, no la columna. ═════════════════════════════════════════════════════════ */ .sc-home .elementor-column.sc-trust-card > .elementor-widget-wrap{ background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(13,25,40,.08); padding: 30px 22px; /* 22 + 12 de la columna = 34px reales al borde */ } /* Misma tarjeta si algún día se pasa a contenedores flexbox */ .sc-home .e-con.sc-trust-card{ background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(13,25,40,.08); padding: 30px 34px; } /* ══ REPARTO DE LOS 5 ÍTEMS ══════════════════════════════ Cinco columnas iguales, en una sola fila. El «nowrap» es imprescindible: con salto de línea activo, los ítems se quedan a su ancho natural y el quinto baja a una segunda fila en vez de encogerse. Sin él, se reparten el ancho disponible y el texto largo envuelve dentro de su columna, que es lo que buscamos. ═════════════════════════════════════════════════════════ */ .sc-home .sc-trust-row > .elementor-container{ flex-wrap: nowrap; align-items: center; } .sc-home .sc-trust-row > .elementor-container > .elementor-column{ width: 20%; flex: 1 1 20%; min-width: 0; padding: 0 12px; /* 24px entre ítems */ } .sc-home .sc-trust-item .elementor-icon-box-title{ line-height: 1.3; } @media (max-width:1024px){ /* A partir de aquí sí saltan de fila: 3, luego 2, luego 1 */ .sc-home .sc-trust-row > .elementor-container{ flex-wrap: wrap; } .sc-home .sc-trust-row > .elementor-container > .elementor-column{ width: 33.33%; flex: 0 0 33.33%; padding: 12px; } } @media (max-width:767px){ .sc-home .sc-trust-row > .elementor-container > .elementor-column{ width: 50%; flex: 0 0 50%; } } @media (max-width:520px){ .sc-home .sc-trust-row > .elementor-container > .elementor-column{ width: 100%; flex: 0 0 100%; } } /* ══ ALTERNATIVA · ICONO ARRIBA ══════════════════════════ Con el icono a la izquierda al texto le quedan unos 142px por columna. Poniendo el icono encima dispone de los 206px completos, un 45 por ciento más de sitio por línea. Para activarlo, borrá la línea de apertura de comentario que hay justo debajo y la de cierre del final del bloque. ═════════════════════════════════════════════════════════ */ /* .sc-home .sc-trust-item .elementor-icon-box-wrapper{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .sc-home .sc-trust-item .elementor-icon-box-title{ max-width: none; } */ /* ══ COLOR DE LOS ICONOS ═════════════════════════════════ En el widget «Caja de iconos» con vista apilada, Elementor usa color primario = FONDO del círculo y color secundario = color del ICONO. Es al revés de lo que parece. Aquí se fuerzan los dos para que el icono se vea sí o sí, sin depender de cómo hayan quedado en los ajustes. ═════════════════════════════════════════════════════════ */ .sc-home .sc-trust-item .elementor-icon, .sc-home .sc-sector .elementor-icon{ background-color: rgba(5,42,130,.08) !important; color: var(--sc-azul) !important; fill: var(--sc-azul) !important; transition: .2s ease; } .sc-home .sc-trust-item .elementor-icon{ border: 2px solid rgba(5,42,130,.22); } .sc-home .sc-trust-item:hover .elementor-icon, .sc-home .sc-sector:hover .elementor-icon{ background-color: var(--sc-azul) !important; border-color: var(--sc-azul) !important; color: #fff !important; fill: #fff !important; } /* ══ DEJA DE FLOTAR EN TABLET, NO EN MÓVIL ═══════════════ A partir de 1024px los ítems pasan a 3 por fila y la tarjeta crece a dos filas. Si siguiera flotando con translateY(-50%), su mitad inferior se comería el título de Servicios. Por eso el flotado se corta aquí y no en el breakpoint de móvil. ═════════════════════════════════════════════════════════ */ @media (max-width:1024px){ .sc-home.sc-trust{ height: auto; padding: 28px 20px 0; } .sc-home.sc-trust > .elementor-container{ transform: none; } } @media (max-width:767px){ .sc-home .elementor-column.sc-trust-card > .elementor-widget-wrap{ padding: 24px 12px; } .sc-home .e-con.sc-trust-card{ padding: 24px 20px; } } /* --------------------------------------------------------- 5 · SERVICIOS --------------------------------------------------------- */ /* Fondo de 3 capas — no reproducible desde la interfaz */ .sc-home.sc-servicios{ background: radial-gradient(1200px 500px at 80% -10%, rgba(37,74,190,.22), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(37,74,190,.14), transparent 55%), linear-gradient(180deg, #0A1524 0%, #0D1D31 100%) !important; } /* Permitir que las 8 tarjetas salten de fila */ .sc-home .sc-cards-row > .elementor-container{ flex-wrap: wrap; } /* ---- Tarjeta · estructura clásica (la tarjeta es una columna) ---- */ .sc-home .elementor-column.sc-card{ padding: 12px; } .sc-home .elementor-column.sc-card > .elementor-widget-wrap{ display: flex; flex-direction: column; align-content: stretch; height: 100%; padding: 30px 26px 28px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s, box-shadow .3s; } .sc-home .elementor-column.sc-card > .elementor-widget-wrap::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #2E56DC, transparent); opacity: 0; transition: .35s; pointer-events: none; z-index: 2; } .sc-home .elementor-column.sc-card > .elementor-widget-wrap::after{ content: ""; position: absolute; top: -45%; right: -30%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(46,86,220,.35), transparent 70%); opacity: 0; transition: .35s; pointer-events: none; } .sc-home .elementor-column.sc-card:hover > .elementor-widget-wrap{ transform: translateY(-6px); border-color: rgba(90,120,230,.45); background: rgba(255,255,255,.06); box-shadow: 0 22px 46px rgba(3,10,24,.55); } .sc-home .elementor-column.sc-card:hover > .elementor-widget-wrap::before, .sc-home .elementor-column.sc-card:hover > .elementor-widget-wrap::after{ opacity: 1; } .sc-home .elementor-column.sc-card > .elementor-widget-wrap > .elementor-element{ position: relative; z-index: 1; width: 100%; } /* ---- Tarjeta · contenedores flexbox ---- */ .sc-home .e-con.sc-card{ position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s, box-shadow .3s; } .sc-home .e-con.sc-card::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #2E56DC, transparent); opacity: 0; transition: .35s; pointer-events: none; } .sc-home .e-con.sc-card::after{ content: ""; position: absolute; top: -45%; right: -30%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(46,86,220,.35), transparent 70%); opacity: 0; transition: .35s; pointer-events: none; } .sc-home .e-con.sc-card:hover{ transform: translateY(-6px); border-color: rgba(90,120,230,.45) !important; background: rgba(255,255,255,.06) !important; box-shadow: 0 22px 46px rgba(3,10,24,.55); } .sc-home .e-con.sc-card:hover::before, .sc-home .e-con.sc-card:hover::after{ opacity: 1; } /* ---- Común a ambas ---- */ .sc-home .sc-card-icon .elementor-icon{ transition: transform .3s; } .sc-home .sc-card:hover .sc-card-icon .elementor-icon{ transform: translateY(-2px) scale(1.04); } /* El «Ver más» siempre pegado abajo: las 8 tarjetas quedan parejas */ .sc-home .sc-card .sc-card-more{ margin-top: auto !important; margin-bottom: 0 !important; } .sc-home .sc-card-more .elementor-button-icon{ transition: transform .2s; } .sc-home .sc-card:hover .sc-card-more .elementor-button-icon{ transform: translateX(5px); } .sc-home .sc-card:hover .sc-card-more .elementor-button{ color: #A9BCFF !important; } /* «Ver más» — enlace en versalitas, no botón */ .sc-home .sc-card-more .elementor-button{ padding: 0 !important; background: transparent !important; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } .sc-home .sc-card-more .elementor-button-icon svg, .sc-home .sc-card-more .elementor-button-icon i{ width: 14px; height: 14px; font-size: 14px; } /* ══ PÁRRAFO DE CIERRE DE SERVICIOS ══════════════════════ Centrado y limitado a 880px: a 1200 las líneas se hacen demasiado largas. Las negritas van en blanco puro para destacar sobre el gris del resto. ═════════════════════════════════════════════════════════ */ .sc-home .sc-servicios-nota{ max-width: 880px; margin-left: auto; margin-right: auto; margin-top: 56px; } .sc-home .sc-servicios-nota strong{ color: #fff; font-weight: 600; } /* --------------------------------------------------------- 6 · ANTETÍTULOS Y TÍTULOS --------------------------------------------------------- */ .sc-home .sc-eyebrow{ font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; } .sc-home .sc-titulo-subrayado .elementor-heading-title{ position: relative; padding-bottom: 16px; display: block; } .sc-home .sc-titulo-subrayado .elementor-heading-title::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--sc-azul); } /* --------------------------------------------------------- 7 · SECTORES --------------------------------------------------------- */ /* ══ SEPARACIÓN ENTRE LA IMAGEN Y LAS PÍLDORAS ═══════════ La sección interna va con «gap: no» para poder controlar el espaciado desde aquí. Sin este relleno, las píldoras quedan pegadas al borde de la foto. ═════════════════════════════════════════════════════════ */ .sc-home .sc-sectores-grid{ padding-left: 34px; } @media (max-width:1024px){ /* Apiladas: el canal pasa de horizontal a vertical */ .sc-home .sc-sectores-grid{ padding-left: 0; padding-top: 28px; } } /* Las 8 píldoras en 2 columnas dentro de una sola columna */ .sc-home .sc-sectores-grid > .elementor-widget-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: space-between; } .sc-home .sc-sectores-grid > .elementor-widget-wrap > .elementor-element{ width: 100%; margin: 0 !important; } @media (max-width:520px){ .sc-home .sc-sectores-grid > .elementor-widget-wrap{ grid-template-columns: 1fr; } } .sc-home .sc-sector .elementor-icon-box-wrapper{ padding: 12px 20px 12px 12px; border-radius: 999px; border: 1px solid var(--sc-linea); background: #fff; transition: .22s ease; } .sc-home .sc-sector:hover .elementor-icon-box-wrapper{ border-color: transparent; background: rgba(5,42,130,.05); box-shadow: 0 12px 24px rgba(13,25,40,.09); } .sc-home .sc-sector .elementor-icon{ transition: .22s; } .sc-home .sc-sector:hover .elementor-icon{ background: var(--sc-azul) !important; color: #fff !important; transform: scale(1.06); } /* Imagen de la izquierda con degradado y texto encima */ .sc-home .sc-sectores-media{ position: relative; overflow: hidden; } .sc-home .sc-sectores-media > .elementor-widget-wrap{ position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 30px 28px; border-radius: 18px; overflow: hidden; } .sc-home .sc-sectores-media > .elementor-widget-wrap::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,20,45,0) 30%, rgba(5,20,45,.9) 100%); pointer-events: none; } /* --------------------------------------------------------- 8 · PROCESO --------------------------------------------------------- */ .sc-home .sc-steps > .elementor-container{ flex-wrap: wrap; } /* ══ BADGE NUMERADO DE CADA PASO ═════════════════════════ El número lo lleva un contador CSS, no un atributo. La vía de los atributos personalizados (data-num) es exclusiva de Elementor Pro: en Free el ajuste se guarda pero nunca llega al HTML, y los badges salían vacíos. El contador funciona en cualquier edición y además se renumera solo si algún día se reordenan o añaden pasos. Posición: el círculo mide 64px y va centrado, así que su borde derecho cae en «50% + 32px». El badge (24px) se coloca en «50% + 12px» para sobresalir 4px, igual que en el diseño original. ═════════════════════════════════════════════════════════ */ .sc-home .sc-steps > .elementor-container{ counter-reset: sc-paso; } .sc-home .sc-step{ counter-increment: sc-paso; } .sc-home .sc-step-num{ position: relative; } .sc-home .sc-step-num::after{ content: counter(sc-paso); position: absolute; top: -4px; left: calc(50% + 12px); width: 24px; height: 24px; border-radius: 50%; background: var(--sc-azul); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 3px solid var(--sc-suave); line-height: 1; } /* El icono va centrado en su columna. Ojo: NO poner display:inline-block en .elementor-icon-wrapper. Elementor le aplica text-align:center, y al volverlo inline-block el propio bloque se alinea a la izquierda del contenedor. */ .sc-home .sc-step-num .elementor-icon-wrapper{ text-align: center; } /* Separación entre filas cuando los pasos se apilan de a dos */ @media (max-width:1024px){ .sc-home .sc-steps > .elementor-container{ row-gap: 36px; } } /* Flecha conectora entre pasos */ .sc-home .sc-step{ position: relative; } .sc-home .sc-step:not(:last-child)::after{ content: ""; position: absolute; top: 32px; right: -5px; width: 10px; height: 10px; border-top: 2px solid #C6CCD4; border-right: 2px solid #C6CCD4; transform: rotate(45deg); } @media (max-width:1024px){ .sc-home .sc-step:not(:last-child)::after{ display: none; } } /* --------------------------------------------------------- 9 · BOTONES --------------------------------------------------------- */ .sc-home .sc-btn .elementor-button{ transition: .2s ease; font-weight: 600; } .sc-home .sc-btn .elementor-button:hover{ background: var(--sc-azul-osc); } .sc-home .sc-btn-ghost .elementor-button:hover{ background: rgba(255,255,255,.12); } .sc-home .sc-btn-blanco .elementor-button:hover{ background: rgba(255,255,255,.9); } .sc-home .sc-btn-wa .elementor-button:hover{ background: #1EB857; } /* --------------------------------------------------------- 10 · LISTAS CON CHECK — 2 columnas (el widget de lista no trae control de columnas) --------------------------------------------------------- */ .sc-home .sc-check-list .elementor-icon-list-items{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; } @media (max-width:767px){ .sc-home .sc-check-list .elementor-icon-list-items{ grid-template-columns: 1fr; } } .sc-home .sc-check-list .elementor-icon-list-item{ margin: 0 !important; align-items: flex-start; /* el check se alinea con la 1ª línea, no al centro */ } .sc-home .sc-check-list .elementor-icon-list-icon{ background: rgba(5,42,130,.1); border-radius: 50%; width: 24px; height: 24px; display: grid !important; place-items: center; flex: none; margin-top: 1px; } .sc-home .sc-check-list-oscura .elementor-icon-list-icon{ background: transparent; width: auto; height: auto; } /* La lista sobre fondo oscuro va un punto más apretada */ .sc-home .sc-check-list-oscura .elementor-icon-list-items{ gap: 14px 28px; } /* --------------------------------------------------------- 11 · SECCIONES A DOS COLUMNAS — alineación vertical --------------------------------------------------------- «¿Por qué Scartaris?» y «Seguridad electrónica» tienen una columna mucho más alta que la otra. Sin esto, la columna corta se queda pegada arriba y deja un hueco enorme debajo. El diseño original las centraba (align-items: center). #empresa funciona ya sobre la página montada. .sc-vcenter viene en las plantillas regeneradas. --------------------------------------------------------- */ #empresa > .elementor-container, .sc-home.sc-vcenter > .elementor-container{ align-items: center; } @media (max-width:1024px){ #empresa > .elementor-container, .sc-home.sc-vcenter > .elementor-container{ align-items: stretch; } } /* En móvil la columna de texto necesita aire antes de la lista */ @media (max-width:1024px){ #empresa > .elementor-container > .elementor-column:first-child{ margin-bottom: 36px; } } /* --------------------------------------------------------- 12 · CTA FINAL Y RESPONSIVE --------------------------------------------------------- */ .sc-home.sc-cta{ position: relative; overflow: hidden; } @media (max-width:767px){ .sc-home.sc-cta{ text-align: center; } .sc-home .sc-btn-row > .elementor-widget-wrap{ justify-content: center; } .sc-home .sc-btn-row > .elementor-widget-wrap > .elementor-element{ width: 100%; } .sc-home .sc-btn-row .elementor-button{ width: 100%; justify-content: center; } } /* Columna de imagen del bloque de tecnología. El diseño la define por proporción (16/11), no por altura fija: así acompaña al ancho de la columna en cada pantalla. */ .sc-home .sc-tech-media > .elementor-widget-wrap{ aspect-ratio: 16 / 11; min-height: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.4); } @media (max-width:767px){ .sc-home .sc-tech-media > .elementor-widget-wrap{ aspect-ratio: 16 / 10; } } /* El párrafo del CTA no se estira más allá de 520px */ .sc-home.sc-cta .elementor-widget-text-editor{ max-width: 520px; } @media (max-width:767px){ .sc-home.sc-cta .elementor-widget-text-editor{ max-width: none; } } /* La columna vacía del hero solo reserva espacio para la foto de fondo */ .sc-home.sc-hero .elementor-column:last-child{ min-height: 1px; } /* --------------------------------------------------------- SECCIÓN DE ESTILOS (el widget HTML que contiene este CSS) --------------------------------------------------------- En la web publicada se oculta por completo. En el editor de Elementor sigue visible y clicable, para poder abrir el widget y editar el CSS. Ocultarla no desactiva nada: una etiqueta