/* =========================================================================
   Spanda Editorial — propuesta de diseño (28-10-2026)
   Tipografía: Alegreya (texto), Alegreya SC (siglas en versalitas),
   Alegreya Sans y Alegreya Sans SC (menú, pies, datos). Familia pensada
   para libros, con cifras elzevirianas y versalitas de verdad.
   Composición de libro: titulillos en el margen izquierdo y una sola
   columna de texto de unos 66 caracteres.
   ========================================================================= */

:root {
    --papel: #FFFFFF;
    --tinta: #1E1D1B;
    --gris: #64615C;
    --filete: #DAD7D1;
    --fondo-suave: #F6F6F4;
    --enlace: #2A7369;          /* el verde azulado de Spanda, oscurecido para leer */
    --enlace-filete: #9CC9C2;
    --aviso: #9B2A21;

    --texto: "Alegreya", Georgia, serif;
    --versalitas: "Alegreya SC", "Alegreya", Georgia, serif;
    --sans: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
    --sans-sc: "Alegreya Sans SC", "Alegreya Sans", Arial, sans-serif;

    --medida: 36rem;            /* columna de texto */
    --margen: 12rem;            /* columna de titulillos */
    --hueco: 3rem;
    --interlinea: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 112.5%;          /* 18 px: Alegreya es de ojo pequeño */
    -webkit-text-size-adjust: 100%;
}
@media (min-width: 1100px) { html { font-size: 118.75%; } }   /* 19 px */

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 1rem;
    line-height: var(--interlinea);
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Texto ---------- */

p, li, dd {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
    text-wrap: pretty;
    overflow-wrap: break-word;
}
p { margin: 0 0 .8em; }

h1, h2, h3, h4, h5 {
    font-family: var(--texto);
    font-weight: 500;
    color: var(--tinta);
    text-wrap: balance;
    hyphens: manual;
    margin: 0;
}
h2 { font-size: 2rem; line-height: 1.15; margin: 0 0 1.2rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 2.2rem 0 .6rem; }
h4 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 .5rem; font-weight: 700; }

em, i { font-style: italic; }
strong, b { font-weight: 700; }
small { font-size: .85em; }

abbr.sc {
    font-family: var(--versalitas);
    text-transform: lowercase;
    letter-spacing: .04em;
    text-decoration: none;
    font-variant-numeric: lining-nums;
}

a {
    color: var(--enlace);
    text-decoration: underline;
    text-decoration-color: var(--enlace-filete);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: text-decoration-color .15s ease;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--enlace);
    outline-offset: 3px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; }

ul { list-style: none; padding: 0; margin: 0 0 1em; }
ul > li { position: relative; padding-left: 1.1em; margin-bottom: .35em; }
ul > li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--gris);
}

ol { margin: 0 0 1em; padding: 0; counter-reset: paso; list-style: none; }
ol > li { counter-increment: paso; position: relative; padding-left: 1.8em; margin-bottom: .8em; }
ol > li::before {
    content: counter(paso) ".";
    position: absolute;
    left: 0;
    font-family: var(--texto);
    color: var(--gris);
}

dl { margin: 0; }
dt { font-family: var(--sans-sc); font-weight: 500; font-size: .8rem; letter-spacing: .03em;
     text-transform: lowercase; color: var(--gris); margin-top: .9em; }
dd { margin: .1em 0 0; }

hr { border: 0; border-top: 1px solid var(--filete); margin: 2rem 0; }

/* ---------- Cabecera ---------- */

.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--papel);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
}
.cabecera.compacto { border-bottom-color: var(--filete); }

.cabecera-in {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.6rem 2rem 1.1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    transition: padding .3s ease;
}
.cabecera.compacto .cabecera-in { padding-top: .7rem; padding-bottom: .6rem; }

.marca img { display: block; width: 200px; transition: width .3s ease; }
.cabecera.compacto .marca img { width: 140px; }

