/* ==========================================================================
   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-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%); }
.gh-btn, .gh-primary-btn, .gh-subscribe-btn{ background-color: var(--xp-accent); border-color: var(--xp-accent); color:#fff; }
/* Hover: el base ponía el texto en color de acento (esperando fondo claro) → sobre
   nuestro fondo de acento se volvía invisible. Oscurecemos el fondo y texto blanco. */
.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), #000 15%); border-color: color-mix(in srgb, var(--xp-accent), #000 15%); color:#fff; }
.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:700; 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:700; 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:700; 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:700; 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: <div class="historical-date">)
   ========================================================================== */
.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 <figure class="kg-embed-card xp-embed [xp-embed-vertical]">.
   ========================================================================== */
.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")
   ========================================================================== */
@font-face{font-family:"FrauncesXp";src:url("../fonts/fraunces-700.woff2") format("woff2");font-weight: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; }

/* 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; 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; 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:700; 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ª <section>) */
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:700; 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; } }

/* 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; }
.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:2rem; }
.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; }  /* el origen metía 64px (más específico) */
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:"Members"; position:static; top:auto; left:auto; width:auto; height:auto; background:none; border-radius:0; display:block; margin:0 0 .6rem; color:#fff; opacity:.82; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:1.2rem; }
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:"Subscribers only"; color:var(--xp-accent); }
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:"For members"; color:var(--xp-accent); }
body[data-edition="Blog"] .gh-post-upgrade-cta-content .gh-btn{ background: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); 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; opacity:.85; }
.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:"— Press Pass —"; 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:2.4rem; }
body[data-edition="Press"] .gh-head-menu .nav a{ font-family:"FrauncesXp",Georgia,serif; font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:1.35rem; 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:700; 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:"Columnist"; 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:700; 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:700; 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:700; 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; }
}