/* ==========================================================================
   Summum theme · templates.css
   Consolida TODOS los estilos inline únicos del bundle estático original
   (~145 KB de CSS específicos por tipo de página).
   Generado automáticamente — NO editar a mano.
   Cargado en TODAS las páginas para garantizar consistencia visual.
   ========================================================================== */


/* --- SERVICIO (7 bloques) --- */

/* hash bac2187c · primer file: ai-citation-guide/index.html */
/* === Pillar marketplaces excelencia · 2026-05-19 === */
.mp-hero{position:relative;padding:96px 0 120px;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-warm) 100%)}
.mp-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
.mp-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--orange);margin:0 0 24px}
.mp-hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 2.4s ease-in-out infinite}
.mp-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(48px,7vw,108px);line-height:0.95;letter-spacing:-0.045em;margin:0 0 28px;color:var(--fg)}
.mp-hero h1 .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
.mp-hero h1 .underline{background-image:linear-gradient(var(--yellow),var(--yellow));background-repeat:no-repeat;background-size:100% 32%;background-position:0 84%;padding:0 4px}
.mp-hero .lead{font-size:21px;line-height:1.55;color:var(--fg-dim);max-width:56ch;margin:0 0 40px}
.mp-hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.mp-hero-illus{position:relative;height:520px}
.mp-hero-illus svg{width:100%;height:100%;display:block}

@keyframes float-pkg-a{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(-2deg)}}
@keyframes float-pkg-b{0%,100%{transform:translateY(-8px) rotate(6deg)}50%{transform:translateY(8px) rotate(4deg)}}
@keyframes float-pkg-c{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.pkg-a{animation:float-pkg-a 6s ease-in-out infinite;transform-origin:center}
.pkg-b{animation:float-pkg-b 7s ease-in-out infinite;transform-origin:center}
.pkg-c{animation:float-pkg-c 5s ease-in-out infinite;transform-origin:center}
@keyframes orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.orbit-ring{animation:orbit-spin 40s linear infinite;transform-origin:center}
@keyframes orbit-spin-rev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
.orbit-ring-rev{animation:orbit-spin-rev 60s linear infinite;transform-origin:center}

.mp-marquee{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft);overflow:hidden;position:relative;z-index:1}
.mp-marquee-track{display:flex;gap:48px;animation:marquee 30s linear infinite;font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:-0.02em;color:var(--fg-dim);white-space:nowrap;width:max-content}

/* === Data band: cifras del mercado === */
.mp-data{padding:96px 0;background:var(--bg-ink);color:var(--inv);position:relative;overflow:hidden}
.mp-data h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.035em;margin:24px 0 64px;max-width:22ch}
.mp-data h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
/* === FIX 2026-08-09 (Summum Marketing): de grid fijo 3-col a flex con flex-basis
   equivalente + justify-content:center. Filas completas = pixel-identico al grid
   anterior. Filas incompletas (recuento no multiplo de 3, ej. /colaboradores/ con
   4 items) se centran en vez de dejar el ultimo item huerfano pegado a la izquierda
   con hueco vacio a la derecha. === */
.mp-data-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px}
.mp-data-item{flex:0 1 calc((100% - 96px)/3)}
/* FIX diseño 2026-09-25 (Summum): con exactamente 4 cifras (p.ej.
   /kit-digital-marketplace/, /amazon-vendor-central/) el reparto en base 3
   centra bien el 4º item huérfano (fix 2026-08-09, ver comentario arriba)
   pero sigue leyéndose como "3+1" en vez de una fila de 4. Con 4 elementos
   una sola fila de 4 columnas iguales es más legible y es el mismo patrón
   que ya usa .mp-kpi-grid para sus 4 KPI. */
.mp-data-grid:has(>.mp-data-item:nth-child(4):last-child)>.mp-data-item{flex-basis:calc((100% - 144px)/4)}
.mp-data-item .v{font-family:var(--display);font-weight:500;font-size:clamp(56px,7vw,112px);line-height:0.9;letter-spacing:-0.04em;color:var(--orange);margin:0 0 8px}
.mp-data-item .v .small{font-size:0.4em;color:var(--inv-dim);font-family:var(--mono);letter-spacing:0.04em;margin-left:6px}
.mp-data-item .l{font-size:15px;line-height:1.55;color:var(--inv-dim);max-width:36ch;margin:0 0 10px}
.mp-data-item .src{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--inv-mute);text-transform:uppercase}
.mp-data-item .src a{color:var(--orange);transition:opacity 160ms}
.mp-data-item .src a:hover{opacity:0.7}

/* FIX diseño 2026-09-25 (Summum), defensivo: .mp-data es la sección oscura
   (background:var(--bg-ink)) de las cifras del mercado. Si algún recuadro
   <p style="…background:var(--bg-soft)…"> (fondo claro pensado para
   secciones claras) se cuela aquí dentro, hereda el color de texto claro de
   la sección (var(--inv)) sobre un fondo claro = ilegible. Ya corregido en
   el contenido de 6979/6980/9263 (ver bitácora); esta regla evita que
   vuelva a pasar. Acotada a .mp-data, la sección oscura real donde se dio
   el caso — no toca el resto de .section-dark del sitio. */
.mp-data p[style*="--bg-soft"]{color:#2b2622}

/* === Tabla comparativa marketplaces === */
.mp-table-section{padding:96px 0;background:var(--bg)}
.mp-table-section h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.035em;margin:16px 0 16px;max-width:24ch}
.mp-table-section h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-table-section .intro{font-size:18px;line-height:1.6;color:var(--fg-dim);max-width:62ch;margin:0 0 48px}
/* Fix 2026-08-09 v2 (Summum Marketing): el fix anterior de hoy (grid-template-columns:
   minmax(0,760px) 1fr) solo acotaba el CONTENIDO -- el .wrap seguía siendo el ancho
   completo del sitio (hasta 1680px), así que la sección seguía dejando un hueco vacío
   pegado a la derecha: medido con Playwright/getBoundingClientRect, 645px (45%) a
   1440px y 885px (53%) a 1680px en /identidad-corporativa-diseno-grafico/, 660px (46%)
   y 900px (54%) en /diseno-web-ecommerce/ -- un revisor independiente lo confirmó y se
   dejó anotado en PENDIENTES.md punto 11 como "corrige la alineación, no el hueco".
   Fix real: se acota y CENTRA el propio .wrap de estas secciones (872px = los mismos
   760px de columna de texto que ya usaba el sitio, más los 56px de padding a cada lado
   de --pad-x), en vez de solo su contenido. Así la sección entera se comporta como un
   bloque de texto centrado de ancho de lectura normal -- ya no hace falta grid: al
   acotarse el CONTENEDOR, los hijos sin max-width propio (h2, eyebrow, h3) ocupan el
   mismo ancho de 760px que antes por flujo de bloque normal, y los que ya tenían su
   propio max-width (.intro a 62ch) siguen igual de estrechos dentro. Las secciones CON
   tabla quedan excluidas por :not(:has(table)), sin ningún cambio. En viewports donde
   el .wrap ya era más estrecho que 872px (p.ej. /servicios-locales/, protegida por su
   propia plantilla, o cualquier viewport móvil) esta regla no tiene efecto: el ancho lo
   sigue marcando el contenedor padre. Detalle: bitácora 2026-08-09, PENDIENTES.md punto 11. */
.mp-table-section .wrap:not(:has(table)){max-width:872px;margin:0 auto}
.mp-table{width:100%;border-collapse:collapse;background:var(--bg);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.mp-table thead{background:var(--bg-soft)}
.mp-table th{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-dim);padding:16px 14px;text-align:left;border-bottom:2px solid var(--line)}
.mp-table td{padding:18px 14px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--fg-dim);vertical-align:top}
.mp-table tr:last-child td{border-bottom:0}
.mp-table td strong{color:var(--fg);font-weight:500;display:block;font-size:15px;margin-bottom:4px}
.mp-table .mp-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;background:var(--bg-warm);color:var(--orange-deep);font-weight:500}
.mp-table .mp-tag.green{background:#e8f5e9;color:#16a34a}
.mp-table .mp-tag.blue{background:#dbeafe;color:#1e40af}

/* === KPIs === */
.mp-kpi{padding:96px 0;background:var(--bg-warm)}
.mp-kpi h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-0.03em;margin:16px 0 48px;max-width:24ch}
.mp-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.mp-kpi-item{border-left:3px solid var(--orange);padding:8px 0 8px 24px}
.mp-kpi-item .v{font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:0.95;letter-spacing:-0.03em;color:var(--fg);margin:0 0 8px}
.mp-kpi-item .l{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-mute);margin:0 0 6px}
.mp-kpi-item .d{font-size:14px;line-height:1.5;color:var(--fg-dim);margin:0}

/* === Services cards === */
.mp-services{padding:96px 0}
.mp-services h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-0.035em;margin:0 0 16px}
.mp-services h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.mp-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;background:var(--bg);transition:transform 280ms cubic-bezier(0.16,1,0.3,1),border-color 220ms ease,box-shadow 280ms ease;display:flex;flex-direction:column;gap:14px;min-height:280px}
.mp-card:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 32px 60px rgba(20,17,13,0.08)}
.mp-card .num{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--orange);font-weight:500}
.mp-card .title{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-0.02em;line-height:1.1;margin:0}
.mp-card .desc{font-size:14.5px;line-height:1.6;color:var(--fg-dim);margin:0}
.mp-card .more{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:6px}

/* === Process === */
.mp-process{padding:96px 0;background:var(--bg-soft)}
.mp-process h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-0.035em;margin:16px 0 0}
.mp-process h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:48px;counter-reset:step}
/* FIX diseño 2026-09-25 (Summum): la rejilla asumía siempre 5 pasos. Con
   menos (p.ej. 3 en /miravia/, /amazon-ads/, /amazon-vendor-central/) las
   columnas sobrantes quedaban vacías (~45% de hueco a la derecha); con más
   (7 en /kit-digital-marketplace/) la 2ª fila volcaba solo 2 de 5 columnas,
   pegada a la izquierda. Se fija el nº de columnas al nº real de pasos vía
   :has(), acotado a .mp-process-grid > .mp-step (mismo patrón :has() que ya
   usa este fichero en ISSUE 7 y en .mp-table-section .wrap:not(:has(table))).
   Los breakpoints ≤900px ya fuerzan 3/2/1 columnas con !important más abajo
   y no se tocan. */
.mp-process-grid:has(>.mp-step:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.mp-process-grid:has(>.mp-step:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.mp-process-grid:has(>.mp-step:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.mp-process-grid:has(>.mp-step:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.mp-process-grid:has(>.mp-step:nth-child(7):last-child){grid-template-columns:repeat(4,1fr)}
.mp-step{padding:24px 20px;border-left:2px solid var(--orange);counter-increment:step}
.mp-step .n{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--orange);text-transform:uppercase}
.mp-step .n::before{content:"0" counter(step) " · "}
.mp-step .t{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-0.02em;margin:8px 0 8px;line-height:1.15}
.mp-step .d{font-size:13.5px;line-height:1.6;color:var(--fg-dim);margin:0}

/* === Why === */
.mp-why{padding:96px 0;background:var(--bg)}
.mp-why-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:start}
.mp-why h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:-0.04em;margin:0 0 28px}
.mp-why h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-why .body-l{font-size:18px;line-height:1.7;color:var(--fg-dim);max-width:60ch;margin:0 0 20px}
.mp-why .body-l strong{color:var(--fg)}
.mp-why-stats{display:flex;flex-direction:column;gap:20px}
.mp-why-stat{padding:24px 28px;background:var(--bg-warm);border-radius:var(--radius-lg);border-left:3px solid var(--orange)}
.mp-why-stat .v{font-family:var(--display);font-weight:500;font-size:42px;line-height:1;letter-spacing:-0.025em;color:var(--fg);margin:0}
.mp-why-stat .v .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-why-stat .l{font-size:14px;line-height:1.5;color:var(--fg-dim);margin:6px 0 0}

/* === Cases === */
.mp-cases{padding:96px 0;background:var(--bg-ink);color:var(--inv)}
.mp-cases h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-0.035em;margin:16px 0 48px;max-width:22ch;color:var(--inv)}
.mp-cases h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.mp-case{padding:40px;background:var(--bg-ink-2,#16140F);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.08);transition:transform 280ms ease,border-color 220ms ease}
.mp-case:hover{transform:translateY(-6px);border-color:rgba(255,94,26,0.4)}
.mp-case .cat{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);margin:0 0 16px}
.mp-case .t{font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:-0.025em;line-height:1.15;margin:0 0 20px;color:var(--inv)}
.mp-case .q{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.55;color:var(--inv-dim);border-left:2px solid var(--orange);padding:8px 0 8px 20px;margin:0 0 24px}
.mp-case .who{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--inv-mute);text-transform:uppercase;margin:0 0 24px;display:block}
.mp-case .metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mp-case .metric{padding:14px 0;border-top:1px solid rgba(255,255,255,0.08)}
.mp-case .metric .v{font-family:var(--display);font-weight:500;font-size:32px;line-height:1;letter-spacing:-0.025em;color:var(--orange);margin:0 0 4px}
.mp-case .metric .v .it{font-family:var(--serif);font-style:italic;color:var(--inv)}
.mp-case .metric .l{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--inv-mute);margin:0}

/* === FAQ === */
.mp-faq{padding:96px 0;border-top:1px solid var(--line)}
.mp-faq h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.5vw,56px);line-height:1.05;letter-spacing:-0.035em;margin:0 0 48px;max-width:22ch}
.mp-faq h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-faq-item{border-bottom:1px solid var(--line);padding:0}
.mp-faq-item summary{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1.3;padding:24px 56px 24px 0;cursor:pointer;position:relative;list-style:none}
.mp-faq-item summary::-webkit-details-marker{display:none}
.mp-faq-item summary::after{content:"+";position:absolute;right:0;top:24px;font-family:var(--display);font-size:32px;font-weight:300;color:var(--orange);transition:transform 220ms ease}
.mp-faq-item[open] summary::after{content:"−"}
.mp-faq-item p{font-size:16px;line-height:1.7;color:var(--fg-dim);padding:0 0 28px;margin:0;max-width:78ch}
.mp-faq-item p strong{color:var(--fg)}

/* === Sources block === */
.mp-sources{padding:80px 0;background:var(--bg-soft);border-top:1px solid var(--line)}
.mp-sources h3{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-mute);margin:0 0 24px}
.mp-sources ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mp-sources li{font-size:13.5px;line-height:1.5;color:var(--fg-dim);padding-left:20px;position:relative}
.mp-sources li::before{content:"§";position:absolute;left:0;color:var(--orange);font-family:var(--serif);font-style:italic}
.mp-sources a{color:var(--fg);border-bottom:1px solid var(--line-strong);transition:color 160ms}
.mp-sources a:hover{color:var(--orange);border-color:var(--orange)}

/* === CTA === */
.mp-cta{padding:120px 0;background:var(--orange);color:#fff;text-align:center;position:relative;overflow:hidden}
.mp-cta::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,0.08)}
.mp-cta::after{content:"";position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;background:rgba(0,0,0,0.06)}
.mp-cta-inner{position:relative;z-index:2;max-width:880px;margin:0 auto}
.mp-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,6vw,96px);line-height:0.95;letter-spacing:-0.04em;margin:0 0 24px;color:#fff}
.mp-cta h2 .it{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,0.85)}
.mp-cta .lead{font-size:19px;line-height:1.55;color:rgba(255,255,255,0.9);max-width:52ch;margin:0 auto 40px}
.mp-cta .btn{background:#0A0A0A;color:#fff;padding:20px 36px;font-size:14px}
.mp-cta .btn:hover{background:#fff;color:var(--orange);transform:translateY(-2px)}

/* Responsive */
@media (max-width:900px){
  .mp-hero-grid,.mp-why-grid{grid-template-columns:1fr;gap:48px}
  .mp-hero-illus{height:360px;order:-1;max-width:480px;margin:0 auto}
  .mp-kpi-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .mp-data-grid{gap:32px}
  .mp-data-item{flex-basis:calc((100% - 32px)/2)}
  .mp-services-grid,.mp-process-grid,.mp-cases-grid{grid-template-columns:1fr;gap:16px}
  .mp-sources ul{grid-template-columns:1fr}
  .mp-table{font-size:12px}.mp-table th,.mp-table td{padding:10px 8px}
}
@media (max-width:480px){
  .mp-hero{padding:48px 0 80px}
  .mp-data,.mp-kpi,.mp-services,.mp-process,.mp-why,.mp-faq,.mp-cases,.mp-table-section{padding:64px 0}
  .mp-kpi-grid{grid-template-columns:1fr;gap:32px}
  .mp-data-grid{gap:32px}
  .mp-data-item{flex-basis:100%}
  .mp-cta{padding:80px 0}
  /* FIX diseño 2026-09-25 (Summum): a ≤480px .mp-table heredaba
     "body table th,body table td{white-space:normal;word-break:break-word}"
     (regla global sin media query, ver más abajo "Tablas: cubrir TODAS")
     porque aquí no había ninguna regla .mp-table th/td que le ganase en
     especificidad — sí la hay para el rango 481-1100px (ISSUE 8, más abajo)
     pero no para ≤480px. Con columnas de ~49px eso partía palabras letra a
     letra ("ASP ECT O"). Arreglo: mismo patrón que ISSUE 8 (thead/tbody/tr
     como tabla, word-break:normal) + overflow-wrap/hyphens explícitos +
     min-width por celda para forzar scroll horizontal legible en vez de
     comprimir el texto. Acotado a .mp-table (clase exclusiva de estas 7
     páginas de marketplaces, verificado 25-sep-2026). */
  .mp-table-section{position:relative}
  .mp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .mp-table thead,.mp-table tbody,.mp-table tr{display:table;width:100%;table-layout:auto}
  .mp-table th,.mp-table td{font-size:12px;padding:10px 8px;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;min-width:92px}
  .mp-table th:first-child,.mp-table td:first-child{min-width:108px}
  .mp-table-section::after{content:"";position:absolute;top:0;right:0;width:20px;height:100%;background:linear-gradient(to right,transparent,rgba(0,0,0,0.06));pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .pkg-a,.pkg-b,.pkg-c,.orbit-ring,.orbit-ring-rev,.mp-marquee-track{animation:none !important}
}

/* hash 4012c4d4 · primer file: articulos/index.html
 * FIX-B (2026-05-21): eliminadas reglas no usadas .art-head, .art-meta,
 * .art-title, .art-desc, .art-arr, .cluster-head, .cluster-eyebrow.
 * Auditoría confirmó 0 ocurrencias en bundle HTML y 0 en bundle-extract.json.
 * Se conservan .cluster-section, .art-grid y .art-card (sí usados). */
  .cluster-section { padding: 64px 0; border-top: 1px solid var(--line); }
  .cluster-section:first-of-type { border-top: none; }
  .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .art-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .art-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  @media (max-width: 960px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .art-grid { grid-template-columns: 1fr; } }

/* hash 817b81b7 · primer file: ataquintagame/index.html
 * FIX-2.1 (2026-05-21): scopeado a body.page-ataquintagame para evitar fuga
 * del bg cream y de las CSS custom properties al resto del sitio. Las vars
 * --paper/--paper-deep/--ink-warm/--gold/--gold-deep/--ochre solo existen
 * en ese contexto; las reglas .ata-* / .id-* / .route* / .story-* / .scr-*
 * etc. solo aparecen en el template ataquintagame, así que se mantienen
 * sin scoping adicional (no van a renderizar en otras páginas). */
body.page-ataquintagame {
    --paper: #F5EFE2;
    --paper-deep: #ECE3CC;
    --ink-warm: #2A1F0C;
    --gold: #C9A24E;
    --gold-deep: #8C6B26;
    --ochre: #B85C1A;
    background: var(--paper);
  }

  /* Paper texture overlay only inside ataquintagame */
  body.page-ataquintagame::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(201,162,78,0.08), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(184,92,26,0.06), transparent 50%);
    background-color: var(--paper);
  }

  .ata-hero {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
  }
  .ata-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 23px, rgba(42,31,12,0.02) 23px 24px),
      repeating-linear-gradient(90deg, transparent 0 23px, rgba(42,31,12,0.02) 23px 24px);
  }
  .ata-stamp {
    position: absolute; top: 100px; right: 8%;
    width: 180px; height: 180px;
    border: 3px solid var(--gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    transform: rotate(-8deg);
    color: var(--gold-deep);
    background: rgba(245,239,226,0.6);
    box-shadow: 0 6px 20px rgba(140,107,38,0.18);
  }
  .ata-stamp .yr { font-family: var(--display); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.04em; }
  .ata-stamp .lb { font-family: var(--mono); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; margin-top: 4px; text-align: center; }

  .ata-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-warm); text-decoration: none;
    margin-bottom: 48px;
  }
  .ata-back:hover { color: var(--ochre); }

  .ata-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-deep);
    padding: 8px 14px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(245,239,226,0.6);
    margin-bottom: 36px;
  }
  .ata-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); }

  .ata-hero h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(64px, 10vw, 168px);
    letter-spacing: -0.05em;
    line-height: 0.88;
    margin: 0;
    color: var(--ink-warm);
    max-width: 14ch;
  }
  .ata-hero h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ochre); }

  .ata-meta-row {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: end;
    padding-top: 32px;
    border-top: 1px solid rgba(42,31,12,0.18);
  }
  .ata-meta-row .desc {
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink-warm);
    max-width: 60ch;
  }
  .ata-meta-row .desc em { color: var(--ochre); font-style: italic; }
  .ata-meta-row .facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.06em;
    color: var(--ink-warm);
  }
  .ata-meta-row .facts .lbl { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 4px; }

  /* Logo + heading row */
  .ata-logo-row { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
  .ata-logo { width: 160px; height: 160px; border-radius: 50%; background: var(--paper); padding: 14px; box-shadow: 0 8px 24px rgba(140,107,38,0.18); border: 1px solid rgba(42,31,12,0.10); animation: ataLogoFloat 6s ease-in-out infinite; }
  @keyframes ataLogoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

  .ata-stores { margin-top: 40px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(42,31,12,0.18); }
  .ata-stores-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-right: 8px; }
  .ata-store { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; background: var(--ink-warm); color: var(--paper); border-radius: 12px; text-decoration: none; transition: transform 200ms ease, background 200ms ease; }
  .ata-store:hover { transform: translateY(-2px); background: var(--ochre); }
  .ata-store-ico { font-size: 24px; line-height: 1; }
  .ata-store-txt { display: flex; flex-direction: column; line-height: 1.15; }
  .ata-store-txt small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
  .ata-store-txt strong { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }

  /* Identity moodboard */
  .ata-identity { padding: 100px 0; background: var(--ink-warm); color: var(--paper); position: relative; overflow: hidden; }
  .ata-identity::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(201,162,78,0.20), transparent 50%); pointer-events: none; }
  .ata-identity .wrap { position: relative; }
  .ata-identity .eye { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
  .ata-identity .eye::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
  .ata-identity h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.5vw, 76px); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 56px; max-width: 18ch; }
  .ata-identity h2 .it { font-family: var(--serif); font-style: italic; color: var(--gold); }
  .id-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
  .id-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .id-piece { aspect-ratio: 1; border-radius: 16px; padding: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform 240ms ease; }
  .id-piece:hover { transform: translateY(-3px); }
  .id-piece .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
  .id-piece-logo { background: var(--paper); padding: 14px; }
  .id-piece-logo .lbl { color: var(--gold-deep); }
  .id-piece-logo img { width: 100%; height: 100%; object-fit: contain; }
  .id-piece-colors { background: linear-gradient(135deg, #1F3360, #6B4F1D); }
  .id-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; align-content: center; }
  .id-swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); }
  .id-swatch.s1 { background: #C9A24E; }
  .id-swatch.s2 { background: #2A5B8A; }
  .id-swatch.s3 { background: #C5572A; }
  .id-swatch.s4 { background: #2A1F0C; }
  .id-piece-type { background: var(--paper); color: var(--ink-warm); align-items: center; justify-content: center; }
  .id-piece-type .typo-aa { font-family: var(--display); font-weight: 500; font-size: 72px; letter-spacing: -0.05em; line-height: 0.9; }
  .id-piece-type .typo-aa .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .id-piece-type .lbl { position: absolute; top: 18px; left: 18px; color: var(--gold-deep); }
  .id-piece-mascot { background: radial-gradient(circle at 35% 30%, var(--gold), #5C4218); align-items: center; justify-content: center; }
  .id-piece-mascot .marks { display: flex; gap: 22px; font-size: 42px; color: var(--ink-warm); }
  .id-piece-mascot .lbl { position: absolute; top: 18px; left: 18px; }
  .id-narrative { font-family: var(--serif); font-size: 17px; line-height: 1.65; color: var(--paper); margin: 0; }
  .id-narrative em { color: var(--gold); font-style: italic; }
  .id-narrative + .id-narrative { margin-top: 18px; }
  .id-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
  .id-tag { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; background: rgba(201,162,78,0.06); }

  /* Story highlights */
  .ata-story { padding: 100px 0; background: var(--paper); }
  .ata-story h3.section-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 16px; }
  .ata-story h2 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.04em; line-height: 1; margin: 0 0 48px; color: var(--ink-warm); max-width: 24ch; }
  .ata-story h2 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .story-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .story-card { background: #FFFFFF; border: 1px solid rgba(42,31,12,0.14); border-radius: 16px; padding: 24px 22px; transition: transform 240ms ease; }
  .story-card:hover { transform: translateY(-3px); }
  .story-card .ord { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; display: block; }
  .story-card h4 { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 8px; color: var(--ink-warm); }
  .story-card h4 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .story-card p { font-size: 13.5px; line-height: 1.55; color: rgba(42,31,12,0.7); margin: 0; }

  /* Routes section */
  .ata-routes {
    padding: 100px 0;
    background: var(--paper-deep);
    border-top: 1px solid rgba(42,31,12,0.12);
    border-bottom: 1px solid rgba(42,31,12,0.12);
  }
  .ata-routes h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(40px, 5.5vw, 76px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--ink-warm);
    margin: 0 0 48px;
    max-width: 18ch;
  }
  .ata-routes h2 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .route {
    background: var(--paper);
    border: 1px solid rgba(42,31,12,0.18);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 240ms ease;
  }
  .route:hover { transform: translateY(-4px); }
  .route::before {
    content: ""; position: absolute; top: -30px; right: -30px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold), transparent 70%);
    opacity: 0.45;
    pointer-events: none;
  }
  .route .ord {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--gold-deep);
    text-transform: uppercase;
  }
  .route h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 38px;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 12px 0 22px;
    color: var(--ink-warm);
  }
  .route h3 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .route .guide {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--ink-warm); color: var(--paper);
    border-radius: 999px;
    font-family: 'Geist Mono', monospace; font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 22px;
  }
  .route .guide .ico { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; color: var(--ink-warm); font-size: 12px; }
  .route p { font-size: 15px; line-height: 1.6; color: rgba(42,31,12,0.78); margin: 0 0 24px; }
  .route .specs { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(42,31,12,0.18); }
  .route .spec { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-warm); letter-spacing: 0.06em; }
  .route .spec .v { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ochre); display: block; line-height: 1; margin-bottom: 4px; }

  /* Locations strip */
  .ata-strip {
    padding: 60px 0;
    border-bottom: 1px solid rgba(42,31,12,0.12);
  }
  .ata-strip h3 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 24px;
  }
  .locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .loc-tag {
    padding: 24px 22px;
    border: 1px dashed rgba(42,31,12,0.28);
    border-radius: 14px;
    background: var(--paper);
  }
  .loc-tag .nm {
    font-family: var(--display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.025em;
    color: var(--ink-warm);
  }
  .loc-tag .desc {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(42,31,12,0.65);
    margin-top: 8px;
  }

  /* Sponsors */
  .ata-sponsors {
    padding: 80px 0;
    background: var(--paper-deep);
  }
  .ata-sponsors h3 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 24px;
  }
  .sponsors-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  }
  .sponsor {
    padding: 22px 20px;
    background: var(--paper);
    border: 1px solid rgba(42,31,12,0.18);
    border-radius: 12px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-warm);
    line-height: 1.5;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .sponsor img.sponsor-img { width: 100px; height: 100px; object-fit: contain; }
  .sponsor img.sponsor-img-wide { width: 160px; height: 100px; object-fit: contain; }
  .sponsor .sponsor-mark { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; color: var(--ochre); letter-spacing: -0.04em; }
  .sponsor strong { display: block; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; margin-bottom: 4px; }

  /* Heritage quote */
  .ata-quote {
    padding: 100px 0;
    background: var(--ink-warm);
    color: var(--paper);
    text-align: center;
  }
  .ata-quote .mark { font-family: var(--serif); font-size: 80px; color: var(--gold); line-height: 0.5; margin-bottom: 16px; }
  .ata-quote p {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.35;
    max-width: 30ch;
    margin: 0 auto;
    letter-spacing: -0.015em;
  }
  .ata-quote .sig {
    margin-top: 32px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
  }

  /* Closing CTA */
  .ata-end {
    padding: 80px 0 100px;
    text-align: center;
  }
  .ata-end h3 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(32px, 4vw, 56px);
    letter-spacing: -0.03em;
    color: var(--ink-warm);
    margin: 0 0 12px;
  }
  .ata-end h3 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .ata-end p { font-family: var(--serif); font-size: 17px; color: rgba(42,31,12,0.7); max-width: 56ch; margin: 0 auto 36px; }
  .ata-end .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .ata-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    font-family: var(--mono); font-size: 12px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform 200ms ease;
  }
  .ata-btn-primary { background: var(--ink-warm); color: var(--paper); }
  .ata-btn-primary:hover { transform: translateY(-2px); background: var(--ochre); }
  .ata-btn-ghost { background: transparent; color: var(--ink-warm); border: 1px solid rgba(42,31,12,0.28); }
  .ata-btn-ghost:hover { border-color: var(--ochre); color: var(--ochre); }

  @media (max-width: 900px) {
    .ata-stamp { display: none; }
    .ata-meta-row { grid-template-columns: 1fr; gap: 28px; }
    .route-grid { grid-template-columns: 1fr; }
    .locs, .sponsors-grid { grid-template-columns: 1fr 1fr; }
    .ata-logo-row { flex-direction: column; align-items: flex-start; gap: 18px; }
    .ata-logo { width: 110px; height: 110px; }
    .id-grid { grid-template-columns: 1fr; }
    .story-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 500px) {
    .locs, .sponsors-grid, .story-grid, .id-board { grid-template-columns: 1fr; }
  }

