/*
Theme Name: Herqles 2026
Author: Herqles
Version: 1.9
Description: Tema a medida para Herqles. Diseno mobile-first inspirado en la estructura de Fox News, con identidad propia: azul marino profundo, rojo de marca y tipografia Anton para menus y titulares.
Text Domain: herqles
*/

/* ============================================================
   1. TOKENS DE MARCA
   ============================================================ */
:root {
    --hq-navy:        #0A1B33;
    --hq-navy-deep:   #061224;
    --hq-navy-line:   #1B3355;

    --hq-red:         #D01217;
    --hq-red-dark:    #9E0C10;
    --hq-red-hover:   #B00F14;

    --hq-yellow:      #FFC400;
    --hq-yellow-hover:#FFD23F;

    --hq-white:       #FFFFFF;
    --hq-paper:       #FFFFFF;
    --hq-rule:        #DDDDDD;
    --hq-rule-soft:   #EEEEEE;
    --hq-ink:         #111111;
    --hq-ink-soft:    #5A5A5A;

    --hq-font-brand:  "canada-type-gibson", "Archivo", "Helvetica Neue", Arial, sans-serif;
    --hq-font-display:"Anton", "Arial Narrow", Impact, sans-serif;
    --hq-font-body:   "Lato", "Helvetica Neue", Arial, sans-serif;

    --hq-max:         1280px;
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }

.hq-cats__scroll,
.hq-cats__sub,
.hq-panel ul,
.hq-subnav ul,
.hq-list,
.hq-related {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.herqles {
    margin: 0;
    background: var(--hq-paper);
    color: var(--hq-ink);
    font-family: var(--hq-font-body);
    -webkit-font-smoothing: antialiased;
}

.hq-wrap {
    max-width: var(--hq-max);
    margin: 0 auto;
    padding: 0 12px;
}

.hq-skip {
    position: absolute;
    left: -9999px;
}
.hq-skip:focus {
    left: 8px;
    top: 8px;
    z-index: 999;
    background: var(--hq-white);
    color: var(--hq-navy);
    padding: 10px 14px;
    font-family: var(--hq-font-display);
}

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--hq-red);
    outline-offset: 2px;
}

/* ============================================================
   3. CABECERA
   ============================================================ */
.hq-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--hq-navy);
    border-top: 3px solid var(--hq-red);
}

.hq-header__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    max-width: var(--hq-max);
    margin: 0 auto;
    padding: 0 12px;
}

/* --- Logo: cuadro rojo + wordmark --- */
.hq-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    margin-right: auto;
}

.hq-brand__mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hq-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Respaldo si aun no hay logo subido en WordPress */
.hq-brand__mark--text {
    font-family: var(--hq-font-brand);
    font-weight: 700;
    font-size: 22px;
    color: var(--hq-white);
    line-height: 1;
    background: var(--hq-red);
}

.hq-brand__word {
    display: block;
    line-height: 0;
}
.hq-brand__word img {
    display: block;
    height: 19px;
    width: auto;
}

/* --- Acciones de cabecera --- */
.hq-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hq-btn {
    font-family: var(--hq-font-brand);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 11px;
    line-height: 1;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    display: inline-block;
}

.hq-btn--ghost {
    color: var(--hq-white);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
}
.hq-btn--ghost:hover { border-color: var(--hq-white); }

.hq-btn--join {
    color: var(--hq-navy);
    background: var(--hq-yellow);
    animation: hq-latido 6s ease-in-out 2s infinite;
    will-change: transform;
}
.hq-btn--join:hover {
    background: var(--hq-yellow-hover);
    animation-play-state: paused;
}

/* Latido puntual: dos pulsos y una pausa larga */
@keyframes hq-latido {
    0%, 8%, 100% { transform: scale(1); }
    2%           { transform: scale(1.07); }
    4%           { transform: scale(1); }
    6%           { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .hq-btn--join { animation: none; }
}

.hq-search-btn {
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    color: var(--hq-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}
.hq-search-btn:hover { border-color: var(--hq-white); }
.hq-search-btn svg { width: 17px; height: 17px; fill: currentColor; }

.hq-burger {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--hq-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}
.hq-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}

/* ============================================================
   4. MENU DE CATEGORIAS (tira horizontal, estilo Fox movil)
   ============================================================ */
.hq-cats {
    background: var(--hq-white);
    border-bottom: 1px solid var(--hq-rule);
}

.hq-cats__scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    max-width: var(--hq-max);
    margin: 0 auto;
}
.hq-cats__scroll::-webkit-scrollbar { display: none; }

.hq-cats__item {
    position: relative;
    flex: 0 0 auto;
}

.hq-cats__link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hq-font-display);
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--hq-navy);
    padding: 13px 13px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}
.hq-cats__link:hover { color: var(--hq-red); }

.hq-cats__item--active > .hq-cats__link {
    color: var(--hq-red);
    border-bottom-color: var(--hq-red);
}

.hq-cats__item--premium > .hq-cats__link { color: var(--hq-red); }

.hq-cats__caret {
    font-size: 9px;
    line-height: 1;
    transform: translateY(1px);
}

/* --- Submenus desplegables --- */
.hq-cats__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--hq-white);
    border: 1px solid var(--hq-rule);
    border-top: 3px solid var(--hq-red);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 120;
}
.hq-cats__item:hover > .hq-cats__sub,
.hq-cats__item:focus-within > .hq-cats__sub { display: block; }

