/**
 * Bloque: CTC · Single Noticia
 * Estructura y estilo de la página de nota individual del micrositio CTC.
 * Depende de css/ctc-css-base/ctc-css-base.css (tokens de marca). Scope: `.ctc`.
 * Basado en la entrega de diseño (clases `.ctc-noticia__*`), con reglas extra
 * para que el cuerpo tome el contenido dinámico de WordPress (the_content()).
 */

/* Layout general de la nota */
.ctc-noticia {
    margin-top: 0 !important;
    background: var(--ctc-color-fondo);
}

.ctc-noticia__cabecera {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px clamp(24px, 6vw, 40px) 0;
}

/* Eyebrow de categoría */
.ctc-noticia__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
}
.ctc-noticia__eyebrow-linea { width: 22px; height: 2px; background: var(--ctc-color-acento); flex: none; }
.ctc-noticia__eyebrow-texto {
    font-size: var(--ctc-font-size-eyebrow);
    font-weight: var(--ctc-font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ctc-color-acento);
}

/* Titular y bajada */
.ctc-noticia__titulo {
    margin: 0;
    font-weight: var(--ctc-font-weight-black);
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ctc-color-oscuro);
    text-wrap: balance;
}
.ctc-noticia__bajada {
    margin: 24px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ctc-color-texto-sec);
    font-weight: var(--ctc-font-weight-medium);
}

/* Meta: fecha + compartir */
.ctc-noticia__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin: 30px 0 34px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--ctc-color-borde);
}
.ctc-noticia__fecha { font-size: 13px; font-weight: var(--ctc-font-weight-medium); color: var(--ctc-color-texto-mute); }
.ctc-noticia__compartir { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ctc-noticia__compartir-label {
    font-size: var(--ctc-font-size-eyebrow);
    font-weight: var(--ctc-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ctc-color-texto-mute);
    margin-right: 4px;
}
.ctc-noticia__compartir a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ctc-color-borde);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ctc-color-texto-sec);
    font-size: 13px;
    font-weight: var(--ctc-font-weight-bold);
    text-decoration: none;
    transition: all var(--ctc-transition);
}
.ctc-noticia__compartir a:hover { border-color: var(--ctc-color-acento); color: var(--ctc-color-acento); }

/* Imagen destacada */
.ctc-noticia__figura { max-width: 1120px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 40px); }
.ctc-noticia__media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ctc-color-fondo-suave);
    aspect-ratio: 16 / 9;
}
.ctc-noticia__media-filete {
    height: 5px;
    background: var(--ctc-gradiente-marca);
    position: relative;
    z-index: 2;
}
.ctc-noticia__media img {
    position: absolute;
    inset: 5px 0 0 0;
    width: 100%;
    height: calc(100% - 5px);
    object-fit: cover;
    display: block;
}
.ctc-noticia__epigrafe { margin: 14px 2px 0; font-size: 13px; color: var(--ctc-color-texto-mute); line-height: 1.5; }

/* Cuerpo del artículo (contenido dinámico de WordPress) */
.ctc-noticia__cuerpo {
    max-width: 880px;
    margin: 0 auto;
    padding: 52px clamp(24px, 6vw, 40px) 60px;
    background: #ffffff;
    font-size: 18px;
    line-height: 1.75;
    color: #333333;
}
.ctc-noticia__cuerpo p { margin: 0 0 24px; }
.ctc-noticia__cuerpo > *:last-child { margin-bottom: 0; }
.ctc-noticia__cuerpo img { max-width: 100%; height: auto; }
.ctc-noticia__cuerpo a { color: var(--ctc-color-acento); }

/* Capitular: por span explícito o por ::first-letter del primer párrafo real */
.ctc-noticia__capital,
.ctc-noticia__cuerpo > p:first-of-type::first-letter {
    float: left;
    font-size: 62px;
    line-height: 0.86;
    font-weight: var(--ctc-font-weight-black);
    color: var(--ctc-color-acento);
    margin: 6px 14px 0 0;
}
.ctc-noticia__cuerpo h2,
.ctc-noticia__cuerpo h3 {
    margin: 42px 0 18px;
    font-weight: var(--ctc-font-weight-bold);
    font-size: 26px;
    line-height: 1.2;
    color: var(--ctc-color-oscuro);
}