nav > ul { display: flex; gap: 1.6rem; margin: 0; }
nav li { padding: 0; margin: 0; }
nav li::before { content: none; }
nav a, nav .rotulo {
    font-family: var(--sans-sc);
    font-weight: 500;
    font-size: .95rem;
    text-transform: lowercase;
    letter-spacing: .04em;
    color: var(--tinta);
    text-decoration: none;
    line-height: 1;
    display: block;
    padding: .2rem 0;
    cursor: pointer;
}
nav > ul > li > a[aria-current], nav .activo > .rotulo { color: var(--enlace); }
nav a:hover { color: var(--enlace); }

.desplegable { position: relative; }
.desplegable > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 17rem;
    background: var(--papel);
    border: 1px solid var(--filete);
    padding: .7rem 1rem;
    margin-top: .5rem;
}
.desplegable:hover > ul, .desplegable:focus-within > ul { display: block; }
.desplegable > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
.desplegable > ul a {
    font-family: var(--sans);
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: .35rem 0;
}
.desplegable > ul a[aria-current] { color: var(--enlace); }

.abrir-menu { display: none; }

/* Menú plegado */
@media (max-width: 899px) {
    .cabecera-in { flex-wrap: wrap; align-items: center; padding: .8rem 1.25rem; }
    .marca img, .cabecera.compacto .marca img { width: 150px; }
    .abrir-menu {
        display: block;
        font-family: var(--sans-sc);
        font-weight: 500;
        font-size: .95rem;
        text-transform: lowercase;
        letter-spacing: .04em;
        background: none;
        border: 1px solid var(--filete);
        color: var(--tinta);
        padding: .35rem .8rem;
        border-radius: 2px;
        cursor: pointer;
    }
    nav { display: none; width: 100%; }
    .menu-abierto nav { display: block; }
    nav > ul { flex-direction: column; gap: 0; padding: .5rem 0 .6rem; border-top: 1px solid var(--filete); }
    nav a, nav .rotulo { padding: .55rem 0; }
    .desplegable > ul { display: block; position: static; border: 0; padding: 0 0 0 1rem; margin: 0; min-width: 0; }
    .desplegable > ul::before { content: none; }
}

/* ---------- Páginas de texto: titulillos al margen ---------- */

main { display: block; }

#content { padding: 3.5rem 2rem 5rem; }

#texto {
    max-width: calc(var(--margen) + var(--hueco) + var(--medida));
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--margen) minmax(0, var(--medida));
    column-gap: var(--hueco);
    align-items: start;
}
#texto > * { grid-column: 2; }
#texto > h2 {
    grid-column: 1 / -1;
    font-size: 2.6rem;
    line-height: 1.08;
    margin-bottom: 2.4rem;
    padding-left: calc(var(--margen) + var(--hueco));
}
#texto > h3 {
    grid-column: 1;
    font-family: var(--texto);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--gris);
    text-align: right;
    margin: .15rem 0 0;
    padding-top: 0;
}
/* el bloque que sigue a un titulillo abre sección */
#texto > h3 + * { margin-top: 0; }
#texto > h3 ~ h3 { margin-top: 2.2rem; }
#texto > h3 + * { position: relative; }
#texto > * + h3, #texto > * + h3 + * { margin-top: 2.2rem; }

@media (max-width: 899px) {
    #content { padding: 2rem 1.25rem 3.5rem; }
    #texto { display: block; max-width: var(--medida); }
    #texto > h2 { padding-left: 0; font-size: 2.1rem; margin-bottom: 1.6rem; }
    #texto > h3 { text-align: left; font-size: 1.1rem; margin: 2rem 0 .5rem; color: var(--tinta); }
    #texto > * + h3, #texto > * + h3 + * { margin-top: 0; }
    #texto > * + h3 { margin-top: 2rem; }
}

