/* ===================================================================== illusion Studio — Tema visual 2026 Sistema de diseño de illusiondata.es (tipografía, radios, sombras, botones píldora, tarjetas, degradados) con la paleta del logo de illusion Studio. Se carga después de Bootstrap 5.3 y de los CSS heredados (style.css, custom.css...) para reestilizar todas las páginas. Ver docs/history/2026-11-03-rediseno-bootstrap5/ ===================================================================== */ :root { /* Paleta (muestreada del logo de illusion Studio) */ --blue: #2378B6; --cyan: #1590CB; --teal: #0077A2; --grey: #4D4A4C; --navy: #0E3A5C; --ink: #183247; --text: #4A5B6C; --muted: #6B7C90; --bg: #F2F7FC; --bg-2: #E6F0F9; --pastel: linear-gradient(135deg, #E8F3FC 0%, #D6EAF8 100%); --surface: #FFFFFF; --line: #DCE7F1; --ok: #1E9E6A; --ok-bg: #E3F5EC; --down: #C6403A; --white: #FFFFFF; --grad: linear-gradient(130deg, #0A4F84 0%, #2378B6 48%, #1590CB 100%); --grad-btn: linear-gradient(135deg, #2378B6, #1590CB); --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --radius: 18px; --shadow: 0 24px 50px -30px rgba(14, 58, 92, .45); --shadow-sm: 0 10px 26px -18px rgba(14, 58, 92, .45); /* Bootstrap 5 con la paleta de la marca */ --bs-primary: #2378B6; --bs-primary-rgb: 35, 120, 182; --bs-link-color: #2378B6; --bs-link-color-rgb: 35, 120, 182; --bs-link-hover-color: #1590CB; --bs-link-hover-color-rgb: 21, 144, 203; --bs-body-font-family: var(--font); --bs-body-color: #4A5B6C; --bs-border-radius: 12px; --bs-border-color: #DCE7F1; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--font); font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; } body, p, li, td, th, dd, dt, label, input, textarea, select, button, ul.breadcrumbs li, .dropdown li a { font-family: var(--font); } p { font-size: 1rem; line-height: 1.7; font-weight: 400; color: var(--text); } li { font-weight: 400; } #content.ix-page { padding: 0 !important; } .ix-page .mark, .ix-page mark { background: none; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; } h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.15; font-weight: 800; } h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } h1.uppercase, h2.uppercase, h3.uppercase, .big-title .uppercase, .page-banner h1, .page-banner h2 { text-transform: none; } a { color: var(--blue); } a:hover, a:focus { color: var(--cyan); } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } strong, b { font-weight: 700; } img { max-width: 100%; } ::selection { background: #CDE6F6; color: var(--ink); } .ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.125em; } .ix-wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .container { max-width: 1180px; } /* Cabecera antigua: ya no es fija ni necesita espaciador */ #container { overflow: visible !important; } #container > header, body > header.clearfix { position: static !important; display: contents; } .hidden-header { display: none !important; height: 0 !important; } #loader { display: none !important; } /* Utilidades de Bootstrap 3 que BS5 ya no trae */ .text-justify, .justificado { text-align: justify; hyphens: auto; } .help-block { display: block; margin-top: 5px; font-size: .86rem; color: var(--muted); } .form-group { margin-bottom: 1rem; } .control-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; } .caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; } .well { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .label { display: inline-block; padding: 3px 10px; font-size: .75rem; font-weight: 700; border-radius: 999px; } .clearfix::after { content: ""; display: table; clear: both; } /* ------------------------------------------------------------------ */ /* Premenú */ /* ------------------------------------------------------------------ */ .ix-pre { background: linear-gradient(90deg, #0A2F4D 0%, #0E3A5C 35%, #0B5A94 70%, #1590CB 100%); color: var(--white); font-size: 0.86rem; position: relative; z-index: 31; } .ix-pre .ix-wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; padding-block: 6px; } .ix-pre a { color: var(--white); text-decoration: none; } .pre-rot { display: grid; min-width: 0; flex: 1; } .pre-msg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; } .pre-msg.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s ease, visibility 0s; } .pre-msg b { font-weight: 800; } .pre-msg > span:not(.pre-pill) { color: rgba(255,255,255,.9); } .pre-msg:hover > span:not(.pre-pill) { text-decoration: underline; text-underline-offset: 3px; } .pre-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 2px 10px; margin-left: 4px; } .pre-pill i { width: 6px; height: 6px; border-radius: 50%; background: #7FD3F5; box-shadow: 0 0 0 3px rgba(127,211,245,.25); } .pre-contact { display: inline-flex; align-items: center; gap: 16px; flex: none; } .pre-side { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9) !important; white-space: nowrap; } .pre-side:hover { color: var(--white) !important; } .ix-pre .lang-switcher { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid rgba(255,255,255,.25); } .ix-pre .lang-switcher li { display: flex; align-items: center; } .ix-pre .lang-switcher img { display: block; width: 20px; height: 14px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); opacity: .75; transition: opacity .15s ease, transform .15s ease; } .ix-pre .lang-switcher a:hover img { opacity: 1; transform: translateY(-1px); } .ix-pre .lang-switcher .current-lang { display: block; max-width: none !important; line-height: 0; } .ix-pre .lang-switcher .current-lang img { opacity: 1; box-shadow: 0 0 0 2px var(--white); } @media (max-width: 1000px) { .pre-hide-sm { display: none !important; } } @media (max-width: 760px) { .pre-rot { display: none; } .ix-pre .ix-wrap { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .pre-msg, .pre-msg.on { transition: none; transform: none; } } /* ------------------------------------------------------------------ */ /* Cabecera y menú */ /* ------------------------------------------------------------------ */ .ix-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; } .ix-top.scrolled { box-shadow: 0 10px 30px -22px rgba(14,58,92,.45); } .ix-top > .ix-wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; } .ix-top .brand { display: block; flex: none; } .ix-top .brand img { display: block; height: 44px; width: auto; max-width: none; } .ix-top .menu { display: flex; align-items: center; gap: 26px; margin-left: auto; } .ix-top .menu > a, .ix-top .dd-btn { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; white-space: nowrap; } .ix-top .menu > a:hover, .ix-top .dd-btn:hover { color: var(--cyan); } .ix-top .menu > a.on, .ix-top .menu a[aria-current="page"], .ix-top .dd.on > .dd-btn { color: var(--blue); font-weight: 700; } .ix-top .dd { position: relative; } .ix-top .dd-btn { display: inline-flex; align-items: center; gap: 4px; } .ix-top .dd-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 6px; } .ix-top .dd:hover .dd-btn, .ix-top .dd:focus-within .dd-btn { color: var(--cyan); } .ix-top .dd-panel { position: absolute; top: 100%; left: -18px; padding-top: 18px; display: none; } .ix-top .dd:hover .dd-panel, .ix-top .dd:focus-within .dd-panel { display: block; } .ix-top .dd-in { width: 350px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 2px; } .ix-top .dd-in a { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; } .ix-top .dd-in a:hover { background: var(--bg); } .ix-top .dd-in .di { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--white); background: var(--grad-btn); font-size: 1.05rem; transition: transform .25s ease; } .ix-top .dd-in a:hover .di { transform: rotate(-8deg) scale(1.06); } .ix-top .dd-in b { font-weight: 700; color: var(--ink); font-size: 0.92rem; line-height: 1.25; } .ix-top .dd-in small { color: var(--muted); font-size: 0.8rem; line-height: 1.3; } .ix-top .ix-cta { flex: none; } .burger { display: none; margin-left: 8px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.3rem; cursor: pointer; place-items: center; } .mnav { display: none; border-top: 1px solid var(--line); background: var(--surface); max-height: calc(100vh - 80px); overflow-y: auto; } .mnav .ix-wrap { display: grid; gap: 2px; padding-block: 12px 18px; } .mnav a, .mnav .mnav-cta { display: block; padding: 10px 4px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); } .mnav a.sub { font-weight: 500; padding-left: 16px; color: var(--text); } .mnav .mnav-cta { margin-top: 12px; border: 0; border-radius: 999px; text-align: center; color: var(--white); background: var(--grad-btn); } .mnav-k { display: block; padding: 14px 4px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ix-top.open .mnav { display: block; } @media (max-width: 1100px) { .ix-top .menu { gap: 18px; } } @media (max-width: 1000px) { .ix-top .menu { display: none; } .ix-top .ix-cta { margin-left: auto; } .burger { display: grid; } } @media (max-width: 480px) { .ix-top .ix-cta { display: none; } .burger { margin-left: auto; } .ix-top .brand img { height: 36px; } } /* Icono de configuración de cookies */ #imagcookies { position: fixed; left: 16px; bottom: 16px; z-index: 40; } #imagcookies a { color: var(--ink); font-size: .8rem; } /* ------------------------------------------------------------------ */ /* Botones */ /* ------------------------------------------------------------------ */ .btn { --bs-btn-font-family: var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 999px; padding: 13px 24px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn .ico { font-size: 1rem; transition: transform .2s ease; } .btn:hover .ico { transform: translateX(3px); } .btn-sm { padding: 8px 16px; font-size: .76rem; } .btn-grad, .btn-primary { background: var(--grad-btn); color: var(--white) !important; border: 0; box-shadow: 0 12px 24px -12px rgba(21, 144, 203, .9); } .btn-grad:hover, .btn-primary:hover, .btn-primary:focus { background: var(--grad-btn); color: var(--white); box-shadow: 0 16px 28px -12px rgba(21, 144, 203, 1); } .btn-white { background: var(--white); color: var(--blue) !important; border: 0; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .45); } .btn-ghost, .btn-default, .btn-outline-primary, .btn-secondary, .btn-light { background: var(--surface); color: var(--blue) !important; border: 1px solid var(--line); } .btn-ghost:hover, .btn-default:hover, .btn-outline-primary:hover, .btn-secondary:hover, .btn-light:hover { background: var(--surface); border-color: var(--cyan); color: var(--cyan) !important; } .btn-line { background: transparent; color: var(--white) !important; border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); } .btn-line:hover { box-shadow: inset 0 0 0 2px var(--white); } /* Botones heredados de la plantilla (btn-system / btn-large / border-btn / btn-wite) */ .btn-system, a.main-button, input[type=submit], button[type=submit]:not(.btn):not(.burger) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 6px 4px 0; font-family: var(--font); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--white) !important; background: var(--grad-btn) !important; border: 0 !important; border-radius: 999px !important; padding: 13px 24px !important; text-shadow: none !important; box-shadow: 0 12px 24px -12px rgba(21, 144, 203, .9) !important; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; opacity: 1 !important; width: auto; white-space: normal; text-align: center; } .btn-system:hover, a.main-button:hover, input[type=submit]:hover { transform: translateY(-2px); color: var(--white) !important; } .btn-system i, .btn-system svg { font-size: 1rem; } .btn-system.btn-large { padding: 14px 28px !important; } .btn-system.border-btn { background: var(--surface) !important; color: var(--blue) !important; box-shadow: inset 0 0 0 2px #CFE4F4 !important; } .btn-system.border-btn:hover { color: var(--cyan) !important; box-shadow: inset 0 0 0 2px var(--cyan) !important; background: var(--surface) !important; } .btn-system.btn-wite { background: var(--white) !important; color: var(--blue) !important; box-shadow: 0 12px 24px -14px rgba(0,0,0,.45) !important; } .btn-system.border-btn.btn-wite { background: transparent !important; color: var(--white) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7) !important; } .btn-system.border-btn.btn-wite:hover { box-shadow: inset 0 0 0 2px var(--white) !important; } .btn-system.btn-gray, .btn-system.btn-black { background: var(--ink) !important; } .read-more, .service-box .read-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); } .read-more:hover { color: var(--cyan); } /* ------------------------------------------------------------------ */ /* Bloques heredados reestilizados */ /* ------------------------------------------------------------------ */ .accent-color { color: var(--blue) !important; } .accent-color-bg, .section-overlay { background: var(--grad) !important; } .full-sections > .section, #content > .section { padding-block: 56px; } /* Cabecera de página interior (page-banner -> estilo .phero de illusiondata) */ .page-banner { position: relative; overflow: hidden; padding: 56px 0 48px !important; border: 0 !important; background: radial-gradient(60% 70% at 85% 30%, #E8F3FA 0%, transparent 70%), linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 100%) !important; } .page-banner::after { content: ""; position: absolute; right: -80px; top: -60px; width: 300px; height: 300px; border-radius: 50%; border: 18px solid var(--cyan); opacity: .07; pointer-events: none; } .page-banner .container { position: relative; z-index: 1; } .page-banner h1, .page-banner h2 { color: var(--ink) !important; font-weight: 800 !important; font-size: clamp(1.9rem, 4.2vw, 3rem) !important; line-height: 1.12 !important; } .page-banner p, .page-banner p strong { color: var(--text) !important; font-size: 1.08rem; } ul.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; font-size: .86rem; } ul.breadcrumbs li, ul.breadcrumbs li a { color: var(--muted) !important; } ul.breadcrumbs li a:hover { color: var(--blue) !important; } ul.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--muted); } /* Títulos de sección */ .big-title { margin-bottom: 28px; } .big-title h1, .big-title h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem) !important; line-height: 1.2 !important; font-weight: 800 !important; color: var(--ink); } .big-title .title-desc, .big-title h3 { color: var(--cyan) !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; } /* Cajas de servicio (service-box -> tarjeta con icono en degradado) */ .service-box { margin-bottom: 24px; } .service-box.service-center { text-align: center; } .service-box .service-icon i, .service-icon > i { display: inline-grid !important; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--white) !important; background: var(--grad-btn) !important; font-size: 1.6rem !important; box-shadow: 0 0 0 8px rgba(35,120,182,.1); border: 0 !important; margin-bottom: 14px; transition: transform .25s ease; } .service-box:hover .service-icon i { transform: rotate(-8deg) scale(1.06); } .service-box h4, .service-content h3, .service-content h4 { color: var(--ink); } .service-content p { color: var(--text); } /* Bandas de color (parallax / light-section / CTA final) */ .seccion8 { position: relative; overflow: hidden; background: var(--grad) !important; padding: 64px 16px !important; } .seccion8::before { content: ""; position: absolute; width: 340px; height: 340px; right: 12%; top: -200px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; } .seccion8::after { content: ""; position: absolute; width: 200px; height: 200px; left: -60px; bottom: -110px; border-radius: 50%; border: 18px solid rgba(255,255,255,.08); pointer-events: none; } .seccion8 .big-title { position: relative; z-index: 1; margin: 0; } .seccion8 p { font-size: clamp(1.3rem, 2.6vw, 1.75rem) !important; font-weight: 700 !important; text-transform: none !important; line-height: 1.3 !important; } .seccion8 .separador50, .seccion8 .hr1 { height: 22px; } /* Acordeones (panel BS3 -> tarjeta tipo FAQ de illusiondata) */ .panel-group { display: grid; gap: 12px; margin-bottom: 20px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; overflow: hidden; transition: box-shadow .25s ease; } .panel:hover { box-shadow: 0 16px 30px -22px rgba(35,120,182,.45); } .panel-heading { background: transparent !important; border: 0 !important; padding: 0; } .panel-title { margin: 0; font-size: 1rem !important; font-weight: 700; } .panel-title > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; color: var(--ink) !important; text-decoration: none; } .panel-title > a::after { content: "−"; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn); color: var(--white); font-size: 1.2rem; font-weight: 600; transition: transform .25s ease; } .panel-title > a.collapsed::after, .panel-title > a:not([aria-expanded="true"])::after { content: "+"; background: var(--bg); color: var(--blue); } .panel-title > a:hover::after { transform: rotate(90deg); } .panel-body { padding: 0 20px 18px; color: var(--muted); border: 0 !important; } .panel-body p { color: var(--muted) !important; font-size: .95rem; } /* Pestañas */ .nav-tabs { border-bottom: 1px solid var(--line); gap: 6px; } .nav-tabs .nav-link { border: 0; border-radius: 999px; color: var(--blue); font-weight: 600; padding: 8px 16px; } .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { background: var(--grad-btn); color: var(--white); } /* Formularios */ .form-control, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea, select { font-family: var(--font); font-size: .95rem; color: var(--ink); background-color: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: none; } .form-control:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--cyan); outline-offset: 0; background-color: var(--surface); border-color: var(--line); box-shadow: none; } label { color: var(--ink); font-weight: 600; font-size: .88rem; } /* Tablas */ .table { --bs-table-border-color: var(--line); } .table > thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* Carrusel de servicios (owl) */ .full-width-recent-projects .portfolio-item .portfolio-border { border-radius: var(--radius); overflow: hidden; } .full-width-recent-projects .portfolio-item:hover .portfolio-thumb .thumb-overlay { background: rgba(35,120,182,.85) !important; } /* Volver arriba */ .back-to-top { position: fixed; right: 20px; bottom: 90px; z-index: 39; width: 44px; height: 44px; display: none; place-items: center; border-radius: 50%; background: var(--grad-btn) !important; color: var(--white) !important; box-shadow: var(--shadow-sm); } .back-to-top i { color: var(--white); } /* ------------------------------------------------------------------ */ /* Pie */ /* ------------------------------------------------------------------ */ .ix-foot { background: var(--navy) !important; color: rgba(255,255,255,.72) !important; padding-block: 64px 28px !important; border: 0 !important; font-size: .94rem; } .ix-foot a, .ix-foot .camuflaEnlace { color: rgba(255,255,255,.72) !important; text-decoration: none !important; } .ix-foot a:hover, .ix-foot .camuflaEnlace:hover { color: var(--white) !important; } .ix-foot .fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } .ix-foot .fabout > img { height: 44px; width: auto; filter: brightness(0) invert(1); } .ix-foot p { color: rgba(255,255,255,.72); font-size: .94rem; margin: 16px 0 0; max-width: 360px; } .ix-foot p strong { color: var(--white); font-weight: 600; } .ix-foot .fh { margin: 0 0 14px; color: var(--white); font-size: 1rem; font-weight: 700; } .ix-foot .fh a { color: var(--white) !important; } .ix-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ix-foot .fcontact { margin-top: 18px; gap: 10px; } .ix-foot .fcontact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; } .ix-foot .fcontact .ico { margin-top: 4px; color: #7FD3F5; } .ix-foot .fsocial { display: flex; gap: 10px; margin-top: 20px; } .ix-foot .fsocial a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); transition: background .2s ease, transform .2s ease; } .ix-foot .fsocial a:hover { background: var(--cyan); transform: translateY(-2px); } .ix-foot .fsub { font-size: .8rem; margin-top: 22px; } .ix-foot .ffunds { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; padding: 18px; border-radius: 16px; background: var(--white); } .ix-foot .ffunds img { max-height: 64px; width: auto; } .ix-foot .fbot { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; font-size: .86rem; } .ix-foot .flegal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .ix-foot .flegal .camuflaEnlace { cursor: pointer; } .ix-foot .dmca-badge img { display: block; } @media (max-width: 960px) { .ix-foot .fgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ix-foot .fgrid { grid-template-columns: 1fr; } .ix-foot .ffunds img { max-height: 48px; } } /* ===================================================================== Componentes de página (portada y páginas rediseñadas): .ix-page Mismos componentes que illusiondata.es, con prefijo de contenedor para no chocar con Bootstrap (.row, .card...) ni con la plantilla antigua. ===================================================================== */ .ix-page > section { padding-block: 96px; background: var(--surface); } .ix-page > section.band { position: relative; overflow: hidden; background: var(--pastel); } .ix-page > section.band::before, .ix-page > section.band::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(35,120,182,.14); pointer-events: none; } .ix-page > section.band::before { width: 620px; height: 620px; right: -200px; top: -220px; box-shadow: 0 0 0 40px rgba(255,255,255,.22), 0 0 0 80px rgba(255,255,255,.14); } .ix-page > section.band::after { width: 380px; height: 380px; left: -140px; bottom: -200px; } .ix-page > section.band > .ix-wrap { position: relative; z-index: 1; } .ix-page p { margin: 0; } .ix-page h1, .ix-page h2, .ix-page h3, .ix-page h4 { margin: 0; } .ix-page .sec-head { text-align: center; display: grid; justify-items: center; gap: 12px; max-width: 720px; margin: 0 auto 52px; } .ix-page .sec-head h2, .ix-page .split-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); } .ix-page .sec-head p { color: var(--muted); } .ix-page .kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); } .ix-page .link-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); text-decoration: none; } .ix-page .link-more .ico { transition: transform .2s ease; } .ix-page .link-more:hover .ico { transform: translateX(4px); } /* Hero */ .ix-page > section.hero-bg { padding: 0; overflow: hidden; background: radial-gradient(60% 70% at 85% 30%, #E8F3FA 0%, transparent 70%), linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 100%); } .ix-page .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-block: 72px 64px; position: relative; } .ix-page .hero-copy { display: grid; gap: 24px; min-width: 0; } .ix-page .eyebrow { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); } .ix-page .hero-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.1; color: var(--ink); } .ix-page .mark { color: var(--blue); } .ix-page .mark-grey { color: var(--grey); } .ix-page .lead { color: var(--text); font-size: 1.12rem; max-width: 58ch; } .ix-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ix-page .ring { position: absolute; right: -60px; top: 10px; width: 300px; height: 300px; border-radius: 50%; border: 18px solid var(--cyan); opacity: 0.07; pointer-events: none; } .ix-page .trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--muted); font-size: .9rem; } .ix-page .trust span { display: inline-flex; align-items: center; gap: 8px; } .ix-page .trust .ico { color: var(--ok); } @media (max-width: 960px) { .ix-page .hero { grid-template-columns: 1fr; padding-block: 48px 40px; gap: 40px; } .ix-page .ring { display: none; } } /* Panel visual del hero: tablero de proyecto */ .ix-page .board { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -32px rgba(35,120,182,.45); overflow: hidden; min-width: 0; position: relative; } .ix-page .board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.85rem; } .ix-page .board-head strong { font-weight: 600; font-size: 0.98rem; color: var(--grey); } .ix-page .board-body { padding: 18px; display: grid; gap: 12px; } .ix-page .pill { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: #E5F4FB; color: var(--teal); white-space: nowrap; } .ix-page .pill.ok { background: var(--ok-bg); color: var(--ok); } .ix-page .pill.grey { background: #EEECED; color: var(--grey); } .ix-page .flow { list-style: none; margin: 0; padding: 0; display: grid; } .ix-page .flow li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; position: relative; } .ix-page .flow li + li::before { content: ""; position: absolute; left: 19px; top: -9px; height: 18px; width: 2px; background: var(--line); } .ix-page .flow .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--blue); font-size: 1.1rem; } .ix-page .flow li.last .n { background: var(--grad-btn); color: var(--white); } .ix-page .flow b { color: var(--ink); font-size: 0.96rem; display: block; line-height: 1.3; } .ix-page .flow small { color: var(--muted); font-size: 0.8rem; } .ix-page .board-foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .ix-page .board-foot div { padding: 12px 16px; display: grid; gap: 2px; } .ix-page .board-foot div + div { border-left: 1px solid var(--line); } .ix-page .board-foot b { font-size: 1.25rem; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; } .ix-page .board-foot span { font-size: .76rem; color: var(--muted); } .ix-page .mini-float { position: absolute; z-index: 2; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; font-size: 0.8rem; display: grid; gap: 4px; } .ix-page .mini-float b { color: var(--ink); } .ix-page .hero-art { position: relative; min-width: 0; } .ix-page .hero-art .mf-1 { right: -18px; top: -26px; } @media (max-width: 560px) { .ix-page .mini-float { position: static; margin-top: 12px; } } /* Tarjetas con cabecera en degradado (cuatro razones / servicios) */ .ix-page .cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ix-page .fcard { --c: var(--grad-btn); --cs: var(--blue); --glow: rgba(35,120,182,.5); position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 24px 44px -30px var(--glow); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; } .ix-page .fcard:hover { transform: translateY(-8px); box-shadow: 0 34px 56px -26px var(--glow); color: inherit; } .ix-page .fhead { position: relative; overflow: hidden; background: var(--c); color: var(--white); padding: 24px 22px 22px; min-height: 150px; display: grid; align-content: space-between; gap: 20px; } .ix-page .fhead::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; bottom: -90px; border-radius: 50%; background: rgba(255,255,255,.12); } .ix-page .fhead::after { content: ""; position: absolute; width: 90px; height: 90px; right: 40px; top: -40px; border-radius: 50%; border: 10px solid rgba(255,255,255,.1); } .ix-page .fnum { position: absolute; right: 18px; top: 6px; font-size: 4.6rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.2); } .ix-page .gi { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 1.65rem; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .25s ease; } .ix-page .fcard:hover .gi { transform: rotate(-8deg) scale(1.08); } .ix-page .fhl { position: relative; z-index: 1; font-weight: 800; font-size: 1.12rem; line-height: 1.25; } .ix-page .fbody { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; } .ix-page .fbody h3 { font-size: 1.2rem; color: var(--cs); } .ix-page .fbody p { color: var(--text); font-size: 0.95rem; } .ix-page .fbody .link-more { color: var(--cs); margin-top: 4px; } .ix-page .fcard:hover .link-more { color: var(--cyan); } .ix-page .fcard:hover .link-more .ico { transform: translateX(4px); } .ix-page .g1 { --c: linear-gradient(135deg, #2378B6, #3D9BE0); } .ix-page .g2 { --c: linear-gradient(135deg, #1590CB, #4CC3F0); --glow: rgba(21,144,203,.5); } .ix-page .g3 { --c: linear-gradient(135deg, #0077A2, #1AA6C9); --cs: var(--teal); --glow: rgba(0,119,162,.5); } .ix-page .g4 { --c: linear-gradient(135deg, #4D4A4C, #85797E); --cs: var(--grey); --glow: rgba(77,74,76,.45); } @media (max-width: 1000px) { .ix-page .cards4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ix-page .cards4 { grid-template-columns: 1fr; } } /* Valores (tarjetas pequeñas) */ .ix-page .feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ix-page .fitem { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; } .ix-page .fitem:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); } .ix-page .fitem .fi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: var(--white); background: var(--grad-btn); transition: transform .25s ease; } .ix-page .fitem:hover .fi { transform: rotate(-8deg) scale(1.08); } .ix-page .fitem h3 { font-size: 1.08rem; } .ix-page .fitem p { color: var(--text); font-size: 0.95rem; } .ix-page .band .fitem { border-color: transparent; box-shadow: var(--shadow-sm); } @media (max-width: 960px) { .ix-page .feats { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ix-page .feats { grid-template-columns: 1fr; } } /* Filas alternas texto / visual */ .ix-page .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; } .ix-page .split.rev .split-copy { order: 2; } .ix-page .split-copy { display: grid; gap: 18px; min-width: 0; } .ix-page .split-copy > p { color: var(--text); } .ix-page .ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; } .ix-page .ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; } .ix-page .ticks .tk { width: 24px; height: 24px; border-radius: 50%; background: var(--grad-btn); color: var(--white); display: grid; place-items: center; font-size: 0.8rem; margin-top: 2px; } .ix-page .ticks b { color: var(--ink); display: block; font-size: 1.04rem; } .ix-page .ticks span { color: var(--muted); font-size: 0.95rem; } .ix-page .visual { position: relative; min-width: 0; padding: 34px; } .ix-page .visual::before { content: ""; position: absolute; inset: 0; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: var(--bg-2); z-index: 0; } .ix-page .visual > * { position: relative; z-index: 1; } .ix-page .visual img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .ix-page .band .visual::before { background: rgba(255,255,255,.55); } @media (max-width: 960px) { .ix-page .split { grid-template-columns: 1fr; gap: 40px; } .ix-page .split.rev .split-copy { order: 0; } } @media (max-width: 480px) { .ix-page .visual { padding: 18px 6px; } } /* Cifras */ .ix-page .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; position: relative; z-index: 1; } .ix-page .stats b { color: var(--blue); display: block; font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .ix-page .stats span { font-size: 0.95rem; color: var(--text); } .ix-page .chips-w { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 44px; } .ix-page .chips-w span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; border-radius: 999px; padding: 6px 14px; background: var(--surface); color: var(--teal); } @media (max-width: 860px) { .ix-page .stats { grid-template-columns: 1fr 1fr; } } /* Franja de llamada a la acción */ .ix-page > section.cta-strip { position: relative; overflow: hidden; background: var(--grad); padding-block: 60px; } .ix-page .cta-strip::before { content: ""; position: absolute; width: 340px; height: 340px; right: 12%; top: -200px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; } .ix-page .cta-strip::after { content: ""; position: absolute; width: 200px; height: 200px; left: -60px; bottom: -110px; border-radius: 50%; border: 18px solid rgba(255,255,255,.08); pointer-events: none; } .ix-page .cta-strip > .ix-wrap { position: relative; z-index: 1; } .ix-page .strip { color: var(--white); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; } .ix-page .strip .si2 { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .ix-page .strip h2 { color: var(--white); font-size: clamp(1.35rem, 2.6vw, 1.75rem); } .ix-page .strip p { color: rgba(255,255,255,.88); margin-top: 6px; } .ix-page .strip .acts { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 900px) { .ix-page .strip { grid-template-columns: auto 1fr; } .ix-page .strip .acts { grid-column: 1 / -1; } } @media (max-width: 520px) { .ix-page .strip { grid-template-columns: 1fr; } .ix-page .strip .acts .btn { flex: 1; } } /* Pasos del proceso */ .ix-page .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; counter-reset: s; } .ix-page .steps li { counter-increment: s; position: relative; display: grid; gap: 8px; align-content: start; padding-right: 22px; min-width: 0; } .ix-page .steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn); color: var(--white); font-weight: 800; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--surface); transition: transform .25s ease; } .ix-page .band .steps li::before { box-shadow: 0 0 0 6px #E2F0FA; } .ix-page .steps li:hover::before { transform: scale(1.1); } .ix-page .steps li::after { content: ""; position: absolute; left: 44px; right: 0; top: 21px; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 12px); } .ix-page .steps li:last-child::after { display: none; } .ix-page .steps b { color: var(--ink); font-size: 1.04rem; margin-top: 6px; } .ix-page .steps span { color: var(--text); font-size: 0.93rem; } @media (max-width: 860px) { .ix-page .steps { grid-template-columns: 1fr; gap: 18px; } .ix-page .steps li { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 0; } .ix-page .steps li::before { grid-row: span 2; } .ix-page .steps b { margin-top: 0; } .ix-page .steps li::after { left: 21px; right: auto; top: 44px; bottom: -18px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 12px); } } /* Casos de éxito (logos) */ .ix-page .cases-box { background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-sm); padding: 36px; } .ix-page .logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: center; } .ix-page .logos a { display: grid; place-items: center; height: 92px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ix-page .logos a:hover { transform: translateY(-5px); border-color: #BFE3F5; box-shadow: 0 22px 40px -26px rgba(35,120,182,.5); } .ix-page .logos img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .25s ease, opacity .25s ease; } .ix-page .logos a:hover img { filter: none; opacity: 1; } @media (max-width: 960px) { .ix-page .logos { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .ix-page .logos { grid-template-columns: 1fr 1fr; } .ix-page .cases-box { padding: 20px; } } .ix-page .center-more { display: flex; justify-content: center; margin-top: 36px; } .ix-page .readmore { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); text-decoration: none; padding: 11px 20px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px #CFE4F4; transition: box-shadow .15s ease, color .15s ease; } .ix-page .readmore:hover { color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan); } .ix-page .readmore .ico { transition: transform .2s ease; } .ix-page .readmore:hover .ico { transform: translateX(4px); } /* Opiniones (widget externo) */ .ix-page .reviews { max-width: 980px; margin: 0 auto; } /* Marca hermana (Difuso) */ .ix-page .sister { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 30px; box-shadow: var(--shadow-sm); } .ix-page .sister img { height: 64px; width: auto; } .ix-page .sister h2 { font-size: 1.3rem; } .ix-page .sister p { color: var(--text); margin-top: 4px; } @media (max-width: 760px) { .ix-page .sister { grid-template-columns: 1fr; text-align: center; justify-items: center; } } /* Últimas noticias (parte reutilizada) */ .ix-page .ix-news .section { padding: 0 !important; } /* CTA final en caja degradada */ .ix-page .cta { background: var(--grad); border-radius: 28px; color: var(--white); padding: 52px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; position: relative; overflow: hidden; } .ix-page .cta::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.07); left: -120px; bottom: -160px; } .ix-page .cta > * { position: relative; z-index: 1; min-width: 0; } .ix-page .cta h2 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.4rem); } .ix-page .cta .copy { display: grid; gap: 18px; } .ix-page .cta .copy > p { color: rgba(255,255,255,.88); } .ix-page .cta-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; font-size: 0.95rem; } .ix-page .cta-list li { display: flex; gap: 8px; align-items: center; } .ix-page .cta-list .ico { color: #9BE6FF; } .ix-page .cta-side { display: grid; gap: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 20px; padding: 26px; } .ix-page .cta-side a:not(.btn), .ix-page .cta-side .crow { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; color: var(--white); text-decoration: none; } .ix-page .cta-side .fi { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 1.15rem; } .ix-page .cta-side b { display: block; color: var(--white); } .ix-page .cta-side small { color: rgba(255,255,255,.8); } .ix-page .cta-side .btn { margin-top: 6px; } @media (max-width: 960px) { .ix-page .cta { grid-template-columns: 1fr; padding: 32px 22px; } } @media (max-width: 520px) { .ix-page .cta-list { grid-template-columns: 1fr; } } /* FAQ */ .ix-page .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-items: start; } .ix-page .faq details { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 0 20px; transition: box-shadow .25s ease; } .ix-page .faq details:hover { box-shadow: 0 16px 30px -22px rgba(35,120,182,.45); } .ix-page .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-weight: 700; color: var(--ink); } .ix-page .faq summary::-webkit-details-marker { display: none; } .ix-page .faq summary::after { content: "+"; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--blue); font-size: 1.2rem; font-weight: 600; transition: transform .25s ease; } .ix-page .faq summary:hover::after { transform: rotate(90deg); } .ix-page .faq details[open] summary::after { content: "−"; background: var(--grad-btn); color: var(--white); } .ix-page .faq details p { padding-bottom: 18px; color: var(--muted); font-size: 0.95rem; } @media (max-width: 860px) { .ix-page .faq { grid-template-columns: 1fr; } } @media (max-width: 760px) { .ix-page > section { padding-block: 64px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .btn-system, .ix-page .fcard, .ix-page .gi, .ix-page .fitem, .ix-page .fitem .fi, .ix-page .logos a, .panel, .service-box .service-icon i { transition: none !important; transform: none !important; } } /* ------------------------------------------------------------------ */ /* Ajustes tras revisión visual */ /* ------------------------------------------------------------------ */ .ix-page .cta-list li { color: rgba(255,255,255,.92); } .ix-page .cta .kicker { color: #9BE6FF; } .ix-page .visual-photo img { aspect-ratio: 4 / 3; object-fit: cover; } .back-to-top { border-radius: 50% !important; width: 44px !important; height: 44px !important; line-height: 44px !important; text-align: center; border: 0 !important; } .back-to-top i, .back-to-top i::before { background: none !important; color: var(--white) !important; line-height: 44px; margin: 0; } .ix-foot .fsocial .ico { font-size: 1rem; } .light-section .textoblanco, .seccion8 .textoblanco, .seccion8 p { color: var(--white) !important; } .seccion8 .uppercase { text-transform: none !important; } /* Compatibilidad BS3: columnas fuera de un .row (en BS3 flotaban en fila; en BS5 solo funcionan dentro de .row). Especificidad 0 (:where) para que los anchos por breakpoint de BS5 sigan mandando. */ :where(:not(.row)) > :where([class^="col-"], [class*=" col-"]) { float: left; width: 100%; padding-left: 12px; padding-right: 12px; } :where(:not(.row)):has(> :where([class^="col-"], [class*=" col-"])) { display: flow-root; } /* ===================================================================== Componentes de páginas interiores (.ix-page) — ver GUIA-COMPONENTES.md ===================================================================== */ .ix-page > section.alt { background: var(--bg); } .ix-page > section.tight { padding-block: 64px; } .ix-page > section + section.cta-final { padding-top: 24px; } .ix-page > section.cta-final { padding-bottom: 96px; } /* Cabecera de página interior */ .ix-page > section.phero { position: relative; overflow: hidden; padding: 0; background: radial-gradient(60% 70% at 85% 30%, #E8F3FA 0%, transparent 70%), linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 100%); } .ix-page .phero .ring { right: -80px; top: -40px; } .ix-page .phero > .ix-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-block: 56px 64px; } .ix-page .phero.solo > .ix-wrap { grid-template-columns: 1fr; } .ix-page .phero.solo .phero-copy { max-width: 860px; } .ix-page .phero-copy { display: grid; gap: 18px; min-width: 0; } .ix-page .ptitle { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.1; } .ix-page .ptitle .mark { color: var(--blue); } .ix-page .phero .lead { font-size: 1.1rem; color: var(--text); max-width: 60ch; } .ix-page .phero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ix-page .phero-art { min-width: 0; position: relative; } .ix-page .phero-art::before { content: ""; position: absolute; inset: -18px; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: var(--bg-2); z-index: 0; } .ix-page .phero-art > * { position: relative; z-index: 1; } .ix-page .phero-art > img { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: var(--radius); } .ix-page .crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 0.86rem; color: var(--muted); } .ix-page .crumbs li { display: inline-flex; align-items: center; gap: 8px; } .ix-page .crumbs li + li::before { content: "›"; color: var(--muted); } .ix-page .crumbs a { color: var(--muted); text-decoration: none; } .ix-page .crumbs a:hover { color: var(--blue); } .ix-page .crumbs [aria-current] { color: var(--ink); font-weight: 600; } .ix-page .pchips { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; color: var(--text); font-size: .92rem; } .ix-page .pchips li { display: inline-flex; align-items: center; gap: 8px; } .ix-page .pchips .ico { color: var(--ok); } @media (max-width: 960px) { .ix-page .phero > .ix-wrap { grid-template-columns: 1fr; padding-block: 40px 48px; } .ix-page .phero-art > img { max-height: 280px; } } /* Índice rápido */ .ix-page .toc { display: flex; flex-wrap: wrap; gap: 8px; } .ix-page .toc a { font-size: 0.86rem; font-weight: 600; color: var(--blue); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; transition: transform .2s ease, border-color .2s ease, color .2s ease; } .ix-page .toc a:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); } /* Texto largo (artículos, explicaciones) */ .ix-page .prose { display: grid; gap: 16px; color: var(--text); min-width: 0; } .ix-page .prose.narrow { max-width: 820px; margin: 0 auto; } .ix-page .prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 8px; } .ix-page .prose h3 { font-size: 1.25rem; margin-top: 8px; } .ix-page .prose h4 { font-size: 1.08rem; margin-top: 4px; } .ix-page .prose ul, .ix-page .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; } .ix-page .prose ul { list-style: disc; } .ix-page .prose ol { list-style: decimal; } .ix-page .prose li::marker { color: var(--cyan); } .ix-page .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ix-page .prose img { border-radius: var(--radius); height: auto; } .ix-page .prose .figure { margin: 8px 0; text-align: center; } .ix-page .prose blockquote, .ix-page .note { margin: 0; background: var(--bg); border-left: 4px solid var(--cyan); border-radius: 0 14px 14px 0; padding: 16px 20px; color: var(--ink); } /* Lista de puntos con check (sin tarjeta) */ .ix-page .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ix-page .checks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; color: var(--text); } .ix-page .checks li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat, var(--grad-btn); } .ix-page .checks.two { grid-template-columns: 1fr 1fr; column-gap: 28px; } @media (max-width: 700px) { .ix-page .checks.two { grid-template-columns: 1fr; } } /* Texto + lista detallada (ventajas con icono o imagen) */ .ix-page .detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .ix-page .detail-copy { display: grid; gap: 16px; min-width: 0; position: sticky; top: 110px; } .ix-page .detail-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); } .ix-page .detail-copy > p { color: var(--text); } .ix-page .dlist { display: grid; gap: 14px; min-width: 0; } .ix-page .ditem { display: grid; grid-template-columns: 52px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ix-page .ditem:hover { transform: translateX(4px); border-color: #BFE3F5; box-shadow: var(--shadow-sm); } .ix-page .band .ditem, .ix-page .alt .ditem { border-color: transparent; box-shadow: var(--shadow-sm); } .ix-page .ditem .fi { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: #E5F4FB; color: var(--blue); transition: transform .25s ease, background .25s ease, color .25s ease; overflow: hidden; } .ix-page .ditem .fi img { width: 40px; height: 40px; object-fit: contain; } .ix-page .ditem:hover .fi { transform: rotate(-6deg); } .ix-page .ditem:hover .fi:not(:has(img)) { background: var(--grad-btn); color: var(--white); } .ix-page .ditem h3, .ix-page .ditem h4, .ix-page .ditem b.t { display: block; color: var(--ink); font-size: 1.06rem; margin-bottom: 4px; } .ix-page .ditem p, .ix-page .ditem span { color: var(--text); font-size: 0.95rem; } .ix-page .ditem p + p { margin-top: 8px; } @media (max-width: 960px) { .ix-page .detail { grid-template-columns: 1fr; gap: 32px; } .ix-page .detail-copy { position: static; } } @media (max-width: 480px) { .ix-page .ditem { grid-template-columns: 1fr; } } /* Tarjetas de funcionalidad en 2/3 columnas */ .ix-page .feats.three { grid-template-columns: repeat(3, 1fr); } .ix-page .feats.two { grid-template-columns: repeat(2, 1fr); } .ix-page .fitem .fi img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); } .ix-page .fitem .fi.img { background: #E5F4FB; } .ix-page .fitem .fi.img img { width: 34px; height: 34px; filter: none; } .ix-page .fitem ul { margin: 0; padding-left: 1.1em; list-style: disc; color: var(--text); font-size: .93rem; display: grid; gap: 4px; } .ix-page .fitem .link-more { margin-top: 4px; } @media (max-width: 960px) { .ix-page .feats.three { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ix-page .feats.three, .ix-page .feats.two { grid-template-columns: 1fr; } } .ix-page .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 960px) { .ix-page .cards3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ix-page .cards3 { grid-template-columns: 1fr; } } /* Tarjeta con imagen */ .ix-page .mcard { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; } .ix-page .mcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); color: inherit; } .ix-page .mcard .mimg { aspect-ratio: 16 / 10; background: var(--bg); display: grid; place-items: center; overflow: hidden; } .ix-page .mcard .mimg img { width: 100%; height: 100%; object-fit: cover; } .ix-page .mcard .mimg.contain img { object-fit: contain; padding: 18px; } .ix-page .mcard .mbody { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; } .ix-page .mcard h3 { font-size: 1.15rem; } .ix-page .mcard p { color: var(--text); font-size: .95rem; } /* Casos de éxito en lista (logo + texto) */ .ix-page .case-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .ix-page .case-list.one { grid-template-columns: 1fr; } .ix-page .case-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ix-page .case-item:hover { transform: translateY(-4px); border-color: #BFE3F5; box-shadow: var(--shadow-sm); } .ix-page .case-item .logo { display: grid; place-items: center; height: 96px; border-radius: 14px; background: var(--bg); padding: 10px; } .ix-page .case-item .logo img { max-height: 76px; width: auto; object-fit: contain; } .ix-page .case-item h3, .ix-page .case-item b.t { display: block; color: var(--ink); font-size: 1.08rem; margin-bottom: 4px; } .ix-page .case-item p { color: var(--text); font-size: .94rem; } @media (max-width: 860px) { .ix-page .case-list { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ix-page .case-item { grid-template-columns: 1fr; } } /* Cifras en barra */ .ix-page .kbar { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); } .ix-page .kbar > div { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; padding: 22px 24px; min-width: 0; } .ix-page .kbar > div + div { border-left: 1px solid var(--line); } .ix-page .kbar .kic { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; background: #E5F4FB; color: var(--blue); } .ix-page .kbar b { font-size: 1.8rem; font-weight: 800; line-height: 1.1; background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; } .ix-page .kbar span:last-child { font-size: 0.88rem; color: var(--text); line-height: 1.35; } @media (max-width: 960px) { .ix-page .kbar { grid-template-columns: 1fr 1fr; } .ix-page .kbar > div:nth-child(3) { border-left: 0; } .ix-page .kbar > div:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 560px) { .ix-page .kbar { grid-template-columns: 1fr; } .ix-page .kbar > div + div { border-left: 0; border-top: 1px solid var(--line); } } /* Tablas */ .ix-page .tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .ix-page .tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .94rem; } .ix-page .tbl-wrap th, .ix-page .tbl-wrap td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .ix-page .tbl-wrap thead th { background: var(--bg); color: var(--ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; } .ix-page .tbl-wrap tbody tr:last-child td { border-bottom: 0; } .ix-page .tbl-wrap tbody tr:hover td { background: #F7FBFE; } /* Logos (tiras) */ .ix-page .logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; } .ix-page .logo-row img { max-height: 64px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .25s ease, opacity .25s ease; } .ix-page .logo-row img:hover { filter: none; opacity: 1; } /* Imagen enmarcada */ .ix-page .frame { position: relative; padding: 26px; min-width: 0; } .ix-page .frame::before { content: ""; position: absolute; inset: 0; border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; background: var(--bg-2); } .ix-page .band .frame::before, .ix-page .alt .frame::before { background: rgba(255,255,255,.6); } .ix-page .frame > img, .ix-page .frame > picture, .ix-page .frame > video, .ix-page .frame > iframe { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .ix-page .frame.plain > img { box-shadow: none; border-radius: 0; } /* Vídeo responsive */ .ix-page .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .ix-page .video iframe, .ix-page .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Pestañas en píldora (Bootstrap 5 .nav-pills) */ .ix-page .nav-pills { gap: 8px; flex-wrap: wrap; } .ix-page .nav-pills .nav-link { border-radius: 999px; color: var(--blue); background: var(--surface); border: 1px solid var(--line); font-weight: 600; padding: 8px 18px; } .ix-page .nav-pills .nav-link.active { background: var(--grad-btn); border-color: transparent; color: var(--white); } .ix-page .tab-content { margin-top: 24px; } /* FAQ de una columna */ .ix-page .faq.one { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; } .ix-page .faq details > div { padding-bottom: 18px; color: var(--muted); font-size: .95rem; display: grid; gap: 10px; } .ix-page .faq details > div p { padding: 0; } /* Formularios en tarjeta (contacto) */ .ix-page .contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; } .ix-page .contact-info { display: grid; gap: 22px; min-width: 0; } .ix-page .cinfo { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; } .ix-page .cinfo .fi { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #E5F4FB; color: var(--blue); font-size: 1.15rem; transition: transform .25s ease, background .25s ease, color .25s ease; } .ix-page .cinfo:hover .fi { background: var(--grad-btn); color: var(--white); transform: rotate(-6deg); } .ix-page .cinfo b { color: var(--ink); display: block; } .ix-page .cinfo span, .ix-page .cinfo a { color: var(--text); font-size: 0.94rem; } .ix-page .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px; min-width: 0; } .ix-page .form-card h2, .ix-page .form-card h3 { font-size: 1.25rem; } .ix-page .form-card .r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ix-page .form-card input:not([type=checkbox]):not([type=radio]):not([type=submit]), .ix-page .form-card textarea, .ix-page .form-card select { width: 100%; } .ix-page .form-card textarea { min-height: 120px; } .ix-page .form-card input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); } @media (max-width: 960px) { .ix-page .contact { grid-template-columns: 1fr; } } @media (max-width: 520px) { .ix-page .form-card .r2 { grid-template-columns: 1fr; } .ix-page .form-card { padding: 20px; } } /* Páginas legales */ .ix-page .legal-body { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; color: var(--text); line-height: 1.75; } .ix-page .legal-body h2 { font-size: 1.35rem; margin-top: 22px; } .ix-page .legal-body h3 { font-size: 1.08rem; margin-top: 10px; } .ix-page .legal-body ul, .ix-page .legal-body ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; list-style: disc; } .ix-page .legal-body ol { list-style: decimal; } .ix-page .legal-body a { color: var(--blue); overflow-wrap: anywhere; } .ix-page .legal-body table { width: 100%; border-collapse: collapse; font-size: .92rem; } .ix-page .legal-body th, .ix-page .legal-body td { padding: 10px 14px; text-align: left; border: 1px solid var(--line); vertical-align: top; } .ix-page .legal-body th { background: var(--bg); color: var(--ink); } /* Encabezado de sección alineado a la izquierda */ .ix-page .sec-head.left { text-align: left; justify-items: start; margin-left: 0; } /* Utilidades de espaciado de página */ .ix-page .stack { display: grid; gap: 28px; } .ix-page .stack-lg { display: grid; gap: 56px; } .ix-page .mt-sec { margin-top: 56px; } .ix-page .center { text-align: center; } .ix-page .split.top { align-items: start; } @media (prefers-reduced-motion: reduce) { .ix-page .ditem, .ix-page .mcard, .ix-page .case-item, .ix-page .toc a { transition: none !important; transform: none !important; } } /* Landings: cabecera y pie mínimos */ .ix-land-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .ix-land-top > .ix-wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; } .ix-land-top .brand img { display: block; height: 42px; width: auto; max-width: none; } .ix-land-top .land-phone { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; } .ix-land-top .land-phone:hover { color: var(--cyan); } @media (max-width: 560px) { .ix-land-top .land-phone span { display: none; } .ix-land-top .btn { padding: 10px 16px; font-size: .74rem; } .ix-land-top .brand img { height: 34px; } } .ix-land-foot { padding-block: 44px 24px !important; } .ix-land-foot .land-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; } .ix-land-foot .land-foot-row > img { height: 40px; width: auto; filter: brightness(0) invert(1); } .ix-land-foot .fcontact { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; } .ix-land-foot .fcontact li { grid-template-columns: 18px auto; } .ix-land-foot .ffunds { margin-top: 28px; } /* ------------------------------------------------------------------ */ /* Piezas compartidas (parts/): banner de casos, formulario lateral, */ /* casos de éxito embebidos (WordPress) */ /* ------------------------------------------------------------------ */ .ix-casos-banner .sec-head { margin-bottom: 32px; } .ix-casos-banner .sec-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .ix-casos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ix-caso { display: block; border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .ix-caso:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .ix-caso img { display: block; width: 100%; height: auto; } @media (max-width: 960px) { .ix-casos-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ix-casos-grid { grid-template-columns: 1fr; } } .ix-sform { display: grid; gap: 14px; } .ix-sform-f { display: grid; gap: 6px; } .ix-sform input[type=text], .ix-sform input[type=email], .ix-sform input[type=tel], .ix-sform textarea { width: 100%; } .ix-sform textarea { min-height: 120px; resize: vertical; } .ix-sform .checkbox label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); } .ix-sform .checkbox input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blue); flex: none; } .ix-sform .google-captcha { min-height: 0; } .embedded-casos-exito-container { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-sm); } .embedded-casos-exito-container > [class*="col-"] { width: auto !important; max-width: none; padding: 0; float: none; } .embedded-casos-exito-img-col img { width: 100%; height: auto; border-radius: 16px; } .embedded-casos-exito-container .resp-tabs-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; } .embedded-casos-exito-container .resp-tabs-list li { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--blue); background: var(--surface); border: 1px solid var(--line) !important; border-radius: 999px; padding: 6px 14px !important; margin: 0 !important; } .embedded-casos-exito-container .resp-tabs-list li.resp-tab-active { background: var(--grad-btn) !important; color: var(--white) !important; border-color: transparent !important; } .embedded-casos-exito-container .resp-tabs-container { border: 0 !important; padding: 0 !important; background: none !important; } .embedded-casos-exito-container .resp-tab-content { border: 0 !important; padding: 0 !important; } .embedded-casos-exito-container .descrip { color: var(--text); margin-bottom: 16px; } .embedded-casos-exito-container .buttons_box { display: flex; flex-wrap: wrap; gap: 10px; } .embedded-casos-exito-container h2.resp-accordion { border-radius: 12px; border-color: var(--line) !important; background: var(--bg) !important; color: var(--ink) !important; font-size: 1rem; } @media (max-width: 760px) { .embedded-casos-exito-container { grid-template-columns: 1fr; } .embedded-casos-exito-img-col { max-width: 220px; } } /* Landings en móvil: el botón de la cabecera no debe desbordar */ @media (max-width: 560px) { .ix-land-top > .ix-wrap { gap: 10px; } .ix-land-top .land-phone { margin-left: auto; } .ix-land-top .btn { white-space: normal; text-align: center; line-height: 1.2; max-width: 150px; padding: 9px 12px; font-size: .68rem; letter-spacing: .02em; } .ix-land-top .btn .ico { display: none; } .ix-land-top .brand img { height: 30px; } } /* Palabras o URLs largas: cortar solo si no caben (evita scroll horizontal en móvil) */ .ix-page h1, .ix-page h2, .ix-page h3, .ix-page h4, .ix-page p, .ix-page li, .ix-page td, .ix-page a { overflow-wrap: break-word; } /* Móvil: las columnas no crecen por contenido ancho (botones, tablas, títulos largos) */ .ix-page .legal-body > *, .ix-page .prose > *, .ix-page .stack > *, .ix-page .split > *, .ix-page .detail > *, .ix-page .dlist > *, .ix-page .feats > *, .ix-page .sec-head > *, .ix-page .phero-copy > *, .ix-page .split-copy > *, .ix-page .contact > *, .ix-page .fitem > *, .ix-page .ditem > * { min-width: 0; } .ix-page .legal-body table { display: block; overflow-x: auto; } @media (max-width: 960px) { .ix-page .split, .ix-page .detail, .ix-page .contact, .ix-page .phero > .ix-wrap, .ix-page .hero, .ix-page .cta { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .ix-page .btn, .ix-page .readmore, .ix-page .btn-system { white-space: normal; text-align: center; } .ix-page .feats, .ix-page .feats.two, .ix-page .feats.three, .ix-page .cards3, .ix-page .case-list { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------ */ /* Revisión 2026-11-04: alineación de botones/enlaces en tarjetas */ /* ------------------------------------------------------------------ */ /* El enlace o botón final de cada tarjeta se pega al pie: en una misma fila todos quedan a la misma altura */ .ix-page .fbody, .ix-page .fitem, .ix-page .mcard .mbody { display: flex; flex-direction: column; align-items: flex-start; } .ix-page .fbody > *, .ix-page .fitem > *, .ix-page .mcard .mbody > * { max-width: 100%; } .ix-page .fbody > :is(h3, h4, p, ul, ol, div:not(.fi)), .ix-page .fitem > :is(h3, h4, p, ul, ol), .ix-page .mcard .mbody > :is(h3, h4, p, ul, ol) { align-self: stretch; } .ix-page .fbody > :is(.link-more, .btn):last-child, .ix-page .fitem > :is(.link-more, .btn):last-child, .ix-page .mcard .mbody > :is(.link-more, .btn):last-child, .ix-page :is(.fbody, .fitem, .mbody) > :is(p, div):last-child:has(> :is(.link-more, .btn):only-child) { margin-top: auto; padding-top: 6px; } /* Enlaces "Ver más" largos: la flecha va pegada al final del texto (con inline-flex se quedaba en el borde derecho al partir línea) */ .ix-page .link-more { display: inline-block; line-height: 1.45; } .ix-page .link-more .ico { display: inline-block; vertical-align: -2px; margin-left: 6px; } /* .checks: con rejilla, un
  • que empieza por partía el texto y lo metía en la columna del icono (24px). Icono posicionado + texto en un único bloque. */ .ix-page .checks li { display: block; position: relative; padding-left: 34px; } .ix-page .checks li::before { position: absolute; left: 0; top: 0; } /* .prose.narrow anulaba el margen de .mt-sec (más específica) y el índice de secciones quedaba pegado al texto */ .ix-page .prose.narrow.mt-sec { margin-top: 56px; } .ix-page .ix-wrap > .toc { justify-content: center; } /* Botón "subir": centrado encima del botón de WhatsApp (widget externo: right 65px + 15px, 60px de ancho; en móvil right 20px) */ .back-to-top { right: 88px !important; bottom: 92px !important; } @media (max-width: 768px) { .back-to-top { right: 43px !important; } } /* Páginas de dominios, "Otros operadores": una banda entera para 1-3 enlaces quedaba vacía. Franja compacta: texto a la izquierda y enlaces como píldoras a la derecha. */ .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 40px; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .sec-head { margin: 0; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks li { padding: 0; font-size: 0; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks li::before { display: none; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks li a { display: inline-block; font-size: .88rem; font-weight: 600; color: var(--blue); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; transition: transform .2s ease, border-color .2s ease, color .2s ease; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks li a:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); } @media (max-width: 860px) { .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) { grid-template-columns: 1fr; } .ix-page .band.tight > .ix-wrap:has(> .sec-head.left + ul.checks:last-child) > .checks { justify-content: flex-start; } } /* Botones dentro de tarjetas: pueden partir línea en vez de salirse de la tarjeta */ .ix-page :is(.fitem, .fbody, .mbody, .ditem) .btn { white-space: normal; text-align: center; max-width: 100%; } /* Secciones con círculos decorativos: overflow:hidden las convertía en contenedores con scroll interno; al navegar con teclado (foco) o anclas el navegador las desplazaba y aparecía un hueco de ~200px. overflow:clip recorta igual sin crear contenedor de scroll (hidden queda de respaldo para navegadores antiguos). */ .ix-page > section.band, .ix-page > section.hero-bg, .ix-page > section.cta-strip, .ix-page > section.phero, .ix-page .cta { overflow: clip; } /* Contacto, "Nuestras oficinas": el collage (PNG con fondo blanco) quedaba como un rectángulo blanco suelto y el mapa pequeño a media altura. Collage en tarjeta blanca y mapa a la misma altura. */ .ix-page .pg-offices { align-items: stretch; } .ix-page .pg-offices .frame.plain { padding: 18px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-sm); } .ix-page .pg-offices .frame.plain::before { display: none; } .ix-page .pg-offices .frame.plain > img { max-height: 620px; width: auto; max-width: 100%; margin: 0 auto; } .ix-page .pg-offices > .video { aspect-ratio: auto; min-height: 420px; align-self: stretch; } .ix-page .pg-offices { grid-template-areas: "k k" "h h" "f v"; row-gap: 18px; } .ix-page .pg-offices > .split-copy { display: contents; } .ix-page .pg-offices .kicker { grid-area: k; justify-self: start; } .ix-page .pg-offices h2 { grid-area: h; margin-bottom: 12px; } .ix-page .pg-offices .frame.plain { grid-area: f; display: grid; place-items: center; } .ix-page .pg-offices .frame.plain > img { max-height: 560px; } .ix-page .pg-offices > .video { grid-area: v; } @media (max-width: 960px) { .ix-page .pg-offices { grid-template-areas: "k" "h" "f" "v"; } } /* Cifras: la regla de las etiquetas (.stats span) también encogía el número dentro de (p. ej. "+500") y pintaba en gris las estrellas de valoración. */ .ix-page .stats b span { font-size: inherit; color: inherit; font-weight: inherit; } .ix-page .stats .pg-land-stars, .ix-page .pg-land-stars { color: #F5B301; font-size: 1.05rem; } /* Estrellas de valoración rellenas (el icono es de trazo) */ .ix-page .pg-land-stars .ico, .ix-page .stars .ico { fill: currentColor; } /* Móvil: la burbuja "¿Hablamos?" junto al botón de WhatsApp tapaba títulos y botones; se deja solo el icono */ @media (max-width: 560px) { .whatsapp-container .whatsapp-bubble { display: none !important; } } /* Fila de logos: los logos anchos (factorial, synersight) ocupaban el triple que los demás. Caja común por logo. */ .ix-page .logo-row img { max-width: 150px; max-height: 56px; object-fit: contain; } @media (max-width: 560px) { .ix-page .logo-row { gap: 18px 24px; } .ix-page .logo-row img { max-width: 110px; max-height: 44px; } } /* Botones con texto largo (p. ej. caja final de contacto: "Cuéntanos qué necesitas integrar y lo haremos funcionar"): se cortaban por no poder partir línea. Parten línea solo cuando no caben. */ .ix-page .btn { white-space: normal; text-align: center; max-width: 100%; } /* ========================================================================== Fase I de las especificaciones (2026-11-04): menú de 6 apartados, equipo, formulario de diagnóstico, barra fija móvil y bloques de home/servicios. ========================================================================== */ /* Menú: seis apartados + CTA más largo; se compacta antes de pasar a hamburguesa */ @media (max-width: 1280px) { .ix-top .menu { gap: 18px; } .ix-top .menu > a, .ix-top .dd-btn { font-size: .9rem; } } @media (max-width: 1140px) { .ix-top .menu { gap: 13px; } .ix-top .ix-cta { padding-inline: 16px; } } @media (max-width: 1000px) { .ix-top .ix-cta { display: none; } } .ix-top .dd-in.wide { width: 640px; grid-template-columns: 1fr 1fr; } .ix-top .dd:last-child .dd-panel, .ix-top .dd:nth-last-child(2) .dd-panel { left: auto; right: -18px; } /* Barra fija en móvil: Llamar / Pedir diagnóstico */ .ix-mbar { display: none; } @media (max-width: 768px) { .ix-mbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); box-shadow: 0 -8px 24px -16px rgba(14,58,92,.5); } .ix-mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: .92rem; text-decoration: none; } .ix-mbar .ix-mbar-call { color: var(--blue); border: 1px solid var(--line); background: var(--surface); } .ix-mbar .ix-mbar-diag { color: var(--white); background: var(--grad-btn); } .ix-mbar .ico { width: 18px; height: 18px; } body { padding-bottom: 64px; } .whatsapp-container { bottom: 76px !important; } .back-to-top { bottom: 150px !important; } } /* Equipo de consultores */ .ix-page .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .ix-page .tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .ix-page .tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); } .ix-page .tphoto { background: var(--pastel); display: grid; place-items: center; padding: 22px 0 14px; } .ix-page .tphoto img { width: 129px; height: 142px; object-fit: contain; } .ix-page .tbody { padding: 16px 20px 22px; display: grid; gap: 6px; align-content: start; } .ix-page .tbody h3 { font-size: 1.12rem; margin: 0; } .ix-page .tbody .trole { font-size: .9rem; font-weight: 700; color: var(--blue); margin: 0; } .ix-page .tbody p { font-size: .93rem; margin: 0; } .ix-page .team.compact { grid-template-columns: repeat(5, 1fr); } .ix-page .team.compact .tbody { padding: 12px 14px 18px; text-align: center; } @media (max-width: 960px) { .ix-page .team.compact { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .ix-page .team.compact { grid-template-columns: 1fr 1fr; } } /* Formulario corto de diagnóstico */ .ix-page .lead-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; } .ix-page .lead-copy h2 { margin: 6px 0 14px; } .ix-page .lead-copy .ticks { margin: 22px 0; } .ix-page .guarantees { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; } .ix-page .guarantees li { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--teal); background: var(--surface); border-radius: 999px; padding: 6px 12px; } .ix-page .guarantees .ico { width: 15px; height: 15px; } .ix-page .lead-alt { font-size: .95rem; } .ix-page .ix-lead-form label { font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; display: block; } .ix-page .ix-lead-form .checkbox label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); } .ix-page .ix-lead-form .checkbox input { margin-top: 3px; flex: none; } .ix-page .ix-lead-form .btn { justify-self: start; } .ix-page .ix-lead-form .pg-legal { font-size: .78rem; color: var(--muted); margin: 0; } .ix-page .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 960px) { .ix-page .lead-split { grid-template-columns: 1fr; gap: 28px; } } /* Pilares / problemas / sectores: rejilla de 4 */ .ix-page .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 960px) { .ix-page .pillars { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ix-page .pillars { grid-template-columns: 1fr; } } /* Bloque de ahorro con ejemplo de cálculo */ .ix-page .calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow-sm); display: grid; gap: 14px; } .ix-page .calc-card h3 { font-size: 1.1rem; margin: 0; } .ix-page .calc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ix-page .calc-rows li { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; border-bottom: 1px dashed var(--line); padding-bottom: 8px; } .ix-page .calc-rows b { color: var(--ink); } .ix-page .calc-total { background: var(--bg); border-radius: 16px; padding: 16px 18px; } .ix-page .calc-total small { display: block; color: var(--muted); font-size: .82rem; } .ix-page .calc-total strong { display: block; font-size: 1.9rem; color: var(--ink); line-height: 1.2; } .ix-page .calc-note { font-size: .8rem; color: var(--muted); margin: 0; } /* Caso destacado */ .ix-page .case-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 36px; box-shadow: var(--shadow-sm); } .ix-page .case-feature .cf-logo { height: 56px; width: auto; margin-bottom: 14px; } .ix-page .case-feature .cf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 22px; } .ix-page .case-feature .cf-cols h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ix-page .case-feature .cf-cols p { font-size: .95rem; } .ix-page .case-feature .cf-img img { width: 100%; height: auto; border-radius: 18px; } @media (max-width: 960px) { .ix-page .case-feature { grid-template-columns: 1fr; padding: 24px; } } @media (max-width: 560px) { .ix-page .case-feature .cf-cols { grid-template-columns: 1fr; } } /* Precio orientativo */ .ix-page .price-box { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 32px; } .ix-page .price-box .pb-figure { background: var(--grad); color: var(--white); border-radius: 20px; padding: 26px; display: grid; gap: 6px; } .ix-page .price-box .pb-figure small { opacity: .85; font-size: .85rem; color: var(--white); } .ix-page .price-box .pb-figure strong { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: var(--white); } .ix-page .price-box .pb-figure p { color: rgba(255,255,255,.9); margin: 0; } @media (max-width: 860px) { .ix-page .price-box { grid-template-columns: 1fr; padding: 22px; } } /* Flujos de datos entre sistemas (integraciones) */ .ix-page .flows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ix-page .flow-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 14px; align-content: start; } .ix-page .flow-card h3 { font-size: 1.05rem; margin: 0; } .ix-page .flow-ends { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .ix-page .flow-ends span { text-align: center; font-weight: 800; color: var(--ink); background: var(--bg); border-radius: 12px; padding: 10px 6px; font-size: .95rem; } .ix-page .flow-ends i { font-style: normal; color: var(--cyan); font-weight: 800; font-size: 1.2rem; } .ix-page .flow-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ix-page .flow-card li { font-size: .92rem; padding-left: 18px; position: relative; } .ix-page .flow-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-btn); } @media (max-width: 960px) { .ix-page .flows { grid-template-columns: 1fr; } } /* Pasos en vertical (columna estrecha) */ .ix-page .steps.vertical { grid-template-columns: 1fr; gap: 18px; } .ix-page .steps.vertical li { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 0; } .ix-page .steps.vertical li::before { grid-row: span 2; } .ix-page .steps.vertical b { margin-top: 0; } .ix-page .steps.vertical li::after { left: 21px; right: auto; top: 44px; bottom: -18px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 12px); } .ix-page .steps .when { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: .74rem; font-weight: 700; color: var(--teal); background: var(--bg); border-radius: 999px; padding: 2px 9px; font-style: normal; } /* Tarjetas de caso enlazadas */ .ix-page a.case-item { text-decoration: none; color: inherit; } /* Ajustes tras revisión visual de la fase I */ .ix-page .flow-card { display: flex; flex-direction: column; } .ix-page .flow-card > .link-more { margin-top: auto; padding-top: 4px; } .ix-page .price-box .checks { margin-bottom: 20px; } .ix-page .steps .when { display: table; margin: 6px 0 0; } .ix-page .partner-list { max-width: 820px; margin-inline: auto; } .ix-page .partner-list .case-item { grid-template-columns: 220px 1fr; } .ix-page .partner-list .case-item .logo { height: 110px; } @media (max-width: 480px) { .ix-page .partner-list .case-item { grid-template-columns: 1fr; } } .ix-page .calc-rows b { white-space: nowrap; } @media (max-width: 768px) { .whatsapp-container { right: 14px !important; bottom: 74px !important; } .back-to-top { right: 22px !important; bottom: 146px !important; } } /* Agente web de illusion Data (2026-11-05): el icono del chat (58 px) se apila en vertical sobre WhatsApp, sin moverlo a la izquierda. Escritorio: WhatsApp ocupa los ~70 px inferiores; el chat sube a 90 px. «Subir» está a su izquierda (right: 88 px) y no se pisa. Móvil con barra inferior (.ix-mbar, ~60 px + zona segura; WhatsApp va dentro de la barra): 60 + 16 = 76 px. Móvil sin barra: WhatsApp en bottom 74 px (~60 px de alto) → el chat a 150 px. */ [data-illusion-webagent] { --iwa-bottom: 90px; } @media (max-width: 768px) { [data-illusion-webagent] { --iwa-right: 14px; --iwa-bottom: 150px; } body:has(.ix-mbar) [data-illusion-webagent] { --iwa-bottom: calc(76px + env(safe-area-inset-bottom)); } } /* Tarjetas fitem enlazadas (servicios relacionados) */ .ix-page a.fitem { text-decoration: none; color: inherit; } /* Tabla comparativa en móvil: cada fila como tarjeta con la etiqueta de columna */ @media (max-width: 760px) { .ix-page .tbl-cmp thead { display: none; } .ix-page .tbl-cmp table, .ix-page .tbl-cmp tbody, .ix-page .tbl-cmp tr, .ix-page .tbl-cmp td { display: block; width: 100%; } .ix-page .tbl-cmp tr { border-bottom: 1px solid var(--line); padding: 10px 0; } .ix-page .tbl-cmp td { border: 0 !important; padding: 4px 16px; text-align: left !important; display: grid; grid-template-columns: 120px 1fr; gap: 10px; } .ix-page .tbl-cmp td::before { content: attr(data-label); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ix-page .tbl-cmp td:first-child { font-weight: 700; color: var(--ink); } } /* Casos de éxito (fase III, parts/caso.php): ficha resumen y testimonio */ .ix-page .caso-ficha { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 26px; box-shadow: var(--shadow-sm); } .ix-page .caso-ficha .cf-logo-box { display: grid; place-items: center; height: 110px; background: var(--bg); border-radius: 16px; padding: 14px; } .ix-page .caso-ficha .cf-logo-box img { max-height: 80px; max-width: 100%; object-fit: contain; } .ix-page .caso-ficha dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 0; } .ix-page .caso-ficha dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ix-page .caso-ficha dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); } .ix-page .caso-quote { margin: 0; background: var(--bg); border-left: 4px solid var(--cyan); border-radius: 0 18px 18px 0; padding: 24px 28px; } .ix-page .caso-quote p { font-size: 1.15rem; color: var(--ink); } .ix-page .caso-quote footer { margin-top: 10px; color: var(--muted); } @media (max-width: 700px) { .ix-page .caso-ficha { grid-template-columns: 1fr; } } .ix-page.pg-caso2 .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .ix-page .narrow-col { max-width: 820px; } /* Fase IV: calculadora de ahorro y tarjeta de precio SAT */ .ix-page .ix-calc .calc-field { display: grid; gap: 8px; } .ix-page .ix-calc .calc-field label { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; font-weight: 600; color: var(--ink); } .ix-page .ix-calc output { font-weight: 800; color: var(--ink); white-space: nowrap; } .ix-page .ix-calc input[type=range] { width: 100%; accent-color: var(--blue); height: 6px; cursor: pointer; } .ix-page .ix-calc input[type=number] { width: 100%; } .ix-page .ix-calc .btn { justify-self: start; } .ix-page .sat-price { text-align: center; display: grid; gap: 4px; justify-items: center; max-width: 340px; margin-inline: auto; } .ix-page .sat-price .sat-from { margin: 6px 0 0; color: var(--muted); font-weight: 600; } .ix-page .sat-price .sat-amount { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1.1; } .ix-page .sat-price .sat-note { margin: 0 0 12px; font-size: .85rem; color: var(--muted); } @media (max-width: 760px) { .ix-page .flows[style] { grid-template-columns: 1fr !important; } } /* El CSS antiguo (style.css) da fondo oscuro y relleno a todo