.hq-cats__sub a {
    display: block;
    padding: 9px 14px;
    font-family: var(--hq-font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--hq-navy);
    text-decoration: none;
}
.hq-cats__sub a:hover {
    background: var(--hq-navy);
    color: var(--hq-white);
}

/* ============================================================
   5. RAIL FLOTANTE DE REDES SOCIALES
   ============================================================ */
.hq-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--hq-navy);
    border-left: 3px solid var(--hq-red);
}

.hq-social__toggle {
    display: none;
}

.hq-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hq-white);
    text-decoration: none;
}
.hq-social a:hover { background: var(--hq-red); }
.hq-social svg { width: 17px; height: 17px; fill: currentColor; }

/* En movil el rail se pliega a un boton */
@media (max-width: 767px) {
    .hq-social {
        top: auto;
        bottom: 16px;
        transform: none;
        flex-direction: column-reverse;
    }
    .hq-social__list {
        display: none;
        flex-direction: column;
    }
    .hq-social.is-open .hq-social__list { display: flex; }
    .hq-social__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--hq-red);
        border: 0;
        color: var(--hq-white);
        cursor: pointer;
        font-family: var(--hq-font-display);
        font-size: 15px;
        line-height: 1;
    }
}

/* ============================================================
   6. PANEL MOVIL (hamburguesa)
   ============================================================ */
.hq-panel {
    display: none;
    background: var(--hq-navy-deep);
    border-bottom: 3px solid var(--hq-red);
}
.hq-panel.is-open { display: block; }

.hq-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--hq-max);
    margin: 0 auto;
}
.hq-panel__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--hq-navy-line);
}
.hq-panel__row > a { flex: 1; border-bottom: 0 !important; }

.hq-panel__toggle {
    flex: 0 0 54px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--hq-navy-line);
    color: var(--hq-white);
    font-family: var(--hq-font-display);
    font-size: 12px;
    cursor: pointer;
}
.hq-panel__toggle[aria-expanded="true"] { background: var(--hq-red); }

.hq-panel__sub {
    display: none;
    background: #04101F;
}
.hq-panel__sub.is-open { display: block; }
.hq-panel__sub a {
    padding-left: 30px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,.82) !important;
}

.hq-panel a {
    display: block;
    padding: 14px 16px;
    font-family: var(--hq-font-display);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--hq-white);
    text-decoration: none;
    border-bottom: 1px solid var(--hq-navy-line);
}
.hq-panel a:hover { color: var(--hq-red); }

/* ============================================================
   7. TITULARES
   ============================================================ */
.hq-title,
h1.entry-title,
h2.entry-title {
    font-family: var(--hq-font-display);
    font-weight: 400;
    color: var(--hq-navy);
    letter-spacing: 0.005em;
    line-height: 1.18;
    margin: 0 0 10px;
}

.hq-kicker {
    display: inline-block;
    font-family: var(--hq-font-display);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hq-white);
    background: var(--hq-navy);
    padding: 6px 10px;
}
.hq-kicker--red { background: var(--hq-red); }

/* ============================================================
   8. ESCRITORIO
   ============================================================ */
@media (min-width: 900px) {
    .hq-header__bar { height: 64px; }
    .hq-brand__mark { width: 46px; height: 46px; flex-basis: 46px; }
    .hq-brand__word img { height: 25px; }
    .hq-burger { display: none; }
    .hq-btn { font-size: 14px; padding: 10px 16px; }
    .hq-cats__link { font-size: 15px; padding: 14px 13px; letter-spacing: .01em; }
    .hq-cats__scroll { overflow: visible; }
    .hq-cats__sub { min-width: 240px; }
    .hq-cats__sub a { font-size: 15px; padding: 11px 17px; }
    .hq-cats__caret { font-size: 10px; }
}

/* ============================================================
   9. ARTICULO
   ============================================================ */
.hq-article {
    max-width: var(--hq-max);
    margin: 0 auto;
}

.hq-article__head {
    padding: 18px 12px 0;
    max-width: 760px;
}

.hq-eyebrow {
    display: inline-block;
    background: var(--hq-red);
    color: var(--hq-white);
    font-family: var(--hq-font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 13px;
    line-height: 1;
    margin: 0 0 10px;
}

.hq-headline {
    font-family: var(--hq-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--hq-ink);
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: 0.004em;
    margin: 0;
}

.hq-headline-block {
    border-left: 5px solid var(--hq-red);
    padding-left: 14px;
}

.hq-dateline {
    font-family: var(--hq-font-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hq-ink-soft);
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.hq-dateline__sep {
    width: 1px;
    height: 13px;
    background: #BBB;
    display: inline-block;
}

.hq-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 16px;
    padding: 12px 0;
    border-top: 1px solid var(--hq-rule-soft);
    border-bottom: 1px solid var(--hq-rule-soft);
}
.hq-byline__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--hq-navy);
    color: var(--hq-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hq-font-display);
    font-size: 15px;
    overflow: hidden;
}
.hq-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hq-byline__name {
    font-family: var(--hq-font-display);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hq-navy);
    margin: 0;
    line-height: 1.2;
}
.hq-byline__role {
    font-family: var(--hq-font-body);
    font-size: 13px;
    color: var(--hq-ink-soft);
    margin: 2px 0 0;
    line-height: 1.2;
}

/* Imagen: a sangre en movil, dentro de columna en escritorio */
.hq-figure {
    margin: 0 -12px 6px;
}
.hq-figure img {
    width: 100%;
    height: auto;
    display: block;
}
.hq-figure figcaption {
    font-family: var(--hq-font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--hq-ink-soft);
    padding: 8px 12px 0;
}