/* Pull quote (clase propia o core/quote del editor) */
.ctc-noticia__cita,
.ctc-noticia__cuerpo blockquote {
    margin: 42px 0;
    padding: 4px 0 4px 26px;
    border-left: 4px solid var(--ctc-color-acento);
}
.ctc-noticia__cita p,
.ctc-noticia__cuerpo blockquote p {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.4;
    font-weight: var(--ctc-font-weight-bold);
    color: var(--ctc-color-oscuro);
}
.ctc-noticia__cita cite,
.ctc-noticia__cuerpo blockquote cite {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: var(--ctc-font-weight-semibold);
    font-style: normal;
    color: var(--ctc-color-texto-mute);
}

/* Tags */
.ctc-noticia__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 46px 0 0;
    padding-top: 34px;
    border-top: 1px solid var(--ctc-color-borde);
}

/* Meta repetido al cierre de la nota: la línea separadora la pone él,
   no el bloque de tags (evita dos líneas seguidas). */
.ctc-noticia__cuerpo .ctc-noticia__meta {
    margin: 46px 0 0;
    padding: 34px 0 0;
    border-bottom: none;
    border-top: 1px solid var(--ctc-color-borde);
}

/* Dentro del cuerpo los tags no dibujan su propia línea: la única
   separación la pone el meta de arriba. */
.ctc-noticia__cuerpo .ctc-noticia__tags {
    margin-top: 24px;
    padding-top: 0;
    border-top: none;
}
/* Etiquetas informativas: sin enlace ni hover */
.ctc-noticia__tag {
    display: inline-block;
    font-size: 13px;
    font-weight: var(--ctc-font-weight-medium);
    color: var(--ctc-color-texto);
    background: #f4f4f4;
    border-radius: var(--ctc-radius-pill);
    padding: 7px 15px;
}

/* Relacionadas */
.ctc-noticia__relacionadas {
    max-width: 1120px;
    margin: 76px auto 0;
    padding: 56px clamp(24px, 6vw, 40px) 92px;
    border-top: 1px solid var(--ctc-color-borde);
}
.ctc-noticia__relacionadas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}
.ctc-noticia__relacionadas-head h2 {
    margin: 0;
    font-weight: var(--ctc-font-weight-bold);
    font-size: 26px;
    line-height: 1.15;
    color: var(--ctc-color-oscuro);
}
.ctc-noticia__ver-todas {
    font-size: 14px;
    font-weight: var(--ctc-font-weight-semibold);
    color: var(--ctc-color-oscuro);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.ctc-noticia__ver-todas:hover { color: var(--ctc-color-acento); }
.ctc-noticia__ver-todas span { color: var(--ctc-color-acento); }

.ctc-noticia__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.ctc-noticia__card {
    display: flex;
    flex-direction: column;
    background: var(--ctc-color-fondo);
    border: 1px solid var(--ctc-color-borde);
    border-radius: var(--ctc-radius-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--ctc-transition);
}
.ctc-noticia__card:hover { border-color: var(--ctc-color-acento); }
.ctc-noticia__card-media { position: relative; display: block; height: 170px; background: var(--ctc-color-fondo-suave); overflow: hidden; }
.ctc-noticia__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctc-noticia__card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.ctc-noticia__card-fecha {
    font-size: 11px;
    font-weight: var(--ctc-font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ctc-color-texto-mute);
    margin-bottom: 10px;
}
.ctc-noticia__card-titulo {
    font-weight: var(--ctc-font-weight-bold);
    font-size: 17px;
    line-height: 1.3;
    color: var(--ctc-color-oscuro);
}
.ctc-noticia__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 14px;
    font-weight: var(--ctc-font-weight-semibold);
    color: var(--ctc-color-oscuro);
}
.ctc-noticia__card-cta span {
    display: inline-block;
    color: var(--ctc-color-acento);
    transition: transform var(--ctc-transition);
}
.ctc-noticia__card:hover .ctc-noticia__card-cta span { transform: translateX(4px); }

/* Responsive */
@media (max-width: 860px) {
    .ctc-noticia__grid { grid-template-columns: 1fr; }
}

/* Móvil: fecha arriba y redes abajo, cada una en su línea.
   (El margin-left: auto es lo que las alinea a la derecha en desktop.) */
@media (max-width: 47.9375rem) {
    .ctc-noticia__compartir {
        width: 100%;
        margin-left: 0;
    }
}