/* Bloques destacados */
.destacado {
    border-left: 2px solid var(--enlace);
    padding: .2rem 0 .2rem 1.1rem;
    margin: 1.6rem 0;
    color: var(--tinta);
}
.destacado p:last-child { margin-bottom: 0; }

.borrador {
    font-family: var(--sans);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--aviso);
    border: 1px dashed var(--aviso);
    padding: .6rem .8rem;
    margin: 0 0 1.4rem;
}

.caso {
    border-top: 1px solid var(--filete);
    padding: 1.2rem 0 .4rem;
    margin: 0 0 1.4rem;
}
.caso h4 { font-size: 1.15rem; font-weight: 500; }

.boton {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: .95rem;
    color: var(--papel);
    background: var(--enlace);
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 2px;
}
.boton:hover { background: var(--tinta); color: var(--papel); }

/* Vídeos */
.video-container { position: relative; padding-top: 56.25%; margin: .5rem 0 .8rem; background: var(--fondo-suave); }
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
article { margin-bottom: 2.2rem; }
.post-heading h4 { margin-bottom: .6rem; }
.pie_video { font-size: .92rem; color: var(--gris); }

/* Muestrario */
.muestra { padding-top: 1.4rem; border-top: 1px solid var(--filete); margin-bottom: 2rem; }
.muestra::after { content: ""; display: block; clear: both; }
.muestra h3 { margin-top: 0; font-size: 1.25rem; font-weight: 500; font-style: normal; color: var(--tinta); text-align: left; }
.imgmuestra { float: right; margin: .3rem 0 .8rem 1.4rem; display: flex; gap: .4rem; }
.imgmuestra img { display: block; width: 110px; border: 1px solid var(--filete); }
img.foto-muestra2 { width: 222px; }
@media (max-width: 599px) {
    .imgmuestra { float: none; margin: 0 0 1rem; }
}

/* Quiénes somos */
.equipo h3 { font-size: 1.2rem; margin-top: 2.5rem; }
.cv { overflow: hidden; margin-bottom: 1.4rem; }
.cv img { float: left; width: 88px; margin: .25rem 1.1rem .3rem 0; filter: grayscale(1); }

/* Documentación */
#texto article { border-top: 1px solid var(--filete); padding-top: 1.2rem; }
#texto article h3 { font-style: normal; text-align: left; color: var(--tinta); font-size: 1.2rem; font-weight: 500; margin: 0 0 .5rem; }
.bottom-article { text-align: right; font-family: var(--sans); font-size: .95rem; }
.bottom-article a { text-decoration: none; }
.documentacion { color: var(--gris); }
.linea-gorda { display: none; }
.icon-angle-right::before { content: " ›"; font-style: normal; }

/* Contacto */
.p-contacto h5 { font-size: 1.1rem; font-weight: 400; line-height: 1.6; margin: 0 0 1rem; }

/* ---------- Portada ---------- */

.container { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }
.row { display: flex; flex-wrap: wrap; margin: 0 -1.25rem; }
.row > [class*="col-"] { padding: 0 1.25rem; width: 100%; }
@media (min-width: 900px) {
    .row > .col-md-6, .row > .col-lg-6 { width: 50%; }
    .row > .col-md-4 { width: 33.333%; }
}
.aligncenter { text-align: center; }

.p-index .callaction { padding: 4.5rem 0 3.5rem; }
.p-index .lema {
    text-align: left;
    max-width: calc(var(--margen) + var(--hueco) + var(--medida) + 6rem);
    margin: 0 auto;
}
.p-index .lema h1 {
    font-size: clamp(2.4rem, 5.2vw, 4.1rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.012em;
    max-width: 14em;
    margin: 0 0 1.8rem;
}
.p-index .lema p {
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--gris);
    max-width: var(--medida);
    margin-left: calc(var(--margen) + var(--hueco));
}
@media (max-width: 899px) {
    .p-index .callaction { padding: 2.4rem 0 2rem; }
    .p-index .lema p { margin-left: 0; font-size: 1.1rem; }
}