/* hash 57a43139 · primer file: ataquintagame/index.html */
.ata-assets { padding: 100px 0; background: var(--paper); border-top: 1px solid rgba(42,31,12,0.12); }
  .ata-assets .assets-eye { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; }
  .ata-assets h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.5vw, 70px); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 48px; color: var(--ink-warm); max-width: 18ch; }
  .ata-assets h2 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .assets-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 28px; align-items: start; }
  .assets-figure { margin: 0; background: var(--paper-deep); border: 1px solid rgba(42,31,12,0.14); border-radius: 18px; padding: 18px; box-shadow: 0 12px 32px rgba(140,107,38,0.10); }
  .assets-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
  .assets-figure figcaption { margin-top: 14px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); text-align: center; }
  @media (max-width: 900px) {
    .assets-grid { grid-template-columns: 1fr; gap: 20px; }
  }

/* hash 558b4f1a · primer file: ataquintagame/index.html */
.ata-app { padding: 100px 0; background: var(--paper-deep); border-top: 1px solid rgba(42,31,12,0.12); }
  .ata-app .app-eye { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 16px; }
  .ata-app h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.5vw, 70px); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 24px; color: var(--ink-warm); max-width: 18ch; }
  .ata-app h2 .it { font-family: var(--serif); font-style: italic; color: var(--ochre); }
  .ata-app .app-lead { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: rgba(42,31,12,0.75); max-width: 56ch; margin: 0 0 56px; }
  .app-screens { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; align-items: end; justify-items: center; }
  .phone { width: 220px; height: 440px; background: var(--ink-warm); border-radius: 32px; padding: 10px; position: relative; box-shadow: 0 24px 50px rgba(20,17,13,0.25); border: 2px solid #1a1308; }
  .phone.phone-mid { width: 240px; height: 460px; transform: translateY(-30px); z-index: 2; box-shadow: 0 32px 64px rgba(20,17,13,0.35); }
  .phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; background: #000; border-radius: 0 0 10px 10px; z-index: 3; }
  .phone-screen { width: 100%; height: 100%; border-radius: 24px; overflow: hidden; padding: 36px 18px 18px; display: flex; flex-direction: column; color: var(--paper); position: relative; }
  .scr-1 { background: linear-gradient(160deg, #6B4F1D, var(--ink-warm)); }
  .scr-2 { background: linear-gradient(160deg, #2A5B8A, #102640); }
  .scr-3 { background: linear-gradient(160deg, #C5572A, #6B2A0F); }
  .scr-bar { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 16px; text-align: center; }
  .scr-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
  .scr-mascot { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--paper); color: var(--ink-warm); box-shadow: 0 8px 18px rgba(0,0,0,0.25); margin-bottom: 8px; }
  .scr-mascot-1 { background: var(--gold); color: var(--ink-warm); }
  .scr-mascot-2 { background: var(--paper); color: var(--ochre); }
  .scr-hero h3 { font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; margin: 0; color: var(--paper); }
  .scr-hero p { font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.85); margin: 0; max-width: 22ch; }
  .scr-cta { background: var(--paper); color: var(--ink-warm); text-align: center; padding: 12px; border-radius: 24px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: -0.01em; margin-bottom: 10px; }
  .scr-cta-2 { background: var(--ink-warm); color: var(--paper); }
  .scr-meta { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; }
  .scr-bar-d { color: var(--gold); border-bottom-color: rgba(201,162,78,0.3); }
  .scr-map { flex: 1; background: rgba(255,255,255,0.04); border-radius: 12px; position: relative; overflow: hidden; margin-bottom: 14px; min-height: 140px; }
  .map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 16px 16px; }
  .pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; }
  .pin-active { top: 38%; left: 48%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,162,78,0.6); animation: pinPing 2s infinite; }
  @keyframes pinPing { 0% { box-shadow: 0 0 0 0 rgba(201,162,78,0.6); } 100% { box-shadow: 0 0 0 16px rgba(201,162,78,0); } }
  .pin-done { background: rgba(255,255,255,0.4); }
  .pin-1 { top: 22%; left: 28%; }
  .pin-2 { top: 56%; left: 25%; }
  .pin-next { top: 70%; left: 70%; background: transparent; border: 2px dashed rgba(255,255,255,0.4); }
  .scr-progress { display: flex; gap: 4px; margin-bottom: 14px; }
  .scr-step { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); }
  .scr-step.done { background: var(--gold); }
  .scr-step.current { background: var(--paper); }
  .scr-prompt { font-family: var(--serif); font-size: 14px; line-height: 1.35; color: var(--paper); margin-bottom: 12px; }
  .scr-options { display: flex; gap: 6px; }
  .opt { flex: 1; padding: 10px 6px; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; text-align: center; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--paper); }
  .opt-on { background: var(--gold); color: var(--ink-warm); border-color: var(--gold); }
  @media (max-width: 900px) {
    .app-screens { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
    .phone.phone-mid { transform: translateY(0); }
  }

/* hash ff27ad88 · primer file: servicios/index.html */
.svc-hero { background: var(--bg-soft); padding: 96px 0 80px; position: relative; overflow: hidden; }
  .svc-hero .b1 { position: absolute; top: 60px; right: 8%; width: 140px; height: 140px; border-radius: 50%; background: var(--orange); animation: float 9s ease-in-out infinite; }
  .svc-hero .b2 { position: absolute; top: 240px; right: 24%; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); }
  .svc-hero .b3 { position: absolute; bottom: 80px; right: 18%; width: 70px; height: 70px; border: 1px solid var(--orange); border-radius: 50%; }
  .svc-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(56px, 8vw, 132px); letter-spacing: -0.045em; line-height: 0.95; margin: 24px 0 28px; max-width: 14ch; }
  .svc-hero h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .cat-block { padding: 64px 0; border-bottom: 1px solid var(--line); }
  .cat-block:last-child { border-bottom: 0; }
  .cat-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: baseline; margin-bottom: 32px; }
  .cat-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
  .cat-head h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .cat-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--orange); text-transform: uppercase; margin-bottom: 12px; display: block; }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-grid a { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; text-decoration: none; color: inherit; transition: all 220ms ease; display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
  .svc-grid a:hover { border-color: var(--orange); transform: translateY(-4px); }
  .svc-grid h3 { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
  .svc-grid p { font-size: 14px; line-height: 1.5; color: var(--fg-dim); margin: 0; }
  .svc-grid .arr { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--orange); text-transform: uppercase; }
  @media (max-width: 900px) { .cat-head, .svc-grid { grid-template-columns: 1fr; } }

/* hash 3f5859ae · primer file: sostenibilidad/index.html */
.lp-hero { background: var(--bg-warm); padding: 96px 0 80px; position: relative; overflow: hidden; }
.lp-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.04em; line-height: 1.0; margin: 24px 0; max-width: 18ch; }
.lp-hero h1 .it { font-family: var(--serif); font-style: italic; color: var(--orange); }
.lp-hero .lead { font-size: 19px; line-height: 1.55; max-width: 70ch; margin: 16px 0 24px; }
.lp-hero .meta { display: flex; gap: 24px; font-size: 13px; color: var(--fg-dim); margin-top: 24px; font-family: var(--mono); flex-wrap: wrap; }
.lp-section { padding: 72px 0; }
.lp-section.alt { background: var(--bg-warm); }
.lp-section h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 20px; max-width: 26ch; }
.lp-section h2 .it { font-family: var(--serif); font-style: italic; color: var(--orange); }
.lp-section h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 32px 0 16px; }
.lp-section p { font-size: 16px; line-height: 1.7; max-width: 75ch; }
.lp-section ul { font-size: 16px; line-height: 1.7; max-width: 75ch; padding-left: 0; list-style: none; }
.lp-section ul li { margin-bottom: 14px; padding-left: 24px; position: relative; }
.lp-section ul li::before { content: "→"; position: absolute; left: 0; color: var(--orange); font-weight: 500; }
.lp-section ul li strong { color: var(--fg); font-weight: 500; }
.lp-cta { background: var(--orange); color: white; padding: 64px 0; text-align: center; }
.lp-cta h2 { color: white; margin: 0 0 16px; max-width: none; }
.lp-cta h2 .it { color: var(--fg); }
.lp-cta p { color: white; opacity: 0.9; max-width: 60ch; margin: 0 auto 24px; font-size: 17px; }
.lp-cta .btn-large { background: white; color: var(--fg); padding: 14px 28px; font-size: 16px; font-weight: 500; }
/* FIX-B (2026-05-21): eliminado .section-block (0 ocurrencias en bundle). */


/* --- PAGE_CORE (2 bloques) --- */

/* hash 4d604bfe · primer file: contacto/index.html */
.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 72px);
  }
  .contact-l {
    padding: 96px var(--pad-x) 96px;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .contact-l .breadcrumb { margin-bottom: 36px; }
  .contact-l h1 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.95;
    font-size: clamp(48px, 6vw, 96px);
    margin: 0 0 32px;
    max-width: 12ch;
  }
  .contact-l h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .contact-l .lead { font-size: 18px; max-width: 50ch; }

  .quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 48px 0;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .qs .v { font-family: var(--display); font-weight: 500; font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
  .qs .v .a { color: var(--orange); }
  .qs p { font-size: 13px; color: var(--fg-dim); margin: 8px 0 0; line-height: 1.45; }

  .direct {
    display: grid;
    gap: 16px;
  }
  .direct-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .direct-row .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
  .direct-row a { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--fg); transition: color 160ms ease; }
  .direct-row a:hover { color: var(--orange); }

  .l-circles { position: absolute; bottom: 0; left: 0; pointer-events: none; }
  .l-circles .c1 { position: absolute; bottom: 80px; left: 60px; width: 14px; height: 14px; background: var(--orange); border-radius: 50%; }
  .l-circles .c2 { position: absolute; bottom: 40px; left: 100px; width: 36px; height: 36px; background: var(--yellow); border-radius: 50%; }
  .l-circles .c3 { position: absolute; bottom: 120px; left: 140px; width: 56px; height: 56px; border: 1px solid var(--orange); border-radius: 50%; }

  /* RIGHT — form */
  .contact-r {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 96px var(--pad-x) 96px;
    position: relative;
    overflow: hidden;
  }
  .contact-r::before {
    content: ""; position: absolute; top: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--orange), transparent 70%);
    opacity: 0.45; pointer-events: none;
  }
  .contact-r .form-head { margin-bottom: 48px; position: relative; }
  .contact-r .eyebrow { color: var(--inv-mute); }
  .contact-r h2 {
    font-family: var(--display); font-weight: 500;
    font-size: 44px; letter-spacing: -0.03em; line-height: 1.05;
    margin: 16px 0 0; max-width: 16ch;
  }
  .contact-r h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange); }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    position: relative;
  }
  .form-grid .full { grid-column: 1 / -1; }
  .form-grid .field label { color: var(--inv-mute); }
  .form-grid .field input, .form-grid .field textarea, .form-grid .field select {
    color: var(--inv);
    border-bottom-color: var(--inv-line);
  }
  .form-grid .field input:focus, .form-grid .field textarea:focus { border-color: var(--orange); }
  .form-grid .field input::placeholder, .form-grid .field textarea::placeholder { color: var(--inv-mute); }

  /* radio chips for budget / interest */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    padding: 10px 16px;
    border: 1px solid var(--inv-line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    color: var(--inv-dim);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  .chip:hover { background: var(--inv-line); color: var(--inv); }
  .chip.on { background: var(--orange); color: #fff; border-color: var(--orange); }

  .submit-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--inv-line);
  }
  .submit-row .privacy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--inv-mute); max-width: 36ch; }
  .submit-row .privacy a { color: var(--orange); }

  /* offices small */
  .offices-strip {
    background: var(--bg-soft);
    padding: 64px var(--pad-x);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    border-top: 1px solid var(--line);
  }
  .ofs h3 { font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin: 0; }
  .ofs h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .ofs .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
  .ofs p { font-size: 13px; color: var(--fg-dim); line-height: 1.5; margin: 12px 0 0; }

  @media (max-width: 1100px) {
    .contact-wrap { grid-template-columns: 1fr; }
    .contact-l, .contact-r { padding: 64px var(--pad-x); }
    .form-grid { grid-template-columns: 1fr; }
    .offices-strip { grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px var(--pad-x); }
    .quick-stats { grid-template-columns: 1fr; }
  }

/* hash e850f767 · primer file: universo-summum/index.html */
.head-circles { position: absolute; top: 0; right: 0; width: 50%; height: 100%; pointer-events: none; }
  .hc-1 { top: 80px; right: 8%; width: 96px; height: 96px; background: var(--orange); border-radius: 50%; position: absolute; animation: float 8s ease-in-out infinite; }
  .hc-2 { top: 200px; right: 28%; width: 24px; height: 24px; background: var(--yellow); border-radius: 50%; position: absolute; }
  .hc-3 { bottom: 100px; right: 20%; width: 80px; height: 80px; border: 1px solid var(--orange); border-radius: 50%; position: absolute; }

  /* manifesto */
  .manifesto {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
  }
  .manifesto h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(40px, 5vw, 80px);
    letter-spacing: -0.045em;
    line-height: 1.02;
    max-width: 22ch;
    margin: 0;
  }
  .manifesto h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .manifesto h2 .y { background-image: linear-gradient(var(--yellow), var(--yellow)); background-repeat: no-repeat; background-size: 100% 32%; background-position: 0 88%; padding: 0 4px; }

  /* Pillars */
  .pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 64px;
  }
  .pillar {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    aspect-ratio: 3 / 4;
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--bg);
    transition: transform 220ms ease, border-color 220ms ease;
  }
  .pillar:hover { transform: translateY(-4px); border-color: var(--orange); }
  .pillar.dark { background: var(--bg-ink); color: var(--inv); border-color: transparent; }
  .pillar.warm { background: var(--bg-warm); border-color: transparent; }
  .pillar.accent { background: var(--orange); color: #fff; border-color: transparent; }
  .pillar .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--orange); }
  .pillar.accent .num, .pillar.dark .num { color: var(--yellow); }
  .pillar h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
  }
  .pillar h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .pillar p { font-size: 13px; line-height: 1.5; opacity: 0.85; margin: 0; }

  /* Team / numbers */
  .num-band {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 96px 0;
  }
  .num-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 56px;
  }
  .nbn { border-top: 1px solid var(--inv-line); padding-top: 28px; }
  .nbn .v { font-family: var(--display); font-weight: 500; font-size: 88px; letter-spacing: -0.04em; line-height: 1; }
  .nbn .v .accent { color: var(--orange); }
  .nbn p { font-size: 13px; line-height: 1.5; color: var(--inv-dim); margin: 16px 0 0; }

  /* Offices */
  .offices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 56px;
  }
  .office {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    aspect-ratio: 4 / 5;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
  }
  .office .city {
    font-family: var(--display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
  }
  .office .city .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .office .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--orange); text-transform: uppercase; }
  .office .addr { font-size: 13px; color: var(--fg-dim); line-height: 1.5; margin: 16px 0 0; }
  .office .map {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.06;
  }

  /* Timeline */
  .timeline {
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }
  .tl-row {
    display: grid;
    grid-template-columns: 120px 1fr 1.4fr;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .tl-row .yr {
    font-family: var(--display);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--orange);
  }
  .tl-row h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    margin: 0;
  }
  .tl-row p { font-size: 14px; color: var(--fg-dim); line-height: 1.5; margin: 0; max-width: 60ch; }

  @media (max-width: 900px) {
    .pillars, .offices, .num-band-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .tl-row { grid-template-columns: 80px 1fr; }
    .tl-row p { grid-column: 2; }
    .manifesto { padding: 56px 0; }
  }

  /* === SPECTACULAR SPAIN MAP === */
  .spain-section {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
  }
  .spain-section::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 22% 38%, rgba(255,94,26,0.10), transparent 42%),
      radial-gradient(circle at 78% 70%, rgba(255,214,107,0.07), transparent 50%);
    pointer-events: none;
  }
  .spain-grid-bg {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(250,250,247,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(250,250,247,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    pointer-events: none;
  }
  .spain-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .spain-floats .c {
    position: absolute; border-radius: 50%;
    animation: float 8s ease-in-out infinite;
  }
  .spain-floats .c1 { top: 60px; left: 4%; width: 18px; height: 18px; background: var(--orange); }
  .spain-floats .c2 { top: 180px; left: 14%; width: 90px; height: 90px; border: 1px solid var(--inv-line); animation-delay: -2s; }
  .spain-floats .c3 { bottom: 140px; right: 6%; width: 36px; height: 36px; background: var(--yellow); animation-delay: -4s; }
  .spain-floats .c4 { bottom: 80px; left: 8%; width: 10px; height: 10px; background: var(--orange); animation-delay: -1s; }
  .spain-floats .c5 { top: 80px; right: 18%; width: 160px; height: 160px; border: 1px solid rgba(250,250,247,0.06); animation-delay: -3s; }

  .spain-header { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-bottom: 80px; position: relative; }
  .spain-header h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(54px, 8vw, 140px);
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin: 16px 0 0;
    max-width: 14ch;
  }
  .spain-header h2 .it { font-family: var(--serif); font-style: italic; color: var(--orange); }
  .spain-header .hdr-right { text-align: right; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--inv-dim); line-height: 1.7; }
  .spain-header .hdr-right .big { font-family: var(--display); font-size: 36px; letter-spacing: -0.02em; color: var(--inv); display: block; line-height: 1; }
  .spain-header .hdr-right a { color: var(--orange); text-decoration: none; }

  .spain-stage { position: relative; }
  .spain-map-wrap {
    position: relative;
    border: 1px solid var(--inv-line);
    border-radius: 28px;
    padding: 32px;
    background:
      linear-gradient(180deg, rgba(255,94,26,0.04), transparent 30%),
      rgba(250,250,247,0.015);
    overflow: hidden;
  }
  .spain-map-wrap .tick {
    position: absolute;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--inv-mute);
    text-transform: uppercase;
  }
  .spain-map-wrap .tick-tl { top: 16px; left: 20px; }
  .spain-map-wrap .tick-tr { top: 16px; right: 20px; }
  .spain-map-wrap .tick-bl { bottom: 16px; left: 20px; }
  .spain-map-wrap .tick-br { bottom: 16px; right: 20px; }
  .spain-map-wrap .compass {
    position: absolute; top: 22px; right: 50%;
    transform: translateX(50%);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em;
    color: var(--inv-mute);
  }

  .spain-svg { width: 100%; height: auto; display: block; }
  .spain-svg .country { fill: rgba(250,250,247,0.04); stroke: rgba(250,250,247,0.18); stroke-width: 1.2; }
  .spain-svg .country.portugal { fill: rgba(250,250,247,0.025); stroke-dasharray: 4 4; stroke: rgba(250,250,247,0.12); }
  .spain-svg .border-internal { stroke: rgba(250,250,247,0.10); stroke-dasharray: 3 5; fill: none; }
  .spain-svg .river { fill: none; stroke: rgba(100,170,255,0.18); stroke-width: 1; stroke-dasharray: 2 3; }
  .spain-svg .arc { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0.55; }
  .spain-svg .city-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    fill: var(--inv-mute); text-transform: uppercase;
  }
  .spain-svg .pin-group { cursor: pointer; }
  .spain-svg .pin-core { fill: var(--orange); transition: r 240ms ease; }
  .spain-svg .pin-core.hq { fill: var(--yellow); }
  .spain-svg .pin-ring-1, .spain-svg .pin-ring-2 {
    fill: none; stroke: var(--orange); stroke-width: 1; transform-origin: center; transform-box: fill-box;
    animation: pinPulse 2.8s ease-out infinite;
  }
  .spain-svg .pin-ring-2 { animation-delay: -1.4s; }
  .spain-svg .pin-group.is-hq .pin-ring-1,
  .spain-svg .pin-group.is-hq .pin-ring-2 { stroke: var(--yellow); }
  @keyframes pinPulse {
    0%   { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(3.6); opacity: 0; }
  }
  .spain-svg .pin-group .pin-label-box { opacity: 0; transition: opacity 240ms ease; }
  .spain-svg .pin-group.active .pin-label-box,
  .spain-svg .pin-group:hover .pin-label-box { opacity: 1; }
  .spain-svg .pin-group.active .pin-core,
  .spain-svg .pin-group:hover .pin-core { r: 8; }

  .canaries-inset {
    position: absolute; left: 56px; bottom: 56px;
    width: 200px; padding: 12px 14px;
    border: 1px dashed var(--inv-line);
    border-radius: 14px;
    background: rgba(10,10,10,0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .canaries-inset .ci-label {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; color: var(--inv-mute); text-transform: uppercase;
  }
  .canaries-inset svg { width: 100%; height: 56px; margin-top: 6px; display: block; }
  .canaries-inset .ci-pin-core { fill: var(--orange); }
  .canaries-inset .ci-pin-ring { fill: none; stroke: var(--orange); transform-origin: center; transform-box: fill-box; animation: pinPulse 2.8s ease-out infinite; }
  .canaries-inset .ci-foot { font-family: var(--mono); font-size: 10px; color: var(--inv); margin-top: 4px; letter-spacing: 0.04em; }
  .canaries-inset .ci-foot .o { color: var(--orange); }

  .spain-cards {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    margin-top: 36px;
  }
  .spain-card {
    position: relative;
    padding: 24px 22px 22px;
    border-radius: 18px;
    background: rgba(250,250,247,0.025);
    border: 1px solid var(--inv-line);
    cursor: pointer;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1), background 280ms ease, border-color 280ms ease;
    overflow: hidden;
  }
  .spain-card::before {
    content: "";
    position: absolute; left: 22px; top: 24px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,94,26,0.18);
  }
  .spain-card.is-hq::before { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,214,107,0.22); }
  .spain-card .role {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--inv-mute); margin-left: 18px;
  }
  .spain-card .city {
    font-family: var(--display); font-weight: 500; font-size: 30px;
    letter-spacing: -0.03em; margin-top: 28px; line-height: 1;
  }
  .spain-card .coords { font-family: var(--mono); font-size: 10px; color: var(--inv-mute); margin-top: 6px; letter-spacing: 0.06em; }
  .spain-card .divider-line { height: 1px; background: var(--inv-line); margin: 18px 0 12px; }
  .spain-card .email { font-family: var(--mono); font-size: 11px; color: var(--inv-dim); letter-spacing: 0.02em; word-break: break-all; }
  .spain-card.is-hq { border-color: rgba(255,214,107,0.4); background: rgba(255,214,107,0.06); }
  .spain-card.active, .spain-card:hover {
    transform: translateY(-3px);
    border-color: var(--orange);
    background: rgba(255,94,26,0.08);
  }
  .spain-card.is-hq.active, .spain-card.is-hq:hover {
    border-color: var(--yellow);
    background: rgba(255,214,107,0.12);
  }

  .spain-footline {
    margin-top: 56px;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 28px; border-top: 1px solid var(--inv-line);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--inv-mute); flex-wrap: wrap; gap: 16px;
  }
  .spain-footline .badge {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--inv);
  }
  .spain-footline .badge .b-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: ping 1.8s infinite ease-in-out; }
  @keyframes ping {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
  }

  @media (max-width: 1100px) {
    .spain-cards { grid-template-columns: repeat(3, 1fr); }
    .spain-header { grid-template-columns: 1fr; gap: 24px; }
    .spain-header .hdr-right { text-align: left; }
    .canaries-inset { position: static; width: auto; margin-top: 12px; }
  }
  @media (max-width: 700px) {
    .spain-cards { grid-template-columns: 1fr 1fr; }
    .spain-section { padding: 96px 0 80px; }
    .spain-map-wrap { padding: 16px; }
  }


/* --- BLOG_POST (4 bloques) --- */

