← 1150px centrado, fondo Cream
* cabecera + obs-bar + breadcrumb + cuerpo
*
*
*
*
* Esto hace dos cosas a la vez:
* 1. Centra la cabecera del sitio (que mide 1150px fijos) en pantallas anchas
* en lugar de dejarla pegada a la izquierda y cortada por la derecha.
* 2. Define un color de fondo de página propio del observatorio (Cream)
* diferenciado del gris que se ve a los lados del navegador.
*/
body.obs-page {
background: #d4d4d4;
margin: 0;
}
.obs-page-wrapper {
max-width: 1150px;
margin: 0 auto;
background: var(--obs-page-bg);
/* Sombra muy suave para reforzar el "papel" sobre fondo gris */
box-shadow: 0 0 24px rgba(0, 0, 0, .04);
}
/* El breadcrumb queda dentro del wrapper, hereda el fondo Cream */
body.obs-page .obs-breadcrumb {
background: var(--obs-page-bg);
}
/* En viewports estrechos (≤ 1170px), la cabecera se hace 100% (regla de cabecera-nueva.css)
* y el wrapper también se adapta: max-width 1150px ya cumple, no hace falta media query. */
/* ============ Reset suave + base ============ */
.obs-scope, .obs-scope *, .obs-scope *::before, .obs-scope *::after {
box-sizing: border-box;
}
.obs-scope {
font-family: var(--obs-font);
color: var(--obs-text);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.obs-scope p { margin: 0 0 14px; }
.obs-scope strong { color: var(--obs-ink); font-weight: 600; }
.obs-scope code {
font-family: var(--obs-mono);
font-size: .9em;
background: #F4F4F5;
padding: 2px 6px;
border-radius: 4px;
color: var(--obs-coral);
border: 1px solid var(--obs-border);
}
.obs-scope a {
color: var(--obs-navy);
text-decoration: underline;
text-decoration-color: rgba(27, 42, 74, .35);
text-underline-offset: 3px;
transition: text-decoration-color .15s, color .15s;
}
.obs-scope a:hover { color: var(--obs-coral); text-decoration-color: var(--obs-coral); }
/* ============ HERO de artículo ============ */
.obs-articulo-hero {
padding: 28px 0 22px;
border-bottom: 1px solid var(--obs-border);
margin-bottom: 24px;
}
.obs-articulo-hero__chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 11px;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: 999px;
font-family: var(--obs-mono);
font-size: 11px;
font-weight: 500;
color: var(--obs-navy);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 14px;
}
.obs-articulo-hero__chip strong { color: var(--obs-coral); font-weight: 700; }
.obs-articulo-hero__title {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -.02em;
color: var(--obs-ink);
margin: 0 0 10px;
}
.obs-articulo-hero__subtitle {
font-size: 1rem;
color: var(--obs-text-soft);
line-height: 1.55;
margin: 0 0 16px;
}
.obs-articulo-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
font-size: 13px;
color: var(--obs-muted);
}
.obs-articulo-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.obs-articulo-hero__meta-item strong { color: var(--obs-text); font-weight: 600; }
/* ============ TL;DR / Answer Capsule ============ */
.obs-tldr {
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
border-left: 4px solid var(--obs-coral);
border-radius: var(--obs-radius);
padding: 18px 22px;
margin: 18px 0 24px;
}
.obs-tldr__label {
display: inline-block;
font-family: var(--obs-mono);
font-size: 11px;
font-weight: 600;
color: var(--obs-coral);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 6px;
}
.obs-tldr p {
font-size: .98rem;
line-height: 1.55;
color: var(--obs-ink);
margin: 0 0 6px;
}
.obs-tldr p:last-child { margin-bottom: 0; }
/* ============ Callouts ============ */
.obs-callout {
display: flex;
gap: 12px;
padding: 14px 18px;
border-radius: var(--obs-radius);
border: 1px solid;
margin: 14px 0;
align-items: flex-start;
}
.obs-callout__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
}
.obs-callout__body { flex: 1; font-size: 14px; line-height: 1.55; }
.obs-callout__body p { margin: 0 0 6px; color: inherit; }
.obs-callout__body p:last-child { margin-bottom: 0; }
.obs-callout__label {
display: block;
font-family: var(--obs-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
opacity: .85;
}
.obs-callout__title { font-size: .98rem; font-weight: 700; color: inherit; margin: 0 0 4px; }
.obs-callout--warn { background: var(--obs-warn-bg); border-color: var(--obs-warn-bd); color: var(--obs-warn-fg); }
.obs-callout--info { background: var(--obs-info-bg); border-color: var(--obs-info-bd); color: var(--obs-info-fg); }
.obs-callout--tip { background: var(--obs-tip-bg); border-color: var(--obs-tip-bd); color: var(--obs-tip-fg); }
.obs-callout--success { background: var(--obs-ok-bg); border-color: var(--obs-ok-bd); color: var(--obs-ok-fg); }
.obs-callout--note { background: var(--obs-note-bg); border-color: var(--obs-note-bd); color: var(--obs-note-fg); }
/* ============ Stat ============ */
.obs-stat {
display: grid;
grid-template-columns: minmax(120px, .8fr) 2fr;
gap: 18px;
align-items: center;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 16px 20px;
margin: 16px 0;
}
@media (max-width: 600px) { .obs-stat { grid-template-columns: 1fr; gap: 10px; } }
.obs-stat__num {
font-family: var(--obs-mono);
font-size: 2.2rem;
font-weight: 700;
color: var(--obs-coral);
line-height: 1;
letter-spacing: -.02em;
}
.obs-stat__num span { font-size: .55em; opacity: .85; margin-left: 3px; }
.obs-stat__label {
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .08em;
margin-top: 4px;
}
.obs-stat__body h4 { font-size: .98rem; font-weight: 700; color: var(--obs-ink); margin: 0 0 4px; }
.obs-stat__body p { font-size: 13.5px; color: var(--obs-text-soft); margin: 0 0 6px; }
.obs-stat__ref {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--obs-mono);
font-size: 11px;
font-weight: 600;
color: var(--obs-navy);
background: #fff;
border: 1px solid var(--obs-border);
padding: 3px 8px;
border-radius: 4px;
}
/* ============ Quote ============ */
.obs-quote {
background: #fff;
border: 1px solid var(--obs-border);
border-left: 4px solid var(--obs-navy);
border-radius: var(--obs-radius);
padding: 18px 22px;
margin: 16px 0;
}
.obs-quote__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #EFF6FF;
color: var(--obs-info-fg);
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 4px;
border: 1px solid var(--obs-info-bd);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 10px;
}
.obs-quote__badge svg { width: 11px; height: 11px; }
.obs-quote__text {
font-size: 1rem;
line-height: 1.55;
color: var(--obs-ink);
font-style: italic;
margin: 0 0 10px;
}
.obs-quote__cite { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--obs-muted); }
.obs-quote__cite svg { width: 13px; height: 13px; flex-shrink: 0; }
.obs-quote__cite a { color: var(--obs-navy); }
/* ============ Fuente card ============ */
.obs-fuente-card {
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 16px;
margin: 10px 0;
transition: border-color .15s, box-shadow .15s;
}
.obs-fuente-card:hover { border-color: var(--obs-coral-soft); box-shadow: var(--obs-shadow-md); }
.obs-fuente-card__icon {
width: 48px;
height: 48px;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--obs-navy);
flex-shrink: 0;
}
.obs-fuente-card__icon svg { width: 20px; height: 20px; }
.obs-fuente-card__body { min-width: 0; }
.obs-fuente-card__type {
font-family: var(--obs-mono);
font-size: 10px;
font-weight: 600;
color: var(--obs-coral);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 2px;
}
.obs-fuente-card__title {
font-size: 14px;
font-weight: 700;
color: var(--obs-ink);
margin: 0 0 3px;
line-height: 1.3;
}
.obs-fuente-card__title a { color: inherit; text-decoration: none; }
.obs-fuente-card__title a:hover { color: var(--obs-coral); }
.obs-fuente-card__meta { font-size: 12px; color: var(--obs-muted); display: flex; flex-wrap: wrap; gap: 3px 12px; }
.obs-fuente-card__meta strong { color: var(--obs-text); font-weight: 600; }
/* ============ Comparativa OK/KO ============ */
.obs-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 16px 0;
}
@media (max-width: 700px) { .obs-compare { grid-template-columns: 1fr; } }
.obs-compare__col {
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 18px;
}
.obs-compare__col--ok { border-color: var(--obs-ok-bd); background: var(--obs-ok-bg); }
.obs-compare__col--ko { border-color: var(--obs-warn-bd); background: var(--obs-warn-bg); }
.obs-compare__col h4 {
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
font-weight: 700;
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: .04em;
}
.obs-compare__col--ok h4 { color: var(--obs-ok-fg); }
.obs-compare__col--ko h4 { color: var(--obs-warn-fg); }
.obs-compare__col h4 svg { width: 14px; height: 14px; flex-shrink: 0; }
.obs-compare__col ul { margin: 0; padding-left: 18px; }
.obs-compare__col li { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; color: inherit; }
/* ============ Pasos ============ */
.obs-pasos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
counter-reset: obs-paso;
margin: 16px 0;
}
.obs-paso {
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 14px 14px 54px;
position: relative;
counter-increment: obs-paso;
}
.obs-paso::before {
content: counter(obs-paso);
position: absolute;
top: 12px;
left: 12px;
width: 30px;
height: 30px;
background: var(--obs-navy);
color: #fff;
border-radius: 7px;
font-family: var(--obs-mono);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.obs-paso h4 { font-size: 14px; font-weight: 700; color: var(--obs-ink); margin: 0 0 4px; }
.obs-paso p { font-size: 13px; color: var(--obs-text-soft); margin: 0; line-height: 1.5; }
/* ============ Definición ============ */
.obs-definicion {
display: flex;
gap: 12px;
background: #FAF5FF;
border: 1px solid #DDD6FE;
border-radius: var(--obs-radius);
padding: 14px 18px;
margin: 14px 0;
}
.obs-definicion__icon { color: #7C3AED; flex-shrink: 0; }
.obs-definicion__icon svg { width: 20px; height: 20px; }
.obs-definicion__label {
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: #7C3AED;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 3px;
}
.obs-definicion__term { font-size: .98rem; font-weight: 700; color: #4C1D95; margin: 0 0 4px; }
.obs-definicion__text { font-size: 13.5px; color: #5B21B6; margin: 0; line-height: 1.5; }
/* ============ Meta footer ============ */
.obs-meta-footer {
margin: 36px 0 0;
padding: 18px 22px;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
}
.obs-meta-footer dl {
margin: 0;
display: grid;
grid-template-columns: minmax(110px, max-content) 1fr;
row-gap: 6px;
column-gap: 16px;
font-size: 13px;
}
.obs-meta-footer dt {
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .06em;
align-self: center;
}
.obs-meta-footer dd { margin: 0; color: var(--obs-text); }
.obs-meta-footer dd strong { color: var(--obs-ink); }
/* ============ Articulo card ============ */
.obs-articulo-card {
display: block;
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 16px 18px;
text-decoration: none;
color: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.obs-articulo-card:hover {
border-color: var(--obs-coral-soft);
box-shadow: var(--obs-shadow-md);
transform: translateY(-1px);
}
.obs-articulo-card__chip {
display: inline-block;
font-family: var(--obs-mono);
font-size: 10px;
font-weight: 600;
color: var(--obs-coral);
background: var(--obs-tip-bg);
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 10px;
}
.obs-articulo-card__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--obs-ink);
line-height: 1.3;
margin: 0 0 6px;
}
.obs-articulo-card__excerpt {
font-size: 14px;
color: var(--obs-text-soft);
line-height: 1.5;
margin: 0 0 10px;
}
.obs-articulo-card__meta {
display: flex;
gap: 12px;
font-family: var(--obs-mono);
font-size: 10.5px;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .04em;
}
/* ============ Termino card ============ */
.obs-termino-card {
display: block;
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 16px;
text-decoration: none;
color: inherit;
transition: border-color .15s, box-shadow .15s;
position: relative;
overflow: hidden;
}
.obs-termino-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: var(--obs-cat-color, var(--obs-navy));
}
.obs-termino-card:hover { border-color: var(--obs-cat-color, var(--obs-coral-soft)); box-shadow: var(--obs-shadow-md); }
.obs-termino-card__cat {
display: inline-block;
font-family: var(--obs-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 5px;
color: var(--obs-cat-color, var(--obs-navy));
}
.obs-termino-card__title { font-size: 1rem; font-weight: 700; color: var(--obs-ink); margin: 0 0 4px; }
.obs-termino-card__def { font-size: 13px; color: var(--obs-text-soft); line-height: 1.45; margin: 0; }
/* ============ Categoria chip ============ */
.obs-categoria-chip,
a.obs-categoria-chip,
.obs-scope a.obs-categoria-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
background: var(--obs-cat-color, var(--obs-navy));
color: #fff;
text-decoration: none;
border: 0;
}
.obs-categoria-chip--ghost,
a.obs-categoria-chip--ghost,
.obs-scope a.obs-categoria-chip--ghost {
background: transparent;
color: var(--obs-cat-color, var(--obs-navy));
border: 1px solid var(--obs-cat-color, var(--obs-navy));
}
/* ============ Separador ============ */
.obs-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 24px 0;
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .12em;
}
.obs-separator::before,
.obs-separator::after { content: ""; flex: 1; height: 1px; background: var(--obs-border); max-width: 70px; }
.obs-separator--dots { gap: 6px; }
.obs-separator--dots::before, .obs-separator--dots::after { display: none; }
.obs-separator--dots .obs-separator__dot { width: 5px; height: 5px; background: var(--obs-coral); border-radius: 50%; display: inline-block; }
/* ============ Headings dentro del cuerpo ============ */
.obs-scope h2 {
font-size: 1.35rem;
font-weight: 800;
color: var(--obs-ink);
letter-spacing: -.01em;
margin: 32px 0 12px;
line-height: 1.25;
scroll-margin-top: calc(var(--obs-header-h) + 16px);
}
.obs-scope h3 {
font-size: 1.08rem;
font-weight: 700;
color: var(--obs-navy);
margin: 22px 0 8px;
scroll-margin-top: calc(var(--obs-header-h) + 16px);
}
.obs-scope h4 { font-size: .98rem; font-weight: 700; color: var(--obs-ink); margin: 16px 0 6px; }
.obs-scope ul, .obs-scope ol { margin: 0 0 14px 22px; }
.obs-scope li { margin-bottom: 4px; line-height: 1.55; }
.obs-scope table {
width: 100%;
border-collapse: collapse;
margin: 14px 0;
font-size: 13.5px;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
overflow: hidden;
}
.obs-scope thead { background: var(--obs-navy); color: #fff; }
.obs-scope th {
padding: 9px 13px;
text-align: left;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .05em;
}
.obs-scope td { padding: 9px 13px; border-top: 1px solid var(--obs-border); vertical-align: top; }
.obs-scope tbody tr:nth-child(even) { background: var(--obs-bg-soft); }
/* =========================================================================
* BARRA SECUNDARIA DEL OBSERVATORIO (obs-bar)
* ---------------------------------------------------------------------------
* Se inserta DEBAJO de la cabecera corporativa de Ciberaula.
* Patron similar al .biblia-bar pero con identidad propia (navy + coral).
* Incluye breadcrumbs internos y nav del observatorio.
* ========================================================================= */
.obs-bar {
background: linear-gradient(90deg, #102A4A 0%, #1B2A4A 100%);
padding: 11px 24px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.obs-bar__icon {
width: 28px;
height: 28px;
background: var(--obs-coral);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.obs-bar__icon svg { width: 16px; height: 16px; color: #fff; }
.obs-bar__title {
color: rgba(255, 255, 255, .92);
font-size: 13px;
font-weight: 600;
letter-spacing: .2px;
}
.obs-bar__title strong { color: #fff; font-weight: 800; }
.obs-bar__title em {
color: var(--obs-coral);
font-style: normal;
font-weight: 600;
font-family: var(--obs-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
margin-left: 4px;
}
.obs-bar__nav {
margin-left: auto;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.obs-bar__nav a {
color: rgba(255, 255, 255, .72);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
padding: 5px 11px;
border-radius: 6px;
transition: background .15s, color .15s;
}
.obs-bar__nav a:hover {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.obs-bar__nav a.is-active {
background: var(--obs-coral);
color: #fff;
}
@media (max-width: 700px) {
.obs-bar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
}
.obs-bar__nav {
margin-left: 0;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.obs-bar__nav a { white-space: nowrap; }
}
/* Breadcrumb opcional debajo de la barra */
.obs-breadcrumb {
background: #fff;
border-bottom: 1px solid var(--obs-border);
padding: 10px 24px;
font-size: 13px;
color: var(--obs-muted);
}
.obs-breadcrumb__inner {
max-width: var(--obs-max-w);
margin: 0 auto;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.obs-breadcrumb a {
color: var(--obs-muted);
text-decoration: none;
}
.obs-breadcrumb a:hover { color: var(--obs-navy); }
.obs-breadcrumb .sep { opacity: .4; }
.obs-breadcrumb .current {
color: var(--obs-text);
font-weight: 600;
}
/* =========================================================================
* LAYOUTS — 2 columnas (listados) y 3 columnas (artículos)
* ========================================================================= */
/* Contenedor maestro de página con sidebar */
.obs-shell {
max-width: var(--obs-max-w);
margin: 0 auto;
padding: 28px 0 40px;
display: grid;
gap: var(--obs-gap);
}
/* Variante 2 columnas: sidebar + contenido (listados, glosario, comparador, portada) */
.obs-shell--list {
grid-template-columns: var(--obs-sidebar-w) 1fr;
}
/* Variante 3 columnas: sidebar + cuerpo + auxiliar (artículos individuales) */
.obs-shell--article {
grid-template-columns: var(--obs-sidebar-w) minmax(0, var(--obs-content-w)) var(--obs-aux-w);
justify-content: center;
}
/* Sidebar y aux son sticky para acompañar el scroll */
.obs-sidebar,
.obs-aux {
position: sticky;
top: calc(var(--obs-header-h) + 16px);
align-self: start;
max-height: calc(100vh - var(--obs-header-h) - 32px);
overflow-y: auto;
}
/* Contenido principal */
.obs-main { min-width: 0; }
/* Responsive: bajo 1100px, el aux se va abajo */
@media (max-width: 1199px) {
.obs-shell--article { grid-template-columns: var(--obs-sidebar-w) minmax(0, 1fr); }
.obs-aux {
grid-column: 1 / -1;
position: static;
max-height: none;
margin-top: 32px;
}
}
/* Bajo 900px todo se apila */
@media (max-width: 900px) {
.obs-shell--list,
.obs-shell--article { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
.obs-sidebar { position: static; max-height: none; }
}
/* =========================================================================
* SIDEBAR — componentes
* ========================================================================= */
.obs-sidebar__block {
/* 2026-05-01: bloque sin contenedor (la rayita vertical ya separa) */
padding: 14px 0;
margin-bottom: 22px;
text-align: left;
}
.obs-sidebar__block:last-child { margin-bottom: 0; }
.obs-sidebar__heading {
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 12px;
text-align: left;
display: block;
}
.obs-sidebar__heading-count {
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: 999px;
padding: 1px 8px;
font-size: 10px;
color: var(--obs-text);
}
/* Switcher tipo pestañas (Bloques / A-Z) */
.obs-tabs {
display: flex;
gap: 4px;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: 8px;
padding: 3px;
margin-bottom: 12px;
}
.obs-tabs button {
flex: 1;
background: transparent;
border: 0;
padding: 6px 8px;
font-size: 12px;
font-weight: 600;
color: var(--obs-text-soft);
border-radius: 5px;
cursor: pointer;
font-family: var(--obs-font);
transition: background .15s, color .15s;
}
.obs-tabs button.is-active {
background: var(--obs-navy);
color: #fff;
}
/* Buscador en sidebar */
.obs-search {
position: relative;
margin-bottom: 10px;
}
.obs-search input {
width: 100%;
padding: 8px 10px 8px 30px;
border: 1px solid var(--obs-border);
border-radius: 7px;
font-family: var(--obs-font);
font-size: 13px;
background: #fff;
color: var(--obs-text);
outline: none;
transition: border-color .15s;
}
.obs-search input:focus { border-color: var(--obs-coral); }
.obs-search svg {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--obs-muted);
pointer-events: none;
}
/* Lista de categorías / secciones del sidebar */
.obs-sidelist { list-style: none; padding: 0; margin: 0; }
.obs-sidelist li { margin: 0; }
.obs-sidelist a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 8px;
font-size: 13px;
color: var(--obs-text);
text-decoration: none;
border-radius: 6px;
transition: background .15s, color .15s;
}
.obs-sidelist a:hover { background: var(--obs-cream); color: var(--obs-ink); }
.obs-sidelist a.is-active {
background: var(--obs-navy);
color: #fff;
}
.obs-sidelist a.is-active .obs-sidelist__num,
.obs-sidelist a.is-active .obs-sidelist__dot,
.obs-sidelist a.is-active .obs-sidelist__count { color: #fff; }
.obs-sidelist__num {
font-family: var(--obs-mono);
font-size: 10.5px;
color: var(--obs-muted);
font-weight: 600;
flex-shrink: 0;
width: 18px;
}
.obs-sidelist__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--obs-cat-color, var(--obs-coral));
flex-shrink: 0;
}
.obs-sidelist__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-sidelist__count {
font-family: var(--obs-mono);
font-size: 10.5px;
color: var(--obs-muted);
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: 999px;
padding: 0 7px;
flex-shrink: 0;
}
.obs-sidelist a.is-active .obs-sidelist__count { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
/* TOC dentro del sidebar (artículos) */
.obs-toc { list-style: none; padding: 0; margin: 0; }
.obs-toc li { margin: 0; }
.obs-toc a {
display: block;
padding: 5px 10px 5px 14px;
margin-left: -2px;
font-size: 12.5px;
line-height: 1.4;
color: var(--obs-text-soft);
text-decoration: none;
transition: color .15s, border-color .15s;
}
.obs-toc a:hover { color: var(--obs-ink); }
.obs-toc a.is-active {
color: var(--obs-coral);
font-weight: 600;
}
.obs-toc__sub a { padding-left: 26px; font-size: 12px; color: var(--obs-muted); }
/* =========================================================================
* AUX — columna auxiliar derecha (artículos)
* ========================================================================= */
.obs-aux__block {
background: #fff;
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 16px;
margin-bottom: 14px;
}
.obs-aux__block:last-child { margin-bottom: 0; }
.obs-aux__heading {
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 10px;
}
/* Lista compacta de fuentes en aux */
.obs-aux__sources { list-style: none; padding: 0; margin: 0; }
.obs-aux__sources li { padding: 8px 0; border-top: 1px solid var(--obs-border); font-size: 12.5px; line-height: 1.45; }
.obs-aux__sources li:first-child { border-top: 0; padding-top: 0; }
.obs-aux__sources a { color: var(--obs-navy); text-decoration: none; font-weight: 600; }
.obs-aux__sources a:hover { color: var(--obs-coral); text-decoration: underline; }
.obs-aux__sources small { display: block; color: var(--obs-muted); font-size: 11px; margin-top: 2px; }
/* CTA "Si quieres formarte en esto" */
.obs-aux__cta {
background: linear-gradient(135deg, #1B2A4A 0%, #2A3D5F 100%);
color: #fff;
border-radius: var(--obs-radius);
padding: 16px 18px;
border: 0;
}
.obs-aux__cta h4 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.obs-aux__cta p { color: #D4D4D8; font-size: 12.5px; margin: 0 0 10px; line-height: 1.45; }
.obs-aux__cta a {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--obs-coral);
color: #fff;
text-decoration: none;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
transition: background .15s;
}
.obs-aux__cta a:hover { background: #D2694D; }
/* =========================================================================
* Layout helpers genéricos
* ========================================================================= */
.obs-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.obs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) {
.obs-grid-2, .obs-grid-3 { grid-template-columns: 1fr; }
}
/* Cabecera de sección/listado compacta */
.obs-section-head {
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--obs-border);
}
.obs-section-head__chip {
display: inline-block;
font-family: var(--obs-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--obs-coral);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 6px;
}
.obs-section-head__title {
font-size: 1.6rem;
font-weight: 800;
color: var(--obs-ink);
margin: 0 0 6px;
letter-spacing: -.01em;
line-height: 1.2;
}
.obs-section-head__sub {
font-size: .98rem;
color: var(--obs-text-soft);
margin: 0;
line-height: 1.5;
max-width: 720px;
}
/* Stats horizontales compactos (tipo cabecera del glosario FUNDAE) */
.obs-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 18px;
background: var(--obs-cream);
border: 1px solid var(--obs-border);
border-radius: var(--obs-radius);
padding: 14px 18px;
margin-bottom: 22px;
}
.obs-stats-row__item { text-align: center; }
.obs-stats-row__num {
font-family: var(--obs-mono);
font-size: 1.7rem;
font-weight: 700;
color: var(--obs-coral);
line-height: 1;
}
.obs-stats-row__label {
font-family: var(--obs-mono);
font-size: 10px;
font-weight: 600;
color: var(--obs-muted);
text-transform: uppercase;
letter-spacing: .08em;
margin-top: 4px;
}
/* =========================================================================
* RESET ESTRUCTURAL DEL OBSERVATORIO (canon, no parche)
* -------------------------------------------------------------------------
* Esto debe ir al final del archivo para garantizar que se aplica
* después de cualquier CSS heredado del sitio principal (estilo.min.css,
* identidad-corporativa.css, etc.) y antes de futuras secciones añadidas.
*
* Tres reglas, cada una con su razón:
*
* 1. box-sizing global dentro del wrapper. Sin esto, los .obs-bar y
* .obs-breadcrumb (que tienen padding lateral) desbordan el wrapper
* en ~48px y rompen el ancho de la cabecera en pantallas anchas.
*
* 2. Forzar display:grid en .obs-shell con !important. El CSS heredado
* del sitio principal aplica reglas de display sobre genéricos
* (probablemente vía resets de Bootstrap residual) que sobreescriben
* nuestra grid. Esto la blinda.
*
* 3. Reset de margin global y width:100% en wrapper. Garantiza que el
* wrapper ocupa exactamente 1150px sin que ningún margen heredado
* lo comprima.
* ========================================================================= */
/* 1. box-sizing universal dentro del observatorio */
body.obs-page,
body.obs-page *,
body.obs-page *::before,
body.obs-page *::after {
box-sizing: border-box;
}
/* 2. Wrapper con ancho exacto + padding lateral interno
* Las columnas del shell respiran 28px a cada lado del wrapper.
* El wrapper sigue midiendo 1150px exactos (box-sizing: border-box arriba),
* así que el contenido útil queda en 1094px.
* La cabecera y obs-bar tienen su propio padding interno (definido en
* cabecera-nueva.css y observatorio.css respectivamente) y no se ven afectadas. */
body.obs-page .obs-page-wrapper {
width: 100%;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
padding: 0;
}
/* Padding lateral solo para el cuerpo (entre obs-bar y pie),
no para la cabecera ni la barra de navegación que ocupan todo el wrapper */
body.obs-page .obs-scope {
padding-left: 28px;
padding-right: 28px;
}
body.obs-page .obs-breadcrumb {
padding-left: 28px;
padding-right: 28px;
}
/* 3. Shell con grid blindada contra cualquier override */
body.obs-page .obs-shell {
display: grid !important;
width: 100%;
}
body.obs-page .obs-shell--list {
grid-template-columns: var(--obs-sidebar-w) 1fr !important;
}
body.obs-page .obs-shell--article {
grid-template-columns: var(--obs-sidebar-w) minmax(0, var(--obs-content-w)) var(--obs-aux-w) !important;
}
@media (max-width: 1199px) {
body.obs-page .obs-shell--article {
grid-template-columns: var(--obs-sidebar-w) minmax(0, 1fr) !important;
}
}
@media (max-width: 900px) {
body.obs-page .obs-shell--list,
body.obs-page .obs-shell--article {
grid-template-columns: 1fr !important;
}
}
/* 4. obs-bar y obs-breadcrumb: ancho del wrapper, padding interno seguro */
body.obs-page .obs-bar,
body.obs-page .obs-breadcrumb {
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════
OBS-ARTICULO-CUERPO · tipografia para el cuerpo HTML de los articulos
Aplicado a /analisis/, /comparativas/, /casos/, /cumplimiento/
Anadido: 27 abril 2026
═══════════════════════════════════════════════════════════════════ */
.obs-articulo-cuerpo {
font-size: 16px;
line-height: 1.7;
color: var(--obs-ink);
margin-top: 24px;
}
.obs-articulo-cuerpo p {
margin: 0 0 18px 0;
line-height: 1.7;
}
.obs-articulo-cuerpo p.lead-articulo {
font-size: 17.5px;
line-height: 1.65;
color: var(--obs-ink);
font-weight: 400;
margin-bottom: 24px;
border-left: 3px solid var(--obs-cat-color, var(--obs-coral));
padding-left: 18px;
}
.obs-articulo-cuerpo h2 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.3;
color: var(--obs-ink);
margin: 40px 0 16px 0;
padding-top: 16px;
scroll-margin-top: 80px;
}
.obs-articulo-cuerpo h2:first-child {
margin-top: 8px;
}
.obs-articulo-cuerpo h3 {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.35;
color: var(--obs-ink);
margin: 28px 0 12px 0;
}
.obs-articulo-cuerpo ul,
.obs-articulo-cuerpo ol {
margin: 0 0 20px 0;
padding-left: 24px;
}
.obs-articulo-cuerpo li {
margin-bottom: 8px;
line-height: 1.65;
}
.obs-articulo-cuerpo li > ul,
.obs-articulo-cuerpo li > ol {
margin-top: 8px;
margin-bottom: 0;
}
.obs-articulo-cuerpo strong {
color: var(--obs-ink);
font-weight: 700;
}
.obs-articulo-cuerpo em {
font-style: italic;
color: var(--obs-text-soft);
}
.obs-articulo-cuerpo a {
color: var(--obs-coral);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.obs-articulo-cuerpo a:hover {
color: var(--obs-ink);
}
.obs-articulo-cuerpo blockquote {
margin: 24px 0;
padding: 16px 20px;
border-left: 4px solid var(--obs-cat-color, var(--obs-coral));
background: #fafafa;
font-style: italic;
color: var(--obs-text-soft);
}
.obs-articulo-cuerpo code {
background: #f4f4f5;
padding: 2px 6px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.9em;
color: var(--obs-ink);
}
@media (max-width: 720px) {
.obs-articulo-cuerpo { font-size: 15.5px; }
.obs-articulo-cuerpo h2 { font-size: 1.3rem; margin-top: 32px; }
.obs-articulo-cuerpo h3 { font-size: 1.1rem; }
.obs-articulo-cuerpo p.lead-articulo { font-size: 16px; padding-left: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════
STICKY SIDEBAR REFORZADO + LÍNEAS SEPARADORAS TIPO PERIÓDICO
Añadido: 2026-04-30 — solicitud Ana
═══════════════════════════════════════════════════════════════════ */
/* 1. Reforzar sticky sin max-height para que la sidebar acompañe al scroll
en toda la altura del documento (apto cuando la sidebar es más corta
que la columna central, que es el caso habitual de los artículos). */
body.obs-page .obs-sidebar,
body.obs-page .obs-aux {
position: sticky !important;
top: 16px !important;
align-self: start !important;
max-height: none !important;
overflow: visible !important;
}
/* 2. Líneas separadoras verticales entre columnas (estilo periódico).
Se dibujan dentro del .obs-shell--article, ocupando toda su altura,
en el centro de cada gap. No roban ancho a ninguna columna. */
body.obs-page .obs-shell--article {
position: relative;
}
body.obs-page .obs-shell--article::before,
body.obs-page .obs-shell--article::after {
content: '';
position: absolute;
top: 28px;
bottom: 40px;
width: 1px;
background: var(--obs-border, #e2e0dc);
pointer-events: none;
}
/* Línea izquierda: entre sidebar y main.
sidebar=250px, gap=32px → centro del gap a 250 + 16 = 266px del borde izquierdo
del .obs-shell. Pero el shell tiene padding lateral 28px en .obs-scope, así que
trabajamos respecto al propio shell. */
body.obs-page .obs-shell--article::before {
left: calc(var(--obs-sidebar-w) + (var(--obs-gap) / 2));
}
/* Línea derecha: entre main y aux.
right = aux-w + gap/2 desde el borde derecho del shell. */
body.obs-page .obs-shell--article::after {
right: calc(var(--obs-aux-w) + (var(--obs-gap) / 2));
}
/* En layouts de 2 columnas (listados, glosario), solo una línea separadora
entre sidebar y contenido. */
body.obs-page .obs-shell--list {
position: relative;
}
body.obs-page .obs-shell--list::before {
content: '';
position: absolute;
top: 28px;
bottom: 40px;
width: 1px;
background: var(--obs-border, #e2e0dc);
pointer-events: none;
left: calc(var(--obs-sidebar-w) + (var(--obs-gap) / 2));
}
/* Bajo 1199px se oculta la columna aux y se queda solo la línea izquierda. */
@media (max-width: 1199px) {
body.obs-page .obs-shell--article::after {
display: none;
}
}
/* Bajo 900px todo se apila: ocultar las dos líneas. */
@media (max-width: 900px) {
body.obs-page .obs-shell--article::before,
body.obs-page .obs-shell--article::after,
body.obs-page .obs-shell--list::before {
display: none;
}
body.obs-page .obs-sidebar,
body.obs-page .obs-aux {
position: static !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
BLOQUE FORMACIÓN ESPECÍFICA · Ficha glosario AI Act
Aparece solo en fichas concretas del glosario donde Ciberaula tiene
formación directamente aplicable. Diferenciado del cuerpo del análisis.
Añadido: 2026-04-30
═══════════════════════════════════════════════════════════════════ */
.obs-formacion-bloque{
margin: 32px 0;
padding: 28px 28px 24px;
background: #fafaf7;
border: 1px solid var(--obs-border, #e2e0dc);
border-radius: 10px;
border-left: 3px solid var(--obs-cat-color, #1B2A4A);
}
.obs-formacion-bloque__head{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 6px;
gap: 16px;
flex-wrap: wrap;
}
.obs-formacion-bloque__label{
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--obs-cat-color, #1B2A4A);
}
.obs-formacion-bloque__nota{
font-size: 11px;
color: var(--obs-muted, #888);
font-style: italic;
}
.obs-formacion-bloque h3{
font-size: 1.15rem;
font-weight: 800;
color: var(--obs-ink, #1B2A4A);
margin: 0 0 8px;
line-height: 1.3;
letter-spacing: -.2px;
}
.obs-formacion-bloque__intro{
font-size: 14px;
color: var(--obs-text-soft, #555);
line-height: 1.6;
margin: 0 0 20px;
}
.obs-formacion-bloque__cards{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.obs-formacion-card,
.obs-formacion-card:hover,
.obs-formacion-card:visited{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--obs-border, #e2e0dc);
border-radius: 7px;
text-decoration: none !important;
color: inherit;
transition: all .2s ease;
}
.obs-formacion-card *{ text-decoration: none !important; }
.obs-formacion-card:hover{
border-color: var(--obs-cat-color, #1B2A4A);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
transform: translateY(-1px);
}
.obs-formacion-card__horas{
flex-shrink: 0;
width: 62px;
height: 54px;
background: var(--obs-cat-color, #1B2A4A);
color: #fff;
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 800;
line-height: 1;
}
.obs-formacion-card__horas strong{
font-size: 1.25rem;
display: block;
}
.obs-formacion-card__horas span{
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 3px;
opacity: .85;
}
.obs-formacion-card__body{
flex: 1;
min-width: 0;
}
.obs-formacion-card__perfil{
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--obs-coral, #c05621);
margin-bottom: 3px;
}
.obs-formacion-card__title{
font-size: 14px;
font-weight: 700;
color: var(--obs-ink, #1B2A4A);
line-height: 1.35;
margin-bottom: 2px;
}
.obs-formacion-card__desc{
font-size: 12.5px;
color: var(--obs-text-soft, #666);
line-height: 1.45;
}
.obs-formacion-card__arrow{
flex-shrink: 0;
color: var(--obs-coral, #c05621);
font-size: 18px;
font-weight: 700;
}
.obs-formacion-bloque__foot{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--obs-border, #e6e3da);
font-size: 12px;
color: var(--obs-muted, #888);
line-height: 1.5;
}
.obs-formacion-bloque__foot strong{ color: var(--obs-text-soft, #444); }
.obs-formacion-bloque__foot a{
color: var(--obs-coral, #c05621);
text-decoration: none;
font-weight: 600;
}
.obs-formacion-bloque__foot a:hover{ text-decoration: underline; }
@media (max-width: 560px){
.obs-formacion-bloque{ padding: 22px 18px; }
.obs-formacion-card{ flex-wrap: wrap; }
.obs-formacion-card__arrow{ display: none; }
}
/* === STICKY REINFORCED 2026-05-01 === */
/* Garantizar que ningún overflow ancestral rompa el position:sticky */
.obs-scope, .obs-shell, .obs-shell--list, .obs-shell--article {
overflow: visible !important;
}
/* La sidebar y aux deben ser sticky de forma robusta */
body.obs-page aside.obs-sidebar,
body.obs-page aside.obs-aux {
position: -webkit-sticky !important;
position: sticky !important;
top: 16px !important;
align-self: start !important;
max-height: calc(100vh - 32px) !important;
overflow-y: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════
OBS-MASTHEAD · Cabecera de sección V-G (amarillo pleno)
Versión 2: 2026-05-06 — sustituye la V1 azul por amarillo identitario
Patrón: section masthead con fondo amarillo del isotipo (#FFD23F),
tira azul corporativa en bordes superior e inferior, chip + wordmark
simplificado "El Observatorio · de la IA" (todas las palabras en
misma fuente Playfair italic y mismo tamaño, jerarquía solo por color)
y nav de secciones a la derecha.
═══════════════════════════════════════════════════════════════════ */
.obs-masthead {
background: #FFD23F;
border-top: 4px solid #1F3866;
border-bottom: 2px solid #1F3866;
padding: 22px 28px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
/* Bloque marca (chip + wordmark) */
.obs-masthead__brand {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.obs-masthead__chip {
width: 64px;
height: 64px;
flex-shrink: 0;
display: block;
}
.obs-masthead__chip svg {
width: 100%;
height: 100%;
display: block;
}
.obs-masthead__text {
display: flex;
align-items: baseline;
gap: 0;
flex-wrap: wrap;
min-width: 0;
}
/* TIPOGRAFÍA UNIFICADA: misma fuente, mismo tamaño, mismo peso,
en italic. La jerarquía se crea SOLO con color. */
.obs-masthead__word {
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-weight: 700;
font-size: 30px;
line-height: 1;
letter-spacing: -.3px;
white-space: nowrap;
}
/* "El Observatorio" en azul corporativo (palabra principal) */
.obs-masthead__word--main {
color: #1F3866;
margin-right: .35em;
}
/* "de la IA" en azul más profundo (acento) */
.obs-masthead__word--de {
color: #0A1428;
}
/* Navegación a la derecha */
.obs-masthead__nav {
margin-left: auto;
display: flex;
gap: 2px;
flex-wrap: wrap;
}
.obs-masthead__nav a {
color: #1F3866;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 8px 13px;
border-radius: 6px;
transition: background .15s, color .15s;
white-space: nowrap;
}
.obs-masthead__nav a:hover {
background: rgba(31, 56, 102, .15);
color: #0A1428;
}
.obs-masthead__nav a.is-active {
background: #1F3866;
color: #FFD23F;
}
/* Garantizar Playfair en wordmark sin importar override del sitio principal */
body.obs-page .obs-masthead__word {
font-family: 'Playfair Display', Georgia, serif !important;
}
/* Responsive: pantallas medianas */
@media (max-width: 900px) {
.obs-masthead {
padding: 18px 22px;
gap: 16px;
}
.obs-masthead__chip {
width: 54px;
height: 54px;
}
.obs-masthead__word { font-size: 24px; }
.obs-masthead__nav {
margin-left: 0;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
}
/* Móvil pequeño */
@media (max-width: 600px) {
.obs-masthead {
padding: 14px 16px;
}
.obs-masthead__chip { width: 48px; height: 48px; }
.obs-masthead__word { font-size: 22px; }
.obs-masthead__nav a { font-size: 11.5px; padding: 6px 10px; }
}
/* ═══════════════════════════════════════════════════════════════════
OBS-FIGURA-INFOGRAFIA · Figura inline para infografías verticales
───────────────────────────────────────────────────────────────────
Añadido: 2026-05-06 (sesión CSS · Paso 1)
Origen: promovido del