/* =============================================================
 * HIVEK BLOG — composición
 * Se carga DESPUÉS de hivek-theme.css y sólo usa sus tokens (--hv-*).
 * Reglas heredadas del sistema: fondo vacío, texto hueso, cobalto para la
 * acción, polen sólo en detalles diminutos, líneas de un pixel, sin radios en
 * las cajas de contenido (6px únicamente en botones).
 * ============================================================= */

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; width: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--hv-cobalto); outline-offset: 3px; }

.hv-skip { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--hv-hueso); color: var(--hv-vacio); padding: 10px 20px; z-index: 999; font-weight: 600; }
.hv-skip:focus { top: 0; }

.hv-main { flex: 1 1 auto; }
.hv-narrow { max-width: 1180px; margin-inline: auto; padding-inline: var(--hv-pad); }

/* ---------- Header del blog ---------- */
.hv-blog-header { position: sticky; top: 0; z-index: 60; background: rgba(5,7,13,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hv-line); }
.hv-blog-header-inner { height: 64px; display: flex; align-items: center; gap: 28px; }
.hv-wordmark { display: flex; align-items: baseline; gap: 8px; font-size: 19px; font-weight: 700; letter-spacing: -.04em; color: var(--hv-hueso); }
.hv-wordmark:hover { color: var(--hv-hueso); }
.hv-wordmark small { font-family: var(--hv-mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-text-3); }
.hv-blog-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hv-blog-nav a { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,242,238,.62); }
.hv-blog-nav a:hover, .hv-blog-nav a[aria-current="page"] { color: var(--hv-hueso); }
.hv-header-actions { display: flex; align-items: center; gap: 12px; }

@media (max-width: 860px) {
  .hv-blog-nav { gap: 14px; }
  /* Global y no sólo dentro de la nav: el CTA del header también lo usa y se
     salía de la pantalla. */
  .hv-nav-wide { display: none !important; }
}

/* Debajo de 460px ya no caben en un renglón el logotipo, la navegación y el
   botón de sesión, aunque el CTA ya esté oculto: el contenido pide 395px y a
   360 sólo hay 345.

   No había scroll lateral que lo delatara porque el body recorta lo que se
   sale, así que el botón "Entrar" aparecía cortado por el borde derecho sin
   más aviso, y cuanto más estrecho el teléfono, más se comía: 25px a 390,
   55px a 360, 95px a 320. Es decir, en la práctica en todos.

   Dos renglones caben siempre: arriba el logotipo y la sesión, debajo la
   navegación. La cabecera es sticky, así que el alto se deja al mínimo. */
@media (max-width: 460px) {
  .hv-blog-header-inner {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding-block: 9px;
  }
  .hv-header-actions { order: 2; margin-left: auto; }
  .hv-blog-nav { order: 3; flex: 1 0 100%; margin-left: 0; gap: 18px; }

  /* Los enlaces de la navegación medían 14px de alto, que es el alto del texto
     y nada más: acertarles con el pulgar es cuestión de suerte. El relleno los
     lleva a 34, y se le quita al contenedor lo que ellos aportan para que la
     cabecera no crezca de más: es sticky y cada píxel se lo come al artículo. */
  .hv-blog-nav a { padding-block: 10px; }
  .hv-blog-header-inner { padding-block: 6px 0; }
}

/* ---------- Masthead ---------- */
.hv-masthead { padding-block: clamp(44px, 7vw, 92px) clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--hv-line-3); }
.hv-masthead-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hv-masthead h1 { font-size: clamp(38px, 6.6vw, 96px); font-weight: 700; line-height: .96; letter-spacing: -.045em; max-width: 22ch; }
.hv-masthead .hv-lede { margin-top: 20px; max-width: 56ch; }

