/* ============================================================================
   SIAN.CSS · Capa de identidad "El Plánol" para cintocasals.com
   ----------------------------------------------------------------------------
   Hereda la dirección de arte de SerIA Nativa (serianativa.com/css/sian.css).
   Se carga DESPUÉS de style.css y landing_v2_styles.css: aquí se corrigen
   las decisiones visuales que no dependen de los tokens (formas, marcos,
   sombras, gradientes, tipografía de etiqueta).

   Las cuatro reglas que definen la identidad:
     1. Fondo hueso con cuadrícula: la página es un plano técnico.
     2. Esquinas rectas. Ni un solo border-radius, ni una sola sombra.
     3. Un acento —óxido— y nunca más del 5% de la superficie.
     4. La jerarquía la construyen las líneas de 1px, no el color.

   No se toca ningún nombre de clase del HTML: esta hoja sólo redefine.
   ========================================================================= */

/* ---------- 1. Tipografía propia · ninguna petición a terceros ---------- */
/* IBM Plex · SIL Open Font License 1.1 · assets/fonts/LICENSE-IBM-Plex.txt */
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/plex-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/plex-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. El plano: fondo hueso con cuadrícula ---------- */
body {
    background-color: var(--os);
    background-image:
        linear-gradient(to right, var(--reixa-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--reixa-color) 1px, transparent 1px);
    background-size: var(--reixa) var(--reixa);
    background-attachment: fixed;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: var(--base-size);
    line-height: 1.6;
    color: var(--tinta);
}

/* Barrido general: nada redondeado, nada con sombra. Se escriben aquí una
   sola vez en lugar de perseguir 3.000 líneas de la hoja anterior. */
.article-card, .formacion-card, .skill-tag, .btn, button, input, textarea,
select, .info-item, .manual-img, .manual-img img, .image-wrapper,
.image-wrapper img, .hero-manual-promo, .article-image-header,
.article-image-header img, .full-article-image, .article-hero-img,
.audio-player-card, .audio-player-icon, .nav-btn, .lang-btn, .skeleton,
figure, blockquote, pre, code, table, .lead-box, .cta-box {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- 3. Cabecera ---------- */
#main-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    min-height: var(--header-height);
    background: rgba(244, 242, 237, .94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--linia);
    box-shadow: none;
}
#main-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#main-header .header-logo { max-height: 30px; width: auto; filter: saturate(0) contrast(1.15); }
#main-nav ul { gap: 1.5rem; align-items: center; }
#main-nav a {
    color: var(--tinta);
    font-size: .94rem;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
#main-nav a:hover { border-bottom-color: var(--tinta); background: none; }
#main-nav a.active { font-weight: 600; border-bottom-color: var(--oxid); }

/* Selector de idioma: cota de plano, no botonera */
.lang-separator { color: var(--linia); }
.lang-group { display: flex; gap: .55rem; align-items: center; }
.lang-btn {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--plom);
    background: none;
    border: none;
    padding: 0 .1rem;
    cursor: pointer;
    text-transform: uppercase;
}
.lang-btn:hover { color: var(--tinta); background: none; }
.lang-btn.active { color: var(--tinta); font-weight: 600; }

/* ---------- 4. Botones: rectos, macizos, sin degradado ---------- */
.btn, button.btn, a.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: .62rem 1.15rem;
    border-radius: 0;
    text-transform: none;
    transition: var(--transition-standard);
}
.btn-primary, .btn.btn-primary {
    background: var(--oxid);
    color: #fff !important;
    border: 1px solid var(--oxid);
}
.btn-primary:hover, .btn.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: none;
}
.btn-outline, .btn.btn-outline {
    background: transparent;
    color: var(--tinta) !important;
    border: 1px solid var(--tinta);
}
.btn-outline:hover, .btn.btn-outline:hover {
    background: var(--tinta);
    color: var(--os) !important;
    transform: none;
}
.btn-text {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--plom);
    background: none;
    border: none;
    padding: 0;
}
.btn-text:hover { color: var(--oxid); background: none; }

