con clase .avatar-initials) ── */ .avatar-initials .elementor-heading-title { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--e-global-color-bgbase); color: var(--e-global-color-textstrong); } .surface-inverse .avatar-initials .elementor-heading-title { background: var(--e-global-color-bgsubtle); } /* ── Formulario: casillas y opciones como etiquetas seleccionables (clase .form--chips en el widget Formulario) ── */ .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: var(--space-2); } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option { position: relative; margin: 0; } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option label { display: inline-flex; padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer; border: var(--border-1) solid var(--e-global-color-borderstrong); color: var(--e-global-color-textstrong); transition: background-color var(--dur-fast), border-color var(--dur-fast); } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option input:hover + label { border-color: var(--e-global-color-textstrong); } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option input:checked + label { background: var(--e-global-color-brand); border-color: var(--e-global-color-brand); color: #0C0A08; } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) .elementor-field-option input:focus-visible + label { box-shadow: var(--focus-ring); } .form--chips :is(.elementor-field-type-checkbox, .elementor-field-type-radio) > .elementor-field-label.elementor-screen-only { position: static; width: 100%; height: auto; margin: 0 0 var(--space-2); overflow: visible; clip: auto; white-space: normal; } /* Aceptación legal: texto corrido pequeño y casilla propia (la casilla real, invisible, cubre la línea) */ .elementor-field-type-acceptance .elementor-field-option { position: relative; display: block; padding-inline-start: 26px; } .elementor-field-type-acceptance .elementor-field-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .elementor-field-type-acceptance .elementor-field-option label { font-family: var(--e-global-typography-caption-font-family), sans-serif; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--e-global-color-textmuted); cursor: pointer; } .elementor-field-type-acceptance .elementor-field-option label::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; box-sizing: border-box; border: var(--border-1) solid var(--e-global-color-borderstrong); border-radius: 4px; background: var(--e-global-color-bgsubtle) center / 11px no-repeat; transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); } .elementor-field-type-acceptance .elementor-field-option input:hover + label::before { border-color: var(--e-global-color-textstrong); } .elementor-field-type-acceptance .elementor-field-option input:checked + label::before { background-color: var(--e-global-color-brand); border-color: #0C0A08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%230C0A08' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .elementor-field-type-acceptance .elementor-field-option input:focus-visible + label::before { box-shadow: var(--focus-ring); } .elementor-field-type-acceptance .elementor-field-option label a { position: relative; z-index: 2; color: var(--e-global-color-textstrong); } /* Desplegable: la primera opción hace de marcador (valor vacío) y se ve en gris hasta elegir */ .elementor-field-type-select select:invalid { color: var(--e-global-color-textmuted); } .elementor-field-type-select select option { color: #0C0A08; } .elementor-field-group .elementor-field-textual::placeholder { color: #8A8885; opacity: 1; } /* ── Acordeón anidado (FAQ): al abrir, pregunta y respuesta forman una sola tarjeta ── */ .e-n-accordion-item[open] > .e-n-accordion-item-title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; } .e-n-accordion-item-title { transition: background-color var(--dur-fast), border-color var(--dur-fast); } /* ═════════════════════ GRAFISMO ═════════════════════ */ /* Rejilla técnica de fondo que se desvanece (va en ::after: Elementor reserva ::before para el overlay) */ .bg-grid { position: relative; isolation: isolate; } .bg-grid::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); background-position: center top; -webkit-mask-image: radial-gradient(ellipse 90% 100% at 25% 0%, #0C0A08 25%, transparent 85%); mask-image: radial-gradient(ellipse 90% 100% at 25% 0%, #0C0A08 25%, transparent 85%); } /* Rotulador: subrayado amarillo que se dibuja una vez detrás de una palabra clave del titular (uno por página) */ .ns-mark { background-image: linear-gradient(180deg, transparent 60%, var(--e-global-color-brand) 60%, var(--e-global-color-brand) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; padding-inline: 0.04em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: ns-mark 0.9s 0.4s var(--ease-out) both; } @keyframes ns-mark { from { background-size: 0% 100%; } } /* Etiqueta de ruta «DE → ES» (heading
con clase .ns-route) */ .ns-route .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: var(--e-global-color-bgsubtle); border: var(--border-1) solid var(--e-global-color-bordersubtle); border-radius: var(--radius-input); } .ns-route__code { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: var(--radius-xs); background: #0C0A08; color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; } .ns-route__code--es { background: var(--e-global-color-brand); color: #0C0A08; } .ns-route__arrow { position: relative; width: 22px; height: 1px; background: currentColor; } .ns-route__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } .ns-route__txt { margin-inline-start: 2px; } /* Medio con tarjetas flotantes: el contenedor de la imagen lleva .ns-media y cada tarjeta .ns-float */ .e-con.ns-media { position: relative; } .e-con.ns-float { position: absolute; z-index: 2; box-shadow: var(--float-shadow); animation: ns-bob 7s ease-in-out infinite alternate; } .e-con.ns-float { width: max-content; --width: max-content; max-width: calc(100% - 28px); } .e-con.ns-float--quote { left: -40px; bottom: -32px; width: 320px; --width: 320px; } .e-con.ns-float--chip { left: -32px; top: 40px; animation-delay: -3.5s; } .e-con.ns-float--photo { left: 24px; bottom: 24px; } @keyframes ns-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } } @media (max-width: 1024px) { .e-con.ns-float--quote { left: 20px; bottom: 20px; } .e-con.ns-float--chip { left: 20px; top: 20px; } } @media (max-width: 767px) { .e-con.ns-float.ns-float--quote { position: relative; left: auto; bottom: auto; width: auto; --width: auto; margin: -64px 14px 0; animation: none; } .e-con.ns-float--chip { display: none; } .e-con.ns-float--photo { left: 14px; bottom: 14px; animation: none; } } /* Cinta de marcas (widget HTML .ns-marquee con la lista duplicada) */ .ns-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #0C0A08 8%, #0C0A08 92%, transparent); mask-image: linear-gradient(90deg, transparent, #0C0A08 8%, #0C0A08 92%, transparent); } .ns-marquee__track { display: flex; width: max-content; animation: ns-marquee 45s linear infinite; } .ns-marquee:hover .ns-marquee__track { animation-play-state: paused; } .ns-marquee__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .ns-marquee__list li { display: flex; align-items: center; gap: clamp(28px, 3vw, 48px); padding-inline-end: clamp(28px, 3vw, 48px); white-space: nowrap; font-family: var(--e-global-typography-h2-font-family), sans-serif; font-weight: 500; letter-spacing: -0.035em; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1; color: var(--e-global-color-textstrong); } .ns-marquee__list li::after { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--e-global-color-brand); box-shadow: inset 0 0 0 1px rgba(12, 10, 8, 0.25); } @keyframes ns-marquee { to { transform: translateX(-50%); } } /* Iconos en baldosa (widget Icono, vista «apilado», forma cuadrada): sin márgenes extra */ .elementor-widget-icon.icon-tile .elementor-icon-wrapper { line-height: 0; } /* Cifras en la banda oscura: sin cortes de línea */ .ns-ticker__cell .elementor-counter-number-wrapper, .ns-ticker__cell .elementor-heading-title { white-space: nowrap; } .ns-ticker__cell .elementor-counter .elementor-counter-number-wrapper { justify-content: flex-start; } /* Presupuesto: filas con filete discontinuo de recibo */ .ns-receipt__row { border-bottom-style: dashed !important; border-bottom-color: var(--e-global-color-borderbrand) !important; } /* ═════════════════════ NORD SUR · COMPONENTES ═════════════════════ */ /* Banda de cifras (contadores sobre superficie inversa): separadores de 1px entre celdas */ .ns-ticker__cell { border-inline-start: var(--border-1) solid var(--e-global-color-bordersubtle); padding-inline-start: var(--space-5) !important; } .ns-ticker__cell:first-child { border-inline-start: 0; padding-inline-start: 0 !important; } @media (max-width: 767px) { .ns-ticker__cell { border-inline-start: 0; padding-inline-start: 0 !important; border-top: var(--border-1) solid var(--e-global-color-bordersubtle); padding-top: var(--space-4) !important; } .ns-ticker__cell:first-child { border-top: 0; padding-top: 0 !important; } } /* Presupuesto desglosado («todo incluido»): filas con filete y total resaltado */ .ns-receipt__row { border-bottom: var(--border-1) solid var(--e-global-color-bordersubtle); } .ns-receipt__row:last-of-type { border-bottom: 0; } /* ── Proceso animado: de mobile.de a tu puerta ── Rejilla .ns-steps (6 columnas en escritorio, 1 en tableta y móvil) con seis .ns-step y un widget HTML .ns-track (línea + coche) colocado en absoluto. La animación arranca cuando la rejilla recibe su animación de entrada nativa (.animated). Ciclo de 14 s: el coche avanza parada a parada y cada nodo se ilumina al llegar. */ .ns-steps { position: relative; isolation: isolate; --ns-node: 44px; --ns-gap: 16px; --ns-cycle: 14s; } .ns-step__num .elementor-heading-title { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: var(--ns-node); height: var(--ns-node); border-radius: var(--radius-sm); background: var(--e-global-color-bgsubtle); color: var(--e-global-color-textstrong); border: var(--border-1) solid var(--e-global-color-textstrong); } .ns-step__num .elementor-heading-title::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--e-global-color-brand); opacity: 0; } .ns-steps > .ns-track { position: absolute !important; z-index: auto; pointer-events: none; margin: 0 !important; } .ns-track__line { z-index: 0; } .ns-track__run { z-index: 3; } .ns-step__card { position: relative; overflow: hidden; } .ns-step__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--e-global-color-brand); opacity: 0; } .ns-steps > .ns-step { position: relative; z-index: 1; } .ns-track__line { position: absolute; background: var(--e-global-color-borderbrand); } .ns-track__fill { position: absolute; inset: 0; background: #0C0A08; transform-origin: 0 0; transform: scaleX(0); } .ns-track__run { position: absolute; inset: 0; } .ns-track__car { position: absolute; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--e-global-color-brand); color: #0C0A08; border: var(--border-1) solid #0C0A08; opacity: 0; } .ns-track__car svg { width: 22px; height: 22px; display: block; } /* Escritorio: línea horizontal que une los centros de los seis nodos */ @media (min-width: 1025px) { .ns-steps > .ns-track { top: calc(var(--ns-node) / 2); left: calc(var(--ns-node) / 2); height: 0; width: calc((100% - 5 * var(--ns-gap)) * 5 / 6 + 5 * var(--ns-gap)) !important; } .ns-track__line { left: 0; right: 0; top: -1px; height: 2px; } .ns-track__car { left: -18px; top: -18px; } .ns-steps.animated .ns-track__run { animation: ns-run-x var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-track__fill { animation: ns-fill-x var(--ns-cycle) linear infinite; } } /* Tableta y móvil: línea vertical a la izquierda (filas de igual alto en la rejilla) */ @media (max-width: 1024px) { .ns-steps > .ns-track { left: calc(var(--ns-node) / 2); top: calc(var(--ns-node) / 2); width: 0 !important; bottom: calc((100% - 5 * var(--ns-gap)) / 6 - var(--ns-node) / 2); } .ns-track__line { top: 0; bottom: 0; left: -1px; width: 2px; } .ns-track__fill { transform: scaleY(0); } .ns-track__car { left: -18px; top: -18px; } .ns-steps.animated .ns-track__run { animation: ns-run-y var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-track__fill { animation: ns-fill-y var(--ns-cycle) linear infinite; } .ns-steps > .ns-step { padding-inline-start: calc(var(--ns-node) + var(--space-5)); } .ns-steps > .ns-step .ns-step__num { position: absolute !important; left: 0; top: 0; } } .ns-steps.animated .ns-track__car { animation: ns-car var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(1) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-1 var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(2) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-2 var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(3) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-3 var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(4) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-4 var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(5) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-5 var(--ns-cycle) linear infinite; } .ns-steps.animated .ns-step:nth-child(6) :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: ns-node-6 var(--ns-cycle) linear infinite; } /* Recorrido: parada en cada nodo (5 % del ciclo) y tramo (10 %); llegada al último al 75 %, pausa y fundido */ @keyframes ns-run-x { 0%, 5% { transform: translateX(0); } 15%, 20% { transform: translateX(20%); } 30%, 35% { transform: translateX(40%); } 45%, 50% { transform: translateX(60%); } 60%, 65% { transform: translateX(80%); } 75%, 100% { transform: translateX(100%); } } @keyframes ns-run-y { 0%, 5% { transform: translateY(0); } 15%, 20% { transform: translateY(20%); } 30%, 35% { transform: translateY(40%); } 45%, 50% { transform: translateY(60%); } 60%, 65% { transform: translateY(80%); } 75%, 100% { transform: translateY(100%); } } @keyframes ns-fill-x { 0%, 5% { transform: scaleX(0); opacity: 1; } 15%, 20% { transform: scaleX(0.2); } 30%, 35% { transform: scaleX(0.4); } 45%, 50% { transform: scaleX(0.6); } 60%, 65% { transform: scaleX(0.8); } 75%, 90% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } } @keyframes ns-fill-y { 0%, 5% { transform: scaleY(0); opacity: 1; } 15%, 20% { transform: scaleY(0.2); } 30%, 35% { transform: scaleY(0.4); } 45%, 50% { transform: scaleY(0.6); } 60%, 65% { transform: scaleY(0.8); } 75%, 90% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(1); opacity: 0; } } @keyframes ns-car { 0% { opacity: 0; } 3%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-1 { 0% { opacity: 0; } 2%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-2 { 0%, 14% { opacity: 0; } 16%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-3 { 0%, 29% { opacity: 0; } 31%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-4 { 0%, 44% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-5 { 0%, 59% { opacity: 0; } 61%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } @keyframes ns-node-6 { 0%, 74% { opacity: 0; } 76%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } } /* ═════════════════════ PULIDO ═════════════════════ */ /* Hero: encaja en la primera pantalla y deja asomar la banda de cifras */ .section.section--hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(4rem, 3rem + 3vw, 5.5rem); } /* Cabecera: sombra suave al bajar (navegadores con animaciones ligadas al scroll; en el resto, solo el filete) */ @keyframes ns-header-lift { to { box-shadow: 0 12px 32px -18px rgba(12, 10, 8, 0.28); } } @supports (animation-timeline: scroll()) { .elementor-location-header .site-header { animation: ns-header-lift linear both; animation-timeline: scroll(root); animation-range: 0 120px; } } /* Menú: el elemento .menu-cta solo aparece en el desplegable (móvil y tableta) y como botón */ .elementor-nav-menu--main .menu-cta { display: none !important; } .elementor-nav-menu--dropdown { border-bottom: var(--border-1) solid var(--e-global-color-bordersubtle); box-shadow: 0 24px 40px -24px rgba(12, 10, 8, 0.25); padding-block: 8px 20px; } .elementor-nav-menu--dropdown .elementor-item { border-radius: var(--radius-sm); } .elementor-nav-menu--dropdown .menu-cta { padding: 12px 16px 0; } .elementor-nav-menu--dropdown .menu-cta > a.elementor-item { justify-content: center; background: var(--e-global-color-brand) !important; color: #0C0A08 !important; border-radius: var(--radius-sm); font-weight: 500; } /* Etiquetas en fila (widget Lista de iconos en línea con clase .chips) */ .chips .elementor-icon-list-items { gap: 8px; } .chips .elementor-icon-list-item { margin: 0 !important; padding: 6px 10px; border-radius: var(--radius-xs); background: var(--e-global-color-bgbase); border: var(--border-1) solid var(--e-global-color-bordersubtle); color: var(--e-global-color-textstrong); } .chips .elementor-icon-list-item::after { display: none !important; } /* Etiqueta con check («Incluido») */ .tag--check .elementor-heading-title::before { content: "✓"; content: "✓" / ""; margin-inline-end: 5px; font-weight: 700; } /* Proceso: rótulos en los extremos del recorrido (solo escritorio) */ .ns-track__end { position: absolute; top: -46px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 12px/1 var(--e-global-typography-eyebrow-font-family), sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-global-color-textmuted); } .ns-track__end--start { left: -22px; } .ns-track__end--end { right: -22px; } .ns-track__end b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px; font-weight: 600; font-size: 10px; letter-spacing: 0.06em; background: #0C0A08; color: #FFFFFF; } .ns-track__end--end b { background: var(--e-global-color-brand); color: #0C0A08; } @media (max-width: 1024px) { .ns-track__end { display: none; } } @media (min-width: 1025px) { .ns-steps { margin-top: 28px; } } /* Fila de garantías del hero: una sola línea en escritorio */ .trust-row .elementor-icon-list-items { row-gap: 6px; } /* ═════════════════════ ACCESIBILIDAD Y DETALLES ═════════════════════ */ /* Enlaces de contenido: nunca solo por color (WCAG 1.4.1) */ .elementor-widget-text-editor a, .elementor-widget-theme-post-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* Foco visible por teclado (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Mensajes de formulario */ .elementor-message.elementor-message-success { color: var(--e-global-color-success); background: var(--success-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); } .elementor-message.elementor-message-danger { color: var(--e-global-color-error); background: var(--error-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); } /* Widget Encabezado con etiqueta
(antetítulos, etiquetas, cifras): sin el margen de párrafo del tema */ .elementor-widget-heading p.elementor-heading-title { margin-block-end: 0; } .elementor-widget-text-editor p:last-child { margin-block-end: 0; } /* Detalles tipográficos */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: #E4F222; color: #0C0A08; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* El proceso se muestra completo y quieto */ .ns-track__car { display: none; } .ns-steps .ns-track__fill { animation: none !important; transform: none !important; } .ns-steps :is(.ns-step__num .elementor-heading-title, .ns-step__card)::before { animation: none !important; opacity: 1; } .ns-mark { animation: none; } .ns-marquee__track { animation: none; flex-wrap: wrap; } .e-con.ns-float { animation: none; } }/* End custom CSS */