/* ============================================================
   Up To Marketing · capa oscura del sistema visual
   Se carga DESPUES de system.css y solo redefine. system.css no
   se toca: revertir es dejar de encolar este fichero.

   Ojo con dos cosas que no son inversion mecanica:
   1. --utm-tinta hacia dos papeles: color de titulares Y fondo de
      seccion oscura. Aqui se separan.
   2. La firma "borde 2px tinta + sombra dura" sobre claro se lee
      por contraste de color; sobre oscuro hay que hacerla con un
      borde luminoso y una sombra casi negra, o desaparece.
   ============================================================ */

:root {
	/* fondos y superficies */
	--utm-fondo:        #0C0918;
	--utm-fondo-2:      #120D22;
	--utm-superficie:   #191231;
	--utm-superficie-2: #221839;
	--utm-borde:        #2D2350;
	--utm-borde-luz:    #4A3A85;

	/* la lavanda era el fondo alterno claro: ahora es el alterno oscuro */
	--utm-lavanda:      #120D22;

	/* tinta pasa de ser el negro a ser la tinta clara de los titulares */
	--utm-tinta:        #F2EFFB;

	--utm-texto:        #C4BDDC;
	--utm-texto-suave:  #A79FC7;

	/* acentos, subidos de luminosidad para que aguanten sobre oscuro */
	--utm-violeta:        #8A5CFF;
	--utm-violeta-oscuro: #5B2EEA;
	--utm-lima:           #CDF23C;
	--utm-coral:          #FF8A78;
	--utm-cian:           #5AD3EC;
	--utm-ambar:          #FFC44D;

	/* la sombra dura ya no puede ser del color de la tinta */
	--utm-shadow:       5px 5px 0 rgba(0,0,0,.75);
	--utm-shadow-hover: 8px 8px 0 rgba(0,0,0,.85);
}

/* ---------- suelo ---------- */
body,
.site,
.content-area,
.site-container { background: var(--utm-fondo); }
body { color: var(--utm-texto); }

/* Kadence colorea titulares y enlaces por su cuenta: hay que ganarle */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title { color: var(--utm-tinta); }
.entry-content { color: var(--utm-texto); }
.entry-content strong { color: var(--utm-tinta); }

/* ---------- superficies que eran blancas ---------- */
.utm-card,
.utm-card-flat,
.utm-form-card,
.utm-paso,
.utm-proyecto,
.utm-cita,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 .wpcf7-response-output {
	background: var(--utm-superficie);
	border-color: var(--utm-borde-luz);
}
.utm-card p, .utm-card-flat p { color: var(--utm-texto-suave); }

/* la seccion "tinta" era la oscura sobre claro: ahora tiene que
   diferenciarse hacia ARRIBA o desaparece contra el fondo */
.utm-seccion-tinta { background: var(--utm-superficie-2); }
.utm-seccion-tinta h2, .utm-seccion-tinta h3, .utm-seccion-tinta strong { color: var(--utm-tinta); }
.utm-seccion-tinta p { color: var(--utm-texto-suave); }

.utm-seccion-lavanda { background: var(--utm-fondo-2); }

/* el hero y las secciones violeta siguen funcionando: el violeta
   sobre oscuro sigue siendo mas claro que el fondo */