.hq-body {
    max-width: 660px;
    padding: 4px 12px 40px;
    font-family: var(--hq-font-body);
    font-size: 18px;
    line-height: 1.68;
    letter-spacing: -0.002em;
    color: var(--hq-ink);
}
.hq-body p { margin: 0 0 1.15em; }
.hq-body a { color: var(--hq-red); text-underline-offset: 2px; }
.hq-body h2 {
    font-family: var(--hq-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.2;
    color: var(--hq-navy);
    margin: 1.6em 0 .6em;
}
.hq-body blockquote {
    margin: 1.4em 0;
    padding: 0 0 0 16px;
    border-left: 5px solid var(--hq-red);
    font-size: 21px;
    line-height: 1.4;
    color: var(--hq-navy);
}

@media (min-width: 900px) {
    .hq-article__head { padding: 28px 12px 0; }
    .hq-headline { font-size: 46px; line-height: 1.12; }
    .hq-figure { margin: 0 0 8px; max-width: 760px; }
    .hq-figure figcaption { padding-left: 0; padding-right: 0; }
    .hq-body { font-size: 18.5px; padding-left: 0; padding-right: 0; margin-left: 12px; }
    .hq-byline { max-width: 760px; }
}

/* ============================================================
   10. PORTADA
   ============================================================ */
.hq-home { max-width: var(--hq-max); margin: 0 auto; }

.hq-home__cols { display: block; }

/* --- Apertura --- */
.hq-lead { padding: 14px 12px 0; }
.hq-lead__figure { margin: 0 -12px 10px; position: relative; }
.hq-lead__figure img,
.hq-lead__figure .ph { width: 100%; height: auto; display: block; }
.hq-lead__tag {
    position: absolute; left: 0; bottom: 0;
    background: var(--hq-red); color: var(--hq-white);
    font-family: var(--hq-font-display); font-size: 15px;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 8px 13px; line-height: 1; text-decoration: none;
}
.hq-lead__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; color: var(--hq-ink);
    font-size: 29px; line-height: 1.16; margin: 0;
}
.hq-lead__title a { text-decoration: none; }
.hq-lead__meta {
    font-family: var(--hq-font-display); font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--hq-ink-soft); margin: 9px 0 0;
}

.hq-related { list-style: none; margin: 12px 0 0; padding: 0; }
.hq-related li {
    position: relative; padding-left: 14px; margin-bottom: 7px;
    font-family: var(--hq-font-body); font-size: 15px;
    line-height: 1.36; color: var(--hq-red);
}
.hq-related li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; background: var(--hq-red); border-radius: 50%;
}
.hq-related a { text-decoration: none; }

/* --- Rejilla de destacados --- */
.hq-grid {
    display: grid; grid-template-columns: 1fr; gap: 22px;
    padding: 22px 12px 0;
    border-top: 1px solid var(--hq-rule); margin-top: 20px;
}
.hq-card__figure { margin: 0 0 9px; position: relative; }
.hq-card__figure img,
.hq-card__figure .ph { width: 100%; height: auto; display: block; }
.hq-card__tag {
    position: absolute; left: 0; bottom: 0;
    background: var(--hq-navy); color: var(--hq-white);
    font-family: var(--hq-font-display); font-size: 13px;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 7px 11px; line-height: 1; text-decoration: none;
}
.hq-card__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 19px; line-height: 1.18;
    color: var(--hq-ink); margin: 0;
}
.hq-card__title a { text-decoration: none; }
.hq-card__meta {
    font-family: var(--hq-font-display); font-size: 11px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--hq-ink-soft); margin: 7px 0 0;
}

/* --- Bloques de seccion --- */
.hq-section { padding: 26px 12px 0; }
.hq-section__head {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 3px solid var(--hq-navy);
    padding-bottom: 7px; margin-bottom: 14px;
}
.hq-section__name {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 21px; line-height: 1;
    color: var(--hq-navy); margin: 0;
}
.hq-section__more {
    margin-left: auto; font-family: var(--hq-font-display);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--hq-red); text-decoration: none;
}

.hq-list { list-style: none; margin: 0; padding: 0; }
.hq-list li {
    display: flex; gap: 11px; align-items: flex-start;
    padding-bottom: 13px; margin-bottom: 13px;
    border-bottom: 1px solid var(--hq-rule-soft);
}
.hq-list li:last-child { border-bottom: 0; margin-bottom: 0; }
.hq-list__thumb { flex: 0 0 96px; }
.hq-list__thumb img,
.hq-list__thumb .ph { width: 96px; height: 72px; object-fit: cover; display: block; background: #c9cfd6; }
.hq-list__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 15px; line-height: 1.2;
    color: var(--hq-ink); margin: 0;
}
.hq-list__title a { text-decoration: none; }

/* --- Franja Herqles TV --- */
.hq-tv {
    background: var(--hq-navy); color: var(--hq-white);
    margin-top: 30px; padding: 22px 12px;
}
.hq-tv .hq-section__head { border-bottom-color: var(--hq-red); }
.hq-tv .hq-section__name { color: var(--hq-white); }
.hq-tv .hq-list li { border-bottom-color: var(--hq-navy-line); }
.hq-tv .hq-list__title { color: var(--hq-white); }
.hq-live {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--hq-red); color: var(--hq-white);
    font-family: var(--hq-font-display); font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 8px; line-height: 1;
}
.hq-live__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* --- Barra lateral: solo escritorio --- */
.hq-aside { display: none; }