/* ---------- 5. Cotas: la etiqueta mono en versal, marca de la casa ---------- */
.hero-greeting,
.section-header > p:first-of-type.kicker,
.article-meta,
.full-article-meta,
.manual-tag,
.formacion-link,
.article-footer {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plom);
}

/* ---------- 6. Portada ---------- */
/* La hoja anterior forzaba min-height: 100vh en la portada, lo que dejaba
   un hueco muerto bajo el bloque. Aquí la altura la marca el contenido. */
#inicio {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    min-height: 0 !important;
}
.hero-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start !important;
    gap: clamp(2rem, 5vw, 4rem);
    min-height: 0 !important;
}
.hero-text { max-width: 46rem; }
.hero-greeting { margin-bottom: .9rem; display: block; }
.hero-name {
    font-size: var(--h1-size);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--tinta);
    max-width: 19ch;
    margin: 0 0 .6rem;
}
.hero-title {
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--tinta);
    letter-spacing: -.01em;
    margin: 0 0 1.1rem;
    max-width: 26ch;
}
.hero-title::after { display: none; }
.hero-description {
    font-size: 1.15rem;
    color: var(--plom);
    max-width: 52ch;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

/* Las tres pruebas: una retícula de acotaciones, como las de un plano.
   La hoja anterior las montaba en flex con viñetas redondas y monoespaciada;
   aquí pasan a ser tres celdas iguales separadas por línea de 1px. */
.hero-proof {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    align-items: stretch;
    gap: 1px !important;
    padding: 0 !important;
    background: var(--linia);
    border: 1px solid var(--linia) !important;
    font-family: var(--font-sans) !important;
    font-size: .87rem !important;
    letter-spacing: 0 !important;
    color: var(--plom) !important;
    white-space: normal;
    margin-bottom: 2.4rem;
}
.hero-proof span {
    display: block !important;
    background: var(--os);
    padding: .95rem 1.05rem;
    font-size: .87rem;
    color: var(--plom);
    line-height: 1.5;
    white-space: normal !important;
    gap: 0 !important;
}
.hero-proof span::before { display: none !important; content: none !important; }
.hero-proof strong { color: var(--tinta); font-weight: 600; }

/* Promo del manual: ficha con marco, no tarjeta flotante */
.hero-manual-promo {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    border: 1px solid var(--linia);
    background: #FBFAF7;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: var(--tinta);
    transition: var(--transition-standard);
}
.hero-manual-promo:hover { border-color: var(--tinta); transform: none; background: #FBFAF7; }
.hero-manual-promo .manual-img { flex: 0 0 62px; border: 1px solid var(--linia); }
.hero-manual-promo .manual-img img { display: block; width: 100%; height: auto; }
.manual-tag {
    display: inline-block;
    background: none;
    color: var(--oxid);
    padding: 0;
    font-size: .68rem;
    letter-spacing: .18em;
    margin-bottom: .35rem;
}
.manual-desc { font-size: .95rem; color: var(--tinta); margin: 0 0 .35rem; }
.manual-link { font-size: .85rem; color: var(--oxid); font-weight: 600; }
.manual-link i { margin-left: .3rem; }

/* Retrato: un marco de 1px y nada más. La hoja anterior lo metía en una caja
   de altura fija con fondo gris, lo pasaba a blanco y negro y le aplicaba
   mix-blend-mode, lo que dejaba una banda gris bajo la fotografía. */
.hero-image .image-wrapper {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: auto !important;
    background: none !important;
    border: 1px solid var(--linia);
    overflow: hidden;
}
.hero-image .image-wrapper::before,
.hero-image .image-wrapper::after { display: none !important; content: none !important; }
.hero-image .tech-decoration { display: none !important; }
.hero-image .image-wrapper img,
.hero-image img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: cover;
    filter: saturate(.72) contrast(1.05) !important;
    mix-blend-mode: normal !important;
}

.social-links { display: flex; gap: 1.1rem; margin-top: 1.6rem; }
.social-links a { color: var(--plom); font-size: 1.15rem; }
.social-links a:hover { color: var(--oxid); }

/* ---------- 7. Secciones y titulares ---------- */
.view, section.view {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--linia);
}
section.view:last-of-type { border-bottom: none; }
#inicio { border-bottom: 1px solid var(--linia); }