/* Las dos líneas de trabajo: dos columnas, filete vertical entre ellas */
.p-index #content { padding: 1rem 0 4rem; }
.p-index #content > .container > .row:first-child { border-top: 1px solid var(--tinta); padding-top: 2rem; margin-left: 0; margin-right: 0; }
.p-index #content > .container > .row:first-child > [class*="col-"]:first-child { padding-left: 0; }
.p-index #content > .container > .row:first-child > [class*="col-"]:last-child { padding-right: 0; }
@media (max-width: 899px) {
    .p-index #content > .container > .row:first-child > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .p-index #content > .container > .row:first-child > [class*="col-"] + [class*="col-"] { border-top: 1px solid var(--filete); padding-top: 2rem; }
}
@media (min-width: 900px) {
    .p-index #content > .container > .row:first-child > [class*="col-"] + [class*="col-"] { border-left: 1px solid var(--filete); padding-left: 2.5rem; }
    .p-index #content > .container > .row:first-child > [class*="col-"]:first-child { padding-right: 2.5rem; }
}
.linea { position: relative; padding-bottom: 1.5rem; }
.linea h2 { font-size: 1.9rem; margin: 0 0 1rem; padding-right: 5rem; }
.linea > p:nth-of-type(1) { font-size: 1.08rem; }
.linea > p:nth-of-type(2) { font-size: .97rem; }
.linea .ir { font-family: var(--sans); font-weight: 500; margin-top: 1rem; }
.linea .ir a { text-decoration: none; }
.linea .ejemplos {
    font-size: .92rem;
    font-style: italic;
    color: var(--gris);
    border-top: 1px solid var(--filete);
    padding-top: .7rem;
    margin-top: 1.2rem;
}
.mono { mix-blend-mode: multiply; width: auto; }
.linea .mono { position: absolute; right: 0; top: -.3rem; height: 78px; }

/* Cómo trabajamos (portada) */
.claves { margin: 3rem 0 0 !important; padding-top: 2.5rem; border-top: 1px solid var(--filete); }
.claves > [class*="col-"] { padding-left: 0 !important; padding-right: 2rem !important; }
.claves > [class*="col-"]:nth-child(4), .claves > .col-xs-12 { padding-right: 0 !important; }
@media (max-width: 899px) { .claves > [class*="col-"] { padding-right: 0 !important; margin-bottom: 1.2rem; } }
.claves > .col-xs-12:first-child h2 { text-align: left; font-size: 1.9rem; margin-bottom: 1.8rem; }
.claves .mono { display: block; height: 64px; margin-bottom: .9rem; }
.claves h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.claves p { font-size: .97rem; }
.claves > .col-xs-12:last-child { text-align: left !important; font-family: var(--sans); font-weight: 500; margin-top: .6rem; }
.claves > .col-xs-12:last-child a { text-decoration: none; }

.p-index .destacado {
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
    padding: 1.2rem 0;
    margin: 3rem 0 0;
    font-size: 1.1rem;
}

/* Clientes */
.p-index #content > .container > p,
.p-index .logosclientes + p { }
.p-index #content .container > p {
    font-family: var(--sans-sc);
    font-weight: 500;
    font-size: .95rem;
    text-transform: lowercase;
    letter-spacing: .04em;
    color: var(--gris);
    margin: 3.5rem 0 1.4rem;
}
.logosclientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem 2.5rem;
    align-items: center;
}
.logos { display: flex; align-items: center; justify-content: center; height: 64px; }
.logos img { max-height: 52px; max-width: 150px; width: auto; height: auto; mix-blend-mode: multiply; }
.logos img[src*="trotta"] { max-height: 64px; }   /* 12-11: logo cuadrado, algo mayor (Pablo) */

/* ---------- Pie ---------- */

.pie { border-top: 1px solid var(--filete); }
.pie-in {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.6rem 2rem 2.4rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--gris);
}
.pie p { margin: 0; }
.pie a { text-decoration: none; }

