/* GENERADO POR tools/build-css.php — NO EDITAR A MANO.
   Fuente: themes/ia-nexus-modern-one/assets/css/{article}.css
   Regenerar: php tools/build-css.php */
/* Estilos de la ficha de artículo (Noticias) y de curso individual.    Se carga solo en esas páginas — ver inc/enqueue.php. */ /* ==========================================================================    Rediseño de artículo (Noticias) y de curso individual — 2026-10-30    Antes: panel claro desalineado flotando sobre una franja oscura fija por    altura en px, que se rompía con títulos largos o imágenes de otra    proporción. Ahora: un hero de una sola pieza (imagen + degradado + texto)    y un cuerpo en dos columnas sin cortes de color arbitrarios.    ========================================================================== */ .nx-article{ background:var(--n-bg); } /* --------------------------------------------------------------- hero --- */ .nx-article-hero{   position:relative; overflow:hidden;   min-height:clamp(420px,56vw,620px);   display:flex; align-items:flex-end;   background:var(--n-navy); } .nx-article-hero__media{   position:absolute; inset:0; margin:0; } .nx-article-hero__media img{   inline-size:100%; block-size:100%; object-fit:cover; display:block;   filter:saturate(.55); } /* Degradado de una sola pieza: así el texto es legible sin que haga falta    una caja aparte, y el borde entre foto y texto desaparece. */ .nx-article-hero::after{   content:""; position:absolute; inset:0; pointer-events:none;   background:     linear-gradient(to top, var(--n-navy) 0%, rgba(6,14,28,.88) 20%, rgba(6,14,28,.1) 62%, transparent 100%),     linear-gradient(to bottom, rgba(6,14,28,.55) 0%, transparent 30%); } .nx-article-hero__inner{ position:relative; z-index:1; padding-block:clamp(48px,8vw,88px) clamp(32px,5vw,56px); } .nx-article-hero--noimage{ background:var(--n-navy); min-height:0; } .nx-article-hero--noimage::after{ display:none; } .nx-article-hero--noimage .nx-article-hero__inner{ padding-block:clamp(64px,9vw,104px) clamp(40px,6vw,64px); } .nx-crumb{   display:inline-block;   font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   font-size:11px; letter-spacing:.08em; color:#d7e3ec; margin:0 0 18px;   /* El degradado del hero no basta sobre fotos con zonas muy claras (p.ej.      el servicio de Análisis de datos): una sombra sutil no alcanzaba, así      que la miga lleva su propio fondo, como la fecha de las tarjetas. */   background:rgba(6,14,28,.55); backdrop-filter:blur(3px);   padding:5px 10px; border-radius:999px; } .nx-crumb a{ color:var(--n-cyan-soft); text-decoration:none; } .nx-crumb a:hover{ text-decoration:underline; } .nx-article-category{   display:flex; align-items:center; gap:9px;   font:600 11px/1.6 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase;   color:var(--n-cyan-soft); margin:0 0 16px; } /* El mismo marcador que ya llevan las tarjetas: la categoría se reconoce    como el mismo elemento al pasar de la tarjeta al artículo. */ .nx-article-category::before{   content:""; display:block; inline-size:16px; block-size:1.5px; background:currentColor; opacity:.7; } .nx-article-category a{ color:inherit; text-decoration:none; } .nx-article h1.nx-article-title{   font:450 clamp(2.1rem,5vw,4.6rem)/1.08 Manrope,sans-serif;   letter-spacing:-.045em; color:#f3f9fc; max-width:19ch;   margin:0 0 20px; text-wrap:balance; } .nx-article-deck{ max-width:46rem; margin:0 0 28px; } .nx-article-deck p{   font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.65; color:#c2d4e0; margin:0;   text-shadow:0 1px 4px rgba(0,0,0,.4); } .nx-article-meta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; } .nx-meta-item{   font:500 11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   letter-spacing:.05em; color:#9bb2c1; display:inline-flex; align-items:center; gap:7px; } .nx-meta-item + .nx-meta-item::before{   content:""; display:inline-block; inline-size:3px; block-size:3px; border-radius:50%;   background:currentColor; margin-inline-end:11px; opacity:.6; } .nx-article-meta .wp-block-post-date{   font:500 11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   letter-spacing:.05em; color:#9bb2c1; } /* Distintivo de estado del curso (reemplaza al eyebrow fijo «FORMACIÓN»). */ .nx-badge{   display:inline-block; font:600 10.5px/1 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase;   color:var(--n-navy); background:var(--n-cyan-soft);   padding:9px 14px; border-radius:999px; margin:0 0 22px; } /* ---------------------------------------------------------- cuerpo ----- */ .nx-article-main{ padding-block:clamp(48px,7vw,86px) 0; } .nx-article-layout{   display:grid; grid-template-columns:240px minmax(0,1fr);   gap:clamp(32px,5vw,64px); align-items:start; } .nx-article-layout--course{ grid-template-columns:280px minmax(0,1fr); } .nx-article-rail{   position:sticky; top:calc(var(--wp--custom--header-height,4.75rem) + 24px);   display:flex; flex-direction:column; gap:28px; } .nx-article-body{ max-width:46rem; } .nx-article-body .wp-block-post-content{ max-width:none; } .nx-article-body p{ font-size:1.08rem; line-height:1.9; color:#2c3d47; margin:0 0 26px; } .nx-article-body h2{ font:500 1.9rem/1.3 Manrope,sans-serif; letter-spacing:-.03em; color:var(--n-navy); margin:46px 0 22px; } .nx-article-body h3{ font:550 1.35rem/1.35 Manrope,sans-serif; color:var(--n-navy); margin:36px 0 16px; } .nx-article-body ul,.nx-article-body ol{ padding-inline-start:1.3em; margin:0 0 26px; } .nx-article-body li{ font-size:1.05rem; line-height:1.85; color:#2c3d47; margin-bottom:10px; } .nx-article-body a{ color:var(--n-blue); text-decoration-thickness:1px; text-underline-offset:3px; } .nx-article-body a:hover{ color:#0a4a5e; } .nx-article-body :where(a,button):focus-visible{ outline-color:var(--n-blue); } /* ------------------------------------------------------ compartir ------ */ .nx-share{ padding-block:4px; } .nx-share__label{   font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   letter-spacing:.14em; text-transform:uppercase; color:#7e95a4; margin:0 0 14px; } .nx-share__list{ display:flex; gap:9px; list-style:none; margin:0; padding:0; } .nx-article-rail .nx-share__list{ flex-wrap:wrap; } .nx-share__link{   display:grid; place-items:center; inline-size:42px; block-size:42px; border-radius:50%;   border:1px solid var(--n-line,#dce5ef); background:var(--n-surface,#fff); color:var(--n-navy);   cursor:pointer; transition:border-color 180ms ease, color 180ms ease, transform 180ms ease; } .nx-share__link:hover{ border-color:var(--n-blue); color:var(--n-blue); transform:translateY(-2px); } .nx-share__copy{ position:relative; } .nx-share__copy.is-copied{ color:#1a7a4a; border-color:#1a7a4a; } .nx-share__done{   position:absolute; inset-block-start:calc(100% + 6px); inset-inline-start:50%; transform:translateX(-50%);   font:600 10px/1 Inter,sans-serif; white-space:nowrap; color:#1a7a4a;   background:#fff; border:1px solid #cdeedb; border-radius:4px; padding:4px 8px; } /* --------------------------------------------------- ficha de origen --- */ .nx-source-card,.nx-facts{   background:var(--n-mist); border:1px solid var(--n-line,#dce5ef); border-radius:var(--nx-radius-lg);   padding:20px; } .nx-source-card__label,.nx-facts__label{   font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   letter-spacing:.14em; text-transform:uppercase; color:#7e95a4; margin:0 0 12px; } .nx-source-card__name{ font:600 1rem/1.4 Manrope,sans-serif; color:var(--n-navy); margin:0 0 6px; } .nx-source-card__name a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; } .nx-source-card__name a:hover{ color:var(--n-blue); } .nx-source-card__editor{ font-size:.85rem; color:#5a7384; margin:0 0 10px; } .nx-source-card__note{ font-size:.8rem; line-height:1.6; color:#7e95a4; margin:0; } /* --------------------------------------------------------- ficha curso */ .nx-facts__list{ display:grid; gap:14px; margin:0; } .nx-facts__row{ display:grid; gap:2px; padding-block:12px 0; border-block-start:1px solid var(--n-line,#dce5ef); } .nx-facts__row:first-child{ border-block-start:0; padding-block-start:0; } .nx-facts__row dt{   font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;   letter-spacing:.1em; text-transform:uppercase; color:#7e95a4; } .nx-facts__row dd{ font:600 .98rem/1.3 Manrope,sans-serif; color:var(--n-navy); margin:0; } .nx-facts__empty{ font-size:.92rem; line-height:1.65; color:#5a7384; margin:0; } .nx-facts__cta{ margin-top:18px; padding-top:18px; border-block-start:1px solid var(--n-line,#dce5ef); } .nx-facts__button{   display:inline-flex; align-items:center; gap:8px; font:600 .88rem/1 Inter,sans-serif;   color:#fff; background:var(--n-navy); border-radius:var(--nx-radius); padding:13px 16px;   text-decoration:none; min-height:44px; transition:background 180ms ease, transform 180ms ease; } .nx-facts__button:hover{ background:var(--n-blue); transform:translateY(-1px); } /* ---------------------------------------------- barra de progreso ----- */ .nx-progress{   position:fixed; inset-inline:0; inset-block-start:0; z-index:40;   block-size:3px; background:transparent; opacity:0; transition:opacity 220ms ease;   pointer-events:none; } .nx-progress.is-visible{ opacity:1; } .admin-bar .nx-progress{ inset-block-start:32px; } .nx-progress__fill{   display:block; inline-size:100%; block-size:100%; transform-origin:left center; transform:scaleX(0);   background:linear-gradient(90deg,var(--n-blue),var(--n-cyan)); } /* ------------------------------------------------------- relacionados - */ .nx-related{ margin-block:clamp(48px,7vw,88px); padding-block-start:clamp(40px,6vw,64px); border-block-start:1px solid var(--n-line,#dce5ef); } .nx-related__heading{ font:500 1.55rem/1.2 Manrope,sans-serif; letter-spacing:-.025em; color:var(--n-navy); margin:0 0 28px; } .nx-related__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .nx-related__link{ display:block; text-decoration:none; color:inherit; } .nx-related__media{ display:block; margin:0 0 14px; border-radius:var(--nx-radius); overflow:hidden; aspect-ratio:16/10; } .nx-related__media img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; transition:transform 320ms ease; } .nx-related__link:hover .nx-related__media img{ transform:scale(1.04); } .nx-related__cat{   display:block; font:600 10px/1.6 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase;   color:var(--n-blue); margin:0 0 6px; } .nx-related__title{   display:block; font:550 1.08rem/1.32 Manrope,sans-serif; letter-spacing:-.02em; color:var(--n-navy); margin:0 0 8px; } .nx-related__link:hover .nx-related__title{ color:var(--n-blue); } .nx-related__date{ display:block; font-size:.82rem; color:#7e95a4; } /* ------------------------------------------------- navegación entre --- */ .nx-postnav{   display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--n-line,#dce5ef);   border-radius:var(--nx-radius-lg); overflow:hidden; margin-block-start:clamp(40px,6vw,64px); } .nx-postnav__link{   display:flex; flex-direction:column; gap:6px; padding:22px; background:var(--n-surface,#fff);   text-decoration:none; transition:background 180ms ease; } .nx-postnav__link:hover{ background:var(--n-mist); } .nx-postnav__link--next{ text-align:right; align-items:flex-end; } .nx-postnav--single{ grid-template-columns:1fr; } .nx-postnav__label{ font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; color:#7e95a4; } .nx-postnav__title{ font:550 1rem/1.35 Manrope,sans-serif; color:var(--n-navy); } /* ------------------------------------------------------------- CTA ---- */ .nx-article-cta{ background:var(--n-navy); margin-top:clamp(56px,8vw,96px); padding-block:clamp(56px,8vw,96px); } .nx-article-cta .nx-eyebrow{ color:var(--n-cyan-soft); } .nx-article-cta h2{ font:450 clamp(2rem,3.6vw,3.2rem)/1.12 Manrope,sans-serif; color:#f3f9fc; letter-spacing:-.035em; margin:0 0 18px; } .nx-article-cta p{ color:#c2d4e0; max-width:38rem; } /* ------------------------------------------------------------ móvil --- */ @media (max-width:1000px){   .nx-article-layout,.nx-article-layout--course{ grid-template-columns:1fr; }   .nx-article-rail{ position:static; flex-direction:row; flex-wrap:wrap; order:2; }   .nx-article-rail .nx-share{ order:1; }   .nx-article-rail .nx-source-card,.nx-article-rail .nx-facts{ order:2; flex:1 1 260px; }   .nx-related__list{ grid-template-columns:1fr 1fr; } } @media (max-width:782px){   .nx-article-hero{ min-height:clamp(320px,74vw,460px); }   .nx-article h1.nx-article-title{ font-size:clamp(1.7rem,8vw,2.4rem); max-width:none; }   .nx-article-deck p{ font-size:1rem; }   .nx-related__list{ grid-template-columns:1fr; }   .nx-postnav{ grid-template-columns:1fr; }   .nx-postnav__link--next{ text-align:left; align-items:flex-start; }   .nx-article-body p,.nx-article-body li{ font-size:1rem; } } @media (prefers-reduced-motion:reduce){   .nx-related__link:hover .nx-related__media img{ transform:none; }   .nx-facts__button:hover,.nx-share__link:hover{ transform:none; } } /* --------------------------------------------- ficha de cotización (servicio) */ .nx-service-cta__text{ font-size:.92rem; line-height:1.6; color:#5a7384; margin:0 0 4px; } .nx-service-cta__direct{   list-style:none; margin:14px 0 0; padding:14px 0 0;   border-block-start:1px solid var(--n-line,#dce5ef);   display:grid; gap:8px; } .nx-service-cta__direct a{   font:600 .92rem/1.3 Manrope,sans-serif; color:var(--n-navy); text-decoration:none; } .nx-service-cta__direct a:hover{ color:var(--n-blue); } /* Capa azul de contraste, independiente del brillo de la fotografía. */ .nx-article-hero{isolation:isolate} .nx-article-hero__media{z-index:0} .nx-article-hero::after{  z-index:1;  background:linear-gradient(90deg,rgba(4,18,40,.45) 0%,rgba(4,18,40,.14) 65%,transparent 100%),linear-gradient(0deg,rgba(4,18,40,.85) 0%,transparent 72%),rgba(7,31,64,.70); } .nx-article-hero__inner{z-index:2} .nx-article h1.nx-article-title{color:#f5fbff;text-shadow:0 2px 14px rgba(0,0,0,.18)} .nx-article-hero .nx-article-deck p{color:#e3eff8;text-shadow:none} .nx-article-hero .nx-article-category,.nx-article-hero .nx-crumb a{color:#b5efff} .nx-article-hero .nx-crumb{color:#edf6fc;background:rgba(4,18,40,.45);backdrop-filter:none} .nx-article-hero .nx-meta-item,.nx-article-hero .nx-article-meta .wp-block-post-date{color:#e1edf6} @media(max-width:782px){  .nx-article-hero::after{background:linear-gradient(0deg,rgba(4,18,40,.78),rgba(4,18,40,.08)),rgba(7,31,64,.74)} } /* Portadas de fichas: encuadre, ancho de lectura y capas coherentes. */ .nx-article-hero{background:#040e20;min-height:580px} .nx-article-hero__media img{object-position:68% center;filter:saturate(.7)} .nx-article-hero::after{background:linear-gradient(90deg,rgba(4,14,32,.94) 0%,rgba(5,24,48,.86) 36%,rgba(7,31,64,.62) 75%,rgba(7,31,64,.5) 100%),linear-gradient(0deg,#040e20 0%,transparent 65%)} .nx-article-hero__inner{padding-block:80px 58px} .nx-article h1.nx-article-title{max-width:21ch;font-size:clamp(40px,4.8vw,72px);line-height:1.1;letter-spacing:-.045em} .nx-article-deck{max-width:650px} .nx-article-hero .nx-article-deck p{font-size:18px;line-height:1.75;color:#e0edf7} .nx-article-hero .nx-crumb{background:none;border-radius:0;padding:0 0 10px;border-bottom:1px solid #b6d8ec44;margin-bottom:30px} @media(max-width:782px){.nx-article-hero{min-height:0}.nx-article-hero__inner{padding-block:52px 44px}.nx-article h1.nx-article-title{font-size:clamp(30px,7.6vw,44px);max-width:100%;line-height:1.15}.nx-article-hero .nx-article-deck p{font-size:16px}.nx-article-hero::after{background:linear-gradient(90deg,rgba(4,14,32,.94),rgba(7,31,64,.78)),linear-gradient(0deg,#040e20,transparent 75%)}.nx-article-hero__media img{object-position:60% center}} /* Accessible outline action on the dark course CTA. */ .nx-course .nx-article-cta .wp-block-button.is-style-outline .wp-block-button__link{color:#e8f8ff!important;border:1px solid #9deaff!important;background:transparent!important;min-height:48px} .nx-course .nx-article-cta .wp-block-button.is-style-outline .wp-block-button__link:hover{background:#9deaff!important;color:#061524!important} .nx-course .nx-article-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible{outline:3px solid #9deaff;outline-offset:4px} /* Separate the course status from the breadcrumb on every screen. */ .nx-course .nx-article-hero__inner .nx-crumb{display:block;width:fit-content;max-width:100%;margin-bottom:16px!important} .nx-course .nx-article-hero__inner .nx-badge{display:table;max-width:100%;margin:0 0 24px!important}