/* Ficha de artículo del blog. Se carga solo en singulares de tipo entrada, desde inc/assets.php, y va después de components.css para poder afinar sin pelearse a base de !important con lo que ya hay. Todo cuelga de .article-page a propósito: el resto del tema ya usa .post-card, .blog-card y .blog-grid, y así lo de aquí no puede pisarlos. Los relacionados sí reutilizan .blog-grid/.blog-card para verse igual que en el listado. */ /* WordPress añade la clase single-post al , y main.css usa ese mismo selector para la caja del artículo antiguo: .legal-page,.single-post{padding-top:190px;padding-bottom:var(--space);max-width:960px} Así que esa regla cae sobre el body y encoge el sitio entero a 960 píxeles, con 190 de hueco por encima de la barra azul. No se veía porque hasta ahora ninguna entrada llegaba a single.php: todas se desviaban a page.php. Se anula aquí, que es la hoja que manda en las fichas, en lugar de tocar main.css, que también sirve a las páginas legales. */ body.single-post{max-width:none;padding-top:0;padding-bottom:0} /* Tonos propios para el texto pequeño de la cabecera. El --muted del tema (#6e7074) sobre el degradado claro del hero, y con el patrón de fondo debajo, se queda en unos 4:1: la entradilla, la fecha y las migas se leen mal. */ .article-page{--article-medida:720px;--article-secundario:#3d4147;--article-entradilla:#2f3338} /* Cabecera ------------------------------------------------------------------ */ .hero-article{padding:150px 0 var(--s5);background:linear-gradient(180deg,var(--blue-soft) 0%,var(--paper) 100%)} .hero-article .hero-copy{width:min(calc(100% - 80px),var(--container));margin-inline:auto;max-width:900px} .hero-article h1{margin:14px 0 0;font-size:var(--fs-h1);letter-spacing:var(--track-h)} /* La ficha entra ya montada, entera. La animación de entrada del tema arranca en translateY(64px) scale(.96) y filter:blur(5px), y el titular partido en líneas empieza escondido bajo su máscara. En una portada, donde se mira, eso es un detalle. En un artículo, donde se lee y se baja seguido, cada bloque llega desenfocado y se recoloca delante de los ojos: se percibe como un salto. Y en la cabecera es peor, porque ya está en pantalla al cargar y salta al primer scroll. El propio tema reconoce el problema para la portada con .home-hero .reveal ("sin desenfoque, no se puede mostrar borroso al cargar"); aquí se quita en toda la página. Si algún día se quiere recuperar en los bloques de abajo, basta con acotar este selector al hero. */ /* No se acota a .article-page a propósito: la llamada del pie (section.footer-cta) queda fuera del artículo y entraba animada igual, y es el bloque grande y negro con el que te topas al bajar. Esta hoja solo se carga en las fichas, así que apagarlo a nivel de página no afecta al resto del sitio. */ .reveal, .reveal-stagger>*{animation:none;opacity:1;transform:none;filter:none;transition:none} .split-lines .line>span{animation:none;transform:none} .hero-article>.hero-copy>p{max-width:var(--article-medida);margin:18px 0 0;color:var(--article-entradilla);font-size:var(--fs-lead)} .article-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;color:var(--article-secundario);font-size:var(--fs-small)} /* Los enlaces de las migas en azul: en gris no se distinguían del texto plano ni llegaban al contraste mínimo. */ .article-breadcrumb a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;transition:color var(--speed-fast) var(--ease)} .article-breadcrumb a:hover,.article-breadcrumb a:focus-visible{color:var(--blue-dark)} /* El título completo en las migas puede ser larguísimo: se recorta en una línea en lugar de romper la cabecera. */ .article-breadcrumb .is-current{max-width:min(100%,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .article-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--article-secundario);font-size:var(--fs-small)} .article-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .article-share span{text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:11px;color:var(--article-secundario)} .article-share a{padding:7px 14px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--white);color:var(--ink);font-size:12px;font-weight:600;transition:border-color var(--speed-fast) var(--ease),color var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease)} .article-share a:hover,.article-share a:focus-visible{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)} /* Imagen destacada. Es opcional: hoy ningún artículo tiene, y la ficha no puede depender de ella. */ .article-cover{margin:0 auto var(--s5);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-m)} .article-cover img{width:100%;aspect-ratio:16/7;object-fit:cover} /* Cuerpo -------------------------------------------------------------------- */ /* El cuerpo arrancaba pegado al hero, justo en el corte del fondo. Necesita aire por arriba para leerse como una sección aparte. */ .article-layout{display:grid;grid-template-columns:240px minmax(0,var(--article-medida));justify-content:center;gap:var(--s6);padding-top:var(--s5);padding-bottom:var(--s6)} .article-layout.is-single-column{grid-template-columns:minmax(0,var(--article-medida))} .article-toc{position:sticky;top:110px;align-self:start;padding:var(--s3);border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line)} .article-toc-title{margin:0 0 12px;text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:11px;font-weight:700;color:var(--muted)} .article-toc ol{margin:0;padding-left:18px;display:grid;gap:9px;font-size:14px} .article-toc a{color:var(--muted);transition:color var(--speed-fast) var(--ease)} .article-toc a:hover,.article-toc a:focus-visible{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .article-body{font-size:17px;line-height:1.72} .article-body>*:first-child{margin-top:0} .article-body h2{margin:var(--s5) 0 var(--s2);font-size:clamp(24px,2.4vw,32px);letter-spacing:var(--track-h);scroll-margin-top:110px} .article-body h3{margin:var(--s4) 0 var(--s1);font-size:var(--fs-h3);scroll-margin-top:110px} .article-body p{margin:0 0 var(--s3)} .article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .article-body a:hover,.article-body a:focus-visible{color:var(--blue-dark)} .article-body ul,.article-body ol{margin:0 0 var(--s3);padding-left:22px;display:grid;gap:10px} .article-body li::marker{color:var(--blue)} .article-body img{margin:var(--s4) 0;border-radius:var(--radius);box-shadow:var(--shadow-s)} .article-body figure{margin:var(--s4) 0} .article-body figcaption{margin-top:10px;color:var(--muted);font-size:var(--fs-small);text-align:center} .article-body blockquote{margin:var(--s4) 0;padding:var(--s3) var(--s4);border-left:3px solid var(--blue);border-radius:0 var(--radius-s) var(--radius-s) 0;background:var(--blue-soft);font-size:19px} .article-body blockquote p:last-child{margin-bottom:0} .article-body hr{margin:var(--s5) 0;border:0;border-top:1px solid var(--line)} .article-body code{padding:2px 6px;border-radius:6px;background:#eceae5;font-size:.92em} .article-body pre{margin:var(--s4) 0;padding:var(--s3);border-radius:var(--radius-s);background:var(--ink);color:#f2f2f2;overflow-x:auto} .article-body pre code{padding:0;background:none;color:inherit} /* Una tabla ancha no puede romper el ancho de la columna en el móvil. */ .article-body table{width:100%;margin:var(--s4) 0;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto} .article-body th,.article-body td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left} .article-body th{background:var(--paper-2);font-weight:600} .article-pages{margin-top:var(--s4);color:var(--muted);font-size:var(--fs-small)} /* Llamada final ------------------------------------------------------------- */ .article-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6);padding:var(--s5);border-radius:var(--radius-l);background:var(--ink);color:#fff} .article-cta h2{margin:10px 0 8px;font-size:var(--fs-h2);letter-spacing:var(--track-h)} .article-cta p{margin:0;color:#c6c6c6;max-width:520px} .article-cta small{color:#83c1ff} .article-cta .button-row{display:flex;flex-wrap:wrap;gap:14px} /* Los botones del tema son oscuros y este bloque también lo es: sobre el negro el primario se queda en texto suelto y el de contorno desaparece del todo. Dentro del CTA se invierten. */ .article-cta .button{background:var(--white);border-color:var(--white);color:var(--ink)} .article-cta .button:hover,.article-cta .button:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff} .article-cta .button-outline{background:transparent;border-color:rgba(255,255,255,.45);color:#fff} .article-cta .button-outline:hover,.article-cta .button-outline:focus-visible{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} /* Anterior y siguiente ------------------------------------------------------ */ .article-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s6)} .article-nav-item{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:var(--white);transition:border-color var(--speed-fast) var(--ease),transform var(--speed-fast) var(--ease),box-shadow var(--speed-fast) var(--ease)} .article-nav-item:hover,.article-nav-item:focus-visible{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow-m)} .article-nav-item small{display:block;margin-bottom:6px;color:var(--muted);text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:11px} .article-nav-item span{font-weight:600} /* Cuando solo hay uno de los dos, el que quede se coloca en su lado. */ .article-nav-item.is-next{grid-column:2;text-align:right} .article-related{padding-bottom:var(--s6)} @media(max-width:1100px){ .article-layout{grid-template-columns:minmax(0,var(--article-medida));gap:var(--s4)} .article-toc{position:static;top:auto} } @media(max-width:700px){ .hero-article{padding:120px 0 var(--s4)} .hero-article .hero-copy{width:min(calc(100% - 34px),var(--container))} .article-meta{align-items:flex-start;flex-direction:column;gap:var(--s2)} .article-cover img{aspect-ratio:4/3} .article-body{font-size:16px} .article-cta{padding:var(--s4);text-align:left} .article-cta .button-row{width:100%;display:grid} .article-nav{grid-template-columns:1fr} .article-nav-item.is-next{grid-column:auto;text-align:left} }