/* ============================================================================ BLOQUES DE SECCIÓN · Marketing España · 26-ago-2026 ---------------------------------------------------------------------------- MEDIDO ANTES DE ESCRIBIR ESTO: las cuatro páginas de servicio tienen la misma firma exacta de widgets (heading×42 text-editor×30 icon-list×5 image×4) y una imagen cada 1.600 px de scroll. Son texto en cajas blancas sobre un fondo hueso continuo de 6.400 px. Lo que aportan estos bloques: · RITMO — secciones que alternan hueso / tinta / papel, para que el scroll tenga articulaciones en vez de ser un plano. · RANGO — el dato deja de pesar lo mismo que el párrafo que lo rodea. · FAMILIA — la iconografía es la misma de las destacadas del blog. ============================================================================ */ .itb-seccion{ --itb-ancho: 1200px; padding: clamp(48px, 7vw, 88px) 0; } .itb-seccion > .itb-interior{ max-width: var(--itb-ancho); margin: 0 auto; padding: 0 24px; } /* --- los tres fondos que dan el ritmo ------------------------------------- */ .itb-seccion--hueso{ background: var(--itb-bg, #eeefe7); } .itb-seccion--papel{ background: #fff; } .itb-seccion--tinta{ background: var(--itb-ink, #12141d); color: #e9ebe1; background-image: linear-gradient(120deg, rgba(204,255,139,.07), transparent 58%), linear-gradient(rgba(204,255,139,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(204,255,139,.045) 1px, transparent 1px); background-size: auto, 62px 62px, 62px 62px; } .itb-seccion--tinta h2, .itb-seccion--tinta h3{ color: #f4f6ee; } .itb-seccion--tinta p{ color: #bfc4b7; } /* --- cabecera de sección --------------------------------------------------- */ .itb-cabecera{ max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); } .itb-kicker{ font-family: 'Inter', system-ui, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--itb-verde-texto, #3d6b0d); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } .itb-kicker::before{ content: ""; width: 30px; height: 3px; border-radius: 2px; background: currentColor; flex: 0 0 auto; } .itb-seccion--tinta .itb-kicker{ color: var(--itb-acc, #ccff8b); } /* --- REJILLA DE ICONOS: lo que sustituye a las cajas vacías ---------------- */ .itb-rejilla{ display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 620px){ .itb-rejilla{ grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px){ .itb-rejilla--3{ grid-template-columns: repeat(3, 1fr); } /* 🔴 `repeat(4, 1fr)` fijo estrangulaba el texto en cuanto la caja bajaba de 1.152px: a 1024 de pantalla la rejilla mide 976, la pieza sale a 227 y al párrafo le quedan 169px = 17-20 caracteres por línea (mínimo de la casa: 24). Medido el 10-09-2026. Con `auto-fit` la rejilla decide sola cuántas columnas caben sin bajar del ancho en que el texto se sigue leyendo: 270px de pieza son 222 de texto = 24 cpl justos. A 1.152 entran las cuatro; a 976 pasa a tres (310px de pieza) en vez de apretar cuatro. El `min(270px, 100%)` es la trampa conocida: sin él, en una caja más estrecha que 270 la propia columna desborda. */ /* 🔴 Y `auto-fit` a secas ABRIÓ OTRO HUECO: a 1024 la rejilla cabe en TRES columnas, y con cuatro piezas eso deja la cuarta sola con 665px vacíos al lado (el gate lo cantó como «32 % de 976»). Con cuatro elementos, tres columnas siempre dejan huérfana a una. Así que aquí no manda cuánto cabe, manda el REPARTO: cuatro columnas cuando hay sitio de verdad (4 × 270 + 66 de huecos = 1146 de rejilla, o sea 1194 de pantalla) y DOS por debajo. Nunca tres. */ .itb-rejilla--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1194px){ .itb-rejilla--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .itb-pieza{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 16px; align-items: start; background: #fff; border: 1px solid var(--itb-line, #dfe1d6); border-radius: 16px; padding: 24px 24px 26px; box-shadow: 0 1px 2px rgba(18,20,29,.04), 0 12px 30px -22px rgba(18,20,29,.25); } .itb-pieza > .itb-ico{ grid-row: 1 / span 2; } .itb-pieza h3{ grid-column: 2; margin: 4px 0 0; font-family: 'Merriweather', Georgia, serif; font-size: 1.1rem; line-height: 1.3; } .itb-pieza p{ grid-column: 2; margin: 6px 0 0; font-size: .95rem; line-height: 1.55; color: #4f5561; } .itb-seccion--tinta .itb-pieza{ background: rgba(255,255,255,.035); border-color: rgba(204,255,139,.16); box-shadow: none; } .itb-seccion--tinta .itb-pieza p{ color: #b4baab; } /* --- BANDA DE CIFRAS: el dato sube de rango ------------------------------- Antes, «+71 % más clics» se presentaba en una tarjeta idéntica a la de «Auditoría». El número es lo más valioso de la página y tiene que pesar. */ .itb-cifras{ display: grid; gap: 2px; grid-template-columns: 1fr; border-radius: 20px; overflow: hidden; background: rgba(204,255,139,.14); } @media (min-width: 760px){ .itb-cifras{ grid-template-columns: repeat(3, 1fr); } } .itb-cifra{ background: var(--itb-ink, #12141d); padding: 34px 30px 32px; display: flex; flex-direction: column; gap: 6px; } .itb-cifra b{ font-family: 'Merriweather', Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--itb-acc, #ccff8b); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .itb-cifra span{ font-size: 1.02rem; font-weight: 600; color: #f4f6ee; } .itb-cifra small{ font-size: .87rem; color: #9aa08f; line-height: 1.45; } /* --- LISTA DE CONTRASTE: lo que sí / lo que no ---------------------------- */ .itb-contraste{ display: grid; gap: 20px; } @media (min-width: 780px){ .itb-contraste{ grid-template-columns: 1fr 1fr; } } .itb-columna{ border-radius: 16px; padding: 26px 28px; border: 1px solid var(--itb-line, #dfe1d6); background: #fff; } .itb-columna--no{ background: #fbfaf8; border-style: dashed; } .itb-columna h3{ margin: 0 0 14px; font-size: 1.06rem; display: flex; align-items: center; gap: 10px; } .itb-columna ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .itb-columna li{ position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.5; color: #4f5561; } .itb-columna li::before{ content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--itb-verde-texto, #3d6b0d) 20%, transparent); box-shadow: inset 0 0 0 2px var(--itb-verde-texto, #3d6b0d); } .itb-columna--no li::before{ background: transparent; box-shadow: inset 0 0 0 2px #b9bcae; } /* --- FRANJA CON IMAGEN: media + texto, la pieza que faltaba --------------- */ .itb-franja{ display: grid; gap: clamp(24px, 4vw, 46px); align-items: center; } @media (min-width: 900px){ .itb-franja{ grid-template-columns: 1fr 1fr; } .itb-franja--invertida .itb-franja-media{ order: 2; } } .itb-franja-media img{ display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--itb-line, #dfe1d6); } .itb-seccion--tinta .itb-franja-media img{ border-color: rgba(204,255,139,.18); } .itb-franja-texto h2{ margin-top: 0; } /* --- accesibilidad y movimiento ------------------------------------------- */ @media (prefers-reduced-motion: no-preference){ .itb-pieza{ transition: transform .18s ease, box-shadow .18s ease; } .itb-pieza:hover{ transform: translateY(-2px); box-shadow: 0 1px 2px rgba(18,20,29,.05), 0 18px 38px -24px rgba(18,20,29,.35); } } /* --- la pieza pinta su propio icono ---------------------------------------- `mask-image: inherit` NO se hereda en pseudo-elementos (medido). Cada clase de icono declara su mascara tambien en `.itb-pieza::after`; aqui solo va la geometria: ::before es la caja redondeada, ::after el trazo encima. */ .itb-pieza{ position: relative; } .itb-pieza[class*="itb-ico--"]::before{ content: ""; grid-row: 1 / span 2; align-self: start; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--itb-acc, #ccff8b) 26%, transparent); } .itb-pieza[class*="itb-ico--"]::after{ content: ""; position: absolute; left: 35px; top: 35px; width: 24px; height: 24px; background: var(--itb-verde-texto, #2c4e09); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } .itb-seccion--tinta .itb-pieza[class*="itb-ico--"]::before{ background: rgba(204,255,139,.14); } .itb-seccion--tinta .itb-pieza[class*="itb-ico--"]::after{ background: var(--itb-acc, #ccff8b); } /* --- CORRECCIÓN · los hijos de un contenedor Elementor son WRAPPERS --------- La primera versión daba `grid-column: 2` al h3 y al p, dando por hecho que son hijos directos de la pieza. No lo son: Elementor envuelve cada widget en `div.elementor-element > div.elementor-widget-container`. El grid colocaba los envoltorios, el párrafo caía en una columna de ancho mínimo y el texto salía EN VERTICAL, una letra por línea. Se apunta a los envoltorios, que es lo que el grid realmente tiene delante. */ .itb-pieza{ display: grid; grid-template-columns: 46px 1fr; grid-auto-rows: min-content; align-items: start; column-gap: 16px; row-gap: 2px; } .itb-pieza > .elementor-element{ grid-column: 2; min-width: 0; /* sin esto un hijo de grid no baja de su max-content */ } .itb-pieza[class*="itb-ico--"]::before{ grid-column: 1; grid-row: 1 / span 99; /* la caja del icono acompaña a todas las filas */ } .itb-pieza h3{ margin: 2px 0 0; } .itb-pieza p{ margin: 6px 0 0; } /* el icono se ancla a la esquina de la pieza, no a una fila concreta */ .itb-pieza[class*="itb-ico--"]::after{ left: 35px; top: 35px; } /* mismas dos correcciones para las columnas de contraste y la cabecera */ .itb-columna > .elementor-element, .itb-cabecera > .elementor-element{ min-width: 0; } .itb-rejilla > .elementor-element{ min-width: 0; } /* --- EN UNA PIEZA ESTRECHA EL ICONO SE SUBE A SU FILA ---------------------- 🔴 Medido el 10-09-2026 con el gate de composición sobre las OCHO páginas de servicio (desarrollo-web, posicionamiento-seo, branding, soluciones-a-medida, analitica-y-medicion, programacion-a-medida, email-marketing y agencias): todas cantaban lo mismo. La cuenta: `.itb-interior` mide 1200px, la rejilla 1152, y a cuatro columnas cada pieza sale a 272. Quitando su relleno (24+24) quedan 224, y de ahí el carril del icono se lleva 46 de caja más 16 de hueco: al texto le quedan 162px, que son 17-18 CARACTERES POR LÍNEA. El mínimo de lectura de la casa son 24. Los párrafos salían en columnas de dos palabras. El número sale de la cuenta: con el carril, el texto mide `ancho - 48 (relleno) - 62 (carril)`. Para llegar a los 221px que hacen 24 cpl, la pieza necesita pasar de 331. 🔴🔴 NO SE HACE CON `@container`, y costó una pasada en rojo: una consulta de contenedor NO puede estilar al PROPIO contenedor, solo a sus descendientes. Al poner `container-type: inline-size` en `.itb-pieza` y meter dentro `@container{ .itb-pieza{...} }`, la regla de la pieza no aplicó y sí lo hizo la de sus hijos: el texto se fue a la columna de 46px y salió a 5 CARACTERES POR LÍNEA en 21 líneas, a los cuatro anchos. Medido y revertido en la misma pasada. Va por ancho de pantalla, que es lo que aquí se puede saber. Las bandas salen de medir la pieza en cada rejilla: · `--4` (auto-fit, mínimo 270): la pieza va de 270 a 310 siempre → apilado siempre. · `--3`: 368px a 1440 (el carril cabe), pero 302-336 entre 1000 y 1140 → apilado ahí. 🔴🔴 Y AL APILAR, EL ICONO SE PUSO ENCIMA DEL TITULAR. Segunda pasada en rojo, vista en la captura y no en el gate (que dio VERDE): en producción el `::before` de la pieza es `position:absolute` —lo fija otra hoja, no esta—, así que NO es un ítem de la rejilla y mi `grid-row: 1` no le hacía nada. La caja de 46px se sigue pintando en la esquina y el trazo (`::after`) en 35,35: al subir el texto a la primera fila, se le montaba encima. Lo que hace falta no es colocar el icono, es DEJARLE SITIO: 24 de margen + 46 de caja + aire. De ahí el relleno superior de 84px cuando la pieza va apilada. 🥇 Y una tercera pasada, otra vez por la captura: el `::before` es absoluto pero NO declara `left`/`top`, así que se queda en su «posición estática» — donde le habría tocado en el flujo. Al apilar, esa posición pasó a ser el principio del contenido y el cuadro tintado salió flotando SOBRE el titular, con el trazo del icono arriba en su sitio: el icono partido en dos. Se le fija la esquina, la misma que ya usa el trazo. */ @media (min-width: 1194px){ .itb-rejilla--4 .itb-pieza{ grid-template-columns: 1fr; row-gap: 8px; padding-top: 84px; } .itb-rejilla--4 .itb-pieza > .elementor-element{ grid-column: 1; } } @media (min-width: 1000px) and (max-width: 1140px){ .itb-rejilla--3 .itb-pieza{ grid-template-columns: 1fr; row-gap: 8px; padding-top: 84px; } .itb-rejilla--3 .itb-pieza > .elementor-element{ grid-column: 1; } } /* --- LA BANDA QUE ELEMENTOR NO CUBRE: 1025-1231 --------------------------- Las filas de cuatro pasos de las páginas de servicio reparten sus columnas con `calc((100% - 84px) / 4)` y ya tienen ancho de móvil (100 %) y de tableta (dos columnas, puesto el 10-09-2026). Pero el «tablet» de Elementor termina en 1024px: entre 1025 y ~1231 vuelve a mandar el reparto de escritorio y la columna sale a 242px con el texto a 188 = 20 caracteres por línea. Medido a 1100px. Esas columnas no tenían NINGUNA clase —el ancho lo emite Elementor por id de elemento—, así que se les marcó `itb-cuarto` en el árbol (29 contenedores en 7 páginas) para poder engancharlas aquí. El corte está en 1231 porque a partir de ahí los cuatro cuartos ya dan 221px de texto, que son los 24 caracteres por línea del mínimo de la casa. */ @media (min-width: 1025px) and (max-width: 1231px){ .itb-cuarto{ width: calc((100% - 28px) / 2) !important; } } /* --- Y EL HUÉRFANO DE LAS FILAS DE TRES ------------------------------------ Al darles dos columnas en tableta, una fila de TRES deja al tercero solo con media fila vacía (el gate: «49 % de 976, a un lado 0/502»). `:nth-child(3):last-child` es exactamente «el tercero Y último», o sea: fila de tres justas. En una fila de seis no entra, que es lo que se quiere — ahí el reparto ya cuadra. Solo hasta 1024, porque de ahí para arriba manda el reparto de escritorio y los tres van en fila. */ @media (max-width: 1024px){ .itb-tercio:nth-child(3):last-child{ width: 100% !important; } } /* --- EL ICONO ESTABA PARTIDO EN DOS (defecto PREEXISTENTE) ----------------- 🔴 Visto en la captura el 10-09-2026, y NO lo había causado el apilado: sale igual en la rejilla de tres a 1440, que no se ha tocado. En cada pieza se pintan dos glifos: el bueno, oscuro y pequeño, y otro lima palidísimo desplazado, encima del titular. La causa está en `itb-iconos.css`, que empareja los selectores así: .itb-ico--X::before, .itb-pieza.itb-ico--X::after { mask-image: } El primero NO exige `.itb-pieza`, así que en una pieza alcanza también a su `::before` — que aquí no es un glifo, es la CAJA TINTADA redondeada (`border-radius:13px`, lima al 26 %) que va detrás del icono. Enmascararla la convierte en un glifo fantasma y deja a la pieza sin su fondo. Se le quita la máscara y vuelve a ser lo que era: una caja. El arreglo va aquí y no en `itb-iconos.css` porque allí habría que tocar los 17 pares de selectores, y `::before` SÍ es el glifo para los `.itb-ico--X` que no son piezas. 🥇 Y se ancla AQUÍ, fuera de toda consulta de medio. Primero se puso la esquina solo dentro de las reglas de apilado y el cuadro seguía saliendo sobre el titular en las páginas que no entraban en esas bandas: `position:absolute` sin `left`/`top` deja al pseudo en su «posición estática», que cambia con cada maqueta. Un adorno que debe estar SIEMPRE en la esquina se ancla siempre, no según el ancho de pantalla. 🔴🔴 Y LA ESQUINA NO ERA LA ESQUINA. Con `left:24px; top:24px` puestos, el cuadro seguía cayendo sobre el titular, y `getComputedStyle` decía 24/24: los dos tenían razón. La pieza es `display:grid`, y un hijo ABSOLUTO con posición de rejilla declarada (`grid-column:1`, `grid-row:1/span 99`, que pone la regla de arriba) toma como bloque contenedor **su celda**, no la caja de relleno de la pieza. Al apilar, esa celda empieza detrás del `padding-top` de 84px, así que «24px desde arriba» eran 108 desde el borde de la tarjeta: justo el titular. Devolviéndole `grid-*: auto` el bloque contenedor vuelve a ser la caja de relleno y la esquina es la esquina. Tres capturas hicieron falta para verlo. */ .itb-pieza[class*="itb-ico--"]::before{ -webkit-mask-image: none; mask-image: none; position: absolute; grid-column: auto; grid-row: auto; left: 24px; top: 24px; }