/* ══════════════════════════════════════════════════════════════════════════ Blog de marketingespaña.com · sistema de bloques «Tinta y lima» · v2 Contrato de tokens: Desktop\07-ECOSISTEMA\marketingespana-web\DESIGN-TOKENS-BLOG.md Todo valor sale de un token. Iconos: SVG inline (0 peticiones). ══════════════════════════════════════════════════════════════════════════ */ /* Tokens en :root: los elementos que viven FUERA de .itb-blog (barra de progreso, acciones flotantes y aviso de copiado se inyectan en ) también los necesitan. */ :root{ --itb-ink:#12141d; --itb-soft:#3a3a3d; --itb-bg:#eeefe7; --itb-line:#dfe1d6; --itb-acc:#ccff8b; --itb-acc-hov:#b1fb5b; --itb-dark:#090809; --itb-lima-acida:#C6F03C; --itb-cta-sub:#c9cbd2; } .itb-blog{ --itb-ink:#12141d; --itb-soft:#3a3a3d; --itb-bg:#eeefe7; --itb-line:#dfe1d6; --itb-acc:#ccff8b; --itb-acc-hov:#b1fb5b; --itb-dark:#090809; --itb-lima-acida:#C6F03C; --itb-cta-sub:#c9cbd2; --itb-r:12px; --itb-r-lg:16px; --itb-pad:18px 22px; --itb-gap:1.6em; --itb-chip:30px; color:var(--itb-ink); font-size:17px; line-height:1.75; /* El ancho de la web es 1200 px (orden de Jesús, 24-ago-2026): SIN padding lateral en escritorio, para que el contenido mida 1200 REALES y no 1120. El margen lateral en pantallas pequeñas se recupera en las media queries de abajo. */ max-width:1200px; margin:0 auto; padding:0; box-sizing:border-box; font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-variant-numeric:tabular-nums; } .itb-blog h1,.itb-blog h2,.itb-blog h3{font-family:'Merriweather',Georgia,'Times New Roman',serif} .itb-blog p{text-align:justify;text-wrap:pretty} .itb-blog a{color:var(--itb-ink);transition:color .18s cubic-bezier(.22,.61,.36,1),background-color .18s cubic-bezier(.22,.61,.36,1),text-decoration-color .18s ease-out} .itb-blog a:hover{color:var(--itb-soft)} .itb-blog p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--itb-acc-hov)} .itb-blog p a:hover{text-decoration-thickness:2px} .itb-blog a:focus-visible{outline:2px solid var(--itb-ink);outline-offset:2px;border-radius:2px} .itb-blog .itb-oscuro a:focus-visible{outline-color:var(--itb-acc)} .itb-blog ul,.itb-blog ol{text-align:left} .itb-blog strong{font-weight:600} /* ── Jerarquía: cada H2 abre sección con un filete lima ───────────────────── */ .itb-blog h2{font-size:1.5em;line-height:1.25;letter-spacing:-.01em;margin:2em 0 .6em;scroll-margin-top:110px;text-wrap:balance;position:relative;padding-top:.5em} .itb-blog h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;border-radius:2px;background:var(--itb-acc)} .itb-blog h3{font-size:1.16em;line-height:1.35;margin:1.6em 0 .4em;scroll-margin-top:110px;text-wrap:balance} .itb-blog h2+p,.itb-blog h3+p{margin-top:0} /* ── Metadatos de cabecera ────────────────────────────────────────────────── */ .itb-blog .itb-fecha{color:var(--itb-soft);font-size:.88em;margin:0 0 1.4em;text-align:left;letter-spacing:.01em} /* ── Chip de icono, común a los bloques con marca ─────────────────────────── */ .itb-blog .itb-resumen,.itb-blog .itb-def,.itb-blog .itb-dato,.itb-blog .itb-changelog, .itb-blog .itb-toc,.itb-blog .itb-exp{position:relative} .itb-blog .itb-resumen::after,.itb-blog .itb-def::after,.itb-blog .itb-dato::after, .itb-blog .itb-toc::after{ content:"";position:absolute;top:14px;right:16px;width:var(--itb-chip);height:var(--itb-chip); border-radius:9px;background-color:var(--itb-acc);background-repeat:no-repeat; background-position:center;background-size:17px; } .itb-blog .itb-resumen::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312141d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E")} .itb-blog .itb-def::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312141d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E")} .itb-blog .itb-dato::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312141d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")} .itb-blog .itb-toc::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312141d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E")} .itb-blog .itb-resumen p,.itb-blog .itb-def p,.itb-blog .itb-dato p{padding-right:calc(var(--itb-chip) + 14px)} /* ── Resumen (respuesta directa) ──────────────────────────────────────────── */ .itb-blog .itb-resumen{background:var(--itb-bg);border:1px solid var(--itb-line);border-left:4px solid var(--itb-acc);border-radius:var(--itb-r);padding:var(--itb-pad);margin:0 0 1.2em} .itb-blog .itb-resumen p{margin:0;font-weight:500;font-size:1.02em;line-height:1.62} /* ── Claves (bloque oscuro) ───────────────────────────────────────────────── */ .itb-blog .itb-claves{background:var(--itb-dark);border-radius:var(--itb-r);padding:22px 26px;margin:0 0 var(--itb-gap)} .itb-blog .itb-claves p:first-child{color:var(--itb-lima-acida);font-size:.78em;font-weight:700;letter-spacing:.08em;margin:0 0 12px;text-align:left;text-transform:uppercase} .itb-blog .itb-claves ul{color:#fff;margin:0;padding:0;list-style:none;font-size:.96em;line-height:1.65;display:grid;gap:10px} .itb-blog .itb-claves li{position:relative;padding-left:26px} .itb-blog .itb-claves li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--itb-acc)} /* ── Índice ───────────────────────────────────────────────────────────────── */ .itb-blog .itb-toc{background:var(--itb-bg);border:1px solid var(--itb-line);border-radius:var(--itb-r);padding:18px 24px;margin:1.4em 0 2.2em} .itb-blog .itb-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:34px;font-size:.97em} .itb-blog .itb-toc li{position:relative;break-inside:avoid} /* 🥇 RETIRADO (2-sep-2026): numeracion OBSOLETA del indice. Convivian DOS sistemas de dos versiones de esta hoja: el nuevo numera en el con el contador `itbtoc`, y este viejo numeraba en el

con `toc`. La regla nueva redefine `counter-reset` en el mismo

: wpautop envuelve el enlace suelto en un

, así que colocar el `` no movía nada — se colocaba su envoltorio o nadie. Se apunta al párrafo que solo contiene el enlace, y al por si algún artículo va sin envolver. */ .itb-blog .itb-cta > p:has(> a:only-child), .itb-blog .itb-cta > a{ grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: center; margin: 0; } .itb-blog .itb-cta > p:has(> a:only-child) a{ white-space: nowrap; } } /* 🥇 EL BOTÓN ERA LIMA SOBRE LIMA: contraste 1,08 medido, en el CTA de los 47 artículos. `.itb-cta.itb-oscuro a{color:var(--itb-lima)}` se escribió para los enlaces dentro de la banda oscura, pero el botón también es un y su fondo YA es lima. Se le devuelve la tinta; los enlaces de texto dentro de la banda siguen en lima. */ .itb-blog .itb-cta.itb-oscuro a[href]{ color: var(--itb-ink, #12141d); } /* --- la destacada del hero: sin costura con el fondo tinta ------------------ */ .elementor-widget-theme-post-featured-image img{ display: block; width: 100%; height: auto; border-radius: 16px; } /* ── Cita destacada ─────────────────────────────────────────────────────────── Una frase DEL PROPIO artículo, sacada a tamaño grande sobre fondo oscuro, con la sección de la que sale. No es un testimonio ni una cita de terceros: es el argumento del texto puesto en pausa, para dar respiro a piezas de 2.000-4.500 palabras. Portada de la plantilla «ITB · C37 Cita a sangre» (post 4792), que ya estaba construida y validada en la biblioteca; aquí vive como HTML del sistema del blog para que cada artículo lleve SU frase y no una compartida. Añadida el 03-09-2026: ninguno de los 47 artículos tenía cita ni blockquote. */ .itb-blog .itb-cita{background:var(--itb-dark);border-radius:var(--itb-r-lg);padding:40px 44px;margin:var(--esp-m) 0} .itb-blog .itb-cita p{color:#fff;font-family:"Merriweather",Georgia,serif;font-size:1.24em;line-height:1.5;margin:0;text-align:center;text-wrap:balance} .itb-blog .itb-cita cite{display:block;margin-top:16px;color:var(--itb-cta-sub);font-family:"Inter",sans-serif;font-size:.8em;font-style:normal;text-align:center;letter-spacing:.02em} @media (max-width:600px){.itb-blog .itb-cita{padding:28px 22px}.itb-blog .itb-cita p{font-size:1.08em}} /* ============================================================================ EL ÍNDICE SALE DEL CARRIL Y EL ARTÍCULO GANA LA PANTALLA · 04-09-2026 Orden de Jesús: «el indice debe estar arriba y como boton flotante, no debe ocupar parte del ancho, el resto de los articulos deben ocupar todo el ancho de pantalla». Corrige explícitamente la decisión del 02-sep, que metió el índice en el carril izquierdo como columna fija. Medido antes de tocar a 1440: el índice sticky de 280 px dejaba los primeros párrafos en 349 px de ancho. Esta capa va al final del fichero a propósito: con la misma especificidad que la del 02-sep, gana por orden. No se borra la anterior para conservar el rastro de por qué se hizo y poder volver con un solo corte. ============================================================================ */ /* 1 · El cuerpo deja de topar en 1200: el contenedor de la plantilla ya va a ancho completo (single 4292, contenedor c257647). */ .itb-blog{ max-width: none; /* 700 px ≈ 78 caracteres: el techo cómodo de lectura. Se sube desde 640 para que el aire lateral encoja sin llevar la línea a la zona ilegible. */ --itb-medida-lectura: 700px; } /* 2 · Se deshace el carril: el índice vuelve al flujo, arriba, y los bloques a sangre recuperan los DOS carriles, que es lo que ocupa la pantalla. */ @media (min-width: 1260px){ .itb-blog > figure, .itb-blog > .itb-figura, .itb-blog > .itb-destacada, .itb-blog > .itb-table-responsive, .itb-blog > .itb-claves, .itb-blog > .itb-balanza, .itb-blog > .itb-ad, .itb-blog > .itb-cta, .itb-blog > .itb-pasos{ grid-column: 1 / -1; } .itb-blog > nav.itb-toc{ grid-column: 1 / -1; grid-row: auto; position: static; max-width: var(--itb-medida-lectura); margin: 2.4em auto; padding: 22px 26px; background: #fbfcf8; border: 1px solid var(--itb-line, #dfe1d6); border-right: 1px solid var(--itb-line, #dfe1d6); border-radius: 16px; max-height: none; overflow: visible; } .itb-blog > nav.itb-toc ol, .itb-blog > nav.itb-toc ul{ grid-template-columns: 1fr 1fr; column-gap: 26px; gap: 2px; } .itb-blog > nav.itb-toc a{ font-size: .96em; line-height: 1.45; padding: 8px 10px; gap: 12px; } .itb-blog > nav.itb-toc a::before{ font-size: .72rem; } .itb-blog > nav.itb-toc a:hover{ background: #f1f6e6; text-decoration: none; } } .itb-blog{ row-gap: normal; } /* 3 · El índice como botón flotante: el FAB que ya existía hacía scroll hasta el índice; ahora lo ABRE en un