/* ---------- Restos de la plantilla antigua (Kit Digital) ---------- */
.box { margin-bottom: 2rem; }
.box-gray { padding: 0; }
.box-gray h4 { font-size: 1.2rem; font-weight: 500; }
.estrellita p { padding-left: 1.1em; position: relative; }
.estrellita p::before { content: "–"; position: absolute; left: 0; color: var(--gris); }
.box-bottom { font-family: var(--sans); font-size: .95rem; }
.icon img { height: 60px; width: auto; mix-blend-mode: multiply; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}
@media print {
    .cabecera, .pie, .abrir-menu { display: none; }
    body { font-size: 11pt; }
}

/* ---------- Dibujos de Castañeira y acentos en verde (3-11) ---------- */

:root { --verde-claro: #EAF2F0; }

/* Portada: dibujos más grandes */
.linea { position: relative; }
.linea .mono { position: static; display: block; height: 117px; width: auto; margin: 0 0 1.1rem; mix-blend-mode: normal; }
.claves .mono { height: 99px; mix-blend-mode: normal; margin-bottom: 1.1rem; }

/* Portada: oferta de prueba sobre verde claro */
.p-index .destacado { background: var(--verde-claro); border-left: 0; padding: 1.4rem 1.6rem !important; border-radius: 3px; }

/* Filete verde corto bajo los títulos de bloque y de página */
.linea h2::after, #texto > h2::after, .claves > .col-xs-12:first-child h2::after {
    content: ""; display: block; width: 2.6rem; height: 3px; background: var(--enlace); margin-top: .7rem;
}

/* Páginas interiores: viñeta en la columna del margen */
#texto > .vineta { grid-column: 1; grid-row: span 3; justify-self: end; width: 100%; max-width: 149px; height: auto; margin: .3rem 0 0; }
@media (max-width: 899px) {
    #texto > .vineta { float: right; width: 34%; max-width: 130px; margin: 0 0 .8rem 1rem; }
}


/* Dibujos en pantallas estrechas (una sola columna): algo más pequeños */
@media (max-width: 899px) {
    .linea .mono { height: 83px; margin-bottom: .8rem; }
    .claves .mono { height: 72px; margin-bottom: .8rem; }
    #texto > .vineta { width: 28%; max-width: 90px; }
}


