/* ========================================================================== Xpresiva — capa de personalización sobre el theme base. Se carga DESPUÉS de screen.css (gana por orden de origen). Baseline funcional; el pulido fino de cada edición se itera visualmente. © Oksigenia SL. ========================================================================== */ :root{ --xp-accent: #F2545B; /* lo sobreescribe default.hbs con @custom.accent_color */ --xp-fs: 1; /* escala de tamaño de lectura */ --xp-measure: 40rem; /* ancho de columna de lectura */ --xp-bg: #ffffff; --xp-fg: #15140f; --xp-title-weight: 500; /* peso editorial de los titulares (Fraunces variable) */ --xp-surface: #faf7f2; --xp-muted: #6b6a66; --xp-border: rgba(0,0,0,.10); /* Paleta de marca (el wordmark multicolor = ADN de Xpresiva) */ --xp-coral: #F2545B; --xp-indigo: #5B5BD6; --xp-amber: #F4A800; --xp-teal: #1FA89C; } /* --- Color de marca (acento) ------------------------------------------- */ a{ color: var(--xp-accent); } a:hover{ color: var(--xp-accent); filter: brightness(.9); } /* En modo oscuro el acento se ACLARA un poco: así un acento oscuro (p.ej. #C9303A) sigue legible sobre fondo oscuro (AA) y, en general, luce mejor. Cualquier acento de cliente se beneficia. (En claro se usa tal cual lo eligió el cliente.) */ body[data-resolved-mode="dark"]{ --xp-accent: color-mix(in srgb, var(--xp-accent-base, #F2545B), #fff 26%); } /* Panel de accesibilidad: su resaltado de foco usa #005fcc por defecto, que casi desaparece sobre el fondo oscuro. En oscuro lo aclaramos (azul de foco, distinto del acento coral de los enlaces) para que el indicador siga siendo visible. */ body[data-resolved-mode="dark"]{ --oks-focus-color:#7cb0ff; --oks-focus-glow:rgba(124,176,255,.5); } /* Fondos de botón = acento SIN aclarar (--xp-accent-base): el texto blanco pasa AA en claro y oscuro (en oscuro --xp-accent se aclara para texto, no sirve de fondo). */ .gh-btn, .gh-primary-btn, .gh-subscribe-btn{ background-color: var(--xp-accent-base, var(--xp-accent)); border-color: var(--xp-accent-base, var(--xp-accent)); color:#fff; } .gh-btn:hover, .gh-primary-btn:hover, .gh-subscribe-btn:hover, .gh-head-btn.gh-primary-btn:hover{ background-color: color-mix(in srgb, var(--xp-accent-base, var(--xp-accent)), #000 15%); border-color: color-mix(in srgb, var(--xp-accent-base, var(--xp-accent)), #000 15%); color:#fff; } /* Texto secundario base oscurecido para AA sobre blanco (el #999 de headline fallaba) */ :root{ --color-secondary-text: #6a6a6a; } /* Peso de titulares editorial: los .gh-*-title son etiquetas y heredan el bold (700) del navegador; lo fijamos explícito al peso de marca. El card-title del bloque minimal se queda en 400 por mayor especificidad de la base. */ .gh-card-title, .gh-topic-grid .gh-card-title, .gh-topic-name, .gh-topic-grid .gh-topic-name, .gh-topic-header .gh-topic-name, .gh-pagehead-title, .gh-article-title{ font-weight:var(--xp-title-weight); } /* Índice de secciones a pie de portada (bloque "minimal", p.ej. las cabeceras de época): rejilla 3×3 fija y tipografía de índice de periódico, más menuda y densa que las secciones principales. En móvil cae a una columna. */ .gh-topic-list{ grid-template-columns:repeat(3,1fr); gap:40px 44px; margin-top:64px; } @media (max-width:720px){ .gh-topic-list{ grid-template-columns:1fr; } } .gh-topic-list .gh-topic-header .gh-topic-name{ font-size:1.2rem; } .gh-topic-list .gh-topic-minimal .gh-card-title{ font-size:1.3rem; line-height:1.4; } /* Botón "volver arriba": abajo-derecha, APILADO sobre el botón de Ghost Portal (~98px de alto) para no pisarlo; el panel de accesibilidad va a la izquierda. Aparece al desplazarse (clase xp-show-totop, y>600). */ .xp-to-top{ position:fixed; right:24px; bottom:24px; z-index:100; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--xp-accent-base,var(--xp-accent)); color:#fff; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; box-shadow:0 4px 14px rgba(0,0,0,.25); } /* Si la publicación tiene el botón flotante de Ghost Portal (suscripción/cuenta), subimos el "volver arriba" para apilarlo encima y no pisarlo. Se detecta por JS (clase xp-has-portalbtn). Por defecto, sin ese botón, queda pegado abajo. */ body.xp-has-portalbtn .xp-to-top{ bottom:116px; } body.xp-show-totop .xp-to-top{ opacity:1; visibility:visible; transform:none; } .xp-to-top:hover{ background:color-mix(in srgb, var(--xp-accent-base,var(--xp-accent)), #000 15%); } @media (max-width:600px){ .xp-to-top{ right:16px; bottom:20px; width:42px; height:42px; } body.xp-has-portalbtn .xp-to-top{ bottom:104px; } } /* Solo para lectores de pantalla: encabezados de sección invisibles que ordenan el esquema (h1→h2→h3) sin cambiar el diseño. */ .xp-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Icono de candado (neutro en cualquier idioma) para el kicker del muro de pago, que vive en HTML inyectado por Ghost donde {{t}} no llega. Se pinta con máscara para tomar el color del acento de cada edición. */ :root{ --xp-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E"); } .gh-content blockquote{ border-left: 3px solid var(--xp-accent); } ::selection{ background: var(--xp-accent); color: #fff; } .is-head-brand .gh-head{ background-color: var(--xp-accent); } /* Tamaño de lectura: el escalado lo da el panel de accesibilidad (oksigenia access), por eso no hay setting font_size en el theme — slot reservado. */ .gh-content{ font-size: 1.9rem; } /* ========================================================================== Ediciones (edition) — Press / Magazine / Blog ========================================================================== */ /* PRESS — denso, ritmo de diario, titulares contenidos */ [data-edition="Press"]{ --xp-measure: 42rem; } [data-edition="Press"] .gh-article-title{ line-height: 1.08; letter-spacing: -.01em; } [data-edition="Press"] .gh-feed{ gap: 1.2rem; } [data-edition="Press"] .gh-card-title{ font-size: 2.2rem; line-height: 1.12; } [data-edition="Press"] .gh-content{ line-height: 1.55; } /* MAGAZINE — imágenes grandes, mucho aire, portadas de número */ [data-edition="Magazine"]{ --xp-measure: 46rem; } [data-edition="Magazine"] .gh-article-title{ font-size: clamp(3.4rem, 6vw, 6rem); line-height: 1.05; } [data-edition="Magazine"] .gh-article-image{ margin-block: 2.5rem; } [data-edition="Magazine"] .gh-feed{ gap: 3rem; } [data-edition="Magazine"] .gh-content{ line-height: 1.7; } /* BLOG — limpio, centrado en la lectura, columna estrecha */ [data-edition="Blog"]{ --xp-measure: 36rem; } [data-edition="Blog"] .gh-article-title{ font-size: clamp(2.6rem, 4vw, 3.6rem); } [data-edition="Blog"] .gh-canvas > *{ --gh-canvas-width: var(--xp-measure); } [data-edition="Blog"] .gh-content{ line-height: 1.75; } /* ========================================================================== BLOG — "The Journal": identidad íntima y tipográfica. Columna única centrada, serif grande, mucho aire. Ni el brillo del Magazine ni la rigidez del Press: calidez y lectura. ========================================================================== */ /* Cabecera discreta y aireada: hairline fina + wordmark serif, sin masthead. */ body[data-edition="Blog"] .gh-head{ border-bottom:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-masthead-date{ display:none; } /* la dateline es de Magazine, no del Blog */ body[data-edition="Blog"] .gh-head-inner{ padding-top:1.7rem; padding-bottom:1.7rem; } body[data-edition="Blog"] .gh-head-logo{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; font-size:2rem; letter-spacing:-.01em; } body[data-edition="Blog"] .gh-head-menu .nav a{ font-size:1.5rem; } /* Home: columna única centrada, entradas tipográficas y aireadas. */ body[data-edition="Blog"] .xp-blog-feed{ max-width:64rem; margin-inline:auto; padding-top:1rem; } body[data-edition="Blog"] .xp-blog-feed .gh-feed, body[data-edition="Blog"] .xp-blog-feed .gh-topic-content{ display:block; max-width:none; width:100%; padding:0; margin:0; grid-template-columns:none; gap:0; } body[data-edition="Blog"] .xp-blog-feed .gh-card{ display:block; padding:2.8rem 0; border-bottom:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-blog-feed .gh-card, body[data-edition="Blog"] .xp-blog-feed .gh-card-link, body[data-edition="Blog"] .xp-blog-feed .gh-card-wrapper{ max-width:none; width:100%; } body[data-edition="Blog"] .xp-blog-feed .gh-card-link{ display:block; } body[data-edition="Blog"] .xp-blog-feed .gh-card:first-child{ padding-top:.5rem; } body[data-edition="Blog"] .xp-blog-feed .gh-card-image{ margin:0 0 1.5rem; border-radius:3px; overflow:hidden; } body[data-edition="Blog"] .xp-blog-feed .gh-card-image img{ width:100%; max-height:40vh; object-fit:cover; display:block; } body[data-edition="Blog"] .xp-blog-feed .gh-card-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:clamp(2.3rem,3.2vw,3rem); line-height:1.14; letter-spacing:-.01em; margin:0 0 .7rem; } body[data-edition="Blog"] .xp-blog-feed .gh-card-link:hover .gh-card-title{ color:var(--xp-accent); } body[data-edition="Blog"] .xp-blog-feed .gh-card-excerpt{ font-family:"FrauncesXp",Georgia,serif; font-size:1.65rem; line-height:1.6; color:var(--color-secondary-text); margin:0 0 1rem; } body[data-edition="Blog"] .xp-blog-feed .gh-card-footer{ display:flex; gap:.9rem; font-size:1.3rem; text-transform:uppercase; letter-spacing:.07em; color:var(--color-secondary-text); } body[data-edition="Blog"] .xp-blog-feed .gh-card-author{ color:var(--color-darker-gray); } /* Artículo: título centrado, meta inline centrada (no sidebar flotante a la izquierda), cuerpo serif grande y cómodo. */ body[data-edition="Blog"] .gh-article-tag{ display:block; text-align:center; } body[data-edition="Blog"] .gh-article-title{ text-align:center; } body[data-edition="Blog"] .gh-article-excerpt{ text-align:center; font-family:"FrauncesXp",Georgia,serif; font-style:italic; color:var(--color-secondary-text); } body[data-edition="Blog"] .gh-article-sidebar{ position:static !important; left:auto !important; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem 1.1rem; grid-column:1 / -1; max-width:46rem; margin:1.6rem auto 0; padding:0; } body[data-edition="Blog"] .gh-article-sidebar .gh-author-name-list{ display:flex; } /* Share en SU PROPIA línea (no se parte): ancho completo, centrado, debajo de la firma. */ body[data-edition="Blog"] .gh-article-sidebar .gh-share{ flex-basis:100%; display:flex; justify-content:center; margin-top:.5rem; } body[data-edition="Blog"] .gh-content{ font-size:1.95rem; } /* Diferenciar del Magazine: wordmark en TINTA (no coral), discreto y personal. */ body[data-edition="Blog"] .gh-head-logo, body[data-edition="Blog"] .gh-head-logo a{ color:var(--color-darker-gray); } /* Footer bloguero: sin lista de secciones (un blog no tiene secciones) + enlace RSS (gancho clásico de blog) con toque personal. */ body[data-edition="Blog"] .xp-foot-sections{ display:none; } body[data-edition="Blog"] .xp-foot-rss{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.25rem; color:var(--color-white); opacity:.82; text-decoration:none; } body[data-edition="Blog"] .xp-foot-rss:hover{ color:var(--xp-accent); opacity:1; } body[data-edition="Blog"] .xp-foot-rss svg{ color:var(--xp-accent); } /* Página de AUTOR del Blog: distinta del Magazine — alineada a la izquierda, íntima, sin banner (los autores del Blog no llevan cover) y feed en columna única (no la rejilla de revista). */ /* Autor del Blog: perfil personal a la IZQUIERDA (avatar + texto en fila), no el masthead centrado del Magazine. Sin banner. */ body[data-edition="Blog"] .xp-author-head{ display:grid; grid-template-columns:auto 1fr; column-gap:1.8rem; align-items:start; text-align:left; max-width:64rem; margin-inline:auto; padding:2.6rem 1.5rem 1.8rem; border-bottom:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-author-avatar{ grid-column:1; grid-row:1 / span 4; width:96px; height:96px; margin:.3rem 0 0; } body[data-edition="Blog"] .xp-author-name{ grid-column:2; font-size:clamp(2.4rem,3.5vw,3.2rem); margin:0; } body[data-edition="Blog"] .xp-author-bio{ grid-column:2; text-align:left; margin:.3rem 0 0; max-width:46ch; } body[data-edition="Blog"] .xp-author-meta{ grid-column:2; justify-content:flex-start; margin:.6rem 0 0; } body[data-edition="Blog"] .xp-author-social{ grid-column:2; justify-content:flex-start; margin:.6rem 0 0; } body[data-edition="Blog"] .xp-author-feed{ max-width:64rem; margin-inline:auto; } body[data-edition="Blog"] .xp-author-feed-header{ max-width:64rem; margin:2rem auto 0; border-bottom:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-author-feed-title{ border:0; color:var(--color-secondary-text); } body[data-edition="Blog"] .xp-author-feed .xp-mag-grid{ display:block; } body[data-edition="Blog"] .xp-author-feed .gh-card{ display:block; padding:2.4rem 0; border-bottom:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-author-feed .gh-card.large{ grid-column:auto; } body[data-edition="Blog"] .xp-author-feed .gh-card-image{ margin:0 0 1.3rem; border-radius:3px; overflow:hidden; } body[data-edition="Blog"] .xp-author-feed .gh-card-image img{ width:100%; max-height:38vh; object-fit:cover; } body[data-edition="Blog"] .xp-author-feed .gh-card-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:clamp(2.1rem,2.8vw,2.6rem); line-height:1.15; margin:0 0 .6rem; } body[data-edition="Blog"] .xp-author-feed .gh-card-link:hover .gh-card-title{ color:var(--xp-accent); } body[data-edition="Blog"] .xp-author-feed .gh-card-excerpt{ font-family:"FrauncesXp",Georgia,serif; font-size:1.6rem; line-height:1.6; color:var(--color-secondary-text); } /* ---- Blog · GRID (Cards): 2 columnas con imagen; los posts sin foto llevan tarjeta de texto con carácter (filete de acento). Llena el ancho, cálido. ---- */ body[data-edition="Blog"] .xp-blog-cards{ max-width:72rem; margin-inline:auto; padding-top:1rem; } .xp-blog-cards-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem 2.8rem; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card{ display:block; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-image{ margin:0 0 1.1rem; border-radius:4px; overflow:hidden; aspect-ratio:16/10; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-image img{ width:100%; height:100%; object-fit:cover; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card.no-image .gh-card-wrapper{ border-top:3px solid var(--xp-accent); padding-top:1.1rem; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:2rem; line-height:1.16; margin:0 0 .5rem; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-link:hover .gh-card-title{ color:var(--xp-accent); } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-excerpt{ font-family:"FrauncesXp",Georgia,serif; font-size:1.5rem; line-height:1.55; color:var(--color-secondary-text); margin:0 0 .7rem; } body[data-edition="Blog"] .xp-blog-cards-grid .gh-card-footer{ font-size:1.25rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-secondary-text); } @media(max-width:680px){ .xp-blog-cards-grid{ grid-template-columns:1fr; } } /* ---- Blog · LIST (Índice): índice compacto, fecha + título + extracto, denso ---- */ body[data-edition="Blog"] .xp-blog-list{ max-width:56rem; margin-inline:auto; padding-top:1rem; } .xp-bl-row{ border-bottom:1px solid var(--color-light-gray); } .xp-bl-link{ display:grid; grid-template-columns:8rem 1fr; gap:1.6rem; padding:1.4rem 0; text-decoration:none; color:inherit; align-items:baseline; } .xp-bl-date{ font-size:1.3rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-secondary-text); } .xp-bl-title{ display:block; font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:1.95rem; line-height:1.2; } .xp-bl-excerpt{ display:block; font-family:"FrauncesXp",Georgia,serif; font-size:1.45rem; line-height:1.5; color:var(--color-secondary-text); margin-top:.3rem; } .xp-bl-link:hover .xp-bl-title{ color:var(--xp-accent); } @media(max-width:560px){ .xp-bl-link{ grid-template-columns:1fr; gap:.3rem; } } /* Aplicar el ancho de columna de cada edición al contenido */ .gh-content, .gh-canvas{ --gh-canvas-width: var(--xp-measure); } /* ========================================================================== Modo claro/oscuro (color_mode) ========================================================================== */ /* Volteamos las variables de color del theme base (--color-white es fondo; --color-primary-text / --color-darker-gray es el texto). Selector correcto: data-color-mode va EN el body, así que body[data-color-mode], no descendiente. */ :root{ --xp-dark-bg:#15140f; --xp-dark-surface:#1f1d18; --xp-dark-text:#ece8e0; --xp-dark-muted:#a8a49b; } body[data-color-mode="Dark"]{ --color-white:var(--xp-dark-bg); --color-lighter-gray:var(--xp-dark-surface); --color-light-gray:#2a2820; --color-mid-gray:#3a382f; --color-primary-text:var(--xp-dark-text); --color-darker-gray:var(--xp-dark-text); --color-secondary-text:var(--xp-dark-muted); background-color:var(--xp-dark-bg); color:var(--xp-dark-text); } @media (prefers-color-scheme: dark){ body[data-color-mode="Auto"]{ --color-white:var(--xp-dark-bg); --color-lighter-gray:var(--xp-dark-surface); --color-light-gray:#2a2820; --color-mid-gray:#3a382f; --color-primary-text:var(--xp-dark-text); --color-darker-gray:var(--xp-dark-text); --color-secondary-text:var(--xp-dark-muted); background-color:var(--xp-dark-bg); color:var(--xp-dark-text); } } /* ========================================================================== Fecha histórica (la inyecta el publisher:
) ========================================================================== */ .historical-date{ display: inline-block; font-variant: small-caps; letter-spacing: .06em; font-weight: 600; color: var(--xp-accent); border-top: 2px solid var(--xp-accent); padding-top: .35rem; margin-bottom: 1.5rem; } /* ========================================================================== Posición de los botones de compartir (share_position) — baseline ========================================================================== */ [data-share-position="Sidebar"] .gh-share{ /* lateral: posicionamiento fino a iterar */ } [data-share-position="Below title"] .gh-share{ order: -1; margin-bottom: 1.5rem; } [data-share-position="End"] .gh-share{ margin-top: 2.5rem; } /* Botones de compartir (sin terceros: enlaces nativos) */ .xp-share{ display:flex; align-items:center; gap:.6rem; margin-top:1.5rem; } .xp-share-label{ font-size:1.2rem; text-transform:uppercase; letter-spacing:.08em; color:var(--xp-muted); } .xp-share-link{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--color-mid-gray); color:var(--color-darker-gray); font-weight:700; font-size:1.3rem; text-decoration:none; } .xp-share-link:hover{ background:var(--xp-accent); border-color:var(--xp-accent); color:#fff; filter:none; } /* Ficha de autor al pie del artículo */ .gh-article-authors{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--xp-border); } .xp-author-card{ display:flex; gap:1.4rem; align-items:flex-start; margin-bottom:1.5rem; } .xp-author-card-img{ width:5.4rem; height:5.4rem; border-radius:50%; object-fit:cover; flex:0 0 auto; } .xp-author-card-name{ margin:0 0 .3rem; font-size:1.9rem; } .xp-author-card-name a{ color:var(--xp-fg); text-decoration:none; } .xp-author-card-bio{ margin:0; color:var(--xp-muted); font-size:1.5rem; line-height:1.5; } /* ========================================================================== Embeds de vídeo responsive — YouTube/Vimeo/Odysee/Rumble (incl. Shorts). El publisher emite
. ========================================================================== */ .gh-content .kg-embed-card iframe, .xp-embed iframe{ width:100%; height:auto; aspect-ratio:16/9; border:0; display:block; } .xp-embed{ margin-inline:auto; } /* Shorts / vertical (9:16) — centrado y acotado para que no ocupe toda la columna */ .xp-embed-vertical{ max-width:400px; margin-inline:auto; } .xp-embed-vertical iframe{ aspect-ratio:9/16; } /* ========================================================================== Home por edición (home.hbs ramifica por @custom.edition) ========================================================================== */ /* BLOG — columna única, centrada en la lectura */ .xp-blog-feed .gh-feed{ display:flex; flex-direction:column; gap:2.6rem; max-width:46rem; margin-inline:auto; } .xp-blog-feed .gh-card-image{ border-radius:4px; } /* MAGAZINE — rejilla de número de dos columnas (la 1ª tarjeta = portada, ver más abajo) */ .xp-mag-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem; } /* Sin huecos: rellenar el último ítem si queda solo. La portada (.large) ocupa una fila entera y descuadra la paridad, así que distinguimos los dos casos. */ .xp-mag-grid:has(.gh-card.large) > .gh-card:last-child:nth-child(even){ grid-column:1 / -1; } .xp-mag-grid:not(:has(.gh-card.large)) > .gh-card:last-child:nth-child(odd){ grid-column:1 / -1; } @media(max-width:760px){ .xp-mag-grid{ grid-template-columns:1fr; } } /* ========================================================================== DISEÑO A MEDIDA — identidad propia Xpresiva (alejar del look "headline") ========================================================================== */ /* Fraunces VARIABLE (eje de peso 300–700 + opsz): antes solo había un corte recto 700, así que cualquier titular —pusiera font-weight 400/500/600— se pintaba con el 700 y se veía siempre en negrita. Con el variable, font-weight ya significa algo. */ @font-face{font-family:"FrauncesXp";src:url("../fonts/fraunces-vf.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;} @font-face{font-family:"FrauncesXp";src:url("../fonts/fraunces-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;} /* Tipografía de marca (Fraunces) en titulares, masthead y secciones */ body .gh-head-logo, body .gh-article-title, body .gh-card-title, body .gh-topic-name, body .gh-author-name, body .xp-author-name, body .gh-content h2, body .gh-content h3, body .section-title{ font-family:"FrauncesXp", Georgia, "Times New Roman", serif; letter-spacing:-.012em; } /* Masthead: filete fino bajo la cabecera + logo con peso editorial */ body .gh-head{ border-bottom:1px solid var(--xp-border, rgba(0,0,0,.12)); } body .gh-head-logo{ font-weight:700; } /* LOGO-IMAGEN en el masthead: cuando @site.logo es una imagen, va como dentro de un con font-size enorme (Press) → su line-box desbordaba el cabecero y el filete lo cruzaba (y en la web de autor se "partía" metiéndose en la portada). display:block saca la imagen del line-box (su altura manda) y la acotamos. */ body .gh-head-logo img, body .gh-head-brand img{ display:block; width:auto; height:auto; max-height:3rem; margin:0 auto; } @media (max-width:680px){ body .gh-head-logo img, body .gh-head-brand img{ max-height:2.2rem; } } /* Kicker de sección (CITY, CULTURE…) — estilo editorial */ body .gh-topic-name{ text-transform:uppercase; letter-spacing:.14em; } /* Titulares con interlineado más ceñido (escala editorial) */ body .gh-article-title{ line-height:1.04; } /* Capitular (drop cap) — TOGGLE del usuario (setting drop_cap), cualquier edición */ body[data-drop-cap="true"] .gh-content > p:first-of-type::first-letter{ font-family:"FrauncesXp", serif; font-weight:700; color:var(--xp-accent); float:left; font-size:3.6em; line-height:.78; padding:.02em .1em 0 0; } /* ========================================================================== MAGAZINE — identidad de artículo (rediseño valiente). El COLOR es el ADN de Xpresiva (coral/indigo/ámbar/teal del wordmark): aquí es seña de identidad, no adorno. Alineado a la izquierda, tipografía grande, imagen a sangre, sin rail de autor. El texto que debe voltear en modo oscuro usa las variables del theme base (--color-*), no --xp-fg. ========================================================================== */ body[data-edition="Magazine"]{ --content-width: 760px; } /* Cabecera del artículo: más aire arriba */ body[data-edition="Magazine"] .gh-article-header{ --header-spacing: 5rem; } /* Kicker de categoría en color de marca */ body[data-edition="Magazine"] .gh-article-tag{ display:inline-block; margin-bottom:1.1rem; font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:1.3rem; color:var(--xp-accent); text-decoration:none; } /* Título enorme y expresivo */ body[data-edition="Magazine"] .gh-article-title{ font-size:clamp(3.6rem,6.4vw,6.4rem); line-height:1.0; letter-spacing:-.022em; } /* Entradilla en cursiva serif, grande y aireada */ body[data-edition="Magazine"] .gh-article-excerpt{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.4; color:var(--color-secondary-text); max-width:46ch; margin-top:1.4rem; } /* Firma horizontal (rompe el rail absoluto de headline) */ body[data-edition="Magazine"] .gh-article-sidebar{ position:static; left:auto; top:auto; padding-right:0; grid-column:main; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.4rem 1.1rem; margin-top:1.8rem; } body[data-edition="Magazine"] .gh-author-image-list{ display:flex; } body[data-edition="Magazine"] .gh-author-image{ width:42px; height:42px; } body[data-edition="Magazine"] .gh-author-name{ font-family:"FrauncesXp",Georgia,serif; font-size:1.55rem; margin:0; } body[data-edition="Magazine"] .gh-author-name a{ color:var(--color-darker-gray); text-decoration:none; } body[data-edition="Magazine"] .gh-article-meta, body[data-edition="Magazine"] .gh-article-meta-inner{ color:var(--color-secondary-text); font-size:1.4rem; } /* Compartir: alineado en la firma (sin el margin-top del modo apilado) y un punto más grande */ body[data-edition="Magazine"] .gh-share{ margin-top:0; } body[data-edition="Magazine"] .xp-share-label{ font-size:1.2rem; } body[data-edition="Magazine"] .xp-share-link{ width:3rem; height:3rem; font-size:1.45rem; } /* Imagen destacada — MODO ELEGIDO por el usuario (setting feature_image), todas las ediciones */ .gh-article-image{ margin-top:3.2rem; } body[data-feature-image="Full-bleed"] .gh-article-image{ grid-column:full-start/full-end; } body[data-feature-image="Full-bleed"] .gh-article-image img{ width:100%; max-height:78vh; object-fit:cover; display:block; } body[data-feature-image="Wide"] .gh-article-image{ grid-column:wide-start/wide-end; } body[data-feature-image="Standard"] .gh-article-image{ grid-column:main-start/main-end; } .gh-article-image figcaption{ max-width:var(--content-width,720px); margin:.9rem auto 0; padding:0 4vmin; font-size:1.25rem; color:var(--color-secondary-text); text-align:center; } /* Subtítulos con pestaña de color que ROTA = ADN multicolor, texto legible */ body[data-edition="Magazine"] .gh-content h2{ position:relative; padding-top:1.4rem; margin-top:2.6em; } body[data-edition="Magazine"] .gh-content h2::before{ content:""; position:absolute; top:0; left:0; width:2.8rem; height:5px; border-radius:3px; background:var(--xp-coral); } body[data-edition="Magazine"] .gh-content h2:nth-of-type(4n+2)::before{ background:var(--xp-indigo); } body[data-edition="Magazine"] .gh-content h2:nth-of-type(4n+3)::before{ background:var(--xp-amber); } body[data-edition="Magazine"] .gh-content h2:nth-of-type(4n+4)::before{ background:var(--xp-teal); } /* Pull-quote expresiva con comilla de color */ body[data-edition="Magazine"] .gh-content blockquote{ border-left:0; margin:2.6em 0; padding-left:0; font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.28; color:var(--color-darker-gray); } /* Comillas clásicas de apertura Y cierre, en color de marca (convención real) */ body[data-edition="Magazine"] .gh-content blockquote::before{ content:"\201C"; color:var(--xp-accent); } body[data-edition="Magazine"] .gh-content blockquote::after{ content:"\201D"; color:var(--xp-accent); } /* Capitular más rotunda en Magazine (solo si está activada) */ body[data-drop-cap="true"][data-edition="Magazine"] .gh-content > p:first-of-type::first-letter{ font-size:4.6em; } /* ========================================================================== MAGAZINE — home (mismo lenguaje que el artículo: el COLOR es el ADN). Kicker de categoría con marcador de color que rota = eco de las pestañas h2 del artículo → identidad coherente. Hero tipo portada de número. ========================================================================== */ /* Kicker de categoría en las tarjetas */ body[data-edition="Magazine"] .gh-card-tag{ display:inline-flex; align-items:center; gap:.55em; margin-bottom:.6rem; font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:1.1rem; color:var(--color-darker-gray); } body[data-edition="Magazine"] .gh-card-tag::before{ content:""; width:.7em; height:.7em; border-radius:2px; background:var(--xp-coral); flex:0 0 auto; } /* Rotación de color del marcador por posición en la rejilla (ADN multicolor) */ body[data-edition="Magazine"] .xp-mag-grid .gh-card:nth-of-type(4n+2) .gh-card-tag::before{ background:var(--xp-indigo); } body[data-edition="Magazine"] .xp-mag-grid .gh-card:nth-of-type(4n+3) .gh-card-tag::before{ background:var(--xp-amber); } body[data-edition="Magazine"] .xp-mag-grid .gh-card:nth-of-type(4n+4) .gh-card-tag::before{ background:var(--xp-teal); } /* Portada (hero) = la 1ª tarjeta del feed (.large), ocupa el ancho completo */ body[data-edition="Magazine"] .xp-mag-grid .gh-card.large{ grid-column:1 / -1; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large .gh-card-image img{ width:100%; max-height:62vh; object-fit:cover; display:block; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large .gh-card-tag{ font-size:1.25rem; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large .gh-card-title{ font-size:clamp(2.8rem,5vw,4.6rem); line-height:1.04; letter-spacing:-.02em; margin:.5rem 0; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large .gh-card-excerpt{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:clamp(1.4rem,2vw,1.9rem); line-height:1.4; color:var(--color-secondary-text); } /* Tarjeta SIN imagen: tile de texto que RELLENA la celda, contenido centrado (no parece vacío) */ /* Magazine: tarjeta sin foto = PORTADA DE COLOR de marca (no gris triste), con la misma proporción que las de imagen para cuadrar alturas en la fila. */ body[data-edition="Magazine"] .gh-card.no-image:not(.large) .gh-card-link::before{ content:""; display:block; aspect-ratio:16/10; border-radius:4px; margin-bottom:1.1rem; background:linear-gradient(135deg, var(--xp-coral), color-mix(in srgb, var(--xp-coral), #000 26%)); } body[data-edition="Magazine"] .gh-card.no-image:not(.large):nth-of-type(4n+2) .gh-card-link::before{ background:linear-gradient(135deg, var(--xp-indigo), color-mix(in srgb, var(--xp-indigo), #000 26%)); } body[data-edition="Magazine"] .gh-card.no-image:not(.large):nth-of-type(4n+3) .gh-card-link::before{ background:linear-gradient(135deg, var(--xp-amber), color-mix(in srgb, var(--xp-amber), #000 26%)); } body[data-edition="Magazine"] .gh-card.no-image:not(.large):nth-of-type(4n+4) .gh-card-link::before{ background:linear-gradient(135deg, var(--xp-teal), color-mix(in srgb, var(--xp-teal), #000 26%)); } body[data-edition="Magazine"] .gh-card.no-image:not(.large) .gh-card-title{ font-size:2.1rem; line-height:1.14; } /* Tarjetas de la rejilla */ body[data-edition="Magazine"] .xp-mag-grid .gh-card-title{ font-size:1.95rem; line-height:1.14; margin:0; } body[data-edition="Magazine"] .gh-card-image{ overflow:hidden; border-radius:4px; } body[data-edition="Magazine"] .gh-card-image img{ transition:transform .5s ease; } body[data-edition="Magazine"] .gh-card-link:hover .gh-card-image img{ transform:scale(1.04); } body[data-edition="Magazine"] .gh-card-footer{ color:var(--color-secondary-text); font-size:1.2rem; } /* El kicker, por ahora, solo en Magazine (Press/Blog lo tratarán en su pasada) */ body[data-edition="Blog"] .gh-card-tag, body[data-edition="Press"] .gh-card-tag{ display:none; } /* ========================================================================== AUTOR — masthead premium (cover + avatar + bio + ubicación + nº + RRSS). El apartado de autores suele estar descuidado; aquí es escaparate. ========================================================================== */ /* Banner SIEMPRE a todo ancho (sin gutters ni esquinas), a CUALQUIER ancho —no dependemos de un breakpoint, que era el fallo: en anchos medios salía con márgenes y la foto sin solapar. */ .xp-author-cover{ display:block; width:100vw; margin-left:calc(50% - 50vw); padding:0; border-radius:0; overflow:hidden; position:relative; } .xp-author-cover img{ width:100%; max-width:none; height:42vh; object-fit:cover; object-position:center 30%; display:block; border-radius:0; } /* Scrim sutil al pie del banner: da profundidad y hace resaltar el aro del avatar */ .xp-author-cover::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, rgba(0,0,0,.30), rgba(0,0,0,0)); pointer-events:none; } .xp-author-head{ text-align:center; max-width:60rem; margin-inline:auto; padding:3rem 1.5rem 2rem; } /* Con banner: el head arranca justo bajo el banner (anulamos el padding-top del main para que el solape sea predecible a cualquier ancho) y el avatar sube media foto → efecto sticker idéntico en móvil y escritorio. */ .gh-main:has(.xp-author-head.has-cover){ padding-top:0; } .xp-author-head.has-cover{ padding-top:0; position:relative; } .xp-author-avatar{ width:124px; height:124px; margin:0 auto 1rem; border-radius:50%; overflow:hidden; border:5px solid var(--color-white); box-shadow:0 16px 32px -12px rgba(0,0,0,.55); background:var(--color-white); position:relative; z-index:1; } .xp-author-head.has-cover .xp-author-avatar{ margin-top:-62px; } .xp-author-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .xp-author-avatar-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--color-lighter-gray); } .xp-author-name{ font-size:clamp(2.6rem,5vw,4rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 .8rem; } .xp-author-bio{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:clamp(1.5rem,2.2vw,2rem); line-height:1.4; color:var(--color-secondary-text); max-width:42ch; margin:0 auto 1.4rem; } .xp-author-meta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem 1.4rem; color:var(--color-secondary-text); font-size:1.4rem; margin-bottom:1.4rem; } .xp-author-meta-item{ display:inline-flex; align-items:center; gap:.45em; } .xp-author-meta .xp-ico{ width:1.15em; height:1.15em; opacity:.85; } .xp-author-social{ display:flex; justify-content:center; gap:.7rem; } .xp-author-social a{ display:inline-flex; align-items:center; justify-content:center; width:3.2rem; height:3.2rem; border-radius:50%; border:1px solid var(--color-mid-gray); color:var(--color-darker-gray); transition:background .2s,color .2s,border-color .2s; } .xp-author-social a:hover{ background:var(--xp-accent); border-color:var(--xp-accent); color:#fff; } .xp-author-social svg{ width:1.55rem; height:1.55rem; } /* En móvil solo bajamos la altura del banner; el layout full-width + sticker ya es universal (arriba), sin depender de breakpoint. */ @media(max-width:600px){ .xp-author-cover img{ height:32vh; } } .xp-author-feed-header{ margin:2.5rem 0 1.6rem; border-bottom:2px solid var(--color-darker-gray); } .xp-author-feed-title{ font-family:"FrauncesXp",Georgia,serif; font-size:1.35rem; text-transform:uppercase; letter-spacing:.14em; padding-bottom:.6rem; margin:0; } /* Ficha de autor al pie del artículo: corregir color en oscuro + RRSS */ .xp-author-card-name a{ color:var(--color-darker-gray); } .xp-author-card-bio{ color:var(--color-secondary-text); } .xp-author-card-social{ display:flex; gap:.5rem; margin-top:.7rem; } .xp-author-card-social a{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; color:var(--color-secondary-text); transition:color .2s; } .xp-author-card-social a:hover{ color:var(--xp-accent); } .xp-author-card-social svg{ width:1.5rem; height:1.5rem; } /* ========================================================================== Toggle de modo claro/oscuro para el LECTOR (cabecera). Recuerda elección en localStorage; el script anti-FOUC la aplica al abrir el body. ========================================================================== */ .xp-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:0; color:inherit; } .xp-theme-toggle svg{ width:2rem; height:2rem; } .xp-theme-toggle .ico-sun{ display:none; } body[data-resolved-mode="dark"] .xp-theme-toggle .ico-moon{ display:none; } body[data-resolved-mode="dark"] .xp-theme-toggle .ico-sun{ display:inline-block; } /* ========================================================================== Tarjeta destacada con título SOBRE la imagen (feed de autor, tag, secciones): degradado inferior + sombra para que el título BLANCO se lea sobre cualquier imagen y al iluminarse en hover. Independiente del modo claro/oscuro. ========================================================================== */ .gh-topic-grid .gh-card.featured.large .gh-card-image::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 68%); } .gh-topic-grid .gh-card.featured.large .gh-card-wrapper{ position:relative; z-index:2; } /* Texto SIEMPRE blanco (va sobre la imagen, no sobre la página → igual en claro y oscuro; headline lo ataba a --color-white para .featured.large, y volteamos --color-white en oscuro → lo oscurecía. !important porque su selector .featured.large es muy específico). */ .gh-topic-grid .gh-card.featured.large :is(.gh-card-title,.gh-card-tag,.gh-card-excerpt,.gh-card-footer,.gh-card-author,.gh-card-date){ color:#fff !important; text-shadow:0 1px 14px rgba(0,0,0,.5); } /* ========================================================================== MAGAZINE — bloques de SECCIÓN en el home (partial topic-grid). Cabecera de sección con marcador de color + filete; rejilla uniforme. ========================================================================== */ body[data-edition="Magazine"] .xp-mag-cover{ margin-bottom:3.5rem; } body[data-edition="Magazine"] .gh-topic{ margin-top:3.5rem; } /* ========================================================================== Home Magazine — MOSAICO (homepage_cover: Mosaic) Rejilla editorial asimétrica (pesos variados), NO uniforme. Imagen-forward. ========================================================================== */ .xp-mag-mosaic{ margin-bottom:3.5rem; } .xp-mosaic{ display:grid; grid-template-columns:repeat(6,1fr); gap:2.8rem 3rem; } .xp-mosaic > .gh-card{ grid-column:span 2; } /* base: 3 por fila */ .xp-mosaic > .gh-card:nth-child(1){ grid-column:span 4; } /* lead grande */ .xp-mosaic > .gh-card:nth-child(6n+6){ grid-column:span 3; } /* fila de 2 anchas */ .xp-mosaic > .gh-card:nth-child(6n+7){ grid-column:span 3; } .xp-mosaic > .gh-card:nth-child(1) .gh-card-title{ font-size:clamp(2.6rem,4vw,4rem); line-height:1.05; letter-spacing:-.02em; } .xp-mosaic > .gh-card:nth-child(1) .gh-card-image img{ max-height:58vh; object-fit:cover; } body[data-edition="Magazine"] .xp-mosaic .gh-card:nth-of-type(4n+2) .gh-card-tag::before{ background:var(--xp-indigo); } body[data-edition="Magazine"] .xp-mosaic .gh-card:nth-of-type(4n+3) .gh-card-tag::before{ background:var(--xp-amber); } body[data-edition="Magazine"] .xp-mosaic .gh-card:nth-of-type(4n+4) .gh-card-tag::before{ background:var(--xp-teal); } @media(max-width:760px){ .xp-mosaic{ grid-template-columns:1fr; } .xp-mosaic > .gh-card{ grid-column:1 / -1 !important; } } /* ========================================================================== Home Magazine — SUMARIO (homepage_cover: Index) Historia de portada dominante + índice "en este número" a 2 columnas. La "lista" reinventada como página de sumario impreso, no un blog-list. ========================================================================== */ .xp-mag-index{ display:grid; grid-template-columns:1.6fr 1fr; gap:3.5rem 4rem; margin-bottom:3.5rem; align-items:start; } .xp-issue-lead{ display:block; text-decoration:none; color:inherit; } .xp-issue-lead-img{ margin:0 0 1.4rem; } .xp-issue-lead-img img{ width:100%; max-height:62vh; object-fit:cover; display:block; } .xp-issue-kicker{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.12em; font-size:1.25rem; color:var(--xp-accent); font-weight:700; } .xp-issue-lead-title{ font-family:"FrauncesXp",Georgia,serif; font-size:clamp(3rem,5vw,5rem); line-height:1.02; letter-spacing:-.02em; margin:.45rem 0 .8rem; } .xp-issue-lead-excerpt{ font-size:1.7rem; line-height:1.5; color:var(--color-secondary-text); margin:0 0 1rem; max-width:42ch; } .xp-issue-byline{ font-size:1.35rem; color:var(--color-secondary-text); text-transform:uppercase; letter-spacing:.08em; } .xp-issue-lead:hover .xp-issue-lead-title{ color:var(--xp-accent); } .xp-issue-list{ border-top:3px solid var(--color-darker-gray); padding-top:1.2rem; } .xp-issue-head{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.14em; font-size:1.4rem; margin:0 0 .6rem; } .xp-issue-items{ list-style:none; counter-reset:issue; margin:0; padding:0; } .xp-issue-item{ counter-increment:issue; border-top:1px solid var(--color-light-gray); } .xp-issue-item:first-child{ border-top:0; } .xp-issue-item a{ display:flex; gap:1.1rem; padding:1.05rem 0; text-decoration:none; color:inherit; } .xp-issue-item a::before{ content:counter(issue,decimal-leading-zero); font-family:"FrauncesXp",Georgia,serif; color:var(--xp-accent); font-weight:700; font-size:1.5rem; flex:0 0 2.2ch; } .xp-issue-item-main{ display:flex; flex-direction:column; gap:.15rem; } .xp-issue-item-kicker{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.05rem; color:var(--color-secondary-text); } .xp-issue-item-title{ font-family:"FrauncesXp",Georgia,serif; font-size:1.8rem; line-height:1.2; } .xp-issue-item-by{ font-size:1.25rem; color:var(--color-secondary-text); } .xp-issue-item a:hover .xp-issue-item-title{ color:var(--xp-accent); } @media(max-width:980px){ .xp-mag-index{ grid-template-columns:1fr; } } body[data-edition="Magazine"] .gh-topic-name{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:1.55rem; text-transform:uppercase; letter-spacing:.13em; display:flex; align-items:center; gap:.55em; border-bottom:2px solid var(--color-darker-gray); padding-bottom:.7rem; margin:0 0 1.8rem; } body[data-edition="Magazine"] .gh-topic-name::before{ content:""; width:.7em; height:.7em; border-radius:2px; background:var(--xp-accent); flex:0 0 auto; } body[data-edition="Magazine"] .gh-topic-name a{ color:var(--color-darker-gray); text-decoration:none; } /* Marcador de sección con color que rota (la portada .xp-mag es la 1ª
) */ body[data-edition="Magazine"] .gh-topic:nth-of-type(4n+3) .gh-topic-name::before{ background:var(--xp-indigo); } body[data-edition="Magazine"] .gh-topic:nth-of-type(4n) .gh-topic-name::before{ background:var(--xp-amber); } body[data-edition="Magazine"] .gh-topic:nth-of-type(4n+1) .gh-topic-name::before{ background:var(--xp-teal); } body[data-edition="Magazine"] .gh-topic > .gh-topic-content{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem 3rem; } @media(max-width:980px){ body[data-edition="Magazine"] .gh-topic > .gh-topic-content{ grid-template-columns:repeat(2,1fr); } } @media(max-width:620px){ body[data-edition="Magazine"] .gh-topic > .gh-topic-content{ grid-template-columns:1fr; } } body[data-edition="Magazine"] .gh-topic-footer{ margin-top:1.6rem; text-align:right; } body[data-edition="Magazine"] .gh-topic-link{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:1.15rem; color:var(--xp-accent); text-decoration:none; display:inline-flex; align-items:center; gap:.4em; } body[data-edition="Magazine"] .gh-topic-link svg{ width:1em; height:1em; } /* ========================================================================== MAGAZINE — página de categoría (tag.hbs): masthead grande con color. ========================================================================== */ body[data-edition="Magazine"] .gh-pagehead{ padding:3.5rem 0 1.6rem; border-bottom:2px solid var(--color-darker-gray); margin-bottom:2.5rem; } body[data-edition="Magazine"] .gh-pagehead-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:clamp(3rem,6vw,5.5rem); line-height:1.02; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:.35em; } body[data-edition="Magazine"] .gh-pagehead-title::before{ content:""; width:.42em; height:.42em; border-radius:3px; background:var(--xp-accent); flex:0 0 auto; } body[data-edition="Magazine"] .gh-pagehead-description{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:clamp(1.4rem,2vw,1.9rem); color:var(--color-secondary-text); margin-top:1rem; max-width:52ch; } /* ========================================================================== FOOTER enriquecido: marca + secciones + secundaria (todas las ediciones). El pie usa --color-white como color de texto sobre --color-darker-gray. ========================================================================== */ .xp-foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem 2.5rem; width:100%; margin:1rem 0 0; padding:3rem 0 0; border-top:1px solid rgba(128,128,128,.3); text-align:left; white-space:normal; } .xp-foot-brand{ } .xp-foot-nav{ display:contents; } .xp-foot-logo{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; font-size:2rem; color:var(--color-white); text-decoration:none; } .xp-foot-desc{ color:var(--color-white); opacity:.6; margin:.7rem 0 0; max-width:42ch; line-height:1.55; white-space:normal; } .xp-foot-h{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:1.15rem; margin:0 0 1rem; color:var(--color-white); opacity:.9; } .xp-foot-col{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start; } .xp-foot-col > a, .xp-foot-col .nav a{ color:var(--color-white); opacity:.68; text-decoration:none; } .xp-foot-col > a:hover, .xp-foot-col .nav a:hover{ color:var(--xp-accent); opacity:1; } /* Reset del gh-foot-menu cuando va como columna del grid */ .xp-foot-grid .gh-foot-menu{ border:0; padding:0; text-align:left; width:auto; } .xp-foot-grid .gh-foot-menu .nav{ flex-direction:column; align-items:flex-start; gap:.55rem; } .xp-foot-grid .gh-foot-menu .nav li+li{ margin-top:0; } .xp-foot-grid .gh-foot-menu .nav li+li:before{ display:none; } @media(max-width:680px){ .xp-foot-grid{ grid-template-columns:1fr 1fr; } .xp-foot-brand{ grid-column:1 / -1; } } /* Cards de SECCIÓN Magazine: verticales y uniformes (no la mini-card horizontal de headline) */ body[data-edition="Magazine"] .gh-topic > .gh-topic-content{ align-items:start; } body[data-edition="Magazine"] .gh-topic .gh-card-link{ display:flex; flex-direction:column; gap:0; } body[data-edition="Magazine"] .gh-topic .gh-card-image{ width:100%; margin:0 0 1rem; } body[data-edition="Magazine"] .gh-topic .gh-card-excerpt{ display:none; } body[data-edition="Magazine"] .gh-topic .gh-card.no-image:not(.large) .gh-card-link, body[data-edition="Magazine"] .gh-topic .gh-card.no-image:not(.large) .gh-card-wrapper{ height:auto; } /* ========================================================================== MAGAZINE — header 2+1: filete multicolor (ADN) arriba + masthead centrado (con navigation_layout = "Stacked": logo arriba, secciones debajo). ========================================================================== */ /* Filete multicolor EN el header (parte del sticky → se mantiene al scrollear) */ /* Filete del header: degradado derivado del color de marca del cliente (accent_color) */ body[data-edition="Magazine"] .gh-head::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:linear-gradient(90deg, color-mix(in srgb, var(--xp-accent), #fff 40%), var(--xp-accent), color-mix(in srgb, var(--xp-accent), #000 22%), var(--xp-accent)); } body[data-edition="Magazine"].is-head-stacked .gh-head-logo{ font-size:clamp(2.2rem,3.6vw,3.2rem); letter-spacing:-.01em; } body[data-edition="Magazine"].is-head-stacked .gh-head-menu{ text-transform:uppercase; letter-spacing:.1em; font-size:1.25rem; } /* Footer en modo oscuro: se invierte (queda claro) pero suavizado, no blanco puro */ body[data-color-mode="Dark"] .gh-foot{ background-color:#e3ddcf; } @media (prefers-color-scheme: dark){ body[data-color-mode="Auto"] .gh-foot{ background-color:#e3ddcf; } } /* El pie en oscuro es un panel CREMA: su texto atenuado (--color-white a baja opacidad) fallaba contraste. Lo fijamos a tinta oscura sólida (data-resolved-mode cubre Dark y Auto). */ body[data-resolved-mode="dark"] .gh-foot, body[data-resolved-mode="dark"] .gh-foot a{ color:#43403a; } body[data-resolved-mode="dark"] .gh-foot .xp-foot-desc, body[data-resolved-mode="dark"] .gh-foot .xp-foot-sections a, body[data-resolved-mode="dark"] .gh-foot .xp-foot-rss, body[data-resolved-mode="dark"] .gh-foot .gh-subscribe-title{ color:#43403a; opacity:1; } body[data-resolved-mode="dark"] .gh-foot .xp-foot-legal .nav a, body[data-resolved-mode="dark"] .gh-foot .gh-copyright, body[data-resolved-mode="dark"] .gh-foot .gh-copyright a, body[data-resolved-mode="dark"] .gh-foot a[data-portal], body[data-resolved-mode="dark"] .gh-foot a[href*="portal"]{ color:#5a564d; opacity:1; } body[data-resolved-mode="dark"] .gh-foot .xp-foot-logo{ color:color-mix(in srgb, var(--xp-accent-base, var(--xp-accent)), #000 14%); } /* el botón filled del pie va siempre en blanco (gana en especificidad a los enlaces del pie) */ body[data-resolved-mode="dark"] .gh-foot .gh-subscribe .gh-subscribe-btn{ color:#fff; } /* la barra legal del Press lleva opacity:.9 por diseño; en oscuro axe la composita y aclara el texto → opacidad plena para que el contraste se mantenga */ body[data-resolved-mode="dark"] .gh-foot .xp-foot-legal{ opacity:1; } /* Pie en CLARO = panel oscuro: el copyright usaba el secundario (ahora #6a6a6a) y fallaba → claro */ .gh-copyright, .gh-copyright a{ color:var(--color-white); } /* Etiqueta de artículo: usa el acento mode-aware (claro #C9303A pasa en blanco; oscuro se aclara) */ .gh-article-tag{ color:var(--xp-accent); } /* Header stacked: agrupar toggle+buscador a la izquierda y miembros a la derecha (evita que el buscador caiga al centro y se solape con el logo) */ body[data-edition="Magazine"].is-head-stacked .gh-head-actions{ justify-content:flex-start; gap:.6rem; } body[data-edition="Magazine"].is-head-stacked .gh-head-actions .gh-head-members{ margin-left:auto; } /* En páginas NO-home (tag, autor), headline fuerza las cards de gh-topic-grid a ancho completo (grid-column:1/3). Las dejamos fluir en la rejilla (3-col), salvo el destacado .large que sí ocupa todo. */ body[data-edition="Magazine"] .gh-topic-grid .gh-card:not(.large){ grid-column:auto; } /* ========================================================================== MAGAZINE — header con cuerpo (dateline + sección activa) + sticky condensado ========================================================================== */ .xp-masthead-date{ display:flex; align-items:center; justify-content:center; gap:.9rem; font-family:"FrauncesXp",Georgia,serif; font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-secondary-text); margin:.3rem 0 .2rem; } .xp-masthead-date::before, .xp-masthead-date::after{ content:""; width:2.2rem; height:1px; background:currentColor; opacity:.45; } body[data-edition="Magazine"] .gh-head-menu .nav-current a{ color:var(--xp-accent); } /* Categoría activa también en Press (con filete) y Blog (color), + barra sticky del Press */ body[data-edition="Press"] .gh-head-menu .nav-current a, body[data-edition="Press"] .xp-press-bar-nav .nav-current a{ color:var(--xp-accent); border-bottom:2px solid var(--xp-accent); padding-bottom:.15em; } body[data-edition="Blog"] .gh-head-menu .nav-current a{ color:var(--xp-accent); } body[data-edition="Magazine"] .gh-head-menu .nav a{ position:relative; } body[data-edition="Magazine"] .gh-head-menu .nav-current a::after{ content:""; position:absolute; left:0; right:0; bottom:-.45em; height:2px; background:var(--xp-accent); } /* Sticky con EFECTO CRISTAL: la cabecera se queda fija (sin condensar ni reordenar el masthead) y al hacer scroll se vuelve translúcida con blur, de modo que el contenido se intuye por debajo. Ese "poquito de transparencia" es el efecto. */ body[data-edition="Magazine"] .gh-head{ position:sticky; top:0; z-index:100; transition:background-color .25s ease; } body[data-edition="Magazine"].xp-scrolled .gh-head{ background-color:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px); } body[data-color-mode="Dark"][data-edition="Magazine"].xp-scrolled .gh-head{ background-color:rgba(21,20,15,.78); } @media(prefers-color-scheme:dark){ body[data-color-mode="Auto"][data-edition="Magazine"].xp-scrolled .gh-head{ background-color:rgba(21,20,15,.78); } } /* ENCOGER al hacer scroll: SOLO reduce tamaños (logo + padding) y oculta la fecha; NO reordena el layout (sigue apilado: logo arriba, menú debajo, todo visible). Eso evita el "logo desaparece / banda rara" de versiones previas. */ body[data-edition="Magazine"] .gh-head-logo{ transition:font-size .25s ease; } body[data-edition="Magazine"] .gh-head-inner{ transition:padding .25s ease; } body[data-edition="Magazine"].xp-scrolled .gh-head-logo{ font-size:2rem; } body[data-edition="Magazine"].xp-scrolled .xp-masthead-date{ display:none; } body[data-edition="Magazine"].xp-scrolled .gh-head-brand{ min-height:0; } body[data-edition="Magazine"].xp-scrolled .gh-head-inner{ padding-top:.55rem; padding-bottom:.55rem; } body[data-edition="Magazine"].xp-scrolled .gh-head-menu{ padding-top:.3rem; padding-bottom:.3rem; } /* La "franjita de la fecha" reconvertida en LÍNEA DIVISORIA sutil: hairline translúcida neutra (rgba gris) que se ve TANTO en claro como en oscuro —nunca blanco/blanco ni negro/negro—. Una sola línea: el separador superior del menú. El inferior se anula para no doblar con el borde del header. */ body[data-edition="Magazine"] .gh-head-menu::before{ background:rgba(130,130,130,.30) !important; } body[data-edition="Magazine"] .gh-head-menu::after{ background:transparent !important; } body[data-edition="Magazine"] .gh-head{ border-bottom-color:rgba(130,130,130,.30); } /* ========================================================================== FOOTER — secciones a 2 columnas (equilibrado) + barra legal ========================================================================== */ .xp-foot-grid{ grid-template-columns:1.3fr 1fr; } .xp-foot-seclist{ column-count:2; column-gap:2.5rem; } .xp-foot-seclist a{ display:block; color:var(--color-white); opacity:.68; text-decoration:none; margin-bottom:.55rem; break-inside:avoid; } .xp-foot-seclist a:hover{ color:var(--xp-accent); opacity:1; } .xp-foot-legal{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(128,128,128,.22); text-align:center; } .xp-foot-legal .nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; list-style:none; margin:0; padding:0; } .xp-foot-legal .nav a{ color:var(--color-white); opacity:.6; font-size:1.25rem; text-decoration:none; } .xp-foot-legal .nav a:hover{ color:var(--xp-accent); opacity:1; } @media(max-width:680px){ .xp-foot-grid{ grid-template-columns:1fr; } } /* ========================================================================== Velo en modo oscuro: ribete sutil en las fotos de tarjeta para que las imágenes oscuras no se mimeticen con el fondo. ========================================================================== */ body[data-color-mode="Dark"][data-edition="Magazine"] .gh-card-image{ box-shadow:0 0 0 1px rgba(255,255,255,.12); } @media(prefers-color-scheme:dark){ body[data-color-mode="Auto"][data-edition="Magazine"] .gh-card-image{ box-shadow:0 0 0 1px rgba(255,255,255,.12); } } /* Masthead stacked: apilar logo + dateline centrados */ body[data-edition="Magazine"].is-head-stacked .gh-head-brand-wrapper{ display:flex; flex-direction:column; align-items:center; } /* ========================================================================== FOOTER v2 — centrado y apilado (equilibrado): logo + descripción + secciones en línea + barra legal + copyright. (Sustituye al grid lateral.) ========================================================================== */ .xp-foot-main{ text-align:center; padding:3rem 0 0; border-top:1px solid rgba(128,128,128,.22); margin-top:1rem; } .xp-foot-main .xp-foot-logo{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; font-size:2.1rem; color:var(--color-white); text-decoration:none; } .xp-foot-main .xp-foot-desc{ color:var(--color-white); opacity:.6; margin:.8rem auto 0; max-width:48ch; line-height:1.55; } .xp-foot-sections{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.9rem; margin-top:1.7rem; } .xp-foot-sections a{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.3rem; color:var(--color-white); opacity:.82; text-decoration:none; display:inline-block; padding:.45rem 0; } .xp-foot-sections a:hover{ color:var(--xp-accent); opacity:1; } .xp-foot-legal{ margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid rgba(128,128,128,.16); text-align:center; } .xp-foot-legal .nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.5rem; list-style:none; margin:0; padding:0; } .xp-foot-legal .nav a{ color:var(--color-white); opacity:.55; font-size:1.2rem; text-decoration:none; } .xp-foot-legal .nav a:hover{ color:var(--xp-accent); opacity:1; } /* ========================================================================== FOOTER POR EDICIÓN — que cada pie tenga SU identidad y no el origen común. Press = colofón de periódico (filete Oxford + cierre "— 30 —", todo serif). Magazine = filete multicolor (ADN) + wordmark de color, vivo. Blog = firma íntima, breve, cursiva (ya oculta secciones y muestra RSS). ========================================================================== */ /* ---- PRESS: colofón de imprenta ---- */ body[data-edition="Press"] .xp-foot-main{ border-top:0; padding-top:1.9rem; } /* doble filete Oxford de cierre, como el del nameplate */ body[data-edition="Press"] .xp-foot-main::before{ content:""; display:block; height:4px; max-width:62rem; margin:0 auto 1.6rem; border-top:3px solid currentColor; border-bottom:1px solid currentColor; opacity:.5; } body[data-edition="Press"] .xp-foot-logo{ font-weight:800; font-size:2.7rem; letter-spacing:-.01em; } body[data-edition="Press"] .xp-foot-desc{ font-style:italic; font-size:1.4rem; } body[data-edition="Press"] .xp-foot-sections{ gap:.5rem 1.6rem; margin-top:1.5rem; } body[data-edition="Press"] .xp-foot-sections a{ font-size:1.15rem; letter-spacing:.14em; } /* marca de cierre de noticia (el "—30—" del periodismo) antes del legal */ body[data-edition="Press"] .xp-foot-legal{ margin-top:1.6rem; } body[data-edition="Press"] .xp-foot-legal::before{ content:"— 30 —"; display:block; font-family:"FrauncesXp",Georgia,serif; font-weight:700; letter-spacing:.34em; font-size:1.15rem; opacity:.42; margin-bottom:1.4rem; } /* ---- MAGAZINE: pie vivo con el filete multicolor del ADN ---- */ body[data-edition="Magazine"] .xp-foot-main{ border-top:0; padding-top:1.9rem; } body[data-edition="Magazine"] .xp-foot-main::before{ content:""; display:block; height:4px; width:100%; max-width:none; margin:0 0 1.7rem; border-radius:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--xp-accent), #fff 40%), var(--xp-accent), color-mix(in srgb, var(--xp-accent), #000 22%), var(--xp-accent)); } body[data-edition="Magazine"] .xp-foot-logo{ color:var(--xp-accent); font-size:2.7rem; } body[data-edition="Magazine"] .xp-foot-sections a{ position:relative; } /* ---- BLOG: firma íntima, breve ---- */ body[data-edition="Blog"] .xp-foot-main{ padding-top:1.9rem; } /* ---- Compactación universal: el alto generoso de origen delataba el footer ---- */ .gh-foot{ padding-top:2.8rem; padding-bottom:8rem; } /* 8rem deja sitio para los botones flotantes (volver-arriba der. + panel accesibilidad izq.) — antes 2rem y se pisaban con el copyright al final de la página */ .gh-foot-inner{ gap:1.6rem; } /* el origen metía 40px entre cada bloque */ .gh-subscribe{ margin-top:.4rem; margin-bottom:.6rem; } .xp-foot-legal{ margin-top:.4rem; } .gh-foot .gh-copyright{ margin-top:.2rem; white-space:normal; } /* el origen metía 64px (más específico). white-space:normal: el copyright hereda nowrap del footer Press y en móvil "Made with Xpresiva · Published with Ghost" se salía de pantalla (ensanchaba el doc y recortaba el botón fijo) → que envuelva. */ body[data-edition="Blog"] .xp-foot-logo{ font-weight:600; font-size:1.95rem; } body[data-edition="Blog"] .xp-foot-desc{ font-style:italic; font-size:1.4rem; max-width:36ch; opacity:.7; } /* ---- Barra legal (Aviso/Privacidad/Cookies/Términos): un estilo por edición ---- Quita la hairline genérica (esa "línea arriba y abajo") y da identidad propia: Press = pie de imprenta serif; Magazine = filete de acento; Blog = silencioso. */ .xp-foot-legal{ border-top:0; padding-top:0; } /* Press: imprenta — versalitas serif con filete fino */ body[data-edition="Press"] .xp-foot-legal{ border-top:1px solid currentColor; padding-top:1.1rem; opacity:.9; } body[data-edition="Press"] .xp-foot-legal .nav a{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.16em; font-size:1.05rem; } /* Magazine: filete de acento centrado + enlaces en versalita espaciada */ body[data-edition="Magazine"] .xp-foot-legal{ display:flex; flex-direction:column; align-items:center; gap:1rem; } body[data-edition="Magazine"] .xp-foot-legal::before{ content:""; width:2.6rem; height:3px; border-radius:2px; background:var(--xp-accent); } body[data-edition="Magazine"] .xp-foot-legal .nav a{ text-transform:uppercase; letter-spacing:.12em; font-size:1.1rem; } /* Blog: silencioso, sin filete, tenue */ body[data-edition="Blog"] .xp-foot-legal{ margin-top:1.1rem; } body[data-edition="Blog"] .xp-foot-legal .nav a{ font-size:1.2rem; opacity:.5; } body[data-edition="Blog"] .xp-foot-legal .nav a:hover{ opacity:1; } /* ========================================================================== Página 404 diseñada (error-404.hbs) — detalle que viste profesionalidad ========================================================================== */ .xp-error{ text-align:center; max-width:48rem; margin:0 auto; padding:6rem 1.5rem 7rem; } .xp-error-kicker{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.18em; color:var(--xp-accent); font-weight:700; font-size:1.3rem; margin:0 0 1rem; } .xp-error-title{ font-family:"FrauncesXp",Georgia,serif; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 1.2rem; } .xp-error-text{ color:var(--color-secondary-text); font-size:1.45rem; max-width:42ch; margin:0 auto 2rem; line-height:1.5; } .xp-error-btn{ margin-bottom:3.2rem; } .xp-error-sections{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.7rem; border-top:1px solid var(--color-mid-gray); padding-top:1.9rem; max-width:34rem; margin:0 auto; } .xp-error-sections a{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.2rem; color:var(--color-secondary-text); text-decoration:none; } .xp-error-sections a:hover{ color:var(--xp-accent); } /* (El sticky NO condensa ni reordena el masthead: se queda idéntico al de arriba. Versiones previas lo transformaban a una sola fila y dejaban una línea/banda residual al scrollear; eliminado por simplicidad y coherencia visual.) */ /* ========================================================================== MURO DE SUSCRIPCIÓN (members-only) — Ghost inyecta .gh-post-upgrade-cta al final del preview público, con el color de marca inline. Lo rediseñamos por edición (la copia la pone Ghost; nosotros el aspecto) y lo dejamos en el accent del theme. Override del bg inline con !important. ========================================================================== */ .gh-post-upgrade-cta{ position:relative; margin-top:3.5rem; } .gh-post-upgrade-cta::before{ content:""; position:absolute; left:0; right:0; top:-9rem; height:9rem; background:linear-gradient(to bottom, transparent, var(--color-white)); pointer-events:none; } .gh-post-upgrade-cta-content{ border-radius:0; padding:0; text-align:center; } .gh-post-upgrade-cta-content h2{ font-family:"FrauncesXp",Georgia,serif; letter-spacing:-.01em; margin:0 0 1.4rem; } .gh-post-upgrade-cta-content h2::before{ display:block; font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:1.2rem; margin-bottom:.6rem; } .gh-post-upgrade-cta-content .gh-btn{ border-radius:6px; font-weight:600; } .gh-post-upgrade-cta-content p small{ display:inline-block; margin-top:1rem; } /* Magazine — tarjeta de acento, glossy */ body[data-edition="Magazine"] .gh-post-upgrade-cta-content{ background:linear-gradient(135deg, var(--xp-accent), color-mix(in srgb, var(--xp-accent), #000 20%)) !important; border-radius:12px; padding:3.6rem 2rem; box-shadow:0 22px 55px -26px var(--xp-accent); } body[data-edition="Magazine"] .gh-post-upgrade-cta-content h2{ color:#fff; font-size:2.6rem; } body[data-edition="Magazine"] .gh-post-upgrade-cta-content h2::before{ content:""; position:static; top:auto; left:auto; display:block; width:2rem; height:2rem; margin:0 auto .6rem; border-radius:0; background-color:#fff; opacity:.82; -webkit-mask:var(--xp-lock) center/contain no-repeat; mask:var(--xp-lock) center/contain no-repeat; } body[data-edition="Magazine"] .gh-post-upgrade-cta-content h2{ padding-top:0; margin-top:0; } body[data-edition="Magazine"] .gh-post-upgrade-cta-content .gh-btn{ background:#fff !important; color:var(--xp-accent) !important; } body[data-edition="Magazine"] .gh-post-upgrade-cta-content small, body[data-edition="Magazine"] .gh-post-upgrade-cta-content small a{ color:#fff; } /* Press — austero, tinta sobre papel, doble filete (gate de periódico) */ body[data-edition="Press"] .gh-post-upgrade-cta-content{ background:none !important; border-top:4px double var(--color-darker-gray); border-bottom:4px double var(--color-darker-gray); padding:2.8rem 1rem; } body[data-edition="Press"] .gh-post-upgrade-cta-content h2{ color:var(--color-darker-gray); font-size:2.3rem; } body[data-edition="Press"] .gh-post-upgrade-cta-content h2::before{ content:""; display:block; width:1.9rem; height:1.9rem; margin:0 auto .6rem; background-color:var(--xp-accent); -webkit-mask:var(--xp-lock) center/contain no-repeat; mask:var(--xp-lock) center/contain no-repeat; } body[data-edition="Press"] .gh-post-upgrade-cta-content .gh-btn{ background:var(--color-darker-gray) !important; color:var(--color-white) !important; border-radius:0; } body[data-edition="Press"] .gh-post-upgrade-cta-content small a{ color:var(--xp-accent); } /* Blog — tarjeta cálida, acento suave, personal */ body[data-edition="Blog"] .gh-post-upgrade-cta-content{ background:color-mix(in srgb, var(--xp-accent), var(--color-white) 88%) !important; border:1px solid color-mix(in srgb, var(--xp-accent), var(--color-white) 55%); border-radius:10px; padding:3.2rem 2rem; } body[data-edition="Blog"] .gh-post-upgrade-cta-content h2{ color:var(--color-darker-gray); font-size:2.3rem; } body[data-edition="Blog"] .gh-post-upgrade-cta-content h2::before{ content:""; display:block; width:1.9rem; height:1.9rem; margin:0 auto .6rem; background-color:var(--xp-accent); -webkit-mask:var(--xp-lock) center/contain no-repeat; mask:var(--xp-lock) center/contain no-repeat; } body[data-edition="Blog"] .gh-post-upgrade-cta-content .gh-btn{ background:var(--xp-accent-base, var(--xp-accent)) !important; color:#fff !important; } body[data-edition="Blog"] .gh-post-upgrade-cta-content small a{ color:var(--xp-accent); } /* ========================================================================== Hero de portada (Magazine, Featured) SIN imagen → tratamiento tipográfico intencional (panel de acento sutil + título grande), nunca un hueco roto. Un theme no puede depender de que el post líder lleve foto. ========================================================================== */ body[data-edition="Magazine"] .xp-mag-grid .gh-card.large.no-image .gh-card-wrapper{ background:linear-gradient(135deg, color-mix(in srgb, var(--xp-accent), var(--color-white) 91%), color-mix(in srgb, var(--xp-accent), var(--color-white) 80%)); border:1px solid color-mix(in srgb, var(--xp-accent), var(--color-white) 62%); border-radius:12px; padding:clamp(3rem,6vw,5.5rem) clamp(2rem,5vw,5rem); text-align:center; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large.no-image .gh-card-title{ font-size:clamp(3.2rem,6vw,5.4rem); } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large.no-image .gh-card-tag{ justify-content:center; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large.no-image .gh-card-excerpt{ margin:1rem auto 1.2rem; max-width:52ch; } body[data-edition="Magazine"] .xp-mag-grid .gh-card.large.no-image .gh-card-footer{ justify-content:center; } /* ========================================================================== PÁGINA DE PRECIOS (page-pricing.hbs) — tabla de 3 tiers diseñada por el theme, dirigida por el accent (sirve a las 3 ediciones). En real se alimentaría de {{#get "tiers"}}; aquí son de ejemplo. ========================================================================== */ .xp-pricing{ max-width:108rem; margin:0 auto; padding:1rem 0 4rem; } .xp-pricing-head{ text-align:center; max-width:60rem; margin:0 auto 3.6rem; } .xp-pricing-eyebrow{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:1.3rem; color:var(--xp-accent); margin:0 0 .8rem; } .xp-pricing-title{ font-family:"FrauncesXp",Georgia,serif; font-size:clamp(3rem,5vw,4.6rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 1rem; text-wrap:balance; } .xp-pricing-sub{ font-size:1.7rem; line-height:1.5; color:var(--color-secondary-text); margin:0; text-wrap:balance; } /* la rejilla se adapta al nº de tiers del cliente (2, 3, 4…) y llena el ancho */ .xp-pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.6rem; align-items:start; } .xp-tier{ display:flex; flex-direction:column; background:var(--color-white); border:1px solid var(--color-light-gray); border-radius:14px; padding:2.4rem 1.9rem; } .xp-tier-featured{ border-color:var(--xp-accent); box-shadow:0 24px 60px -30px var(--xp-accent); position:relative; } @media(min-width:861px){ .xp-tier-featured{ transform:scale(1.04); } } .xp-tier-badge{ position:absolute; top:-1.1rem; left:50%; transform:translateX(-50%); background:var(--xp-accent-base, var(--xp-accent)); color:#fff; font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:1.1rem; padding:.35rem 1rem; border-radius:999px; white-space:nowrap; } .xp-tier-name{ font-family:"FrauncesXp",Georgia,serif; font-size:1.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--xp-accent); margin:0 0 1rem; } .xp-tier-price{ display:flex; align-items:baseline; gap:.3rem; margin-bottom:1rem; } .xp-tier-amount{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; font-size:4.4rem; line-height:1; letter-spacing:-.02em; } .xp-tier-per{ color:var(--color-secondary-text); font-size:1.5rem; } .xp-tier-price{ margin-bottom:.35rem; } .xp-tier-yearly{ color:var(--color-secondary-text); font-size:1.3rem; margin:0 0 1rem; } .xp-tier-desc{ color:var(--color-secondary-text); font-size:1.55rem; line-height:1.5; margin:0 0 1.6rem; min-height:4.6rem; } .xp-tier-feats{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:.8rem; } .xp-tier-feats li{ position:relative; padding-left:2.4rem; font-size:1.5rem; line-height:1.4; } .xp-tier-feats li::before{ content:""; position:absolute; left:0; top:.15em; width:1.6rem; height:1.6rem; border-radius:50%; background:color-mix(in srgb, var(--xp-accent), var(--color-white) 80%); } .xp-tier-feats li::after{ content:""; position:absolute; left:.5rem; top:.42em; width:.6rem; height:.32rem; border-left:2px solid var(--xp-accent); border-bottom:2px solid var(--xp-accent); transform:rotate(-45deg); } .xp-tier-btn{ margin-top:auto; width:100%; text-align:center; } .xp-tier:not(.xp-tier-featured) .xp-tier-btn{ background:none; border:1px solid var(--color-mid-gray); color:var(--color-darker-gray); } .xp-tier:not(.xp-tier-featured) .xp-tier-btn:hover{ border-color:var(--xp-accent); color:var(--xp-accent); } .xp-pricing-note{ text-align:center; color:var(--color-secondary-text); font-size:1.3rem; margin:3rem auto 0; } @media(max-width:860px){ .xp-pricing-grid{ grid-template-columns:1fr; max-width:42rem; margin:0 auto; } .xp-tier-badge{ top:-1rem; } } /* ========================================================================== FICHA DE SOCIO (account.hbs) — el overlay del Portal no es estilizable, así que damos una página de cuenta propia, con identidad por edición. ========================================================================== */ .xp-account{ max-width:44rem; margin:0 auto; padding:4rem 1.5rem 6rem; } .xp-account-card{ position:relative; background:var(--color-white); border:1px solid var(--color-light-gray); border-radius:16px; padding:3rem 2.4rem; text-align:center; } .xp-account-avatar{ width:84px; height:84px; border-radius:50%; margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center; overflow:hidden; background:color-mix(in srgb, var(--xp-accent), var(--color-white) 84%); color:var(--xp-accent); } .xp-account-avatar img{ width:100%; height:100%; object-fit:cover; } .xp-account-avatar svg{ width:42px; height:42px; } .xp-account-name{ font-family:"FrauncesXp",Georgia,serif; font-size:2.4rem; line-height:1.1; margin:0 0 .2rem; } .xp-account-email{ color:var(--color-secondary-text); font-size:1.45rem; margin:0 0 1.8rem; } .xp-account-plan{ display:flex; align-items:baseline; justify-content:center; gap:.6rem; flex-wrap:wrap; padding-top:1.7rem; border-top:1px solid var(--color-light-gray); } .xp-account-plan-name{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.12em; font-size:1.3rem; color:var(--xp-accent); } .xp-account-plan-price{ font-family:"FrauncesXp",Georgia,serif; font-weight:700; font-size:2rem; } .xp-account-plan-per{ font-size:1.3rem; color:var(--color-secondary-text); font-weight:400; } .xp-account-meta{ list-style:none; margin:1rem 0 2.1rem; padding:0; display:flex; flex-direction:column; gap:.4rem; color:var(--color-secondary-text); font-size:1.4rem; } .xp-account-actions{ display:flex; flex-direction:column; gap:1rem; align-items:center; } .xp-account-btn{ width:100%; max-width:30rem; text-align:center; } .xp-account-btn-ghost{ background:none; border:1px solid var(--color-mid-gray); color:var(--color-darker-gray); } .xp-account-btn-ghost:hover{ border-color:var(--xp-accent); color:var(--xp-accent); } .xp-account-signout{ color:var(--color-secondary-text); text-decoration:none; font-size:1.35rem; margin-top:.4rem; } .xp-account-signout:hover{ color:var(--xp-accent); } .xp-account-guest{ text-align:center; } /* Press = pase de prensa (doble filete Oxford, esquinas rectas, kicker) */ body[data-edition="Press"] .xp-account-card{ border:0; border-radius:0; border-top:3px solid var(--color-darker-gray); border-bottom:1px solid var(--color-darker-gray); padding-top:2.4rem; } body[data-edition="Press"] .xp-account-card::before{ content:"— " attr(data-kicker) " —"; display:block; font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.3em; font-size:1.1rem; color:var(--xp-accent); margin-bottom:1.4rem; } body[data-edition="Press"] .xp-account-avatar{ border-radius:0; border:1px solid var(--color-darker-gray); background:none; } /* Magazine = tarjeta de socio glossy (filete multicolor + nombre en acento + pill) */ body[data-edition="Magazine"] .xp-account-card{ border:0; overflow:hidden; padding-top:3.4rem; box-shadow:0 26px 64px -36px var(--xp-accent); } body[data-edition="Magazine"] .xp-account-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--xp-accent), #fff 40%), var(--xp-accent), color-mix(in srgb, var(--xp-accent), #000 22%), var(--xp-accent)); } body[data-edition="Magazine"] .xp-account-name{ color:var(--xp-accent); } body[data-edition="Magazine"] .xp-account-plan-name{ background:color-mix(in srgb, var(--xp-accent), var(--color-white) 84%); padding:.3rem .9rem; border-radius:999px; } /* Blog = saludo cálido, sin chrome de tarjeta */ body[data-edition="Blog"] .xp-account-card{ border:0; background:none; box-shadow:none; padding:2rem 0; } body[data-edition="Blog"] .xp-account-avatar{ background:none; border:1px solid var(--color-light-gray); } body[data-edition="Blog"] .xp-account-name{ font-weight:600; } /* ========================================================================== PRESS — "The Xpresiva Times": NAMEPLATE de periódico ESTÁTICO (se va con el scroll, lo opuesto al Magazine) + barra fina pegajosa al bajar. Tinta y filetes, austero y rígido. Color casi solo en hover de enlaces. ========================================================================== */ body[data-edition="Press"] .gh-head{ position:static !important; border-bottom:1px solid var(--color-darker-gray); padding-top:1.2rem; } body[data-edition="Press"].is-head-stacked .gh-head-brand-wrapper{ display:flex; flex-direction:column; align-items:center; width:100%; } /* Nameplate: serif pesado, tinta, centrado, grande */ body[data-edition="Press"] .gh-head-logo, body[data-edition="Press"] .gh-head-logo a{ font-family:"FrauncesXp",Georgia,serif; font-weight:800; font-size:clamp(3.4rem,7vw,6.6rem); line-height:.96; letter-spacing:-.02em; color:var(--color-darker-gray); text-align:center; } /* Línea de edición (reaprovecha .xp-masthead-date): doble filete Oxford + Vol/Nº/edición */ body[data-edition="Press"] .xp-masthead-date{ display:flex; justify-content:space-between; align-items:center; width:100%; max-width:62rem; margin:1.1rem auto .2rem; padding:.45rem 0; border-top:3px solid var(--color-darker-gray); border-bottom:1px solid var(--color-darker-gray); font-family:"FrauncesXp",Georgia,serif; font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-darker-gray); gap:1rem; } body[data-edition="Press"] .xp-masthead-date::before, body[data-edition="Press"] .xp-masthead-date::after{ display:none; } body[data-edition="Press"] .xp-md-strap{ flex:0 0 auto; } body[data-edition="Press"] .xp-md-date{ flex:0 0 auto; } /* Barra de secciones bajo el nameplate */ body[data-edition="Press"] .gh-head-menu{ justify-content:center; border:0 !important; margin-top:.5rem; padding:0; } body[data-edition="Press"] .gh-head-menu::before, body[data-edition="Press"] .gh-head-menu::after{ display:none; } body[data-edition="Press"] .gh-head-menu .nav{ gap:1.4rem; } body[data-edition="Press"] .gh-head-menu .nav a{ font-family:"FrauncesXp",Georgia,serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:1.2rem; color:var(--color-darker-gray); } body[data-edition="Press"] .gh-head-menu .nav a:hover{ color:var(--xp-accent); } /* Barra FINA PEGAJOSA: aparece al bajar (cuando el nameplate ya se fue). */ body[data-edition="Press"] .xp-press-bar{ position:fixed; top:0; left:0; right:0; z-index:120; background:var(--color-white); border-bottom:2px solid var(--color-darker-gray); transform:translateY(-100%); transition:transform .25s ease; } body[data-edition="Press"].xp-scrolled-far .xp-press-bar{ transform:translateY(0); } body[data-edition="Press"] .xp-press-bar-inner{ display:flex; align-items:center; gap:2rem; padding:.75rem 0; } body[data-edition="Press"] .xp-press-bar-name{ font-family:"FrauncesXp",Georgia,serif; font-weight:800; font-size:1.7rem; color:var(--color-darker-gray); text-decoration:none; white-space:nowrap; } body[data-edition="Press"] .xp-press-bar-nav{ flex:1 1 auto; } body[data-edition="Press"] .xp-press-bar-nav .nav{ display:flex; flex-wrap:wrap; gap:1.6rem; list-style:none; margin:0; padding:0; } body[data-edition="Press"] .xp-press-bar-nav .nav a{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.25rem; color:var(--color-darker-gray); text-decoration:none; } body[data-edition="Press"] .xp-press-bar-nav .nav a:hover{ color:var(--xp-accent); } body[data-edition="Press"] .xp-press-bar .gh-icon-btn{ color:var(--color-darker-gray); } /* Press NO usa la dateline tipo Magazine en ningún otro sitio */ /* Press: la lupa del brand se solapaba con el nameplate centrado → fuera (el buscador vive en la barra fina pegajosa). */ body[data-edition="Press"] .gh-head-brand .gh-search{ display:none; } /* Share del sidebar en COLUMNA limpia (el componente es flex-wrap; al estrechar el host, los iconos quedan 1 por fila en vez de partirse 2-3). Press + Magazine. */ body[data-edition="Press"] .gh-article-sidebar .gh-share, body[data-edition="Magazine"] .gh-article-sidebar .gh-share{ width:4rem; } /* Press: agrupar acciones (toggle+buscador izq, miembros der) → la lupa deja de pisar el nameplate centrado. */ body[data-edition="Press"].is-head-stacked .gh-head-actions{ justify-content:flex-start; gap:.6rem; } body[data-edition="Press"].is-head-stacked .gh-head-actions .gh-head-members{ margin-left:auto; } /* ========================================================================== PRESS — layouts de home GRID y LIST (homepage_layout), clave periódico. ========================================================================== */ /* GRID: lead a todo el ancho (imagen+titular) + rejilla densa de 3 columnas. */ .xp-press-grid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:2.8rem; } body[data-edition="Press"] .xp-press-grid > .gh-card{ padding:1.8rem 0; border-top:1px solid var(--color-light-gray); } body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(-n+4){ border-top:0; } body[data-edition="Press"] .xp-press-grid .gh-card-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:1.85rem; line-height:1.14; margin:.4rem 0 0; } body[data-edition="Press"] .xp-press-grid .gh-card-image{ margin-bottom:0; } body[data-edition="Press"] .xp-press-grid .gh-card-image img{ width:100%; aspect-ratio:3/2; object-fit:cover; } body[data-edition="Press"] .xp-press-grid .gh-card-excerpt{ display:none; } /* Lead = primera tarjeta, a todo el ancho, imagen izq + titular der */ body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(1){ grid-column:1 / -1; border-bottom:3px double var(--color-darker-gray); padding-bottom:2.4rem; margin-bottom:.4rem; } body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(1) .gh-card-link{ display:grid; grid-template-columns:1.5fr 1fr; gap:2.8rem; align-items:center; } body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(1) .gh-card-title{ font-size:clamp(2.6rem,4vw,3.8rem); line-height:1.04; } body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(1) .gh-card-excerpt{ display:block; font-size:1.6rem; line-height:1.45; color:var(--color-secondary-text); margin-top:.8rem; } @media(max-width:760px){ .xp-press-grid{ grid-template-columns:1fr; } body[data-edition="Press"] .xp-press-grid > .gh-card:nth-child(1) .gh-card-link{ grid-template-columns:1fr; gap:1rem; } } /* LIST: teletipo "In Brief" — sección · titular · fecha, denso y reglado. */ .xp-press-wire{ max-width:82rem; margin:0 auto; } .xp-press-wire-head{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.16em; font-size:1.5rem; border-top:3px solid var(--color-darker-gray); border-bottom:1px solid var(--color-darker-gray); padding:.6rem 0; margin:0 0 .4rem; } .xp-wire-row{ border-bottom:1px solid var(--color-light-gray); } .xp-wire-link{ display:grid; grid-template-columns:8rem 1fr auto; gap:1.6rem; align-items:baseline; padding:1.05rem 0; text-decoration:none; color:inherit; } .xp-wire-kicker{ font-family:"FrauncesXp",Georgia,serif; text-transform:uppercase; letter-spacing:.1em; font-size:1.1rem; color:var(--xp-accent); white-space:nowrap; } .xp-wire-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:600; font-size:1.8rem; line-height:1.2; color:var(--color-darker-gray); } .xp-wire-link:hover .xp-wire-title{ color:var(--xp-accent); } .xp-wire-date{ font-size:1.2rem; color:var(--color-secondary-text); text-transform:uppercase; white-space:nowrap; } @media(max-width:560px){ .xp-wire-link{ grid-template-columns:1fr; gap:.2rem; } .xp-wire-date{ display:none; } } /* ========================================================================== PRESS — 404 "Stop the press" + página de autor (columnista), clave tinta. ========================================================================== */ /* 404 austero: enmarcado en doble filete Oxford */ body[data-edition="Press"] .xp-error{ border-top:4px double var(--color-darker-gray); border-bottom:4px double var(--color-darker-gray); padding-top:4.5rem; padding-bottom:4.5rem; } body[data-edition="Press"] .xp-error-kicker{ color:var(--xp-accent); } body[data-edition="Press"] .xp-error-title{ font-weight:800; } body[data-edition="Press"] .xp-error-sections{ border-color:var(--color-darker-gray); } /* Autor = columnista: nombre serif pesado tinta, antetítulo "COLUMNIST", doble filete bajo la cabecera, avatar con ribete fino, feed reglado. */ body[data-edition="Press"] .xp-author-head{ text-align:center; max-width:62rem; margin-inline:auto; padding:3rem 1.5rem 1.6rem; border-bottom:3px double var(--color-darker-gray); } body[data-edition="Press"] .xp-author-avatar{ width:92px; height:92px; border:1px solid var(--color-darker-gray); box-shadow:none; } body[data-edition="Press"] .xp-author-name{ font-family:"FrauncesXp",Georgia,serif; font-weight:800; color:var(--color-darker-gray); } body[data-edition="Press"] .xp-author-name::before{ content:attr(data-kicker); display:block; font-family:"FrauncesXp",Georgia,serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:1.2rem; color:var(--xp-accent); margin-bottom:.5rem; } body[data-edition="Press"] .xp-author-bio{ font-style:italic; } body[data-edition="Press"] .xp-author-feed{ max-width:62rem; margin-inline:auto; } body[data-edition="Press"] .xp-author-feed .xp-mag-grid{ display:block; } body[data-edition="Press"] .xp-author-feed .gh-card{ display:block; padding:1.7rem 0; border-bottom:1px solid var(--color-light-gray); } body[data-edition="Press"] .xp-author-feed .gh-card.large{ grid-column:auto; } body[data-edition="Press"] .xp-author-feed .gh-card-title{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:clamp(2rem,2.6vw,2.5rem); line-height:1.16; } body[data-edition="Press"] .xp-author-feed .gh-card-link:hover .gh-card-title{ color:var(--xp-accent); } body[data-edition="Press"] .xp-author-feed .gh-card-image{ max-height:32vh; overflow:hidden; } /* ========================================================================== ARTÍCULO — meta EN LÍNEA (no el rail lateral de headline) en Magazine y Press. Quita el clásico "sidebar" de headline (lo más reconocible del tema base) y de paso evita que el share pise la imagen ancha. El share va en su propia línea, horizontal. (Blog ya iba en línea.) ========================================================================== */ body[data-edition="Magazine"] .gh-article-sidebar, body[data-edition="Press"] .gh-article-sidebar{ position:static !important; left:auto !important; grid-column:1 / -1; max-width:none; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; } body[data-edition="Magazine"] .gh-article-sidebar{ justify-content:center; margin:1.6rem auto 0; } body[data-edition="Press"] .gh-article-sidebar{ justify-content:flex-start; margin:1.2rem 0 0; } /* Share: su propia línea, horizontal (deshacemos el ancho de columna anterior) */ body[data-edition="Magazine"] .gh-article-sidebar .gh-share, body[data-edition="Press"] .gh-article-sidebar .gh-share{ width:auto !important; flex-basis:100%; display:flex; margin-top:.5rem; } body[data-edition="Magazine"] .gh-article-sidebar .gh-share{ justify-content:center; } body[data-edition="Press"] .gh-article-sidebar .gh-share{ justify-content:flex-start; } /* Alinear la meta en línea con la COLUMNA DE CONTENIDO (no todo el canvas) */ body[data-edition="Magazine"] .gh-article-sidebar, body[data-edition="Press"] .gh-article-sidebar{ grid-column: main-start / main-end; } /* ========================================================================== PASADA DE FIRMA — cuerpo del artículo (.gh-content) con identidad propia por edición. El objetivo: que el cuerpo NO se lea como el theme base. ========================================================================== */ /* Enlaces de texto: subrayado de marca (universal, sutil) */ .gh-content a:not([class*="kg-"]):not(.gh-btn){ color:var(--color-darker-gray); text-decoration:underline; text-decoration-color:var(--xp-accent); text-decoration-thickness:.11em; text-underline-offset:.2em; transition:color .18s; } .gh-content a:not([class*="kg-"]):not(.gh-btn):hover{ color:var(--xp-accent); } /* Pies de figura */ .gh-content figcaption{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:1.35rem; color:var(--color-secondary-text); text-align:center; margin-top:.8rem; } /* --- MAGAZINE: divisor multicolor (ADN de marca) --- */ body[data-edition="Magazine"] .gh-content hr{ border:0; height:3px; width:6rem; margin:3.4rem auto; border-radius:2px; background:linear-gradient(90deg,var(--xp-coral),var(--xp-indigo),var(--xp-amber),var(--xp-teal)); } /* --- PRESS: clave imprenta --- */ body[data-edition="Press"] .gh-content h2, body[data-edition="Press"] .gh-content h3{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); text-transform:uppercase; letter-spacing:.08em; color:var(--color-darker-gray); } body[data-edition="Press"] .gh-content h2{ font-size:1.95rem; border-top:1px solid var(--color-darker-gray); padding-top:.9rem; margin-top:2.4em; } body[data-edition="Press"] .gh-content h3{ font-size:1.45rem; letter-spacing:.14em; color:var(--color-secondary-text); } body[data-edition="Press"] .gh-content blockquote{ border:0; border-top:3px double var(--color-darker-gray); border-bottom:3px double var(--color-darker-gray); padding:1.9rem 1rem; margin:2.6rem 0; text-align:center; font-family:"FrauncesXp",Georgia,serif; font-style:normal; font-weight:600; font-size:clamp(1.9rem,2.6vw,2.5rem); line-height:1.3; color:var(--color-darker-gray); } body[data-edition="Press"] .gh-content blockquote p{ margin:0; } body[data-edition="Press"] .gh-content hr{ border:0; border-top:3px solid var(--color-darker-gray); width:7rem; margin:3rem auto; } body[data-edition="Press"] .gh-content ul{ list-style:none; padding-left:1.6rem; } body[data-edition="Press"] .gh-content ul > li{ position:relative; } body[data-edition="Press"] .gh-content ul > li::before{ content:"\2014"; position:absolute; left:-1.8rem; color:var(--xp-accent); font-weight:700; } /* --- BLOG: clave íntima --- */ body[data-edition="Blog"] .gh-content h2{ font-family:"FrauncesXp",Georgia,serif; font-weight:var(--xp-title-weight); font-size:2.3rem; letter-spacing:-.01em; } body[data-edition="Blog"] .gh-content h2::before{ content:""; display:block; width:2.6rem; height:2px; background:var(--xp-accent); margin-bottom:1rem; } body[data-edition="Blog"] .gh-content blockquote{ border:0; position:relative; margin:2.6rem 0 2.6rem 1.2rem; padding-left:2.2rem; font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:2rem; line-height:1.45; color:var(--color-darker-gray); } body[data-edition="Blog"] .gh-content blockquote::before{ content:"\201C"; position:absolute; left:-.4rem; top:-.2rem; font-size:4.4rem; line-height:1; color:var(--xp-accent); opacity:.45; } body[data-edition="Blog"] .gh-content blockquote p{ margin:0; } body[data-edition="Blog"] .gh-content hr{ border:0; height:auto; text-align:center; margin:3.2rem 0; } body[data-edition="Blog"] .gh-content hr::after{ content:"\2042"; color:var(--xp-accent); font-size:2.2rem; } /* ========================================================================== masthead_strapline en las 3 ediciones (un ajuste, su forma por sabor): Press = línea de edición (Vol·Nº·ciudad); Magazine = nº/temporada junto a la fecha; Blog = tagline bajo el wordmark. ========================================================================== */ /* Magazine: el strapline precede a la fecha, separado por un punto */ body[data-edition="Magazine"] .xp-md-strap::after{ content:"·"; margin:0 .55em; opacity:.5; } /* Blog: tagline (sin fecha) bajo el wordmark; solo si hay strapline */ body[data-edition="Blog"] .gh-head-brand-wrapper{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; } body[data-edition="Blog"] .xp-masthead-date{ display:none; } body[data-edition="Blog"] .xp-masthead-date:has(.xp-md-strap){ display:block; } body[data-edition="Blog"] .xp-md-date{ display:none; } body[data-edition="Blog"] .xp-md-strap{ font-family:"FrauncesXp",Georgia,serif; font-style:italic; font-size:1.4rem; letter-spacing:0; text-transform:none; color:var(--color-secondary-text); } /* Magazine: proporción consistente en las tarjetas de sección (alturas cuadradas) */ body[data-edition="Magazine"] .gh-topic .gh-card-image img{ aspect-ratio:16/10; object-fit:cover; width:100%; } /* Blog: el tagline no lleva líneas-flanco (cruzaban el texto en móvil) */ body[data-edition="Blog"] .xp-masthead-date::before, body[data-edition="Blog"] .xp-masthead-date::after{ display:none; } /* Press móvil: la línea de edición se apila y centra (no se amontona) */ @media(max-width:600px){ body[data-edition="Press"] .xp-masthead-date{ flex-direction:column; gap:.2rem; max-width:none; text-align:center; letter-spacing:.1em; font-size:1.05rem; } } /* Toggle claro/oscuro visible en la barra MÓVIL (sin abrir el menú) */ .xp-mobile-toggle{ display:none; } @media(max-width:880px){ .xp-mobile-toggle{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; } } /* ========================================================================== PRESS — cabecera en MÓVIL: el nameplate cabía mal (2 líneas) y los controles (toggle/menú) cruzaban los filetes; la barra sticky amontonaba el menú en 3 filas. Solución: nameplate a una línea, controles fijados arriba-derecha, y barra condensada = cabecera + buscador (sin menú apretado). ========================================================================== */ @media(max-width:680px){ /* Los controles (modo claro/oscuro + menú) van en una FRANJA PROPIA arriba-derecha; el nameplate va DEBAJO, centrado, sin que nada lo pise (adiós "sol tras la S"). */ body[data-edition="Press"] .gh-head-brand{ position:relative; padding-top:2.6rem; } body[data-edition="Press"] .gh-head-brand .xp-mobile-toggle, body[data-edition="Press"] .gh-head-brand .gh-burger{ position:absolute; top:0; z-index:5; } body[data-edition="Press"] .gh-head-brand .gh-burger{ right:0; } body[data-edition="Press"] .gh-head-brand .xp-mobile-toggle{ right:2.8rem; margin-left:0; } body[data-edition="Press"] .gh-head-brand-wrapper{ padding-top:0; } /* el wordmark a una línea (ya sin controles a los lados) */ body[data-edition="Press"] .gh-head-logo, body[data-edition="Press"] .gh-head-logo a{ font-size:clamp(1.75rem,7.4vw,3.2rem); } /* barra sticky: cabecera + modo + buscador, con margen lateral (no pegada a los bordes) */ body[data-edition="Press"] .xp-press-bar-nav{ display:none; } body[data-edition="Press"] .xp-press-bar-inner{ justify-content:flex-start; gap:.4rem; padding:.6rem 1.2rem; } body[data-edition="Press"] .xp-press-bar-name{ font-size:1.45rem; margin-right:auto; } } /* ========================================================================== MAGAZINE — cabecera en MÓVIL: faltaba aire bajo el filete multicolor y la línea de "issue/fecha" salía amontonada con sus líneas-flanco. ========================================================================== */ @media(max-width:600px){ body[data-edition="Magazine"] .gh-head-inner{ padding-top:1.3rem; } body[data-edition="Magazine"] .xp-masthead-date{ gap:.45rem; font-size:.9rem; letter-spacing:.06em; flex-wrap:wrap; margin-top:.5rem; } body[data-edition="Magazine"] .xp-masthead-date::before, body[data-edition="Magazine"] .xp-masthead-date::after{ display:none; } } /* ---------- Selector de idioma (multiidioma opt-in) ---------- */ .xp-lang{ display:inline-flex; align-items:center; gap:.1rem; font-size:.8rem; line-height:1; } /* Sitio monolingüe (0 o 1 idioma con contenido): el selector no aparece. */ .xp-lang:not(:has(.xp-lang-opt + .xp-lang-opt)){ display:none; } .xp-lang-globe{ opacity:.6; margin-right:.25rem; flex:0 0 auto; } .xp-lang-opt{ display:inline-block; padding:.3rem .42rem; border-radius:.4rem; color:inherit; opacity:.62; text-decoration:none; white-space:nowrap; font-weight:500; transition:opacity .15s, background-color .15s; } .xp-lang-opt:hover{ opacity:1; } .xp-lang-opt.is-active{ opacity:1; color:var(--xp-accent); font-weight:700; } /* Hasta que el script marca el idioma activo, evita el parpadeo de "todas iguales" */ .xp-lang:not([data-ready]) .xp-lang-opt{ opacity:.62; } @media(max-width:600px){ .xp-lang{ font-size:.78rem; } .xp-lang-globe{ display:none; } .xp-lang-opt{ padding:.3rem .35rem; } } /* Sin scroll horizontal accidental: en móvil, el menú apilado (.gh-head-menu) queda ancho en el flujo aunque la navegación la lleve la hamburguesa, y ensanchaba la página → el botón fijo "volver arriba" se iba a la derecha (visible solo tras scroll horizontal). overflow-x:clip lo recorta sin romper la cabecera sticky (clip, a diferencia de hidden, no crea contenedor de scroll). */ html, body { overflow-x: clip; } /* Foco de teclado visible y de marca. Antes el theme no definía :focus-visible y dependía solo del anillo por defecto del navegador; esto da un foco consistente con el acento (mode-aware) sin afectar al ratón (:focus-visible solo en teclado). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--xp-accent, #C9303A); outline-offset: 2px; } /* Fallback para navegadores sin :has() (p.ej. Safari <15.4): la rejilla Magazine usa :has() para que la última tarjeta abarque el ancho; sin :has() degrada bien, y aquí le damos un mínimo razonable (la última tarjeta impar abarca, para no quedar suelta). */ @supports not (selector(:has(*))) { .xp-mag-grid > .gh-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }