/* ==========================================================================
   NCN · ajustes visuales globales (v1 · 2026-09-25)
   Se carga en todas las páginas después de los estilos propios de cada una.
   ========================================================================== */

/* 1. Artículos del blog: texto alineado a la izquierda.
      El justificado abría huecos grandes entre palabras, sobre todo en móvil
      y en los títulos. */
.article-section .container-article > .article-content,
.article-content { text-align: left !important; }
.article-content p,
.article-content li { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.article-content h2,
.article-content h3 { text-wrap: balance; }
@media (max-width: 640px) {
  .article-content p,
  .article-content li { font-size: 16.5px; line-height: 1.7; }
}

/* 2. Fichas de producto: el nombre gigante del fondo se leía "UROU1"
      porque el degradado borraba la cola de la Q. */
.phero__watermark {
  line-height: .92 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%) !important;
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%) !important;
}

/* 3. Botones del encabezado de producto en móvil: mismo ancho y alineados. */
@media (max-width: 520px) {
  .actionrow { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .actionrow > .apill { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   v2 · 2026-09-28 — ajustes de escala y consistencia
   ========================================================================== */


/* 5. Artículos: cabecera más compacta, sin franja blanca y alineada con el menú */
main.blog-light > .breadcrumbs{max-width:none!important;margin:0!important;background:var(--bg,#080B12);
  padding:14px max(24px, calc((100% - 1124px) / 2)) 0!important;color:#65718A}
main.blog-light > .breadcrumbs a{color:#98A3B8!important} main.blog-light > .breadcrumbs span[style]{color:#F4F6F9!important}
.hero-article{padding:28px 0 44px!important;background:linear-gradient(180deg,var(--bg,#080B12) 0%,var(--surface,#111826) 100%)!important}
.hero-article > .container,
.article-section .container-article{max-width:1172px!important}
.hero-article h1{font-size:clamp(28px,3.2vw,40px)!important;max-width:900px}
.article-section .container-article{padding-top:40px!important}
.article-content > img:first-child{max-height:400px;object-fit:cover!important;margin-bottom:32px!important}

/* 6. Tablas: se deslizan dentro del artículo en vez de cortarse, con sombra que indica que hay más */
.article-body table,.article-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,
             linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,
             radial-gradient(farthest-side at 0 50%,rgba(11,15,25,.18),transparent) 0 0/14px 100% no-repeat scroll,
             radial-gradient(farthest-side at 100% 50%,rgba(11,15,25,.18),transparent) 100% 0/14px 100% no-repeat scroll}
@media (max-width:720px){
  .article-body th,.article-body td,.article-content th,.article-content td{min-width:130px}
  .article-body th:first-child,.article-body td:first-child{min-width:110px}
  .compare-wrap{position:relative}
  .compare-wrap::before{content:"Desliza para ver más →";display:block;font:600 12px/1 var(--font-body,sans-serif);color:#8992A0;text-align:right;margin:0 0 8px}
}

/* 7. Portadas que llenaban la pantalla en laptops */
.hero-inner h1{font-size:clamp(34px,4.6vw,56px)!important;max-width:780px!important}


/* 8. Artículos: la foto del artículo va de fondo en la cabecera */
.hero-article.has-photo{position:relative;padding:72px 0 64px!important;min-height:360px;display:flex;align-items:flex-end;background:#080B12!important}
.hero-article.has-photo > .container{position:relative;z-index:2;width:100%}
.hero-article .hero-photo{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;border-radius:0!important;margin:0!important;z-index:0}
.hero-article.has-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,11,18,.92) 0%,rgba(8,11,18,.78) 45%,rgba(8,11,18,.35) 100%),linear-gradient(0deg,rgba(8,11,18,.85) 0%,rgba(8,11,18,0) 55%)}
.hero-article.has-photo .hero-article-subtitle{color:#C9D1DE!important}
.hero-article.has-photo .post-meta{color:#AEB8C8!important}
main.blog-light > .breadcrumbs{position:relative;z-index:3}
@media (max-width:720px){.hero-article.has-photo{min-height:300px;padding:48px 0 36px!important}
  .hero-article.has-photo::after{background:linear-gradient(0deg,rgba(8,11,18,.95) 0%,rgba(8,11,18,.7) 60%,rgba(8,11,18,.45) 100%)}}
.hero-article .breadcrumbs.in-hero{max-width:none!important;margin:0 0 28px!important;padding:0!important;background:none!important;color:#98A3B8;font-size:13px}
.hero-article .breadcrumbs.in-hero a{color:#C9D1DE!important}.hero-article .breadcrumbs.in-hero span[style]{color:#fff!important}
.hero-article.has-photo{align-items:stretch;padding-top:24px!important}
.hero-article.has-photo .hero-article-content{display:flex;flex-direction:column;min-height:280px}
.hero-article.has-photo .hero-article-content .post-meta{margin-top:auto}

/* 9. Artículos: imágenes y enlaces dentro del texto */
.article-body figure{margin:28px 0!important}
.article-body figure img{display:block;max-width:100%;height:auto;border-radius:12px;margin:0 auto}
.article-body figcaption{font-size:13.5px;color:#65718A;margin-top:10px;text-align:center}
.article-body a{color:#1D5FD6;text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:#0B0F19}

/* 10. Casos reales relacionados (páginas de producto y servicio) */
.proj-rel{background:#F6F8FB;border-top:1px solid #E3E8EF}
.proj-rel .proj-rel-label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8992A0;margin-bottom:10px}
.proj-rel h2{color:#0B0F19;margin:0 0 8px}
.proj-rel .proj-rel-intro{color:#5B6472;max-width:640px;margin:0 0 28px}
.proj-rel-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:20px}
.proj-rel-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid #E3E8EF;border-radius:16px;overflow:hidden}
.proj-rel-card:hover{border-color:#C3D4F0;box-shadow:0 18px 40px -22px rgba(11,15,25,.45)}
.proj-rel-thumb{height:150px;background-size:cover;background-position:center;background-color:#1c4066}
.proj-rel-body{padding:18px 20px 22px}
.proj-rel-cat{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#155c43;background:#E6F4EE;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.proj-rel-card h3{color:#0B0F19;font-size:16.5px;line-height:1.35;margin:0 0 8px;font-weight:700}
.proj-rel-card p{color:#5B6472;font-size:14px;line-height:1.55;margin:0}
.proj-rel-more{display:inline-block;margin-top:26px;color:#1D5FD6;text-decoration:none;font-weight:600}