.hq-aside__box { margin-bottom: 22px; }
.hq-aside__head {
    font-family: var(--hq-font-display); text-transform: uppercase;
    font-size: 14px; letter-spacing: .04em; color: var(--hq-navy);
    border-bottom: 3px solid var(--hq-navy); padding-bottom: 6px; margin: 0 0 12px;
}
.hq-aside__social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hq-aside__social a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 12px 4px; background: var(--hq-navy); color: var(--hq-white);
    text-decoration: none; font-family: var(--hq-font-brand); font-weight: 600;
    font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
}
.hq-aside__social a:hover { background: var(--hq-red); }
.hq-aside__social svg { width: 18px; height: 18px; fill: currentColor; }

.hq-ad {
    border: 1px solid var(--hq-rule); background: #FAFAFA;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hq-font-display); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase; color: #AAA;
    margin-bottom: 16px;
}
.hq-ad--300x250 { height: 250px; }
.hq-ad--300x600 { height: 600px; }

@media (min-width: 900px) {
    .hq-home__cols {
        display: grid;
        grid-template-columns: minmax(0,1fr) 300px;
        gap: 32px;
        padding: 0 12px;
        align-items: start;
    }
    .hq-home__main > * { padding-left: 0; padding-right: 0; }
    .hq-lead__figure { margin-left: 0; margin-right: 0; }
    .hq-lead__title { font-size: 46px; line-height: 1.1; }
    .hq-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .hq-card__title { font-size: 22px; }
    .hq-section__name { font-size: 27px; }
    .hq-list li { padding-bottom: 15px; margin-bottom: 15px; }
    .hq-list__thumb { flex-basis: 130px; }
    .hq-list__thumb img, .hq-list__thumb .ph { width: 130px; height: 90px; }
    .hq-list__title { font-size: 19px; }
    .hq-tv { margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; }
    .hq-aside { display: block; position: sticky; top: 118px; padding-top: 22px; }

    /* Bloque de redes de la barra lateral: fichas mas grandes */
    .hq-aside__head { font-size: 15px; padding-bottom: 8px; line-height: 1.25; }
    .hq-aside__social { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .hq-aside__social a { padding: 20px 6px; gap: 9px; font-size: 13px; letter-spacing: .05em; }
    .hq-aside__social svg { width: 28px; height: 28px; }

    /* Rail flotante lateral: iconos mas grandes */
    .hq-social a { width: 54px; height: 54px; }
    .hq-social svg { width: 24px; height: 24px; }
}

/* ============================================================
   11. PAGINA DE SECCION
   ============================================================ */
.hq-sectionhead {
    background: var(--hq-navy);
    color: var(--hq-white);
    padding: 18px 12px 0;
}
.hq-sectionhead__inner { max-width: var(--hq-max); margin: 0 auto; }
.hq-sectionhead__name {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 30px; line-height: 1.12;
    margin: 0 0 4px; color: var(--hq-white);
}
.hq-sectionhead__desc {
    font-family: var(--hq-font-body); font-size: 14px;
    line-height: 1.45; color: rgba(255,255,255,.72);
    margin: 0 0 14px; max-width: 620px;
}

/* Pestanas de subseccion */
.hq-subnav { overflow-x: auto; scrollbar-width: none; }
.hq-subnav::-webkit-scrollbar { display: none; }
.hq-subnav ul {
    display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
}
.hq-subnav a {
    display: block; white-space: nowrap;
    font-family: var(--hq-font-display); font-size: 13px;
    letter-spacing: .03em; text-transform: uppercase;
    color: rgba(255,255,255,.8); text-decoration: none;
    padding: 11px 13px; border-bottom: 3px solid transparent;
}
.hq-subnav a:hover { color: var(--hq-white); }
.hq-subnav .is-current a {
    color: var(--hq-white); border-bottom-color: var(--hq-red);
}

.hq-archive { max-width: var(--hq-max); margin: 0 auto; }
.hq-archive__cols { display: block; }
.hq-archive__main { padding: 18px 12px 30px; }

/* Destacada de la seccion */
.hq-featured { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--hq-rule); }
.hq-featured__figure { margin: 0 -12px 10px; position: relative; }
.hq-featured__figure img,
.hq-featured__figure .ph { width: 100%; height: auto; display: block; }
.hq-featured__tag {
    position: absolute; left: 0; bottom: 0;
    background: var(--hq-red); color: var(--hq-white);
    font-family: var(--hq-font-display); font-size: 14px;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 7px 12px; line-height: 1; text-decoration: none;
}
.hq-featured__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 26px; line-height: 1.16;
    margin: 0; color: var(--hq-ink);
}
.hq-featured__title a { text-decoration: none; }
.hq-featured__excerpt {
    font-family: var(--hq-font-body); font-size: 16px; line-height: 1.5;
    color: var(--hq-ink-soft); margin: 9px 0 0; max-width: 620px;
}

.hq-paging {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hq-rule);
}
.hq-paging .page-numbers {
    font-family: var(--hq-font-display); font-size: 14px;
    padding: 8px 13px; text-decoration: none;
    color: var(--hq-navy); border: 1px solid var(--hq-rule);
}
.hq-paging .page-numbers.current {
    background: var(--hq-navy); color: var(--hq-white); border-color: var(--hq-navy);
}
.hq-paging .page-numbers:hover { border-color: var(--hq-red); color: var(--hq-red); }