/* ---------- Esquemas (10-11) ---------- */
#texto > figure.esquema { grid-column: 1 / -1; margin: 2.2rem 0; }
.esquema {
    font-family: var(--sans); font-size: .92rem; line-height: 1.3; color: var(--tinta);
    display: grid; grid-template-columns: 1fr 2rem 1fr 2rem 1fr; align-items: center;
    background: var(--fondo-suave); padding: 1.6rem 1.4rem; border-radius: 4px;
}
.esq-col { display: flex; flex-direction: column; gap: .55rem; }
.esq-tit {
    font-family: var(--sans-sc); text-transform: lowercase; letter-spacing: .06em;
    color: var(--enlace); margin: 0 0 .2rem; font-size: 1rem;
}
.esq-caja {
    background: var(--papel); border: 1px solid var(--filete); border-radius: 3px;
    padding: .55rem .75rem;
}
.esq-caja span { display: block; color: var(--gris); font-size: .85em; margin-top: .15rem; }
.esq-caja b { display: block; font-weight: 500; font-size: .85em; margin-top: .5rem; color: var(--enlace); }
.esq-original {
    border: 2px solid var(--enlace); text-align: center; padding: 1.1rem .9rem;
    font-family: var(--texto); font-size: 1.1rem;
}
.esq-original span, .esq-original b { font-family: var(--sans); font-size: .8rem; }
.esq-flecha { align-self: center; justify-self: center; width: 100%; height: 12px; position: relative; }
.esq-flecha::before { content: ""; position: absolute; left: 0; right: 7px; top: 5px; border-top: 2px solid var(--enlace); }
.esq-flecha::after {
    content: ""; position: absolute; right: 0; top: 0;
    border-left: 8px solid var(--enlace); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
/* Fondos: pasos en fila y salidas debajo */
.esquema-fondos { display: block; }
.esq-pasos { display: grid; grid-template-columns: 1fr 1.6rem 1fr 1.6rem 1fr 1.6rem 1.4fr; align-items: center; }
.esq-pasos .esq-original { font-size: 1rem; padding: .8rem; }
.esq-bajada { height: 2.2rem; position: relative; margin-left: 78%; }
.esq-bajada::before { content: ""; position: absolute; left: 0; top: 0; bottom: 7px; border-left: 2px solid var(--enlace); }
.esq-bajada::after {
    content: ""; position: absolute; left: -5px; bottom: 0;
    border-top: 8px solid var(--enlace); border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.esq-salidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; border-top: 2px solid var(--enlace); padding-top: .8rem; }

@media (max-width: 899px) {
    .esquema { grid-template-columns: 1fr; padding: 1.2rem 1rem; }
    .esq-flecha, .esq-pasos .esq-flecha { height: 1.8rem; width: 12px; }
    .esq-flecha::before { left: 5px; right: auto; top: 0; bottom: 7px; border-top: 0; border-left: 2px solid var(--enlace); }
    .esq-flecha::after {
        right: auto; left: 0; top: auto; bottom: 0;
        border-left: 6px solid transparent; border-right: 6px solid transparent;
        border-top: 8px solid var(--enlace); border-bottom: 0;
    }
    .esq-pasos { grid-template-columns: 1fr; justify-items: stretch; }
    .esq-pasos .esq-flecha { justify-self: center; }
    .esq-bajada { margin-left: 50%; }
    .esq-salidas { grid-template-columns: 1fr 1fr; }
}
.esquema abbr.sc { font-family: var(--sans-sc); }
.esquema .esq-original > abbr.sc { font-family: var(--versalitas); }
@media (max-width: 599px) { .esq-salidas { grid-template-columns: 1fr; } }
/* Esquemas, ajustes (10-11, mediodía): grupos de entradas y salidas, pie */
.esq-grupo { border: 1px dashed var(--enlace-filete); border-radius: 4px; padding: .8rem; }
.esquema figcaption {
    grid-column: 1 / -1; margin-top: 1.1rem; font-family: var(--texto); font-style: italic;
    color: var(--gris); font-size: .95rem; text-align: center;
}

/* ---------- Artículos de Documentación (10-11) ---------- */
.p-articulo #texto > h2 { font-size: 2.1rem; line-height: 1.2; }
.p-articulo #texto > p.documentacion { font-style: italic; color: var(--gris); }
.p-articulo #texto > hr { border: 0; border-top: 1px solid var(--filete); margin: 1.5rem 0; }
.p-articulo blockquote { margin: 1.2rem 0 1.2rem 1.5rem; padding-left: 1rem; border-left: 2px solid var(--enlace-filete); color: var(--gris); }
.p-articulo .firma { text-align: right; font-style: italic; margin-top: 2rem; margin-bottom: 0; }
.p-articulo .fecha-firma { text-align: right; color: var(--gris); margin-top: 0; }
.p-articulo .volver { margin-top: 2.5rem; font-family: var(--sans); }
/* Oferta de prueba (Fondos, 11-11) */
#texto > .oferta { background: var(--verde-claro); border-left: 0; padding: 1.4rem 1.6rem; border-radius: 3px; margin-top: 2.5rem; }
/* Artículos: fecha original y nota de actualización (11-11) */
.p-articulo .fecha-original { font-family: var(--sans); color: var(--gris); font-size: .95rem; margin-top: -.4rem; }
.p-articulo .nota-2026 { background: var(--verde-claro); padding: 1.1rem 1.4rem; border-radius: 3px; margin-top: 2.5rem; }
.p-articulo .nota-2026 p { margin: 0; }
/* Documentación: lista de artículos (11-11) */
.p-documentacion #texto > article { border-top: 1px solid var(--filete); padding-top: 1rem; margin-bottom: 1.2rem; }
.p-documentacion #texto > article h4 { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 500; }
.p-documentacion #texto > article h4 a { text-decoration: none; }
.p-documentacion .fecha-original { font-family: var(--sans); color: var(--gris); font-size: .9rem; margin: 0 0 .4rem; }
.p-documentacion .lecturas li { margin-bottom: .6rem; }
/* Titulillos (h3) más grandes en pantallas estrechas (11-11) */
@media (max-width: 899px) {
    #texto > h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: .6rem; }
    #texto > * + h3 { margin-top: 2.4rem; }
}

/* ---------- Capturas en los artículos (12-11) ---------- */
#texto > figure.captura { grid-column: 1 / -1; margin: 1.8rem 0 2.2rem; }
figure.captura img { display: block; width: 100%; height: auto; }
figure.captura figcaption { margin-top: .6rem; font-style: italic; color: var(--gris); font-size: .95rem; text-align: center; }

/* ---------- Casos con cubierta en el margen (12-11) ---------- */
#texto > .caso.con-cubierta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--margen) minmax(0, var(--medida));
    column-gap: var(--hueco);
    border-top: 0; padding: 0;
}
.caso.con-cubierta > * { grid-column: 2; }
.caso.con-cubierta > h4 { border-top: 1px solid var(--filete); padding-top: 1.2rem; }
.caso.con-cubierta > .cubierta-caso {
    grid-column: 1; grid-row: 1 / span 4; justify-self: end; align-self: start;
    display: block; width: 6.5rem; margin-top: 1.25rem; cursor: zoom-in;
}
.cubierta-caso img { display: block; width: 100%; height: auto; box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .15s ease; }
.cubierta-caso:hover img, .cubierta-caso:focus-visible img { transform: scale(1.04); }
/* Ampliación de imágenes (12-11) */
.visor-ampliado {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    background: rgba(30, 29, 27, .82); cursor: zoom-out; padding: 2rem; opacity: 0; transition: opacity .2s ease;
}
.visor-ampliado.abierto { opacity: 1; }
/* Galería (12-11): la figura ocupa la pantalla; pie y contador debajo; flechas a los lados */
.visor-ampliado { padding: 2.5rem 4.5rem 1.5rem; }
.visor-ampliado figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; cursor: default; }
.visor-ampliado img { max-width: 100%; max-height: calc(100vh - 7rem); width: auto; height: auto; box-shadow: 0 6px 30px rgba(0,0,0,.45); background: #fff; }
.visor-ampliado figcaption { margin-top: .7rem; font-family: var(--sans); font-size: .95rem; color: #EDEBE6; text-align: center; }
.visor-ampliado figcaption .cuenta { margin-left: .9em; color: #A9A59D; font-variant-numeric: tabular-nums; }
.visor-ampliado button {
    position: absolute; border: 0; background: rgba(255,255,255,.08); color: #F6F6F4; cursor: pointer;
    font: 400 2.4rem/1 var(--sans); width: 3rem; height: 3rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.visor-ampliado button:hover, .visor-ampliado button:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.visor-cerrar { top: .9rem; right: .9rem; font-size: 1.3rem !important; }
.visor-ant { left: .9rem; top: 50%; transform: translateY(-50%); }
.visor-sig { right: .9rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) {
    .visor-ampliado { padding: 3.5rem .6rem 1rem; }
    .visor-ant, .visor-sig { top: auto; bottom: .6rem; transform: none; width: 2.6rem; height: 2.6rem; }
    .visor-ampliado img { max-height: calc(100vh - 9rem); }
}
@media (max-width: 899px) {
    #texto > .caso.con-cubierta { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; }
    .caso.con-cubierta > .cubierta-caso { width: 4.5rem; }
}