/* Cabeceras de sección: alineadas a la izquierda, como el resto del plano.
   La hoja anterior las centraba y les colgaba un subrayado decorativo. */
.section-header {
    margin: 0 0 2.4rem !important;   /* la hoja anterior la centraba con margin:auto */
    max-width: none !important;
    text-align: left !important;
}
.section-header h2 {
    font-size: var(--h2-size);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--tinta);
    max-width: 24ch;
    margin: 0 0 .9rem !important;
    text-align: left !important;
}
.section-header h2::after, .section-header h2::before { display: none !important; content: none !important; }
.section-header p {
    color: var(--plom);
    max-width: 62ch;
    font-size: 1.02rem;
    margin: 0 !important;
    text-align: left !important;
}

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; color: var(--tinta); }
h3 { font-size: var(--h3-size); letter-spacing: -.005em; }
p { max-width: var(--measure); }

/* Enlaces de contenido: tinta con subrayado óxido. Nunca el azul del navegador. */
main a:not(.btn):not(.article-card):not(.formacion-card):not(.hero-manual-promo):not(.nav-btn):not(.social-links a) {
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--oxid);
}
main a:not(.btn):not(.article-card):not(.formacion-card):not(.hero-manual-promo):not(.nav-btn):hover {
    background: #EFEBE2;
}

/* ---------- 8. Etiquetas de competencia ---------- */
.skills-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.skill-tag {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plom);
    background: transparent;
    border: 1px solid var(--linia);
    padding: .34rem .7rem;
}
.skill-tag:hover { border-color: var(--tinta); color: var(--tinta); background: transparent; }

/* ---------- 9. Rejilla de artículos ---------- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1px;
    background: var(--linia);
    border: 1px solid var(--linia);
    margin-top: 2.2rem;
}
.article-card {
    background: var(--os);
    border: none;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: background-color .18s linear;
}
.article-card:hover { transform: none; background: #FBFAF7; }

/* La lámina: proporción fija 16:9 para las 62 portadas, como en el plano */
.article-image-header {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--linia);
    background: var(--reixa-color);
}
.article-image-header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Velo mínimo: unifica portadas de orígenes distintos sin taparlas */
.article-image-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18,22,26,0) 55%, rgba(18,22,26,.14) 100%);
    pointer-events: none;
}

.article-card .article-body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.article-card .article-meta { margin-bottom: .7rem; font-size: .7rem; letter-spacing: .14em; }
.article-card .article-meta i { color: var(--oxid); margin-right: .35rem; }
.article-card .article-title { margin: 0 0 .6rem; font-size: 1.08rem; line-height: 1.28; font-weight: 600; }
/* El titular de la ficha no lleva subrayado: la ficha entera ya es el enlace */
.article-card .article-title a,
.article-card a[data-link-article] {
    color: var(--tinta) !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
}
.article-card:hover .article-title a { color: var(--oxid) !important; }

/* Extracto a tres líneas exactas: así todas las fichas de una fila acaban
   el pie a la misma altura, que es lo que sostiene la retícula. */
.article-card .article-excerpt {
    font-size: .93rem;
    color: var(--plom) !important;
    line-height: 1.55;
    margin: 0 0 1.2rem !important;
    flex: 0 0 auto;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}
/* margin-top:auto empuja el pie al fondo: los pies de una misma fila quedan
   a la misma altura aunque los titulares ocupen dos o tres líneas. */
.article-card .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: auto;
    padding-top: .85rem;
    border-top: 1px solid var(--linia);
    font-size: .7rem;
    letter-spacing: .14em;
}
.article-card .article-footer span:last-child { color: var(--oxid); font-weight: 600; }
.article-card .article-footer i { margin-left: .3rem; }

