/* ─────────────────────────────────────────────────────────────
 * Dunes Theme · article-v2.css
 * v2.24.0 — Premium single redesign (Reuters-style):
 *
 *   1. Tarjetas multi-autor (.et-bio-grid + .et-bio-card)
 *   2. Blockquote con franja AZUL lateral (sustituye franja roja/negra)
 *   3. H1/H2 con hairlines decorativos arriba y abajo
 *   4. Bloque "Related Content" inline (PC sidebar + móvil minimalista)
 *   5. Fixes móvil: byline reorganizado, botón "ver artículos", banners azules
 *
 * Carga DESPUÉS de pc.css y mobile.css para ganar especificidad.
 * ───────────────────────────────────────────────────────────── */

:root {
    --et-blue: var(--et-brand, #114F6E);
    --et-blue-soft: #E9EEF8;
    --et-blue-ink: #1B3372;
    --et-line-soft: var(--et-rule, #E5E5E5);
    /* FP 1.80.0 · el gris se fue. Una cita sobre papel salmón con fondo
       gris se lee como un pegote de otra web: el único color frío de
       toda la página. Ahora es el mismo salmón del periódico, un paso
       más oscuro —el de las tarjetas del panel, que ya está aprobado—,
       así que la cita destaca por temperatura y no por ser ajena. */
    --et-quote-bg: #F6E5D2;
}

/* ─────────────────────────────────────────────────────────────
 * 1. BLOQUE MULTI-AUTOR (PC + MÓVIL)
 *    Render dentro de <aside class="et-bio-grid"> con N <article class="et-bio-card">.
 * ───────────────────────────────────────────────────────────── */
.et-bio-grid {
    max-width: 760px;
    margin: 48px auto 0 !important;
    padding: 32px 40px !important;
    border: 1px solid var(--et-rule, #E5E5E5) !important;
    border-radius: 8px !important;
    background: var(--et-paper, #fff) !important;
    box-sizing: border-box;
}
.et-bio-grid > .et-bio-card + .et-bio-card {
    margin-top: 22px !important;
    padding-top: 22px !important;
    border-top: 1px solid var(--et-rule, #F0F0F0) !important;
}

.et-bio-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    align-items: flex-start;
    font-family: 'Inter', sans-serif;
}
.et-bio-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F1F1F 0%, #525252 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.4px;
    text-decoration: none !important;
    border-bottom: 0 !important;
    overflow: hidden;
    flex-shrink: 0;
}
.et-bio-card__initials { color: #fff; }
.et-bio-card__main { min-width: 0; }
.et-bio-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.et-bio-card__id { min-width: 0; flex: 1; }
.et-bio-card__name {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: #0A0A0A !important;
    letter-spacing: -0.3px;
    line-height: 1.2;
    text-decoration: none !important;
    border-bottom: 0 !important;
    background: none !important;
}
.et-bio-card__name:hover {
    color: var(--et-blue) !important;
    text-decoration: none !important;
}
.et-bio-card__city {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--et-blue, var(--et-brand, #114F6E));
    font-weight: 600;
    letter-spacing: -0.1px;
}
.et-bio-card__org {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #525252;
    font-weight: 500;
}

.et-bio-card__social {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
.et-bio-card__soc {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--et-line-soft);
    background: var(--et-paper, #fff);
    color: #1F1F1F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    text-decoration: none;
}
.et-bio-card__soc svg { width: 15px; height: 15px; }
.et-bio-card__soc:hover {
    border-color: var(--et-blue);
    color: var(--et-blue);
    background: var(--et-blue-soft);
}

.et-bio-card__text {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #2A2A2A;
    font-weight: 400;
}

/* ─── MÓVIL: tarjetas más compactas, padding interno generoso ─── */
/* v2.32.6 — wrapper TRANSPARENTE; cada bio-card tiene su propia caja */
.et-m-bio-grid--mob,
.et-bio-grid--mob {
    margin: 28px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    max-width: none;
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.et-m > .et-bio-grid--mob,
.et-m__art > .et-bio-grid--mob {
    margin: 28px var(--et-mob-pad, 16px) 0 !important;
    width: calc(100% - calc(var(--et-mob-pad, 16px) * 2)) !important;
}
/* Cada bio-card individual ahora con fondo blanco + borde gris redondeado */
.et-bio-grid--mob .et-bio-card {
    background: var(--et-paper, #FFFFFF) !important;
    border: 1px solid var(--et-rule, #E5E5E5) !important;
    border-radius: 10px !important;
    padding: 18px 16px !important;
    margin: 0 !important;
}
.et-bio-grid--mob > .et-bio-card + .et-bio-card {
    margin-top: 0 !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--et-rule, #E5E5E5) !important;
}
.et-bio-grid--mob > .et-bio-card + .et-bio-card {
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--et-rule, #F0F0F0) !important;
}
.et-bio-grid--mob > .et-bio-card { gap: 14px; grid-template-columns: 52px 1fr; }
.et-bio-grid--mob .et-bio-card__avatar { width: 52px; height: 52px; font-size: 18px; }
.et-bio-grid--mob .et-bio-card__name { font-size: 15.5px; }
.et-bio-grid--mob .et-bio-card__org { font-size: 12px; margin-top: 2px; }
.et-bio-grid--mob .et-bio-card__head { gap: 10px; }
.et-bio-grid--mob .et-bio-card__soc { width: 34px; height: 34px; }
.et-bio-grid--mob .et-bio-card__soc svg { width: 13px; height: 13px; }
.et-bio-grid--mob .et-bio-card__text { margin-top: 12px; font-size: 13.5px; }

/* ─────────────────────────────────────────────────────────────
 * 2. BLOCKQUOTE — fondo gris muy clarito, sin cursiva, sin franja
 * ───────────────────────────────────────────────────────────── */

/* PC — fondo gris muy clarito + franja azul a la izquierda, sin cursiva */
.et-body blockquote {
    margin: 40px 0 !important;
    padding: 22px 26px !important;
    border: 0 !important;
    border-left: 4px solid var(--et-blue) !important;
    background: var(--et-quote-bg) !important;
    text-align: left !important;
    border-radius: 0 6px 6px 0 !important;
    font-style: normal !important;
}
.et-body blockquote *,
.et-body blockquote p,
.et-body blockquote cite,
.et-body blockquote em,
.et-body blockquote i {
    font-style: normal !important;
}
.et-body blockquote .label {
    color: #525252 !important;
    margin-bottom: 12px !important;
}
.et-body blockquote p {
    font-size: 19px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.2px !important;
    font-weight: 500 !important;
    color: #0A0A0A !important;
    margin: 0 0 14px !important;
    font-style: normal !important;
}
.et-body blockquote p:last-child { margin-bottom: 0 !important; }
.et-body blockquote .attr {
    justify-content: flex-start !important;
    margin-top: 8px;
}
.et-body blockquote .attr .rule { background: #BDBDBD !important; }
.et-body blockquote .attr-name { color: #0A0A0A !important; font-style: normal !important; }
.et-body blockquote .attr-role { color: #525252 !important; font-style: normal !important; }

/* Móvil — fondo gris muy clarito + franja azul a la izquierda, sin cursiva */
.et-m__art-body blockquote {
    margin: 24px 0 !important;
    padding: 18px 20px !important;
    border: 0 !important;
    border-left: 4px solid var(--et-blue) !important;
    background: var(--et-quote-bg) !important;
    text-align: left !important;
    border-radius: 0 6px 6px 0 !important;
    font-style: normal !important;
}
.et-m__art-body blockquote *,
.et-m__art-body blockquote p,
.et-m__art-body blockquote cite,
.et-m__art-body blockquote em,
.et-m__art-body blockquote i {
    font-style: normal !important;
}
.et-m__art-body blockquote .label,
.et-m__art-body blockquote span.label {
    color: #525252 !important;
    margin-bottom: 12px !important;
}
.et-m__art-body blockquote p {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.2px !important;
    color: #0A0A0A !important;
}
.et-m__art-body blockquote .attr {
    justify-content: flex-start !important;
}
.et-m__art-body blockquote .attr .rule { background: #BDBDBD !important; }
.et-m__art-body blockquote .attr-name { color: #0A0A0A !important; }
.et-m__art-body blockquote .attr-role { color: #525252 !important; }

/* ─────────────────────────────────────────────────────────────
 * 3. H1 / H2 con HAIRLINES arriba y abajo (estilo Reuters)
 * ───────────────────────────────────────────────────────────── */

/* PC — Titular del artículo */
.et-article__title {
    position: relative;
    padding: 28px 0 !important;
    border-top: 1px solid var(--et-rule, var(--et-rule, #ddd));
    border-bottom: 1px solid var(--et-rule, var(--et-rule, #ddd));
}
/* v2.43.16 · PC — H2/H3 con línea AZUL theme arriba (estilo Bloomberg/FT)
   Antes: top+bottom 1px gray. Ahora: 3px azul arriba + 1px gris abajo. */
.et-body h2,
.et-body h3 {
    position: relative;
    padding: 22px 0 !important;
    margin: 40px 0 28px !important;
    border-top: 3px solid var(--et-blue, var(--et-brand, #114F6E));
    border-bottom: 1px solid var(--et-rule, #E5E5E5);
}

/* Móvil — Headline del artículo */
.et-m__art-headline {
    position: relative;
    padding: 20px 0 !important;
    margin-top: 18px !important;
    border-top: 3px solid var(--et-blue, var(--et-brand, #114F6E));
    border-bottom: 1px solid var(--et-rule, #E5E5E5);
}
/* Móvil — H2/H3 dentro del cuerpo */
.et-m__art-body h2,
.et-m__art-body h3 {
    position: relative;
    padding: 16px 0 !important;
    margin: 32px 0 18px !important;
    border-top: 3px solid var(--et-blue, var(--et-brand, #114F6E));
    border-bottom: 1px solid var(--et-rule, #E5E5E5);
}

/* ─────────────────────────────────────────────────────────────
 * 4. BLOQUE "RELATED CONTENT" INLINE — 2 cards a ancho COMPLETO
 *    Diseño premium: imagen 16:9 arriba, kicker + título debajo.
 * ───────────────────────────────────────────────────────────── */

.et-related-inline {
    clear: both;
    float: none;
    width: 100%;
    margin: 44px 0 40px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

.et-related-inline__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.et-related-inline__kicker {
    font-size: 11px;
    /* v2.167.0 · un punto menos de negrita, por petición del CEO. */
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #0A0A0A;
    flex-shrink: 0;
}
.et-related-inline__rule {
    flex: 1;
    height: 1px;
    background: #DDD;
}

.et-related-inline__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.et-related-inline__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--et-paper, #fff);
}
.et-related-inline__card:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.et-related-inline__card:hover .et-related-inline__title {
    color: var(--et-blue);
}
.et-related-inline__card:hover .et-related-inline__thumb {
    transform: scale(1.03);
}

.et-related-inline__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #E5E5E5 center/cover no-repeat;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.4s ease;
    display: block;
}
.et-related-inline__thumb-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #1F1F1F 0%, #525252 100%);
}

.et-related-inline__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 4px 0;
}
.et-related-inline__cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--et-blue);
    text-transform: uppercase;
    line-height: 1;
}
.et-related-inline__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.35px;
    color: #0A0A0A;
    transition: color 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Móvil: 1 columna, mismo lenguaje visual ── */
.et-related-inline--mob {
    margin: 32px 0;
}
.et-related-inline--mob .et-related-inline__grid {
    grid-template-columns: 1fr;
    gap: 22px;
}
.et-related-inline--mob .et-related-inline__title {
    font-size: 16px;
    line-height: 1.3;
    -webkit-line-clamp: 3;
}
.et-related-inline--mob .et-related-inline__cat { font-size: 10px; }
.et-related-inline--mob .et-related-inline__thumb { aspect-ratio: 16 / 9; }

/* ─────────────────────────────────────────────────────────────
 * 5. FIXES MÓVIL: byline reorganizado + tools horizontales + fixes color
 * ───────────────────────────────────────────────────────────── */

/* Byline v2 — SELF-CONTAINED. El elemento ya no lleva la clase original
   `.et-m__art-byline` para no heredar sus border-top/border-bottom.
   Solo UNA hairline al FINAL del bloque completo (antes del hero). */
.et-m__art-byline--v2 {
    margin: 0 var(--et-mob-pad, 16px);
    padding: 16px 0 14px;
    border: 0;
    border-bottom: 1px solid var(--et-rule, #E5E3DD); /* ÚNICA línea, separa byline del hero */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
/* Garantía adicional: matamos cualquier border en TODOS los descendientes */
.et-m__art-byline--v2 .et-m__art-byline-row,
.et-m__art-byline--v2 .et-m__art-avatar,
.et-m__art-byline--v2 .et-m__art-author,
.et-m__art-byline--v2 .et-m__art-author-name,
.et-m__art-byline--v2 .et-m__art-author-role,
.et-m__art-byline--v2 .et-m__art-author-date,
.et-m__art-byline--v2 .et-m__art-author-meta,
.et-m__art-byline--v2 .et-m__art-tools,
.et-m__art-byline--v2 .et-m__art-tool,
.et-m__art-byline--v2 .et-m__art-tool span {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background-image: none !important;
}
.et-m__art-byline--v2 .et-m__art-byline-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.et-m__art-byline--v2 .et-m__art-byline-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Tools en fila debajo, agrupados en una barra única SIN cajas individuales.
   Cada botón es "ghost" (sin border, sin fondo) para evitar líneas visuales
   paralelas (border-top + border-bottom de cada caja). El gap entre botones
   es generoso para que se lean como acciones separadas. */
.et-m__art-byline--v2 .et-m__art-tools {
    display: flex !important;
    gap: 18px !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.et-m__art-byline--v2 .et-m__art-tool {
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #525252 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transform: none !important;
    box-shadow: none !important;
}
.et-m__art-byline--v2 .et-m__art-tool:hover,
.et-m__art-byline--v2 .et-m__art-tool:active,
.et-m__art-byline--v2 .et-m__art-tool:focus {
    color: var(--et-blue) !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
}
.et-m__art-byline--v2 .et-m__art-tool svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
    stroke: currentColor !important;
}
.et-m__art-byline--v2 .et-m__art-tool span {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    color: inherit !important;
}

/* ─── Fix botón "Ver todos sus artículos" (texto azul sobre fondo azul) ─── */
.et-m__art-bio-link,
.et-bio-card__name {
    -webkit-tap-highlight-color: transparent;
}
.et-m__art-bio-link:hover,
.et-m__art-bio-link:active,
.et-m__art-bio-link:focus {
    color: var(--et-blue) !important;
    background: transparent !important;
    text-decoration: none;
}
/* En el viejo .et-m__art-bio si quedara, normalizamos el contraste activo */
.et-m__art-bio a:active,
.et-m__art-bio a:focus {
    background: transparent !important;
    color: var(--et-blue) !important;
}

/* ─────────────────────────────────────────────────────────────
 * 6. ICONO INSTAGRAM (footer móvil) — icono IZQUIERDA + texto DERECHA
 *    Asegura layout horizontal en cualquier social con texto.
 * ───────────────────────────────────────────────────────────── */
.et-m__footer-social a,
.et-pcv2-footer__social a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: left;
}
.et-m__footer-social a svg,
.et-pcv2-footer__social a svg {
    flex-shrink: 0;
    order: 0;
}
.et-m__footer-social a span,
.et-pcv2-footer__social a span {
    order: 1;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
 * 7. Banners separator: rojo → azul del theme
 * ───────────────────────────────────────────────────────────── */
.et-m-sep--banner .et-m-sep__banner {
    background: linear-gradient(135deg, #F4F7FC 0%, #E9EEF8 100%) !important;
    border-left: 3px solid var(--et-blue) !important;
}
.et-m-sep__banner-mark { color: var(--et-blue) !important; }

/* ─────────────────────────────────────────────────────────────
 * 8. RESPONSIVE: en pantallas < 768px caemos a 1 columna stack
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .et-related-inline__grid { grid-template-columns: 1fr !important; gap: 22px !important; }
    .et-related-inline__title { font-size: 16px !important; }
    .et-related-inline__thumb { aspect-ratio: 16 / 9 !important; }
}

/* ════════════════════════════════════════════════════════════════
 * 9. PLUGIN DUNES AI — overrides para sus plantillas
 *    .dai-tpl__   → Noticia estándar
 *    .dai-tpl-op__ → Opinión
 *    .dai-tpl-tv__ → Viajes
 * ════════════════════════════════════════════════════════════════ */

/* ─── BLOCKQUOTE — fondo gris muy clarito + franja azul izquierda, sin cursiva ─── */
.dai-tpl__body blockquote,
.dai-tpl-op__body blockquote,
.dai-tpl-tv__body blockquote,
.dunes-template .dai-tpl__body blockquote {
    margin: 32px 0 !important;
    padding: 22px 26px !important;
    border: 0 !important;
    border-left: 4px solid var(--et-blue) !important;
    background: var(--et-quote-bg) !important;
    text-align: left !important;
    border-radius: 0 6px 6px 0 !important;
    color: #0A0A0A !important;
    font-style: normal !important;
}
.dai-tpl__body blockquote *,
.dai-tpl-op__body blockquote *,
.dai-tpl-tv__body blockquote *,
.dai-tpl__body blockquote p,
.dai-tpl-op__body blockquote p,
.dai-tpl-tv__body blockquote p,
.dai-tpl__body blockquote cite,
.dai-tpl-op__body blockquote cite,
.dai-tpl-tv__body blockquote cite,
.dai-tpl__body blockquote em,
.dai-tpl-op__body blockquote em,
.dai-tpl-tv__body blockquote em,
.dai-tpl__body blockquote i,
.dai-tpl-op__body blockquote i,
.dai-tpl-tv__body blockquote i {
    font-style: normal !important;
}
.dai-tpl__body blockquote p,
.dai-tpl-op__body blockquote p,
.dai-tpl-tv__body blockquote p {
    font-size: 18px !important;
    line-height: 1.55 !important;
    margin: 0 0 12px !important;
    font-weight: 500 !important;
    color: #0A0A0A !important;
}
.dai-tpl__body blockquote p:last-child,
.dai-tpl-op__body blockquote p:last-child,
.dai-tpl-tv__body blockquote p:last-child { margin-bottom: 0 !important; }
.dai-tpl__body blockquote cite,
.dai-tpl-op__body blockquote cite,
.dai-tpl-tv__body blockquote cite {
    color: #525252 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ─── H1 / H2 con hairlines decorativos (estilo Reuters) ─── */
.dai-tpl__title,
.dai-tpl-op__title,
.dai-tpl-tv__title {
    padding: 26px 0 !important;
    border-top: 1px solid var(--et-rule, var(--et-rule, #ddd)) !important;
    border-bottom: 1px solid var(--et-rule, var(--et-rule, #ddd)) !important;
    margin-bottom: 22px !important;
}
.dai-tpl-tv__title {
    /* En viajes el título va sobre el hero con overlay → ahí no aplica el hairline */
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
}

/* v2.43.16 · Plantillas del plugin (noticia/opinión/viajes) — H2/H3
   con misma línea azul theme arriba */
.dai-tpl__body h2,
.dai-tpl-op__body h2,
.dai-tpl-tv__body h2,
.dai-tpl__body h3,
.dai-tpl-op__body h3,
.dai-tpl-tv__body h3 {
    padding: 18px 0 !important;
    margin: 36px 0 22px !important;
    border-top: 3px solid var(--et-blue, var(--et-brand, #114F6E)) !important;
    border-bottom: 1px solid var(--et-rule, #E5E5E5) !important;
}

/* ─── Botón "+ Seguir / Siguiendo" del byline · v2.43.19
   border-radius 6px con borde más fino y sub-pixel antialias para que NO se
   vea pixelado (el problema de v2.43.18 con 4px es que en HiDPI quedaba
   escalonado). */
.dai-tpl__byline-follow {
    background: var(--et-paper, #fff) !important;
    color: var(--et-blue) !important;
    border: 1px solid var(--et-blue) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    cursor: pointer;
    transition: all 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
    /* Antialias del borde · evita el "pixelado" */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
}
.dai-tpl__byline-follow:hover,
.dai-tpl__byline-follow:focus {
    background: var(--et-blue) !important;
    color: #fff !important;
    border-color: var(--et-blue) !important;
}
.dai-tpl__byline-follow:active {
    /* fix azul-sobre-azul: el browser fuerza tap-highlight → forzamos fondo blanco al tocar */
    background: var(--et-blue-soft) !important;
    color: var(--et-blue) !important;
    border-color: var(--et-blue) !important;
}
.dai-tpl__byline-follow.is-following {
    background: var(--et-blue) !important;
    color: #fff !important;
}
.dai-tpl__byline-follow.is-following .dai-tpl__byline-follow-label {
    color: #fff !important;
}
.dai-tpl__byline-follow .dai-tpl__byline-follow-label { color: inherit !important; }

/* ─── Bio cards multi-autor cuando se insertan dentro del .dai-tpl__main ─── */
.dai-tpl__main .et-bio-grid,
.dai-tpl-op__main .et-bio-grid,
.dai-tpl-tv__main .et-bio-grid {
    max-width: none;
    margin-top: 48px;
    padding-left: 0;
    padding-right: 0;
}
.dai-tpl__main .et-bio-grid--mob,
.dai-tpl-op__main .et-bio-grid--mob,
.dai-tpl-tv__main .et-bio-grid--mob {
    margin: 32px 0 0;
}

/* ─── Related inline DENTRO del body del plugin: ancho completo del container ─── */
.dai-tpl__body .et-related-inline,
.dai-tpl-op__body .et-related-inline,
.dai-tpl-tv__body .et-related-inline {
    width: 100%;
    margin: 40px 0;
    float: none;
}

/* ─── Hero del template viajes: el H1 va con overlay, no hairlines ─── */
.dai-tpl-tv__hero h1.dai-tpl-tv__title,
.dunes-template-viajes .dai-tpl-tv__title {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
 * 10. INSTAGRAM CTA INLINE — rediseño móvil:
 *     - Icono IG grande separado a la IZQUIERDA → SE OCULTA en móvil
 *     - El botón "Seguir" lleva el icono Instagram dentro, al lado
 *       del texto, gradient nativo. Premium y compacto.
 *
 *     Layout móvil:
 *       ┌──────────────────────────────────────────┐
 *       │  Título · Síguenos en Instagram          │
 *       │  Subtítulo en 2 líneas                   │
 *       │                                          │
 *       │       [📷 Seguir en Instagram →]         │
 *       └──────────────────────────────────────────┘
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .dai-igc-inline {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px 18px !important;
        background: #FAFAFA !important;
        border: 1px solid var(--et-rule, #EAEAEA) !important;
        border-radius: 14px !important;
    }
    /* En móvil escondemos el logo separado — el icono va DENTRO del CTA */
    .dai-igc-inline__logo {
        display: none !important;
    }
    .dai-igc-inline__text {
        order: 1 !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-bottom: 4px !important;
        align-items: center !important;
    }
    .dai-igc-inline__title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0A0A0A !important;
        letter-spacing: -0.2px !important;
        line-height: 1.3 !important;
    }
    .dai-igc-inline__sub {
        font-size: 13px !important;
        color: #525252 !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* CTA con icono Instagram inline al lado del texto "Seguir" */
    .dai-igc-inline__cta {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 auto !important;
        padding: 12px 22px !important;
        background: linear-gradient(135deg, #FFC939 0%, #FE5C5C 40%, #D81989 70%, #553EFF 100%) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.2px !important;
        box-shadow: 0 4px 14px rgba(216,25,137,0.25) !important;
        text-decoration: none !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    /* Icono Instagram inline AL INICIO del botón (antes del texto "Seguir") */
    .dai-igc-inline__cta::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .dai-igc-inline__cta:hover {
        background: linear-gradient(135deg, #FFC939 0%, #FE5C5C 40%, #D81989 70%, #553EFF 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 18px rgba(216,25,137,0.32) !important;
        color: #fff !important;
    }
    .dai-igc-inline__cta svg {
        stroke: #fff !important;
        width: 14px !important;
        height: 14px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
 * 23. PC TOPBAR + HOME PC FIXES (v2.32.0)
 * ════════════════════════════════════════════════════════════════ */

/* Widget tiempo topbar PC — sol + temp + Min/Max */
.et-pc-topbar__weather {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: #0A0A0A !important;
    background: transparent !important;
    transition: background .15s !important;
}
.et-pc-topbar__weather:hover { background: rgba(255,255,255,0.06) !important; }
.et-pc-topbar__weather-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.et-pc-topbar__weather-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}
.et-pc-topbar__weather-top {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.et-pc-topbar__weather-top strong {
    font-size: 20px;
    font-weight: 800;
    color: #0A0A0A;
    letter-spacing: -0.5px;
    line-height: 1;
}
.et-pc-topbar__weather-cond {
    font-size: 12.5px;
    font-weight: 500;
    color: #525252;
    letter-spacing: -0.1px;
}
.et-pc-topbar__weather-range {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: #8C8C8C;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.et-pc-topbar__weather-range strong {
    color: #0A0A0A;
    font-weight: 700;
    font-size: 11.5px;
    margin-left: 2px;
}

/* Bloque destacado/noticia destacada estilo hero dentro de WQO */
.et-pcv2-wqo__feature {
    margin-top: 18px;
    padding: 0;
    background: transparent;
}
.et-pcv2-wqo__feature-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #E5E5E5 center/cover no-repeat;
    border-radius: 4px;
    margin-bottom: 12px;
    transition: opacity .2s;
}
.et-pcv2-wqo__feature-photo:hover { opacity: 0.92; }
.et-pcv2-wqo__feature-body { padding: 0; }
.et-pcv2-wqo__feature-title {
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
    color: #0A0A0A;
}
.et-pcv2-wqo__feature-title a {
    color: inherit;
    text-decoration: none;
}
.et-pcv2-wqo__feature-title a:hover { color: var(--et-brand, #114F6E); }
.et-pcv2-wqo__feature-kicker {
    color: var(--et-brand, #114F6E);
    font-weight: 800;
}
.et-pcv2-wqo__feature-dek {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #525252;
    font-weight: 400;
}

/* Opinión cards — fondo blanco + borde gris redondeado */
.et-pcv2-opinion__list > li,
.et-pcv2-opinion__item {
    background: var(--et-paper, #FFFFFF) !important;
    border: 1px solid var(--et-rule, #E5E5E5) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.et-pcv2-opinion__list > li:hover,
.et-pcv2-opinion__item:hover {
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 8px rgba(17,79,110,0.06) !important;
}

/* Economía — CTA Gasolineras ancho completo dentro del bloque A */
.et-pcv2-econ__a > .et-cta {
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Destacados — alinear ciudad y autor (mismo baseline) */
.et-pcv2-card__byline,
.et-pcv2-meta,
.et-pcv2-byline,
.et-pcv2-feat__meta {
    align-items: baseline !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.et-pcv2-card__city,
.et-pcv2-meta__city,
.et-pcv2-byline__city,
.et-pcv2-feat__city {
    font-size: 13px !important;
    line-height: 1.4 !important;
    vertical-align: baseline !important;
    margin-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
 * 22. DRAWER MÓVIL v5 (v2.32.3) — EDITORIAL MINIMALISTA
 *
 *  Inspiración: NYT / The Atlantic / FT.
 *  - 100vw — ocupa TODO el ancho de pantalla
 *  - Kickers centrados con hairlines a los lados
 *  - Items "Lo más visto" numerados 01-04, juntos, sin dots ni badges
 *  - Tarjeta del tiempo SIN fondo ni borde
 *  - Botón "Mi cuenta" pill outline fino
 *  - Tipografía Inter weight 400-600, NO bold pesado
 *  - Separadores hairline casi invisibles
 *  - Más aire ENTRE secciones, items COMPACTOS dentro
 * ════════════════════════════════════════════════════════════════ */

/* WRAPPER — 100vw, fondo blanco puro */
.et-m__drawer.et-m__drawer--v5 {
    background: var(--et-paper, #FFFFFF) !important;
    color: #0A0A0A !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* HEAD — logo + Mi cuenta + cerrar */
.et-d5__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px 16px;
}
.et-d5__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: #0A0A0A !important;
    flex-shrink: 0;
}
.et-d5__logo img {
    max-height: 34px;
    width: auto;
    display: block;
}
.et-d5__logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #0A0A0A;
    line-height: 1;
}
.et-d5__head-right {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
/* v2.33.13 — Botón "Mi cuenta" PREMIUM minimalista:
   pill outline ultra fino con avatar circular dark a la izquierda.
   En hover: pill se llena de negro y el avatar se invierte. */
.et-d5__account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 4px;
    background: transparent;
    border: 1px solid var(--et-rule, #E5E5E5);
    border-radius: 999px;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
    transition: border-color .18s, background .18s, color .18s;
}
.et-d5__account-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0A0A0A;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .18s, color .18s;
}
.et-d5__account-avatar svg { display: block; }
.et-d5__account-label {
    font-weight: 500;
    letter-spacing: 0.2px;
}
.et-d5__account:hover {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #FFFFFF !important;
}
.et-d5__account:hover .et-d5__account-avatar {
    background: var(--et-paper, #FFFFFF);
    color: #0A0A0A;
}
.et-d5__close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #0A0A0A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s;
    margin-left: 4px;
}
.et-d5__close:hover { background: #F5F5F5; }

/* BUSCADOR — pill fino */
.et-d5__search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 24px 0;
    padding: 11px 16px;
    background: #F5F5F5;
    border: 0;
    border-radius: 999px;
}
.et-d5__search svg { color: #8A8A8A; flex-shrink: 0; }
.et-d5__search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0A0A0A;
    outline: 0;
    padding: 0;
}
.et-d5__search input::placeholder { color: #8A8A8A; }

/* SECCIÓN COMÚN — más aire arriba */
.et-d5__section {
    padding: 32px 24px 0;
}
.et-d5__section--last {
    padding-bottom: 32px;
}

/* KICKER · v2.48.3 · alineado a la IZQUIERDA con línea horizontal hairline
   que va desde después del título hasta el final del contenedor (premium). */
.et-d5__kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    font-size: 0;
    line-height: 1;
}
.et-d5__kicker > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #0A0A0A;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.et-d5__kicker::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E5E5;
}
/* (sin ::before — el título va pegado a la izquierda) */

/* LO MÁS VISTO · v2.48.3 · SIN numeración · titulares compactos */
.et-d5__top {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-d5__top-item + .et-d5__top-item {
    border-top: 1px solid var(--et-rule, #F0F0F0);
}
.et-d5__top-item a {
    display: block;
    padding: 12px 0;
    color: #0A0A0A !important;
    text-decoration: none !important;
}
.et-d5__top-item a:hover .et-d5__top-title { color: var(--et-brand, #114F6E); }
.et-d5__top-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #0A0A0A;
    letter-spacing: -0.2px;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CATEGORÍAS / PÁGINAS — grid 2 columnas, finas */
.et-d5__cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.et-d5__cat {
    display: flex;
    align-items: center;
    padding: 13px 8px 13px 0;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.15px;
    border-bottom: 1px solid var(--et-rule, #F0F0F0);
    transition: color .15s;
    line-height: 1.2;
}
.et-d5__cat:nth-child(odd) { border-right: 1px solid var(--et-rule, #F0F0F0); padding-right: 14px; }
.et-d5__cat:nth-child(even) { padding-left: 14px; }
.et-d5__cat:hover { color: var(--et-brand, #114F6E) !important; }
.et-d5__cats > .et-d5__cat:nth-last-child(-n+2) { border-bottom: 0; }

/* ─── Mi Cuenta · v2.48.4 ────────────────────────────────────────
   Igual estructura que el resto de categorías del grid 2 columnas:
   mismo padding, misma hairline, mismo tamaño · solo diferenciado
   por el TEXTO en azul Dunes + negrita. Premium minimalista. */
.et-d5__cat--account {
    color: var(--et-brand, #114F6E) !important;
    font-weight: 700 !important;
}
.et-d5__cat--account:hover { color: #1E2F5C !important; }

/* v2.33.13 — Tarjeta del TIEMPO premium · ANCHO COMPLETO · 2 niveles:
   - Top: icono grande + temperatura + condición + min/max
   - Bottom: footer link "Pronóstico 7 días →" separado por hairline
   Background con gradiente sutil azul→blanco. */
.et-d5__weather {
    display: block;
    width: 100%;
    padding: 18px 20px 14px;
    background: linear-gradient(135deg, #F6F9FF 0%, #FFFFFF 100%);
    border: 1px solid var(--et-rule, #E8ECF4);
    border-radius: 14px;
    text-decoration: none !important;
    color: #0A0A0A !important;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    box-sizing: border-box;
}
.et-d5__weather:hover,
.et-d5__weather:focus-visible {
    border-color: var(--et-brand, #114F6E);
    box-shadow: 0 4px 16px rgba(17,79,110, 0.08);
}
.et-d5__weather-main {
    display: flex;
    align-items: center;
    gap: 16px;
}
.et-d5__weather-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.et-d5__weather-icon svg { display: block; }
.et-d5__weather-data {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
    min-width: 0;
}
.et-d5__weather-temp {
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 300;
    color: #0A0A0A;
    letter-spacing: -2.5px;
    line-height: 0.95;
}
.et-d5__weather-cond {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #525252;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 4px;
}
.et-d5__weather-range {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    color: #8A8A8A;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.et-d5__weather-mm strong {
    color: #0A0A0A;
    font-weight: 700;
    letter-spacing: 0;
}
.et-d5__weather-cta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--et-rule, #ECECEC);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--et-brand, #114F6E);
}
.et-d5__weather-cta svg {
    color: var(--et-brand, #114F6E);
    transition: transform .2s;
}
.et-d5__weather:hover .et-d5__weather-cta svg {
    transform: translateX(3px);
}

/* ──────────────────────────────────────────────────────────────
 * CSS ANTIGUO v4 — placeholder por compatibilidad (no usado, NO romper)
 * ────────────────────────────────────────────────────────────── */
.et-m__drawer.et-m__drawer--v4 {
    background: var(--et-paper, #FFFFFF) !important;
    color: #0A0A0A !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0 !important;
}

/* ── HEAD: logo + Mi Cuenta + cerrar ── */
.et-d4__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px 14px !important;
    border-bottom: 1px solid var(--et-rule, #EFEFEF) !important;
    background: var(--et-paper, #FFFFFF) !important;
}
.et-d4__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: #0A0A0A !important;
    flex-shrink: 0;
}
.et-d4__logo img {
    max-height: 36px;
    width: auto;
    display: block;
}
.et-d4__logo-text {
    font-size: 22px;
    font-weight: 800;
    color: #0A0A0A;
    letter-spacing: -0.6px;
    line-height: 1;
}
.et-d4__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.et-d4__account {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--et-paper, #FFFFFF);
    border: 1px solid #0A0A0A;
    border-radius: 6px;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.1px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.et-d4__account strong {
    font-weight: 800;
    margin-left: 2px;
}
.et-d4__account:hover {
    background: #0A0A0A;
    color: #FFFFFF !important;
}
.et-d4__close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #0A0A0A;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .15s;
}
.et-d4__close:hover { background: #F5F5F5; }

/* ── BUSCADOR pill grande ── */
.et-d4__search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 18px 8px !important;
    padding: 14px 18px !important;
    background: #C8CED8 !important;
    border: 0 !important;
    border-radius: 999px !important;
    transition: background .15s !important;
}
.et-d4__search:focus-within { background: #B5BCC6 !important; }
.et-d4__search svg {
    color: #2A2F3C !important;
    flex-shrink: 0 !important;
}
.et-d4__search input {
    flex: 1 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #0A0A0A !important;
    outline: 0 !important;
    padding: 0 !important;
}
.et-d4__search input::placeholder { color: #595E69 !important; opacity: 1; }

/* ── SECCIÓN común ── */
.et-d4__section {
    padding: 24px 18px 10px !important;
    border-bottom: 0 !important;
}
.et-d4__kicker {
    margin: 0 0 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2.6px !important;
    color: var(--et-brand, #114F6E) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* ── LO MÁS VISTO ── */
.et-d4__top {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-d4__top-item {
    border-bottom: 1px solid var(--et-rule, #F0F0F0);
}
.et-d4__top-item:last-child { border-bottom: 0; }
.et-d4__top-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.et-d4__top-item a:hover { color: var(--et-brand, #114F6E) !important; }
.et-d4__top-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--et-brand, #114F6E);
}
.et-d4__top-title {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.et-d4__top-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    background: #C8102E;
    color: #FFFFFF !important;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

/* ── SECCIONES / PÁGINAS — grid 2 columnas con separador vertical ── */
.et-d4__cats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
}
.et-d4__cat {
    display: flex !important;
    align-items: center !important;
    padding: 16px 14px 16px 0 !important;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    border-bottom: 1px solid var(--et-rule, #F0F0F0) !important;
    line-height: 1.2 !important;
    transition: color .15s !important;
}
.et-d4__cat:nth-child(odd) {
    border-right: 1px solid var(--et-rule, #E5E5E5) !important;
    padding-right: 14px !important;
}
.et-d4__cat:nth-child(even) {
    padding-left: 14px !important;
}
.et-d4__cat:hover { color: var(--et-brand, #114F6E) !important; }
.et-d4__section .et-d4__cats .et-d4__cat:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

/* ── TARJETA TIEMPO al final del drawer ── */
.et-d4__section--weather {
    padding-bottom: 28px !important;
}
.et-d4__weather {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    background: linear-gradient(135deg, #F7F9FC 0%, #E9EEF8 100%) !important;
    border: 1px solid var(--et-rule, #DCE5F4) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #0A0A0A !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.et-d4__weather:hover {
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 10px rgba(17,79,110,0.10) !important;
}
.et-d4__weather-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.et-d4__weather-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.et-d4__weather-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.et-d4__weather-top strong {
    font-size: 30px;
    font-weight: 800;
    color: #0A0A0A;
    line-height: 1;
    letter-spacing: -1px;
}
.et-d4__weather-cond {
    font-size: 14px;
    font-weight: 500;
    color: #525252;
    letter-spacing: -0.1px;
}
.et-d4__weather-range {
    font-size: 12px;
    color: #525252;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.et-d4__weather-range strong {
    color: #0A0A0A;
    font-weight: 700;
    font-size: 13px;
    margin-left: 2px;
}

/* Wrapper drawer v3 — fondo blanco */
.et-m__drawer.et-m__drawer--v3 {
    background: var(--et-paper, #FFFFFF) !important;
    color: #0A0A0A !important;
    font-family: 'Inter', sans-serif !important;
}

/* HEAD */
.et-m__drawer--v3 .et-m__drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 18px 18px 14px !important;
    border-bottom: 1px solid var(--et-rule, #F0F0F0) !important;
    background: var(--et-paper, #FFFFFF) !important;
}
.et-m__drawer--v3 .et-m__drawer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    color: #0A0A0A !important;
}
.et-m__drawer--v3 .et-m__drawer-logo img {
    max-height: 32px;
    width: auto;
    display: block;
}
.et-m__drawer--v3 .et-m__drawer-logo-text {
    font-size: 18px;
    font-weight: 800;
    color: #0A0A0A;
    letter-spacing: -0.4px;
}
.et-m__drawer--v3 .et-m__drawer-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.et-m__drawer--v3 .et-m__drawer-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--et-paper, #FFFFFF);
    border: 1px solid var(--et-brand, #114F6E);
    border-radius: 999px;
    color: var(--et-brand, #114F6E) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.et-m__drawer--v3 .et-m__drawer-account:hover {
    background: var(--et-brand, #114F6E);
    color: #FFFFFF !important;
}
.et-m__drawer--v3 .et-m__drawer-close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #0A0A0A;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.et-m__drawer--v3 .et-m__drawer-close:hover { background: #F5F5F5; }

/* BÚSQUEDA */
.et-m__drawer--v3 .et-m__drawer-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px 18px 6px !important;
    padding: 10px 14px !important;
    background: #F5F5F5 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    transition: border-color .15s, background .15s !important;
}
.et-m__drawer--v3 .et-m__drawer-search:focus-within {
    border-color: var(--et-brand, #114F6E) !important;
    background: var(--et-paper, #FFFFFF) !important;
}
.et-m__drawer--v3 .et-m__drawer-search svg {
    color: #8C8C8C !important;
    flex-shrink: 0 !important;
}
.et-m__drawer--v3 .et-m__drawer-search input {
    flex: 1 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #0A0A0A !important;
    outline: 0 !important;
    padding: 0 !important;
}
.et-m__drawer--v3 .et-m__drawer-search input::placeholder { color: #8C8C8C !important; }

/* SECCIÓN común */
.et-m__drawer--v3 .et-m__drawer-section {
    padding: 18px 18px 18px !important;
    border-bottom: 1px solid var(--et-rule, #F0F0F0) !important;
}
.et-m__drawer--v3 .et-m__drawer-kicker {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2.4px !important;
    color: var(--et-brand, #114F6E) !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
}

/* Lo más visto */
.et-m__drawer--v3 .et-m__drawer-top {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-m__drawer--v3 .et-m__drawer-top li {
    border-bottom: 1px solid var(--et-rule, #F5F5F5);
}
.et-m__drawer--v3 .et-m__drawer-top li:last-child { border-bottom: 0; }
.et-m__drawer--v3 .et-m__drawer-top a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.2px;
}
.et-m__drawer--v3 .et-m__drawer-top a:hover { color: var(--et-brand, #114F6E) !important; }
.et-m__drawer--v3 .et-m__drawer-top-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--et-brand, #114F6E);
    margin-top: 8px;
}
.et-m__drawer--v3 .et-m__drawer-top-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Secciones / Páginas — grid 2 columnas con separadores */
.et-m__drawer--v3 .et-m__drawer-cats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
}
.et-m__drawer--v3 .et-m__drawer-cat {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 12px 14px 12px 0 !important;
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    border-bottom: 1px solid var(--et-rule, #F5F5F5) !important;
    transition: color .15s !important;
    line-height: 1.2 !important;
}
.et-m__drawer--v3 .et-m__drawer-cat:nth-child(odd) {
    padding-right: 14px !important;
    border-right: 1px solid var(--et-rule, #F0F0F0) !important;
}
.et-m__drawer--v3 .et-m__drawer-cat:nth-child(even) { padding-left: 14px !important; }
.et-m__drawer--v3 .et-m__drawer-cat:hover { color: var(--et-brand, #114F6E) !important; background: #FAFAFA !important; }
.et-m__drawer--v3 .et-m__drawer-cat-name {
    flex: 1;
    min-width: 0;
}
.et-m__drawer--v3 .et-m__drawer-cat-new {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: var(--et-brand, #114F6E);
    color: #FFFFFF !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
    flex-shrink: 0;
}

/* TARJETA TIEMPO CANARIAS */
.et-m__drawer-wcard-v3 {
    margin: 14px 14px 24px;
    padding: 18px 18px 16px;
    background: linear-gradient(135deg, #F7F9FC 0%, #E9EEF8 100%);
    border: 1px solid var(--et-rule, #DCE5F4);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(17,79,110,0.06);
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(17,79,110,0.10);
    color: var(--et-brand, #114F6E) !important;
    transition: background .15s;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-link:hover {
    background: var(--et-brand, #114F6E);
    color: #FFFFFF !important;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-body {
    display: flex;
    align-items: center;
    gap: 14px;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-temp {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-temp strong {
    font-size: 32px;
    font-weight: 800;
    color: #0A0A0A;
    line-height: 1;
    letter-spacing: -1.5px;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-temp span {
    font-size: 14px;
    font-weight: 500;
    color: #525252;
    letter-spacing: -0.1px;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-range {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--et-rule, #DCE5F4);
    font-size: 12.5px;
    color: #525252;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-range strong {
    color: #0A0A0A;
    font-weight: 700;
    font-size: 13px;
    margin-left: 4px;
}
.et-m__drawer-wcard-v3 .et-m__drawer-wcard-sep {
    width: 1px;
    height: 14px;
    background: #DCE5F4;
}

/* ════════════════════════════════════════════════════════════════
 * 21. OPINIÓN (plantilla plugin) — bold/italic forzados (v2.31.5)
 *
 *  En posts de la categoría opinión, las negritas e itálicas del WYSIWYG
 *  a veces se perdían visualmente porque el CSS del plugin solo cambia el
 *  color. Forzamos aquí los estilos correctos con !important.
 * ════════════════════════════════════════════════════════════════ */
.dai-tpl-op__body strong,
.dai-tpl-op__body b,
.dunes-template-opinion .dai-tpl-op__body strong,
.dunes-template-opinion .dai-tpl-op__body b {
    font-weight: 800 !important;
    color: #0A0A0A !important;
}
.dai-tpl-op__body em,
.dai-tpl-op__body i,
.dunes-template-opinion .dai-tpl-op__body em,
.dunes-template-opinion .dai-tpl-op__body i {
    font-style: italic !important;
    color: #1F1F1F !important;
}
.dai-tpl-op__body u,
.dunes-template-opinion .dai-tpl-op__body u {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

/* Pullquote (cita destacada del autor) inyectado automáticamente */
.et-opinion-pullquote {
    margin: 36px 0;
    padding: 28px 28px 22px;
    background: #F5F5F5;
    border-left: 5px solid var(--et-brand, #114F6E);
    border-radius: 0 8px 8px 0;
    position: relative;
}
.et-opinion-pullquote__mark {
    display: block;
    margin-bottom: 8px;
    opacity: 0.85;
}
.et-opinion-pullquote__text {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    color: #0A0A0A !important;
    letter-spacing: -0.4px !important;
    font-style: normal !important;
}
.et-opinion-pullquote__cite {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--et-brand, #114F6E);
    text-transform: uppercase;
    font-style: normal;
}
@media (max-width: 600px) {
    .et-opinion-pullquote { margin: 24px 0; padding: 20px 18px 16px; }
    .et-opinion-pullquote__text { font-size: 18px !important; }
}

/* ════════════════════════════════════════════════════════════════
 * 18. HERO MÓVIL v3 (v2.31.0) — estilo NYT/El Periódico
 *
 *   Foto 16:10 + Kicker caps + Título HUGE + Autores en caps |
 *   Hairline azul corta + Lead text + Bullets verticales azules.
 * ════════════════════════════════════════════════════════════════ */
.et-m-hero-lv--v3 {
    margin: 0;
    padding: 0;
}
.et-m-hero-lv__figure {
    margin: 0;
    padding: 0;
}
.et-m-hero-lv__photo--v3 {
    display: block;
    /* v2.31.1 — la foto respeta los márgenes laterales del resto del home */
    width: calc(100% - calc(var(--et-mob-pad, 16px) * 2));
    margin: 0 var(--et-mob-pad, 16px);
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #1F1F1F;
    border-radius: 4px;
}
/* v2.32.6 — Variante inline del hero móvil bajo sismos/tiempo. Margen
   reducido al mínimo para que se pegue al CTA premium de arriba.
   v2.32.9 — Eliminado el ::after absoluto que generaba scroll horizontal
   en el home móvil. El separador ahora es un <span> real dentro del partial
   (flujo normal). */
.et-m-hero-lv--inline {
    margin-top: 4px !important;
    margin-bottom: 8px;
}
/* Separador (hairline) bajo la noticia de sismos/tiempo — elemento real
   del flujo, sin position absolute. */
.et-m-hero-lv__sep {
    display: block;
    height: 1px;
    background: #E5E5E5;
    margin: 18px var(--et-mob-pad, 16px) 4px;
}
/* También reducir el margen inferior del CTA weather/seismic cuando viene
   justo antes de la noticia hero — quita el doble espacio */
.et-m-weather > .et-cta--weather,
.et-m-seismic > .et-cta--seismic,
section.et-m__weather > .et-cta--weather,
section.et-m-seismic > .et-cta--seismic {
    margin-bottom: 4px !important;
}
/* CTA dentro del bloque weather/seismic mobile en general — reducir margen */
.et-m__weather .et-cta,
.et-m-seismic .et-cta {
    margin: 14px var(--et-mob-pad, 16px) 4px !important;
}

/* v2.31.3 — Caption + crédito de la imagen del hero */
.et-m-hero-lv__figcap {
    margin: 8px var(--et-mob-pad, 16px) 0;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.45;
    color: #525252;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}
.et-m-hero-lv__figcap-text { color: #525252; }
.et-m-hero-lv__figcap-credit {
    color: #8C8C8C;
    font-style: italic;
}
.et-m-hero-lv__figcap-credit::before { content: '· '; opacity: 0.55; }

/* v2.31.6 — Separador entre meta items: barra vertical fina gris claro */
.et-m-hero-lv__authors-dot {
    display: inline-block;
    width: 1px;
    height: 11px;
    border-radius: 0;
    background: #E5E5E5;
    vertical-align: middle;
    margin: 0 2px;
}
.et-m-hero-lv__m-date,
.et-m-hero-lv__m-custom {
    color: #8C8C8C;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
}
.et-m-hero-lv__m-custom { color: var(--et-brand, #114F6E); }

/* v2.31.3 — Banner debajo del hero */
.et-m-hero-lv__ad {
    margin: 18px var(--et-mob-pad, 16px) 6px;
    padding: 0;
    text-align: center;
}
.et-m-hero-lv__ad-label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: #8C8C8C;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1;
}
.et-m-hero-lv__ad-img {
    display: block;
    width: 100%;
}
.et-m-hero-lv__ad-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.et-m-hero-lv__body--v3 {
    padding: 22px var(--et-mob-pad, 16px) 14px;
}
/* v2.31.6 — Kicker oficial del theme dentro del título.
   Hereda font del <h1>/<h3>, solo cambia el color a azul Harbor.
   Reforzamos con !important por si otro CSS antiguo lo override. */
.et-m-card__kicker,
.et-m-hero-lv__title .et-m-card__kicker,
.et-m-dest__h .et-m-card__kicker {
    color: var(--et-brand, #114F6E) !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
}
.et-m-hero-lv__title--v3 {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: #0A0A0A;
}
.et-m-hero-lv__title--v3 a {
    color: inherit;
    text-decoration: none;
}
.et-m-hero-lv__authors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #1F1F1F;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.et-m-hero-lv__authors-sep {
    color: #BDBDBD;
    font-weight: 400;
    margin: 0 2px;
}
.et-m-hero-lv__author-role {
    color: #8C8C8C;
    font-weight: 500;
    letter-spacing: 1px;
    margin-left: 6px;
}
.et-m-hero-lv__rule {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--et-brand, #114F6E);
    margin: 0 0 12px;
}
.et-m-hero-lv__lead {
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.45;
    color: #1F1F1F;
    font-weight: 400;
    letter-spacing: -0.2px;
}
/* Bullets v3 — heredan el estilo de --v3 del CSS de mobile.css con barra azul vertical */
.et-m-hero-lv__related--v3 {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}
.et-m-hero-lv__related--v3 li {
    position: relative;
    padding: 10px 0 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #0A0A0A;
    border-top: 1px solid var(--et-rule, var(--et-rule, #eee));
}
.et-m-hero-lv__related--v3 li:first-child { border-top: 0; }
.et-m-hero-lv__related--v3 li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 2px;
    background: var(--et-brand, #114F6E);
}
.et-m-hero-lv__related--v3 li a {
    color: inherit;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
 * 19. DESTACADAS MÓVIL v2 (v2.31.0) — formato lista
 *
 *   [Foto 4:3]   Título grande 2-3 líneas
 *                autor                       13 💬
 *   ────────────────────────────────────────────
 * ════════════════════════════════════════════════════════════════ */
.et-m-dest {
    margin: 24px var(--et-mob-pad, 16px) 20px;
    font-family: 'Inter', sans-serif;
}
.et-m-dest__head {
    margin-bottom: 6px !important;
    padding: 0 !important;
}
.et-m-dest__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-m-dest__item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--et-rule, #EFEFEF);
    align-items: flex-start;
}
.et-m-dest__item:last-child { border-bottom: 0; }
.et-m-dest__photo {
    position: relative;
    display: block;
    width: 96px;
    aspect-ratio: 4 / 3;
    background: #E5E5E5 center/cover no-repeat;
    border-radius: 4px;
    overflow: hidden;
}
.et-m-dest__photo.has-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
}
.et-m-dest__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.et-m-dest__play svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.et-m-dest__body {
    min-width: 0;
    padding-top: 0;
}
/* v2.31.5 — Kicker (categoría) sobre cada título */
.et-m-dest__kicker {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.8px !important;
    color: var(--et-brand, #114F6E) !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
    line-height: 1 !important;
}
/* v2.33.7 — Destacadas: tipografía clonada del bloque CANARIAS/TENERIFE
   (cat-feed-grid) para que el theme tenga UNA sola identidad tipográfica
   en todos los bloques del home móvil. */
.et-m-dest__city {
    /* "Personalizado" = ciudad/firma. Mismo tono y peso que el byline canarias. */
    color: #757575 !important;
    font-weight: 400 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
    text-transform: none !important;
}
.et-m-dest__h {
    /* Título: mismo tamaño / peso / interlínea que .et-m-grid__title */
    margin: 0 0 12px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.3px !important;
    color: #0A0A0A !important;
}
.et-m-dest__h a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.et-m-dest__h a:hover { color: var(--et-brand, #114F6E); }

/* v2.33.8 — Meta line CLON EXACTO del byline canarias (.et-m-grid__byline):
   - texto inline (no flex con padding)
   - separador "|" compacto (espacio de char), no border-left con padding
   - autor UPPERCASE (se hace en el PHP con strtoupper) */
.et-m-dest__meta {
    font-family: 'Inter', sans-serif !important;
    font-size: 10.5px !important;
    color: #757575 !important;
    letter-spacing: 0.6px !important;
    line-height: 1.3 !important;
    /* display block para que sea texto fluido como en canarias, no flex con padding */
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
}
.et-m-dest__meta > *,
.et-m-dest__meta > a {
    /* Sin padding, sin border-left — solo texto inline */
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.et-m-dest__sep {
    color: #BDBDBD;
    font-weight: 400;
    margin: 0 2px;
}
.et-m-dest__author {
    /* Mismo peso, color y look que .et-m-grid__author */
    font-weight: 600 !important;
    color: #525252 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}
.et-m-dest__city,
.et-m-dest__date {
    color: #757575 !important;
    font-weight: 400 !important;
    text-transform: none !important;
}
.et-m-dest__comments {
    color: #757575 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}
.et-m-dest__comments svg {
    color: #BDBDBD;
    width: 11px;
    height: 11px;
    vertical-align: -2px;
    margin-left: 3px;
}
.et-m-dest__comments:hover { color: var(--et-brand, #114F6E) !important; }

/* ════════════════════════════════════════════════════════════════
 * 20. EDITORIAL MÓVIL (v2.31.0) — columnistas estilo Bangkok Post
 *
 *   EDITORIAL >
 *   ──────────────────────────────────────────────
 *   ┌──────────────────────────────┬──┐
 *   │ NOMBRE COLUMNISTA            │○│
 *   │ ROL EN CAPS PEQUEÑO          │  │
 *   └──────────────────────────────┴──┘
 *   (uno destacado en azul theme)
 * ════════════════════════════════════════════════════════════════ */
.et-m-edit {
    margin: 28px var(--et-mob-pad, 16px);
    font-family: 'Inter', sans-serif;
}
.et-m-edit__head {
    margin-bottom: 14px;
}
.et-m-edit__title-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0A0A0A !important;
    text-decoration: none !important;
}
.et-m-edit__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
    color: #0A0A0A;
    text-transform: uppercase;
    line-height: 1;
}
.et-m-edit__title-arrow { color: #0A0A0A; }
.et-m-edit__rule {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #0A0A0A;
    margin-top: 8px;
}

.et-m-edit__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* v2.31.5 — Card estilo Bangkok Post con FLEXBOX stretch:
   - Esquinas izquierdas suaves, derechas SÚPER redondeadas
   - Avatar usando flex con height 100% para que abarque ARRIBA-ABAJO
   - Aspect-ratio 1:1 → el avatar es siempre cuadrado/circular
   - Casi toca el borde derecho (right: 4px) */
/* v2.31.6 — Card editorial con avatar de DIMENSIONES FIJAS (110×110)
   para evitar bugs de aspect-ratio en Safari móvil. La card tiene
   min-height: 120px para que el avatar quede arropado con poco margen. */
/* v2.32.8 / v2.33.4 — Bloque "autores" home móvil:
   - Fondo blanco + borde gris fino.
   - IZQUIERDA suavemente redondeada (10px).
   - DERECHA muy redondeada (75px) para abrazar el avatar circular que
     vive a la derecha, sin picos visibles.
   - Hover: borde azul + sombra azulada sutil (estilo PC). */
.et-m-edit__item {
    background: var(--et-paper, #FFFFFF) !important;
    border: 1px solid var(--et-rule, #E5E5E5) !important;
    border-radius: 10px 75px 75px 10px !important;
    transition: border-color .15s, box-shadow .15s !important;
    overflow: hidden;
    position: relative;
    min-height: 120px;
}
.et-m-edit__item:hover {
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 8px rgba(17,79,110,0.06) !important;
}
.et-m-edit__item.is-highlight {
    background: var(--et-paper, #FFFFFF) !important;
    border-color: var(--et-rule, #E5E5E5) !important;
}
.et-m-edit__item.is-highlight:hover {
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 8px rgba(17,79,110,0.06) !important;
}

.et-m-edit__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 5px 5px 5px 20px;
    text-decoration: none !important;
    min-height: 120px;
}
.et-m-edit__info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    align-self: center;
}
.et-m-edit__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.et-m-edit__name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #0A0A0A;
    line-height: 1.15;
    text-transform: uppercase;
}
/* v2.31.4 — primer item (post más reciente) en azul theme */
.et-m-edit__item.is-highlight .et-m-edit__name { color: var(--et-brand, #114F6E); }

/* Título del POST debajo del autor (no uppercase, peso medio) */
.et-m-edit__post-title {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #1F1F1F;
    letter-spacing: -0.2px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: none;
}
.et-m-edit__item.is-highlight .et-m-edit__post-title { color: #1B3372; }

/* v2.31.6 — AVATAR dimensiones FIJAS 110×110. Sin aspect-ratio (que falla
   en Safari mobile con flex stretch). Centrado verticalmente en una card
   de 120px de alto → 5px de margen arriba/abajo. */
.et-m-edit__avatar {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 50%;
    background: #BDBDBD center/cover no-repeat;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 32px;
}
.et-m-edit__avatar-fallback {
    font-size: 30px;
    letter-spacing: -0.4px;
}

/* ════════════════════════════════════════════════════════════════
 * 17. DESTACADAS MÓVIL (v2.30.0) — bloque Reuters style
 *
 *   ┌──┬──────────────────────────┐
 *   │┃│ DESTACADAS · subtítulo    │   ← rule vertical azul + título
 *   └──┴──────────────────────────┘
 *
 *   ┌──────────────────────────────┐
 *   │     [IMAGEN 16:10]           │  ← lead con imagen grande
 *   ├──────────────────────────────┤
 *   │ CATEGORÍA                    │
 *   │ Título grande 2 líneas       │
 *   │ autor · hace 3 h             │
 *   ├──────────────────────────────┤  ← hairlines suaves
 *   │ CATEGORÍA                    │
 *   │ Título 2 líneas              │
 *   │ meta                         │
 *   ├──────────────────────────────┤
 *   │ ... (3 noticias sin imagen)  │
 *   └──────────────────────────────┘
 * ════════════════════════════════════════════════════════════════ */
.et-m-destacadas {
    margin: 28px var(--et-mob-pad, 16px);
    font-family: 'Inter', sans-serif;
}

/* Header sección */
.et-m-destacadas__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.et-m-destacadas__rule {
    display: inline-block;
    width: 3px;
    height: 22px;
    background: var(--et-brand, #114F6E);
    flex-shrink: 0;
}
.et-m-destacadas__title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.4px;
    color: #0A0A0A;
    text-transform: uppercase;
    line-height: 1;
}
.et-m-destacadas__sub {
    font-size: 12px;
    color: #8C8C8C;
    font-weight: 500;
    letter-spacing: -0.1px;
}

/* Categoría (kicker) reutilizable */
.et-m-destacadas__cat {
    display: inline-block;
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: var(--et-brand, #114F6E);
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
}
.et-m-destacadas__cat:hover { color: #0A0A0A; }
.et-m-destacadas__cat--sm { font-size: 9.5px; letter-spacing: 1.6px; margin-bottom: 6px; }

/* Lead — noticia principal con foto */
.et-m-destacadas__lead {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--et-rule, #E5E5E5);
}
.et-m-destacadas__lead-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #E5E5E5 center/cover no-repeat;
    border-radius: 6px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: transform .25s ease;
    position: relative;
}
.et-m-destacadas__lead-photo:hover { transform: translateY(-1px); }
.et-m-destacadas__lead-photo-fallback {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #1F1F1F 0%, var(--et-brand, #114F6E) 100%);
}
.et-m-destacadas__lead-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.6px;
    color: #0A0A0A;
}
.et-m-destacadas__lead-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.et-m-destacadas__lead-title a:hover { color: var(--et-brand, #114F6E); }

/* Lista de 3 noticias sin imagen */
.et-m-destacadas__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-m-destacadas__item {
    padding: 16px 0;
    border-bottom: 1px solid var(--et-rule, #EFEFEF);
}
.et-m-destacadas__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.et-m-destacadas__item-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #0A0A0A;
}
.et-m-destacadas__item-title a {
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.et-m-destacadas__item-title a:hover { color: var(--et-brand, #114F6E); }

/* Meta (autor · hora) */
.et-m-destacadas__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #8C8C8C;
    font-weight: 500;
}
.et-m-destacadas__meta-author {
    color: #525252;
    font-weight: 600;
    letter-spacing: -0.1px;
}
.et-m-destacadas__meta-time {
    font-family: 'JetBrains Mono', monospace;
    color: #8C8C8C;
    font-size: 11px;
}
.et-m-destacadas__meta-dot {
    width: 2px;
    height: 2px;
    background: #BDBDBD;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
 * 16. LIVE MÓVIL v2 (v2.29.1) — clon premium del live de PC
 *
 *  Layout:
 *   ┌───────────────────────────┐
 *   │     SLIDER 16:9           │
 *   │  ○ ○ ● ○ ○                │
 *   ├───────────────────────────┤
 *   │ ● EN VIVO                 │
 *   │ Título grande del hilo    │
 *   │ Subtítulo                 │
 *   ├───────────────────────────┤
 *   │ ┃ Hace 16 min  · ÚLTIMA   │
 *   │ ┃ Título 1 línea con …    │
 *   │ ┃                         │
 *   │ ┃ Hace 21 min             │
 *   │ ┃ Título 1 línea          │
 *   ├───────────────────────────┤
 *   │  Ver hilo completo →      │
 *   └───────────────────────────┘
 * ════════════════════════════════════════════════════════════════ */
.et-m-livev2 {
    margin: 24px var(--et-mob-pad, 16px);
    background: var(--et-paper, #FFFFFF);
    border: 1px solid var(--et-rule, #E5E5E5);
    border-radius: 14px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* ── Slider ── */
.et-m-livev2__slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0A0A0A;
    overflow: hidden;
}
.et-m-livev2__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.et-m-livev2__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.et-m-livev2__slide-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.1px;
}
.et-m-livev2__dots { display: none !important; } /* v2.43.92 · reemplazados por flechas */

/* v2.43.93 · Flechas prev/next premium dentro de la imagen.
   Fondo TRANSPARENTE. Icono blanco con sombra negra para que se vea
   sobre cualquier fondo (incluido blanco). Compactas (34px) — minimal. */
.et-m-livev2__nav {
    position: absolute;
    top: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform .15s ease, color .15s ease;
}
.et-m-livev2__nav svg {
    width: 18px;
    height: 18px;
    display: block;
    /* Halo negro doble alrededor del icono para legibilidad sobre fondos blancos */
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95));
}
.et-m-livev2__nav:hover,
.et-m-livev2__nav:active {
    background: transparent;
    transform: scale(1.12);
}
.et-m-livev2__nav:focus-visible {
    outline: 2px solid #C8102E;
    outline-offset: 2px;
}
.et-m-livev2__nav--prev { left: 8px; }
.et-m-livev2__nav--next { right: 8px; }

/* v2.43.92 · Cabecera "En directo" — variante roja del .et-m-sh2.
   Línea gruesa roja, línea fina negra, título rojo. */
.et-m-sh2--live {
    border-top-color: #0A0A0A !important;        /* línea delgada en negro */
}
.et-m-sh2--live::before {
    background: #C8102E !important;               /* línea gruesa en rojo */
}
.et-m-sh2--live .et-m-sh2__name {
    color: #C8102E !important;                    /* título en rojo */
}
/* v2.43.93 · Cabecera POR FUERA del bloque live · pegamos el card a la
   cabecera reduciendo el margin-top del .et-m-livev2 cuando va detrás. */
.et-m-sh2--live + .et-m-livev2 {
    margin-top: 4px !important;
}

/* ── Header ── */
.et-m-livev2__head {
    padding: 18px 18px 14px;
}
.et-m-livev2__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: #C8102E;
    color: #fff !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-decoration: none !important;
    line-height: 1;
}
.et-m-livev2__pulse {
    width: 7px;
    height: 7px;
    background: var(--et-paper, #fff);
    border-radius: 50%;
    animation: etMlivePulse 1.4s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes etMlivePulse {
    0%   { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.et-m-livev2__title {
    margin: 12px 0 6px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.7px;
    color: #0A0A0A;
}
.et-m-livev2__title a {
    color: inherit;
    text-decoration: none;
}
.et-m-livev2__title a:hover { color: #C8102E; }
.et-m-livev2__sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #525252;
    font-weight: 400;
}

/* ── Timeline ── */
.et-m-livev2__feed {
    list-style: none;
    margin: 0;
    padding: 4px 18px 14px;
    position: relative;
}
.et-m-livev2__feed::before {
    /* Línea vertical conectora detrás de los dots */
    content: '';
    position: absolute;
    left: 24px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: #E5E5E5;
}
.et-m-livev2__entry {
    position: relative;
    padding: 10px 0 10px 24px;
    list-style: none;
}
.et-m-livev2__entry-dot {
    position: absolute;
    left: 0;
    top: 16px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--et-paper, #fff);
    border: 2.5px solid #BDBDBD;
    z-index: 1;
}
.et-m-livev2__entry.is-latest .et-m-livev2__entry-dot {
    border-color: #C8102E;
    background: #C8102E;
    box-shadow: 0 0 0 4px rgba(200,16,46,0.12);
}
.et-m-livev2__entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.et-m-livev2__entry-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #8C8C8C;
    letter-spacing: 0;
    font-weight: 500;
}
.et-m-livev2__entry-now {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: #FFF1E5;
    color: #C8102E;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    line-height: 1.6;
}
.et-m-livev2__entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #0A0A0A;
    text-decoration: none;
    letter-spacing: -0.15px;
    line-height: 1.35;
    transition: color .15s;
}
.et-m-livev2__entry-title:hover {
    color: #C8102E;
    text-decoration: none;
}
.et-m-livev2__entry.is-latest .et-m-livev2__entry-title {
    font-weight: 700;
    color: #0A0A0A;
}

/* ── CTA ── */
.et-m-livev2__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: #FAFAFA;
    border-top: 1px solid var(--et-rule, #F0F0F0);
    color: #0A0A0A !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.et-m-livev2__cta:hover {
    background: #C8102E;
    color: #fff !important;
}
.et-m-livev2__cta svg {
    stroke: currentColor;
    transition: transform .15s;
}
.et-m-livev2__cta:hover svg { transform: translateX(3px); }

/* ── Estado sin cobertura ── */
.et-m-livev2__empty {
    padding: 28px 22px;
    text-align: center;
}
.et-m-livev2__badge--off {
    background: #E5E5E5 !important;
    color: #525252 !important;
}
.et-m-livev2__pulse--off {
    background: #BDBDBD !important;
    animation: none !important;
    box-shadow: none !important;
}
.et-m-livev2__empty-title {
    margin: 14px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: #0A0A0A;
    letter-spacing: -0.3px;
}
.et-m-livev2__empty-text {
    margin: 0;
    font-size: 13px;
    color: #525252;
    line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════
 * 15. EMBEDS PREMIUM — frame con header (icono + servicio + host) +
 *     media (iframe / blockquote oficial) + footer (disclaimer + ↗).
 *
 *     Una sola caja redondeada con header coloreado por servicio,
 *     media centrado y footer clicable. Compatible con PC y móvil.
 * ════════════════════════════════════════════════════════════════ */
.et-embed-frame,
.et-embed-frame * { box-sizing: border-box; }

.et-embed-frame {
    --et-embed-accent: var(--et-brand, #114F6E);
    margin: 36px 0;
    padding: 0;
    border: 1px solid var(--et-rule, #E5E5E5);
    border-radius: 12px;
    background: var(--et-paper, #FFFFFF);
    overflow: hidden;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: box-shadow .2s, border-color .2s;
    clear: both;
    width: 100%;
    max-width: 100%;
}
.et-embed-frame:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    border-color: var(--et-rule, #D4D4D4);
}

/* ── HEADER ── */
.et-embed-frame__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--et-rule, #F0F0F0);
    background: #FAFAFA;
}
.et-embed-frame__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--et-embed-accent);
    border-radius: 6px;
    flex-shrink: 0;
}
.et-embed-frame__service {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #0A0A0A;
    text-transform: uppercase;
}
.et-embed-frame__host {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #8C8C8C;
    margin-left: auto;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── MEDIA ── */
.et-embed-frame__media {
    padding: 18px 18px 14px;
    background: var(--et-paper, #FFFFFF);
    display: flex;
    justify-content: center;
    align-items: center;
}
.et-embed-frame__media > iframe {
    width: 100% !important;
    max-width: 720px !important;
    border: 0 !important;
    display: block;
}

/* iframes (YouTube, Vimeo, Spotify) — ratio fijo */
.et-embed-frame__iframe {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.et-embed-frame__iframe iframe {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Aspect específico por servicio */
.et-embed-frame--tiktok .et-embed-frame__iframe { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
.et-embed-frame--spotify .et-embed-frame__iframe { aspect-ratio: auto; height: 152px; }

/* Blockquotes oficiales (Twitter / IG / TikTok / FB / Threads) */
.et-embed-frame__media blockquote.twitter-tweet,
.et-embed-frame__media blockquote.instagram-media,
.et-embed-frame__media blockquote.tiktok-embed,
.et-embed-frame__media .fb-post,
.et-embed-frame__media blockquote.text-post-media {
    margin: 0 auto !important;
    max-width: 540px !important;
    width: 100% !important;
}

/* Link card (fallback cuando no hay SDK) */
.et-embed-frame__linkcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    background: #FAFAFA;
    border: 1px dashed var(--et-rule, #E5E5E5);
    border-radius: 8px;
    color: #0A0A0A !important;
    text-decoration: none !important;
    width: 100%;
    transition: background .15s;
}
.et-embed-frame__linkcard:hover {
    background: #F5F5F5;
}
.et-embed-frame__linkcard strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--et-embed-accent);
}
.et-embed-frame__linkcard span {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: #525252;
    word-break: break-all;
}

/* ── FOOTER ── */
.et-embed-frame__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--et-rule, #F0F0F0);
    background: #FAFAFA;
    color: #525252 !important;
    text-decoration: none !important;
    font-size: 12px;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.et-embed-frame__foot:hover {
    background: var(--et-embed-accent);
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.et-embed-frame__foot-text {
    flex: 1;
    min-width: 0;
}
.et-embed-frame__foot-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: inherit;
    transition: transform .15s;
}
.et-embed-frame__foot:hover .et-embed-frame__foot-arrow {
    transform: translate(2px, -2px);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .et-embed-frame { margin: 24px 0; border-radius: 10px; }
    .et-embed-frame__head { padding: 9px 12px; gap: 8px; }
    .et-embed-frame__service { font-size: 11px; }
    .et-embed-frame__host { font-size: 10px; }
    .et-embed-frame__media { padding: 14px 12px 12px; }
    .et-embed-frame__foot { padding: 10px 12px; font-size: 11.5px; }
    .et-embed-frame--tiktok .et-embed-frame__iframe { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
 * 12. CTAs PREMIUM — estilo Google promoter, para sidebar y home
 *
 *     Markup base:
 *       <a class="et-cta et-cta--{slug} et-cta--{variant}" style="--et-cta-accent: #xxx">
 *           <span class="et-cta__icon"><svg/></span>
 *           <span class="et-cta__text">
 *               <strong class="et-cta__title">Título</strong>
 *               <span class="et-cta__sub">Subtítulo</span>
 *           </span>
 *           <span class="et-cta__btn">CTA <svg→/></span>
 *       </a>
 *
 *     Variantes: inline (default — fila horizontal) | stack (columna sidebar)
 * ════════════════════════════════════════════════════════════════ */

.et-cta,
.et-cta * { box-sizing: border-box; }

.et-cta {
    position: relative;          /* v2.43.60 · anclaje del badge "En vivo" */
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    padding: 12px 16px;
    background: var(--et-paper, #FFFFFF);
    border: 1px solid var(--et-rule, #ECECEC);
    border-radius: 12px;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
    text-decoration: none !important;
    color: #1F1F1F;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
}
.et-cta:hover {
    border-color: var(--et-cta-accent, var(--et-brand, #114F6E));
    background: rgba(0,0,0,0.02);
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    text-decoration: none !important;
}

.et-cta__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.025);
    border-radius: 8px;
}
.et-cta__icon svg { display: block; }
.et-cta__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.et-cta__title {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #0A0A0A;
    letter-spacing: -0.1px;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}
.et-cta__sub {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: #525252;
    line-height: 1.35;
    margin: 0;
    padding: 0;
}
.et-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: #0A0A0A;
    border: 1px solid var(--et-rule, #D4D4D4);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-transform: none;
    white-space: nowrap;
    line-height: 1;
    transition: border-color .18s, color .18s, background .18s;
}
.et-cta:hover .et-cta__btn {
    border-color: var(--et-cta-accent, var(--et-brand, #114F6E));
    background: var(--et-cta-accent, var(--et-brand, #114F6E));
    color: #FFFFFF;
}
.et-cta__btn svg { stroke: currentColor; flex-shrink: 0; }

/* ── v2.43.63 · Variante SIN sub (solo título, sin línea inferior) ── */
.et-cta--nosub .et-cta__text {
    justify-content: center;
}
.et-cta--nosub .et-cta__title {
    font-size: 13px;             /* v2.43.63 · reducido de 14.5 → 13 px */
    line-height: 1.2;
}

/* ── v2.43.61 · Indicador "En vivo" FUERA del recuadro · arriba-izquierda ──
   Va antes del <a class="et-cta">, en flujo normal. Espacio arriba (gap
   respecto al texto "Datos: IGN…") y abajo (gap respecto al recuadro). */
.et-cta__live--outside {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 8px 8px;        /* v2.43.65 · default · seismic mantiene este gap */
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--et-cta-live-color, #C8102E);
    user-select: none;
    line-height: 1;
}

/* v2.43.65 · GAS · badge PEGADO al recuadro (overrride específico).
   El render añade clase .et-cta__live--gas al badge cuando el slug del
   preset es "gas". Usamos !important y selector más específico para
   ganar a cualquier resto de margen. */
.et-cta__live.et-cta__live--gas {
    margin: 18px 0 -6px 8px !important;
}
/* También anulamos el margin-top del recuadro siguiente para que no
   añada hueco extra. */
.et-cta__live--gas + .et-cta {
    margin-top: 0 !important;
}
.et-cta__live-dot {
    position: relative;
    width: 7px;
    height: 7px;
    background: var(--et-cta-live-color, #C8102E);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    /* v2.43.64 · El propio punto PARPADEA (cambia opacidad). */
    animation: et-cta-live-blink 1.2s ease-in-out infinite;
}
/* v2.43.62 · Halo expansivo como pseudo-elemento — toma el color de la
   variable, así funciona con rojo (seismic), azul (gas) o cualquier otro. */
.et-cta__live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--et-cta-live-color, #C8102E);
    animation: et-cta-live-pulse 1.4s ease-in-out infinite;
    z-index: -1;
}
.et-cta__live-text { line-height: 1; }

/* v2.43.64 · El punto en sí parpadea (blink) entre opaco y semitransparente */
@keyframes et-cta-live-blink {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.25; }
}
/* Halo expansivo (radar) */
@keyframes et-cta-live-pulse {
    0%   { opacity: 0.55; transform: scale(1);   }
    70%  { opacity: 0;    transform: scale(2.6); }
    100% { opacity: 0;    transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
    .et-cta__live-dot,
    .et-cta__live-dot::after { animation: none; }
}

/* Cuando el live va FUERA, el recuadro siguiente reduce su margen-top
   para que el badge actúe como cabecera del bloque sin doble espaciado. */
.et-cta__live--outside + .et-cta {
    margin-top: 0;
}

/* ── Variante STACK (sidebar) — icono arriba, texto columna ── */
.et-cta--stack {
    flex-direction: row;
    gap: 12px;
    padding: 14px 14px;
    margin: 10px 0 0;
    align-items: center;
    background: #FAFAFA;
}
.et-cta--stack .et-cta__icon {
    width: 40px; height: 40px;
    background: var(--et-paper, #FFFFFF);
    border: 1px solid var(--et-rule, #ECECEC);
}
.et-cta--stack .et-cta__btn {
    padding: 6px 10px;
    font-size: 10.5px;
    border-radius: 999px;
}

/* Móvil: el CTA inline pasa a wrap, el botón cae a línea propia */
@media (max-width: 600px) {
    .et-cta {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
    }
    .et-cta__text { flex-basis: calc(100% - 46px); }
    .et-cta__btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        font-size: 12.5px;
    }
}

/* ════════════════════════════════════════════════════════════════
 * 13. SIDEBAR STICKY — bloque "Tu InfoPuertos" en PC
 *
 *     Layout compacto: 1 fila por servicio, icono + título + flecha.
 *     Hairline separa cada fila. Hover: icono y flecha cogen el color
 *     del servicio (--et-cta-accent).
 * ════════════════════════════════════════════════════════════════ */
/* ═══ v2.169.0 · EL ENVOLTORIO DEL LATERAL ═══
   FALLO QUE ARREGLA: el menú era el elemento fijo y el riel de banners
   quedó como hermano detrás. Al bajar por la noticia el menú se clavaba
   y los banners le pasaban por encima.

   Ahora quien manda es el envoltorio, y el menú va estático dentro. Los
   dos viajan juntos y no se solapan nunca.

   Y solo se queda fijo cuando NO hay banners: con los cinco, el riel es
   más alto que la pantalla, y un `sticky` dejaría los últimos anuncios
   por debajo del borde inferior, fuera del alcance del lector para
   siempre. Sin banners el menú es corto y el fijo sigue mereciendo la
   pena, así que se conserva. */
.et-cta-rail {
    position: sticky;
    top: 110px;
}
.et-cta-rail--ads { position: static; top: auto; }
.et-cta-rail .et-cta-sidebar { position: static; top: auto; }

.et-cta-sidebar {
    position: sticky;
    top: 110px;
    margin-top: 24px;
    padding: 0;
    background: var(--et-paper, #FFFFFF);
    border: 1px solid var(--et-rule, #ECECEC);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.et-cta-sidebar__head {
    padding: 12px 16px 10px;
    background: #FAFAFA;
    border-bottom: 1px solid var(--et-rule, #ECECEC);
}
.et-cta-sidebar__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: #525252;
    text-transform: uppercase;
}
.et-cta-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.et-cta-sidebar__item + .et-cta-sidebar__item {
    border-top: 1px solid var(--et-rule, #F0F0F0);
}
.et-cta-sidebar__link {
    display: grid;
    grid-template-columns: 32px 1fr 18px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #0A0A0A !important;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    background: var(--et-paper, #fff);
}
.et-cta-sidebar__link:hover {
    background: rgba(0,0,0,0.02);
    text-decoration: none !important;
}
.et-cta-sidebar__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    border-radius: 8px;
    transition: background .15s;
}
.et-cta-sidebar__link:hover .et-cta-sidebar__icon {
    background: var(--et-cta-accent, var(--et-brand, #114F6E));
}
.et-cta-sidebar__icon svg {
    width: 18px;
    height: 18px;
    transition: stroke .15s, fill .15s;
}
.et-cta-sidebar__link:hover .et-cta-sidebar__icon svg {
    stroke: #fff !important;
    fill: none !important;
}
.et-cta-sidebar__label {
    font-size: 13.5px;
    font-weight: 600;
    color: #0A0A0A;
    letter-spacing: -0.1px;
    line-height: 1.25;
}
.et-cta-sidebar__link:hover .et-cta-sidebar__label {
    color: var(--et-cta-accent, var(--et-brand, #114F6E));
}
.et-cta-sidebar__arrow {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #BDBDBD;
    transition: color .15s, transform .15s;
}
.et-cta-sidebar__link:hover .et-cta-sidebar__arrow {
    color: var(--et-cta-accent, var(--et-brand, #114F6E));
    transform: translateX(3px);
}
/* En móvil el sidebar también se muestra dentro del artículo (no sticky).
   Se renderiza al final del artículo, antes del bloque de autores. */
@media (max-width: 1100px) {
    .et-cta-sidebar {
        position: static !important;
        margin: 28px var(--et-mob-pad, 16px) 0;
        width: calc(100% - calc(var(--et-mob-pad, 16px) * 2));
        box-sizing: border-box;
    }
    /* Si está dentro de un container que ya tiene padding lateral (ej.
       .dai-tpl__main, .et-m__art), respetamos el padre y sin margen propio. */
    .dai-tpl__main .et-cta-sidebar,
    .dai-tpl-op__main .et-cta-sidebar,
    .dai-tpl-tv__main .et-cta-sidebar,
    .et-m__art .et-cta-sidebar,
    .et-m .et-cta-sidebar {
        margin: 28px 0 0;
        width: 100%;
    }
    /* v2.169.0 · El envoltorio nunca se queda fijo en móvil, y el riel de
       banners se sangra igual que el menú para que los dos compartan el
       mismo eje vertical. */
    .et-cta-rail { position: static !important; top: auto !important; }
    .et-cta-rail .et-cta-sidebar__ads {
        margin-left: var(--et-mob-pad, 16px);
        margin-right: var(--et-mob-pad, 16px);
    }
    .dai-tpl__main .et-cta-rail .et-cta-sidebar__ads,
    .dai-tpl-op__main .et-cta-rail .et-cta-sidebar__ads,
    .dai-tpl-tv__main .et-cta-rail .et-cta-sidebar__ads,
    .et-m__art .et-cta-rail .et-cta-sidebar__ads,
    .et-m .et-cta-rail .et-cta-sidebar__ads {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ════════════════════════════════════════════════════════════════
 * 14. CTAs en HOME (PC + móvil) — posiciones específicas
 *     El template inyecta directamente <a class="et-cta">; no requiere
 *     reglas extra salvo márgenes para que respiren con el bloque.
 * ════════════════════════════════════════════════════════════════ */
.et-pcv2-econ__a > .et-cta,
.et-pcv2-wqo__weather > .et-cta,
.et-pcv2-wqo__quakes > .et-cta {
    margin: 18px 0 0;
}

/* Móvil — los CTAs en los bloques home también deben respirar.
   v2.33.5 — Incluido .et-m__weather (con DOBLE underscore) que es el class real
   del partial mobile/weather.php. Antes solo aplicaba a .et-m-weather (con guión)
   y la CTA de El Tiempo se salía del contenedor por la derecha. */
.et-m-weather > .et-cta,
.et-m__weather > .et-cta,
.et-m-seismic > .et-cta,
.et-m-economia > .et-cta,
.et-m-economy > .et-cta {
    margin: 16px var(--et-mob-pad, 16px) !important;
    width: calc(100% - calc(var(--et-mob-pad, 16px) * 2)) !important;
    max-width: calc(100% - calc(var(--et-mob-pad, 16px) * 2)) !important;
    box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════════
 * 11. SHARE-BAR (plantillas plugin) — móvil: NO al inicio, debajo del byline
 *     El share-bar se mueve via JS (assets/js/article-v2.js) tras renderizar
 *     el header. Pero por si JS no carga, lo escondemos arriba en móvil.
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* Variante por defecto: si el share está como hermano directo del article
       (antes del header), lo escondemos para que el reposicionado JS muestre
       su clon debajo del byline. */
    .dai-tpl__article > .dai-tpl__share:not(.dai-tpl__share--moved) {
        display: none !important;
    }
    /* En móvil quitamos la border-bottom del byline original para que NO
       genere una segunda línea por encima del share-bar movido. */
    .dai-tpl__byline {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 14px !important;
    }
    .dai-tpl__share--moved {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        /* Única línea visible: border-bottom (separa share-bar del hero). */
        margin: 0 0 22px !important;
        padding: 0 0 16px !important;
        border-top: 0 !important;
        border-bottom: 1px solid var(--et-rule, #E5E5E5) !important;
        width: 100% !important;
    }
    .dai-tpl__share--moved .dai-tpl__share-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * v2.32.9 · OVERRIDE FINAL — Bloque autores home móvil
 * Reglas duplicadas al final del archivo con máxima especificidad para
 * garantizar que ganan la cascada sobre cualquier regla previa.
 * ════════════════════════════════════════════════════════════════════════ */
.et-m-edit__list > .et-m-edit__item,
.et-m-edit .et-m-edit__list > .et-m-edit__item,
section.et-m-edit .et-m-edit__list > li.et-m-edit__item {
    background: var(--et-paper, #FFFFFF) !important;
    border: 1px solid var(--et-rule, #E5E5E5) !important;
    border-radius: 10px 75px 75px 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.et-m-edit__list > .et-m-edit__item:hover,
.et-m-edit .et-m-edit__list > .et-m-edit__item:hover,
section.et-m-edit .et-m-edit__list > li.et-m-edit__item:hover {
    background: var(--et-paper, #FFFFFF) !important;
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 8px rgba(17,79,110,0.06) !important;
}
.et-m-edit__list > .et-m-edit__item.is-highlight,
.et-m-edit .et-m-edit__list > .et-m-edit__item.is-highlight,
section.et-m-edit .et-m-edit__list > li.et-m-edit__item.is-highlight {
    background: var(--et-paper, #FFFFFF) !important;
    border-color: var(--et-rule, #E5E5E5) !important;
}
.et-m-edit__list > .et-m-edit__item.is-highlight:hover,
.et-m-edit .et-m-edit__list > .et-m-edit__item.is-highlight:hover,
section.et-m-edit .et-m-edit__list > li.et-m-edit__item.is-highlight:hover {
    background: var(--et-paper, #FFFFFF) !important;
    border-color: var(--et-brand, #114F6E) !important;
    box-shadow: 0 2px 8px rgba(17,79,110,0.06) !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * v2.33.0 · MOBILE V3 — AD SLOT entre bloques del home móvil
 * Renderizado por et_mobilev3_render_ad_slot() tras cada bloque configurado.
 * ════════════════════════════════════════════════════════════════════════ */
.et-mv3-ad {
    margin: 20px var(--et-mob-pad, 16px) 28px;
    padding: 12px 14px 14px;
    background: #FAFAFA;
    border: 1px solid var(--et-rule, #EFEFEF);
    border-radius: 6px;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.et-mv3-ad__label {
    display: block;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    font-weight: 700;
    color: #8C8C8C;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.et-mv3-ad__img { display: inline-block; max-width: 100%; }
.et-mv3-ad__img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════════════════
 * v2.33.0 · ADMIN V3 — pequeños ajustes para el switch inline y módulos
 * (el grueso del CSS lo aporta pc-v2.css que reusamos en el admin)
 * ════════════════════════════════════════════════════════════════════════ */
.et-pcv2__switch--inline {
    display: inline-flex !important;
    margin-bottom: 10px !important;
}
.et-mv3-custom-item {
    background: #FCFCFC;
    border: 1px solid var(--et-rule, #E5E5E5);
}

/* ════════════════════════════════════════════════════════════════════════
 * v2.33.10 · COVER NEWS — Noticias de Sismos / Tiempo del home móvil
 *
 *   Layout:
 *   ┌─────────────────────────────────────┐
 *   │   [FOTO 16:9 ancho completo]        │
 *   │                                     │
 *   ├─┬───────┬───────────────────────────┤
 *   │ │ AEMET │  ← kicker tipo pestaña    │
 *   │ └───────┘                           │
 *   │  ░░ TÍTULO DE LA NOTICIA ░░░░░░░░░ │ ← bloque azul + título blanco
 *   │  ░ AUTOR │ TENERIFE │ 12 ENE ░░░░░ │ ← byline blanco mayúsculas
 *   └─────────────────────────────────────┘
 * ════════════════════════════════════════════════════════════════════════ */
/* v2.33.11 — Cover news compactado (fuentes reducidas) + bordes ligeramente
   redondeados en el conjunto. */
.et-m-cover-news {
    position: relative;
    margin: 4px var(--et-mob-pad, 16px) 24px;
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
    overflow: hidden;
}
.et-m-cover-news__photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1F1F1F center/cover no-repeat;
    text-decoration: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
.et-m-cover-news__block {
    position: relative;
    background: var(--et-brand, #114F6E);
    color: #FFFFFF;
    padding: 16px 14px 14px;
    margin-top: 0;
    /* esquinas inferiores redondeadas (las superiores las recorta el overflow del padre) */
    border-radius: 0 0 8px 8px;
}
/* Kicker como pestaña SOLO esquinas superiores redondeadas, sobresale del bloque */
.et-m-cover-news__kicker {
    position: absolute;
    left: 14px;
    top: -22px;
    display: inline-block;
    padding: 6px 14px;
    background: var(--et-brand, #114F6E);
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 5px 5px 0 0;
    line-height: 1;
}
.et-m-cover-news__title {
    margin: 0 0 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.1px;
    text-transform: uppercase;
    color: #FFFFFF;
}
.et-m-cover-news__title a {
    color: inherit !important;
    text-decoration: none !important;
}
.et-m-cover-news__title a:hover { color: #FFFFFF; }
.et-m-cover-news__meta {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
}
.et-m-cover-news__sep {
    margin: 0 5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}
.et-m-cover-news__m-author,
.et-m-cover-news__m-city,
.et-m-cover-news__m-date {
    color: inherit;
}

/* Reset: ya no usamos las clases viejas .et-m-hero-lv--inline aquí, pero por
   si quedan separadores antiguos, ocultamos los que vengan tras cover-news. */
.et-m-cover-news + .et-m-hero-lv__sep { display: none; }

/* ════════════════════════════════════════════════════════════════════════
 * v2.33.2 · CINTURÓN ANTI-OVERFLOW · home móvil
 *
 * Causa real diagnosticada: .et-m-seismic__row.is-live tiene margin-left:-10px
 * (mobile.css 2713) y el wrapper no lo contenía → scroll lateral.
 *
 * Además del fix específico en mobile.css, blindamos el wrapper móvil para
 * que NUNCA jamás haya scroll horizontal en el home (cualquier hijo con
 * margen negativo / 100vw queda recortado por el contenedor padre).
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    html { overflow-x: hidden !important; }
    body { overflow-x: hidden !important; max-width: 100% !important; }
    .et-m {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    /* Cualquier <section> top-level dentro de .et-m queda contenido */
    .et-m > section,
    .et-m > article,
    .et-m > div {
        max-width: 100% !important;
    }
}


/* ════════════════════════════════════════════════════════════════
 * 12. RELATED-ARTICLES TITLE · v2.43.9
 *     Adopta el lenguaje visual de la cabecera del newsletter
 *     (.et-pcv2-shx): barra azul accent encima + título Manrope
 *     22px 900 + fila de puntos abajo.
 *
 *     ⚠️ SPECIFICITY · El plugin usa `.dunes-template .dai-tpl__related-title`
 *     (0,2,0). Para ganar la cascada uso:
 *       · clase doblada `.dai-tpl__related-title.dai-tpl__related-title`
 *         (0,2,0) + carga posterior
 *       · más variantes scoped a las body-classes del plugin
 *
 *     Cubre las 4 variantes (PC + móvil):
 *       · .dai-tpl__related-title   (plugin · plantilla noticia/opinión/viajes)
 *       · .dai-related__title       (plugin · engagement fallback)
 *       · .et-related__head h3      (theme · single.php PC)
 *       · .et-related-inline__kicker (theme · related a media lectura)
 * ════════════════════════════════════════════════════════════════ */
.dai-tpl__related-title.dai-tpl__related-title,
.dunes-template .dai-tpl__related-title,
.dunes-template-noticia .dai-tpl__related-title,
.dunes-template-opinion .dai-tpl__related-title,
.dunes-template-viajes .dai-tpl__related-title,
.dai-related__title.dai-related__title,
.et-related__head h3,
.et-related-inline__kicker.et-related-inline__kicker {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 18px !important;        /* v2.43.10 · reducido de 22 a 18 */
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: #0A0A0A !important;
    line-height: 1.15 !important;
    padding: 14px 0 14px !important;   /* v2.43.10 · ajustado al texto más chico */
    margin: 0 0 20px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    flex: none !important;             /* por si el padre es flex */
    flex-shrink: initial !important;
    float: none !important;
}
/* Barra azul accent encima (10% del ancho · min 56 · max 88) */
.dai-tpl__related-title.dai-tpl__related-title::before,
.dunes-template .dai-tpl__related-title::before,
.dunes-template-noticia .dai-tpl__related-title::before,
.dunes-template-opinion .dai-tpl__related-title::before,
.dunes-template-viajes .dai-tpl__related-title::before,
.dai-related__title.dai-related__title::before,
.et-related__head h3::before,
.et-related-inline__kicker.et-related-inline__kicker::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 10% !important;
    min-width: 56px !important;
    max-width: 88px !important;
    height: 4px !important;
    background: var(--et-brand, #114F6E) !important;  /* var(--pcv2-blue) */
    border-radius: 1px !important;
}
/* Fila de puntos decorativa abajo */
.dai-tpl__related-title.dai-tpl__related-title::after,
.dunes-template .dai-tpl__related-title::after,
.dunes-template-noticia .dai-tpl__related-title::after,
.dunes-template-opinion .dai-tpl__related-title::after,
.dunes-template-viajes .dai-tpl__related-title::after,
.dai-related__title.dai-related__title::after,
.et-related__head h3::after,
.et-related-inline__kicker.et-related-inline__kicker::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 6px !important;
    background-image: radial-gradient(circle, #D8D8D8 1px, transparent 1.3px) !important;
    background-size: 8px 6px !important;
    background-repeat: repeat-x !important;
    background-position: left center !important;
}

/* Theme · .et-related__head — quitar el rule manual (ahora lo da ::after) */
.et-related__head {
    margin-bottom: 28px !important;
}
.et-related__head .et-related__rule {
    display: none !important;
}

/* Theme · inline a media lectura — el head era flex(kicker + rule),
   pasamos a block y ocultamos el rule. */
.et-related-inline__head {
    display: block !important;
    margin-bottom: 22px !important;
}
.et-related-inline__head .et-related-inline__rule {
    display: none !important;
}

/* Plugin · .dai-tpl__related contenedor — quitar el border-top y achicar
   margin-top (la barra accent del título cumple la función de separador). */
.dunes-template .dai-tpl__related,
.dunes-template-noticia .dai-tpl__related,
.dunes-template-opinion .dai-tpl__related,
.dunes-template-viajes .dai-tpl__related,
.dai-tpl__related {
    border-top: 0 !important;
    margin-top: 40px !important;
    padding-top: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
 * 12.b · TAGS "Temas del artículo" · v2.43.17
 *   Quitamos la línea gris superior (border-top) tanto del theme
 *   (.et-tags) como de las plantillas del plugin (.dai-tpl__tags).
 *   Solo separación con margin · sin hairline.
 * ════════════════════════════════════════════════════════════════ */
.et-tags,
.dai-tpl__tags,
.dunes-template .dai-tpl__tags,
.dunes-template-noticia .dai-tpl__tags,
.dunes-template-opinion .dai-tpl__tags,
.dunes-template-viajes .dai-tpl__tags {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 36px !important;
}


/* ════════════════════════════════════════════════════════════════
 * 13. GOOGLE NEWS PROMOTER · v2.43.16 · solo MÓVIL
 *     PC mantiene el diseño "ghost" del plugin (sin cambios).
 *     En móvil cloamos la card blanca tipo "Add us as a preferred source on Google":
 *       · Fondo blanco · borde fino gris · radius 12
 *       · G colorida a la izquierda (32px)
 *       · Texto en una línea, en español
 *       · Toda la card clicable (no hay CTA separado)
 *     Cubre las dos variantes del promoter del plugin (inline + bottom card).
 * ════════════════════════════════════════════════════════════════ */
/* v2.43.17 · Clase DOBLADA para ganar specificity vs el CSS del plugin
   (que emite con priority 115 en wp_head, después de article-v2.css). */
@media (max-width: 720px) {
    /* Card y inline → pill blanco */
    .dai-gnews-inline.dai-gnews-inline,
    .dai-gnews-promoter.dai-gnews-promoter {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 16px !important;
        background: var(--et-paper, #FFFFFF) !important;
        border: 1px solid var(--et-rule, #E5E5E5) !important;
        border-radius: 8px !important;       /* ANTES 12 · ahora 8 (esquinas correctas, no pill) */
        box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
        text-align: left !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        position: relative !important;
        overflow: hidden !important;          /* contiene el overlay del cta sin desbordar las esquinas */
        cursor: pointer;
    }
    .dai-gnews-inline.dai-gnews-inline__logo,
    .dai-gnews-inline .dai-gnews-inline__logo,
    .dai-gnews-promoter.dai-gnews-promoter__icon,
    .dai-gnews-promoter .dai-gnews-promoter__icon {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
    }
    .dai-gnews-inline .dai-gnews-inline__logo svg,
    .dai-gnews-promoter .dai-gnews-promoter__icon svg {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
    }
    .dai-gnews-inline .dai-gnews-inline__text,
    .dai-gnews-promoter .dai-gnews-promoter__body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .dai-gnews-inline .dai-gnews-inline__sub,
    .dai-gnews-promoter .dai-gnews-promoter__text {
        display: none !important;
    }
    /* Título · MAYÚSCULAS (clon de "ADD US AS A PREFERRED SOURCE ON GOOGLE") */
    .dai-gnews-inline .dai-gnews-inline__title,
    .dai-gnews-promoter .dai-gnews-promoter__title {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #0A0A0A !important;
        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;
    }
    /* CTA tradicional → overlay click-through sobre la card · sin texto visible
       · border-radius en SYNC con el contenedor (8px) para que las esquinas no
       se vean redondeadas distintas (el bug de v2.43.16 era radius 12 vs 999
       del plugin). */
    .dai-gnews-inline .dai-gnews-inline__cta,
    .dai-gnews-promoter .dai-gnews-promoter__cta {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;     /* sincronizado con el card */
        color: transparent !important;
        text-indent: -9999px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        font-size: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }
    .dai-gnews-inline .dai-gnews-inline__cta svg,
    .dai-gnews-promoter .dai-gnews-promoter__cta svg {
        display: none !important;
    }
    /* v2.43.18 · SIN cambio de color al pulsar/hover/focus en móvil
       (el usuario no quiere ningún flash azul ni tap highlight). */
    .dai-gnews-inline.dai-gnews-inline,
    .dai-gnews-promoter.dai-gnews-promoter,
    .dai-gnews-inline .dai-gnews-inline__cta,
    .dai-gnews-promoter .dai-gnews-promoter__cta {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }
    .dai-gnews-inline.dai-gnews-inline:hover,
    .dai-gnews-inline.dai-gnews-inline:active,
    .dai-gnews-inline.dai-gnews-inline:focus,
    .dai-gnews-inline.dai-gnews-inline:focus-within,
    .dai-gnews-promoter.dai-gnews-promoter:hover,
    .dai-gnews-promoter.dai-gnews-promoter:active,
    .dai-gnews-promoter.dai-gnews-promoter:focus,
    .dai-gnews-promoter.dai-gnews-promoter:focus-within {
        background: var(--et-paper, #FFFFFF) !important;       /* mismo blanco siempre */
        border-color: var(--et-rule, #E5E5E5) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
        transform: none !important;
    }
    .dai-gnews-inline .dai-gnews-inline__cta:hover,
    .dai-gnews-inline .dai-gnews-inline__cta:active,
    .dai-gnews-inline .dai-gnews-inline__cta:focus,
    .dai-gnews-promoter .dai-gnews-promoter__cta:hover,
    .dai-gnews-promoter .dai-gnews-promoter__cta:active,
    .dai-gnews-promoter .dai-gnews-promoter__cta:focus {
        background: transparent !important;
        color: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }
}



/* ═══════════════════════════════════════════════════════════════════
   v2.168.0 · RIEL DE PUBLICIDAD DEL LATERAL DE LA NOTICIA
   Cinco anunciantes apilados bajo «Tu InfoPuertos», separados por un
   filete. Las creatividades vienen en formatos distintos —728×90,
   300×250, cuadrado— así que se escalan al ancho de la columna en vez
   de imponerles un alto: cada una conserva su proporción.
   ═══════════════════════════════════════════════════════════════════ */
.et-cta-sidebar__ads {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 18px;
}
.et-cta-sidebar__ads .et-ad--artside { width: 100%; }
.et-cta-sidebar__ads .et-ad--artside img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}
/* El filete va en un elemento propio, no en un borde de la creatividad:
   así solo aparece ENTRE dos anuncios y nunca cuelga suelto al final. */
.et-cta-sidebar__ads-sep {
    display: block;
    width: 100%;
    height: 1px;
    margin: 16px 0;
    background: #E4E9EE;
}
/* El sello «Publicidad» se blinda igual que en los tres huecos del
   cuerpo: el artículo declara márgenes para sus <img> y también
   alcanzaban al icono de CAMAL AI. */
.et-cta-sidebar__ads .et-ad__tag { align-items: center; line-height: 1; }
.et-cta-sidebar__ads .et-ad__tag img {
    margin: 0 !important;
    display: block !important;
    width: 12px !important; height: 12px !important;
    max-width: none !important; float: none !important;
}
.et-cta-sidebar__ads .et-ad__tag-txt { line-height: 1; }