/* hash c7730a2a · primer file: blog/agente-digitalizador/index.html */
/* POST template — cabecera por cluster */
  .post-head { padding: 80px 0 56px; position: relative; overflow: hidden; }
  .post-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #FFB800, #FF5E1A); opacity: 0.08; z-index: 0; }
  .post-head .wrap { position: relative; z-index: 1; }
  .post-head .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 18px; }
  .post-head .ph-eyebrow .badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #FFB800, #FF5E1A); color: #fff; font-size: 12px; font-weight: 600; }
  .post-head h1 { max-width: 22ch; margin: 0 0 24px; }
  .post-head .post-meta { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); padding-top: 24px; border-top: 1px solid var(--line); }
  .post-head .post-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post-head .post-meta .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .breadcrumb { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
  .breadcrumb a { color: var(--fg-mute); }
  .breadcrumb .sep { opacity: 0.4; }
  /* Body */
  .post-body { padding: 48px 0 96px; }
  .post-body .wrap { max-width: 760px; }
  .post-body h2 { font-family: var(--display); font-weight: 500; font-size: 36px; margin: 56px 0 20px; letter-spacing: -0.02em; line-height: 1.15; }
  .post-body h3 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 36px 0 14px; letter-spacing: -0.01em; }
  .post-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--fg); }
  .post-body ul, .post-body ol { font-size: 17px; line-height: 1.7; margin: 0 0 22px; padding-left: 22px; }
  .post-body li { margin-bottom: 8px; }
  .post-body strong { font-weight: 600; }
  .post-body a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .post-body a:hover { background: var(--yellow); color: var(--fg); text-decoration: none; }
  .ssm-lead { font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--fg); margin-bottom: 32px; }
  .ssm-post-intro { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  /* Related */
  .post-related { padding: 80px 0; background: var(--bg-soft); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .related-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  .related-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 12px; }
  .related-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
  .related-title { font-family: var(--display); font-size: 18px; font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
  .related-arr { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: 0.1em; }
  /* FAQs */
  .post-faqs { padding: 80px 0; }
  .post-faqs .wrap { max-width: 800px; }
  .faq-list { margin-top: 36px; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item summary { cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 500; list-style: none; padding-right: 32px; position: relative; }
  .post-faqs .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 24px; font-weight: 300; color: var(--orange); transition: transform 220ms ease; }
  .post-faqs .faq-item[open] summary::after { content: "−"; }
  .faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-mute); }
  /* CTA */
  .post-cta { padding: 96px 0; background: var(--fg); color: #fff; text-align: center; }
  .post-cta .wrap { max-width: 720px; }
  .post-cta h2 { font-family: var(--display); font-weight: 400; font-size: 48px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
  .post-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin: 0 0 32px; }
  .post-cta .btn { background: var(--orange); color: #fff; padding: 14px 28px; border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 760px) {
    .related-grid { grid-template-columns: 1fr; }
    .post-cta h2 { font-size: 32px; }
  }

/* hash fd442e7b · primer file: blog/asesor-digital-kit-consulting/index.html */
/* POST template — cabecera por cluster */
  .post-head { padding: 80px 0 56px; position: relative; overflow: hidden; }
  .post-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #FFD400, #FFB800); opacity: 0.08; z-index: 0; }
  .post-head .wrap { position: relative; z-index: 1; }
  .post-head .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 18px; }
  .post-head .ph-eyebrow .badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #FFD400, #FFB800); color: #fff; font-size: 12px; font-weight: 600; }
  .post-head h1 { max-width: 22ch; margin: 0 0 24px; }
  .post-head .post-meta { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); padding-top: 24px; border-top: 1px solid var(--line); }
  .post-head .post-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post-head .post-meta .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .breadcrumb { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
  .breadcrumb a { color: var(--fg-mute); }
  .breadcrumb .sep { opacity: 0.4; }
  /* Body */
  .post-body { padding: 48px 0 96px; }
  .post-body .wrap { max-width: 760px; }
  .post-body h2 { font-family: var(--display); font-weight: 500; font-size: 36px; margin: 56px 0 20px; letter-spacing: -0.02em; line-height: 1.15; }
  .post-body h3 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 36px 0 14px; letter-spacing: -0.01em; }
  .post-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--fg); }
  .post-body ul, .post-body ol { font-size: 17px; line-height: 1.7; margin: 0 0 22px; padding-left: 22px; }
  .post-body li { margin-bottom: 8px; }
  .post-body strong { font-weight: 600; }
  .post-body a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .post-body a:hover { background: var(--yellow); color: var(--fg); text-decoration: none; }
  .ssm-lead { font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--fg); margin-bottom: 32px; }
  .ssm-post-intro { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  /* Related */
  .post-related { padding: 80px 0; background: var(--bg-soft); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .related-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  .related-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 12px; }
  .related-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
  .related-title { font-family: var(--display); font-size: 18px; font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
  .related-arr { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: 0.1em; }
  /* FAQs */
  .post-faqs { padding: 80px 0; }
  .post-faqs .wrap { max-width: 800px; }
  .faq-list { margin-top: 36px; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item summary { cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 500; list-style: none; padding-right: 32px; position: relative; }
  .post-faqs .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 24px; font-weight: 300; color: var(--orange); transition: transform 220ms ease; }
  .post-faqs .faq-item[open] summary::after { content: "−"; }
  .faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-mute); }
  /* CTA */
  .post-cta { padding: 96px 0; background: var(--fg); color: #fff; text-align: center; }
  .post-cta .wrap { max-width: 720px; }
  .post-cta h2 { font-family: var(--display); font-weight: 400; font-size: 48px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
  .post-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin: 0 0 32px; }
  .post-cta .btn { background: var(--orange); color: #fff; padding: 14px 28px; border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 760px) {
    .related-grid { grid-template-columns: 1fr; }
    .post-cta h2 { font-size: 32px; }
  }

/* hash 6f824e12 · primer file: blog/certificaciones-iso-espana-2024/index.html */
/* POST template — cabecera por cluster */
  .post-head { padding: 80px 0 56px; position: relative; overflow: hidden; }
  .post-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #2A5B8A, #6B9DFF); opacity: 0.08; z-index: 0; }
  .post-head .wrap { position: relative; z-index: 1; }
  .post-head .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 18px; }
  .post-head .ph-eyebrow .badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #2A5B8A, #6B9DFF); color: #fff; font-size: 12px; font-weight: 600; }
  .post-head h1 { max-width: 22ch; margin: 0 0 24px; }
  .post-head .post-meta { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); padding-top: 24px; border-top: 1px solid var(--line); }
  .post-head .post-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post-head .post-meta .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .breadcrumb { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
  .breadcrumb a { color: var(--fg-mute); }
  .breadcrumb .sep { opacity: 0.4; }
  /* Body */
  .post-body { padding: 48px 0 96px; }
  .post-body .wrap { max-width: 760px; }
  .post-body h2 { font-family: var(--display); font-weight: 500; font-size: 36px; margin: 56px 0 20px; letter-spacing: -0.02em; line-height: 1.15; }
  .post-body h3 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 36px 0 14px; letter-spacing: -0.01em; }
  .post-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--fg); }
  .post-body ul, .post-body ol { font-size: 17px; line-height: 1.7; margin: 0 0 22px; padding-left: 22px; }
  .post-body li { margin-bottom: 8px; }
  .post-body strong { font-weight: 600; }
  .post-body a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .post-body a:hover { background: var(--yellow); color: var(--fg); text-decoration: none; }
  .ssm-lead { font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--fg); margin-bottom: 32px; }
  .ssm-post-intro { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  /* Related */
  .post-related { padding: 80px 0; background: var(--bg-soft); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .related-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  .related-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 12px; }
  .related-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
  .related-title { font-family: var(--display); font-size: 18px; font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
  .related-arr { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: 0.1em; }
  /* FAQs */
  .post-faqs { padding: 80px 0; }
  .post-faqs .wrap { max-width: 800px; }
  .faq-list { margin-top: 36px; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item summary { cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 500; list-style: none; padding-right: 32px; position: relative; }
  .post-faqs .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 24px; font-weight: 300; color: var(--orange); transition: transform 220ms ease; }
  .post-faqs .faq-item[open] summary::after { content: "−"; }
  .faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-mute); }
  /* CTA */
  .post-cta { padding: 96px 0; background: var(--fg); color: #fff; text-align: center; }
  .post-cta .wrap { max-width: 720px; }
  .post-cta h2 { font-family: var(--display); font-weight: 400; font-size: 48px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
  .post-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin: 0 0 32px; }
  .post-cta .btn { background: var(--orange); color: #fff; padding: 14px 28px; border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 760px) {
    .related-grid { grid-template-columns: 1fr; }
    .post-cta h2 { font-size: 32px; }
  }

/* hash 4e534ecd · primer file: blog/cuanto-cuesta-marketing-digital/index.html */
/* POST template — cabecera por cluster */
  .post-head { padding: 80px 0 56px; position: relative; overflow: hidden; }
  .post-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #14110D, #4a4a4a); opacity: 0.08; z-index: 0; }
  .post-head .wrap { position: relative; z-index: 1; }
  .post-head .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 18px; }
  .post-head .ph-eyebrow .badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #14110D, #4a4a4a); color: #fff; font-size: 12px; font-weight: 600; }
  .post-head h1 { max-width: 22ch; margin: 0 0 24px; }
  .post-head .post-meta { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); padding-top: 24px; border-top: 1px solid var(--line); }
  .post-head .post-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post-head .post-meta .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .breadcrumb { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
  .breadcrumb a { color: var(--fg-mute); }
  .breadcrumb .sep { opacity: 0.4; }
  /* Body */
  .post-body { padding: 48px 0 96px; }
  .post-body .wrap { max-width: 760px; }
  .post-body h2 { font-family: var(--display); font-weight: 500; font-size: 36px; margin: 56px 0 20px; letter-spacing: -0.02em; line-height: 1.15; }
  .post-body h3 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 36px 0 14px; letter-spacing: -0.01em; }
  .post-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--fg); }
  .post-body ul, .post-body ol { font-size: 17px; line-height: 1.7; margin: 0 0 22px; padding-left: 22px; }
  .post-body li { margin-bottom: 8px; }
  .post-body strong { font-weight: 600; }
  .post-body a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .post-body a:hover { background: var(--yellow); color: var(--fg); text-decoration: none; }
  .ssm-lead { font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--fg); margin-bottom: 32px; }
  .ssm-post-intro { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  /* Related */
  .post-related { padding: 80px 0; background: var(--bg-soft); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .related-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  .related-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 12px; }
  .related-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
  .related-title { font-family: var(--display); font-size: 18px; font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
  .related-arr { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: 0.1em; }
  /* FAQs */
  .post-faqs { padding: 80px 0; }
  .post-faqs .wrap { max-width: 800px; }
  .faq-list { margin-top: 36px; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item summary { cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 500; list-style: none; padding-right: 32px; position: relative; }
  .post-faqs .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 24px; font-weight: 300; color: var(--orange); transition: transform 220ms ease; }
  .post-faqs .faq-item[open] summary::after { content: "−"; }
  .faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-mute); }
  /* CTA */
  .post-cta { padding: 96px 0; background: var(--fg); color: #fff; text-align: center; }
  .post-cta .wrap { max-width: 720px; }
  .post-cta h2 { font-family: var(--display); font-weight: 400; font-size: 48px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
  .post-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin: 0 0 32px; }
  .post-cta .btn { background: var(--orange); color: #fff; padding: 14px 28px; border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 760px) {
    .related-grid { grid-template-columns: 1fr; }
    .post-cta h2 { font-size: 32px; }
  }


/* --- PILLAR (1 bloques) --- */

/* hash ab587b27 · primer file: blog/ai-act-iso-42001-pyme-cumplimiento-2026/index.html */
/* POST template — cabecera por cluster */
  .post-head { padding: 80px 0 56px; position: relative; overflow: hidden; }
  .post-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #FFD400, #FFB800); opacity: 0.08; z-index: 0; }
  .post-head .wrap { position: relative; z-index: 1; }
  .post-head .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 18px; }
  .post-head .ph-eyebrow .badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #FFD400, #FFB800); color: #fff; font-size: 12px; font-weight: 600; }
  .post-head h1 { max-width: 22ch; margin: 0 0 24px; }
  .post-head .post-meta { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); padding-top: 24px; border-top: 1px solid var(--line); }
  .post-head .post-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .post-head .post-meta .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
  .breadcrumb { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
  .breadcrumb a { color: var(--fg-mute); }
  .breadcrumb .sep { opacity: 0.4; }
  /* Body */
  .post-body { padding: 48px 0 96px; }
  .post-body .wrap { max-width: 760px; }
  .post-body h2 { font-family: var(--display); font-weight: 500; font-size: 36px; margin: 56px 0 20px; letter-spacing: -0.02em; line-height: 1.15; }
  .post-body h3 { font-family: var(--display); font-weight: 500; font-size: 24px; margin: 36px 0 14px; letter-spacing: -0.01em; }
  .post-body p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; color: var(--fg); }
  .post-body ul, .post-body ol { font-size: 17px; line-height: 1.7; margin: 0 0 22px; padding-left: 22px; }
  .post-body li { margin-bottom: 8px; }
  .post-body strong { font-weight: 600; }
  .post-body a { color: var(--orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .post-body a:hover { background: var(--yellow); color: var(--fg); text-decoration: none; }
  .ssm-lead { font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--fg); margin-bottom: 32px; }
  .ssm-post-intro { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  /* Related */
  .post-related { padding: 80px 0; background: var(--bg-soft); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
  .related-card { display: block; padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: transform 220ms ease, box-shadow 220ms ease; }
  .related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(20,17,13,0.10); }
  .related-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 12px; }
  .related-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
  .related-title { font-family: var(--display); font-size: 18px; font-weight: 500; margin: 0 0 14px; line-height: 1.3; }
  .related-arr { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: 0.1em; }
  /* FAQs */
  .post-faqs { padding: 80px 0; }
  .post-faqs .wrap { max-width: 800px; }
  .faq-list { margin-top: 36px; }
  .faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item summary { cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 500; list-style: none; padding-right: 32px; position: relative; }
  .post-faqs .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 24px; font-weight: 300; color: var(--orange); transition: transform 220ms ease; }
  .post-faqs .faq-item[open] summary::after { content: "−"; }
  .faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-mute); }
  /* CTA */
  .post-cta { padding: 96px 0; background: var(--fg); color: #fff; text-align: center; }
  .post-cta .wrap { max-width: 720px; }
  .post-cta h2 { font-family: var(--display); font-weight: 400; font-size: 48px; color: #fff; margin: 0 0 18px; letter-spacing: -0.02em; }
  .post-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin: 0 0 32px; }
  .post-cta .btn { background: var(--orange); color: #fff; padding: 14px 28px; border-radius: 999px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
  @media (max-width: 760px) {
    .related-grid { grid-template-columns: 1fr; }
    .post-cta h2 { font-size: 32px; }
  }


/* --- KIT (5 bloques) --- */

/* hash 5948acc8 · primer file: kit-consulting/index.html */
.kc-head { background: linear-gradient(180deg, #FFF6E8 0%, var(--bg) 100%); position: relative; overflow: hidden; }
  .kc-head .hc-1 { position: absolute; top: 80px; right: 8%; width: 130px; height: 130px; background: var(--orange); border-radius: 50%; animation: float 9s ease-in-out infinite; }
  .kc-head .hc-2 { position: absolute; top: 240px; right: 28%; width: 38px; height: 38px; background: var(--gold); border-radius: 50%; }
  .kc-head .hc-3 { position: absolute; bottom: 100px; right: 22%; width: 70px; height: 70px; border: 1px solid var(--orange); border-radius: 50%; }

  /* Hero claim */
  .kc-claim {
    background: var(--bg-ink); color: var(--inv); padding: 56px 0;
    position: relative; overflow: hidden;
  }
  .kc-claim::before {
    content: ""; position: absolute; top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--orange), transparent 70%);
    opacity: 0.35; pointer-events: none;
  }
  .kc-claim .wrap { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
  .kc-claim h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5vw, 80px); letter-spacing: -0.04em; line-height: 1; margin: 0; }
  .kc-claim h2 .hl { background: var(--orange); padding: 0 14px; }
  .kc-claim .body-l { color: var(--inv-dim); }

  /* Categorías */
  .kc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
  .kc-cat {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    padding: 32px;
    background: var(--bg);
    display: flex; flex-direction: column; gap: 16px;
    min-height: 320px;
    position: relative; overflow: hidden;
  }
  .kc-cat::before {
    content: attr(data-step);
    position: absolute;
    top: 24px; right: 28px;
    font-family: var(--display);
    font-size: 120px;
    font-weight: 300;
    color: var(--orange);
    opacity: 0.1;
    line-height: 1;
  }
  /* UX-fixes 2026-07-02 - Summum Marketing: color: var(--orange) daba 2,61:1
     sobre var(--bg-soft) (falla AA). Se usa var(--orange-text) (#B23C09),
     el token ya definido mas abajo para "naranja como texto sobre fondo
     claro", que da 5,07:1. Afecta a las categorias de Kit Consulting y a
     los pasos numerados "01"-"18" de Kit Digital (mismo componente .tag
     dentro de .kc-cat en ambas paginas). */
  .kc-cat .tag { background: var(--bg-soft); color: var(--orange-text); }
  .kc-cat h3 {
    font-family: var(--display); font-weight: 500;
    font-size: 30px; letter-spacing: -0.02em; line-height: 1.05;
    margin: 8px 0 0;
  }
  .kc-cat h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .kc-cat .body { font-size: 14px; line-height: 1.55; margin: 0; }
  .kc-cat .price {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
  }
  .kc-cat .price .v { font-family: var(--display); font-size: 36px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
  .kc-cat .price .v .u { color: var(--orange); font-size: 22px; }
  .kc-cat .price .more {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--orange);
  }

  /* Bonos por segmento */
  .seg-table {
    margin-top: 56px;
    border-top: 1px solid var(--line);
  }
  .seg-row {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 220px 120px;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .seg-row .n { font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: 0.14em; }
  .seg-row .seg { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
  .seg-row .who { font-size: 14px; color: var(--fg-dim); line-height: 1.5; }
  .seg-row .amount { display: flex; flex-direction: column; gap: 4px; }
  .seg-row .amount .v { font-family: var(--display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
  .seg-row .amount .meta { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.14em; text-transform: uppercase; }
  .seg-row .cta { text-align: right; }

  /* Steps */
  .kc-steps {
    background: var(--bg-soft);
    padding: 96px 0;
  }
  .kc-step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 56px;
  }
  .kc-step { border-top: 1px solid var(--line-strong); padding-top: 28px; }
  .kc-step .n { font-family: var(--display); font-weight: 500; font-size: 56px; color: var(--orange); line-height: 1; letter-spacing: -0.03em; }
  .kc-step h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 24px 0 12px; letter-spacing: -0.015em; }
  .kc-step p { font-size: 14px; color: var(--fg-dim); line-height: 1.5; margin: 0; }

  @media (max-width: 1000px) {
    .kc-claim .wrap { grid-template-columns: 1fr; gap: 24px; }
    .kc-cats { grid-template-columns: 1fr; }
    .seg-row { grid-template-columns: 40px 1fr auto; gap: 16px; }
    .seg-row .who, .seg-row .cta { display: none; }
    .kc-step-grid { grid-template-columns: 1fr 1fr; }
  }

/* hash 2b9dac79 · primer file: kit-consulting/index.html */
.program-band {
    background: #FFFFFF;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 48px 0 56px;
  }
  .program-band .pb-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 32px;
  }
  .program-band .pb-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fg);
  }
  .program-band .pb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,94,26,0.16);
    animation: ping 1.8s ease-in-out infinite;
  }
  .program-band .pb-ref {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-mute);
  }
  .program-band .pb-kc-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .program-band .pb-kc-mark {
    background: var(--fg);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }
  .program-band .pb-kc-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    letter-spacing: -0.02em;
  }
  .program-band .pb-kc-kit {
    font-family: var(--display);
    font-weight: 500;
    font-size: 36px;
    color: rgba(255,255,255,0.6);
  }
  .program-band .pb-kc-consulting {
    font-family: var(--display);
    font-weight: 600;
    font-size: 42px;
    color: var(--orange);
  }
  .program-band .pb-kc-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.16);
  }
  .program-band .pb-image-link {
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(180deg, #F8F8F4, #FFFFFF);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color 200ms ease, transform 200ms ease;
  }
  .program-band .pb-image-link:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
  }
  .program-band .pb-image {
    max-width: 100%;
    height: auto;
    max-height: 110px;
    width: auto;
    display: inline-block;
    object-fit: contain;
  }
  .program-band .pb-note {
    margin: 24px auto 0;
    max-width: 78ch;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg-dim);
  }
  @keyframes ping {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
  }
  @media (max-width: 820px) {
    .program-band .pb-kc-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 700px) {
    .program-band { padding: 32px 0 40px; }
    .program-band .pb-image-link { padding: 16px 8px; }
    .program-band .pb-image { max-height: 80px; }
    .program-band .pb-kc-kit { font-size: 28px; }
    .program-band .pb-kc-consulting { font-size: 32px; }
  }

/* hash 24bb9b5e · primer file: kit-consulting/index.html */
.faq-auto .faq-list { max-width: 920px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
  .faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 24px; background: var(--bg); transition: border-color 220ms ease, background 220ms ease; }
  .faq-item[open] { border-color: var(--orange); background: var(--bg-soft); }
  .faq-item summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item .faq-icon { font-family: var(--mono); font-size: 24px; color: var(--orange); transition: transform 220ms ease; flex-shrink: 0; }
  .faq-item[open] .faq-icon { transform: rotate(45deg); }
  .faq-item p { margin: 0 0 20px; padding-right: 48px; color: var(--fg-dim); font-size: 16px; line-height: 1.6; }

/* hash 325098b6 · primer file: kit-digital/index.html */
.kd-head { background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); position: relative; overflow: hidden; }
  .kd-head .hc-1 { position: absolute; top: 80px; right: 8%; width: 120px; height: 120px; background: var(--orange); border-radius: 50%; animation: float 9s ease-in-out infinite; }
  .kd-head .hc-2 { position: absolute; top: 220px; right: 28%; width: 32px; height: 32px; background: var(--yellow); border-radius: 50%; }
  .kd-head .hc-3 { position: absolute; bottom: 80px; right: 20%; width: 60px; height: 60px; border: 1px solid var(--orange); border-radius: 50%; }

  /* Bonos */
  .bonos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .bono {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    background: var(--bg);
    display: flex; flex-direction: column; gap: 16px;
    transition: transform 220ms ease, border-color 220ms ease;
  }
  .bono:hover { transform: translateY(-4px); border-color: var(--orange); }
  .bono .seg {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--orange);
  }
  .bono .seg .d { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
  .bono .price {
    font-family: var(--display);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .bono .price .cur { font-size: 28px; vertical-align: super; }
  .bono .meta { font-size: 13px; color: var(--fg-dim); }
  .bono ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .bono ul li {
    font-size: 13px; line-height: 1.45;
    padding-left: 22px;
    position: relative;
  }
  .bono ul li::before {
    content: "→";
    position: absolute; left: 0; top: 0;
    color: var(--orange); font-family: var(--mono);
  }
  .bono .cta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
  }
  .bono.dark { background: var(--bg-ink); color: var(--inv); border-color: transparent; }
  .bono.dark .meta { color: var(--inv-dim); }
  .bono.dark .cta { border-color: var(--inv-line); }

  /* Solutions table */
  .sol-list { margin-top: 56px; border-top: 1px solid var(--line); }
  .sol-row {
    display: grid;
    grid-template-columns: 60px 1.2fr 2fr 160px 140px;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background 160ms ease;
  }
  .sol-row:hover { background: var(--bg-soft); }
  .sol-row .n { font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: 0.16em; }
  .sol-row h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0; letter-spacing: -0.015em; }
  .sol-row p { font-size: 13px; color: var(--fg-dim); margin: 0; line-height: 1.5; }
  .sol-row .price { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
  .sol-row .arr { color: var(--orange); font-family: var(--mono); font-size: 14px; }

  /* steps */
  .kd-steps {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 96px 0;
  }
  .step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 56px;
  }
  .kd-step { border-top: 1px solid var(--inv-line); padding-top: 28px; }
  .kd-step .n { font-family: var(--display); font-weight: 500; font-size: 56px; color: var(--orange); line-height: 1; letter-spacing: -0.03em; }
  .kd-step h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 24px 0 12px; letter-spacing: -0.015em; }
  .kd-step p { font-size: 14px; color: var(--inv-dim); line-height: 1.5; margin: 0; }

  /* FAQ */
  .faq { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
  .faq details {
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
  }
  .faq summary {
    list-style: none;
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--display); font-weight: 500;
    font-size: 22px; letter-spacing: -0.02em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--orange); font-family: var(--mono); font-size: 24px; transition: transform 200ms ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq p { font-size: 15px; color: var(--fg-dim); line-height: 1.55; margin: 16px 0 0; max-width: 70ch; }

  @media (max-width: 900px) {
    .bonos { grid-template-columns: 1fr; }
    .sol-row { grid-template-columns: 40px 1fr auto; gap: 16px; }
    .sol-row p { display: none; }
    .step-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  }

/* hash 37c42009 · primer file: kit-digital/index.html */
.program-band {
    background: #FFFFFF;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 48px 0 56px;
  }
  .program-band .pb-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 32px;
  }
  .program-band .pb-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fg);
  }
  .program-band .pb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,94,26,0.16);
    animation: ping 1.8s ease-in-out infinite;
  }
  .program-band .pb-ref {
    font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-mute);
  }
  .program-band .pb-image-link {
    display: block; text-align: center;
    padding: 24px 16px;
    background: linear-gradient(180deg, #F8F8F4, #FFFFFF);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color 200ms ease, transform 200ms ease;
  }
  .program-band .pb-image-link:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
  }
  .program-band .pb-image {
    max-width: 100%;
    height: auto;
    max-height: 110px;
    width: auto;
    display: inline-block;
    object-fit: contain;
  }
  .program-band .pb-note {
    margin: 24px auto 0;
    max-width: 78ch;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg-dim);
  }
  @keyframes ping {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
  }
  @media (max-width: 700px) {
    .program-band { padding: 32px 0 40px; }
    .program-band .pb-image-link { padding: 16px 8px; }
    .program-band .pb-image { max-height: 80px; }
  }


/* --- HERRAMIENTA (1 bloques) --- */

/* hash b70e5440 · primer file: herramientas/auditor-seo-gratis/index.html */
.lp-hero{background:var(--bg-warm);padding:96px 0 64px;position:relative;overflow:hidden}
.lp-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,5.5vw,76px);letter-spacing:-0.03em;line-height:1.05;margin:24px 0;max-width:18ch}
.lp-hero h1 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.lp-hero .lead{font-size:18px;line-height:1.55;max-width:68ch;margin:16px 0 24px}
.lp-hero .meta{display:flex;gap:24px;font-size:13px;color:var(--fg-dim);margin-top:24px;font-family:var(--mono);flex-wrap:wrap}
.lp-section{padding:72px 0}
.lp-section.alt{background:var(--bg-warm)}
.lp-section h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,52px);letter-spacing:-0.03em;line-height:1.1;margin:0 0 20px;max-width:24ch}
.lp-section h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.lp-section h3{font-family:var(--display);font-weight:500;font-size:22px;margin:24px 0 12px}
.lp-section p{font-size:16px;line-height:1.65;max-width:70ch}
.lp-section ul,.lp-section ol{font-size:16px;line-height:1.65;max-width:70ch}
.lp-section li{margin-bottom:8px}
.lp-section li strong{color:var(--fg)}
.cmp-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;background:var(--bg);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.cmp-table th,.cmp-table td{padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{background:var(--fg);color:white;font-family:var(--display);font-weight:500;text-align:left}
.cmp-table tbody th{background:var(--bg-warm);font-weight:500;width:22%;text-align:left}
.tool-form{background:var(--bg-warm);padding:32px;border-radius:18px;margin:24px 0}
.tool-form label{display:block;margin-bottom:16px;font-family:var(--display);font-size:14px;font-weight:500}
.tool-form input,.tool-form textarea{display:block;width:100%;margin-top:6px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:white}
.tool-form button{margin-top:12px}
.tool-result{margin-top:24px;padding:28px;background:var(--bg);border:2px solid var(--orange);border-radius:16px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,monospace;font-size:13px}
.tool-result dl{display:grid;grid-template-columns:1fr auto;gap:14px 28px;font-family:var(--display)}
.tool-result dt{color:var(--fg-dim);font-size:13px}
.tool-result dd{font-weight:500;margin:0;font-size:18px;color:var(--orange)}
.lp-faq{margin-top:24px;max-width:880px}
.lp-faq-item{border-bottom:1px solid var(--line);padding:24px 0}
.lp-faq-item summary{font-family:var(--display);font-weight:500;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:"+";color:var(--orange);font-size:24px}
.lp-faq-item[open] summary::after{content:"−"}
.lp-faq-item p{margin:12px 0 0;line-height:1.6;color:var(--fg-dim)}
.lp-cta{background:var(--orange);color:white;padding:64px 0;text-align:center}
.lp-cta h2{color:white;margin:0 0 12px}
.lp-cta h2 .it{color:var(--fg)}
.lp-cta p{color:white;opacity:0.9;max-width:60ch;margin:0 auto 24px;font-size:17px}
.lp-cta .btn-large{background:white;color:var(--fg);padding:14px 28px;font-size:16px;font-weight:500}
@media (max-width:700px){.cmp-table{font-size:13px}.cmp-table th,.cmp-table td{padding:12px}}


/* --- OFICINA (1 bloques) --- */

/* hash 175ef3d0 · primer file: local/agencia-marketing-aranda-de-duero/index.html */
.lp-hero{background:var(--bg-warm);padding:96px 0 80px;position:relative;overflow:hidden}
.lp-hero .b1{position:absolute;top:80px;right:6%;width:180px;height:180px;border-radius:50%;background:var(--orange);opacity:0.85;animation:float 9s ease-in-out infinite}
.lp-hero .b2{position:absolute;top:280px;right:28%;width:42px;height:42px;border-radius:50%;background:var(--yellow)}
.lp-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(48px,7vw,96px);letter-spacing:-0.04em;line-height:1.0;margin:24px 0;max-width:16ch;position:relative}
.lp-hero h1 .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--orange)}
.lp-hero .lead{font-size:19px;line-height:1.55;max-width:68ch;color:var(--fg);margin:20px 0 32px}
.lp-hero .meta{display:flex;gap:24px;font-size:13px;color:var(--fg-dim);margin-top:32px;font-family:var(--mono);flex-wrap:wrap}
.lp-stats{background:var(--fg);color:white;padding:56px 0}
.lp-stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.lp-stats .num{font-family:var(--display);font-size:56px;font-weight:500;line-height:1;color:var(--orange);letter-spacing:-0.02em}
.lp-stats .lbl{font-size:14px;margin-top:8px;opacity:0.85}
.lp-section{padding:80px 0}
.lp-section.alt{background:var(--bg-warm)}
.lp-section h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,4.5vw,60px);letter-spacing:-0.03em;line-height:1.05;margin:0 0 24px;max-width:26ch}
.lp-section h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.lp-section h3{font-family:var(--display);font-weight:500;font-size:24px;margin:32px 0 12px}
.lp-section p{font-size:16px;line-height:1.7;max-width:75ch;color:var(--fg)}
.lp-section ul{font-size:16px;line-height:1.7;max-width:75ch;padding-left:0;list-style:none}
.lp-section ul li{margin-bottom:14px;padding-left:24px;position:relative}
.lp-section ul li::before{content:"→";position:absolute;left:0;color:var(--orange);font-weight:500}
.lp-section ul li strong{color:var(--fg);font-weight:500}
.lp-services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.lp-svc{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:32px}
.lp-svc .ico{width:44px;height:44px;border-radius:12px;background:var(--bg-warm);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.lp-svc h3{font-size:20px;margin:0 0 8px}
.lp-svc p{font-size:14px;color:var(--fg-dim);margin:0}
.lp-faq{margin-top:32px;max-width:880px}
.lp-faq-item{border-bottom:1px solid var(--line);padding:24px 0}
.lp-faq-item summary{font-family:var(--display);font-weight:500;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:"+";color:var(--orange);font-size:28px}
.lp-faq-item[open] summary::after{content:"−"}
.lp-faq-item p{margin:16px 0 0;line-height:1.65;color:var(--fg-dim)}
.lp-testim{background:var(--bg-warm);padding:64px 0}
.lp-testim blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,36px);line-height:1.3;max-width:920px;margin:0 auto;text-align:center}
.lp-testim cite{display:block;margin-top:24px;font-style:normal;font-family:var(--display);font-size:14px;color:var(--fg-dim);font-weight:500;letter-spacing:0.05em;text-transform:uppercase}
.lp-cta{background:var(--orange);color:white;padding:80px 0;text-align:center}
.lp-cta h2{color:white;margin:0 0 16px;max-width:none}
.lp-cta h2 .it{color:var(--fg)}
.lp-cta p{color:white;opacity:0.9;max-width:60ch;margin:0 auto 32px;font-size:18px}
.lp-cta .btn-large{background:white;color:var(--fg);padding:16px 32px;font-size:17px;font-weight:500}
.local-data{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}
.local-data .ld-item{background:var(--bg-warm);padding:20px;border-radius:14px}
.local-data .ld-label{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.local-data .ld-value{font-family:var(--display);font-weight:500;font-size:24px;color:var(--orange)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@media (max-width:900px){.lp-services{grid-template-columns:1fr}.lp-stats .row{grid-template-columns:repeat(2,1fr)}.local-data{grid-template-columns:repeat(2,1fr)}}


/* --- LEGAL (1 bloques) --- */

/* hash f2f7d583 · primer file: aviso-legal/index.html */
.legal-head { padding: 80px 0 56px; border-bottom: 1px solid var(--line); }
  .legal-head h1 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.035em; line-height: 1; margin: 16px 0 24px; }
  .legal-head h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
  .legal-body { max-width: 760px; margin: 0 auto; padding: 64px 56px 96px; }
  .legal-body h2 { font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; margin: 40px 0 12px; }
  .legal-body h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 24px 0 8px; }
  .legal-body p { font-size: 15px; line-height: 1.65; color: var(--fg); margin: 0 0 14px; }
  .legal-body ul { padding-left: 20px; margin: 0 0 20px; }
  .legal-body ul li { font-size: 15px; line-height: 1.65; color: var(--fg); margin-bottom: 6px; }
  .legal-body strong { font-weight: 600; }
  .legal-body a { color: var(--orange); }
  .legal-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
  .legal-body th, .legal-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .legal-body th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); background: var(--bg-soft); }
  .legal-body .lastmod { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); padding-top: 32px; border-top: 1px solid var(--line); margin-top: 48px; }


/* --- HOME (specific, from home.css) --- */