@media (min-width: 900px) {
    .hq-sectionhead { padding: 24px 12px 0; }
    .hq-sectionhead__name { font-size: 40px; }
    .hq-archive__cols {
        display: grid; grid-template-columns: minmax(0,1fr) 300px;
        gap: 32px; padding: 0 12px; align-items: start;
    }
    .hq-archive__main { padding-left: 0; padding-right: 0; }
    .hq-featured__figure { margin-left: 0; margin-right: 0; }
    .hq-featured__title { font-size: 34px; line-height: 1.12; }
    .hq-archive .hq-aside { display: block; position: sticky; top: 118px; padding-top: 30px; }
}

/* ============================================================
   12. CARRUSEL DE APERTURA
   ============================================================ */
.hq-carousel { position: relative; }

.hq-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hq-carousel__track::-webkit-scrollbar { display: none; }

.hq-carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}

.hq-carousel__dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    padding: 12px 0 0;
}
.hq-carousel__dot {
    width: 9px; height: 9px;
    border: 0; padding: 0; cursor: pointer;
    background: #CCC;
    border-radius: 50%;
}
.hq-carousel__dot.is-active { background: var(--hq-red); }

.hq-carousel__arrow {
    display: none;
    position: absolute;
    top: 38%;
    width: 40px; height: 52px;
    background: rgba(10,27,51,.72);
    border: 0; cursor: pointer;
    color: var(--hq-white);
    font-family: var(--hq-font-display);
    font-size: 20px; line-height: 1;
    z-index: 3;
}
.hq-carousel__arrow:hover { background: var(--hq-red); }
.hq-carousel__arrow--prev { left: 0; }
.hq-carousel__arrow--next { right: 0; }

@media (min-width: 900px) {
    .hq-carousel__arrow { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .hq-carousel__track { scroll-behavior: auto; }
}

/* ============================================================
   13. INVITACION A SUSCRIBIRSE DENTRO DEL ARTICULO
   ============================================================ */
.hq-invite {
    position: relative;
    margin: 30px 0;
    padding: 26px 20px;
    overflow: hidden;
    isolation: isolate;
    color: var(--hq-white);
    border-left: 5px solid var(--hq-yellow);
}

/* Foto de fondo, atenuada */
.hq-invite::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--hq-invite-img);
    background-size: cover;
    background-position: 62% center;
    filter: grayscale(35%) brightness(.62);
}

/* Filtro rojo encima */
.hq-invite::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(
        100deg,
        rgba(158,12,16,.93) 0%,
        rgba(208,18,23,.80) 55%,
        rgba(208,18,23,.58) 100%
    );
}

.hq-invite__title {
    font-family: var(--hq-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: 0.028em;
    word-spacing: 0.06em;
    margin: 0 0 14px;
    color: var(--hq-white);
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
    max-width: 15ch;
}

.hq-invite__offers {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.hq-invite__offers li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-family: var(--hq-font-body);
    font-size: 15.5px;
    line-height: 1.42;
    color: #fff;
}
.hq-invite__offers li::before {
    content: "";
    position: absolute;
    left: 0; top: 6px;
    width: 12px; height: 12px;
    background: var(--hq-yellow);
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 71%);
}
.hq-invite__offers strong { font-weight: 700; }

.hq-invite .hq-btn--join {
    font-size: 14px;
    padding: 12px 20px;
    box-shadow: 0 3px 14px rgba(0,0,0,.28);
}

.hq-invite__login {
    display: block;
    margin-top: 13px;
    font-family: var(--hq-font-body);
    font-size: 13.5px;
    color: rgba(255,255,255,.85);
}
.hq-invite__login a { color: var(--hq-yellow); }

/* El mismo cartel en portada: solo cambia el margen */
.hq-invite--portada { margin: 30px 12px 0; }
@media (min-width: 900px) {
    .hq-invite--portada { margin-left: 0; margin-right: 0; }
}

@media (min-width: 900px) {
    .hq-invite { padding: 46px 38px 48px; }
    .hq-invite__title { font-size: 40px; max-width: 20ch; margin-bottom: 20px; }
    .hq-invite__offers li { font-size: 18px; margin-bottom: 12px; }
    .hq-invite .hq-btn--join { font-size: 17px; padding: 16px 30px; }
}

/* ============================================================
   14. CINTA DE BOLSA (solo escritorio)
   ============================================================ */
.hq-ticker { display: none; }

