/* ========================================================================= Tema Tandem 1. Fuentes y variables 2. Base 3. Cabecera y menú 4. Botones 5. Páginas y contenido (ts-*) 6. Portada (td-*) 7. Portadas antiguas (tsh-*) 8. Blog 9. Pie ========================================================================= */ /* ---------- 1. Fuentes y variables ---------- */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2?v=2") format("woff2"); font-weight: 500 900; font-stretch: 75% 100%; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-var.woff2?v=2") format("woff2"); font-weight: 400 600; font-display: swap; } :root { --marca: #4fb3e8; --marca-suave: #e3f2fb; --navy: #0f1b24; --navy-2: #16242f; --linea-osc: #2a3a46; --gris-osc: #c3ced6; --fondo: #f4f6f8; --blanco: #fff; --linea: #dce3e8; --texto: #0f1b24; --texto-2: #34444f; --gris: #4a5a66; --enlace: #1b6a96; --f-titulo: "Archivo", "Arial Narrow", sans-serif; --f-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; /* Etiquetas pequeñas: la letra del texto (antes IBM Plex Mono) */ --f-mono: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --ancho: 1280px; --gutter: 32px; /* Curva de salida marcada: arranca rápido y frena suave */ --td-salida: cubic-bezier(.23, 1, .32, 1); /* Variables de tandem-seo.css (bloques ts-*) con la paleta nueva */ --ts-azul: var(--enlace); --ts-azul-oscuro: #134f71; --ts-azul-suave: var(--marca-suave); --ts-texto: var(--texto); --ts-gris: var(--texto-2); --ts-borde: var(--linea); --ts-radio: 0; } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; } body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.6 var(--f-texto); } img, svg, video { max-width: 100%; height: auto; } a { color: var(--enlace); text-underline-offset: .15em; } a:hover { color: var(--texto); } h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--texto); line-height: 1.1; } :focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); } .saltar { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--blanco); color: var(--texto); padding: 10px 16px; } .saltar:focus { left: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .principal { display: block; } .nw { white-space: nowrap; } /* ---------- 3. Cabecera y menú ---------- */ .barra { background: #05090c; color: var(--gris-osc); font: 400 13px/1.4 var(--f-mono); } .barra__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 9px; padding-bottom: 9px; } .barra__contacto { display: flex; flex-wrap: wrap; gap: 6px 24px; } .barra a { color: var(--blanco); text-decoration: none; } .barra a:hover { color: var(--marca); } .cabecera { position: sticky; top: 0; z-index: 100; background: var(--navy); border-bottom: 1px solid rgba(79, 179, 232, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); transition: box-shadow .2s; } .admin-bar .cabecera { top: 32px; } .cabecera--desplazada { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } .cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; } .cabecera__logo, .custom-logo-link { display: block; flex: 0 0 auto; } .cabecera__logo img, .custom-logo-link img { display: block; width: auto; height: 46px; } .cabecera__toggle { display: none; } .nav { display: flex; align-items: center; gap: 28px; } .nav__lista, .nav__lista ul { list-style: none; margin: 0; padding: 0; } .nav__lista { display: flex; align-items: center; gap: 4px 22px; } .nav__lista > li { position: relative; display: flex; align-items: center; } .nav__lista a { text-decoration: none; } .nav__lista > li > a { display: block; padding: 26px 0; color: var(--blanco); font-weight: 500; font-size: 15.5px; } .nav__lista > li > a:hover, .nav__lista > li.current-menu-item > a, .nav__lista > li.current-menu-ancestor > a { color: var(--marca); } .nav__desplegar { width: 24px; height: 44px; margin-left: 2px; padding: 0; border: 0; background: transparent; color: var(--gris-osc); cursor: pointer; position: relative; } .nav__desplegar::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s; } .nav__desplegar[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(-135deg); } .nav__cta { flex: 0 0 auto; } @media (min-width: 1181px) { /* Desplegable sencillo (Soporte): caja bajo el elemento */ .nav__lista > li > .sub-menu { position: absolute; top: 100%; left: -20px; min-width: 300px; padding: 10px; background: var(--blanco); border-top: 3px solid var(--marca); box-shadow: 0 24px 48px rgba(5, 12, 18, .28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s, transform .2s var(--td-salida), visibility 0s linear .15s; } .nav__lista > li:hover > .sub-menu, .nav__lista > li:focus-within > .sub-menu, .nav__lista > li.esta-abierto > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s .12s, transform .18s .12s, visibility 0s linear .12s; } /* Con teclado o al pulsar, sin esperar */ .nav__lista > li:focus-within > .sub-menu, .nav__lista > li.esta-abierto > .sub-menu { transition-delay: 0s; } .nav__lista > li:hover > a::after, .nav__lista > li.esta-abierto > a::after { transform: scaleX(1); } .nav__lista > li > a { position: relative; } .nav__lista > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .2s; } .nav__lista .sub-menu .nav__desplegar { display: none; } /* Megapanel: a todo el ancho bajo la cabecera */ .nav__lista > li:has(> .sub-menu > .nav__presentacion) { position: static; } .nav__lista > li > .sub-menu:has(> .nav__presentacion) { left: 0; right: 0; min-width: 0; display: grid; gap: 0 28px; align-items: start; padding: 32px max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))) 36px; background: var(--blanco) linear-gradient(90deg, var(--navy-2) 0, var(--navy-2) calc(max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))) + 290px), transparent 0); } .nav__lista .sub-menu ul { list-style: none; margin: 0; padding: 0; } /* Columna de presentación (fondo oscuro a la izquierda) */ .nav__presentacion { grid-row: 1 / span 9; align-self: stretch; display: flex; flex-direction: column; gap: 12px; padding: 4px 32px 4px 0; color: var(--gris-osc); font-size: 15px; line-height: 1.5; } .nav__presentacion p { margin: 0; } .nav__presentacion-titulo { color: var(--blanco); font: 800 28px/1.02 var(--f-titulo); font-stretch: 82%; letter-spacing: -.01em; } .nav__lista .nav__presentacion-enlace { align-self: flex-start; margin-top: auto; display: inline-flex; gap: 8px; padding: 11px 16px; background: var(--marca); color: var(--navy); font-weight: 600; font-size: 14.5px; } .nav__lista .nav__presentacion-enlace:hover { background: #7cc7ef; color: var(--navy); } /* Elementos con visual y descripción */ .nav__lista .sub-menu a { display: flex; align-items: center; gap: 14px; padding: 9px 10px; color: var(--texto); font-size: 15px; line-height: 1.3; transition: background .15s; } .nav__lista .sub-menu a:hover { background: var(--fondo); } .nav__lista .sub-menu a:hover .nav__titulo { color: var(--enlace); } .nav__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav__titulo { font-weight: 600; transition: color .15s; } .nav__desc { color: var(--gris); font-size: 13px; line-height: 1.35; } .nav__visual { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; background: var(--fondo); transition: background .15s, transform .2s; } .nav__visual img { width: 100%; height: 100%; object-fit: cover; } .nav__item--logo .nav__visual { background: transparent; } .nav__item--logo .nav__visual img { object-fit: contain; } .nav__visual svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nav__lista .sub-menu a:hover .nav__visual { transform: scale(1.06); } .nav__item--icono > a:hover .nav__visual { background: var(--marca); } /* Soluciones: grupos en columnas; Módulos ocupa dos */ .nav__lista > li > .sub-menu:has(.nav__item--logo) { grid-template-columns: 290px minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); } .nav__lista > li > .sub-menu > .menu-item-has-children { display: block; margin-bottom: 18px; } .nav__lista > li > .sub-menu > .menu-item-has-children > a { display: block; margin: 0 0 6px; padding: 6px 10px 10px; border-bottom: 1px solid var(--linea); font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--enlace); pointer-events: auto; } .nav__lista > li > .sub-menu > .menu-item-has-children > a:hover { background: transparent; color: var(--texto); } .nav__lista > li > .sub-menu > .menu-item-has-children > a[href="#"] { pointer-events: none; } .nav__lista .sub-menu .sub-menu { position: static; display: block; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; transition: none; } /* Colocación fija: ERPs y Conectores en la 2.ª columna, Módulos en la 3.ª, Soluciones conectadas en la 4.ª */ .nav__lista > li > .sub-menu:has(.nav__item--logo) > .menu-item-has-children { grid-column: 2; } .nav__lista > li > .sub-menu:has(.nav__item--logo) > li.menu-item-has-children:has(.nav__item--logo) { grid-column: 3; grid-row: 1 / span 3; } .nav__lista > li > .sub-menu:has(.nav__item--logo) > li:has(.nav__item--logo) ~ .menu-item-has-children:not(:last-child) { grid-column: 4; grid-row: 1; } .nav__lista > li > .sub-menu > li:has(.nav__item--logo) > .sub-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; } /* Conectores lleva anclas (#prestashop…) sin visual: más discretas */ .nav__lista .sub-menu .sub-menu li:not([class*="nav__item--"]) > a { padding: 6px 10px; color: var(--texto-2); font-size: 14.5px; } /* Sectores: rejilla de fotos */ .nav__lista > li > .sub-menu:has(.nav__item--foto) { grid-template-columns: 290px repeat(3, minmax(0, 1fr)); } .nav__item--foto .nav__visual { flex-basis: 56px; width: 56px; height: 56px; } .nav__item--foto .nav__titulo { font-family: var(--f-titulo); font-weight: 700; font-size: 17px; } /* Servicios y Normativa: dos columnas */ .nav__lista > li > .sub-menu:has(> .nav__presentacion):not(:has(.nav__item--logo)):not(:has(.nav__item--foto)) { grid-template-columns: 290px repeat(2, minmax(0, 1fr)); } } @media (min-width: 1181px) and (max-width: 1240px) { .nav__lista { gap: 4px 16px; } .nav__lista > li > a { font-size: 14.5px; } .nav__lista > li > .sub-menu:has(.nav__item--logo) { grid-template-columns: 240px 1fr 2fr 1fr; } .nav__lista > li > .sub-menu:has(.nav__item--foto) { grid-template-columns: 240px repeat(2, minmax(0, 1fr)); } .nav__lista > li > .sub-menu:has(> .nav__presentacion) { background: var(--blanco) linear-gradient(90deg, var(--navy-2) 0, var(--navy-2) calc(var(--gutter) + 240px), transparent 0); } .nav__lista > li > .sub-menu:has(> .nav__presentacion):not(:has(.nav__item--logo)):not(:has(.nav__item--foto)) { grid-template-columns: 240px repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .cabecera__in { min-height: 68px; } .cabecera__logo img, .custom-logo-link img { height: 40px; } .cabecera__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea-osc); background: transparent; color: var(--blanco); font: 600 15px var(--f-texto); cursor: pointer; } .cabecera__toggle-icono, .cabecera__toggle-icono::before, .cabecera__toggle-icono::after { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s, background .2s; } .cabecera__toggle-icono { position: relative; } .cabecera__toggle-icono::before, .cabecera__toggle-icono::after { content: ""; position: absolute; left: 0; } .cabecera__toggle-icono::before { top: -6px; } .cabecera__toggle-icono::after { top: 6px; } .menu-abierto .cabecera__toggle-icono { background: transparent; } .menu-abierto .cabecera__toggle-icono::before { transform: translateY(6px) rotate(45deg); } .menu-abierto .cabecera__toggle-icono::after { transform: translateY(-6px) rotate(-45deg); } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 28px; background: var(--navy); border-top: 1px solid var(--linea-osc); max-height: calc(100vh - 110px); overflow-y: auto; } .menu-abierto .nav { display: flex; } .nav__lista { flex-direction: column; align-items: stretch; gap: 0; } .nav__lista li { flex-wrap: wrap; border-bottom: 1px solid var(--linea-osc); } .nav__lista li { display: flex; align-items: center; } .nav__lista li > a { flex: 1; padding: 13px 0; color: var(--blanco); font-size: 16px; } .nav__desplegar { width: 44px; } .nav__lista .sub-menu { display: none; flex-basis: 100%; padding-left: 16px; border-top: 1px solid var(--linea-osc); } .nav__lista .esta-abierto > .sub-menu { display: block; } .nav__lista .sub-menu li:last-child { border-bottom: 0; } .nav__lista .sub-menu a { color: var(--gris-osc); font-size: 15px; } .nav__cta { margin-top: 20px; justify-content: center; } .nav__presentacion { display: none; } .nav__lista .sub-menu a { display: flex; align-items: center; gap: 12px; } .nav__visual { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; background: var(--navy-2); } .nav__visual img { width: 100%; height: 100%; object-fit: cover; } .nav__item--logo .nav__visual { background: transparent; } .nav__item--logo .nav__visual img { object-fit: contain; } .nav__visual svg { width: 18px; height: 18px; fill: none; stroke: var(--marca); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nav__desc { display: none; } } @media (max-width: 782px) { .admin-bar .cabecera { top: 0; } } /* ---------- 4. Botones ---------- */ .boton, .ts-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; border: 1.5px solid var(--navy); border-radius: 0; background: var(--navy); color: var(--blanco) !important; font: 600 15px/1.2 var(--f-texto); text-decoration: none !important; transition: background .15s, color .15s, border-color .15s, transform .16s var(--td-salida); } /* Respuesta al pulsar: el botón cede un poco bajo el dedo o el ratón */ .boton:active, .ts-btn:active, .wpcf7 input[type="submit"]:active { transform: scale(.97); } .boton:hover, .ts-btn:hover, .ts-btn:focus { background: #23343f; border-color: #23343f; } .boton--marca { background: var(--marca); border-color: var(--marca); color: var(--navy) !important; } .boton--marca:hover { background: #7cc7ef; border-color: #7cc7ef; } .ts-btn--sec, .boton--borde { background: transparent; color: var(--navy) !important; } .ts-btn--sec:hover, .ts-btn--sec:focus, .boton--borde:hover { background: var(--navy); color: var(--blanco) !important; } .ts-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 40px; } /* ---------- 5. Páginas y contenido ---------- */ .cabecera-pagina { background: var(--blanco); border-bottom: 1px solid var(--linea); padding: 48px 0 44px; } .cabecera-pagina__titulo { margin: 0; max-width: 980px; font-stretch: 80%; font-weight: 800; font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; } .cabecera-pagina__meta { margin: 0 0 12px; font: 400 13px var(--f-mono); color: var(--gris); } .migas { margin: 0 0 18px; font: 400 13px/1.5 var(--f-mono); color: var(--gris); overflow-wrap: anywhere; } .migas a { color: var(--enlace); text-decoration: none; } .migas a:hover { text-decoration: underline; } .articulo { padding: 56px 0 88px; } .articulo--completo { padding: 0; } .entrada { max-width: calc(980px + 2 * var(--gutter)); } .entrada > :first-child { margin-top: 0; } .entrada p, .entrada li { color: var(--texto-2); } .entrada h2, .entrada .ts-lead ~ h2, .entry-content h2 { font-family: var(--f-titulo); font-stretch: 85%; font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -.01em; color: var(--texto); margin: 64px 0 18px; } .entrada > h3, article .item-content > h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--texto); margin: 40px 0 12px; } .entrada table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; background: var(--blanco); font-size: 15.5px; } .entrada th, .entrada td { padding: 12px 14px; border: 1px solid var(--linea); text-align: left; vertical-align: top; } .entrada th { background: var(--navy); color: var(--blanco); font-weight: 600; } .entrada blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--marca); font-size: 19px; } .entrada img { height: auto; } .entrada__imagen { margin: 0 0 32px; } .entrada__nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--linea); font-weight: 600; } /* «Siguiente» siempre a la derecha, aunque no haya «anterior» */ .entrada__nav span:has(> a[rel="next"]) { margin-left: auto; text-align: right; } /* Entradilla */ .ts-lead { max-width: 760px; font-size: 20px; line-height: 1.55; color: var(--texto-2); } .ts-lead strong { color: var(--texto); } /* Tarjetas */ .ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0 8px; } .ts-card { display: block; padding: 24px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 0; color: var(--texto); } .ts-card h3 { font: 700 20px/1.2 var(--f-titulo); color: var(--texto); margin: 0 0 8px; } .ts-card p { margin: 0; color: var(--texto-2); font-size: 16px; line-height: 1.55; } a.ts-card { text-decoration: none !important; transition: border-color .15s, box-shadow .15s; } a.ts-card:hover, a.ts-card:focus { border-color: var(--navy); box-shadow: 0 10px 28px rgba(15, 27, 36, .1); } a.ts-card h3 { color: var(--texto); } a.ts-card h3::after { content: " →"; color: var(--enlace); } /* Ventajas */ .ts-ventajas li { padding-left: 32px; } .ts-ventajas li::before { width: 20px; height: 20px; top: .25em; border-radius: 0; background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230f1b24' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9 1.1 1.1z'/%3E%3C/svg%3E") center/13px no-repeat; } /* Pasos */ .ts-pasos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; margin: 24px 0; } .ts-pasos li { border-top: 3px solid var(--navy); padding-top: 18px; color: var(--texto-2); } .ts-pasos li::before { content: counter(ts-paso, decimal-leading-zero); font: 800 44px/1 var(--f-titulo); color: var(--enlace); margin-bottom: 12px; } .ts-pasos li strong { color: var(--texto); } /* Preguntas frecuentes */ .ts-faq { border-top: 1px solid var(--linea); margin: 20px 0; } .ts-faq details { padding: 0; border-bottom: 1px solid var(--linea); } .ts-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding: 20px 0; font-weight: 600; font-size: 18.5px; color: var(--texto); } .ts-faq summary::after { content: "+"; position: static; flex: 0 0 auto; font-size: 28px; font-weight: 400; line-height: 1; color: var(--enlace); transition: transform .3s var(--td-salida); } .ts-faq details[open] summary::after { content: "+"; transform: rotate(45deg); } .ts-faq details p { margin: 0 0 22px; max-width: 760px; color: var(--texto-2); } /* La respuesta se despliega en lugar de aparecer de golpe (navegadores sin ::details-content la abren como siempre) */ @supports selector(::details-content) { .ts-faq details { interpolate-size: allow-keywords; } .ts-faq details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .3s var(--td-salida), opacity .2s, content-visibility .3s allow-discrete; } .ts-faq details[open]::details-content { height: auto; opacity: 1; } } /* Llamada final */ .ts-cta { margin: 64px 0 0; padding: 36px 40px; background: var(--marca); border: 0; border-radius: 0; } .ts-cta p { margin: 0; color: var(--navy); font-size: 18px; } .ts-cta__t { font: 800 clamp(26px, 3vw, 36px)/1.05 var(--f-titulo) !important; font-stretch: 85% !important; color: var(--navy) !important; margin-bottom: 10px !important; } .ts-cta a { color: var(--navy); font-weight: 600; } /* Prueba social (sello + clientes) */ .ts-confianza { margin: 64px 0 0; padding: 32px; gap: 40px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 0; } .ts-confianza__t { font: 500 13px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); } .ts-confianza__sello p { color: var(--gris); } .ts-confianza li { background: var(--blanco); border: 1px solid var(--linea); border-radius: 0; } .ts-confianza li img { opacity: .8; } /* Imágenes */ .ts-fig img, .ts-infografia img { border-radius: 0; } .ts-infografia figcaption { font: 400 13px var(--f-mono); color: var(--gris); } /* Formularios (Contact Form 7, búsqueda) */ .wpcf7 label { display: block; font-weight: 600; color: var(--texto); } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select, .search-form input[type="search"] { width: 100%; min-height: 48px; margin-top: 6px; padding: 12px 14px; border: 1.5px solid #9fb0bc; border-radius: 0; background: var(--blanco); font: 400 16px var(--f-texto); color: var(--texto); } .wpcf7 input:focus, .wpcf7 textarea:focus, .search-form input:focus { border-color: var(--navy); outline: 3px solid var(--marca); outline-offset: 0; } .wpcf7 input[type="submit"], .search-form button, .search-form input[type="submit"] { min-height: 48px; padding: 12px 26px; border: 0; border-radius: 0; background: var(--marca); color: var(--navy); font: 600 16px var(--f-texto); cursor: pointer; transition: background .15s, transform .16s var(--td-salida); } .wpcf7 input[type="submit"]:hover { background: #7cc7ef; } .search-form { display: flex; gap: 8px; max-width: 560px; margin: 24px 0; } .search-form label { flex: 1; } .search-form input[type="search"] { margin-top: 0; } /* ---------- 6. Portada (secciones td-*) ---------- */ .td { --td-pad: 104px; } .td-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); } .td-sec { padding: var(--td-pad) 0; } .td-sec--blanca { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .td-sec--oscura { background: var(--navy); color: var(--blanco); } .td-antetitulo { margin: 0 0 18px; font: 400 14px/1.4 var(--f-mono); color: var(--enlace); text-transform: uppercase; letter-spacing: .08em; } .td h2, .td-h2 { margin: 0; font-family: var(--f-titulo); font-stretch: 80%; font-weight: 800; font-size: clamp(36px, 4.5vw, 60px); line-height: 1; letter-spacing: -.01em; color: inherit; } .td-sec--oscura h2 { color: var(--blanco); } .td-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; } .td-cab > div { max-width: 760px; } .td-intro { margin: 20px 0 0; max-width: 720px; font-size: 19px; color: var(--texto-2); } .td-sec--oscura .td-intro { color: var(--gris-osc); } .td-mas { font-weight: 600; color: var(--enlace); } .td p { margin-top: 0; } /* Hero */ .td-hero { padding: 88px 0 96px; } .td-hero .td-in { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; } .td-hero__texto { flex: 1 1 520px; min-width: 0; } .td-hero h1 { margin: 0; font-stretch: 80%; font-weight: 800; font-size: clamp(40px, 5.2vw, 72px); line-height: .98; letter-spacing: -.02em; } .td-hero .ts-lead { margin: 28px 0 0; max-width: 580px; font-size: 20px; } .td-hero .ts-btns { margin: 40px 0 0; } .td-hero .ts-btn { padding: 16px 26px; } .td-hero .ts-btn:not(.ts-btn--sec) { background: var(--marca); border-color: var(--marca); color: var(--navy) !important; } .td-hero .ts-btn:not(.ts-btn--sec):hover { background: #7cc7ef; border-color: #7cc7ef; } /* Hero oscuro (fondo de new): retícula técnica y brillo azul; texto a la izquierda y slider a la derecha */ .td-hero--oscuro { position: relative; overflow: hidden; padding: 88px 0 176px; background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .26), transparent 62%), radial-gradient(700px 400px at 8% 110%, rgba(27, 106, 150, .35), transparent 60%), linear-gradient(180deg, #1b3242 0%, #15293a 100%); color: var(--blanco); } .td-hero--oscuro::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); pointer-events: none; } .td-hero--oscuro .td-in { position: relative; align-items: center; gap: 56px; } .td-hero--oscuro .td-hero__texto { flex: 1 1 500px; } .td-hero--oscuro .td-antetitulo { color: var(--marca); } .td-hero--oscuro h1 { color: var(--blanco); font-size: clamp(38px, 4.6vw, 64px); } .td-hero--oscuro .ts-lead { color: #c9d6e0; } .td-hero--oscuro .ts-lead strong { color: var(--blanco); } .td-hero--oscuro .ts-btn--sec { color: var(--blanco) !important; border-color: rgba(255, 255, 255, .7); } .td-hero--oscuro .ts-btn--sec:hover { background: var(--blanco); border-color: var(--blanco); color: var(--navy) !important; } .td-hero__sello { display: flex; align-items: center; gap: 14px; margin: 32px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 560px; font: 400 12px/1.45 var(--f-mono); color: var(--gris-osc); } .td-hero__sello img { width: 138px; height: auto; display: block; } /* Slider de soluciones */ .td-slider { flex: 1 1 460px; min-width: 0; max-width: 580px; margin-left: auto; } .td-slider__pistas { position: relative; aspect-ratio: 5 / 4.2; overflow: hidden; background: var(--navy-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); } .td-slider__pistas::after { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--marca); z-index: 3; } .td-slide { position: absolute; inset: 0; display: block; color: var(--blanco); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; } .td-slide.es-activa { opacity: 1; visibility: visible; transition: opacity .8s ease; z-index: 1; } .td-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; } .td-slide.es-activa img { transform: scale(1); } .td-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 27, 36, .1) 25%, rgba(15, 27, 36, .92) 100%); } .td-slide__txt { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 30px; display: flex; flex-direction: column; gap: 8px; } .td-slide__txt small { align-self: flex-start; padding: 4px 9px; background: var(--marca); color: var(--navy); font: 500 12px var(--f-mono); letter-spacing: .04em; } .td-slide__txt strong { font: 800 clamp(28px, 3vw, 38px)/1.02 var(--f-titulo); font-stretch: 82%; letter-spacing: -.01em; } .td-slide__txt > span { max-width: 440px; color: #d5e0e8; font-size: 16px; line-height: 1.45; } .td-slide__txt em { margin-top: 4px; font-style: normal; font-weight: 600; color: var(--marca); } .td-slide:hover .td-slide__txt em { text-decoration: underline; text-underline-offset: .2em; } .td-slide.es-activa .td-slide__txt > * { animation: td-sube .7s var(--td-salida) both; } .td-slide.es-activa .td-slide__txt > :nth-child(2) { animation-delay: .08s; } .td-slide.es-activa .td-slide__txt > :nth-child(3) { animation-delay: .16s; } .td-slide.es-activa .td-slide__txt > :nth-child(4) { animation-delay: .24s; } @keyframes td-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Navegación: barras de progreso con el nombre de cada solución */ .td-slider__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .td-slider__nav button { position: relative; min-height: 44px; padding: 14px 0 0; border: 0; background: none; color: var(--gris-osc); font: 500 12.5px var(--f-mono); text-align: left; cursor: pointer; } .td-slider__nav button::before, .td-slider__nav button::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; } .td-slider__nav button::before { right: 0; background: rgba(255, 255, 255, .16); } .td-slider__nav button::after { width: 100%; background: var(--marca); transform: scaleX(0); transform-origin: left; } .td-slider__nav button[aria-current="true"] { color: var(--blanco); } .td-slider__nav button[aria-current="true"]::after { animation: td-progreso var(--td-intervalo, 7s) linear forwards; } .td-slider.esta-pausado .td-slider__nav button[aria-current="true"]::after { animation-play-state: paused; } .td-slider__nav button:hover { color: var(--blanco); } @keyframes td-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 900px) { .td-slider { max-width: none; margin: 0; flex-basis: 100%; } .td-slide__txt { left: 20px; right: 20px; bottom: 20px; } .td-slide__txt > span { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .td-slide img { transform: none !important; } .td-slider__nav button[aria-current="true"]::after { animation: none; transform: none; } } /* Tres caminos montados sobre el borde del hero */ .td-caminos.td-caminos--flotantes { position: relative; z-index: 2; margin-top: -112px; background: none; border: 0; } .td-caminos.td-caminos--flotantes .td-in { gap: 16px; padding: 0 var(--gutter); } .td-caminos.td-caminos--flotantes a { background: var(--blanco); border: 0; border-top: 3px solid var(--marca); box-shadow: 0 22px 48px rgba(15, 27, 36, .16); } .td-caminos.td-caminos--flotantes a:last-child { border-right: 0; } .td-caminos.td-caminos--flotantes a:hover { background: var(--blanco); transform: translateY(-4px); box-shadow: 0 28px 56px rgba(15, 27, 36, .2); } .td-caminos.td-caminos--flotantes a { transition: transform .2s, box-shadow .2s; } .td-caminos.td-caminos--flotantes + .td-sec { padding-top: 88px; } @media (max-width: 760px) { .td-hero.td-hero--oscuro { padding: 64px 0 140px; } .td-caminos.td-caminos--flotantes { margin-top: -96px; } .td-caminos.td-caminos--flotantes .td-in { gap: 12px; } .td-caminos.td-caminos--flotantes a { border-bottom: 0; } } /* Tres caminos */ .td-caminos { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); } .td-caminos .td-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding: 0; } .td-caminos a { display: flex; flex-direction: column; gap: 10px; padding: 40px var(--gutter); color: var(--texto); text-decoration: none; border-right: 1px solid var(--linea); transition: background .15s; } .td-caminos a:last-child { border-right: 0; } .td-caminos a:hover { background: var(--fondo); } .td-caminos small { font: 400 13px var(--f-mono); color: var(--enlace); } .td-caminos h3, .td-caminos strong { margin: 0; font: 700 26px/1.1 var(--f-titulo); } .td-caminos p { margin: 0; color: var(--texto-2); } .td-caminos em { margin-top: 8px; font-style: normal; font-weight: 600; color: var(--enlace); } /* Módulos */ .td-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .td-modulos a { display: flex; flex-direction: column; gap: 18px; min-height: 220px; padding: 24px; background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: border-color .15s, box-shadow .15s; } .td-modulos a:hover { border-color: var(--navy); box-shadow: 0 10px 28px rgba(15, 27, 36, .1); } .td-modulos img { width: 72px; height: 72px; object-fit: contain; object-position: left center; } .td-modulos strong { display: block; font: 800 26px/1 var(--f-titulo); } .td-modulos span { flex-grow: 1; color: var(--texto-2); font-size: 16px; } .td-modulos em { font-style: normal; font-weight: 600; font-size: 15px; color: var(--enlace); } /* Servicios (fondo oscuro) */ .td-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea-osc); border: 1px solid var(--linea-osc); } .td-servicios a { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; background: var(--navy); color: var(--blanco); text-decoration: none; transition: background .15s; } .td-servicios a::before { content: ""; width: 28px; height: 3px; background: var(--marca); } .td-servicios a:hover { background: var(--navy-2); } .td-servicios strong { font: 700 22px/1.2 var(--f-titulo); } .td-servicios span { color: var(--gris-osc); font-size: 16px; } /* Sectores */ /* Mosaico compacto: 6 columnas y 2 filas; Corte láser y Fabricación ocupan dos columnas */ .td-sectores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 10px; } .td-sector { position: relative; display: block; overflow: hidden; background: var(--navy); color: var(--blanco); text-decoration: none; isolation: isolate; } .td-sector--grande { grid-column: span 2; } .td-sector img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .td-sector::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 27, 36, 0) 35%, rgba(15, 27, 36, .85) 100%); } .td-sector::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .td-sector:hover img, .td-sector:focus-visible img { transform: scale(1.05); } .td-sector:hover::after, .td-sector:focus-visible::after { transform: scaleX(1); } .td-sector__txt { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; } .td-sector__txt strong { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 18px/1.15 var(--f-titulo); } .td-sector__txt strong::after { content: "→"; font-weight: 400; color: var(--marca); transition: transform .2s; } .td-sector:hover .td-sector__txt strong::after { transform: translateX(3px); } .td-sector__txt small { color: #d5e0e8; font-size: 13.5px; line-height: 1.35; } .td-sector:not(.td-sector--grande) .td-sector__txt small { display: none; } @media (max-width: 1100px) { .td-sectores { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 180px; } } @media (max-width: 700px) { .td-sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; } .td-sector__txt { left: 12px; right: 12px; bottom: 10px; } .td-sector__txt strong { font-size: 16px; } .td-sector__txt small { display: none; } } /* Normativa */ .td-normativa { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .td-normativa a { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--fondo); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: border-color .15s; } .td-normativa a:hover { border-color: var(--navy); } .td-normativa small { align-self: flex-start; padding: 4px 8px; background: var(--linea); font: 400 12px var(--f-mono); color: var(--texto); } .td-normativa a.es-urgente small { background: var(--marca); } .td-normativa strong { font: 700 22px/1.15 var(--f-titulo); } .td-normativa span { color: var(--texto-2); font-size: 15px; } /* Por qué Tandem */ .td-porque .td-in { display: flex; flex-wrap: wrap; gap: 56px; } .td-porque__cab { flex: 1 1 360px; display: flex; flex-direction: column; gap: 28px; } .td-porque__cab img { width: 260px; height: auto; padding: 16px; background: var(--blanco); border: 1px solid var(--linea); } .td-porque ul { flex: 2 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px 40px; list-style: none; margin: 0; padding: 0; } .td-porque li { border-top: 3px solid var(--marca); padding-top: 16px; } .td-porque li strong { display: block; margin-bottom: 8px; font: 700 22px/1.2 var(--f-titulo); } .td-porque li p { margin: 0; color: var(--texto-2); } /* Clientes */ .td-clientes { padding: 56px 0; } .td-clientes .ts-confianza { margin: 0; padding: 0; border: 0; background: transparent; } .td-clientes .ts-confianza__sello { display: none; } /* el sello ya está en «Por qué Tandem» */ /* Llamada final de la portada */ .td-cta { background: var(--marca); } .td-cta .td-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding-top: 88px; padding-bottom: 88px; } .td-cta h2 { max-width: 720px; color: var(--navy); font-size: clamp(36px, 5vw, 68px); line-height: .98; } .td-cta p { margin: 16px 0 0; font-size: 19px; color: var(--navy); } .td-cta__acciones { display: flex; flex-direction: column; gap: 12px; } .td-cta__tel { display: block; padding: 18px 28px; background: var(--navy); color: var(--blanco) !important; font: 700 24px var(--f-titulo); text-align: center; text-decoration: none; } .td-cta__tel:hover { background: #23343f; } .td-cta .ts-btn--sec { color: var(--navy) !important; border-color: var(--navy); } /* Las secciones con FAQ y pasos dentro de la portada */ .td .ts-faq { max-width: 960px; } .td .ts-pasos { margin: 0; } @media (max-width: 900px) { .td-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .td { --td-pad: 64px; } .td-servicios { grid-template-columns: minmax(0, 1fr); } .td-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .td-modulos a { min-height: 0; padding: 18px 16px; gap: 12px; } .td-modulos img { width: 52px; height: 52px; } .td-modulos strong { font-size: 21px; } .td-modulos span { font-size: 14.5px; line-height: 1.4; } .td-modulos em { display: none; } .td-hero { padding: 48px 0 64px; } .td-hero .td-in { gap: 40px; } .td-caminos a { border-right: 0; border-bottom: 1px solid var(--linea); } .td-caminos a:last-child { border-bottom: 0; } .td-cta .td-in { padding-top: 56px; padding-bottom: 56px; } } /* ---------- 6b. Páginas internas con diseño (módulos, servicios…) ---------- */ /* Iconos de trazo pintados con máscara: */ .td-ico { display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } [data-ico="operario"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3Cpath d='M5 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2'/%3E%3C/svg%3E"); } [data-ico="erp"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); } [data-ico="papel"], [data-ico="documento"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/svg%3E"); } [data-ico="teclear"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='1'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E"); } [data-ico="reloj"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); } [data-ico="pantalla"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13'/%3E%3Cpath d='M7 21h10M12 17v4M8 10.5l2.5 2.5 5-5'/%3E%3C/svg%3E"); } [data-ico="sincro"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.9-3M4 4v4h4M4 13a8 8 0 0 0 14.9 3M20 20v-4h-4'/%3E%3C/svg%3E"); } [data-ico="grafica"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M11 20V5M17 20v-7M2 20h20'/%3E%3C/svg%3E"); } [data-ico="check"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); } [data-ico="presencia"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M8 18c1-2 2.4-3 4-3s3 1 4 3'/%3E%3C/svg%3E"); } [data-ico="calidad"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6zM9 12l2 2 4-4'/%3E%3C/svg%3E"); } [data-ico="orden"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3H9zM7 4.5H5V21h14V4.5h-2M8 11h8M8 15h5'/%3E%3C/svg%3E"); } [data-ico="aviso"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v4M12 17.5h.01'/%3E%3C/svg%3E"); } [data-ico="llave"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); } [data-ico="carro"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h11L21 8H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E"); } [data-ico="maquina"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12'/%3E%3Cpath d='M7 8V4h5v4M7 13h5M7 16h3M16 12v5'/%3E%3C/svg%3E"); } [data-ico="fabrica"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l5 3v-3l5 3V7l8 4v10zM7 17h2M12 17h2M17 17h2'/%3E%3C/svg%3E"); } [data-ico="almacen"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5v11H3zM7 20v-7h10v7M7 16h10'/%3E%3C/svg%3E"); } [data-ico="escaner"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M8 8v8M11 8v8M14 8v8M17 8v8'/%3E%3C/svg%3E"); } [data-ico="camion"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); } [data-ico="bascula"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M5 20l2-8h10l2 8M9 12V8h6v4M12 8V5'/%3E%3C/svg%3E"); } [data-ico="firma"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17c3-1 4-8 6-8s1 7 3 7 2-4 4-4 2 3 5 3M3 21h18'/%3E%3C/svg%3E"); } [data-ico="movil"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); } [data-ico="calendario"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M7 14h3M14 14h3M7 17h3'/%3E%3C/svg%3E"); } [data-ico="piezas"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9zM12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E"); } [data-ico="laser"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v5l-3 3-3-3zM12 11v5M3 20h18M8 18l-2-1M16 18l2-1M12 18v1'/%3E%3C/svg%3E"); } [data-ico="euro"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6a7 7 0 1 0 0 12M4 10h9M4 14h9'/%3E%3C/svg%3E"); } [data-ico="ubicacion"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); } [data-ico="nube"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.5-8A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9z'/%3E%3C/svg%3E"); } [data-ico="grupo"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M16 5a3 3 0 0 1 0 6M18 14a5 5 0 0 1 3 5v1'/%3E%3C/svg%3E"); } [data-ico="etiqueta"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V3h9l9 9-9 9z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E"); } [data-ico="ruta"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 18H15a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h6.5'/%3E%3C/svg%3E"); } [data-ico="caja"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); } [data-ico="pedido"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); } [data-ico="lote"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8'/%3E%3Crect x='13' y='3' width='8' height='8'/%3E%3Crect x='3' y='13' width='8' height='8'/%3E%3Crect x='13' y='13' width='8' height='8'/%3E%3C/svg%3E"); } [data-ico="foto"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h4l2-3h6l2 3h4v13H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); } [data-ico="ley"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 7h14M8 21h8M5 7l-3 7a3 3 0 0 0 6 0zM19 7l-3 7a3 3 0 0 0 6 0z'/%3E%3C/svg%3E"); } [data-ico="planificar"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18M3 12h18M3 19h18'/%3E%3Crect x='5' y='3.5' width='6' height='3' fill='black'/%3E%3Crect x='10' y='10.5' width='8' height='3' fill='black'/%3E%3Crect x='7' y='17.5' width='5' height='3' fill='black'/%3E%3C/svg%3E"); } [data-ico="wifi"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5.5 12.5a10 10 0 0 1 13 0M9 16a5 5 0 0 1 6 0M12 19.5h.01'/%3E%3C/svg%3E"); } [data-ico="cliente"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V8l9-5 9 5v13M9 21v-6h6v6'/%3E%3C/svg%3E"); } /* Base de las páginas con diseño */ .td-pagina h2 { margin-bottom: 22px; } .td-pagina .td-cab h2 { margin-bottom: 0; } .td-pagina .td-sec p { color: var(--texto-2); } .td-pagina .td-sec--oscura p { color: var(--gris-osc); } .td-h3 { font-size: clamp(24px, 2.4vw, 30px) !important; } .td-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; } .td-dos--centro { align-items: center; } /* Cabecera de página: mismo fondo que el hero de la portada */ .td-cab-pag { position: relative; overflow: hidden; padding: 40px 0 88px; background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .26), transparent 62%), linear-gradient(180deg, #1b3242 0%, #15293a 100%); color: var(--blanco); } .td-cab-pag::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); pointer-events: none; } .td-cab-pag .td-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; } .td-cab-pag__texto { flex: 1 1 520px; min-width: 0; } .td-cab-pag .migas { margin-bottom: 36px; color: var(--gris-osc); } .td-cab-pag .migas a { color: var(--marca); } .td-cab-pag .td-antetitulo { display: flex; align-items: center; gap: 12px; color: var(--marca); } .td-cab-pag__logo { width: 40px; height: 40px; padding: 4px; background: var(--blanco); object-fit: contain; } .td .td-vigencia { margin: 16px 0 0; font: 400 14px/1.4 var(--f-mono); color: var(--texto-2); letter-spacing: .04em; } .td-cab-pag .td-vigencia { margin-top: 16px; color: var(--gris-osc); } .td-cab-pag h1 { margin: 0; color: var(--blanco); font-stretch: 80%; font-weight: 800; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; } .td-cab-pag .ts-lead { margin: 24px 0 0; color: #c9d6e0; } .td-cab-pag .ts-lead strong { color: var(--blanco); } .td-cab-pag .ts-btns { margin: 32px 0 0; } .td-cab-pag .ts-btn:not(.ts-btn--sec) { background: var(--marca); border-color: var(--marca); color: var(--navy) !important; } .td-cab-pag .ts-btn--sec { color: var(--blanco) !important; border-color: rgba(255, 255, 255, .7); } .td-cab-pag .ts-btn--sec:hover { background: var(--blanco); color: var(--navy) !important; } /* Infografía de flujo (cabecera) */ .td-flujo { flex: 1 1 400px; min-width: 0; max-width: 470px; margin-left: auto; padding: 26px; background: rgba(9, 18, 25, .55); border: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; align-items: stretch; } .td-flujo__paso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--navy-2); border: 1px solid var(--linea-osc); } .td-flujo__paso .td-ico { color: var(--marca); width: 26px; height: 26px; } .td-flujo__paso b { font: 700 18px var(--f-titulo); } .td-flujo__paso small { width: 100%; margin-left: 38px; margin-top: -8px; font: 400 12px var(--f-mono); color: var(--gris-osc); } .td-flujo__paso--marca { background: var(--marca); border-color: var(--marca); color: var(--navy); } .td-flujo__paso--marca b { font-size: 22px; } .td-flujo__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; } .td-flujo__chips span { padding: 4px 8px; background: var(--navy); color: var(--blanco); font: 500 11.5px var(--f-mono); } .td-flujo__paso--erp { background: var(--blanco); border-color: var(--blanco); color: var(--navy); } .td-flujo__paso--erp .td-ico { color: var(--enlace); } .td-flujo__paso--erp small { color: var(--gris); } .td-flujo__conector { --td-recorrido: 26px; position: relative; height: 34px; margin-left: 28px; border-left: 2px dashed rgba(79, 179, 232, .55); } .td-flujo__conector::after { content: ""; position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 10px var(--marca); animation: td-baja 1.6s linear infinite; } .td-flujo__conector em { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font: 500 11.5px var(--f-mono); font-style: normal; color: var(--marca); } .td-flujo__conector--abre { --td-recorrido: 18px; height: 26px; } @keyframes td-baja { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(var(--td-recorrido)); opacity: 0; } } .td-flujo__destinos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .td-flujo__destinos span { padding: 10px 6px; text-align: center; border: 1px solid rgba(79, 179, 232, .45); color: var(--blanco); font: 500 12.5px var(--f-mono); } /* Visuales de cabecera (columna derecha). Un tipo distinto según la página: .td-ficha, .td-disp (pantalla), .td-lineah (flujo horizontal), .td-fases, .td-fecha, .td-incluye */ .td-cab-pag__texto:only-child { max-width: 860px; } .td-vis { flex: 1 1 380px; min-width: 0; max-width: 450px; margin-left: auto; } .td-vis__tit { margin: 0 0 16px; font: 700 13.5px/1.4 var(--f-titulo); font-stretch: 90%; letter-spacing: .1em; text-transform: uppercase; color: var(--marca); } .td-vis__pie { margin: 18px 0 0; font: 400 13px/1.5 var(--f-texto); color: var(--gris-osc); } /* Vídeo de cabecera: animación sin sonido ni controles, en bucle. Sin marco: los bordes se difuminan y el fondo oscuro del vídeo se funde (screen) con el azul de la cabecera. */ .td-vis--video { flex: 1 1 520px; max-width: 680px; } .td-vis__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%); mask-composite: intersect; } @media (min-width: 1101px) { /* Más grande sin alargar la cabecera: crece hacia los lados, por detrás del final del texto y hasta el borde */ .td-cab-pag__texto { position: relative; z-index: 1; } .td-vis--video { flex: 1.25 1 520px; max-width: 760px; margin-left: -120px; margin-right: clamp(-160px, calc((var(--ancho) - 100vw) / 2 - var(--gutter)), calc(-1 * var(--gutter))); } } /* Ficha técnica: datos clave en filas, sin cajas */ .td-ficha dl { margin: 0; border-top: 2px solid var(--marca); } .td-ficha dl > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } .td-ficha dt { font: 400 13px/1.5 var(--f-texto); color: var(--gris-osc); } .td-ficha dd { margin: 0; font: 500 15.5px/1.45 var(--f-texto); color: var(--blanco); } /* Pantalla: dispositivo del producto (--pda, --movil, --tablet, --web) con una vista simplificada */ .td-disp { display: flex; flex-direction: column; align-items: center; } .td-disp__marco { width: 100%; background: #0b151d; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); } .td-disp__barra { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--navy-2); border-bottom: 1px solid var(--linea-osc); font: 500 12px var(--f-texto); color: var(--gris-osc); } .td-disp__barra b { margin-left: auto; font-weight: 500; color: var(--marca); } .td-disp__pant { padding: 16px; } .td-disp__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font: 700 17px/1.2 var(--f-titulo); color: var(--blanco); } .td-disp__cab small { font: 400 12px var(--f-texto); color: var(--gris-osc); } .td-disp__filas { margin: 0; padding: 0; list-style: none; } .td-disp__filas li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea-osc); font: 400 13px/1.3 var(--f-texto); color: #c9d6e0; } .td-disp__filas li b { min-width: 0; margin-left: auto; font-weight: 500; color: var(--blanco); text-align: right; overflow-wrap: anywhere; } .td-disp__filas li.ok::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); } .td-disp__filas li:not(.ok)::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gris-osc); box-sizing: border-box; } .td-disp__boton { margin: 14px 0 0; padding: 10px; background: var(--marca); color: var(--navy); text-align: center; font: 700 14px var(--f-titulo); } .td-disp--web .td-disp__barra::before { content: ""; width: 34px; height: 8px; flex: 0 0 auto; background: radial-gradient(circle, #4a5a66 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; } .td-disp--tablet .td-disp__marco { padding: 12px; border-radius: 18px; background: #1d2c37; } .td-disp--tablet .td-disp__barra, .td-disp--tablet .td-disp__pant { background: #0b151d; } .td-disp--movil .td-disp__marco, .td-disp--pda .td-disp__marco { max-width: 270px; padding: 10px; border-radius: 30px; background: #1d2c37; } .td-disp--movil .td-disp__barra, .td-disp--pda .td-disp__barra { border-radius: 20px 20px 0 0; justify-content: center; } .td-disp--movil .td-disp__pant, .td-disp--pda .td-disp__pant { background: #0b151d; border-radius: 0 0 20px 20px; } .td-disp--movil .td-disp__marco { max-width: 256px; padding: 12px 10px 18px; border-radius: 34px; } .td-disp--movil .td-disp__barra { flex-direction: column; gap: 10px; padding-top: 10px; border-radius: 24px 24px 0 0; } .td-disp--movil .td-disp__barra::before { content: ""; width: 56px; height: 6px; border-radius: 3px; background: #2a3a46; } .td-disp--movil .td-disp__pant { padding-bottom: 26px; border-radius: 0 0 24px 24px; } .td-disp--pda .td-disp__marco { max-width: 290px; border-radius: 16px; padding: 10px 10px 34px; border-top: 6px solid #4a5a66; position: relative; } .td-disp--pda .td-disp__marco::after { content: ""; position: absolute; left: 50%; bottom: 11px; width: 56px; height: 12px; margin-left: -28px; border-radius: 6px; background: var(--marca); opacity: .8; } .td-disp--pda .td-disp__barra { border-radius: 8px 8px 0 0; } .td-disp--pda .td-disp__pant { border-radius: 0 0 8px 8px; } .td-disp .td-vis__pie { text-align: center; } /* Flujo horizontal: tres nodos en línea, solo el central con color */ .td-lineah__nodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .td-lineah__nodo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; } .td-lineah__nodo + .td-lineah__nodo::before { content: ""; position: absolute; top: 21px; right: calc(50% + 34px); width: calc(100% - 68px); border-top: 2px dashed rgba(79, 179, 232, .55); } .td-lineah__marca { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); color: var(--blanco); } .td-lineah__marca .td-ico { width: 22px; height: 22px; } .td-lineah__nodo--prod .td-lineah__marca { width: auto; min-width: 44px; max-width: 100%; padding: 0 12px; background: var(--marca); border-color: var(--marca); color: var(--navy); font: 800 17px var(--f-titulo); } .td-lineah__nodo b { margin-top: 6px; font: 700 16px/1.2 var(--f-titulo); color: var(--blanco); } .td-lineah__nodo small { font: 400 12.5px/1.4 var(--f-texto); color: var(--gris-osc); } .td-lineah .td-vis__pie { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; color: var(--marca); font-weight: 500; } /* Fases numeradas */ .td-fases ol { margin: 0; padding: 0; list-style: none; counter-reset: fase; border-left: 1px solid rgba(79, 179, 232, .45); } .td-fases li { position: relative; counter-increment: fase; padding: 0 0 22px 56px; } .td-fases li:last-child { padding-bottom: 0; } .td-fases li::before { content: counter(fase, decimal-leading-zero); position: absolute; left: -18px; top: -4px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #15293a; border: 1px solid var(--marca); color: var(--marca); font: 700 14px var(--f-titulo); } .td-fases li:last-child::before { background: var(--marca); color: var(--navy); } .td-fases b { display: block; font: 700 18px/1.2 var(--f-titulo); color: var(--blanco); } .td-fases small { display: block; margin-top: 4px; font: 400 13px/1.45 var(--f-texto); color: var(--gris-osc); } /* Fecha clave: un dato grande y una línea de hitos */ .td-fecha__dato { margin: 0; font: 800 clamp(56px, 6vw, 84px)/.95 var(--f-titulo); font-stretch: 80%; letter-spacing: -.02em; color: var(--marca); } .td-fecha__que { margin: 10px 0 0; font: 500 17px/1.4 var(--f-texto); color: var(--blanco); } .td-fecha__hitos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; } .td-fecha__hitos li { padding-top: 12px; border-top: 4px solid var(--linea-osc); font: 400 12.5px/1.4 var(--f-texto); color: var(--gris-osc); } .td-fecha__hitos li b { display: block; margin-bottom: 2px; font: 700 15px var(--f-titulo); color: var(--blanco); } .td-fecha__hitos li.hecho { border-top-color: var(--marca); } .td-fecha__hitos li.ahora { border-top-color: var(--marca); } .td-fecha__hitos li.ahora b { color: var(--marca); } /* Qué incluye: lista de comprobación */ .td-incluye { --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); } .td-incluye ul { margin: 0; padding: 22px 24px; list-style: none; background: rgba(9, 18, 25, .45); border: 1px solid rgba(255, 255, 255, .1); } .td-incluye li { display: flex; gap: 14px; padding: 9px 0; font: 500 16px/1.4 var(--f-texto); color: var(--blanco); } .td-incluye li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; background: var(--marca); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; } .td-incluye li small { display: block; font-weight: 400; font-size: 13px; color: var(--gris-osc); } /* Etiquetas */ .td-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; } .td-chips li { padding: 7px 12px; border: 1.5px solid var(--navy); font: 500 13px var(--f-mono); color: var(--texto); } /* Antes / después */ .td-antes { display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 20px 44px rgba(15, 27, 36, .12); } .td-antes__col { padding: 28px 24px; } .td-antes__col--sin { background: var(--blanco); border: 1px solid var(--linea); border-right: 0; } .td-antes__col--con { position: relative; background: var(--navy); color: var(--blanco); } .td-antes__col--con::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--marca); } .td-antes__t { margin: 0 0 18px !important; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; } .td-antes__col--sin .td-antes__t { color: var(--gris) !important; } .td-antes__col--con .td-antes__t { color: var(--marca) !important; } .td-antes ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .td-antes li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; } .td-antes__col--sin li { color: var(--gris); } .td-antes__col--sin .td-ico { color: #9fb0bc; } .td-antes__col--con li { color: var(--blanco); } .td-antes__col--con .td-ico { color: var(--marca); } /* Ventajas (fondo oscuro) */ .td-ventajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; background: var(--linea-osc); border: 1px solid var(--linea-osc); } .td-ventajas li { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; background: var(--navy); color: var(--gris-osc); font-size: 15.5px; line-height: 1.5; } .td-ventajas .td-ico { width: 30px; height: 30px; margin-bottom: 6px; color: var(--marca); } .td-ventajas strong { display: block; color: var(--blanco); font: 700 20px/1.2 var(--f-titulo); } .td-ventajas li:last-child { background: var(--marca); color: var(--navy); } /* El último elemento ocupa lo que quede de su fila, para que nunca haya huecos */ .td-ventajas li:last-child:nth-child(4n+1) { grid-column: span 4; } .td-ventajas li:last-child:nth-child(4n+2) { grid-column: span 3; } .td-ventajas li:last-child:nth-child(4n+3) { grid-column: span 2; } .td-func > :last-child:nth-child(3n+1) { grid-column: span 3; } .td-func > :last-child:nth-child(3n+2) { grid-column: span 2; } .td-ventajas li:last-child strong, .td-ventajas li:last-child .td-ico { color: var(--navy); } /* Funcionalidades */ .td-func { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .td-func > div { padding: 26px; background: var(--blanco); border: 1px solid var(--linea); transition: border-color .15s, box-shadow .15s; } .td-func > div:hover { border-color: var(--navy); box-shadow: 0 10px 28px rgba(15, 27, 36, .08); } .td-func .td-ico { position: relative; width: 46px; height: 46px; color: var(--navy); background: var(--marca-suave); -webkit-mask: none; mask: none; } .td-func .td-ico::after { content: ""; position: absolute; inset: 11px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .td-func h3 { margin: 18px 0 8px; font: 700 20px/1.2 var(--f-titulo); } .td-func p { margin: 0; font-size: 15.5px; } .td-func .td-func__destacada { background: var(--navy); border-color: var(--navy); color: var(--blanco); } .td-func__destacada .td-ico { background: var(--marca); } .td-func__destacada h3 { color: var(--blanco); } .td-pagina .td-func__destacada p { color: var(--gris-osc); } /* Cita destacada */ .td-cita { position: relative; margin: 0; padding: 36px 36px 36px 96px; background: var(--navy); color: var(--blanco); } .td-cita::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--marca); } .td-cita .td-ico { position: absolute; left: 32px; top: 38px; width: 40px; height: 40px; color: var(--marca); } .td-pagina .td-cita p { margin: 0; color: var(--blanco); font: 500 19px/1.5 var(--f-texto); } /* Pasos en línea temporal */ .ts-pasos.td-linea { position: relative; gap: 24px; } .ts-pasos.td-linea li { border-top: 0; padding-top: 0; } .ts-pasos.td-linea li::before { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; background: var(--navy); color: var(--blanco); font-size: 22px; } .ts-pasos.td-linea li:last-child::before { background: var(--marca); color: var(--navy); } .ts-pasos.td-linea::after { content: ""; position: absolute; top: 28px; left: 28px; right: 10%; border-top: 2px dashed #9fb0bc; z-index: 0; } /* Preguntas + relacionadas */ .td-faq-rel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; } .td-rel { display: flex; flex-direction: column; gap: 12px; } .td-rel a { display: flex; gap: 16px; align-items: center; padding: 18px; background: var(--fondo); border: 1px solid var(--linea); color: var(--texto-2); text-decoration: none; font-size: 15px; line-height: 1.45; transition: border-color .15s; } .td-rel a:hover { border-color: var(--navy); } .td-rel img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; } .td-rel strong { display: block; color: var(--texto); font: 700 19px var(--f-titulo); } /* Tablas (plazos de normativa, comparativas): se desplazan dentro de su caja en móvil */.td-pagina table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; background: var(--blanco); font-size: 15.5px; }.td-pagina th, .td-pagina td { padding: 14px 16px; border: 1px solid var(--linea); text-align: left; vertical-align: top; color: var(--texto-2); }.td-pagina th { background: var(--navy); color: var(--blanco); font-weight: 600; }.td-pagina tbody tr:nth-child(even) td { background: var(--fondo); }@media (max-width: 760px) { .td-pagina table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Capturas dentro de tarjetas y columnas; la línea de pasos se oculta si los pasos ocupan más de una fila */ .td-pagina .ts-fig { margin: 0 0 18px; } .td-pagina .ts-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); } .td-func .ts-fig { margin: 16px 0 0; } .ts-pasos.td-linea:has(> li:nth-child(6))::after { display: none; } .td-func > a > img:first-child, .td-func > div > img:first-child { display: block; width: 46px; height: 46px; object-fit: contain; object-position: left center; } /* Cierre: prueba social y llamada */ .td-sec--final { padding-top: 0; } .td-sec--final .ts-confianza { margin-top: 0; } @media (max-width: 960px) { .td-dos, .td-faq-rel { grid-template-columns: minmax(0, 1fr); gap: 40px; } .td-func { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-func > :last-child:nth-child(n) { grid-column: auto; } .td-func > :last-child:nth-child(odd) { grid-column: 1 / -1; } .td-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-ventajas li:last-child:nth-child(n) { grid-column: auto; } .td-ventajas li:last-child:nth-child(odd) { grid-column: 1 / -1; } .td-flujo, .td-vis { max-width: none; margin: 0; } } @media (max-width: 600px) { .td-func { grid-template-columns: minmax(0, 1fr); } .td-ventajas { grid-template-columns: minmax(0, 1fr); } .td-ventajas li:last-child:nth-child(n) { grid-column: auto; } .td-antes { grid-template-columns: minmax(0, 1fr); } .td-antes__col--sin { border-right: 1px solid var(--linea); border-bottom: 0; } .ts-pasos.td-linea::after { display: none; } .td-cita { padding: 28px 22px 28px 76px; } .td-cita .td-ico { left: 22px; } .td-ficha dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .td-fecha__hitos { grid-auto-flow: row; } .td-lineah__nodos { grid-template-columns: minmax(0, 1fr); gap: 22px; } .td-lineah__nodo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; padding: 0; } .td-lineah__marca { grid-row: span 2; } .td-lineah__nodo b { margin-top: 0; align-self: end; } .td-lineah__nodo small { align-self: start; } .td-lineah__nodo + .td-lineah__nodo::before { top: -22px; left: 21px; right: auto; width: 0; height: 22px; border-top: 0; border-left: 2px dashed rgba(79, 179, 232, .55); } .td-lineah .td-vis__pie { text-align: left; } } @media (prefers-reduced-motion: reduce) { .td-flujo__conector::after { animation: none; top: 40%; } } /* ---------- 7. Portadas antiguas (tsh-*) con la tipografía nueva ---------- */ .tsh { --azul: var(--enlace); --navy: var(--navy); --texto: var(--texto); --gris: var(--texto-2); --suave: var(--fondo); --borde: var(--linea); } .tsh-in { max-width: var(--ancho); padding: 0 var(--gutter); } .tsh h1, .tsh h2, .tsh h3, .tsh strong { font-family: var(--f-titulo) !important; } .tsh h1 { font-stretch: 80%; font-weight: 800; letter-spacing: -.02em; } .tsh .tsh-eyebrow { font: 400 14px/1.4 var(--f-mono); color: var(--marca); letter-spacing: .08em; } .tsh-sec h2 { font-stretch: 80%; font-weight: 800; font-size: clamp(32px, 4vw, 52px); line-height: 1; } .tsh-c-hero { background: var(--navy); } .tsh-sol a, .tsh-mod a, .tsh-sect a, .tsh-norm a, .tsh-c-caminos a { border-radius: 0; } /* ---------- 8. Blog ---------- */ .listado { padding-top: 56px; padding-bottom: 88px; } .listado__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .tarjeta-entrada__enlace { display: flex; flex-direction: column; height: 100%; background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: border-color .15s; } .tarjeta-entrada__enlace:hover { border-color: var(--navy); } /* La proporción la fija el contenedor: una imagen rota o ausente no cambia la altura de la tarjeta */ .tarjeta-entrada__imagen { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fondo); } .tarjeta-entrada__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; } .tarjeta-entrada__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; } .tarjeta-entrada__cuerpo time { font: 400 12px var(--f-mono); color: var(--gris); } .tarjeta-entrada__titulo { font: 700 22px/1.2 var(--f-titulo); } .tarjeta-entrada__extracto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; color: var(--texto-2); font-size: 15.5px; } .pagination { margin-top: 48px; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--blanco); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; } .pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--blanco); } /* ---------- 9. Pie ---------- */ .pie { background: var(--navy); color: var(--gris-osc); font-size: 15px; } .pie__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-top: 72px; padding-bottom: 40px; } .pie__marca { display: flex; flex-direction: column; gap: 14px; } .pie__marca img { display: block; width: 170px; height: auto; } .pie__marca p { margin: 0; } .pie__marca .pie__sello { width: 190px; } .pie__titulo { margin: 0 0 14px; font: 500 12px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--blanco); } .pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pie a { color: var(--gris-osc); text-decoration: none; } .pie a:hover { color: var(--marca); } .pie__legal { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 40px; font-size: 13px; } .pie__legal::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--linea-osc); } .pie__legal .pie__lista { flex-direction: row; flex-wrap: wrap; gap: 20px; } .pie__legal a { text-decoration: underline; } @media (max-width: 600px) { :root { --gutter: 18px; } body { font-size: 16px; } .barra__in > span:first-child { display: none; } .cabecera-pagina { padding: 32px 0; } .articulo { padding: 40px 0 64px; } .ts-lead, .td-hero .ts-lead { font-size: 18px; } .ts-cta { padding: 28px 22px; } .ts-confianza { padding: 22px 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Antetítulos y rótulos de sección: Archivo en versalitas espaciadas ---------- */ .td-antetitulo, .td-cab-pag .td-antetitulo, .pie__titulo, .nav__lista > li > .sub-menu > .menu-item-has-children > a, .ts-confianza__t, .td-antes__t, .td-slide__txt small, .td-caminos small { font-family: var(--f-titulo); font-weight: 700; font-stretch: 90%; letter-spacing: .1em; text-transform: uppercase; } .td-antetitulo { font-size: 13.5px; } .td-caminos small { font-size: 12.5px; text-transform: none; letter-spacing: .02em; font-weight: 600; } .td-slide__txt small { font-size: 11.5px; } /* Etiquetas y chips con la letra del texto: algo más de peso para que no parezcan párrafo */ .td-chips li, .td-flujo__chips span, .td-flujo__destinos span, .td-flujo__conector em, .td-normativa small, .td-sector__num { font-weight: 500; letter-spacing: .01em; } .barra { letter-spacing: .01em; } /* ---------- Hover sobre fondos oscuros e imágenes ---------- La regla general a:hover oscurece el texto; en tarjetas con foto o fondo oscuro el texto debe seguir blanco. */ .td-slide:hover, .td-slide:focus-visible, .td-sector:hover, .td-sector:focus-visible, .td-servicios a:hover, .td-servicios a:focus-visible { color: var(--blanco); } .td-cita a, .td-sec--oscura p a, .td-antes__col--con a, .td-cab-pag .ts-lead a { color: var(--marca); } .td-cita a:hover, .td-sec--oscura p a:hover, .td-antes__col--con a:hover, .td-cab-pag .ts-lead a:hover { color: var(--blanco); } .td-pagina table { max-width: 100%; } /* Nombres de módulo (T-Plant, T-Stock…) sin cortar por el guion; los envuelve tandem_sin_cortar(). display: contents para no crear caja: dentro de un flex (resumen de FAQ, botones) el texto sigue siendo uno solo. */ .td-nobr { display: contents; white-space: nowrap; } /* Contact Form 7 sin sus estilos: el fieldset de campos ocultos no debe verse */ .wpcf7 .hidden-fields-container { margin: 0; padding: 0; border: 0; } /* ========================================================================= Paleta suavizada (2026-10-14): los bloques oscuros pasan de casi negro a azul acero, manteniendo contraste AA/AAA con el texto blanco; los hover aclaran en vez de oscurecer. ========================================================================= */ :root { --osc-1: #1f3a4f; /* barra superior, cabecera, pie (texto blanco 11:1) */ --osc-2: #26465e; /* bloques de contenido oscuros (texto blanco 9,6:1) */ --osc-3: #2f5572; /* tarjetas y hover sobre oscuro (texto blanco 7,6:1) */ --navy-2: var(--osc-3); --linea-osc: #43698a; --gris-osc: #d3dde5; } /* Barra, cabecera, menú móvil y pie */ .barra { background: #183042; } .cabecera { background: var(--osc-1); border-bottom-color: rgba(79, 179, 232, .45); box-shadow: 0 6px 18px rgba(15, 27, 36, .18); } @media (max-width: 1080px) { .nav { background: var(--osc-1); } } .pie { background: var(--osc-1); } /* Hero y cabeceras de página: un escalón más claro que la cabecera */ .td-hero--oscuro { background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .30), transparent 62%), radial-gradient(700px 400px at 8% 110%, rgba(79, 179, 232, .16), transparent 60%), linear-gradient(180deg, #31597a 0%, #2a4d69 100%); } .td-cab-pag { background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .30), transparent 62%), linear-gradient(180deg, #31597a 0%, #2a4d69 100%); } .td-flujo, .td-incluye ul { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } /* Bloques de contenido oscuros */ .td-sec--oscura, .td-servicios a, .td-ventajas li, .td-antes__col--con, .td-func .td-func__destacada, .td-cita, .entrada th, .td-pagina th, .td-cta__tel, .pagination .page-numbers.current, .tsh-c-hero { background: var(--osc-2); } .td-func .td-func__destacada, .pagination .page-numbers.current { border-color: var(--osc-2); } .td-servicios, .td-ventajas { background: var(--linea-osc); border-color: var(--linea-osc); } .td-flujo__chips span { background: var(--osc-1); } .ts-pasos.td-linea li::before { background: var(--osc-2); } .td-sector, .td-slider__pistas { background: var(--osc-2); } /* Degradados sobre fotos: mismo azul, sin negro */ .td-sector::before { background: linear-gradient(180deg, rgba(31, 58, 79, 0) 35%, rgba(31, 58, 79, .88) 100%); } .td-slide::before { background: linear-gradient(180deg, rgba(31, 58, 79, .08) 25%, rgba(31, 58, 79, .9) 100%); } /* Hover: aclarar o resaltar en azul, nunca oscurecer */ .boton:hover, .ts-btn:hover, .ts-btn:focus, .td-cta__tel:hover { background: var(--enlace); border-color: var(--enlace); } .ts-btn--sec:hover, .ts-btn--sec:focus, .boton--borde:hover { background: var(--marca-suave); border-color: var(--navy); color: var(--navy) !important; } .td-hero--oscuro .ts-btn--sec:hover, .td-cab-pag .ts-btn--sec:hover { background: var(--blanco); border-color: var(--blanco); color: var(--navy) !important; } .td-cta .ts-btn--sec:hover { background: rgba(255, 255, 255, .45); color: var(--navy) !important; } .td-servicios a:hover { background: var(--osc-3); } a.ts-card:hover, a.ts-card:focus, .td-func > div:hover, .td-modulos a:hover, .td-normativa a:hover, .td-rel a:hover, .tarjeta-entrada__enlace:hover, .td-sectores a:hover { border-color: var(--marca); box-shadow: 0 12px 28px rgba(79, 179, 232, .18); } .td-caminos.td-caminos--flotantes a:hover { box-shadow: 0 28px 56px rgba(31, 58, 79, .18); } /* Pantallas de dispositivo de las cabeceras: azul acero en lugar de casi negro */ .td-disp__marco, .td-disp--tablet .td-disp__barra, .td-disp--tablet .td-disp__pant, .td-disp--movil .td-disp__pant, .td-disp--pda .td-disp__pant { background: #1c3548; } .td-disp--tablet .td-disp__marco, .td-disp--movil .td-disp__marco, .td-disp--pda .td-disp__marco { background: #3a5a75; } .td-disp__marco { box-shadow: 0 30px 60px -20px rgba(15, 27, 36, .4); } .td-disp--movil .td-disp__barra::before { background: #5b7a94; } /* ========================================================================= Bloques claros en pastel (2026-10-14): los bloques de contenido que eran oscuros pasan a azul pastel con texto oscuro; hero y cabeceras de página, un escalón más claros. ========================================================================= */ :root { --pastel: #e8f3fa; --pastel-2: #d4e8f5; --pastel-borde: #bfdbed; } /* Hero y cabeceras de página más claros (texto blanco 6:1) */ .td-hero--oscuro { background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .32), transparent 62%), radial-gradient(700px 400px at 8% 110%, rgba(79, 179, 232, .18), transparent 60%), linear-gradient(180deg, #3b6788 0%, #335c7b 100%); } .td-cab-pag { background: radial-gradient(900px 480px at 82% -12%, rgba(79, 179, 232, .32), transparent 62%), linear-gradient(180deg, #3b6788 0%, #335c7b 100%); } /* Secciones de contenido «oscuras» → pastel */ .td-sec--oscura { background: var(--pastel); color: var(--texto); border-top: 1px solid var(--pastel-borde); border-bottom: 1px solid var(--pastel-borde); } .td-sec--oscura h2, .td-sec--oscura h3, .td-sec--oscura strong { color: var(--texto); } .td-sec--oscura .td-intro, .td-pagina .td-sec--oscura p { color: var(--texto-2); } .td-sec--oscura .td-antetitulo { color: var(--enlace); } .td-sec--oscura p a { color: var(--enlace); } .td-sec--oscura p a:hover { color: var(--texto); } /* Servicios (portada) */ .td-servicios { background: var(--pastel-borde); border-color: var(--pastel-borde); } .td-servicios a { background: var(--blanco); color: var(--texto); } .td-servicios a:hover, .td-servicios a:focus-visible { background: #f5fafd; color: var(--texto); } .td-servicios span { color: var(--texto-2); } /* Ventajas */ .td-ventajas { background: var(--pastel-borde); border-color: var(--pastel-borde); } .td-ventajas li { background: var(--blanco); color: var(--texto-2); } .td-ventajas strong { color: var(--texto); } .td-ventajas .td-ico { color: var(--enlace); } .td-ventajas li:last-child { background: var(--marca); color: var(--navy); } /* Comparativa: la columna «Con…» en pastel */ .td-antes__col--con { background: var(--pastel); color: var(--texto); border: 1px solid var(--pastel-borde); border-left: 0; } .td-antes__col--con li { color: var(--texto); } .td-antes__col--con .td-ico, .td-antes__col--con .td-antes__t { color: var(--enlace) !important; } /* Tarjeta destacada de funcionalidades */ .td-func .td-func__destacada { background: var(--pastel); border-color: var(--pastel-borde); color: var(--texto); } .td-func__destacada h3 { color: var(--texto); } .td-pagina .td-func__destacada p { color: var(--texto-2); } .td-func__destacada .td-ico { background: var(--marca); color: var(--navy); } /* Citas destacadas */ .td-cita { background: var(--pastel); color: var(--texto); border: 1px solid var(--pastel-borde); } .td-pagina .td-cita p { color: var(--texto); } .td-cita .td-ico { color: var(--enlace); } .td-cita a { color: var(--enlace); } .td-cita a:hover { color: var(--texto); } /* Tablas: cabecera pastel */ .entrada th, .td-pagina th { background: var(--pastel-2); color: var(--texto); } /* Infografías de flujo dentro de una sección pastel */ .td-sec--oscura .td-flujo { background: var(--blanco); border-color: var(--pastel-borde); } .td-sec--oscura .td-flujo__destinos span { color: var(--texto); border-color: var(--pastel-borde); } .td-sec--oscura .td-flujo__conector em { color: var(--enlace); } /* ---------- Menú móvil (2026-10-15): legible y sin tercer nivel escondido ---------- */ @media (max-width: 1080px) { /* La columna de presentación es solo para escritorio (antes la mostraba «.nav__lista li { display: flex }») */ .nav__lista li.nav__presentacion { display: none; } /* Al tocar, el texto no se oscurece (el :hover se queda pegado en pantallas táctiles) */ .nav__lista a:hover, .nav__lista a:focus, .nav__lista a:active { color: var(--blanco); } .nav__lista .sub-menu a:hover, .nav__lista .sub-menu a:focus { color: var(--blanco); } /* Dentro de un desplegable, los grupos (ERPs, Módulos…) se ven abiertos: sin acordeón de tercer nivel */ .nav__lista .sub-menu .sub-menu { display: block; padding-left: 0; border-top: 0; } .nav__lista .sub-menu .nav__desplegar { display: none; } .nav__lista > li > .sub-menu > .menu-item-has-children { border-bottom: 0; } .nav__lista > li > .sub-menu > .menu-item-has-children > a { padding: 18px 0 6px; color: var(--marca); font: 700 12px var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; } .nav__lista > li > .sub-menu > .menu-item-has-children > a[href="#"] { pointer-events: none; } .nav__lista .sub-menu .sub-menu li { border-bottom: 1px solid rgba(255, 255, 255, .08); } .nav__lista .sub-menu .sub-menu a { padding: 10px 0; color: var(--gris-osc); } .nav__item--logo .nav__visual { background: var(--blanco); border-radius: 4px; padding: 2px; } } /* ---------- Franja de cookies (CookieYes legacy) con el estilo del tema ---------- */ #cookie-law-info-bar { padding: 18px 0 !important; background: var(--blanco) !important; color: var(--texto) !important; border-top: 3px solid var(--marca) !important; box-shadow: 0 -12px 32px rgba(31, 58, 79, .14) !important; font-family: var(--f-texto) !important; } #cookie-law-info-bar .cli-bar-container { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; } #cookie-law-info-bar .cli-bar-message { flex: 1 1 520px; width: auto; font-size: 15px; line-height: 1.5; color: var(--texto-2); text-align: left; } #cookie-law-info-bar .cli-bar-message a { color: var(--enlace) !important; text-decoration: underline; padding: 0 !important; margin: 0 !important; } #cookie-law-info-bar .cli-bar-btn_container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; } #cookie-law-info-bar .cli-plugin-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; min-width: 120px; margin: 0 !important; padding: 10px 20px !important; border-radius: 0 !important; font: 600 15px/1.2 var(--f-texto) !important; cursor: pointer; } #cookie-law-info-bar .wt-cli-accept-btn, #cookie-law-info-bar .wt-cli-accept-all-btn { background: var(--marca) !important; color: var(--navy) !important; border: 1.5px solid var(--marca) !important; } #cookie-law-info-bar .wt-cli-accept-btn:hover, #cookie-law-info-bar .wt-cli-accept-btn:focus-visible, #cookie-law-info-bar .wt-cli-accept-all-btn:hover, #cookie-law-info-bar .wt-cli-accept-all-btn:focus-visible { background: #7cc7ef !important; border-color: #7cc7ef !important; } #cookie-law-info-bar .wt-cli-reject-btn { background: var(--osc-2) !important; color: var(--blanco) !important; border: 1.5px solid var(--osc-2) !important; } #cookie-law-info-bar .wt-cli-reject-btn:hover, #cookie-law-info-bar .wt-cli-reject-btn:focus-visible { background: var(--osc-3) !important; border-color: var(--osc-3) !important; } #cookie-law-info-bar .cli_settings_button { margin: 0 8px 0 0 !important; padding: 10px 4px; color: var(--enlace) !important; font: 600 15px var(--f-texto); text-decoration: underline; cursor: pointer; } #cookie-law-info-bar .cli_settings_button:hover { color: var(--texto) !important; } #cookie-law-info-again { background: var(--blanco) !important; color: var(--texto) !important; border: 1px solid var(--linea) !important; border-bottom: 0 !important; box-shadow: 0 -4px 14px rgba(31, 58, 79, .12) !important; font: 600 13px var(--f-texto) !important; } /* Ventana de preferencias */ #cliSettingsPopup .cli-modal-content { border-radius: 0; font-family: var(--f-texto); } #cliSettingsPopup .cli-tab-header { border-radius: 0; background: var(--fondo); } #cliSettingsPopup .cli-privacy-overview h4, #cliSettingsPopup .cli-tab-header a.cli-nav-link { font-family: var(--f-titulo); color: var(--texto); } #cliSettingsPopup .cli-switch input:checked + .cli-slider { background-color: var(--enlace); } #cliSettingsPopup .cli-tab-footer .wt-cli-privacy-accept-btn { background: var(--marca) !important; color: var(--navy) !important; border-radius: 0 !important; font-weight: 600; } @media (max-width: 600px) { #cookie-law-info-bar .cli-bar-message { flex-basis: 100%; font-size: 14px; } #cookie-law-info-bar .cli-bar-btn_container { width: 100%; } #cookie-law-info-bar .cli-plugin-button { flex: 1 1 0; min-width: 0; } #cookie-law-info-bar .cli_settings_button { flex-basis: 100%; text-align: center; margin: 0 !important; } } /* ========================================================================= REVISIÓN EDITORIAL (2026-10-15): menos «aspecto IA», más sobrio y profesional. Todo este bloque es reversible: basta con borrarlo. No toca textos, URLs ni IDs. ========================================================================= */ /* 1. Titulares: escala más contenida, sin compresión extrema */ .td h2, .td-h2, .td-pagina h2, .tsh-sec h2 { font-stretch: 92%; font-weight: 700; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -.012em; } .td-hero h1, .td-hero--oscuro h1 { font-stretch: 92%; font-weight: 700; font-size: clamp(34px, 3.9vw, 54px); line-height: 1.06; letter-spacing: -.015em; } .td-cab-pag h1, .cabecera-pagina__titulo { font-stretch: 92%; font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.015em; } .td-cta h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; } .td-sector__txt strong, .td-modulos strong, .td-servicios strong, .td-normativa strong { font-stretch: 95%; } /* 2. Antetítulos: fuera de las secciones; en cabeceras, discretos y sin mayúsculas */ .td-sec .td-antetitulo { display: none; } .td-hero .td-antetitulo, .td-cab-pag .td-antetitulo { text-transform: none; letter-spacing: .01em; font: 600 15px var(--f-texto); color: #bfe3f7; } .td-cab { margin-bottom: 36px; } /* 3. Hero y cabeceras de página: fondo liso, sin brillo ni retícula */ .td-hero--oscuro, .td-cab-pag { background: #335c7b; } .td-hero--oscuro::before, .td-cab-pag::before { display: none; } /* 4. Iconos: pequeños y en línea, sin cuadradito de color */ .td-func .td-ico { width: 22px; height: 22px; background: transparent; color: var(--enlace); } .td-func .td-ico::after { inset: 0; } .td-func__destacada .td-ico { background: transparent; color: var(--enlace); } .td-ventajas .td-ico { width: 22px; height: 22px; margin: 0; } .td-ventajas li:last-child .td-ico { color: var(--navy); } /* 5. Rejillas de tarjetas → listas editoriales: columnas con filete superior, sin cajas */ .td-func { gap: 0 48px; } .td-func > div, .td-func > a, .td-func .td-func__destacada { padding: 26px 0 30px; background: transparent; border: 0; border-top: 1px solid var(--pastel-borde); box-shadow: none; } .td-func > div:hover, .td-func > a:hover, a.ts-card:hover { border-color: var(--pastel-borde); border-top-color: var(--enlace); box-shadow: none; transform: none; } .td-func h3 { margin: 12px 0 6px; font-size: 19px; } .td-func .td-func__destacada { border-top: 2px solid var(--marca); } .td-func .td-func__destacada h3 { color: var(--texto); } /* 6. Ventajas: columnas con filete, como un informe, en lugar de mosaico de cajas */ .td-ventajas { gap: 0 48px; background: transparent; border: 0; } .td-ventajas li, .td-ventajas li:last-child { padding: 24px 0 28px; background: transparent; border-top: 1px solid var(--pastel-borde); color: var(--texto-2); } .td-ventajas li:last-child { border-top: 2px solid var(--marca); } .td-ventajas li:last-child strong { color: var(--texto); } .td-ventajas li:last-child .td-ico { color: var(--enlace); } .td-ventajas strong { font-size: 18px; } /* 7. Servicios de la portada: misma lógica de lista */ .td-servicios { gap: 0 48px; background: transparent; border: 0; } .td-servicios a { padding: 26px 0 30px; background: transparent; border-top: 1px solid var(--pastel-borde); } .td-servicios a::before { display: none; } .td-servicios a:hover, .td-servicios a:focus-visible { background: transparent; border-top-color: var(--enlace); } .td-servicios a:hover strong { color: var(--enlace); } /* 8. Citas: filete lateral, sin caja ni icono */ .td-cita { padding: 4px 0 4px 28px; background: transparent; border: 0; border-left: 3px solid var(--marca); } .td-cita::before { display: none; } .td-cita .td-ico { display: none; } .td-pagina .td-cita p { font-size: 20px; line-height: 1.5; font-weight: 400; } /* 9. Movimiento y sombras: sin «saltos» ni sombras de tarjeta */ .td-modulos a:hover, .td-normativa a:hover, .td-rel a:hover, .tarjeta-entrada__enlace:hover, .td-caminos.td-caminos--flotantes a:hover { transform: none; box-shadow: none; border-color: var(--enlace); } .td-caminos.td-caminos--flotantes a { box-shadow: 0 1px 0 var(--linea), 0 12px 30px rgba(31, 58, 79, .08); } .td-antes { box-shadow: none; } /* 10. Pasos: números sencillos en lugar de cuadrados de color */ .ts-pasos.td-linea li::before { width: auto; height: auto; margin-bottom: 10px; background: transparent; color: var(--enlace); font-size: 30px; place-items: start; } .ts-pasos.td-linea li:last-child::before { background: transparent; color: var(--enlace); } .ts-pasos.td-linea::after { top: 18px; left: 54px; border-top-style: solid; border-color: var(--pastel-borde); } @media (max-width: 960px) { .td-func, .td-ventajas, .td-servicios { gap: 0 32px; } } /* 10b. Pasos: sin línea continua (cruzaba los números); cada paso con su filete y el número debajo */ .ts-pasos.td-linea::after { display: none; } .ts-pasos.td-linea { gap: 0 40px; } .ts-pasos.td-linea li { padding-top: 18px; border-top: 1px solid var(--pastel-borde); } .ts-pasos.td-linea li:last-child { border-top: 2px solid var(--marca); } .ts-pasos.td-linea li::before { display: block; margin: 0 0 10px; font-size: 28px; line-height: 1; } /* ========================================================================= PASADA «TASTE» (2026-10-15, skills redesign-existing-projects + design-taste-frontend) Quita las señales de IA que quedaban: filetes finos, numeración 01/02/03, rótulos en mayúsculas espaciadas, cajas con borde de 1px y sombras de tarjeta. La estructura sale del espacio y de escalones de tono. Reversible: borrar este bloque. ========================================================================= */ /* Bloques de contenido: superficies rellenas (un tono sobre el fondo), sin filetes */ .td-func, .td-ventajas, .td-servicios { gap: 14px; } .td-func > div, .td-func > a, .td-ventajas li, .td-servicios a { padding: 26px 26px 28px; border: 0 !important; background: var(--blanco); box-shadow: none; } .td-sec--oscura .td-func > div, .td-sec--oscura .td-ventajas li { background: var(--blanco); } .td-func > div:hover, .td-func > a:hover, .td-servicios a:hover, .td-servicios a:focus-visible { background: #f1f8fc; } /* Elemento destacado: relleno pastel más intenso, sin línea */ .td-func .td-func__destacada, .td-ventajas li:last-child { background: var(--pastel-2) !important; border: 0 !important; } .td-func .td-func__destacada h3, .td-ventajas li:last-child strong { color: var(--texto); } .td-func h3 { margin: 14px 0 6px; } /* Pasos: sin números índice; cada paso es un bloque relleno y el orden lo da la posición */ .ts-pasos.td-linea { gap: 14px; } .ts-pasos.td-linea li, .ts-pasos.td-linea li:last-child { padding: 24px 24px 26px; border: 0; background: var(--blanco); } .ts-pasos.td-linea li::before { display: none; } .ts-pasos.td-linea li strong { display: block; margin-bottom: 6px; font: 700 18px/1.25 var(--f-titulo); color: var(--texto); } .td-sec--blanca .ts-pasos.td-linea li { background: var(--fondo); } /* Tarjetas de módulos, normativa, relacionados y blog: sin borde, relleno por tono */ .td-modulos a, .td-normativa a, .td-rel a, .tarjeta-entrada__enlace, a.ts-card, .ts-card { border: 0 !important; box-shadow: none !important; } .td-modulos a, .tarjeta-entrada__enlace { background: var(--blanco); } .td-normativa a, .td-rel a { background: var(--fondo); } .td-modulos a:hover, .td-normativa a:hover, .td-rel a:hover, .tarjeta-entrada__enlace:hover, a.ts-card:hover { background: #eaf4fa; } .td-caminos.td-caminos--flotantes a { border-top: 0; box-shadow: 0 18px 40px -18px rgba(31, 58, 79, .35); } /* Etiquetas: rellenas, sin contorno */ .td-chips li { border: 0; background: var(--pastel); color: var(--texto); font-weight: 500; } .td-normativa small { background: var(--pastel); } /* Rótulos pequeños: en minúscula y legibles, nunca mayúsculas espaciadas */ .td-antes__t, .pie__titulo, .ts-confianza__t, .td-slide__txt small, .nav__lista > li > .sub-menu > .menu-item-has-children > a, .td-caminos small { text-transform: none !important; letter-spacing: 0 !important; font: 600 14px/1.3 var(--f-texto) !important; } .pie__titulo { color: var(--blanco); font-size: 15px !important; } /* Comparativa: dos superficies, sin borde ni sombra */ .td-antes__col--sin { border: 0; background: var(--blanco); } .td-antes__col--con { border: 0; background: var(--pastel-2); } .td-antes__col--con::before { display: none; } /* Titulares: sin palabras huérfanas en la última línea */ h1, h2, h3, .td-sector__txt strong { text-wrap: balance; } p, li { text-wrap: pretty; } /* Pulsación y desplazamiento suave */ .ts-btn:active, .boton:active { transform: translateY(1px); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .td-func .td-func__destacada, .td-ventajas li:last-child { padding: 26px 26px 28px; }