/* ---------- 10. Formación ---------- */
#formacion-ia .formacion-grid {
    gap: 1px !important;
    background: var(--linia);
    border: 1px solid var(--linia);
    margin-top: 2.2rem !important;
}
#formacion-ia .formacion-card {
    background: var(--os) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.7rem 1.5rem !important;
}
#formacion-ia .formacion-card:hover {
    transform: none !important;
    background: #FBFAF7 !important;
    border-color: transparent !important;
}
#formacion-ia .formacion-icon { color: var(--oxid) !important; font-size: 1.05rem !important; margin-bottom: 1rem !important; }
#formacion-ia .formacion-card h3 { font-size: 1.05rem !important; line-height: 1.3 !important; }
#formacion-ia .formacion-card p { font-size: .93rem !important; color: var(--plom) !important; }
#formacion-ia .formacion-link {
    font-family: var(--font-mono);
    font-size: .72rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oxid) !important;
}

/* ---------- 11. El artículo ---------- */
/* Todo el artículo se alinea a la izquierda: es un documento técnico, no un
   cartel. La hoja anterior centraba titular y fecha. */
.article-container { max-width: 780px; }
.article-container,
.article-main-content,
.article-ssr,
.full-article-header,
.full-article-title,
.full-article-meta,
.article-date,
.article-lead { text-align: left !important; }

#back-to-articles { margin-bottom: 2.2rem; display: inline-block; }

.full-article-header, .article-ssr > h1 { margin-bottom: 1.2rem; }
.full-article-title, .article-ssr h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.022em;
    max-width: 24ch;
    margin: 0 0 .9rem !important;
}
.full-article-title::after, .article-ssr h1::after { display: none; }
.full-article-meta, .article-date {
    display: block;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plom);
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--linia);
    margin: 0 0 2rem;
}
.full-article-meta i { color: var(--oxid); margin-right: .4rem; }

/* La lámina de apertura: marco de 1px, como toda figura de la casa */
.full-article-image, .article-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--linia);
    margin: 0 0 2.2rem;
}

.article-lead {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--tinta);
    border-left: 2px solid var(--oxid);
    padding-left: 1.4rem;
    margin: 0 0 2.4rem;
    max-width: 60ch;
}
.article-lead strong { font-weight: 400; }

/* Cuerpo: medida de lectura corta, jerarquía por línea, nunca por color.
   El texto del artículo va en tinta plena: la hoja anterior lo dejaba en
   gris secundario y bajaba el contraste por debajo de AA. */
.markdown-content, .article-ssr .article-body {
    font-size: 1.06rem;
    line-height: 1.68;
    color: var(--tinta) !important;
}
.markdown-content p, .markdown-content li,
.article-ssr .article-body p, .article-ssr .article-body li {
    color: var(--tinta) !important;
}
.markdown-content > *, .article-ssr .article-body > * { max-width: 66ch; }

/* Filete sobre cada apartado: marca la división como en una lámina.
   Recorre toda la columna de lectura, no sólo el ancho del titular. */
.markdown-content h2, .article-ssr .article-body h2 {
    font-size: 1.5rem;
    line-height: 1.22;
    margin: 2.9rem 0 1rem !important;
    padding-top: 1.7rem;
    border-top: 1px solid var(--linia);
    max-width: 66ch;
    text-align: left;
}
.markdown-content h2::after, .article-ssr .article-body h2::after { display: none; }
.markdown-content h3, .article-ssr .article-body h3 {
    font-size: 1.16rem;
    font-weight: 600 !important;   /* si no, se confunde con el cuerpo */
    color: var(--tinta) !important;
    line-height: 1.3;
    margin: 2rem 0 .7rem !important;
    max-width: 50ch;
    text-align: left;
}
.markdown-content p, .article-ssr .article-body p { margin-bottom: 1.15rem; }