/* ---------- Portada destacada ---------- */
.hv-feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0 clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(36px, 5vw, 68px); border-bottom: 1px solid var(--hv-line-3); }
.hv-feature-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hv-noche); }
.hv-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hv-slow) var(--hv-ease); }
.hv-feature:hover .hv-feature-media img { transform: scale(1.03); }
.hv-feature-body h2 { font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; margin-block: 16px 14px; }
.hv-feature-body h2 a { color: var(--hv-hueso); }
.hv-feature-body h2 a:hover { color: var(--hv-cobalto); }
.hv-feature-body .hv-body { max-width: 50ch; }
.hv-feature-foot { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .hv-feature { grid-template-columns: 1fr; gap: 24px; }
  .hv-feature-media { aspect-ratio: 16 / 9; order: -1; }
}

/* ---------- Filtros ---------- */
.hv-filters { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; padding-block: 26px; border-bottom: 1px solid var(--hv-line); }
.hv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-chip { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-text-3); padding: 7px 13px; border: 1px solid var(--hv-line-2); transition: color var(--hv-fast), border-color var(--hv-fast); white-space: nowrap; }
.hv-chip:hover { color: var(--hv-hueso); border-color: var(--hv-line-3); }
.hv-chip.is-active { color: var(--hv-vacio); background: var(--hv-hueso); border-color: var(--hv-hueso); }
.hv-search { flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.hv-search input { width: 100%; font: 400 15px var(--hv-sans); color: var(--hv-hueso); background: transparent; border: 0; border-bottom: 1px solid rgba(244,242,238,.24); padding: 9px 0; outline: none; }
.hv-search input:focus { border-color: var(--hv-cobalto); }

/* ---------- Fila de artículo (el patrón de lista del sistema) ---------- */
.hv-post-row { display: grid; grid-template-columns: 74px 1fr 176px; gap: 12px 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid rgba(244,242,238,.10); transition: padding-left .3s var(--hv-ease); }
.hv-post-row:hover { padding-left: 14px; }
.hv-post-row-date { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .06em; color: var(--hv-text-4); padding-top: 5px; white-space: nowrap; }
.hv-post-row-main { min-width: 0; }
.hv-post-row-tagline { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.hv-post-row h3 { font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; max-width: 30ch; }
.hv-post-row h3 a { color: var(--hv-hueso); }
.hv-post-row h3 a:hover { color: var(--hv-cobalto); }
.hv-post-row p { font-size: 15px; line-height: 1.6; color: var(--hv-text-3); margin-top: 9px; max-width: 62ch; }
.hv-post-row-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hv-noche); border: 1px solid var(--hv-line); }
.hv-post-row-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .hv-post-row { grid-template-columns: 1fr; gap: 12px; }
  .hv-post-row-date { padding-top: 0; }
  .hv-post-row-media { display: none; }
}

/* ---------- Portada generada (cuando no hay imagen) ---------- */
/* Preferimos una portada del sistema antes que una foto de archivo que no tiene
   nada que ver con el artículo. */
.hv-cover { position: relative; width: 100%; height: 100%; min-height: 100%; background: var(--hv-noche); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 2.4vw, 34px); overflow: hidden; isolation: isolate; }
.hv-cover::before { content: ""; position: absolute; inset: 0; background: var(--hv-foco); opacity: .8; z-index: -1; }
.hv-cover::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, var(--hv-line) 1px, transparent 1px), linear-gradient(to bottom, var(--hv-line) 1px, transparent 1px);
  background-size: 44px 44px; }