@media (min-width: 900px) {
    .hq-ticker {
        display: block;
        position: relative;
        z-index: 1;
        clear: both;
        background: var(--hq-navy-deep);
        border-bottom: 1px solid var(--hq-navy-line);
        overflow: hidden;
        position: relative;
    }
    .hq-ticker__track {
        display: flex;
        width: max-content;
        min-width: 200%;
        animation: hq-ticker 48s linear infinite;
    }
    .hq-ticker:hover .hq-ticker__track { animation-play-state: paused; }

    .hq-ticker__item {
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 7px 18px;
        white-space: nowrap;
        font-family: var(--hq-font-display);
        font-size: 12px;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: rgba(255,255,255,.85);
        border-right: 1px solid var(--hq-navy-line);
        text-decoration: none;
    }
    .hq-ticker__value { color: var(--hq-white); }

    .hq-ticker__aviso {
        position: absolute;
        right: 0; top: 0; bottom: 0;
        display: flex; align-items: center;
        padding: 0 14px;
        background: var(--hq-navy-deep);
        border-left: 1px solid var(--hq-navy-line);
        font-family: var(--hq-font-display);
        font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
        color: rgba(255,255,255,.45);
        white-space: nowrap;
        z-index: 2;
    }
    .hq-ticker__up   { color: #35C46B; }
    .hq-ticker__down { color: #FF5A5A; }

    @keyframes hq-ticker {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .hq-ticker__track { animation: none; }
        .hq-ticker { overflow-x: auto; }
    }
}

/* ============================================================
   15. HERQLES PREMIUM
   ============================================================ */
.hq-gate {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--hq-white);
    padding: 34px 16px 30px;
    text-align: center;
}
.hq-gate::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--hq-invite-img);
    background-size: cover;
    background-position: 62% center;
    filter: grayscale(35%) brightness(.55);
}
.hq-gate::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(170deg, rgba(10,27,51,.90) 0%, rgba(158,12,16,.88) 100%);
}
.hq-gate__lock {
    font-family: var(--hq-font-display);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    background: var(--hq-yellow); color: var(--hq-navy);
    display: inline-block; padding: 6px 12px; line-height: 1; margin: 0 0 14px;
}
.hq-gate__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 28px; line-height: 1.1;
    letter-spacing: 0.028em; word-spacing: 0.06em;
    margin: 0 auto 12px; max-width: 16ch; color: var(--hq-white);
}
.hq-gate__text {
    font-family: var(--hq-font-body); font-size: 16px; line-height: 1.5;
    color: rgba(255,255,255,.88); margin: 0 auto 18px; max-width: 46ch;
}
.hq-gate__login {
    font-family: var(--hq-font-body); font-size: 14px;
    color: rgba(255,255,255,.85); margin: 14px 0 0;
}
.hq-gate__login a { color: var(--hq-yellow); }

/* --- Planes --- */
.hq-plans {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    padding: 28px 12px 40px; max-width: var(--hq-max); margin: 0 auto;
}
.hq-plan {
    border: 1px solid var(--hq-rule);
    padding: 22px 20px 24px;
    display: flex; flex-direction: column;
    background: var(--hq-white);
}
.hq-plan--destacado {
    border: 3px solid var(--hq-yellow);
    position: relative;
}
.hq-plan__flag {
    position: absolute; top: -1px; right: 16px;
    background: var(--hq-yellow); color: var(--hq-navy);
    font-family: var(--hq-font-display); font-size: 11px;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 5px 10px; line-height: 1;
}
.hq-plan__name {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 20px; line-height: 1;
    color: var(--hq-navy); margin: 0 0 10px;
}
.hq-plan__price {
    display: flex; align-items: baseline; gap: 5px; margin: 0 0 16px;
}
.hq-plan__amount {
    font-family: var(--hq-font-display); font-size: 40px; line-height: 1;
    color: var(--hq-ink);
}
.hq-plan__period {
    font-family: var(--hq-font-body); font-size: 14px; color: var(--hq-ink-soft);
}
.hq-plan__list { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.hq-plan__list li {
    position: relative; padding-left: 23px; margin-bottom: 9px;
    font-family: var(--hq-font-body); font-size: 15px; line-height: 1.44;
    color: var(--hq-ink);
}
.hq-plan__list li::before {
    content: ""; position: absolute; left: 0; top: 5px;
    width: 12px; height: 12px; background: var(--hq-red);
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 71%);
}
.hq-plan .hq-btn { text-align: center; padding: 13px 16px; font-size: 14px; }
.hq-plan__cta--sobrio {
    background: var(--hq-navy); color: var(--hq-white);
    font-family: var(--hq-font-display); font-size: 14px;
    text-transform: uppercase; letter-spacing: .03em;
    text-decoration: none; padding: 13px 16px; text-align: center;
    display: block;
}
.hq-plan__cta--sobrio:hover { background: var(--hq-red); }

@media (min-width: 900px) {
    .hq-gate { padding: 60px 20px 52px; }
    .hq-gate__title { font-size: 42px; }
    .hq-plans { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; padding-top: 36px; }
}

/* ============================================================
   16. PIE DE PAGINA
   ============================================================ */
.hq-footer {
    background: var(--hq-navy);
    color: var(--hq-white);
    border-top: 3px solid var(--hq-red);
    margin-top: 44px;
}
.hq-footer__inner {
    max-width: var(--hq-max); margin: 0 auto; padding: 26px 12px 22px;
}
.hq-footer__brand {
    font-family: var(--hq-font-brand); font-weight: 600;
    letter-spacing: .045em; text-transform: uppercase;
    font-size: 20px; margin: 0 0 14px;
}
.hq-footer__legal {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0 18px;
}
.hq-footer__legal a {
    font-family: var(--hq-font-body); font-size: 14px; line-height: 2;
    color: rgba(255,255,255,.82); text-decoration: none;
}
.hq-footer__legal a:hover { color: var(--hq-yellow); }
.hq-footer__copy {
    font-family: var(--hq-font-body); font-size: 13px;
    color: rgba(255,255,255,.55); margin: 0;
    border-top: 1px solid var(--hq-navy-line); padding-top: 14px;
}

/* ============================================================
   17. FRANJA DE REGISTRO GRATUITO (boletin)
   ============================================================ */