/* Listas: con su viñeta y su sangría, no flotando sin marca */
.markdown-content ul, .article-ssr .article-body ul { list-style: disc outside; }
.markdown-content ol, .article-ssr .article-body ol { list-style: decimal outside; }
.markdown-content ul, .markdown-content ol,
.article-ssr .article-body ul, .article-ssr .article-body ol {
    margin: 0 0 1.4rem 0 !important;
    padding-left: 1.35rem;
    max-width: 64ch;
}
.markdown-content li, .article-ssr .article-body li {
    display: list-item !important;
    margin-bottom: .5rem;
    padding-left: .2rem;
}
.markdown-content li::marker, .article-ssr .article-body li::marker { color: var(--oxid); }
.markdown-content li::before, .article-ssr .article-body li::before { content: none !important; }
.markdown-content img, .article-ssr .article-body img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--linia);
    margin: 2.2rem 0;
}
.markdown-content blockquote, .article-ssr .article-body blockquote {
    border-left: 2px solid var(--oxid);
    background: #FBFAF7;
    padding: 1.1rem 0 1.1rem 1.4rem;
    margin: 2rem 0;
    color: var(--tinta);
    font-style: normal;
    max-width: 62ch;
}
.markdown-content code, .article-ssr .article-body code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: #EFEBE2;
    padding: .1em .35em;
    color: var(--tinta);
}
.markdown-content pre, .article-ssr .article-body pre {
    background: var(--profunda);
    color: var(--text-on-inverse);
    border: none;
    padding: 1.2rem 1.3rem;
    overflow-x: auto;
    margin: 2rem 0;
    max-width: 100%;
}
.markdown-content pre code { background: none; color: inherit; }
.markdown-content hr, .article-ssr .article-body hr {
    border: none;
    border-top: 1px solid var(--linia);
    margin: 2.6rem 0;
}
.markdown-content table, .article-ssr .article-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: .94rem;
    margin: 2rem 0;
    background: var(--os);
}
.markdown-content th { text-align: left; font-weight: 600; border-bottom: 1.5px solid var(--tinta); padding: .7rem .8rem; }
.markdown-content td { border-bottom: 1px solid var(--linia); padding: .7rem .8rem; vertical-align: top; }

/* Bloque GEO: se ve que es una nota de máquina, no el texto del autor */
.article-geo {
    border: 1px solid var(--linia);
    background: #FBFAF7;
    padding: 1.2rem 1.4rem;
    margin: 2.4rem 0;
    font-size: .95rem;
    color: #2A3036;
    max-width: 70ch;
}

/* Navegación anterior/siguiente */
.article-navigation {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
    gap: 1px !important;
    padding: 0 !important;        /* el relleno heredado dejaba una franja gris */
    background: var(--linia);
    border: 1px solid var(--linia) !important;
    margin: 3.2rem 0 0 !important;
}
.nav-btn {
    background: var(--os);
    border: none;
    padding: 1.2rem 1.3rem;
    text-align: left;
    cursor: pointer;
    color: var(--tinta);
    font-family: var(--font-sans);
    font-size: .95rem;
    line-height: 1.4;
    text-decoration: none;
}
.nav-btn:hover { background: #FBFAF7; }

/* Reproductor de audio: se hereda del artículo, sin el turquesa antiguo */
.audio-player-card {
    background: #FBFAF7 !important;
    border: 1px solid var(--linia) !important;
}
.audio-player-card:hover { border-color: var(--tinta) !important; }
.audio-player-icon { background: var(--reixa-color) !important; color: var(--oxid) !important; }
.audio-player-title { color: var(--tinta) !important; }
.audio-player-sub { color: var(--plom) !important; font-family: var(--font-mono); letter-spacing: .14em !important; }
.audio-player-control { accent-color: var(--oxid) !important; }

/* ---------- 12. Contacto ---------- */
.contact-form label, .contact-form .form-label {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plom);
}
.contact-form input, .contact-form textarea, .contact-form select {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--tinta);
    padding: .75rem .85rem;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--tinta);
    box-shadow: none;
}
.info-item { border: none; background: none; padding-left: 0; }
.info-item i { color: var(--oxid); }

/* ---------- 13. Pie ---------- */
#main-footer {
    background: var(--os);
    border-top: 1px solid var(--tinta);
    color: var(--plom);
    font-size: .88rem;
    padding: 3.2rem 0;
}
#main-footer a { color: var(--plom); border-bottom: 1px solid transparent; }
#main-footer a:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- 13 bis. Banner de cookies ---------- */
/* Era una caja azul flotante con sombra. Pasa a ser una barra de tinta
   pegada al borde: informa, no interrumpe la composición. */
#cookie-banner {
    background: var(--profunda) !important;
    border: none !important;
    border-top: 2px solid var(--oxid) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-on-inverse) !important;
    font-size: .88rem !important;
}
#cookie-banner a, #cookie-banner a.open-privacy {
    color: #E8E5DE !important;
    border-bottom: 1px solid var(--oxid) !important;
}
#cookie-banner button {
    border-radius: 0 !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    padding: .58rem 1.1rem !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}