/* Home-specific */
  .hero {
    position: relative;
    padding: 96px 0 72px;
    overflow: hidden;
  }
  .hero-circles { position: absolute; inset: 0; pointer-events: none; }
  .hero-c1 { top: 80px; right: 8%; width: 80px; height: 80px; }
  .hero-c2 { top: 60px; right: 22%; width: 24px; height: 24px; }
  .hero-c3 { top: 220px; right: 4%; width: 48px; height: 48px; }
  .hero-c4 { top: 360px; right: 14%; width: 16px; height: 16px; }
  .hero-c5 { top: 480px; right: 28%; width: 100px; height: 100px; opacity: 0.3; }
  /* FIX-B (2026-05-21): eliminado .hero-arc (0 ocurrencias en bundle). */

  .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--bg-soft); margin-bottom: 36px; }
  .hero h1 {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 0.92;
    font-size: clamp(64px, 9.5vw, 168px);
    margin: 0;
    max-width: 18ch;
  }
  .hero h1 .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; word-spacing: 0.04em; }
  .hero h1 .blob {
    display: inline-block;
    width: clamp(60px, 8vw, 132px);
    height: clamp(60px, 8vw, 132px);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, var(--yellow), var(--orange));
    vertical-align: middle;
    margin: 0 12px;
    transform: translateY(-8px);
    animation: float 6s ease-in-out infinite;
  }
  .hero-meta {
    margin-top: 64px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 60px;
    align-items: end;
  }
  .hero-body { font-size: 19px; line-height: 1.5; max-width: 50ch; }
  .hero-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hero-values .v {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
  }
  .hero-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
  .hero-phone { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); letter-spacing: 0.06em; }

  /* Metrics band */
  .metrics {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 80px 0;
  }
  .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px; }
  .metric { text-align: center; padding: 0 16px; }
  .metric .v {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(56px, 7vw, 104px);
    line-height: 1;
    letter-spacing: -0.035em;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .metric .v .u { color: var(--orange); font-weight: 500; font-size: 0.5em; margin-left: 0.06em; letter-spacing: 0; }
  .metric .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--inv-mute); text-transform: uppercase; margin: 18px auto 0; max-width: 22ch; }

  /* Services bento */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 240px;
    gap: 12px;
  }
  .svc {
    grid-column: span 2;
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 220ms ease, border-color 220ms ease;
  }
  .svc:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .svc.feat { grid-column: span 3; grid-row: span 2; background: var(--bg-ink); color: var(--inv); border-color: transparent; }
  .svc.feat .desc { color: var(--inv-dim); }
  .svc.feat .num { color: var(--inv-mute); }
  .svc.warm { grid-column: span 3; background: var(--orange); color: #fff; border-color: transparent; }
  .svc.warm .desc { color: rgba(255,255,255,0.92); }
  .svc.warm .num { color: rgba(255,255,255,0.7); }
  .svc.yellow { background: var(--yellow); border-color: transparent; }
  .svc .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; }
  .svc .name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
  .svc .desc { font-size: 13px; line-height: 1.5; color: var(--fg-dim); margin: 0; max-width: 36ch; }
  .svc.feat .name { font-size: 36px; max-width: 14ch; }
  .svc .arrow { position: absolute; bottom: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%; background: var(--fg); color: var(--inv); display: grid; place-items: center; font-size: 14px; transition: transform 220ms ease; }
  .svc:hover .arrow { transform: translate(2px, -2px); }
  .svc.feat .arrow { background: var(--orange); color: #fff; }
  .svc.warm .arrow { background: #fff; color: var(--orange); }
  .svc.yellow .arrow { background: var(--fg); color: var(--inv); }

  /* Quote block */
  .quote {
    padding: 120px 0;
    text-align: center;
  }
  .quote p {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 auto;
    max-width: 18ch;
  }
  .quote p .hl { background: var(--yellow); padding: 0 12px; border-radius: 6px; }
  .quote .attr { margin-top: 36px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--fg-mute); text-transform: uppercase; }

  /* Neuro split */
  .neuro {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: stretch;
  }
  .neuro-card {
    background: var(--bg-ink);
    color: var(--inv);
    border-radius: var(--radius-lg);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 600px;
    position: relative;
    overflow: hidden;
  }
  .neuro-card .h2 { font-family: var(--display); font-weight: 500; font-size: 84px; letter-spacing: -0.045em; line-height: 0.95; margin: 24px 0 0; }
  .neuro-card .h2 .it { font-family: var(--serif); font-style: italic; color: var(--yellow); font-weight: 400; }
  .neuro-card .body-l { color: var(--inv-dim); max-width: 44ch; margin: 32px 0 36px; }
  .neuro-bg-circle { position: absolute; bottom: -120px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--orange), transparent 70%); opacity: 0.5; }
  .neuro-stats { display: flex; flex-direction: column; gap: 16px; }
  .neuro-stat {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
  }
  .neuro-stat .tag { background: var(--bg-soft); border-radius: var(--radius-pill); }
  .neuro-stat .claim { font-family: var(--display); font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; margin-top: 12px; }
  .neuro-stat .v { font-family: var(--display); font-size: 88px; line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--orange); }
  .neuro-stat .v .u { font-size: 0.45em; color: var(--fg); }

  /* Locations */
  .loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .loc {
    border-radius: var(--radius-lg);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 36px 28px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }
  .loc.hq { background: var(--yellow); border-color: transparent; }
  .loc .city { font-family: var(--display); font-weight: 500; font-size: 32px; letter-spacing: -0.03em; }
  .loc .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-mute); }
  .loc .email { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); }
  .loc .dash { width: 32px; height: 1px; background: var(--orange); margin-bottom: 12px; }

  /* Final CTA */
  .final-cta {
    background: var(--bg-ink);
    color: var(--inv);
    padding: 120px 0 0;
    position: relative;
    overflow: hidden;
  }
  .final-cta h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(72px, 11vw, 200px);
    line-height: 0.88;
    letter-spacing: -0.06em;
    margin: 0 0 56px;
    max-width: 12ch;
  }
  .final-cta h2 .it { font-family: var(--serif); font-style: italic; color: var(--orange); font-weight: 400; letter-spacing: 0; word-spacing: 0.06em; }
  .final-cta .row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 96px; }
  .final-circle-1 { position: absolute; top: 60px; right: 8%; width: 200px; height: 200px; border-radius: 50%; background: var(--yellow); opacity: 0.95; animation: float 9s ease-in-out infinite; }
  .final-circle-2 { position: absolute; bottom: 360px; right: 24%; width: 60px; height: 60px; border-radius: 50%; background: var(--orange); }
  .final-circle-3 { position: absolute; top: 180px; right: 30%; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); }

  @media (max-width: 900px) {
    .hero-meta { grid-template-columns: 1fr; gap: 24px; }
    .metrics-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .services-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .svc, .svc.feat, .svc.warm { grid-column: span 1; grid-row: auto; min-height: 220px; }
    .neuro { grid-template-columns: 1fr; }
    .loc-grid { grid-template-columns: 1fr 1fr; }
  }

/* ==========================================================================
   ACCESIBILIDAD · WCAG 2.2 AA · Summum Marketing · 2026-05-22
   Bloque de correcciones de accesibilidad. Se carga al final de templates.css
   (la hoja con mayor especificidad de cascada del theme) para sobrescribir
   con seguridad los usos problematicos sin tocar los componentes base.

   Contraste del naranja de marca (#FF5E1A — ratio 3,06:1 con blanco, FALLA AA):
     - Naranja DECORATIVO (circulos, bordes, iconos, puntos, dots, fondos sin
       texto) -> SIN CAMBIOS. Se conserva la identidad visual de marca.
     - Naranja como TEXTO sobre fondo claro -> #B23C09
       (4,5:1+ sobre #FAFAF7 / #F0EDE5 / #F6E9D7 — pasa AA).
     - Naranja como FONDO con texto blanco encima -> #C2410C
       (5,18:1 con #FFFFFF — pasa AA).
   ========================================================================== */

:root {
  --orange-text: #B23C09;  /* naranja accesible para TEXTO sobre fondo claro */
  --orange-acc:  #C2410C;  /* naranja accesible para FONDO con texto blanco */
  /* --fg-faint subido de 0.42 (2,87:1) a 0.58 (~4,6:1) para texto legible. */
  --fg-faint: rgba(10, 10, 10, 0.58);
}
html[data-theme="dark"] {
  --orange-text: #FF8A5C;  /* naranja claro accesible sobre fondo oscuro */
  --fg-faint: rgba(250, 250, 247, 0.58);
}

/* --- Utilidad: texto solo para lectores de pantalla (WCAG 3.2.5/G201) --- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Naranja como TEXTO sobre fondo claro -> tono accesible #B23C09 --- */
.card .more,
.mp-card .more,
.mm-feature-tag,
.mm-num,
.mp-hero-eyebrow,
.cat-num,
.mp-card .num,
.mp-step .n,
.mp-case .cat,
.kc-step .n,
.kd-step .n,
.seg-row .n,
.sol-row .n,
.bono .seg .seg-l,
.related-arr,
.local-data .ld-value,
.loc .role,
.ofs .role,
.office .role,
.pillar .num {
  color: var(--orange-text);
}
/* Enlaces naranjas: subrayados de cuerpo de articulo y legales */
.post-body a,
.legal-body a,
.spain-header .hdr-right a {
  color: var(--orange-text);
}
/* UX-fixes 2026-07-02 - Summum Marketing: .mp-data-item .src a se quita de
   la lista de arriba. --orange-text (#B23C09) esta pensado para TEXTO
   sobre fondo claro, pero .mp-data-item vive dentro de .mp-data, que tiene
   fondo oscuro (background: var(--bg-ink), ver mas arriba en este mismo
   fichero) — de hecho el resto de .mp-data-item ya usa tokens --inv-* (
   claros) para su texto. Al incluirlo en esa lista quedaba en 3,34:1 sobre
   el fondo casi negro (falla AA) en /agencia-posicionamiento-seo/ y
   /neuromarketing/. Quitandolo de la lista, el enlace vuelve a heredar la
   regla original .mp-data-item .src a { color: var(--orange) } (mas arriba
   en este fichero), que da 6,47:1 sobre var(--bg-ink) — cumple AA. */
/* Estados hover que viran a naranja como texto */
.breadcrumb a:hover,
.footer-bottom .legal-links a:hover,
.mm-offices a:hover,
.mm-foot-link:hover,
.mp-sources a:hover,
.direct-row a:hover,
.footer ul a:hover {
  color: var(--orange-text);
}

/* --- Naranja como FONDO con texto blanco encima -> #C2410C accesible --- */
.btn-accent,
#summum-cookie-banner .cc-btn.accept,
.mp-cta,
.lp-cta,
.card.accent,
.pillar.accent,
.svc.warm,
.kc-claim h2 .hl {
  background-color: var(--orange-acc);
}
.btn-accent:hover,
#summum-cookie-banner .cc-btn.accept:hover {
  background-color: #9E3408;  /* hover aun mas profundo, mantiene >=4,5:1 */
}
/* Texto secundario blanco translucido sobre naranja -> opacidad plena
   para alcanzar el contraste AA exigido sobre el fondo #C2410C. */
.mp-cta .lead, .mp-cta p, .mp-cta h2 .it,
.lp-cta p, .lp-cta .lead,
.card.accent .desc, .card.accent .num {
  color: #fff;
}

/* --- WCAG 2.5.8 (AA 2.2): objetivo tactil minimo 24x24 px --- */
@media (pointer: coarse) {
  a.tag, button.tag, .tag[role="button"],
  .footer-social a, .footer .legal-links a {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }
}
/* === fin bloque accesibilidad === */

/* ==========================================================================
   FORMULARIO DE CONTACTO · CF7 6003 · Summum Marketing · 2026-05-22
   El shortcode [contact-form-7 id="6003"] se renderiza con el markup por
   defecto de CF7 + clases Divi heredadas (et_pb_contact / et_pb_contact_form
   / et_pb_contact_field / et_pb_button). El theme no las estilaba: inputs
   planos y boton azul por defecto. Este bloque replica el lenguaje visual del
   antiguo .form-grid sobre .wpcf7-form, y funciona en dos contextos:
     - panel oscuro .contact-r (pagina /contacto/)
     - seccion clara --bg-warm (home)
   ========================================================================== */

/* --- El form ocupa todo el ancho del panel/seccion --- */
.wpcf7 { width: 100%; }
.wpcf7-form { width: 100%; }
.wpcf7 .screen-reader-response { position: absolute; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px; overflow: hidden; margin: 0; padding: 0; border: 0; }

/* --- Rejilla de campos: 2 columnas usando las clases Divi del markup --- */
.wpcf7-form .et_pb_contact_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 24px;
  position: relative;
}
.wpcf7-form .et_pb_contact_field {
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;            /* por defecto a ancho completo */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
/* Campos a media columna (Nombre / Email / Telefono / Asunto) */
.wpcf7-form .et_pb_contact_field.et_pb_contact_field_half { grid-column: span 1; }

/* --- Inputs / textarea / select: estilo .form-grid del theme --- */
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
  font-family: var(--sans);
  font-size: 16px; /* UX-fixes 2026-07-02 (G2) - Summum Marketing: a 15px
     iOS Safari hace zoom automatico al enfocar el campo (umbral del
     navegador es 16px). Confirmado en vivo con font-size computado. */
  letter-spacing: -0.005em;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--inv-line);
  border-radius: 0;
  padding: 12px 0;
  color: var(--inv);
  outline: none;
  box-shadow: none;
  transition: border-color 160ms ease;
}
.wpcf7-form textarea.wpcf7-form-control {
  min-height: 120px;
  resize: vertical;
}
.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus {
  border-bottom-color: var(--orange);
}
.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder {
  color: var(--inv-mute);
  opacity: 1;
}
/* Campo de archivo: un poco mas legible */
.wpcf7-form input.wpcf7-file {
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 0;
  color: var(--inv-dim);
}
.wpcf7-form input.wpcf7-file::file-selector-button {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--inv-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--inv);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.wpcf7-form input.wpcf7-file::file-selector-button:hover {
  background: var(--inv-line);
}
/* Texto suelto del campo de adjunto */
.wpcf7-form .et_pb_contact_field { color: var(--inv-mute); }

/* --- Checkbox de aceptacion de privacidad (CF7 6003, /contacto/): el input
   nativo rendia a ~13x13px, por debajo del tamano de diana WCAG 2.2 SC 2.5.8
   (AA, minimo recomendado 24x24px CSS). El <label> ya envuelve input+texto en
   el markup (clicable en toda su superficie); aqui solo se agranda el
   checkbox y se asegura una altura de fila comoda al tacto, sin tocar el
   HTML. Summum Marketing - UX-fixes 2026-07-03 (G2). */
.summum-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.summum-acceptance input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}

/* --- Boton ENVIAR: boton del sitio, no el azul por defecto --- */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--orange-acc);          /* naranja accesible AA, no azul */
  color: #fff;
  cursor: pointer;
  width: auto;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: transform 160ms ease, background 160ms ease;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover {
  background: #9E3408;
  transform: translateY(-1px);
}
.wpcf7-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
/* La <p> que envuelve el submit: separador superior, como el viejo .submit-row */
.wpcf7-form > p:has(> .wpcf7-submit) {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--inv-line);
}
/* El spinner de CF7 alineado junto al boton */
.wpcf7-form .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; }

/* --- Mensajes de validacion / respuesta ---
   Especificidad reforzada con .wpcf7 para ganar a styles.css de CF7,
   que carga despues de templates.css y usa los mismos 0,2,1. */
.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #FF8A5C;
  margin-top: 6px;
  display: block;
  position: static;
  top: auto;
  left: auto;
  width: auto;
  border: 0;
  background: transparent;
  padding: 0;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-bottom-color: #FF8A5C;
}
.wpcf7 .wpcf7-form .wpcf7-response-output {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  margin: 24px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--inv-line);
}
.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  border-color: rgba(120, 200, 120, 0.55);
  color: #FAFAF7;
}
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
  border-color: rgba(255, 138, 92, 0.6);
  color: #FF8A5C;
}
/* En la home (fondo claro) el texto de respuesta debe ser oscuro */
.section .wpcf7 .wpcf7-form.sent .wpcf7-response-output { color: var(--fg); }

/* --------------------------------------------------------------------------
   CONTEXTO HOME: el formulario va sobre fondo claro (--bg-warm), no oscuro.
   Se reescriben los tonos a la paleta clara. La pagina /contacto/ mantiene
   los tonos oscuros de arriba porque el form vive dentro de .contact-r.

   UX-fixes 2026-07-02 - Summum Marketing: se añade :not([type="submit"])
   al primer selector. El boton "Enviar mensaje" (<input type="submit">)
   tambien lleva la clase .wpcf7-form-control, asi que sin esta exclusion
   esta regla le pintaba el texto en var(--fg) (casi negro) encima de su
   fondo naranja (var(--orange-acc)), dejando 3,82:1 (falla AA) en home,
   /kit-digital/, /kit-consulting/ y /agencia-posicionamiento-seo/ (paginas
   con el form dentro de .section). En /contacto/ no ocurria porque el form
   vive en .contact-r, no en .section. Con la exclusion, el boton vuelve a
   heredar el color:#fff de la regla base (.wpcf7-form .wpcf7-submit),
   5,18:1 sobre el mismo fondo.
   -------------------------------------------------------------------------- */
.section .wpcf7-form input.wpcf7-form-control:not([type="submit"]),
.section .wpcf7-form textarea.wpcf7-form-control,
.section .wpcf7-form select.wpcf7-form-control {
  border-bottom-color: var(--line-strong);
  color: var(--fg);
}
.section .wpcf7-form input.wpcf7-form-control::placeholder,
.section .wpcf7-form textarea.wpcf7-form-control::placeholder {
  color: var(--fg-mute);
}
.section .wpcf7-form input.wpcf7-file { color: var(--fg-dim); }
.section .wpcf7-form input.wpcf7-file::file-selector-button {
  border-color: var(--line-strong);
  color: var(--fg);
}
.section .wpcf7-form input.wpcf7-file::file-selector-button:hover { background: var(--bg-soft); }
.section .wpcf7-form .et_pb_contact_field { color: var(--fg-mute); }
.section .wpcf7-form > p:has(> .wpcf7-submit) { border-top-color: var(--line); }
.section .wpcf7-form .wpcf7-response-output { border-color: var(--line-strong); }

/* --------------------------------------------------------------------------
   ISSUE 2 · /contacto/ — el panel oscuro .contact-r quedaba enorme y vacio
   con el formulario pequeno arriba. Se reparte mejor el espacio: la columna
   se vuelve flex en vertical, el form-head deja de empujar tanto y el
   formulario se separa del titulo de forma proporcionada.
   -------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  .contact-r {
    display: flex;
    flex-direction: column;
    justify-content: center;     /* centra el bloque titulo+form en la altura */
  }
  .contact-r .form-head { margin-bottom: 32px; }
  .contact-r .wpcf7 { margin-top: 4px; }
}
/* El form-head y el form comparten el mismo ancho maximo legible dentro del panel */
.contact-r .form-head,
.contact-r .wpcf7 { max-width: 560px; }

@media (max-width: 700px) {
  .wpcf7-form .et_pb_contact_form { grid-template-columns: 1fr; gap: 20px; }
  .wpcf7-form .et_pb_contact_field.et_pb_contact_field_half { grid-column: 1 / -1; }
  .wpcf7-form .wpcf7-submit,
  .wpcf7-form input[type="submit"] { width: 100%; justify-content: center; }
}
/* === fin bloque formulario de contacto === */

/* === Páginas de oficina · ancho de contenedor — Summum Marketing ===
   single-oficina.php envuelve el contenido importado en <div class="post-body">.
   La regla de blog `.post-body .wrap { max-width: 760px }` (columna de lectura
   de artículos) recaía sobre TODAS las .wrap del contenido de la oficina, que
   son secciones full-width (lp-hero, lp-stats, lp-section, lp-cta…), dejando el
   contenido en una columna estrecha con grandes márgenes en blanco.
   Se restaura el ancho del sitio (--max) para las .wrap dentro de una oficina,
   igual que en las páginas de servicio. No afecta al blog (.post-single). */