.utm-hero-violeta h1, .utm-hero-violeta h2, .utm-hero-violeta h3 { color: #fff; }
.utm-hero-violeta p { color: #DDD4FF; }
.utm-seccion-violeta h2, .utm-seccion-violeta h3 { color: #fff; }
.utm-seccion-violeta p { color: #DDD4FF; }

/* ---------- botones ---------- */
.utm-btn-outline .wp-block-button__link {
	color: var(--utm-tinta);
	border-color: var(--utm-borde-luz);
}
.utm-btn-outline .wp-block-button__link:hover { border-color: var(--utm-violeta); }
.utm-btn-lima .wp-block-button__link { color: #1C2400; }

/* ---------- etiquetas e iconos ---------- */
.utm-tag { background: rgba(255,255,255,.06); color: var(--utm-texto-suave); }
.utm-ico-cian, .utm-ico-lima { color: #14111F; }

/* ---------- formularios ---------- */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="url"], .wpcf7 select, .wpcf7 textarea {
	background: var(--utm-superficie-2);
	color: var(--utm-tinta);
	border-color: var(--utm-borde-luz);
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	background: var(--utm-superficie);
	border-color: var(--utm-violeta);
}
.wpcf7 ::placeholder { color: var(--utm-texto-suave); }
.wpcf7 label { color: var(--utm-texto-suave); }
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	background: var(--utm-superficie-2);
	border-color: var(--utm-borde-luz);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: #2E1B18; }

/* ---------- cabecera y pie ---------- */
#masthead, .site-header-wrap, #colophon, .site-footer-wrap {
	background: var(--utm-fondo);
	border-color: var(--utm-borde);
}
#masthead { border-bottom: 1px solid var(--utm-borde); }
#masthead a, #masthead .menu-item > a { color: var(--utm-texto-suave); }
#masthead a:hover, #masthead .menu-item > a:hover { color: var(--utm-tinta); }
#masthead .sub-menu { background: var(--utm-superficie); border: 1px solid var(--utm-borde-luz); }
#masthead .sub-menu a { color: var(--utm-texto-suave); }
.site-branding .site-title { color: var(--utm-tinta); }
#colophon, #colophon p { color: var(--utm-texto-suave); }
.site-footer a { color: var(--utm-texto-suave); }
.site-footer a:hover { color: var(--utm-tinta); }

/* ---------- blog: legibilidad sin cambiar de fondo ----------
   Primer intento: cuerpo del articulo sobre tarjeta clara. Salio mal:
   estos posts llevan su propio hero a sangre dentro del contenido, y la
   tarjeta se le superponia dejando el titular ilegible. Se revierte.
   La legibilidad del texto largo se resuelve con ergonomia, no con fondo:
   mas cuerpo, mas interlineado, mas contraste y medida corta. */
body.single-post .entry-content{
	font-size: 18.5px;
	line-height: 1.78;
	color: #D6D0EA;
}
body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > h2,
body.single-post .entry-content > h3{
	max-width: 68ch;
}
body.single-post .entry-content strong{ color: var(--utm-tinta); }
body.single-post .entry-content a{ color: #B79BFF; }
body.single-post .entry-content h2{ margin-top: 2em; }

/* ============================================================
   Parche de bordes. system.css usa `2px solid var(--utm-tinta)`
   en 17 reglas: al pasar tinta a clara, todos esos bordes se
   volvieron blancos y chillaban. Sobre oscuro el borde tiene que
   ser apenas mas claro que la superficie, no blanco.
   Generado desde system.css, no a mano.
   ============================================================ */
.utm-btn-lima .wp-block-button__link,
.utm-btn-violeta .wp-block-button__link,
.utm-btn-outline .wp-block-button__link,
.utm-card,
.utm-card-flat,
.utm-card-destacada,
.utm-ico,
.utm-stat,
.utm-paso-num,
.site-footer,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea,
.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 input[type="submit"],
.wpcf7 form .wpcf7-response-output,
.loop-entry .post-thumbnail,
.utm-foto-equipo img,
.utm-logo-partner {
	border-color: var(--utm-borde-luz);
}

/* botones: sobre lima el texto tiene que seguir siendo oscuro,
   y el outline ya no puede tener fondo blanco */
.utm-btn-lima .wp-block-button__link { color: #1C2400; }
.utm-btn-outline .wp-block-button__link {
	background: var(--utm-superficie-2);
	color: var(--utm-tinta);
}
.utm-btn-outline .wp-block-button__link:hover { background: var(--utm-superficie); }
.site-footer { border-top-color: var(--utm-borde); }

/* mas texto que era tinta oscura sobre fondos claros de acento */
.wpcf7 input[type="submit"] { color: #1C2400; }
.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked::after { color: #1C2400; }

/* ============================================================
   BLOG. Dos cosas que quedaban mal y no venian de la capa oscura:

   1. `content-style-boxed` pinta la entrada sobre una caja blanca
      (.entry.content-bg). Con la tinta ya clara, el titulo salia
      gris palido sobre blanco: ilegible.
   2. La imagen destacada de estos posts lleva el titulo incrustado
      (se generaron con la plantilla OG), asi que el titular salia
      dos veces: una dentro de la imagen y otra en HTML. Se oculta
      la imagen dentro del articulo; en el listado y al compartir
      se sigue usando.
   ============================================================ */
.entry.content-bg,
.single-entry.content-bg,
.entry.loop-entry.content-bg{
	background: var(--utm-superficie);
	border: 1px solid var(--utm-borde);
}
.single .entry-header .entry-title{ color: var(--utm-tinta); }
.single .entry-meta,
.single .entry-meta a,
.single .entry-taxonomies a{ color: var(--utm-texto-suave); }

/* la imagen destacada, fuera del articulo (no del listado) */
.single-post .post-thumbnail.kadence-thumbnail-position-behind,
.single-post > .content-area .post-thumbnail{ display: none; }

/* caja de autor y navegacion entre entradas */
.author-box, .post-navigation, .entry-related{
	background: var(--utm-superficie);
	border-color: var(--utm-borde);
}
.author-box .author-name, .post-navigation a{ color: var(--utm-tinta); }
.post-navigation .kadence-nav-title{ color: var(--utm-texto-suave); }

/* listado del blog */
.loop-entry .entry-title a{ color: var(--utm-tinta); }
.loop-entry .entry-summary, .loop-entry .entry-meta{ color: var(--utm-texto-suave); }

/* la franja del titulo de archivo (blog, categorias) venia en claro
   y asomaba por los lados del contenedor */
.entry-hero,
.entry-hero-container-inner,
.post-archive-hero-section,
.page-hero-section,
.hero-section-overlay{
	background: var(--utm-fondo);
}
.entry-hero .entry-title,
.post-archive-title .entry-title{ color: var(--utm-tinta); }
.entry-hero .archive-description,
.entry-hero p{ color: var(--utm-texto-suave); }

/* ============================================================
   CTA final de las paginas interiores.
   Era un bloque violeta plano a sangre: la firma del sistema
   claro de julio, que ya no se usa en ningun otro sitio. Pasa al
   mismo lenguaje que el cierre de la home: fondo oscuro con el
   violeta como luz que sube desde abajo.
   ============================================================ */
.utm-seccion-violeta{
	background: var(--utm-fondo);
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--utm-borde);
}
.utm-seccion-violeta::before{
	content: "";
	position: absolute; inset: auto 0 -60% 0; height: 130%;
	background: radial-gradient(48% 60% at 50% 100%, rgba(124,77,255,.32) 0%, transparent 70%);
	pointer-events: none;
}
.utm-seccion-violeta > *{ position: relative; }
.utm-seccion-violeta h2,
.utm-seccion-violeta h3{ color: var(--utm-tinta); }
.utm-seccion-violeta p{ color: var(--utm-texto-suave); }
.utm-seccion-violeta .utm-eyebrow{ color: var(--utm-violeta); }
.utm-seccion-violeta .utm-micro{ color: var(--utm-texto-suave); }
.utm-destacado-lima{ color: var(--utm-lima); }

/* ============================================================
   HERO DE LAS PAGINAS INTERIORES.
   No existia como tal: el primer bloque era un `.utm-seccion`
   normal, un rectangulo con padding. De ahi que se vieran sosos.
   Aqui recibe el mismo lenguaje que la home (violeta como fuente
   de luz, rejilla enmascarada, escala tipografica mayor) sin
   tocar el markup de ninguna pagina.
   ============================================================ */
.page .entry-content > .utm-seccion:first-child{
	position: relative;
	overflow: hidden;
	padding-top: 76px;
	padding-bottom: 84px;
	border-bottom: 1px solid var(--utm-borde);
}
/* la luz */
.page .entry-content > .utm-seccion:first-child::before{
	content: "";
	position: absolute; inset: -40% -10% auto -10%; height: 170%;
	background:
		radial-gradient(48% 44% at 26% 38%, rgba(124,77,255,.34) 0%, rgba(124,77,255,0) 70%),
		radial-gradient(34% 30% at 78% 12%, rgba(61,216,240,.12) 0%, rgba(61,216,240,0) 72%);
	pointer-events: none;
}
/* el suelo */
.page .entry-content > .utm-seccion:first-child::after{
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
	background-size: 74px 74px;
	-webkit-mask-image: radial-gradient(72% 66% at 34% 42%, #000 0%, transparent 78%);
	mask-image: radial-gradient(72% 66% at 34% 42%, #000 0%, transparent 78%);
	pointer-events: none;
}
.page .entry-content > .utm-seccion:first-child > *{ position: relative; z-index: 1; }

/* escala: el H1 interior era mucho menor que el de la home */
.page .entry-content > .utm-seccion:first-child h1{
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.07;
	letter-spacing: -.028em;
	max-width: 20ch;
	margin-bottom: 20px;
}
.page .entry-content > .utm-seccion:first-child > p.has-large-font-size{
	font-size: 1.08rem;
	line-height: 1.62;
	color: var(--utm-texto-suave);
	max-width: 58ch;
	margin-bottom: 30px;
}
/* el punto latiendo del eyebrow, como en la home */
.page .entry-content > .utm-seccion:first-child .utm-eyebrow{
	display: inline-flex; align-items: center; gap: 10px;
	margin-bottom: 22px;
}
.page .entry-content > .utm-seccion:first-child .utm-eyebrow::before{
	content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--utm-cian); box-shadow: 0 0 12px var(--utm-cian);
	animation: utm-latido 2.6s ease-in-out infinite;
}
@keyframes utm-latido{ 0%,100%{opacity:1} 50%{opacity:.35} }
.page .entry-content > .utm-seccion:first-child .utm-micro{
	margin-top: 18px; color: var(--utm-texto-suave);
}
@media (prefers-reduced-motion: reduce){
	.page .entry-content > .utm-seccion:first-child .utm-eyebrow::before{ animation: none; }
}

/* ============================================================
   1. BUG: el eyebrow se descolgaba al margen izquierdo.
   `display:inline-flex` le quitaba la restriccion de ancho que
   Kadence aplica a los hijos de un bloque `alignfull`, asi que
   se salia de la columna. Vuelve a ser bloque y el punto pasa a
   ser un pseudo inline.
   ============================================================ */
.page .entry-content > .utm-seccion:first-child .utm-eyebrow{
	display: block;
}
.page .entry-content > .utm-seccion:first-child .utm-eyebrow::before{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	position: relative; top: -1px;
}

/* ============================================================
   2. MONOTONIA: quince tarjetas iguales una detras de otra.
   La solucion no es quitar tarjetas (el contenido las necesita)
   sino que dejen de ser todas la misma: dos tratamientos segun
   el suelo sobre el que caen, y ritmo de luz entre secciones.
   ============================================================ */

/* --- suelo base: la tarjeta se disuelve y queda una FILA con regla.
       Es otra forma, no otra tarjeta. */
.utm-seccion:not(.utm-seccion-lavanda):not(.utm-seccion-tinta):not(.utm-seccion-violeta) .utm-card{
	background: transparent;
	border: 0;
	border-top: 1px solid var(--utm-borde);
	border-radius: 0;
	box-shadow: none;
	padding: 26px 22px 26px 0;
	transition: background .2s ease, padding-left .2s ease;
}
.utm-seccion:not(.utm-seccion-lavanda):not(.utm-seccion-tinta):not(.utm-seccion-violeta) .utm-card:hover{
	background: rgba(124,77,255,.05);
	padding-left: 18px;
}

/* --- suelo lavanda: aqui SI son piezas solidas, sin borde y con relleno */
.utm-seccion-lavanda .utm-card{
	background: var(--utm-superficie);
	border: 0;
	box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
	border-radius: 14px;
}
.utm-seccion-lavanda .utm-card:hover{
	background: var(--utm-superficie-2);
}

/* --- ritmo: las bandas lavanda se iluminan por dentro */
.utm-seccion-lavanda{
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--utm-borde);
	border-bottom: 1px solid var(--utm-borde);
}
.utm-seccion-lavanda::before{
	content: "";
	position: absolute; inset: -60% -20% auto -20%; height: 200%;
	background: radial-gradient(42% 40% at 74% 30%, rgba(124,77,255,.16) 0%, transparent 72%);
	pointer-events: none;
}
.utm-seccion-lavanda > *{ position: relative; z-index: 1; }

/* --- los pasos numerados: el numero deja de ser una pastilla y pasa a
       ser tipografia grande, que es lo que le da aire a la seccion */
.utm-paso-num{
	background: transparent !important;
	color: var(--utm-violeta) !important;
	font-family: 'Sora', sans-serif;
	font-size: 2.6rem !important;
	font-weight: 700;
	line-height: 1;
	width: auto !important; height: auto !important;
	border: 0 !important; border-radius: 0 !important;
	display: block !important;
	padding: 0 !important;
	margin-bottom: 14px;
	letter-spacing: -.04em;
	opacity: .9;
}

/* --- titulares de seccion con mas presencia y un filo de acento */
.utm-seccion > h2:first-child,
.utm-seccion > .wp-block-heading:first-child{
	font-size: clamp(1.45rem, 3vw, 2.05rem);
	letter-spacing: -.024em;
}

/* --- las cifras dejan de ir en caja tambien fuera de la home */
.utm-stat{
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--utm-borde) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 24px !important;
}
.utm-stat .utm-stat-n{
	font-family: 'Sora', sans-serif;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--utm-violeta);
	margin-bottom: 12px;
}
.utm-stat .utm-stat-l{ color: var(--utm-texto-suave); font-size: 13.5px; line-height: 1.5; }

/* ============================================================
   PIEZAS GRAFICAS
   SVG en linea que heredan los tokens del sistema. Una por pagina,
   elegida por lo que esa pagina argumenta, no un juego generico.
   ============================================================ */
.utm-grafico{
	margin: 44px 0;
	padding: 30px 28px 26px;
	background: var(--utm-superficie);
	border: 1px solid var(--utm-borde);
	border-radius: 16px;
	overflow: hidden;
}
.utm-grafico-rot{
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
	color: var(--utm-violeta); margin: 0 0 22px; text-align: left;
}
.utm-svg{ width: 100%; height: auto; display: block; overflow: visible; }
.utm-grafico-pie{
	margin: 22px 0 0; font-size: 14px; line-height: 1.6;
	color: var(--utm-texto-suave); max-width: 72ch;
}

/* nodos */
.utm-nodo rect{ fill: var(--utm-superficie-2); stroke: var(--utm-borde-luz); stroke-width: 1.5; }
.utm-nodo text{ fill: var(--utm-tinta); font-weight: 700; }
.utm-nodo .utm-sub, .utm-sub{ fill: var(--utm-texto-suave); font-weight: 400; font-size: 11.5px; }
.utm-nodo-fin rect{ stroke: var(--utm-lima); }
.utm-nodo-fin text{ fill: var(--utm-lima); }
.utm-nodo-fuera rect{ fill: transparent; stroke: var(--utm-borde); stroke-dasharray: 5 4; }

/* zonas y bordes */
.utm-zona-dentro{ fill: rgba(124,77,255,.07); stroke: var(--utm-borde-luz); stroke-width: 1.5; }
.utm-borde-corte{ stroke: var(--utm-coral); stroke-width: 1.5; stroke-dasharray: 7 6; opacity: .8; }

/* el retorno del circuito, recorriendolo */
.utm-retorno{ stroke-dashoffset: 0; animation: utm-fluye 2.4s linear infinite; }
@keyframes utm-fluye{ to{ stroke-dashoffset: -44; } }

/* barra de origen de leads */
.utm-barra .s1{ fill: var(--utm-violeta); opacity: .55; }
.utm-barra .s2{ fill: var(--utm-violeta); opacity: .38; }
.utm-barra .s3{ fill: var(--utm-violeta); opacity: .26; }
.utm-barra .s4{ fill: var(--utm-violeta); opacity: .2; }
.utm-barra .s-ia{ fill: var(--utm-lima); }
.utm-cifra{ font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; fill: var(--utm-tinta); }
.utm-ia-l{ fill: var(--utm-lima) !important; }

/* lineas de resultado */
.utm-linea-res rect{ fill: var(--utm-texto-suave); opacity: .55; }
.utm-linea-res rect.d{ opacity: .22; }
.utm-linea-res rect.utm-marca{ fill: var(--utm-lima); opacity: 1; }

@media (max-width: 640px){
	.utm-grafico{ padding: 22px 16px 20px; margin: 32px 0; }
	.utm-grafico-pie{ font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce){
	.utm-retorno{ animation: none; }
}

/* El bloque de shortcode cuelga directo de .entry-content, que en estas
   paginas va a sangre completa: la pieza grafica tiene que ponerse ella
   misma la restriccion de columna que si tienen los grupos. */
.utm-grafico{
	width: min(100% - 4rem, var(--global-content-width, 1290px));
	margin-left: auto;
	margin-right: auto;
}

/* El margen de la pieza grafica lo pisaba una regla de Kadence sobre los
   hijos directos de .entry-content, asi que quedaba pegada a la franja de
   arriba (hueco medido: 0 px). Se declara con la misma especificidad y con
   aire de verdad: es un objeto suelto entre dos bandas a sangre. */
.entry-content > .utm-grafico{
	margin-top: 84px;
	margin-bottom: 84px;
}
@media (max-width: 780px){
	.entry-content > .utm-grafico{ margin-top: 52px; margin-bottom: 52px; }
}

/* ============================================================
   Bloque de actualización de los posts. Los articulos son de
   julio y el terreno se movio: en vez de reescribir 20.000
   palabras y arriesgar el SEO que ya tienen, se dice arriba lo
   que ha cambiado, fechado, y se enlaza a donde continua.
   ============================================================ */
.utm-actualizacion{
	background: linear-gradient(150deg, rgba(124,77,255,.12) 0%, rgba(12,9,24,0) 70%);
	border: 1px solid var(--utm-borde-luz);
	border-left: 3px solid var(--utm-lima);
	border-radius: 12px;
	padding: 24px 26px;
	margin: 0 0 40px;
}
.utm-act-rot{
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--utm-lima); margin: 0 0 12px;
}
.utm-act-txt{
	margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--utm-texto);
}
.utm-act-txt strong{ color: var(--utm-tinta); }
.utm-act-cta{ margin: 16px 0 0; }
.utm-act-cta a{
	font-weight: 700; font-size: 14.5px; color: var(--utm-violeta);
	text-decoration: none; border-bottom: 1px solid transparent;
}
.utm-act-cta a:hover{ border-bottom-color: var(--utm-violeta); }
@media (max-width: 640px){ .utm-actualizacion{ padding: 20px 18px; } }

/* ============================================================
   Entradas sin caja. Kadence las sirve con `content-style-boxed`,
   asi que el articulo iba dentro de una tarjeta. Sobre oscuro eso
   encajona la lectura y no encaja con el resto del sitio, donde
   el contenido descansa sobre el fondo.
   ============================================================ */
.single-post .entry.content-bg,
.single-post .single-entry.content-bg{
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
.single-post .entry-content-wrap{ padding: 0; }

/* la columna de lectura la marca la medida del texto, no una caja */
.single-post .entry-header,
.single-post .entry-taxonomies,
.single-post .entry-meta,
.single-post .entry-content > *{
	max-width: 72ch;
	margin-left: auto;
	margin-right: auto;
}
/* lo que debe poder salirse de esa medida */
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .utm-actualizacion,
.single-post .entry-content > figure,
.single-post .entry-content > table,
.single-post .entry-content > .wp-block-table{
	max-width: 80ch;
}
.single-post .entry-header .entry-title{
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	line-height: 1.1;
	letter-spacing: -.028em;
}
/* un filo que separa cabecera de cuerpo sin dibujar una caja */
.single-post .entry-content{
	border-top: 1px solid var(--utm-borde);
	padding-top: 34px;
	margin-top: 30px;
}

/* la cabecera de la entrada iba centrada y el cuerpo a la izquierda */
.single-post .entry-header,
.single-post .entry-header .entry-title,
.single-post .entry-taxonomies,
.single-post .entry-meta{
	text-align: left !important;
}
.single-post .entry-meta{ justify-content: flex-start; }

/* Correccion: `max-width:72ch` aplicado a cabecera, taxonomia y meta les daba
   un ancho distinto a cada uno, porque `ch` depende del tamaño de letra de
   cada elemento. Resultado: tres cajas centradas con anchos distintos y por
   tanto desalineadas. La columna se define UNA vez, en el contenedor. */
.single-post .entry-header,
.single-post .entry-taxonomies,
.single-post .entry-meta,
.single-post .entry-content > *{
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.single-post .entry-content-wrap{
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.single-post .entry-content > .utm-actualizacion{ max-width: none; }

/* Las piezas graficas en movil: no se encogen, cambian de disposicion.
   A 390 px el SVG ancho se pintaba a 294 px (escala 0,33) y su texto de
   11,5 quedaba en 3,8 px reales: ilegible. Cada grafico lleva ahora una
   version vertical propia con la tipografia a tamaño util. */
.utm-svg-m{ display: none; }
@media (max-width: 820px){
	.utm-svg-d{ display: none; }
	.utm-svg-m{ display: block; }
}

/* El panel del logo de partner se creó por la mañana usando --utm-tinta como
   "el oscuro". Al invertir el sistema, esa variable pasó a ser la tinta CLARA,
   así que el panel quedó casi blanco con un logo blanco encima: invisible.
   Mismo fallo de raíz que los bordes de 2px. Se fija a un oscuro propio. */
.utm-logo-partner{
	background: #0A0715;
	border-color: var(--utm-borde-luz);
	border-radius: 12px;
}
/* .utm-seccion-tinta tambien lo usaba de fondo; ya estaba resuelto arriba
   remapeandola a superficie-2, esto solo lo blinda si cambia el orden. */
.utm-seccion-tinta{ background: var(--utm-superficie-2); }