`, y con eso el rótulo, el `

`, cada `
` y la lista pasan a ser CELDAS: el titular acababa en la misma fila que la foto, separado de su párrafo por la altura de la imagen, y el rótulo colgando en otra celda. El propietario lo señaló con la captura, y tiene razón. La forma correcta es la que ya usan `tc-trato-oscura` y `tc-trato-banda`: PHP envuelve el texto y la sección queda con DOS hijas. Con dos hijas, un `flex` con `wrap` y un ancho base por cada una resuelve el escritorio y el móvil sin una sola consulta de medios: cuando no caben los dos anchos, la línea se parte sola y cada columna pasa a ocupar el 100 %. `min-width: 0` en las dos porque un elemento flexible no encoge por debajo de su contenido más largo: sin él, una palabra larga o un enlace sin espacios ensancharía su columna y rompería el reparto. / .tc-cuerpo section.tc-banda-media { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-5) var(--tc-space-6); background: var(--tc-color-bg); } .tc-cuerpo .tc-banda-media > .tc-trato-texto { flex: 1 1 30rem; min-width: 0; } .tc-cuerpo .tc-banda-media > .tc-cobertura-figura { / 40 % de base, y `order` porque en el marcado la figura va después: en móvil, al partirse la línea, manda el orden visual y la foto queda arriba, que es donde se quiere. / flex: 1 1 20rem; max-width: 40%; min-width: 0; order: -1; float: none; width: auto; margin: 0; } @media (max-width: 61.9375rem) { / En una sola columna el tope del 40 % dejaría la foto en un sello: se libera para que ocupe el ancho de la línea. / .tc-cuerpo .tc-banda-media > .tc-cobertura-figura { max-width: 100%; } } .tc-cuerpo .tc-banda-media > .tc-cobertura-figura img { aspect-ratio: 4 / 3; object-fit: cover; } / ── EL RELLENO INTERIOR DE `tc-cierre`, EN CUALQUIER SILO ──────────────── 🔴 SÉPTIMA VEZ. La regla que ajusta el relleno de las secciones agrupadas dentro de `tc-cierre` vive en `servicios.css` acotada a `.tc-silo-servicios`. En las hijas de precios —silo `informacional`— no casaba, así que `tc-precios` conservaba el `padding-block` grande de la regla base y salía con el doble de aire que `tc-relacionados`, su pareja a la izquierda. Dos gemelas con distinto respiro no parecen gemelas. Mismo tratamiento que ya recibió `tc-contexto-operativo`. / .tc-cuerpo .tc-cierre > section[class^="tc-"] { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: var(--tc-space-5) var(--tc-space-4); / Mismo canto y mismo motivo que `tc-contexto-operativo` de más arriba: con el suelo de página en blanco (08-sep-2026), una tarjeta blanca sin borde no existe. Las dos parejas de gemelas se corrigen igual porque son la misma pieza en dos sitios distintos. / border: 1px solid color-mix(in srgb, var(--tc-color-brand) 14%, transparent); border-radius: var(--tc-radius); background: var(--tc-color-bg); box-shadow: var(--tc-shadow-card); } / ── FONDO A SANGRE EN LA BANDA CON FOTO Y EN `tc-garantia` ─────────────── Las dos son bandas: su color tiene que llegar al borde de la ventana, no quedarse en la columna de lectura como una tarjeta ancha. Ninguna de las dos la sangra ya otra hoja —comprobado antes de escribir esto—, así que `grid-column: full` no duplica nada. El interior se centra con el mismo cálculo que usan el hero y la banda de marcas, así que el texto sigue alineado con el resto de la página. / / `tc-alcance-servicio` sigue nombrada aparte de `tc-banda-media` porque no siempre le toca foto: sin figura no lleva el modificador, y aun así es una banda y tiene que sangrar igual. / .tc-cuerpo section:is(.tc-banda-media, .tc-alcance-servicio, .tc-garantia) { grid-column: full; border-radius: 0; padding-inline: max(var(--tc-gutter), (100% - var(--tc-max-width-content)) / 2); } / LA BANDA DE SELLOS, BAJO EL HERO (09-sep-2026, petición del propietario). Los tres en fila entre el hero y el primer bloque. En escritorio quietos y repartidos; en móvil, desfilando en bucle. ══ EL MARCADO VIENE DUPLICADO Y ESO ES EL TRUCO ══ `tecnicordoba_banda_de_sellos()` emite las tres piezas DOS veces. Un bucle sin costura no se hace con un `translate` que salta al final: se hace con dos tandas iguales moviéndose media pista, de modo que cuando la primera sale por un lado la segunda ya está exactamente donde estaba la primera. El salto de vuelta a cero ocurre en un fotograma en el que la imagen es idéntica, así que no se ve. En escritorio la copia sobra, y no hace falta emitir marcado distinto: la pista no se mueve, `overflow: hidden` recorta y la segunda tanda se queda fuera. Un solo HTML para los dos casos. / .tc-sellos-banda { grid-column: full; overflow: hidden; padding-block: var(--tc-space-5); border-block: 1px solid color-mix(in srgb, var(--tc-color-brand) 12%, transparent); } .tc-sellos-banda-pista { display: flex; align-items: center; gap: var(--tc-space-6); / Reproduce la columna de lectura: la banda sangra a ancho de ventana pero los sellos no deben pegarse al filo. / padding-inline: max(var(--tc-gutter), (100% - var(--tc-max-width-content)) / 2); } .tc-sellos-banda-pieza { / Altura fija y ancho automático: los tres vienen con proporciones distintas —1,46:1 · 1,11:1 · 1,06:1— y con ancho fijo el de garantía se vería un tercio más pequeño que los otros dos. / block-size: 5.5rem; inline-size: auto; flex: 0 0 auto; } / ESCRITORIO: quietos, repartidos y sin la copia. / @media (min-width: 48rem) { .tc-sellos-banda-pista { justify-content: space-around; } / MÁS GRANDES (09-sep-2026, petición del propietario): de 5,5 a 9 rem. Como no se mueven, pueden ocupar más sin estorbar; en móvil siguen a 4,5, que es lo que deja pasar tres piezas por la ventana sin que se toquen. / .tc-sellos-banda-pieza { block-size: 9rem; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); } / UN GIRO CORTO AL PASAR EL RATÓN. Tres grados y un 4% de tamaño: lo justo para que el sello acuse el gesto sin parecer que se ha despegado. Se alternan los sentidos por posición —`nth-child` impar a un lado, par al otro— porque tres sellos girando igual se leen como un bloque que se mueve, y girando alternos se leen como tres piezas sueltas. Va en `transform` y no en `rotate` a secas: es la propiedad que el navegador compone en la GPU sin recalcular la maquetación, que es la condición para animar algo que está en una fila de seis imágenes. / .tc-sellos-banda-pieza:hover { transform: rotate(3deg) scale(1.04); } .tc-sellos-banda-pieza:nth-child(even):hover { transform: rotate(-3deg) scale(1.04); } / La segunda tanda no se imprime en pantalla: `display: none` sobre las tres últimas piezas. `nth-child(n + 4)` y no un contador fijo, para que siga valiendo si algún día la banda lleva cuatro sellos. / .tc-sellos-banda-pieza:nth-child(n + 4) { display: none; } } / MÓVIL: desfile en bucle. / @media (max-width: 47.9375rem) { .tc-sellos-banda-pista { / Sin relleno: la pista tiene que poder salirse por los dos lados. / padding-inline: 0; inline-size: max-content; animation: tc-sellos-desfile 22s linear infinite; } .tc-sellos-banda-pieza { block-size: 4.5rem; } } @keyframes tc-sellos-desfile { / Media pista exacta: es donde la segunda tanda ocupa el sitio de la primera. Cualquier otro valor deja un salto visible al reiniciar. / from { transform: translateX(0); } to { transform: translateX(-50%); } } / 🔴 QUIETA SI SE PIDE MENOS MOVIMIENTO. Un desfile en bucle no se detiene nunca y no hay forma de pararlo: es exactamente el caso que `prefers-reduced-motion` existe para cubrir. Con la animación anulada la pista vuelve a repartirse, y la copia se oculta como en escritorio: sin movimiento, ver seis sellos en vez de tres solo sería un error. / @media (prefers-reduced-motion: reduce) { .tc-sellos-banda-pista { animation: none; inline-size: auto; justify-content: space-around; padding-inline: var(--tc-gutter); } .tc-sellos-banda-pieza:nth-child(n + 4) { display: none; } / El giro se va con el desfile. Es pequeño, pero sigue siendo movimiento que el visitante no ha pedido, y quien activa esa preferencia suele hacerlo porque el movimiento le marea, no porque le moleste el grande. / .tc-sellos-banda-pieza, .tc-sellos-banda-pieza:hover { transition: none; transform: none; } } / ═══════════════════════════════════════════════════════════════════════ EL ICONO DEL BOTÓN DE WHATSAPP (14-sep-2026, petición del propietario: «no se ve el icono») QUÉ PASABA. El plugin «WA Contact Button» imprime `