.oficina-single .post-body .wrap {
  max-width: var(--max);
}
@media (max-width: 480px) {
  .oficina-single .post-body .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* === fin bloque ancho oficinas === */

/* ==========================================================================
   FIXES RESPONSIVE MÓVIL · Summum Marketing · 2026-05-22 23:58 Europe/Madrid
   --------------------------------------------------------------------------
   4 issues confirmados + barrido responsive 375×667 / 414×896:
   1. Home hero — circulo amarillo decorativo solapa el CTA "Escribenos".
   2. /kit-digital/ — stats IVA "21% / 0%" se solapan con sus etiquetas.
   3. Menu movil — "Servicios" mostraba megamenu desplegado por defecto
      (numeros 01..04, dots, bordes) creando artefacto vertical.
   4. /kit-digital/ y /kit-consulting/ — rejillas 2-col con grid inline
      (Ventaja 01/02; Kit Digital vs Kit Consulting) no apilaban en movil
      porque el inline style ganaba al CSS del theme.
   Plus: ajustes de seguridad responsive (overflow horizontal, tap targets,
   alturas minimas que rompian el render).
   No se toca BD ni post_content. Solo CSS aditivo al final de la hoja.
   ========================================================================== */

/* ------ ISSUE 1: Hero circulos no deben solapar el CTA "Escribenos" ----- */
/* En desktop el lienzo es amplio. En movil el h1 ocupa 80% del ancho y los
   circulos (sobre todo .hero-c1 yellow 80x80 y .hero-c5 ring-orange 100x100)
   se sientan encima del CTA. Subimos el z-index del contenido del hero y
   bajamos los circulos al fondo + reducimos tamanos en breakpoints chicos. */
@media (max-width: 900px) {
  .hero > .wrap > .hero-eyebrow,
  .hero > .wrap > h1,
  .hero > .wrap > .hero-meta,
  .hero > .wrap > .hero-cta,
  .hero > .wrap > .hero-cta-row {
    position: relative;
    z-index: 5;
  }
  .hero .hero-circles {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .hero .hero-circles .circle { pointer-events: none !important; }
  .hero-c1 { width: 56px !important; height: 56px !important; top: 32px !important; right: 6% !important; opacity: 0.65 !important; }
  .hero-c2 { width: 18px !important; height: 18px !important; top: 24px !important; right: 22% !important; }
  .hero-c3 { width: 36px !important; height: 36px !important; top: 140px !important; right: 4% !important; opacity: 0.55 !important; }
  .hero-c4 { width: 12px !important; height: 12px !important; top: 240px !important; right: 18% !important; }
  .hero-c5 { width: 64px !important; height: 64px !important; top: 320px !important; right: 28% !important; opacity: 0.22 !important; }
  /* Garantizar que el CTA "Escribenos" del hero queda clicable encima */
  .hero .hero-cta, .hero .hero-cta-row, .hero-cta .btn, .hero-cta-row .btn {
    position: relative !important;
    z-index: 6 !important;
  }
}
@media (max-width: 600px) {
  .hero-c1 { width: 44px !important; height: 44px !important; top: 24px !important; right: 4% !important; }
  .hero-c5 { width: 48px !important; height: 48px !important; top: 280px !important; right: 32% !important; }
  /* El blob inline dentro del h1 tambien debe quedar contenido (no se desborda) */
  .hero h1 .blob {
    width: clamp(28px, 6vw, 56px) !important;
    height: clamp(28px, 6vw, 56px) !important;
    margin: 0 6px !important;
  }
}
@media (max-width: 480px) {
  /* Hero-circles globalmente mas pequeno y mas a la derecha para no estorbar */
  .hero .hero-circles { transform: scale(0.75); transform-origin: top right; }
  /* CTA full-width en mobile para que sea facil de tocar */
  .hero .hero-cta .btn-large,
  .hero-cta-row .btn-large,
  .hero-cta .btn-accent {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ------ ISSUE 2: Stats IVA "21% / 0%" en /kit-digital/ -------------------- */
/* La rejilla inline tiene gap:12px y bordes blancos. En movil 414px el numero
   "21%" (font-size:32px inline) se monta con la etiqueta "IVA peninsular"
   (font-size:10px) que va debajo. La rejilla 1fr 1fr se queda muy estrecha y
   colapsa visualmente. Estrategia: reducir el number a 24px, aumentar gap y
   aumentar margen entre numero y etiqueta. Selector inline-attr-match para
   no afectar a otras rejillas 1fr 1fr del sitio. */
@media (max-width: 720px) {
  /* La rejilla IVA tiene el sello unico de border-top + border-bottom rgba blancos */
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-top: 1px solid rgba(255,255,255,0.2)"] {
    gap: 16px !important;
    padding: 18px 0 !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-top: 1px solid rgba(255,255,255,0.2)"] > div > div[style*="font-size: 32px"] {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-top: 1px solid rgba(255,255,255,0.2)"] > div > div[style*="font-family: var(--mono)"] {
    margin-top: 10px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.10em !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 420px) {
  div[style*="grid-template-columns: 1fr 1fr"][style*="border-top: 1px solid rgba(255,255,255,0.2)"] > div > div[style*="font-size: 32px"] {
    font-size: 22px !important;
  }
}

/* ------ ISSUE 4: Rejillas 2-col con grid inline deben apilar en movil ---- */
/* Casos:
   - /kit-digital/  Ventaja 01 + Ventaja 02
   - /kit-consulting/ Kit Digital vs Kit Consulting
   Patron comun: <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
   Selector por inline-attr substring. */
@media (max-width: 760px) {
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"][style*="gap: 24px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Tarjeta tipo "Ventaja 01" tiene padding inline 40px — exagerado en movil */
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] > div[style*="padding: 40px"],
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] > div[style*="padding: 40px"] {
    padding: 28px !important;
  }
  /* H3 inline de la ventaja con font-size:32px/36px — reducir */
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] h3[style*="font-size: 32px"],
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] h3[style*="font-size: 36px"] {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  /* Circulos decorativos absolutos dentro de las tarjetas — reducir y no desbordar */
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] > div div[style*="width: 180px"][style*="border-radius: 50%"],
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] > div div[style*="width: 240px"][style*="border-radius: 50%"] {
    width: 120px !important;
    height: 120px !important;
    top: -30px !important;
    right: -30px !important;
  }
  div[style*="display: grid; grid-template-columns: 1fr 1fr"] > div div[style*="width: 120px"][style*="border-radius: 50%"] {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ------ Rejilla 1fr auto del CTA inferior (kit-consulting, servicios) ----- */
@media (max-width: 760px) {
  div[class="wrap"][style*="grid-template-columns: 1fr auto"][style*="gap: 48px"],
  div[style*="grid-template-columns: 1fr auto"][style*="gap: 48px"][style*="padding: 56px"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 36px 28px !important;
    text-align: left !important;
  }
}

/* ------ ISSUE 3: Menu movil — Servicios sin artefacto vertical ----------- */
/* PROBLEMA: en .nav.mobile-open el megamenu se renderiza expandido inline
   por defecto (linea ~875 de summum-v3.css). Con sus 5 columnas (Marketing
   Digital · Web & Tech · Performance · Loyalty & UX · Datos & IA), los
   numeritos "01/02/03/04" naranja en monospace, los dots y los bordes
   crean un "tronco vertical" largo y confuso. Solucion: en movil, el
   megamenu se OCULTA por defecto y se despliega solo cuando el padre
   .has-megamenu tiene la clase .open (la pone el JS al hacer tap). */
@media (max-width: 900px) {
  /* Por defecto: megamenu colapsado dentro del menu movil */
  .nav.mobile-open .has-megamenu .megamenu {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    transition: max-height 280ms ease, padding 200ms ease, opacity 200ms ease;
  }
  /* Cuando el usuario tapea en "Servicios", JS pone .open en .has-megamenu */
  .nav.mobile-open .has-megamenu.open .megamenu,
  .nav.mobile-open .has-megamenu:focus-within .megamenu {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: 2400px !important;
    padding: 16px 0 24px 8px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  /* El caret rota cuando esta abierto para UX clara */
  .nav.mobile-open .has-megamenu .megamenu-trigger .mm-caret {
    display: inline-block !important;
    transition: transform 220ms ease !important;
  }
  .nav.mobile-open .has-megamenu.open .megamenu-trigger .mm-caret {
    transform: rotate(180deg) !important;
  }
  /* Limpiar el artefacto vertical: ocultar numeritos decorativos y dots */
  .nav.mobile-open .has-megamenu .megamenu .mm-num,
  .nav.mobile-open .has-megamenu .megamenu .mm-col-h .mm-num {
    display: none !important;
  }
  /* mm-col-h: tipo de cabecera mas sutil en movil */
  .nav.mobile-open .has-megamenu .megamenu .mm-col-h {
    border-bottom: 1px solid var(--line) !important;
    padding: 8px 0 6px !important;
    margin: 0 0 4px !important;
    font-size: 10px !important;
    color: var(--fg-mute) !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
  }
  /* mm-link: cada link mas compacto, sin border-radius excesivo */
  .nav.mobile-open .has-megamenu .megamenu .mm-link {
    min-height: 44px !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-link .mm-name {
    font-size: 15px !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-link .mm-desc {
    font-size: 11.5px !important;
    color: var(--fg-mute) !important;
    margin-top: 2px;
  }
  /* mm-rail (Kit Digital · Kit Consulting cards) — solo cuando .open */
  .nav.mobile-open .has-megamenu .megamenu .mm-rail {
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-feature {
    padding: 12px 14px !important;
    min-height: 44px !important;
  }
  /* mm-foot (enlaces "Ver todos los servicios", etc.) */
  .nav.mobile-open .has-megamenu .megamenu .mm-foot {
    border-top: 1px solid var(--line) !important;
    padding-top: 12px !important;
    margin-top: 8px !important;
    gap: 6px !important;
    flex-direction: column !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-foot-link {
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--fg) !important;
    border-radius: 0 !important;
  }
  /* Eliminar el pseudo-elemento ::after de la has-megamenu (bridge desktop) */
  .nav.mobile-open .has-megamenu::after { display: none !important; }
  /* El trigger "Servicios" en movil necesita un caret claro */
  .nav.mobile-open .has-megamenu > .megamenu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 4px !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    color: var(--fg) !important;
    font-size: 22px !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
  }
  .nav.mobile-open .has-megamenu > .megamenu-trigger .mm-caret {
    font-size: 14px !important;
    color: var(--fg-mute) !important;
    margin-left: auto !important;
  }
  /* Quitar el rectangulo naranja del trigger cuando .open en movil
     (en desktop esta bien, pero en el listado movil sobra) */
  .nav.mobile-open .has-megamenu.open > .megamenu-trigger {
    background: transparent !important;
    color: var(--orange) !important;
    border-radius: 0 !important;
    padding: 18px 4px !important;
  }
  .nav.mobile-open .has-megamenu.open > .megamenu-trigger .mm-caret {
    color: var(--orange) !important;
  }
  /* Grid del megamenu plano en una columna para no recargar el menu movil */
  .nav.mobile-open .has-megamenu.open .megamenu .megamenu-inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .nav.mobile-open .has-megamenu.open .megamenu .mm-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .nav.mobile-open .has-megamenu.open .megamenu .mm-col {
    margin-bottom: 10px;
  }
}

/* ------ Barrido responsive · ajustes preventivos ------------------------- */
/* Anti overflow horizontal (defensa en profundidad) */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .wrap { max-width: 100% !important; }
  /* Imagenes svg con tamano fijo no se desborden */
  .hero-illust svg, .lp-hero-illust svg, .post-illus svg { max-width: 100% !important; }
}
/* Numeros muy grandes en metrics y stats: clamp en movil */
@media (max-width: 600px) {
  .metric .v { font-size: clamp(40px, 12vw, 64px) !important; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 20px !important; }
}
/* Tabla de bonos Kit Digital (.bonos) ya apila bien — solo apurar el padding */
@media (max-width: 600px) {
  .bonos { gap: 16px !important; }
  .bono { padding: 24px !important; }
  .bono .price { font-size: clamp(36px, 11vw, 56px) !important; }
}
/* Tarjetas de servicio (.svc, .card) — padding mas compacto */
@media (max-width: 480px) {
  .card { padding: 24px !important; }
  .svc { padding: 20px !important; }
}
/* Forzar pill CTA del hero a tener tap target adecuado */
@media (max-width: 600px) {
  .hero .btn-large, .lp-hero .btn-large { padding: 16px 24px !important; min-height: 48px !important; }
}
/* /contacto/ panel oscuro — ya se mejoro en 20:52, pero en mobile asegurar
   que el panel no se queda gigante con poco contenido */
@media (max-width: 760px) {
  .contact-r { min-height: auto !important; padding: 32px 24px !important; }
}
/* Articulos · post-illus no debe ocultar el h1 en movil */
@media (max-width: 760px) {
  .post-head-grid { gap: 20px !important; }
  .post-illus { max-width: 320px !important; margin: 0 auto 16px !important; }
}
/* Marquee (banda de palabras "MARKETING / NEUROCIENCIA / ...") · no debe overflowear */
@media (max-width: 600px) {
  .marquee { padding: 24px 0 !important; }
  .marquee-track { font-size: 22px !important; gap: 36px !important; }
  .marquee-item { font-size: 12px !important; }
}
/* Footer-mark gigante "Summum" — ya ajustado en 480, refuerzo en 360 */
@media (max-width: 360px) {
  .footer-mark { font-size: clamp(44px, 12vw, 88px) !important; margin: 48px 0 32px !important; }
}
/* Tap targets minimos en todo control interactivo del menu (WCAG 2.5.5) */
@media (max-width: 900px) {
  .nav.mobile-open .nav-links > a,
  .nav.mobile-open .nav-links > .has-megamenu > .megamenu-trigger {
    min-height: 48px !important;
  }
}
/* === fin bloque mobile fixes === */

/* ============================================================================
   MOBILE FIXES PASE 2 · scanner hallazgos · 2026-05-23 00:25 · Summum Marketing
   Trío de fixes detectados por el scanner Playwright tras pase 1:
     A) .mp-cases-grid: 2 cols sin breakpoint movil → apilar a 1 col ≤760
     B) Tablas globales en .entry-content / .post-body / contenido WP: scroll-x
        y reflow para que no rompan el layout
     C) Cookie banner (#summum-cookie-banner): asegurar que no se monte sobre
        CTAs principales — bajar z-index si excede pantalla y añadir bottom
        safe-area al body cuando esté visible
   ============================================================================ */

/* --- A) mp-cases / mp-process / mp-stack en movil --- */
@media (max-width: 760px) {
  .mp-cases-grid,
  .mp-process-grid,
  .mp-stack {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .mp-case {
    padding: 28px 24px !important;
  }
  .mp-case .t {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .mp-case .q {
    font-size: 15px !important;
    padding: 6px 0 6px 16px !important;
  }
  .mp-case .metrics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .mp-case .metric .v,
  .mp-case .metric p.v {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }
}
@media (max-width: 420px) {
  .mp-case {
    padding: 22px 18px !important;
  }
  .mp-case .t {
    font-size: 19px !important;
  }
}

/* --- B) Tablas responsive globales --- */
.entry-content table,
.post-body table,
article table,
.wp-block-table table,
table.wp-block-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.entry-content table th,
.entry-content table td,
.post-body table th,
.post-body table td,
article table th,
article table td {
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 760px) {
  .entry-content table,
  .post-body table,
  article table {
    font-size: 14px;
  }
  .entry-content table th,
  .entry-content table td,
  .post-body table th,
  .post-body table td,
  article table th,
  article table td {
    padding: 8px 10px;
  }
}

/* --- C) Cookie banner: nunca tapar CTAs principales --- */
#summum-cookie-banner {
  /* Si el banner es posicionado fixed/sticky, mantenerlo dentro de su z-index sin pisar interactivos */
  z-index: 9990; /* deja espacio por debajo de 9999 para overlays criticos */
}
/* Body padding-bottom defensivo cuando el banner esta presente (clase aplicada por JS si existe;
   si no existe, dejamos un padding fijo solo en ≤760 que evita el solapamiento total) */
@media (max-width: 760px) {
  body:has(#summum-cookie-banner) main,
  body:has(#summum-cookie-banner) #content,
  body:has(#summum-cookie-banner) .site-main {
    padding-bottom: 180px !important;
  }
}

/* --- D) H2 con .it (italics) en moviles muy estrechos: prevenir wrap raro --- */
@media (max-width: 480px) {
  h1 .it, h2 .it, h3 .it {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* === fin bloque MOBILE FIXES PASE 2 === */

/* ============================================================================
   MOBILE FIXES PASE 3 · scanner hallazgos · 2026-05-23 00:35 · Summum Marketing
     A) footer-mark gigante "Summum marketing." overflow ≤760 (no solo ≤360)
     B) Tablas: cubrir todas (no solo .entry-content) con scroll-x
     C) Cards .card-lift, .mp-card, .related-card grid 1 col ≤760
     D) Botones .btn-ghost min-height 44px en móvil
     E) Pillars .pillar.warm/.accent grid 1 col ≤760
   ============================================================================ */

/* --- A) footer-mark gigante --- */
@media (max-width: 760px) {
  .footer-mark {
    font-size: clamp(48px, 14vw, 96px) !important;
    margin: 56px 0 28px !important;
    line-height: 0.9 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
}

/* --- B) Tablas: cubrir TODAS las tablas, no solo .entry-content --- */
body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body table th,
body table td {
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 760px) {
  body table { font-size: 14px; }
  body table th, body table td { padding: 8px 10px; }
}

/* --- C) Cards grid 1 col en movil --- */
@media (max-width: 760px) {
  .card-lift-grid,
  .mp-card-grid,
  .related-grid,
  .art-grid,
  .articles-grid,
  .cluster-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  a.card.card-lift,
  .mp-card,
  .related-card,
  .art-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- D) Botones .btn-ghost min-height accesible --- */
@media (max-width: 900px) {
  a.btn-ghost,
  button.btn-ghost,
  .btn.btn-ghost {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* --- E) Pillars (warm/accent) grid 1 col --- */
@media (max-width: 760px) {
  .pillars,
  .pillars-grid,
  .pillar-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pillar.warm,
  .pillar.accent,
  .pillar {
    padding: 24px 20px !important;
  }
}

/* === fin bloque MOBILE FIXES PASE 3 === */

/* ============================================================================
   MOBILE FIXES PASE 4 · scanner hallazgos · 2026-05-23 00:43 · Summum Marketing
   Rejillas con grid-template-columns en píxeles fijos que no se adaptan a movil:
     A) .mp-services-grid (servicios con cards)
     B) .num-band-grid (universo summum, banda de números)
     C) .services-grid (/servicios/ hub, 3 columnas fijas)
     D) .direct + .direct-row (/contacto/, 333px fijos)
     E) Resto de rejillas con minmax/fr no adaptadas: .mp-stack, .num-grid, etc.
   ============================================================================ */

/* --- A) .mp-services-grid 1 col movil --- */
@media (max-width: 760px) {
  .mp-services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mp-services-grid .mp-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- B) .num-band-grid 1 col en universo-summum --- */
@media (max-width: 760px) {
  .num-band-grid,
  .num-grid,
  .nbn-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .nbn,
  .num-band-item {
    max-width: 100% !important;
  }
}

/* --- C) .services-grid 1 col movil (hub /servicios/) --- */
@media (max-width: 760px) {
  .services-grid,
  .servicios-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .services-grid a.card.card-lift,
  .services-grid .card,
  .servicios-grid .card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- D) .direct + .direct-row en /contacto/ --- */
@media (max-width: 760px) {
  .direct {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .direct-row {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .direct-row > * {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* --- E) Defensivo: cualquier grid con columnas fijas mayores que el viewport --- */
@media (max-width: 400px) {
  [class*="-grid"]:not(.nav-inner):not(.footer-grid):not(.adl-grid):not(.mge-grid),
  [class*="-cols"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- F) Reducir mas el footer-mark en 320 para evitar el ultimo "marketing." overflow --- */
@media (max-width: 360px) {
  .footer-mark {
    font-size: clamp(36px, 12vw, 56px) !important;
    margin: 36px 0 24px !important;
  }
}

/* === fin bloque MOBILE FIXES PASE 4 === */

/* ============================================================================
   MOBILE FIXES PASE 5 · scanner hallazgos · 2026-05-23 01:00 · Summum Marketing
   Diagnostico clave: grid-template-columns:1fr no funciona cuando los hijos
   tienen min-content > 1fr permite. Reemplazamos por minmax(0, 1fr) +
   min-width:0 en hijos para forzar shrink.
   ============================================================================ */

/* --- A) Rejillas que pueden tener overflow por min-content de hijos --- */
@media (max-width: 760px) {
  .mp-services-grid,
  .mp-process-grid,
  .mp-cases-grid,
  .mp-card-grid,
  .mp-stack,
  .num-band-grid,
  .num-grid,
  .nbn-grid,
  .services-grid,
  .servicios-grid,
  .card-lift-grid,
  .related-grid,
  .art-grid,
  .articles-grid,
  .cluster-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .pillars,
  .pillars-grid,
  .pillar-grid,
  .direct {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  /* Forzar shrink de hijos de cualquier grid responsive */
  .mp-services-grid > *,
  .mp-process-grid > *,
  .mp-cases-grid > *,
  .mp-card-grid > *,
  .num-band-grid > *,
  .nbn-grid > *,
  .services-grid > *,
  .servicios-grid > *,
  .card-lift-grid > *,
  .related-grid > *,
  .art-grid > *,
  .articles-grid > *,
  .cluster-grid > *,
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > *,
  .pillars > *,
  .pillars-grid > *,
  .pillar-grid > *,
  .direct > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- B) Cualquier .mp-card con padding generoso → mas reducido en mobil --- */
@media (max-width: 480px) {
  .mp-card {
    padding: 24px 18px !important;
    min-height: auto !important;
  }
  .mp-card .num { font-size: 10px !important; }
  .mp-card h3, .mp-card .t { font-size: 19px !important; line-height: 1.25 !important; }
  .mp-card .desc, .mp-card p { font-size: 14px !important; }
}

/* --- C) Defensivo: dentro de .mp-card y similares, evitar overflow del num/svg --- */
@media (max-width: 760px) {
  .mp-card svg,
  .mp-card img,
  .mp-card .num,
  .mp-card .desc {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* === fin bloque MOBILE FIXES PASE 5 === */

/* ============================================================================
   MOBILE FIXES PASE 6 · ajustes finos · 2026-05-23 01:18 · Summum Marketing
     A) footer-mark: extender breakpoint a 980 para cubrir tablet portrait (768)
     B) Universo Summum: link de "Escribir a info@" overflow — wrap
   ============================================================================ */

@media (max-width: 980px) {
  .footer-mark {
    font-size: clamp(48px, 14vw, 96px) !important;
    margin: 56px 0 28px !important;
    line-height: 0.9 !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
}

/* Universo Summum: cualquier anchor con texto largo (mailto, urls largas) debe envolver */
@media (max-width: 760px) {
  body a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Auditoría visual 9-ago-2026 (Summum Marketing): la regla "body a" de arriba (Pase 6) deja que
   el link corto "Home"/"Inicio" del breadcrumb (.breadcrumb display:flex, nowrap) se comprima por
   debajo de su ancho natural cuando el último segmento (título largo de la página, p.ej. en
   single-pagina_en.php) lo empuja — y al permitir overflow-wrap:anywhere, el navegador lo parte a
   media palabra ("HOME" -> "HO"/"ME"). No se toca la regla global (protege mailto/URLs largas en
   todo el sitio); se protege solo el link del breadcrumb para que absorba 0 del shrink y sea el
   título largo (ya con word-break:normal, un <span> sin la regla "body a") el que envuelva por
   palabra completa, como ya hacía antes de comprimirse "Home". */
@media (max-width: 760px) {
  .breadcrumb a {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* === fin bloque MOBILE FIXES PASE 6 === */
/* ==========================================================================
   FIXES RESPONSIVE TABLET + ISSUES 3/6/7/8 · Summum Marketing · 2026-05-24
   --------------------------------------------------------------------------
   Cubre la franja 901–1180 px (iPad portrait/landscape, Surface, MBA 1280
   con zoom 110%) que el theme NO cubría: saltaba de desktop (1200+) a
   mobile (900-). También extiende fixes al rango 768–900 px donde aplica.
   --------------------------------------------------------------------------
   No toca BD ni post_content. Solo CSS aditivo al final de la hoja.
   ATENCIÓN — Issue 7 (Ventaja 02 KD invisible): la causa raíz es un bug
   de HTML en wp_posts.post_content (página ID 5636). El bloque CSS que
   se incluye más abajo es un WORKAROUND y solo funciona si el navegador
   soporta :has() o si el card 2 es el 2º hijo de la grid (no es el caso
   aquí). El fix real es editar el HTML del post.
   ========================================================================== */

/* ------ ISSUE 6 · Nav header trunca "Contacto" en tablet ----------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-inner { gap: 20px !important; height: 80px !important; }
  .nav-links > a,
  .nav-links > .has-megamenu > a,
  .nav-links .megamenu-trigger {
    font-size: 13px !important;
    padding: 8px 8px !important;
  }
  .nav-links { gap: 14px !important; }
  .lang-toggle button[data-lang="fr"],
  .lang-toggle button[data-lang="pt"],
  .lang-toggle button[data-lang="de"] { display: none !important; }
  .nav-right .btn-accent { padding: 10px 16px !important; font-size: 12px !important; }
  .nav-right .btn-accent .arr { display: none !important; }
  .nav .brand-img:not(.brand-img-footer),
  .brand-svg { height: 40px !important; max-height: 40px !important; width: 143px !important; }
  /* .brand--header tiene un ancho fijo (207px, ver ISSUE "Foco de teclado
     del logo") para que el foco de teclado no rodee una caja vacía; en este
     rango concreto el logo se reduce a 40px de alto (ver arriba) así que su
     contenedor debe encogerse en la misma proporción o el flex lo comprime
     de vuelta al ancho por defecto. */
  .brand--header { width: 143px !important; }
}

/* ------ ISSUE 7 · Workaround Ventaja 02 KD invisible (root cause HTML) --- */
.page-id-5636 div[style*="grid-template-columns: 1fr 1fr"] > div:has(> div > span.tag[style*="rgba(255,255,255,0.18)"]) {
  background: var(--fg) !important;
  color: #fff !important;
}
/* NOTA: si :has() no se aplica (navegadores antiguos), el HTML sigue mal.
   Abrir ticket de WP-CLI para reparar el post_content del page 5636. */

/* ------ ISSUE 8 · Tablas comparativas se cortan a la derecha en tablet --- */
@media (min-width: 481px) and (max-width: 1100px) {
  .mp-table-section { position: relative; }
  .mp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
    min-width: 100%;
  }
  .mp-table thead, .mp-table tbody, .mp-table tr {
    display: table; width: 100%; table-layout: fixed;
  }
  .mp-table th, .mp-table td { font-size: 13px; padding: 12px 10px; word-break: normal; }
  .mp-table-section::after {
    content: "";
    position: absolute; top: 0; right: 0; width: 24px; height: 100%;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
    pointer-events: none;
  }
  .cmp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
  }
  .cmp-table th, .cmp-table td { font-size: 13px; padding: 12px 10px; }
}

/* ------ ISSUE 9 · Tablas del blog parten palabras letra a letra ---------- */
/* Causa: la regla global "MOBILE FIXES PASE 3" de mas arriba
   ("body table{display:block}" + "body table th,td{word-break:break-word}",
   reforzada por "article table" del bloque B) quita el contexto de tabla
   real a thead/tbody/tr (se quedan sin ancho de columna compartido) y fuerza
   el corte de palabra cuando una columna es corta (el nombre de una
   plataforma, p.ej.) y otra trae un parrafo largo. Pasa en movil y a veces
   en escritorio, en cualquier ancho — no es un problema de un rango
   concreto. Hoy (25-sep-2026) se parcheo articulo a articulo (posts 14620,
   14676, 14678, 14685) envolviendo cada tabla en su post_content; este
   bloque lo arregla UNA vez para TODAS las tablas del blog. Acotado a
   .bs-article-body, el contenedor EXCLUSIVO del cuerpo de entradas del blog
   (ver single.php) — NO toca .mp-table/.cmp-table de paginas de servicio
   (ya arregladas el 25-sep con ISSUE 8 + su bloque @media max-width:480px)
   ni ninguna otra tabla del sitio. Mismo patron que ISSUE 8: la propia
   tabla es el contenedor de scroll (display:block + overflow-x:auto) y
   thead/tbody/tr recuperan un contexto de tabla real (display:table) para
   que las columnas midan su contenido de verdad en vez de comprimirse
   hasta partir la palabra. */
.bs-article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.bs-article-body table thead,
.bs-article-body table tbody,
.bs-article-body table tr {
  display: table;
  width: 100%;
  table-layout: auto;
}
.bs-article-body table th,
.bs-article-body table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  min-width: 110px;
}
.bs-article-body table th:first-child,
.bs-article-body table td:first-child {
  min-width: 130px;
}
/* Los enlaces dentro de celdas heredarian word-break:normal de la celda,
   pero la regla "Universo Summum" de mas arriba ("body a{word-break:
   break-word;overflow-wrap:anywhere}", @media max-width:760px, pensada para
   que mailto/URLs largas del nav/footer no desborden) hace match DIRECTO
   sobre el <a> y gana a la herencia, aunque su especificidad (0,0,2) sea
   menor que la de estas reglas de tabla — un valor especificado en el propio
   elemento siempre gana a uno heredado del padre. Confirmado en vivo
   (getComputedStyle) en el post 14250: el <a> de la 1a celda de una fila
   mostraba word-break:break-word pese a que su <td> ya tenia normal, y
   "procedimiento" se partia a media palabra sin guion/barra cerca. Con
   especificidad 0,1,2 esta regla sí gana a "body a" (0,0,2). */
.bs-article-body table a {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
@media (max-width: 760px) {
  .bs-article-body table th,
  .bs-article-body table td {
    font-size: 14px;
    padding: 8px 10px;
    min-width: 96px;
  }
  .bs-article-body table th:first-child,
  .bs-article-body table td:first-child {
    min-width: 112px;
  }
}

/* ------ ISSUE 3 · Cabecera de single post no va de lado a lado ----------- */
.post-single .post-body {
  max-width: none !important;
  margin: 0 !important;
}
.post-single .post-body > .wrap > .post-content,
.post-single .post-body article.post-content,
.post-single .post-body .post-content {
  max-width: 880px;
  margin: 0 auto;
}
.post-single .post-head,
.post-single section.post-head {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ------ EXTRA A · .bonos KD grid colapso a 2 cols en tablet -------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .bonos { grid-template-columns: repeat(2, 1fr) !important; gap: 20px; }
  .bonos .bono .price { font-size: 44px; }
  .bonos .bono { padding: 24px; }
}

/* ------ EXTRA B · .step-grid (4 pasos) a 2 cols en tablet --------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .step-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
  .kd-step .n { font-size: 44px; }
}

/* ------ EXTRA C · .metrics-grid + .lp-stats a 2 cols en tablet ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .metrics-grid,
  .lp-stats .row { grid-template-columns: repeat(2, 1fr) !important; gap: 28px; }
  .metric .v,
  .lp-stats .num { font-size: 44px !important; }
}

/* ------ EXTRA D · .mp-process-grid (5 cols) a 3/2 en tablet ------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .mp-process-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .mp-process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ------ EXTRA E · .footer-grid 1.6/1/1/1 → 3 cols en tablet ------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 32px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 16px; }
}

/* ------ EXTRA F · SEO-C2-01 (2026-09-26): .footer-grid pasa de 6 a 7 <div>
   (columna "Marketplaces" nueva en footer.php). La rejilla base de
   summum-v3.css es fija (1.6fr 1fr 1fr 1fr, con nth-child(5)/(6) en
   span:2 pensados para 6 hijos) y no se toca aquí: se sustituye por
   auto-fit para que absorba cualquier número de columnas sin overflow,
   y se anula el span:2 (ya no casa con la posición 5/6 tras insertar la
   columna nueva en la 4ª). Sin @media: aplica en desktop y se cede el
   paso a EXTRA E (tablet, !important) y a la regla de summum-v3.css a
   ≤480px (!important, 1 columna) sin conflicto. --------------------- */
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.footer-grid > div:nth-child(5),
.footer-grid > div:nth-child(6) { grid-column: auto; }

/* === fin bloque tablet 2026-05-24 === */
/* === fin bloque tablet 2026-05-24 === */

/* FIX 2026-06-02 (Summum): .post-body a coloreaba/subrayaba tambien los botones
   -> texto naranja sobre boton naranja (.btn-accent) = invisible. Restaurar boton. */
.post-body a.btn{color:var(--inv);text-decoration:none}
.post-body a.btn-accent{color:#fff;text-decoration:none}
.post-body a.btn-ghost{color:var(--fg);text-decoration:none}
.post-body a.btn:hover{background:var(--fg)}
.post-body a.btn-accent:hover{background:var(--orange-deep);color:#fff}

/* FIX diseño 2026-09-25 (Summum): en /marketplaces/ (page-id 12214, plantilla
   page.php → .page-body, NO .post-body) los enlaces de cuerpo van en HTML
   plano sin clase (<a href="/amazon/">agencia Amazon</a>), así que no
   heredan el tratamiento accesible de ".post-body a, .legal-body a" (más
   arriba en este fichero) ni el de .summum-inline-link (ninguno de los dos
   selectores incluye .page-body) y caen en el reset global
   "a{color:inherit;text-decoration:none}" de summum-v3.css = visualmente
   indistinguibles del texto. NO se toca el post_content (otra sesión lo
   está editando en paralelo); se resuelve por CSS replicando el mismo
   tratamiento de .post-body a, acotado con :not([class]) para no pisar
   componentes ya estilados dentro de .page-body (.mp-sources a,
   .summum-related-card, .btn…) y con el ID de página para no tocar el
   resto del sitio. */
.page-id-12214 .page-body a:not([class]){color:var(--orange-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page-id-12214 .page-body a:not([class]):hover{background:var(--yellow);color:var(--fg);text-decoration:none}

/* FIX 2026-06-02 (Summum): ancho real de las landings de oficina.
   Causa raiz: summum-v3.css agrupo .post-body en la regla de blog
   '.post-body, article.post-content, .post-content{max-width:880px !important}',
   encajonando el contenido de oficina a 880px centrados. Se descapa SOLO en
   .oficina-single y se iguala al ancho del sitio (--max), ganando al inline 920px. */
.oficina-single .post-body{max-width:none!important;margin-left:0!important;margin-right:0!important}
.oficina-single .post-body .wrap{max-width:var(--max)!important;margin-left:auto!important;margin-right:auto!important}
.oficina-single .post-body .lp-hero-grid{max-width:none!important}

/* === FIX 2026-06-06 · Summum · ancho y márgenes de posts de blog ============
   Ángel detectó (replicado en TODOS los posts): cuerpo demasiado estrecho y
   contenido/tarjetas pegados al borde. Causa: regla de blog
   .post-body .wrap{max-width:760px}+{padding:0 16px!important}.
   Se ensancha la columna y se restaura el padding lateral SOLO en posts
   (.post-single). No afecta a oficinas/servicios/home. Reversible: quitar bloque. */
.post-single .post-body .wrap{max-width:980px !important;padding-left:clamp(20px,4vw,48px) !important;padding-right:clamp(20px,4vw,48px) !important}
.post-single .post-body > .wrap > .post-content{max-width:100% !important}
@media(max-width:600px){.post-single .post-body .wrap{max-width:100% !important;padding-left:18px !important;padding-right:18px !important}}

/* === FIX 2026-06-06 v2 · Summum · ancho de páginas informativas + hero /recursos/ ===
   - Páginas 'page' sin hero (kit-consulting, legales…) corrían a ancho completo:
     se acota la columna de lectura a 880px centrada. No afecta a servicios con hero
     (esos no usan .page-body>.wrap) ni a posts (.post-body).
   - El SVG decorativo del hero (.mp-hero-art/.mp-hero-svg) no tenia tamano y salia
     gigante en TODAS las paginas que comparten este componente (19 paginas
     verificadas en BD 9-ago-2026: recursos, metodologia, manifesto, equipo, faq,
     glosario, changelog, calidad, colaboradores, comparativas, diversidad,
     informes, predicciones, tendencias 2026/2027, ai-citation-guide,
     ai-training-data, entre otras). Antes solo se habia corregido para
     .page-recursos; 9-ago-2026 generalizado sin scope de pagina (mismo viewBox
     120x120 y misma estructura en las 19). Reversible. */
.page-generic .page-body > .wrap{max-width:880px;margin-left:auto;margin-right:auto}
.mp-hero-svg,.mp-hero-art{max-width:360px;margin-left:auto;margin-right:auto}
.mp-hero-svg svg,.mp-hero-art svg{width:100%;height:auto;max-height:380px}

/* ===== BLOQUE RELACIONADOS / SERVICIOS · Summum 2026-06-10 =================
   Clases propias: .summum-related-grid · .summum-related-card
                   .summum-related-eyebrow · .summum-related-title
                   .summum-related-excerpt · .summum-related-cta
   .summum-service-related añade la variante para landings de servicio.
   NO se definen reglas globales fuera de estos selectores.
   Contraste CTA: --orange-deep #E04F0F sobre --bg-soft #F0EDE5 → 3.39:1 (AA UI).
   ========================================================================= */

/* — eyebrow y título de sección — */
.post-related .summum-related-eyebrow {
  margin-bottom: 16px;
}
.post-related .summum-related-title {
  margin-bottom: 32px;
  font-size: clamp(28px, 3.5vw, 44px);
}

/* — grid de tarjetas — */
/* FIX diseño 2026-09-25 (Summum): auto-fill creaba columnas "fantasma" vacías
   cuando el nº de tarjetas no llenaba el ancho (p.ej. 3 tarjetas en un wrap
   que cabían 4 columnas de 280px): las 3 tarjetas quedaban comprimidas al
   ~73% del ancho con un hueco vacío a la derecha. auto-fit colapsa las pistas
   sin contenido y las tarjetas existentes se reparten el 100%. Visto en
   /miravia/ y comprobado también en el resto de landings que usan este
   mismo componente (bloques "También te puede interesar" / "Completa tu
   estrategia" / "Del blog" en todo el sitio, no solo marketplaces). */
.summum-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* — tarjeta individual — */
a.summum-related-card {
  padding: 28px 24px;
  background: var(--bg-soft);
  border-color: var(--line);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 14px rgba(10,10,10,.06);
}

a.summum-related-card .card-cluster {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

a.summum-related-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  margin: 8px 0 12px;
  color: var(--fg);
}

.summum-related-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 0 0 18px;
}

/* — CTA "Leer artículo →" con --orange-deep (contraste AA) — */
.summum-related-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
  font-weight: 600;
  margin-top: auto;
}

/* hover: leve elevación heredada del .card base */
a.summum-related-card:hover .summum-related-cta {
  text-decoration: underline;
}

/* hover: sombra elevada */
a.summum-related-card:hover {
  box-shadow: 0 10px 28px rgba(10,10,10,.12);
  transform: translateY(-2px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* — variante servicio: sin cluster, título ligeramente mayor — */
.summum-service-related a.summum-related-card h3 {
  font-size: 18px;
  margin-top: 0;
}

/* — responsive: 1 columna en móvil — */
@media (max-width: 600px) {
  .summum-related-grid {
    grid-template-columns: 1fr;
  }
  .post-related .summum-related-title {
    font-size: 28px;
  }
}

/* === fin bloque relacionados 2026-06-10 === */

/* ===== BLOQUE "DEL BLOG" BAJO SERVICIOS · Summum 2026-07-18 ================
   .summum-blog-related reutiliza TODO el componente .summum-related-* de
   arriba (mismas tarjetas, mismo grid, misma tipografía) para no inventar un
   estilo nuevo. Este bloque solo atenúa el contenedor respecto al de
   "También te puede interesar": menos padding y sin fondo sombreado, solo
   una línea fina de separación — es el último bloque antes del footer y
   puede convivir apilado con el de servicios/hub en la misma página, así
   que va más discreto a propósito (decisión Ángel: "no invasivo").
   ========================================================================= */
.summum-blog-related.post-related {
  padding: 56px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

/* === fin bloque "Del blog" 2026-07-18 === */

/* ===== ENLACE DE PROSA CONTEXTUAL · Summum 2026-06-16 =====================
   Clase .summum-inline-link para los enlaces internos dentro del cuerpo de
   hubs y clústers (Kit Consulting, Kit Digital, etc.). Resuelve la deuda de
   contraste del enlace de prosa por defecto: el naranja de acento --orange
   (#FF5E1A) sobre el fondo --bg (#FAFAF7) mide 2.92:1 y NO cumple AA para
   texto normal. Aquí el texto va en --fg (#0A0A0A) → 18.93:1 sobre --bg, con
   el subrayado en --orange como distintivo visible (el color no es el único
   indicador → cumple AA). NO se altera la regla .post-body a preexistente.
   ========================================================================= */
.summum-inline-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: background 160ms ease, text-decoration-color 160ms ease;
  border-radius: 2px;
}
.summum-inline-link:hover {
  background: var(--yellow);
  color: var(--fg);
  text-decoration-color: var(--fg);
}
.summum-inline-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
/* Override de especificidad: dentro de .post-body los enlaces heredan
   .post-body a { color: var(--orange-text) } (#B23C09, especificidad 0,1,1),
   que ganaba a .summum-inline-link (0,1,0) y dejaba el enlace en naranja
   plano. Igualamos especificidad para mantener el patrón aprobado (texto en
   --fg + subrayado --orange) también en los clústers de blog. No se toca la
   regla .post-body a preexistente. */
.post-body a.summum-inline-link,
.page-body a.summum-inline-link {
  color: var(--fg);
  text-decoration-color: var(--orange);
}
.post-body a.summum-inline-link:hover,
.page-body a.summum-inline-link:hover {
  background: var(--yellow);
  color: var(--fg);
  text-decoration-color: var(--fg);
}
/* === fin enlace de prosa contextual 2026-06-16 === */

/* === mp-pricing · bloque de inversión/precio en hubs (Summum, 2026-06-20) === */
.mp-pricing{padding:96px 0;border-top:1px solid var(--line);background:var(--bg-warm)}
.mp-pricing .eyebrow{margin:0 0 20px}
.mp-pricing h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.5vw,54px);line-height:1.05;letter-spacing:-0.035em;margin:0 0 28px;max-width:24ch}
.mp-pricing h2 .it{font-family:var(--serif);font-style:italic;color:var(--orange)}
.mp-pricing p{font-size:17px;line-height:1.7;color:var(--fg-dim);max-width:74ch;margin:0 0 18px}
.mp-pricing p strong{color:var(--fg)}
.mp-pricing .btn{margin-top:16px}

/* ==========================================================================
   UX-fixes 2026-07-02 - Summum Marketing
   Lote de accesibilidad/contraste de la revision UX (5 lentes, 2026-07-02).
   ========================================================================== */

/* (b) Foco de teclado del logo del header casi invisible (sitewide).
   Diagnostico verificado con getComputedStyle/getBoundingClientRect en las
   6 paginas nucleo: <a class="brand brand--header"> mide width:0 SIEMPRE
   (no solo cuando JS le añade .brand-intro), en home, kit-digital,
   kit-consulting, seo, contacto y neuromarketing. Causa: .nav-inner es un
   grid de 3 columnas (grid-template-columns: auto 1fr auto); la primera
   columna ("auto") aloja a .brand--header, que es a su vez un flex-column
   (.brand{display:inline-flex;flex-direction:column;width:fit-content})
   cuyo unico hijo es el <svg class="brand-svg"> del logo. En ese anidado
   grid+flex+SVG, Chromium resuelve el min-content de la columna a 0 (
   verificado forzando explicitamente grid-template-columns a "min-content
   1fr auto" -> tambien da 0; con "max-content 1fr auto" -> da 157px, el
   ancho real del SVG). Con width:0 el anillo de :focus-visible (ya
   definido globalmente en summum-v3.css) rodea una caja vacia: al tabular
   hasta el logo no se ve nada, solo una linea vertical de foco. Se fija
   el ancho real del logo (207px desktop, igual a la proporcion ya usada
   por .brand-svg a 58px de alto — actualizado 2026-07-14 junto con el
   agrandado del logo, antes 157px/44px de alto; 150px en el breakpoint
   <=700px donde .brand-svg baja a 42px de alto, antes 136px/38px) para
   que el elemento tenga una caja real y el foco de teclado sea visible.
   Se añade ademas un :focus-visible explicito coherente con la paleta
   (naranja #FF5E1A sobre crema) por claridad, aunque la regla global
   *:focus-visible ya lo cubre una vez el ancho deja de ser 0. */
.brand--header {
  width: 207px;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .brand--header { width: 150px; }
}
.brand--header:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* (e) Boton de menu movil "Menu" por debajo del tamaño tactil recomendado
   (sitewide, medido 36x36px a 390px). La regla existente en summum-v3.css
   (.mobile-toggle,...{min-height:44px}) solo se activa dentro de
   @media (hover:none) and (pointer:coarse), por lo que en dispositivos
   hibridos (portatil/tablet tactil con raton conectado) o al revisar en
   un viewport estrecho sin emulacion tactil, el boton se queda en 36px.
   Se sube a 44x44px directamente por ancho de viewport (mismo breakpoint
   760px que ya usa .mobile-toggle para su tamaño base), sin depender de
   hover/pointer. El header solo tiene el logo (izquierda) y este boton
   (derecha) en ese breakpoint (.nav-inner pasa a grid-template-columns:
   auto auto), asi que los +8px de ancho/alto no generan solape ni rotura
   de layout. */
@media (max-width: 760px) {
  .mobile-toggle {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   UX-fixes 2026-07-02 · Summum Marketing
   --------------------------------------------------------------------------
   Bug movil confirmado: al abrir el menu hamburguesa en 390px y tocar
   "Servicios" (mismo patron reproducido en "SEO"), el panel del megamenu
   se desborda del viewport: hace falta scroll horizontal y el contenido no
   se ve completo. Diagnosticado con Playwright (viewport 390x844,
   getBoundingClientRect + inspeccion de reglas CSS que realmente ganan la
   cascada, no solo lectura del CSS fuente):

   CAUSA RAIZ 1 (por que el panel se sale por el lado):
   En summum-v3.css, la regla sin media query
     .nav-links > a, .nav-links .has-megamenu { ...; display: inline-flex
     !important; align-items: center !important; }
   convierte a `.has-megamenu` (el contenedor que envuelve el enlace
   "Servicios" + su panel) en un flex EN FILA en TODOS los anchos de
   pantalla. Dentro del drawer movil eso deja el trigger "Servicios"
   (~117px) y el panel del megamenu (~296px) uno al lado del otro en vez
   de apilados, sumando ~413px de ancho dentro de un drawer de ~375-390px.
   Medido en vivo: `.has-megamenu` con width:413.48px y x:-26.74 (parte
   fuera de la pantalla por la izquierda) en viewport de 390px.

   CAUSA RAIZ 2 (por que dentro aparecen 2 columnas de escritorio):
   `.megamenu-inner` tiene varias declaraciones `display:grid;
   grid-template-columns:...!important` SIN media query, pensadas para el
   layout de escritorio (columna principal + rail lateral de 240-280px).
   Por orden de cascada esas declaraciones ganan sobre el
   `@media (max-width:900px){.megamenu-inner{grid-template-columns:1fr
   !important}}` que ya existia. La regla que si aplana el grid a 1
   columna en movil (bloque "ISSUE 3" de 2026-05-22, mas arriba en este
   mismo fichero) solo se activa con el selector `.has-megamenu.open`, es
   decir depende de que el JS del menu haya anadido la clase `.open`. Pero
   en la practica, probado con clicks reales via Playwright (no solo
   simulados por JS), el panel del megamenu se muestra por `:focus-within`
   (el enlace "Servicios" recibe foco de forma nativa al tocarlo) SIN que
   la clase `.open` llegue a quedar activa de forma fiable. Como la regla
   que aplana a 1 columna esta condicionada solo a `.open`, en ese camino
   real nunca se aplica y sobrevive el grid de 2 columnas de escritorio
   dentro de un contenedor de 288px de ancho, con overflow y una altura
   resultante absurda (medida: 25726px).

   FIX (100% CSS, aditivo, mismo breakpoint <=900px que ya usa el tema
   para el drawer movil): forzar que (a) `.has-megamenu` sea un bloque de
   ancho completo, no una fila flex, y (b) el panel se aplane a 1 columna
   y quede acotado en altura con scroll propio, sea cual sea el mecanismo
   (.open, :focus-within o :hover) que lo este mostrando. No se toca el
   JS del menu ni el markup. Selectores con especificidad reforzada
   (3 y 5 clases) para ganar de forma robusta a las reglas antiguas sin
   necesidad de reordenar el CSS existente. */
@media (max-width: 900px) {
  .nav .nav-links .has-megamenu {
    display: block !important;
    width: 100% !important;
  }

  .nav .nav-links .has-megamenu.open .megamenu,
  .nav .nav-links .has-megamenu:focus-within .megamenu,
  .nav .nav-links .has-megamenu:hover .megamenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .nav .nav-links .has-megamenu.open .megamenu .megamenu-inner,
  .nav .nav-links .has-megamenu:focus-within .megamenu .megamenu-inner,
  .nav .nav-links .has-megamenu:hover .megamenu .megamenu-inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav .nav-links .has-megamenu.open .megamenu .mm-cols,
  .nav .nav-links .has-megamenu:focus-within .megamenu .mm-cols,
  .nav .nav-links .has-megamenu:hover .megamenu .mm-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .nav .nav-links .has-megamenu.open .megamenu .mm-rail,
  .nav .nav-links .has-megamenu:focus-within .megamenu .mm-rail,
  .nav .nav-links .has-megamenu:hover .megamenu .mm-rail {
    grid-template-columns: 1fr !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    width: 100% !important;
  }
}
/* === fin UX-fixes megamenu movil 2026-07-02 === */

/* ==========================================================================
   UX-fixes 2026-07-02 · Summum Marketing · ampliación 2 (megamenú escritorio)
   --------------------------------------------------------------------------
   Peticion: el panel del megamenu de escritorio se percibe abigarrado tras
   la incorporacion de las 6 secciones (01 Marketing Digital ... 06 IA,
   Marketplaces & Consultoria). Estado medido a 1440px antes del cambio:
   panel de 1200px, grid interior minmax(0,1fr) 240px (area principal 832px
   para 6 columnas => ~115px/columna), .mm-cols con gap 24px, .mm-name
   forzado a 13px y .mm-desc a 11px/1.3.
   Cambio: se ensancha el panel hacia el ancho util del viewport (tope
   1440px, margen lateral minimo 48px por lado) y se da mas aire: mas
   padding del panel, mas gap entre columnas y entre bloques, y tipografia
   de los items ligeramente mayor con mas line-height. Scoped a
   @media (min-width:1101px) porque entre 901-1100px el theme ya aplica su
   propio layout de panel a ancho de viewport, y por debajo de 900px rige
   el fix movil anterior (que no se toca). Selectores de alta especificidad
   + !important para ganar a las declaraciones base de summum-v3.css sin
   reordenar nada. El centrado (left:50% + translateX(-50%)) no se altera,
   solo el ancho, de modo que el panel sigue centrado y dentro del viewport.
   Pendiente de visto bueno visual del cliente; rollback = quitar este
   bloque (o restaurar backup) + purga de cache. */
@media (min-width: 1101px) {
  .nav .nav-links .has-megamenu .megamenu {
    width: min(1440px, calc(100vw - 96px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 96px) !important;
    padding: 48px 56px !important;
  }
  .nav .nav-links .has-megamenu .megamenu .megamenu-inner {
    gap: 40px 56px !important;
  }
  .nav .nav-links .has-megamenu .megamenu .mm-cols {
    gap: 32px 36px !important;
  }
  .nav .nav-links .has-megamenu .megamenu .mm-col {
    gap: 4px !important;
  }
  .nav .nav-links .has-megamenu .megamenu .mm-link {
    padding: 10px 10px !important;
    margin: 0 -10px !important;
  }
  .nav .nav-links .has-megamenu .megamenu .mm-link .mm-name {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
  .nav .nav-links .has-megamenu .megamenu .mm-link .mm-desc {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-top: 3px !important;
  }
}
/* === fin ampliacion 2 · megamenu escritorio 2026-07-02 === */

/* ==========================================================================
   UX-fixes 2026-07-02 · Summum Marketing · ampliación 2b (drawer móvil)
   --------------------------------------------------------------------------
   Dos hallazgos del checklist de verificacion del menu movil (390x844):
   1. El banner de cookies (#summum-cc-banner, z-index 999999, fixed bottom)
      tapa la barra inferior del drawer movil (tema/idiomas/CTA "Empecemos"):
      .nav tiene z-index 50 (stacking context), por lo que NINGUN z-index de
      sus hijos puede superar al banner. Medido: banner 643-844px sobre
      nav-right 619-844px => overlap. Fix: cuando el drawer esta abierto
      (.nav.mobile-open) se eleva el stacking context del header completo por
      encima del banner. Al cerrar el menu, .nav vuelve a z-index 50 y el
      banner queda visible de nuevo (no se oculta el consentimiento, solo
      queda detras MIENTRAS el usuario navega por el menu).
   2. Los enlaces del pie del megamenu (.mm-foot-link, "Ver todos los
      servicios", etc.) miden 39px de alto en movil, por debajo del minimo
      tactil de 44px (WCAG 2.5.5/2.5.8). Se fuerza min-height 44px con
      centrado vertical. El resto de entradas ya cumplen (48-68px). */
@media (max-width: 900px) {
  .nav.mobile-open {
    z-index: 1000000 !important;
  }
  .nav.mobile-open .has-megamenu .megamenu .mm-foot-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* 2c: los 5 enlaces de Oficinas del rail (anclas SIN clase dentro del
     megamenu) median 39px de alto en movil (<44px tactiles). Se les fuerza
     min-height 44px con centrado vertical. El selector a:not([class]) los
     cubre exactamente sin tocar .mm-link (flex-column con name+desc) ni
     .mm-feature (tarjeta con estructura propia). */
  .nav.mobile-open .has-megamenu .megamenu a:not([class]) {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* 2d: el drawer (.nav-links fixed) arrancaba en top:0, de modo que al
     hacer scroll dentro del megamenu los items pasaban POR DETRAS del
     header translucido y chocaban visualmente con el logo. Se ancla el
     drawer justo bajo el header (96px de alto medido) para que el
     contenido nunca se solape con logo/boton de cierre.
     2e: ademas, .nav-links hereda justify-content:center del layout de
     escritorio. Con el megamenu desplegado, el contenido del drawer
     (~1014px) supera su alto visible (~748px) y el centrado flex hace
     desbordar por AMBOS extremos: la parte superior (el trigger
     "Servicios" y las primeras entradas) queda por encima del area
     scrolleable y es INALCANZABLE (scrollTop no baja de 0). Se ancla el
     contenido arriba (flex-start), que ademas es el patron estandar de
     drawer movil. */
  .nav.mobile-open .nav-links {
    top: 96px !important;
    padding-top: 16px !important;
    justify-content: flex-start !important;
  }
}
/* === fin ampliacion 2b · drawer movil 2026-07-02 === */

/* ==========================================================================
   UX-fixes 2026-07-02 (G2) - Summum Marketing: verify-then-fix de contraste
   (mismo enfoque que el lote de las 07:55). Medido con formula WCAG 2.1
   sobre los colores computados reales:
   - .tag (variante base, texto color:var(--fg-dim) rgba(10,10,10,0.62)
     sobre background:var(--bg-soft) #F0EDE5) = 5,35:1 -> PASA AA (>=4,5:1).
     No se toca. Las pastillas "Ventaja 01/02" de /kit-digital/ usan un
     color inline (#0A0A0A, 15,7:1) o .eyebrow, ninguna hereda el .tag base
     con contraste bajo. Sin cambios.
   - .skip-link ("Saltar al contenido") sobre fondo var(--orange) #FF5E1A
     con texto color:#fff medía 3,06:1 -> FALLA AA. Corregido en
     summum-v3.css (mismo grupo G2, bundle minificado compartido):
     color:#fff -> color:var(--fg) (#0A0A0A), 6,47:1 sobre el mismo fondo
     naranja sin tocar el fondo. Ver comentario junto a .skip-link.
   ========================================================================== */

/* Home · Seis razones — grid responsive (fix display:grid ausente + separación de tarjetas). Summum Marketing 2026-07-07 */
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.why-cards{grid-template-columns:1fr;gap:20px}}

/* ==========================================================================
   UX-FIXES · revision de accesibilidad y layout (mp-*, /servicios/,
   /kit-digital/) · Summum Marketing 2026-07-08. Bloque anadido al final
   para maxima especificidad de cascada, sin tocar las reglas base.
   ========================================================================== */

/* --- FIX 1 (contraste AA): "Ver servicio →" en las tarjetas de categoria
   de /servicios/ (.svc-grid .arr, definido mas arriba en este fichero,
   linea ~651) quedo fuera del barrido de accesibilidad "Naranja como
   TEXTO sobre fondo claro" de 2026-05-22 (ver bloque mas arriba en este
   mismo fichero, linea ~2251) y seguia en var(--orange) #FF5E1A (~2,9:1
   sobre #FAFAF7, FALLA AA). Se homologa al mismo token ya usado en
   .card .more / .mp-card .more / .cat-num / .mp-card .num, etc.:
   var(--orange-text) #B23C09 (>=4,5:1 sobre #FAFAF7/#F0EDE5/#F6E9D7).
   No se toca ningun naranja decorativo ni de boton. */
.svc-grid .arr{color:var(--orange-text)}

/* --- FIX 2 (rejillas con huecos, /servicios/ y landings mp-*): .svc-grid
   tiene categorias de exactamente 4 servicios sobre una rejilla fija de 3
   columnas (Web & Tecnologia, Diseño y marca, Comunicacion & PR) -> la 4ª
   tarjeta queda huerfana pegada a la izquierda en la 2ª fila. Mismo patron
   estructural en .mp-services-grid (componente reutilizado en
   /agencia-posicionamiento-seo/, /neuromarketing/ y sectoriales de Kit
   Digital) para cualquier recuento que no sea multiplo de 3. En vez de
   convertir la rejilla a flex (mas cambios, mas riesgo), se desplaza el
   UNICO elemento sobrante a la columna central de su fila
   (:last-child:nth-child(3n+1) sólo coincide cuando sobra exactamente 1),
   sin tocar columnas, gap ni el interior de las tarjetas. A ≤900px ambas
   rejillas ya colapsan a 1 columna (reglas existentes); se resetea
   grid-column ahi para que el desplazamiento no cree una columna
   implicita vacia. */
.svc-grid a:last-child:nth-child(3n+1),
.mp-services-grid .mp-card:last-child:nth-child(3n+1){grid-column:2}
@media (max-width:900px){
  .svc-grid a:last-child:nth-child(3n+1),
  .mp-services-grid .mp-card:last-child:nth-child(3n+1){grid-column:auto}
}

/* --- FIX 2b (rejilla real de /redes-sociales/): la seccion "Nuestro
   servicio de redes sociales" (id="servicios") usa un <div> SIN clase con
   estilo inline display:grid;grid-template-columns:repeat(auto-fit,
   minmax(260px,1fr)) — no editable desde aqui (solo se tocan los 2
   ficheros CSS, no el HTML/plantilla). Con 6 tarjetas el numero de
   columnas que calcula auto-fit no es multiplo de 6 (tipicamente 4),
   dejando la ultima fila con huecos a la derecha; grid no centra filas
   incompletas cuando el nº de columnas varia por viewport (el truco de
   FIX 2 no sirve aqui). Se fuerza flex+wrap+center con !important, unico
   modo de pisar el display/grid-template-columns inline. */
#servicios > .wrap > div[style*="auto-fit"]{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
}
#servicios > .wrap > div[style*="auto-fit"] > div{
  flex:1 1 260px;
  max-width:300px;
}

/* --- FIX 3 (decoracion de hero desbordada en movil): en
   /agencia-posicionamiento-seo/, /neuromarketing/ y /redes-sociales/ el
   motivo decorativo (cuadrado-icono + circulos dentro de .mp-hero-illus
   svg, ver linea ~23) usa order:-1 y se coloca ANTES del H1 en el
   breakpoint movil; a 360px de alto (regla existente a max-width:900px,
   linea ~164) empuja el H1 fuera de los primeros ~500px de pantalla en
   telefonos. Se reduce solo el alto (y el ancho maximo a 480px) en ambos
   breakpoints moviles, sin tocar el orden ni el resto de la regla. */
@media (max-width:900px){
  .mp-hero-illus{height:220px}
}
@media (max-width:480px){
  .mp-hero-illus{height:160px;max-width:260px}
}

/* --- FIX 6 (doble marco del sello Kit Digital en movil): el sello
   oficial (Logo-digitalizadores.png dentro de .pb-image) ya es una pieza
   cerrada con su propio limite visual; envolverlo ademas en
   .pb-image-link (fondo + borde + border-radius, pensado para
   .program-band en /kit-digital/, linea ~1849) crea un doble marco, mas
   evidente en movil por el padding ya reducido (16px 8px, linea ~1883).
   Se quita el borde y el fondo propios solo en el breakpoint movil,
   dejando aire de sobra alrededor del sello en vez de un segundo marco. */
@media (max-width:700px){
  .program-band .pb-image-link{
    border:0;
    background:transparent;
    padding:12px 8px;
  }
}

/* ==========================================================================
   UX-fixes 2026-07-09 · Summum Marketing
   Bloque al final del fichero para ganar la cascada sobre reglas previas.
   ========================================================================== */

/* (3) Contraste AA en el formulario oscuro de /contacto/ (.contact-r).
   Los placeholders (CF7) y la etiqueta de aceptación "He leído y acepto la
   Política…" heredaban var(--inv-mute) = rgba(250,250,247,0.45) → 4,35:1,
   por debajo de AA (4,5:1). Se suben el alfa manteniendo el estilo tenue
   (siguen más apagados que el texto de entrada, que es blanco pleno). */
.contact-r .wpcf7-form input.wpcf7-form-control::placeholder,
.contact-r .wpcf7-form textarea.wpcf7-form-control::placeholder{
  color:rgba(250,250,247,0.62);
  opacity:1;
}
.contact-r .summum-acceptance,
.contact-r .summum-acceptance label,
.contact-r .summum-acceptance .wpcf7-list-item-label{
  color:rgba(250,250,247,0.72);
}

/* (3-bis) Mismo problema que arriba, contexto distinto: el bloque de conversión
   genérico .summum-leadblock (inyectado por wp-content/mu-plugins/summum-lead-block.php
   vía `the_content` en cientos de páginas sin formulario propio, EXP-060) reusa el
   mismo formulario CF7 6003, pero su fondo es CLARO (rgba(255,94,26,.045), sobre
   --bg#FAFAF7 compone a rgb(250,243,237)) — lo contrario del fondo oscuro (--bg-ink)
   para el que se diseñó var(--inv-mute). El checkbox de privacidad ("He leído y
   acepto...") heredaba inv-mute = rgba(250,250,247,0.45) de la regla sin acotar de
   la línea ~2463 → contraste 1,02:1 con ese fondo, invisible. Verificado en vivo
   (getComputedStyle) en /identidad-corporativa-diseno-grafico/ el 9-ago-2026.
   var(--fg-mute) (rgba(10,10,10,0.65) en tema claro, la única variante en uso hoy —
   no existe modificador .summum-leadblock.dark en producción) da 6,06:1 sobre ese
   fondo, calculado con la fórmula WCAG de luminancia relativa → AA superado
   (≥4,5:1). Mismo patrón/variable que ya usan `.section .wpcf7-form
   .et_pb_contact_field` (línea ~2609) y `.tool-email-cta` (línea ~4565) para el
   mismo tipo de fondo claro. */
.summum-leadblock .wpcf7-form .et_pb_contact_field,
.summum-leadblock .wpcf7-list-item-label,
.summum-leadblock label{
  color:var(--fg-mute);
}

/* (5) CTA del hero dentro del fold en móvil para los heroes tipo .mp-hero
   (SEO, landings de ciudad). La ilustración decorativa se cargaba arriba
   (order:-1) empujando el CTA fuera del fold (medido a top 845px en
   /agencia-posicionamiento-seo/ y 808px en /kit-digital-valladolid/ a
   390×844). Se coloca la ilustración DESPUÉS del bloque de texto en móvil
   y se comprimen huecos/márgenes para subir el CTA por encima de 640px.
   Sin tocar contenido ni el layout de escritorio (todo en ≤900px). */
@media (max-width:900px){
  .mp-hero{padding:32px 0 64px}
  .mp-hero-grid{gap:26px}
  .mp-hero-eyebrow{margin:0 0 16px}
  .mp-hero h1{margin:0 0 18px}
  .mp-hero .lead{margin:0 0 24px}
  .mp-hero-illus{order:1;height:200px;margin-top:12px}
}

/* (4) Burbuja de chat (#summum-chat-button, estilo inline desde summum-v3.js):
   en móvil se reduce y se pega más a la esquina para no tapar texto del hero
   (medida 60×60 en 390×844 solapando el párrafo en varios heroes). */
@media (max-width:640px){
  #summum-chat-button{width:48px !important;height:48px !important;bottom:14px !important;right:14px !important}
  #summum-chat-button svg{width:20px !important;height:20px !important}
}

/* (5b) Hero de /kit-consulting/ (.kc-head, patrón .page-head): compactado en
   móvil para que el CTA "Solicitar" entre en el fold (medido a 862px en
   390×844; el fold es 844). Misma intención que el fix (5) de .mp-hero. */
@media (max-width:640px){
  .kc-head{padding:40px 0 40px}
  .kc-head .breadcrumb{margin-bottom:20px}
  .kc-head .lead-row{margin-top:24px;gap:16px}
}

/* ==========================================================================
   UX-fixes 2026-07-10 (2) · Summum Marketing
   ========================================================================== */

/* (A) Banda del programa oficial: en algunas páginas el enlace renderizaba
   como block y la imagen (2880x334) se estiraba al ancho del contenedor con
   la altura capada, deformando los logos dentro del marco. Se fuerza el
   contenedor flex centrado y la imagen con ratio intacto SIEMPRE. */
.program-band .pb-image-link{
  display:flex !important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* El optimizador WebP envuelve la imagen en <picture> y la class queda en el
   padre: se estila el img interno por descendencia, no por class. */
.program-band .pb-image-link picture{display:flex;justify-content:center;max-width:100%}
.program-band .pb-image-link img{
  flex:0 0 auto;
  height:96px !important;
  width:auto !important;
  max-width:100% !important;
  object-fit:contain;
}
@media (max-width:700px){
  .program-band .pb-image-link img{height:64px !important}
}

/* (B) FAQ en dos columnas en escritorio (petición Ángel 10-jul): las listas
   de tarjetas de preguntas ocupan la mitad de alto. En móvil, una columna. */
@media (min-width:901px){
  .faq-auto .faq-list{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:16px 20px;
    align-items:start;
  }
  .faq-auto .faq-list>details{margin:0}
}

/* ==========================================================================
   UX-fixes 2026-07-10 (3) · Summum Marketing — feedback visual de Ángel
   ========================================================================== */

/* (C) Banda negra CTA dentro de post-body: el color del párrafo del tema
   (var(--fg-dim)) pisaba la herencia del div oscuro y el texto no se veía.
   var(--inv) contrasta en tema claro y oscuro. */
.post-body div[style*="background: var(--fg)"] p,
.post-body div[style*="background:var(--fg)"] p,
.ssm-post-body div[style*="background: var(--fg)"] p,
.ssm-post-body div[style*="background:var(--fg)"] p{
  color:var(--inv) !important;
}
.post-body div[style*="background: var(--fg)"] a,
.post-body div[style*="background:var(--fg)"] a,
.ssm-post-body div[style*="background: var(--fg)"] a,
.ssm-post-body div[style*="background:var(--fg)"] a{
  color:var(--inv) !important;
  text-decoration:underline;
}

/* (D) Tarjetas de contenido relacionado: en fila con aire en escritorio
   (petición Ángel 10-jul), una columna en móvil. */
.summum-related{display:grid;grid-template-columns:1fr;gap:20px;margin-top:48px}
.summum-related>h2{grid-column:1/-1;margin-bottom:4px}
.summum-related .summum-related-card{margin:0;height:100%}
@media (min-width:901px){
  .summum-related{grid-template-columns:repeat(3,1fr);gap:24px}
  .summum-related.two{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   UX-fixes 2026-07-10 (4) · Summum Marketing — breakout de bloques visuales
   El tema capa .post-body a 880px y su .wrap a 760px (regla del blog):
   cualquier bloque de diseño del molde geo dentro del post-body debe
   romper esa caja y centrarse a ancho de página. Matemática: margen
   negativo de (50% del contenedor − mitad del ancho objetivo), válida
   para cualquier contenedor centrado.
   ========================================================================== */
.post-body .kc-intro-grid,
.post-body .kc-combo,
.post-body .kc-breakout{
  width:min(1160px,92vw) !important;
  margin-left:calc(50% - min(580px,46vw)) !important;
  margin-right:calc(50% - min(580px,46vw)) !important;
}
/* Grid del intro: columnas generosas y foto contenida (sticky, no estirada) */
.post-body .ssm-post-intro.kc-intro-grid{
  grid-template-columns:1.05fr .95fr !important;
  gap:44px !important;
  align-items:start !important;
}
.kc-intro-grid .post-figure{position:sticky;top:110px;margin:0}
.kc-intro-grid .post-figure img{
  width:100% !important;
  height:min(72vh,620px) !important;
  min-height:0 !important;
  object-fit:cover !important;
  border-radius:16px;
}
@media (max-width:900px){
  .post-body .kc-intro-grid,
  .post-body .kc-combo,
  .post-body .kc-breakout{
    width:auto !important;margin-left:0 !important;margin-right:0 !important;
  }
  .post-body .ssm-post-intro.kc-intro-grid{grid-template-columns:1fr !important}
  .kc-intro-grid .post-figure{position:static}
  .kc-intro-grid .post-figure img{height:240px !important}
}

/* (5) Eyebrow del hero mp-* en móvil: la regla global ≤480px infla p a 16px
   y el inline-flex trocea el texto en items que parten palabras
   ("CONSULT-ING"). Se alinea con los demás eyebrows del tema. */
@media (max-width:700px){
  .mp-hero-eyebrow{
    font-size:11px !important;
    letter-spacing:0.08em !important;
    line-height:1.7 !important;
    display:flex !important;
    flex-wrap:wrap;
    row-gap:2px;
    word-break:keep-all;
  }
}

/* (6) Sección combo KC+KD: banda cálida con tarjetas elevadas (feedback
   visual de Ángel 10-jul). Prefijo .post-body para ganar a los estilos
   scoped del contenido. */
.post-body .kc-combo{
  background:var(--bg-warm);
  padding:44px 44px 40px;
  border-radius:var(--radius-lg);
}
.post-body .kc-combo-card{
  background:#fff;
  border:1px solid rgba(10,10,10,.07);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(20,17,13,.08);
  padding:30px 30px 26px;
  position:relative;
  overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.post-body .kc-combo-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
}
.post-body .kc-combo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(20,17,13,.12);
}
.post-body .kc-combo-plus{filter:drop-shadow(0 8px 18px rgba(224,79,15,.35))}
@media (max-width:700px){
  .post-body .kc-combo{padding:24px 18px 22px}
}


/* === FIX menu movil (Summum Marketing - 2026-07-13) ===================
   Sintomas: con el drawer abierto el fondo se desplazaba (lock solo en
   body; en iOS no basta) y el gesto de scroll, al agotar el megamenu o
   tocar zonas no scrolleables, encadenaba al documento y descolocaba el
   menu. Arreglo: contencion de overscroll en el drawer (corta el
   encadenado hacia la pagina) + scroll tactil suave; el megamenu anidado
   se deja SIN contain a proposito, para que al llegar a su tope el gesto
   encadene al drawer y los items raiz sigan alcanzables. El lock de
   <html> lo pone summum-v3.js al abrir. */
@media (max-width: 900px) {
  .nav.mobile-open .nav-links {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .nav .nav-links .has-megamenu.open .megamenu,
  .nav .nav-links .has-megamenu:focus-within .megamenu {
    -webkit-overflow-scrolling: touch;
  }
}

/* === REDISEÑO DEL MENÚ MÓVIL (Summum Marketing · 2026-07-14) ==============
   Problema: el drawer heredaba el estilo de la barra de escritorio —enlaces
   tipo píldora (border-radius 999px) centrados con align-items:center—, así
   que cada ítem medía lo que su texto, quedaba descentrado respecto al de
   arriba y el separador no cruzaba la pantalla. La lista bajaba en zigzag,
   con cápsulas fantasma alrededor de cada palabra.
   Arreglo: en móvil el drawer es una LISTA, no una barra: ítems a ancho
   completo, alineados a un único eje izquierdo, separadores de borde a borde,
   área táctil holgada y jerarquía real en el megamenú.
   Solo dentro de @media (max-width:900px): cero riesgo para escritorio. */
@media (max-width: 900px) {

  /* --- El panel: lista, no barra ------------------------------------- */
  .nav.mobile-open .nav-links {
    align-items: stretch !important;      /* el fallo de raíz */
    justify-content: flex-start !important;
    padding: 8px 0 140px !important;      /* el padding lateral pasa a los ítems */
    gap: 0 !important;
  }

  /* --- Cada entrada: fila completa, sin píldora ---------------------- */
  .nav.mobile-open .nav-links > a,
  .nav.mobile-open .nav-links > .has-megamenu > a.megamenu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 56px !important;          /* área táctil holgada */
    margin: 0 !important;
    padding: 14px 24px !important;
    border-radius: 0 !important;          /* fuera cápsulas fantasma */
    border-bottom: 1px solid var(--line) !important;   /* separador de borde a borde */
    background: transparent !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    letter-spacing: -0.01em !important;
    transition: background-color 160ms ease-out !important;
  }
  .nav.mobile-open .nav-links > a:last-of-type {
    border-bottom: 0 !important;
  }
  /* Respuesta al toque: el menú tiene que "acusar" el dedo */
  .nav.mobile-open .nav-links > a:active,
  .nav.mobile-open .nav-links > .has-megamenu > a.megamenu-trigger:active {
    background: color-mix(in srgb, var(--ink, #0a0a0a) 5%, transparent) !important;
  }

  /* --- El disparador del megamenú: chevron propio que gira ----------- */
  .nav.mobile-open .nav-links .megamenu-trigger::after {
    content: "";
    width: 9px; height: 9px;
    margin-left: 12px;
    flex: none;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
    opacity: .45;
  }
  .nav.mobile-open .nav-links .has-megamenu.open > .megamenu-trigger::after {
    transform: rotate(-135deg) translateY(-2px);
    opacity: .9;
  }
  /* El caret textual "▾" del marcado de escritorio sobra aquí */
  .nav.mobile-open .nav-links .megamenu-trigger .caret,
  .nav.mobile-open .nav-links .megamenu-trigger > span:last-child:not(.dot) {
    display: none !important;
  }

  /* --- El megamenú desplegado: sangrado, jerarquía y aire ------------ */
  .nav .nav-links .has-megamenu.open .megamenu {
    padding: 4px 0 8px !important;
    background: color-mix(in srgb, var(--ink, #0a0a0a) 3%, transparent) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  /* Rótulo de cada bloque (MARKETING DIGITAL, WEB…): que se lea como rótulo */
  .nav .nav-links .has-megamenu.open .megamenu .mm-col > .mm-title,
  .nav .nav-links .has-megamenu.open .megamenu .mm-heading {
    padding: 16px 24px 6px !important;
    margin: 0 !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    opacity: .55 !important;
  }
  /* Cada servicio: dos líneas, alineadas al mismo eje, con toque cómodo */
  .nav .nav-links .has-megamenu.open .megamenu .mm-link {
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 11px 24px 11px 36px !important;   /* sangrado: es un nivel inferior */
    border-radius: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    transition: background-color 160ms ease-out !important;
  }
  .nav .nav-links .has-megamenu.open .megamenu .mm-link:active {
    background: color-mix(in srgb, var(--ink, #0a0a0a) 6%, transparent) !important;
  }
  .nav .nav-links .has-megamenu.open .megamenu .mm-link .mm-desc {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    opacity: .55 !important;
  }

  /* --- Entrada escalonada: la lista aparece, no aparece de golpe ----- */
  .nav.mobile-open .nav-links > a,
  .nav.mobile-open .nav-links > .has-megamenu {
    animation: summum-menu-in 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .nav.mobile-open .nav-links > *:nth-child(1) { animation-delay: 20ms; }
  .nav.mobile-open .nav-links > *:nth-child(2) { animation-delay: 55ms; }
  .nav.mobile-open .nav-links > *:nth-child(3) { animation-delay: 90ms; }
  .nav.mobile-open .nav-links > *:nth-child(4) { animation-delay: 125ms; }
  .nav.mobile-open .nav-links > *:nth-child(5) { animation-delay: 155ms; }
  .nav.mobile-open .nav-links > *:nth-child(6) { animation-delay: 180ms; }
  .nav.mobile-open .nav-links > *:nth-child(n+7) { animation-delay: 200ms; }
  @keyframes summum-menu-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav.mobile-open .nav-links > a,
    .nav.mobile-open .nav-links > .has-megamenu { animation: none !important; }
    .nav.mobile-open .nav-links .megamenu-trigger::after { transition: none !important; }
  }
}

/* --- Pulido del menú móvil (Summum Marketing · 2026-07-14, 2ª pasada) ---
   1) Doble línea bajo "Servicios": el borde del disparador se sumaba al del
      propio megamenú abierto. Con el panel desplegado, el disparador cede su
      separador (la sección ya se delimita sola).
   2) Los servicios del submenú no tenían separador: con 7 seguidos, la vista
      no encontraba dónde empieza cada uno. Se añade una línea hairline sangrada
      al mismo eje del texto. */
@media (max-width: 900px) {
  .nav.mobile-open .nav-links .has-megamenu.open > .megamenu-trigger {
    border-bottom-color: transparent !important;
  }
  .nav .nav-links .has-megamenu.open .megamenu .mm-link + .mm-link {
    border-top: 1px solid color-mix(in srgb, var(--ink, #0a0a0a) 8%, transparent) !important;
  }
  .nav .nav-links .has-megamenu.open .megamenu .mm-col + .mm-col > .mm-title,
  .nav .nav-links .has-megamenu.open .megamenu .mm-heading {
    border-top: 1px solid var(--line) !important;
    margin-top: 4px !important;
  }
}

/* FIX 17-jul-2026 · Summum: el CTA de email de las herramientas (.tool-email-cta, fondo crema)
   heredaba los colores inversos del formulario de contacto (fondo oscuro) → texto blanco ilegible. */
.tool-email-cta .wpcf7-form input.wpcf7-form-control,
.tool-email-cta .wpcf7-form textarea.wpcf7-form-control,
.tool-email-cta .wpcf7-form select.wpcf7-form-control{color:var(--fg);border-bottom-color:var(--line-strong)}
.tool-email-cta .wpcf7-form input.wpcf7-form-control::placeholder,
.tool-email-cta .wpcf7-form textarea.wpcf7-form-control::placeholder{color:var(--fg-mute)}
.tool-email-cta .wpcf7-form .et_pb_contact_field,
.tool-email-cta .wpcf7-form label,
.tool-email-cta .wpcf7-list-item-label{color:var(--fg-dim)}

/* ─────────────────────────────────────────────────────────────────────────────
   EXP-051 (29-jul-2026) · Molde mp-* en móvil
   summum-v3.css lleva `@media (max-width:480px){ p,li{font-size:16px!important} }`.
   Como este molde usa <p class="v">, <p class="l"> y <p class="src">, esa regla global
   aplastaba el rótulo de 56 px a 16 y subía la etiqueta de fuente de 10 a 16: la jerarquía
   quedaba invertida en TODOS los móviles reales (el corte es 480 px; a 481 se veía bien).
   Aquí se redeclaran SOLO los tamaños del molde. No se toca la regla global, de la que
   dependen el resto de páginas.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:480px){
  .mp-data-item .v{font-size:clamp(40px,11vw,56px)!important;line-height:1!important}
  .mp-data-item .l{font-size:15px!important}
  .mp-data-item .src{font-size:10px!important}
  .mp-why-stat .v{font-size:28px!important;line-height:1.1!important}
  .mp-why-stat .l{font-size:14px!important}
  .mp-card .desc{font-size:14px!important}
  .mp-card .more{font-size:11px!important}
  .mp-hero .lead,.mp-why .body-l{font-size:17px!important;line-height:1.6!important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIX 09-ago-2026 (Angel) · Bloques de enlaces relacionados sin estilo
   Los bloques "Kit Consulting cerca de ti" (id="f3-geo-kc"/"f3-geo-sib", 4
   paginas) y "Lo tratamos a fondo aqui" / "Sobre esto mismo" (comentarios
   summum-consolida-canib y summum-rescate-p4, 36 y 29 paginas respectivamente,
   segun wp_posts.post_content, 09-ago-2026) vienen incrustados como HTML fijo
   en post_content de decenas de paginas de Kit Consulting/Kit Digital -no en
   una plantilla-, asi que el fix se hace aqui (CSS, se aplica a TODAS las
   paginas afectadas sin tocar contenido en BD) en vez de editando cada post:
     1. `#f3-geo-kc`/`#f3-geo-sib` viven dentro de `<section class="section">`,
        NO de `.mp-services`, y `.section` no pone tipografia de `h2` (el
        h2 caia al estilo por defecto del navegador, serif y sin relacion con
        el resto del sitio) ni distingue sus enlaces del texto (`a{color:
        inherit;text-decoration:none}` global => enlaces invisibles).
     2. Las secciones `.mp-services` con una `<ul>` plana de enlaces (variantes
        "Lo tratamos a fondo aqui" y "Sobre esto mismo") ya heredan el h2
        bonito de `.mp-services h2`, pero la lista de enlaces no tenia NINGUN
        estilo propio (misma causa: el `a{color:inherit;text-decoration:none}`
        global) y se leia como una lista de texto plano, no como enlaces.
   `:not([class])` en el segundo bloque es una guarda para no tocar por error
   la rejilla de servicios YA diseñada (`.mp-services-grid` con tarjetas
   `.mp-card`, que sí llevan class): solo afecta a las <a> "pelonas" que meten
   estos scripts de contenido.
   ───────────────────────────────────────────────────────────────────────────── */
section[id^="f3-geo-"] h2{
  font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-0.03em;line-height:1.1;margin:10px 0 18px;
}
section[id^="f3-geo-"] p a{
  color:var(--orange);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(255,94,26,0.35);text-underline-offset:3px;
  transition:color 160ms ease,text-decoration-color 160ms ease;
}
section[id^="f3-geo-"] p a:hover{
  color:var(--orange-deep);text-decoration-color:var(--orange-deep);
}
.mp-services ul:not(.mp-services-grid) li a:not([class]){
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--bg-soft);font-size:14px;text-decoration:none;color:var(--fg);
  transition:border-color 160ms ease,background 160ms ease,transform 160ms ease,color 160ms ease;
}
.mp-services ul:not(.mp-services-grid) li a:not([class]):hover{
  border-color:var(--orange);background:var(--bg);color:var(--orange-deep);
  transform:translateY(-2px);
}
.mp-services ul:not(.mp-services-grid) li a:not([class])::after{
  content:"→";opacity:0.55;transition:transform 160ms ease,opacity 160ms ease;
}
.mp-services ul:not(.mp-services-grid) li a:not([class]):hover::after{
  opacity:1;transform:translateX(2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIX 09-ago-2026 (generalización, Angel) · MISMO defecto que el bloque de
   arriba, en las 178 páginas que usan <section class="section" id="..."> con
   texto suelto, no solo en f3-geo-/xl-newsvc (4 páginas).
   Medido en vivo (wp db query sobre wp_posts.post_content, post_status=
   publish, todos los post_type, 09-ago-2026): 178 páginas, 382 bloques
   <section class="section"...>, con 351 <h2> sin clase propia (caen al serif
   por defecto del navegador) y 1.108 <a> sin clase -dentro de <p>, <li> o
   <span>, según la página- heredando el a{color:inherit;text-decoration:none}
   global (quedan invisibles, mismo color que el texto). Prefijos de id
   encontrados aparte de f3-geo-/xl-newsvc: franja-sectores, franja-sin-iva,
   franja-vecinas, franja-ordenador, sw-cluster, xl-redes, xl-kdgeo,
   xl-huerfana-*, xl-juridico, estado-convocatoria, geo-kd, servicios,
   proceso, por-que, faq, segmentos, solicitar-*, cuando-abre, denegados,
   convocatorias, catalogo, aviso-reapertura, orden-tdf-39-2026 y más (lista
   completa en bitacora-cronologica.md, entrada de esta fecha).
   Generalización real: en vez de un selector por prefijo de id
   (section[id^="..."], que solo cubre el próximo prefijo que alguien
   reconozca a mano), se engancha a la clase contenedora .section, que es
   común a las 178. :not([class]) es la guarda que evita tocar lo que YA
   tiene diseño propio (enlaces .cta/.btn/.kc-rel-media/.summum-inline-link,
   tarjetas .mp-card...) y el h2 que ya usa la utilidad .h-display (specificity
   0,2,0 > 0,1,1 de esta regla, sigue ganando sin tocarla). Comprobado que
   NINGÚN <a> sin clase envuelve <img>/<svg>/<div> (0 de 1.108): son siempre
   texto plano, por eso es seguro aplicar el mismo tratamiento a los tres
   contenedores (<p>, <li>, <span>) con un único selector `.section a`, en vez
   de tres reglas casi idénticas. section[id^="f3-geo-"] arriba queda TAL
   CUAL (mayor especificidad, sigue ganando en sus 4 páginas; quitarla no
   aportaba nada y innecesariamente arriesgaba lo que ya estaba verificado).
   ───────────────────────────────────────────────────────────────────────────── */
.section h2{
  font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-0.03em;line-height:1.1;margin:10px 0 18px;
}
.section a:not([class]){
  color:var(--orange);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(255,94,26,0.35);text-underline-offset:3px;
  transition:color 160ms ease,text-decoration-color 160ms ease;
}
.section a:not([class]):hover{
  color:var(--orange-deep);text-decoration-color:var(--orange-deep);
}

/* ==========================================================================
   Kit de herramientas — ancho del lienzo interactivo y bloques de texto denso
   (Summum Marketing, 2026-08-09). Ver 00-documentacion/bitacora-cronologica.md,
   entrada de esta fecha, para el razonamiento de diseño completo.

   PROBLEMA: el bloque CSS compartido §5.2 de
   00-documentacion/arquitectura-herramientas-estrategia-2026-08-08.md vive
   DUPLICADO dentro de un <style> inline en el post_content de cada una de las
   17 páginas de herramientas de estrategia (matriz DAFO, BCG, Ansoff, PESTEL,
   McKinsey-GE, Porter, ADL, BMC, Lean Canvas, VPC, Social Lean Canvas, Culture
   Map, buyer persona, CMI, OKR, ciclo de vida del producto, matriz CAME) —
   consolidación pospuesta a propósito en su momento (§5.1 de esa guía) hasta
   que las herramientas estuvieran estables, para no acoplar 10+ builds en
   paralelo a un fichero compartido de alto riesgo. Esa regla inline pone
   `.tool-wrap{max-width:900px}` (960px en VPC, 1180px ya ampliado a mano en
   Social Lean Canvas y Matriz ADL) — un ancho pensado para PROSA de lectura,
   no para un lienzo interactivo (cuadrícula DAFO, tarjetas BMC...). A 1440px
   de viewport deja ~270px en blanco a cada lado y el lienzo se ve como un
   formulario estrecho, no como una herramienta profesional.

   SOLUCIÓN — un solo punto de edición que se propaga automáticamente: esta
   regla vive en templates.css (ya enqueued en TODAS las páginas, sin tocar
   functions.php ni añadir una petición HTTP nueva) con selector
   `.tool-host-section .tool-wrap` — especificidad (0,2,0). Eso ya basta para
   ganar al `.tool-wrap{...}` de un único selector de clase (0,1,0) que usan
   14 de las 17 páginas, sin !important e independientemente del orden de
   carga. PERO 2 páginas (Social Lean Canvas, Matriz ADL) ya traían un ancho
   ampliado a mano con una SEGUNDA clase en el propio elemento
   (`.tool-wrap.tool-wrap-wide`, `.tool-wrap.adl-wide`) — especificidad
   TAMBIÉN (0,2,0), empate exacto con esta regla, y a igual especificidad
   gana la última en orden de aparición: como esas reglas viven en el <style>
   inline del post_content (<body>), después del <link> de templates.css
   (<head>), el empate lo ganaban ELLAS, dejando esas 2 páginas en 1180px en
   vez de unificarse con el resto. Verificado en vivo con Playwright antes de
   dar el ajuste por bueno (no solo leído el CSS). Por eso esta regla lleva
   `!important`: es el único mecanismo que gana también los empates de
   especificidad frente a CUALQUIER exception futura de 2 clases que un
   agente nuevo añada por su cuenta — sin eso, cada excepción de este tipo
   habría que perseguirla una a una, justo el problema que se quería evitar.

   ANCHO ELEGIDO: 1240px de max-width en `.tool-wrap` → descontando el
   padding lateral de `.wrap` (2×56px = var(--pad-x)×2) el lienzo interactivo
   queda en ~1128px de ancho útil a 1440px de viewport — dentro del rango
   1100-1200px pedido, y ~78% del viewport (el "80% de la pantalla" pedido).
   El `@media print` de cada página ya fuerza `max-width:100% !important` en
   impresión — misma especificidad de !important, pero esa regla vive DENTRO
   de `@media print` así que solo compite en ese contexto; esta regla no
   lleva `@media print`, por lo que en pantalla manda ella y en impresión
   manda la del <style> inline: no hay colisión real entre ambas. */
.tool-host-section .tool-wrap { max-width: 1240px !important; }

/* ==========================================================================
   Bloques de texto técnico denso en 2 columnas — clase reutilizable
   `.prose-2col` (Summum Marketing, 2026-08-09).

   Pensada para secciones tipo "cómo funciona / metodología / qué incluye" en
   páginas de herramientas: hoy son un único `<ol>` largo dentro de un
   `<div class="wrap" style="max-width:880px">`, con cada `<li>` un párrafo
   técnico denso — mucho interlineado vertical desperdiciado en pantallas
   anchas. `.prose-2col-wrap` amplía el `.wrap` que envuelve el bloque a
   1160px (bastante más que los 880px actuales, sin llegar al ancho del
   lienzo interactivo — sigue siendo prosa, necesita línea de lectura corta
   DENTRO de cada columna, no una columna de 1160px de ancho) y `.prose-2col`
   reparte el contenido en 2 columnas iguales con una línea divisoria sutil
   (var(--line), el mismo tono que ya usa `.tool-quadrant`), cada una con su
   propia etiqueta mono+punto naranja — mismo lenguaje visual que
   `.tool-quadrant-label` en el kit de herramientas, para que se lea como
   parte del mismo sistema y no como un componente ajeno.
   Uso: agrupar los <li> relacionados en dos <ol class="prose-2col-list">
   independientes (cada una reinicia su propia numeración 1..n), envueltas
   en dos <div class="prose-2col-block"> dentro de un <div class="prose-2col">.
   Aplicado en /medidor-legibilidad/, /calculadora-coste-iso-9001/ y
   /auditor-seo-gratis/ — detalle de la agrupación elegida para cada una en
   la bitácora. Responsive: 1 columna por debajo de 860px (mismo criterio de
   legibilidad que el resto del sitio en móvil/tablet estrecho). */
.prose-2col-wrap { max-width: 1160px; }

.prose-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 28px 0;
}
.prose-2col-block { padding: 0 40px; }
.prose-2col-block:first-child { padding-left: 0; }
.prose-2col-block:last-child { padding-right: 0; border-left: 1px solid var(--line); }

.prose-2col-label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--orange);
  display: flex; align-items: center; gap: 6px; margin: 0 0 14px;
}
.prose-2col-label .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.prose-2col-list { margin: 0; padding-left: 20px; }
.prose-2col-list li { margin-bottom: 16px; line-height: 1.6; font-size: 15px; }
.prose-2col-list li:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .prose-2col { grid-template-columns: 1fr; gap: 28px; }
  .prose-2col-block { padding: 0 !important; border-left: none !important; }
}

/* ==========================================================================
   FIX diseño C1-01 · Summum Marketing — 2026-09-25
   El H1 del héroe (.mp-hero h1, clamp 48-108px) ocupaba de 4 a 7 líneas en
   escritorio y empujaba el botón de auditoría fuera del viewport en las 14
   páginas de servicio del programa Marketplaces: 0/14 visibles sin scroll a
   1440×900 y a 1366×768 (medido con probar-hero.cjs, 25-sep-2026). Acotado
   por page-id para no alterar otras plantillas que también usan .mp-hero.
   Solo desktop ≥901px; el móvil ya mostraba el botón y no se toca.
   ========================================================================== */
@media (min-width:901px){
  :is(.page-id-14602,.page-id-14603,.page-id-14598,.page-id-14750,.page-id-14756,.page-id-14743,.page-id-14759,.page-id-14761,.page-id-14742,.page-id-14745,.page-id-14744,.page-id-14753,.page-id-6979,.page-id-6980) .mp-hero{padding:56px 0 80px}
  :is(.page-id-14602,.page-id-14603,.page-id-14598,.page-id-14750,.page-id-14756,.page-id-14743,.page-id-14759,.page-id-14761,.page-id-14742,.page-id-14745,.page-id-14744,.page-id-14753,.page-id-6979,.page-id-6980) .mp-hero-grid{grid-template-columns:1.4fr 1fr;gap:48px}
  :is(.page-id-14602,.page-id-14603,.page-id-14598,.page-id-14750,.page-id-14756,.page-id-14743,.page-id-14759,.page-id-14761,.page-id-14742,.page-id-14745,.page-id-14744,.page-id-14753,.page-id-6979,.page-id-6980) .mp-hero h1{font-size:clamp(42px,4.6vw,68px);line-height:1;margin-bottom:20px}
  :is(.page-id-14602,.page-id-14603,.page-id-14598,.page-id-14750,.page-id-14756,.page-id-14743,.page-id-14759,.page-id-14761,.page-id-14742,.page-id-14745,.page-id-14744,.page-id-14753,.page-id-6979,.page-id-6980) .mp-hero .lead{font-size:18px;margin-bottom:26px}
  :is(.page-id-14602,.page-id-14603,.page-id-14598,.page-id-14750,.page-id-14756,.page-id-14743,.page-id-14759,.page-id-14761,.page-id-14742,.page-id-14745,.page-id-14744,.page-id-14753,.page-id-6979,.page-id-6980) .mp-hero-illus{height:420px}
}

/* FIX diseño C1-02 · Summum Marketing — 2026-09-25
   Red de seguridad: un enlace dentro de la entradilla del héroe (.mp-hero
   .lead) nunca debe quedar en blanco sobre el fondo claro del héroe (el
   caso real: color:#fff en línea sobre #FAFAF7-#F6E9D7, contraste ~1,05:1,
   en /amazon-ads/ y /amazon-vendor-central/, ya corregido en el contenido). */
.mp-hero .lead a{color:var(--fg)!important;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}

/* C4 · casos reales en movil */
.mp-cases .mp-case .cat{color:#FF8A50}
@media (max-width:480px){
  .mp-case .cat{font-size:11px!important;line-height:1.5!important}
  .mp-case .who{font-size:11px!important;line-height:1.5!important}
  .mp-case .metric .l{font-size:10px!important;letter-spacing:.1em!important;line-height:1.35!important}
  .mp-case .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
}

/* FIX diseño C4-fix-01 · Summum Marketing — 2026-09-26
   El verificador midió tarjetas .mp-case de 766-790px a 390px (objetivo
   ≤750px): .mp-case .metrics hereda de la regla genérica .metrics (la
   franja de cifras de la portada, .metrics{padding:80px 0} en línea
   ~2148) 80px de padding arriba y abajo, franja vacía visible por encima
   y por debajo de las 4 cifras. .mp-case .metrics no fija su propio
   padding/min-height/border, así que la regla genérica gana. Se anula
   la herencia; min-height y border se dejan a 0 por si otra regla
   futura los introdujera en .metrics. Aplica también a escritorio para
   quitar la franja vacía ahí también.
   ========================================================================== */
.mp-case .metrics{padding:0!important;min-height:0!important;border:0!important}

/* ==========================================================================
   (6-oct-2026) Círculos decorativos del hero (.hc-1/.hc-2/.hc-3) en móvil.
   En pantallas estrechas se montaban sobre el H1 y la entradilla de las 20
   páginas con cabecera .page-head/.kc-head/.kd-head (kit-digital, kit-consulting,
   subvenciones, desarrollo-web-a-medida…). En escritorio no cambia nada.
   ========================================================================== */
@media (max-width: 768px){
  .page-head .hc-1,.page-head .hc-2,.page-head .hc-3,
  .kc-head .hc-1,.kc-head .hc-2,.kc-head .hc-3,
  .kd-head .hc-1,.kd-head .hc-2,.kd-head .hc-3{display:none!important}
}

/* ==========================================================================
   (6-oct-2026) Arreglos visuales de la auditoría del 6-oct (R1-R13). Un bloque
   por arreglo. Home: solo el punto 2 (círculos decorativos en móvil), nada más.
   ========================================================================== */

/* (6-oct-2026) Arreglo 1 · /kit-digital/ en móvil: la cuadrícula «Cómo trabajamos»
   (4 columnas con style inline) no se plegaba: scrollWidth 724 frente a 358 y los
   pasos 03 y 04 quedaban fuera de pantalla. En ≤768 px se apila en una columna. */
@media (max-width: 768px){
  body.page-kit-digital main div[style*="repeat(4, 1fr)"]{grid-template-columns:1fr!important}
}

/* (6-oct-2026) Arreglo 2 · HOME en móvil: los círculos decorativos del bloque final
   (.final-circle-1 y .final-circle-3) se montaban sobre el botón «Escríbenos» y el
   titular. Se ocultan en ≤768 px. .final-circle-2 no toca texto: se deja. Solo home. */
@media (max-width: 768px){
  body.page-home-2026 .final-cta .final-circle-1,
  body.page-home-2026 .final-cta .final-circle-3{display:none!important}
}

/* (6-oct-2026) Arreglo 3 · Formularios (CF7): el enlace «Política de privacidad» del
   consentimiento tenía el mismo gris y sin subrayado que el texto. Color de enlace del
   tema (--orange-text, el mismo de los enlaces de prosa) y subrayado. No afecta a la home. */
body:not(.page-home-2026):not(.home) .wpcf7-list-item-label a{
  color:var(--orange-text);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
body:not(.page-home-2026):not(.home) .wpcf7-list-item-label a:hover{color:var(--fg)}
/* Sobre fondo oscuro (panel del formulario de /contacto/) --orange-text no llega a buen contraste: se usa --orange. */
body:not(.page-home-2026):not(.home) .contact-r .wpcf7-list-item-label a{color:var(--orange)}
body:not(.page-home-2026):not(.home) .contact-r .wpcf7-list-item-label a:hover{color:var(--paper,#FAFAF7)}

/* (6-oct-2026) Arreglo 4 · Enlaces de texto dentro de párrafos y listas del contenido sin
   distintivo alguno (mismo color que el texto, sin subrayado): se subrayan. Alcance estricto:
   solo hijos directos de p/li (o dentro de strong/em) en <main>; se excluyen eyebrows,
   migas, navegación, menús, índices, listas de relacionados, botones y tarjetas. La home
   queda fuera (solo se autorizó el arreglo 2). */
body:not(.page-home-2026):not(.home) main :is(p,li):not([class*="eyebrow"]):not([class*="btn"]):not([class*="button"]):not([class*="card"]) > a:not([class*="btn"]):not([class*="button"]):not([class*="card"]),
body:not(.page-home-2026):not(.home) main :is(p,li):not([class*="eyebrow"]):not([class*="btn"]):not([class*="button"]):not([class*="card"]) > :is(strong,em,b,i) > a:not([class*="btn"]):not([class*="button"]):not([class*="card"]){
  text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body:not(.page-home-2026):not(.home) main :is(nav,.breadcrumb,[class*="breadcrumb"],[class*="menu"],[class*="toc"],[class*="related"]) :is(p,li) > a{
  text-decoration-line:none}

/* (6-oct-2026) Arreglo 5 · Hero con div.mp-hero-illus vacío (kit-digital-alegra, -anfix,
   -sage-despachos, -sap-business-one, -zoho): dejaba un hueco de 526x520 px a la derecha
   del titular. Si la ilustración no existe se quita y el texto ocupa todo el ancho. */
.mp-hero-illus:empty{display:none}
.mp-hero-grid:has(> .mp-hero-illus:empty){grid-template-columns:1fr}

/* (6-oct-2026) Arreglo 6 · Calculadora IGIC (y cualquier .tool-form): el <select> se salía
   154 px del viewport en móvil porque su ancho automático era el de la opción más larga. */
.tool-form select{max-width:100%;box-sizing:border-box;text-overflow:ellipsis}

/* (6-oct-2026) Arreglo 9 · Miniaturas de las tarjetas de categoría: archive.php pasa a pedir
   'medium_large' (16:9, sin recorte) en vez del recorte duro 640x480 que se comía los lados
   del titular horneado en la imagen. Caja 16:9 para que todas midan igual. */
body.archive .cards-grid .card-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* (6-oct-2026) Arreglo 11 · Ilustraciones de hero (.mp-hero-illus svg): el <svg> recorta por
   defecto lo que sale de su viewBox y los círculos decorativos de fondo (p. ej. cx 100 cy 420
   r 120) salían cortados en recto por el borde. Patrón común a ~250 páginas. Solo escritorio,
   para no generar desborde horizontal en móvil. */
@media (min-width: 769px){
  .mp-hero-illus svg{overflow:visible}
}

/* ===== Revisión estética 8-oct-2026 (Summum Marketing) · tanda A =====
   Arreglos solo visuales, sin tocar contenido. Medidos antes y después en
   _scratch/auditoria-visual-2026-10-08/ (antes-tandaA.json / despues-tandaA.json). */

/* A3 · Migas de pan de las páginas mp-* (191 URL): el <nav class="mp-breadcrumb"> va fuera de
   cualquier .wrap y con padding:14px 0 en línea, así que quedaba pegado al borde (x=0) mientras
   el resto del contenido empieza en el margen del .wrap. Se le da el mismo contenedor. */
nav.mp-breadcrumb{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad-x) !important;padding-right:var(--pad-x) !important}

/* A4 · Bloque «¿Tu empresa está en Canarias?» (115 URL): su .wrap lleva style="padding:46px 0" en
   línea, que anulaba el margen lateral del contenedor. */
section.mp-canarias > .wrap{padding-left:var(--pad-x) !important;padding-right:var(--pad-x) !important}

/* A5 · Caja TL;DR colgada directamente de .page-body (10 URL: sage, anfix, zoho, contaplus…):
   iba de borde a borde. Se alinea con el contenedor. */
.page-body > aside.post-tldr{width:calc(100% - 2 * var(--pad-x));max-width:calc(var(--max) - 2 * var(--pad-x));margin-left:auto;margin-right:auto}

/* A6 · Banda de cifras sin .wrap (17 URL del «Universo Summum»: /changelog/, /comparativas/,
   /faq-marketing/…): la rejilla iba pegada al borde y las clases .mp-data-v/-l/-s no tenían
   estilo, así que la cifra no se distinguía del texto. Se alinea y se le da la jerarquía de .v/.l. */
section.mp-data > .mp-data-grid{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.mp-data-item .mp-data-v{font-family:var(--display);font-weight:500;font-size:clamp(40px,4.4vw,72px);line-height:0.95;letter-spacing:-0.035em;color:var(--orange);margin:0 0 10px}
.mp-data-item .mp-data-l{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--inv);margin:0 0 8px}
.mp-data-item .mp-data-s{font-size:15px;line-height:1.55;color:var(--inv-dim);max-width:36ch}

/* A7 · Bandas de 4 cifras en escritorio (203 URL): la regla de 2026-09-25 pedía una fila de 4,
   pero las cifras de hasta 112 px («Partner», «Deontología», «Comisión») no caben en un cuarto de
   ancho y la fila se partía en 3+1 en todas las páginas medidas. Se pasa a 2×2, que conserva el
   tamaño de la cifra y no desborda con palabras largas. Solo ≥901 px: en móvil siguen las reglas
   de 2 y 1 columna. */
@media (min-width:901px){
  .mp-data-grid:has(>.mp-data-item:nth-child(4):last-child)>.mp-data-item{flex-basis:calc((100% - 48px)/2)}
}
/* A3-A6 en ≤480 px: ahí el .wrap usa 16 px de margen, no var(--pad-x) (24 px). */
@media (max-width:480px){
  nav.mp-breadcrumb,section.mp-canarias > .wrap,section.mp-data > .mp-data-grid{padding-left:16px !important;padding-right:16px !important}
  .page-body > aside.post-tldr{width:calc(100% - 32px)}
}

/* ===== Revisión estética 8-oct-2026 (Summum Marketing) · tanda B ===== */

/* B1 · Plantilla antigua dentro del cuerpo del artículo del blog (292 artículos llevan secciones
   post-related / mp-services en el contenido, dentro de la columna de 578 px). La rejilla de 3
   tarjetas de «También te interesa» dejaba tarjetas de 149-179 px (en 249 artículos < 200 px) y
   desbordaba la columna en 43; la cabecera de «Otras páginas que te pueden servir» partía el H2 en
   5-6 líneas. Dentro del artículo: tarjetas en una columna y cabecera apilada. */
.bs-article-body > section.post-related > .wrap,.bs-article-body > section.mp-services > .wrap{padding-left:28px;padding-right:28px}
.bs-article-body > section.post-related .related-grid{grid-template-columns:1fr;gap:14px}
.bs-article-body > section.post-related .related-card{padding:20px 22px}
.bs-article-body > section.mp-services .section-head{grid-template-columns:1fr;gap:10px}
.bs-article-body > section.mp-services .section-head h2{font-size:clamp(28px,3vw,40px);line-height:1.1}

/* B2 · Formulario de contacto dentro de la columna del artículo: en dos columnas de 236 px el
   desplegable «¿Cómo nos has conocido?» cortaba su texto («—Por favor, elige una opci»). Una
   columna, como ya hace el formulario en móvil. */
.bs-article-body .summum-leadblock .wpcf7-form .et_pb_contact_form{grid-template-columns:1fr}
.bs-article-body .summum-leadblock .wpcf7-form .et_pb_contact_field.et_pb_contact_field_half{grid-column:1 / -1}

/* B3 · Bandas de 6 cifras (58 URL, casi todas de ciudad): en 17 se partían en 3+2+1 porque una
   cifra-palabra («Presencial», «2026 vigente») era más ancha que un tercio. Cada elemento puede
   estrecharse, la cifra se ajusta al ancho de su columna y el sufijo .small puede bajar de línea. */
@media (min-width:901px){
  .mp-data-grid:has(>.mp-data-item:nth-child(6):last-child)>.mp-data-item{min-width:0;container-type:inline-size}
  .mp-data-grid:has(>.mp-data-item:nth-child(6):last-child)>.mp-data-item .v{font-size:min(clamp(56px,7vw,112px),21cqi)}
  .mp-data-item .v .small{display:inline-block}
}

/* ===== Revisión estética 8-oct-2026 (Summum Marketing) · tanda C · contraste =====
   Barrido de contraste de todos los enlaces visibles de las 809 URL (texto contra su fondo efectivo):
   30 enlaces por debajo de 2:1. El enlace contextual .summum-inline-link fija color:var(--fg) (negro,
   pensado para prosa sobre fondo claro) con especificidad 0,2,1 dentro de .page-body; en las bandas
   oscuras (.mp-data, .mp-cases, .num-band) quedaba negro sobre negro (1:1) en 17 páginas. Y en
   /marketing-local-pymes/ la sección oscura .mp-cases lleva tarjetas blancas .mp-card que heredaban el
   texto claro (títulos invisibles) y un párrafo .col-r gris oscuro sobre negro. */
.page-body :is(.mp-data,.mp-cases,.num-band) a.summum-inline-link,:is(.mp-data,.mp-cases,.num-band) a.summum-inline-link{color:var(--inv)}
.mp-cases .mp-card{color:var(--fg)}
.mp-cases .section-head .col-r{color:var(--inv-dim)}
.mp-cases .section-head .col-r a{color:var(--inv)}

/* ===== Revisión estética 8-oct-2026 (Summum Marketing) · tanda D =====
   D1 · H1 del hero contra la ilustración (barrido de las 294 páginas con ilustración SVG, 4 anchos, 4
   instantes): en 20 páginas el dibujo sobresale de su caja por la izquierda (es el overflow:visible del
   6-oct) y se quedaba a menos de 24 px del título o lo pisaba (8 páginas, hasta 231 px). En dos, además,
   una palabra larga del H1 («electrodomésticos», «concesionarios») ensanchaba su columna. Por página:
   H1 algo menor en esas dos y la ilustración encogida desde su borde derecho lo justo para dejar ≥32 px
   (propiedad scale, que no pisa las animaciones). */
@media (min-width:901px){
  .page-kit-digital-electrodomesticos .mp-hero h1{font-size:min(5.3vw,96px)}
  .page-kit-digital-talleres .mp-hero h1{font-size:min(6.2vw,104px)}
}
@media (min-width:901px){
  .page-kit-consulting-ingenierias .mp-hero-illus svg{scale:0.93;transform-origin:100% 50%}
  .page-kit-consulting-residencias .mp-hero-illus svg{scale:0.96;transform-origin:100% 50%}
  .page-kit-consulting-salud .mp-hero-illus svg{scale:0.95;transform-origin:100% 50%}
  .page-kit-digital-abogados .mp-hero-illus svg{scale:0.92;transform-origin:100% 50%}
  .page-kit-digital-centros-medicos .mp-hero-illus svg{scale:0.94;transform-origin:100% 50%}
  .page-kit-digital-clinicas-dentales .mp-hero-illus svg{scale:0.96;transform-origin:100% 50%}
  .page-kit-digital-clinicas-esteticas .mp-hero-illus svg{scale:0.95;transform-origin:100% 50%}
  .page-kit-digital-construccion .mp-hero-illus svg{scale:0.97;transform-origin:100% 50%}
  .page-kit-digital-electrodomesticos .mp-hero-illus svg{scale:0.89;transform-origin:100% 50%}
  .page-kit-digital-empresas-limpieza .mp-hero-illus svg{scale:0.95;transform-origin:100% 50%}
  .page-kit-digital-energia-solar .mp-hero-illus svg{scale:0.96;transform-origin:100% 50%}
  .page-kit-digital-ferreterias .mp-hero-illus svg{scale:0.93;transform-origin:100% 50%}
  .page-kit-digital-librerias .mp-hero-illus svg{scale:0.97;transform-origin:100% 50%}
  .page-kit-digital-nutricion .mp-hero-illus svg{scale:0.94;transform-origin:100% 50%}
  .page-kit-digital-peritos .mp-hero-illus svg{scale:0.97;transform-origin:100% 50%}
  .page-kit-digital-podologia .mp-hero-illus svg{scale:0.95;transform-origin:100% 50%}
  .page-kit-digital-salud-mental .mp-hero-illus svg{scale:0.98;transform-origin:100% 50%}
  .page-kit-digital-talleres .mp-hero-illus svg{scale:0.92;transform-origin:100% 50%}
  .page-kit-digital-tasadoras .mp-hero-illus svg{scale:0.92;transform-origin:100% 50%}
  .page-kit-digital-tiendas-deporte .mp-hero-illus svg{scale:0.98;transform-origin:100% 50%}
}

/* D2 · Migas duplicadas en 4 artículos «autocontenidos» (comprar-ordenador-kit-digital, esg-csrd…,
   ai-act-iso-42001…, neuromarketing-aplicado…): la plantilla pinta sus migas y el contenido trae las suyas
   (en 3, con una comilla suelta). Se ocultan las del contenido. */
.bs-article-body nav.breadcrumb,.bs-article-body nav.mp-breadcrumb{display:none}

/* ===== Revisión estética 9-oct-2026 (Summum Marketing) · tanda E =====
   E1 · Bandas de 4 cifras por debajo de 901 px (203 URL). La regla del 25-sep (flex-basis de un cuarto,
   selector con :has) pesa más que las de 2 y 1 columna del bloque «Responsive», así que en móvil cada
   cifra tomaba el ancho de su palabra: 179 páginas en 2+2 irregular y 25 en 1+2+1, 3+1, 2+1+1…; a 768 px,
   62 en 3+1. Se repiten aquí las reglas de 2 y 1 columna con el mismo peso. Medido con inyección:
   390 px → 204/204 bandas en una columna, 768 px → 204/204 en 2×2, sin desbordes ni scroll horizontal y
   sin cambios en bandas de otro número de cifras. */
@media (max-width:900px){
  .mp-data-grid:has(>.mp-data-item:nth-child(4):last-child)>.mp-data-item{flex-basis:calc((100% - 32px)/2)}
}
@media (max-width:480px){
  .mp-data-grid:has(>.mp-data-item:nth-child(4):last-child)>.mp-data-item{flex-basis:100%}
}

/* ═════════════════════════════════════════════════════════════════════════════
   REPASO DEL FINAL DE PÁGINA · 10-oct-2026 (Ángel: «en todas las partes de abajo de las URL
   hay errores graves, se ven partes sin formato y mal diseñadas»). Medido sobre el HTML servido
   de las 802 URL de los sitemaps (tracking/repaso-final-pagina-2026-10-10/inventario.py,
   autoprueba 8/8). Solo presentación: ningún texto ni enlace cambia. Las FAQ en acordeón van
   en assets/js/faq-acordeon.js y el formulario del final en mu-plugins/summum-lead-block.php.
   ═════════════════════════════════════════════════════════════════════════════ */
/* R1 · Bloques de enlazado insertados en el contenido (257 bloques en 179 páginas:
   «Seguir leyendo / También sobre esto», «Relacionado / Te puede interesar»,
   «Sobre esto mismo / Seguir profundizando»…). Antes: sección de 96 px arriba y
   abajo, h2 de 64 px en rejilla de dos columnas, para 1-2 enlaces. Ahora: franja
   compacta, título a la izquierda y enlaces en tarjetas a la derecha; varias
   seguidas forman un solo panel. Solo las listas con la rejilla en línea «auto-fit» que meten los
   scripts de enlazado: el bloque «Datos verificados» (20 páginas) también es .mp-services con <ul>,
   pero de texto con negritas, y con estas reglas se desbordaba en móvil (barrido del 10-oct). */
.mp-services:has(> .wrap > ul[style*="auto-fit"]){padding:40px 0 !important;border-top:1px solid var(--line)}
.mp-services:has(> .wrap > ul[style*="auto-fit"]) + .mp-services:has(> .wrap > ul[style*="auto-fit"]){border-top:0;padding-top:0 !important}
/* La rejilla título | tarjetas solo cuando la sección es ancha (página de plantilla). Dentro del
   cuerpo estrecho de un artículo (p. ej. el «Índice» de /tendencias-2027/) se queda en una
   columna: con dos, la caja de CTA que va en la misma sección acababa aplastada en 120 px. */
.mp-services:has(> .wrap > ul[style*="auto-fit"]){container-type:inline-size}
.mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > .section-head + ul{margin-top:16px !important} /* la <ul> trae margin:0 en línea */
@container (min-width:900px){
  .mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:14px 56px;align-items:start}
  .mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > :not(.section-head):not(ul){grid-column:1 / -1}
  .mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > .section-head + ul{margin-top:0 !important}
}
.mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > .section-head{display:block !important;margin:0 !important}
.mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > .section-head .eyebrow{margin:0 0 6px}
.mp-services:has(> .wrap > ul[style*="auto-fit"]) > .wrap > .section-head h2{font-size:clamp(20px,1.7vw,24px) !important;line-height:1.25 !important;letter-spacing:-0.015em;margin:0 !important}
.mp-services > .wrap > ul[style*="auto-fit"]{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)) !important;gap:12px !important}
.mp-services > .wrap > ul[style*="auto-fit"] > li:has(> a:only-child){display:flex}
.mp-services > .wrap > ul[style*="auto-fit"] > li > a:not([class]){flex:1;justify-content:space-between;gap:16px;border-radius:12px;background:var(--bg);padding:16px 20px;font-size:15px;line-height:1.35;font-weight:500;text-decoration:none !important}
@media (max-width:760px){
  .mp-services:has(> .wrap > ul[style*="auto-fit"]){padding:32px 0 !important}
}

/* R2 · «Profundiza en nuestra guía…» (section.section#xl-huerfana-*): párrafo suelto con
   96 px de aire; pasa a nota destacada. */
.section[id^="xl-huerfana-"]{padding:40px 0 !important;border-top:1px solid var(--line)}
.section[id^="xl-huerfana-"] p{margin:0;padding:6px 0 6px 18px;border-left:3px solid var(--orange);font-size:17px;line-height:1.55;max-width:none}

/* R3 · «Si estás aquí, quizá también te interese» (aside.ssm-other-services, 61 páginas):
   texto plano con estilo en línea; pasa a franja compacta, título encima y texto debajo (19 de las 61
   van dentro del cuerpo estrecho de un artículo, donde dos columnas no caben). */
aside.ssm-other-services{padding:36px var(--pad-x) !important;border-top:1px solid var(--line);display:grid;gap:8px}
aside.ssm-other-services > strong{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-0.015em}
aside.ssm-other-services > p{margin:0;font-size:16px;line-height:1.65;color:var(--fg-dim)}


/* F4 · Formulario «Avísame cuando haya bases» (CF7 15014, 10 páginas de IA360). Va en una caja
   clara (.lp-section) pero heredaba los estilos del formulario OSCURO de /contacto/: campos sin
   fondo ni borde visibles (6 de 7) y el texto de aceptación en rgba(250,250,247,.45) sobre
   #FAFAF7, es decir, invisible. Medido el 10-oct en las 10 páginas. Se le dan los mismos campos
   que al formulario del final de página, y como allí se oculta la pregunta del asistente de IA
   hasta que se elige esa opción y se recortan los textareas (rows=10). */
.wpcf7[data-wpcf7-id="15014"] input[type=text],.wpcf7[data-wpcf7-id="15014"] input[type=email],
.wpcf7[data-wpcf7-id="15014"] input[type=tel],.wpcf7[data-wpcf7-id="15014"] textarea,
.wpcf7[data-wpcf7-id="15014"] select{width:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;
  border:1px solid rgba(0,0,0,.18) !important;border-radius:9px;background:#fff !important;color:#111 !important}
.wpcf7[data-wpcf7-id="15014"] .wpcf7-form-control::placeholder{color:#6b6459 !important;opacity:1}
.wpcf7[data-wpcf7-id="15014"] .wpcf7-list-item-label{color:var(--fg-dim) !important}
.wpcf7[data-wpcf7-id="15014"] .wpcf7-list-item-label a{color:var(--orange-deep,#C2410C) !important}
.wpcf7[data-wpcf7-id="15014"] textarea{width:100% !important;max-width:none !important;display:block}
.wpcf7[data-wpcf7-id="15014"] textarea[name="mensaje"]{height:128px;min-height:0}
.wpcf7[data-wpcf7-id="15014"] textarea[name="pregunta-asistente"]{height:96px;min-height:0}
.wpcf7[data-wpcf7-id="15014"] form:not(:has(select[name="como-nos-conociste"] option[value="ChatGPT u otro asistente de IA"]:checked)) p:has(> .wpcf7-form-control-wrap[data-name="pregunta-asistente"]){display:none}
.wpcf7[data-wpcf7-id="15014"] .et_pb_contact_form{grid-auto-flow:row dense}
.wpcf7[data-wpcf7-id="15014"] .et_pb_contact_form > p.et_pb_contact_field:has(textarea){grid-column:1 / -1 !important}

/* P1 · Rejilla del pie en escritorio (≥1181 px). Desde el 26-sep el pie tiene 7 bloques
   (marca + Servicios, Kit Digital, Marketplaces, Agencia, Dónde estamos, Contacto) y la
   rejilla auto-fit de 130 px solo metía 6 por fila: «Contacto» caía sola a una segunda fila
   y la marca quedaba tan estrecha como una lista (insignia de Red.es en 3 líneas).
   Ahora: marca más ancha + 5 columnas, y «Contacto» bajo «Dónde estamos» (las dos son
   cortas), sin tocar el marcado. La 6.ª columna es algo más ancha: a 1.280 px el correo
   info@summummarketing.es se salía 23 px del borde. */
@media (min-width:1181px){
  footer.footer .footer-grid{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr)) minmax(0,1.3fr) !important;grid-template-rows:auto 1fr;column-gap:clamp(24px,2.6vw,36px);row-gap:40px}
  footer.footer .footer-grid > div{grid-row:1 / span 2}
  footer.footer .footer-grid > div:nth-child(6){grid-column:6;grid-row:1}
  footer.footer .footer-grid > div:nth-child(7){grid-column:6;grid-row:2}
}
/* P2 · Insignia «Agente Digitalizador · Red.es»: en píldora de radio completo se deformaba
   al partirse; se deja en una línea si cabe y, si no, en rectángulo redondeado. */
footer.footer .footer-badge{border-radius:10px;line-height:1.5;white-space:normal;margin-top:18px}
/* P3 · Barra legal: cada enlace se partía en dos líneas («AVISO / LEGAL», «MAPA DEL / SITIO»)
   porque el flex los encogía, y en móvil los «·» quedaban colgando al final de cada fila.
   Ahora los enlaces no se parten, la fila salta entera y el separador es el propio hueco. */
footer.footer .footer-bottom{grid-template-columns:auto 1fr}
footer.footer .footer-bottom .legal-links{flex-wrap:wrap;justify-content:flex-end;gap:8px 20px}
footer.footer .footer-bottom .legal-links a{white-space:nowrap}
footer.footer .footer-bottom .legal-links .sep{display:none}
@media (max-width:760px){
  footer.footer .footer-bottom{grid-template-columns:1fr}
  footer.footer .footer-bottom .legal-links{justify-content:center}
}
/* P4 · Móvil: el pie medía 3.281 px (60 enlaces en una sola columna, 4 pantallas). Las listas
   pasan a dos columnas; la marca sigue a todo el ancho. */
@media (max-width:760px){
  footer.footer .footer-grid{grid-template-columns:1fr 1fr !important;gap:36px 20px !important}
  footer.footer .footer-grid > div:first-child{grid-column:1 / -1}
  footer.footer .footer-grid > div{grid-row:auto;grid-column:auto}
  /* «Dónde estamos» y «Contacto» a todo el ancho: el correo no cabe en media columna */
  footer.footer .footer-grid > div:nth-child(6),footer.footer .footer-grid > div:nth-child(7){grid-column:1 / -1}
  footer.footer .footer-grid > div:nth-child(6) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
}
/* P5 · «Configuración de cookies»: el banner propio lo inserta FUERA del <footer>, así que
   salía como una franja clara debajo del pie oscuro. Se integra en el pie. */
.summum-cc-reabrir{background:var(--bg-ink);margin:0;padding:0 0 28px !important}
.summum-cc-reabrir button{color:var(--inv-mute) !important;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer}
.summum-cc-reabrir button:hover{color:var(--orange) !important}

/* FAQ convertida por assets/js/faq-acordeon.js: el <h3> original va dentro del <summary> para no
   alterar la estructura de encabezados; aquí toma la tipografía del summary del acordeón. */
.mp-faq-item > summary > h3{font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;display:inline;border:0;text-transform:none}

/* ─── Tanda 2 (11-oct-2026, madrugada) · hallazgos de la revisión a ojo de las 802 URL ──────────────────
   Revisión a ojo de 276 hojas (1.604 miniaturas, escritorio y móvil) + comprobación en grande de cada clase.
   Solo presentación: ningún texto ni enlace cambia. */

/* T2-1 · FAQ que el script convierte desde <details> sin clase o desde div.mp-faq-item: la respuesta
   puede no ir en <p>; mismo aire que las del molde. */
.mp-faq-item > .mp-faq-a{padding:0 0 22px;max-width:720px}
.mp-faq-item > .mp-faq-a > p{padding:0 0 12px}
.mp-faq-item > .mp-faq-a > p:last-child{padding-bottom:0}
details.mp-faq-item > summary{list-style:none}
details.mp-faq-item > summary::marker{content:""}

/* T2-2 · Banda de cierre de 4 artículos con style="background:var(--ink)": --ink no existe en el tema
   (se llama --bg-ink), el fondo quedaba transparente y el titular blanco caía sobre crema. */
.post-cta[style*="var(--ink)"]{background:var(--bg-ink) !important}

/* T2-3 · Párrafo suelto directo en .page-body (12 páginas: «¿Necesitas el cuaderno de campo…?»,
   «¿Tienes bodega?…»): sin contenedor, iba pegado al borde de la pantalla. Pasa a nota con raya,
   alineada con el contenido. */
.page-body > p{margin:28px max(var(--pad-x),calc((100% - var(--max))/2 + var(--pad-x))) !important;
  padding:6px 0 6px 18px;border-left:3px solid var(--orange);font-size:17px;line-height:1.55;max-width:none}

/* T2-4 · Sección con una sola frase (p. ej. «También gestionamos tus redes…» en las oficinas): 96 px de
   relleno arriba y abajo para una línea. */
.section:has(> .wrap > p:only-child){padding:28px 0 !important}

/* T2-5 · Franjas de enlaces (id franja-*, sw-*, f3-sw*, f3-geo*: «Kit Digital en sectores relacionados»,
   «…en las capitales vecinas», «Otros programas que implantamos»…, 163 páginas): título de 46 px para un
   párrafo de enlaces. Pasan a franja compacta, como los bloques de relacionados. Solo si la sección no
   lleva nada más que antetítulo, título y párrafos. */
.section:is([id^="franja-"],[id^="sw-"],[id^="f3-sw"],[id^="f3-geo"]):not(:has(> .wrap > :not(h2,p,.eyebrow))){padding:40px 0 !important;border-top:1px solid var(--line)}
.section:is([id^="franja-"],[id^="sw-"],[id^="f3-sw"],[id^="f3-geo"]):not(:has(> .wrap > :not(h2,p,.eyebrow))) > .wrap > h2{font-size:clamp(20px,1.7vw,24px) !important;line-height:1.25 !important;margin:4px 0 10px !important;letter-spacing:-0.015em}
.section:is([id^="franja-"],[id^="sw-"],[id^="f3-sw"],[id^="f3-geo"]):not(:has(> .wrap > :not(h2,p,.eyebrow))) > .wrap > p{font-size:16px;line-height:1.65;margin:0 0 8px;max-width:none}

/* T2-6 · Formulario CF7 dentro de section.section (oficinas, León, Salamanca, /servicios/, /redes-sociales/,
   /neuromarketing/, /kit-digital/…; la home queda fuera hasta que Ángel diga): campos transparentes con solo
   una línea sobre beige, dos textareas de 235 px y la pregunta del asistente de IA siempre a la vista. Mismos
   campos que el formulario del final de página. */
body:not(.home) section.section > .wrap > .wpcf7 input[type=text],body:not(.home) section.section > .wrap > .wpcf7 input[type=email],
body:not(.home) section.section > .wrap > .wpcf7 input[type=tel],body:not(.home) section.section > .wrap > .wpcf7 textarea,
body:not(.home) section.section > .wrap > .wpcf7 select{width:100%;box-sizing:border-box;padding:12px 14px !important;font-size:16px;
  border:1px solid rgba(0,0,0,.18) !important;border-radius:9px !important;background:#fff !important;color:#111 !important}
body:not(.home) section.section > .wrap > .wpcf7 .wpcf7-form-control::placeholder{color:#6b6459 !important;opacity:1}
body:not(.home) section.section > .wrap > .wpcf7 textarea[name="mensaje"]{height:128px !important;min-height:0 !important}
body:not(.home) section.section > .wrap > .wpcf7 textarea[name="pregunta-asistente"]{height:96px !important;min-height:0 !important}
body:not(.home) section.section > .wrap > .wpcf7 form:not(:has(select[name="como-nos-conociste"] option[value="ChatGPT u otro asistente de IA"]:checked)) p:has(> .wpcf7-form-control-wrap[data-name="pregunta-asistente"]){display:none}
body:not(.home) section.section > .wrap > .wpcf7 .et_pb_contact_form{grid-auto-flow:row dense}
body:not(.home) section.section > .wrap > .wpcf7 .et_pb_contact_form > p.et_pb_contact_field:has(textarea){grid-column:1 / -1 !important}

/* T2-7 · Letra capital: en artículos cuyo cuerpo son secciones, el único <p> directo es la frase añadida al
   final («¿Tienes bodega?…») y heredaba la capital de 64 px de .bs-dropcap-first > p:first-of-type
   (0,2,1); esta regla lleva :first-of-type para ganarle (0,2,2). */
.bs-dropcap-first > section ~ p:first-of-type::first-letter{font:inherit;color:inherit;float:none;padding:0;line-height:inherit}

/* T2-8 · /sectores/: section.ssm-section («50 especialidades», grupos h3 + enlaces) va directa en .page-body,
   sin contenedor, y el texto tocaba el borde de la pantalla. */
.page-body > section.ssm-section{margin-left:max(var(--pad-x),calc((100% - var(--max))/2 + var(--pad-x)));margin-right:max(var(--pad-x),calc((100% - var(--max))/2 + var(--pad-x)))}

/* T2-9 · «Seguir leyendo» / «Herramientas relacionadas» (26 páginas .lp-section, marcados por faq-acordeon.js):
   h2 de 56 px para un párrafo de enlaces. Pasan a cierre compacto con raya encima. */
h2.rel-texto{font-size:clamp(20px,1.7vw,24px) !important;line-height:1.25 !important;letter-spacing:-0.015em;margin:56px 0 10px !important;padding-top:24px;border-top:1px solid var(--line)}
p.rel-texto-p{font-size:16px;line-height:1.7}

/* T2-10 · Título justo después de una FAQ (acordeón): en .lp-section quedaba pegado a la última pregunta. */
.mp-faq-lista + h2,details.mp-faq-item + h2{margin-top:64px !important}