.hv-cover-cat { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-polen); }
.hv-cover-title { margin-top: 10px; font-size: clamp(15px, 1.7vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; color: var(--hv-hueso); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Miniatura: la retícula se cierra y la etiqueta baja de tamaño para que la
   composición siga leyéndose en 176px de ancho. */
.hv-cover--sm { padding: 10px 12px; }
.hv-cover--sm::after { background-size: 22px 22px; }
.hv-cover--sm .hv-cover-cat { font-size: 9px; letter-spacing: .14em; }

/* ---------- Paginación ---------- */
.hv-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 40px; border-bottom: 1px solid var(--hv-line); }
.hv-pagination-pages { display: flex; gap: 6px; flex-wrap: wrap; }
.hv-page-link { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .08em; color: var(--hv-text-3); padding: 8px 12px; border: 1px solid var(--hv-line-2); }
.hv-page-link:hover { color: var(--hv-hueso); border-color: var(--hv-line-3); }
.hv-page-link.is-active { color: var(--hv-vacio); background: var(--hv-hueso); border-color: var(--hv-hueso); }
.hv-page-link[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* ---------- Bloque de newsletter ---------- */
.hv-sub { position: relative; overflow: hidden; border-top: 1px solid var(--hv-line); background: var(--hv-noche); }
.hv-sub-foco { position: absolute; left: 8%; top: -46%; width: 820px; height: 820px; max-width: 130vw; background: var(--hv-foco); pointer-events: none; }
.hv-sub-inner { position: relative; padding-block: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 6vw, 88px); align-items: end; }
.hv-sub-inner h2 { font-size: clamp(30px, 4vw, 62px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; max-width: 18ch; }
.hv-sub-inner .hv-body { margin-top: 16px; max-width: 44ch; }
.hv-sub-form { display: flex; flex-direction: column; gap: 18px; }
.hv-sub-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.hv-sub-row .hv-field { flex: 1 1 220px; }
.hv-sub-note { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-sub-msg { font-size: 14px; line-height: 1.5; }
.hv-sub-msg.is-ok { color: var(--hv-hueso); }
.hv-sub-msg.is-err { color: #FF6B6B; }

@media (max-width: 860px) { .hv-sub-inner { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.hv-footer { border-top: 1px solid var(--hv-line); }
.hv-footer-top { padding-block: clamp(44px, 6vw, 76px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px clamp(28px, 5vw, 72px); }
.hv-footer-blurb { font-size: 17px; line-height: 1.55; color: var(--hv-text-2); max-width: 40ch; }
.hv-footer-col { display: flex; flex-direction: column; gap: 11px; }
.hv-footer-col a { font-size: 15px; color: var(--hv-text-2); }
.hv-footer-col a:hover { color: var(--hv-cobalto); }
.hv-footer-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid var(--hv-line); }
.hv-footer-mark { overflow: hidden; line-height: 0; padding-bottom: 6px; }
.hv-footer-mark img { width: 100%; opacity: .9; }

@media (max-width: 760px) { .hv-footer-top { grid-template-columns: 1fr 1fr; } .hv-footer-blurb { grid-column: 1 / -1; } }

/* ---------- Artículo ---------- */
.hv-article-head { padding-block: clamp(34px, 5vw, 68px) 0; }
.hv-crumbs { display: flex; align-items: center; gap: 9px; font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-4); margin-bottom: 26px; flex-wrap: wrap; }
.hv-crumbs a { color: var(--hv-text-3); }
.hv-crumbs a:hover { color: var(--hv-hueso); }
.hv-article-head h1 { font-size: clamp(32px, 4.6vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; max-width: 26ch; margin-block: 16px 0; }
.hv-article-head .hv-lede { margin-top: 20px; max-width: 58ch; }
.hv-article-meta { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hv-line-3); font-family: var(--hv-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-text-3); }
.hv-article-hero { margin-top: clamp(28px, 3.5vw, 46px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--hv-noche); }
.hv-article-hero img { width: 100%; height: 100%; object-fit: cover; }

.hv-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: clamp(32px, 5vw, 76px); padding-block: clamp(36px, 5vw, 64px) clamp(48px, 7vw, 88px); align-items: start; }
@media (max-width: 1000px) { .hv-article-layout { grid-template-columns: 1fr; } }

/* Tabla de contenidos */
.hv-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--hv-line-2); padding-left: 20px; }
.hv-toc a { font-size: 13px; line-height: 1.4; color: var(--hv-text-3); }
.hv-toc a:hover, .hv-toc a.is-active { color: var(--hv-hueso); }
.hv-toc a.is-h3 { padding-left: 12px; font-size: 12px; }

/* Va DESPUÉS de definir .hv-toc, no antes: con la misma especificidad gana la
   última regla, y estando arriba el display:flex la anulaba. El índice acababa
   apareciendo al final del artículo en móvil, ya leído y sin servir para nada. */
@media (max-width: 1000px) { .hv-toc { display: none; } }

/* Cuerpo */
.hv-prose { max-width: 70ch; font-size: 18px; line-height: 1.75; color: rgba(244,242,238,.82); }
.hv-prose > * + * { margin-top: 1.35em; }
.hv-prose h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--hv-hueso); margin-top: 2.1em; padding-top: .55em; border-top: 1px solid var(--hv-line); scroll-margin-top: 92px; }
.hv-prose h3 { font-size: clamp(20px, 1.9vw, 25px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--hv-hueso); margin-top: 1.9em; scroll-margin-top: 92px; }
.hv-prose h4 { font-size: 18px; font-weight: 600; color: var(--hv-hueso); margin-top: 1.7em; }
.hv-prose a { color: var(--hv-hueso); text-decoration: underline; text-decoration-color: rgba(46,91,255,.55); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hv-prose a:hover { color: var(--hv-cobalto); text-decoration-color: var(--hv-cobalto); }
.hv-prose strong { color: var(--hv-hueso); font-weight: 600; }
.hv-prose ul, .hv-prose ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: .55em; }
.hv-prose li::marker { color: var(--hv-text-4); }
.hv-prose blockquote { border-left: 2px solid var(--hv-cobalto); padding: 2px 0 2px 22px; color: var(--hv-hueso); font-size: 20px; line-height: 1.55; }
.hv-prose blockquote p + p { margin-top: .7em; }
.hv-prose code { font-family: var(--hv-mono); font-size: .86em; background: var(--hv-tinta); padding: 2px 6px; color: var(--hv-hueso); }
.hv-prose pre { background: var(--hv-noche); border: 1px solid var(--hv-line); padding: 20px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.hv-prose pre code { background: none; padding: 0; font-size: inherit; }
.hv-prose img { margin-block: 1.8em; border: 1px solid var(--hv-line); }
.hv-prose hr { border: none; border-top: 1px solid var(--hv-line-2); margin-block: 2.4em; }
.hv-prose figcaption, .hv-prose small { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-table-wrap { overflow-x: auto; margin-block: 1.8em; }
.hv-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hv-prose th { text-align: left; font-family: var(--hv-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-text-3); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hv-line-3); white-space: nowrap; }
.hv-prose td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hv-line); color: var(--hv-text-2); vertical-align: top; }
.hv-prose tr:last-child td { border-bottom: 0; }