/* Aceptar: acento óxido. Rechazar: contorno claro, mismo peso visual. */
#cookie-banner button.accept, #cookie-banner .btn-accept,
#cookie-banner button[id*="accept"], #cookie-banner button[class*="accept"] {
    background: var(--oxid) !important;
    color: #fff !important;
    border-color: var(--oxid) !important;
}
#cookie-banner button.reject, #cookie-banner .btn-reject,
#cookie-banner button[id*="reject"], #cookie-banner button[class*="reject"],
#cookie-banner button[id*="decline"], #cookie-banner button[class*="decline"] {
    background: transparent !important;
    color: var(--text-on-inverse) !important;
    border-color: rgba(237, 234, 227, .45) !important;
}

/* ---------- 14. Esqueletos de carga: cuadrícula, no gelatina ---------- */
.skeleton {
    background: var(--reixa-color);
    border-radius: 0;
    animation: sian-pulse 1.6s ease-in-out infinite;
}
.article-card.skeleton { min-height: 340px; }
@keyframes sian-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* ---------- 15. Responsivo ---------- */
@media (max-width: 900px) {
    /* minmax(0,1fr) y no 1fr: un elemento de rejilla no baja por defecto del
       ancho mínimo de su contenido, y eso es lo que empujaba la portada
       fuera de la pantalla en el móvil. */
    .hero-container { grid-template-columns: minmax(0, 1fr) !important; }
    .hero-text { min-width: 0; max-width: 100%; }
    .hero-image { max-width: 320px; }
    .hero-image .image-wrapper { max-width: 320px; }

    .hero-actions { flex-wrap: wrap !important; }
    .hero-actions .btn { flex: 1 1 12rem; text-align: center; }

    .hero-proof { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .hero-manual-promo { flex-wrap: wrap; }
    .hero-manual-promo .manual-text { min-width: 0; flex: 1 1 12rem; }

    /* Regla general: ningún hijo de rejilla o flexbox bloquea el encogido */
    .articles-grid > *, .article-navigation > *,
    #formacion-ia .formacion-grid > *, .hero-proof > * { min-width: 0; }
}
@media (max-width: 620px) {
    .hero-proof { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    body { --reixa: 40px; }
    #main-header .header-content { padding-top: .8rem; padding-bottom: .8rem; }
    .articles-grid { grid-template-columns: 1fr; }
    .article-lead { font-size: 1.08rem; padding-left: 1.1rem; }
    .full-article-title, .article-ssr h1 { max-width: none; }
    .hero-name, .section-header h2 { max-width: none; }
    #menu-toggle { color: var(--tinta); }

    /* Cajón de navegación: hueso, no blanco, y con el filete de la casa */
    #main-nav {
        background-color: rgba(244, 242, 237, .985) !important;
        border-left: 1px solid var(--linia);
    }
    #main-nav a { color: var(--tinta); font-weight: 400; }
    #main-nav a.active { color: var(--oxid); font-weight: 600; }
    #main-nav .lang-btn { font-size: 1rem; }
}

/* El cajón vive fuera de la pantalla (right:-100%): sin esto, en algunos
   navegadores móviles genera scroll horizontal en toda la página. */
@media (max-width: 900px) {
    html, body { overflow-x: hidden; }
}

/* ---------- 16. Accesibilidad ---------- */
/* El plomo se usa en texto de lectura (extractos, fechas, pies de figura),
   así que va al valor que cumple AA. El plomo claro original queda para lo
   que no es texto: iconos, filetes y separadores. */
.article-card .article-meta i, .full-article-meta i,
.social-links a, .info-item i { color: var(--oxid); }
.hero-proof span, .article-card .article-excerpt, .section-header p,
.figcaption, figcaption, #main-footer, .legal { color: var(--plom); }

:focus-visible { outline: 2px solid var(--oxid); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Coherencia: quien vende gobierno del dato no monta una web que presuma
   de efectos. Aquí no hay ni una sombra ni un degradado decorativo. */