.hq-free {
    background: var(--hq-navy);
    color: var(--hq-white);
    border-top: 3px solid var(--hq-yellow);
    padding: 26px 16px 28px;
}
.hq-free__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.hq-free__title {
    font-family: var(--hq-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.18;
    margin: 0 0 8px;
    color: var(--hq-white);
}
.hq-free__text {
    font-family: var(--hq-font-body);
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.82);
    margin: 0 0 18px;
}
.hq-free__form {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 440px;
    margin: 0 auto;
}
.hq-free__form input[type="email"] {
    font-family: var(--hq-font-body);
    font-size: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
    color: var(--hq-white);
    width: 100%;
}
.hq-free__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.hq-free__form input[type="email"]:focus {
    outline: 3px solid var(--hq-yellow);
    outline-offset: 1px;
    background: rgba(255,255,255,.1);
}
.hq-free__form button {
    font-family: var(--hq-font-display);
    font-size: 14px;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 13px 18px;
    border: 0;
    cursor: pointer;
    background: var(--hq-yellow);
    color: var(--hq-navy);
}
.hq-free__form button:hover { background: var(--hq-yellow-hover); }
.hq-free__small {
    font-family: var(--hq-font-body);
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.55);
    margin: 12px 0 0;
}
.hq-free__small a { color: rgba(255,255,255,.8); }

@media (min-width: 600px) {
    .hq-free__form { flex-direction: row; }
    .hq-free__form input[type="email"] { flex: 1; }
    .hq-free__form button { flex: 0 0 auto; }
}
@media (min-width: 900px) {
    .hq-free { padding: 34px 20px 36px; }
    .hq-free__title { font-size: 26px; }
}

/* ============================================================
   18. HERQLES TV
   ============================================================ */
.hq-tvpage { max-width: var(--hq-max); margin: 0 auto; }

.hq-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.hq-player iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}
.hq-player__empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
    font-family: var(--hq-font-display);
    font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
}

.hq-tvpage__lead { padding: 0 0 6px; }
.hq-tvpage__bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 12px 0;
}
.hq-tvpage__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 22px; line-height: 1.18;
    color: var(--hq-ink); margin: 0; flex: 1 1 100%;
}

/* Rejilla de videos */
.hq-videos {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    padding: 24px 12px 40px;
}
.hq-video__thumb {
    position: relative; display: block; margin: 0 0 9px;
    aspect-ratio: 16 / 9; background: #c9cfd6; overflow: hidden;
}
.hq-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hq-video__play {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    background: rgba(208,18,23,.92);
    display: flex; align-items: center; justify-content: center;
}
.hq-video__play::before {
    content: ""; display: block;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
}
.hq-video__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 17px; line-height: 1.2;
    color: var(--hq-ink); margin: 0;
}
.hq-video__title a { text-decoration: none; }
.hq-video__meta {
    font-family: var(--hq-font-display); font-size: 11px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--hq-ink-soft); margin: 6px 0 0;
}

@media (min-width: 700px) {
    .hq-videos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 900px) {
    .hq-videos { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
    .hq-tvpage__title { font-size: 28px; }
}

/* ============================================================
   19. FORMULARIO DE CONTACTO
   ============================================================ */
.hq-contact { max-width: 640px; margin: 0 auto; padding: 22px 12px 44px; }
.hq-contact__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 28px; line-height: 1.16;
    color: var(--hq-navy); margin: 0 0 8px;
}
.hq-contact__intro {
    font-family: var(--hq-font-body); font-size: 16px; line-height: 1.55;
    color: var(--hq-ink-soft); margin: 0 0 22px;
}

.hq-field { margin-bottom: 15px; }
.hq-field label {
    display: block;
    font-family: var(--hq-font-display); font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--hq-navy); margin: 0 0 6px;
}
.hq-field input,
.hq-field textarea {
    width: 100%;
    font-family: var(--hq-font-body); font-size: 16px;
    padding: 12px 13px;
    border: 1px solid var(--hq-rule);
    background: var(--hq-white); color: var(--hq-ink);
}
.hq-field textarea { min-height: 150px; resize: vertical; }
.hq-field input:focus,
.hq-field textarea:focus {
    outline: 3px solid var(--hq-red); outline-offset: 1px;
    border-color: var(--hq-red);
}
.hq-field--row { display: grid; grid-template-columns: 1fr; gap: 15px; }

.hq-contact button[type="submit"] {
    font-family: var(--hq-font-display); font-size: 15px;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 14px 26px; border: 0; cursor: pointer;
    background: var(--hq-yellow); color: var(--hq-navy);
}
.hq-contact button[type="submit"]:hover { background: var(--hq-yellow-hover); }
.hq-contact__small {
    font-family: var(--hq-font-body); font-size: 13px; line-height: 1.5;
    color: var(--hq-ink-soft); margin: 14px 0 0;
}

@media (min-width: 600px) {
    .hq-field--row { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
}

/* ============================================================
   20. BUSCADOR Y ERROR 404
   ============================================================ */
.hq-searchbox {
    background: var(--hq-navy);
    padding: 26px 12px 28px;
}
.hq-searchbox__inner { max-width: 640px; margin: 0 auto; }
.hq-searchbox__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 24px; line-height: 1.16;
    color: var(--hq-white); margin: 0 0 14px;
}
.hq-searchbox__form { display: flex; gap: 0; }
.hq-searchbox__form input[type="search"] {
    flex: 1; min-width: 0;
    font-family: var(--hq-font-body); font-size: 16px;
    padding: 14px 14px; border: 0;
    background: var(--hq-white); color: var(--hq-ink);
}
.hq-searchbox__form input[type="search"]:focus {
    outline: 3px solid var(--hq-yellow); outline-offset: -3px;
}
.hq-searchbox__form button {
    font-family: var(--hq-font-display); font-size: 14px;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 14px 20px; border: 0; cursor: pointer;
    background: var(--hq-red); color: var(--hq-white);
    white-space: nowrap;
}
.hq-searchbox__form button:hover { background: var(--hq-red-hover); }
.hq-searchbox__hint {
    font-family: var(--hq-font-body); font-size: 13.5px;
    color: rgba(255,255,255,.65); margin: 11px 0 0;
}