/* La sección de fuentes que cierra cada artículo */
.hv-prose h2#fuentes + ul { font-size: 15px; }

/* ---------- Acciones del artículo ---------- */
.hv-actions { margin-top: clamp(34px, 4vw, 54px); border-top: 1px solid var(--hv-line-3); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hv-icon-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hv-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-text-3); padding: 8px 12px; border: 1px solid var(--hv-line-2); transition: color var(--hv-fast), border-color var(--hv-fast); }
.hv-icon-btn:hover { color: var(--hv-hueso); border-color: var(--hv-line-3); }
.hv-icon-btn.is-on { color: var(--hv-cobalto); border-color: rgba(46,91,255,.5); }
.hv-icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hv-icon-btn.is-on svg.fillable { fill: currentColor; stroke: none; }
.hv-share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hv-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.hv-tag { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; color: var(--hv-text-3); border-bottom: 1px solid var(--hv-line-2); padding-bottom: 2px; }
.hv-tag:hover { color: var(--hv-cobalto); border-color: var(--hv-cobalto); }

/* ---------- Relacionados ---------- */
.hv-related { border-top: 1px solid var(--hv-line); padding-block: clamp(40px, 5vw, 68px); }

/* ---------- Comentarios ---------- */
.hv-comments { border-top: 1px solid var(--hv-line); padding-block: clamp(40px, 5vw, 68px); }
.hv-comments-inner { max-width: 74ch; }
.hv-comment { display: flex; gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--hv-line); }
.hv-comment:last-child { border-bottom: 0; }
.hv-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--hv-tinta); display: flex; align-items: center; justify-content: center; font-family: var(--hv-mono); font-size: 12px; color: var(--hv-text-2); }
.hv-comment-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
.hv-comment-author { font-size: 15px; font-weight: 600; color: var(--hv-hueso); }
.hv-comment-time { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-comment-body { font-size: 15.5px; line-height: 1.65; color: var(--hv-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.hv-comment-actions { display: flex; gap: 16px; margin-top: 10px; }
.hv-comment-actions button { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-comment-actions button:hover { color: var(--hv-hueso); }
.hv-replies { margin-top: 18px; padding-left: 18px; border-left: 1px solid var(--hv-line); display: flex; flex-direction: column; }
.hv-form-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; }

/* ---------- Estados y utilidades ---------- */
.hv-empty { padding-block: 64px; text-align: center; }
.hv-empty p { font-family: var(--hv-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-spinner { width: 18px; height: 18px; border: 1.5px solid var(--hv-line-3); border-top-color: var(--hv-cobalto); border-radius: 50%; animation: hv-spin .7s linear infinite; }
@keyframes hv-spin { to { transform: rotate(360deg); } }
.hv-center { display: flex; align-items: center; justify-content: center; padding-block: 48px; }
.hv-hidden { display: none !important; }
.hv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Modal */
.hv-modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5,7,13,.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.hv-modal { width: 100%; max-width: 420px; background: var(--hv-noche); border: 1px solid var(--hv-line-2); padding: 30px; }
.hv-modal h2 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 8px; }
.hv-modal-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--hv-line-2); margin-bottom: 24px; }
.hv-modal-tab { font-family: var(--hv-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-text-4); padding-bottom: 12px; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.hv-modal-tab.is-active { color: var(--hv-hueso); border-bottom-color: var(--hv-cobalto); }
.hv-stack { display: flex; flex-direction: column; gap: 18px; }
.hv-divider-or { display: flex; align-items: center; gap: 14px; font-family: var(--hv-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hv-text-4); }
.hv-divider-or::before, .hv-divider-or::after { content: ""; flex: 1; height: 1px; background: var(--hv-line-2); }
.hv-btn--ghost { background: transparent; border: 1px solid var(--hv-line-3); color: var(--hv-hueso); }
.hv-btn--ghost:hover { border-color: var(--hv-hueso); background: var(--hv-hueso); color: var(--hv-vacio); }
.hv-btn--block { width: 100%; justify-content: center; }
.hv-btn:disabled { opacity: .45; cursor: not-allowed; }
.hv-error { font-size: 13px; color: #FF6B6B; line-height: 1.5; }

/* ---------- Página de aviso (confirmaciones, 404) ---------- */
.hv-notice { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(56px, 9vw, 120px); position: relative; overflow: hidden; }
.hv-notice-foco { position: absolute; left: 30%; top: -60%; width: 760px; height: 760px; max-width: 140vw; background: var(--hv-foco); pointer-events: none; }
.hv-notice-inner { position: relative; max-width: 52ch; }
.hv-notice h1 { font-size: clamp(34px, 5.4vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-block: 16px 20px; }
.hv-notice-actions { display: flex; gap: 16px; align-items: center; margin-top: 34px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .hv-post-row, .hv-feature-media img, .hv-btn, .hv-chip, .hv-icon-btn { transition: none; }
  .hv-spinner { animation: none; }
}