.hq-results { max-width: var(--hq-max); margin: 0 auto; padding: 22px 12px 40px; }
.hq-results__count {
    font-family: var(--hq-font-display); font-size: 13px;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--hq-ink-soft); margin: 0 0 16px;
}

.hq-404 { text-align: center; padding: 46px 16px 40px; max-width: 620px; margin: 0 auto; }
.hq-404__code {
    font-family: var(--hq-font-display); font-size: 76px; line-height: 1;
    color: var(--hq-red); margin: 0 0 6px;
}
.hq-404__title {
    font-family: var(--hq-font-display); font-weight: 400;
    text-transform: uppercase; font-size: 24px; line-height: 1.18;
    color: var(--hq-navy); margin: 0 0 10px;
}
.hq-404__text {
    font-family: var(--hq-font-body); font-size: 16px; line-height: 1.55;
    color: var(--hq-ink-soft); margin: 0 0 22px;
}

/* ============================================================
   21. CONTACT FORM 7 CON LA ESTETICA DEL TEMA
   ============================================================ */
.hq-contact .wpcf7 { margin: 0; }

.hq-contact .wpcf7-form p { margin: 0 0 15px; }

.hq-contact .wpcf7-form label {
    display: block;
    font-family: var(--hq-font-display);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hq-navy);
    margin: 0 0 6px;
}

.hq-contact .wpcf7-form input[type="text"],
.hq-contact .wpcf7-form input[type="email"],
.hq-contact .wpcf7-form input[type="tel"],
.hq-contact .wpcf7-form textarea {
    width: 100%;
    font-family: var(--hq-font-body);
    font-size: 16px;
    padding: 12px 13px;
    border: 1px solid var(--hq-rule);
    background: var(--hq-white);
    color: var(--hq-ink);
    box-sizing: border-box;
}
.hq-contact .wpcf7-form textarea { min-height: 150px; resize: vertical; }

.hq-contact .wpcf7-form input:focus,
.hq-contact .wpcf7-form textarea:focus {
    outline: 3px solid var(--hq-red);
    outline-offset: 1px;
    border-color: var(--hq-red);
}

.hq-contact .wpcf7-form input[type="submit"] {
    font-family: var(--hq-font-display);
    font-size: 15px;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 14px 26px;
    border: 0;
    cursor: pointer;
    background: var(--hq-yellow);
    color: var(--hq-navy);
    width: auto;
}
.hq-contact .wpcf7-form input[type="submit"]:hover { background: var(--hq-yellow-hover); }

/* Dos columnas para nombre y apellido */
.hq-contact .hq-fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 600px) {
    .hq-contact .hq-fila { grid-template-columns: 1fr 1fr; }
}
.hq-contact .hq-fila p { margin: 0; }

/* Avisos de Contact Form 7 */
.hq-contact .wpcf7-not-valid-tip {
    font-family: var(--hq-font-body);
    font-size: 13px;
    color: var(--hq-red);
    margin-top: 5px;
}
.hq-contact .wpcf7-response-output {
    font-family: var(--hq-font-body);
    font-size: 15px;
    line-height: 1.5;
    border: 0 !important;
    border-left: 5px solid var(--hq-navy) !important;
    background: #F4F5F7;
    padding: 14px 16px !important;
    margin: 18px 0 0 !important;
}
.hq-contact .wpcf7-form.invalid .wpcf7-response-output,
.hq-contact .wpcf7-form.failed .wpcf7-response-output {
    border-left-color: var(--hq-red) !important;
}
.hq-contact .wpcf7-form.sent .wpcf7-response-output {
    border-left-color: var(--hq-yellow) !important;
}

/* Menu a tamano completo solo cuando hay ancho de sobra */
@media (min-width: 1180px) {
    .hq-cats__link { font-size: 17px; padding: 15px 17px; letter-spacing: .015em; }
}

/* Etiquetas de categoria algo mayores en escritorio */
@media (min-width: 900px) {
    .hq-eyebrow      { font-size: 16px; padding: 8px 15px; }
    .hq-lead__tag    { font-size: 16px; padding: 9px 15px; }
    .hq-card__tag    { font-size: 14px; padding: 8px 12px; }
    .hq-featured__tag{ font-size: 15px; padding: 8px 14px; }
}

/* ============================================================
   22. HUECOS DE ANUNCIO EN MOVIL Y CONTENIDO
   ============================================================ */
.hq-ad-slot {
    display: flex;
    justify-content: center;
    margin: 26px 12px 30px;
}

.hq-ad-slot__inner {
    max-width: 100%;
    overflow: hidden;
}
.hq-ad-slot__inner img,
.hq-ad-slot__inner iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.hq-ad-slot__title {
    display: block;
    font-family: var(--hq-font-display);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #AAA;
    margin: 0 0 6px;
    text-align: center;
}

/* Marcador visible solo para el administrador */
.hq-ad-slot--vacio {
    align-items: center;
    height: 250px;
    border: 1px dashed var(--hq-rule);
    background: #FAFAFA;
    font-family: var(--hq-font-display);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #AAA;
}

@media (min-width: 900px) {
    .hq-ad-slot { margin-left: 0; margin-right: 0; }
    .hq-ad-slot--vacio { height: 120px; }
}