/* ═══════════════════════════════════════════════════════════════════
   esTenerife · Header PC 3.11 «Faro»
   Barra de utilidades · masthead (Lo último · logo · Calima 2.0) ·
   navegación pegajosa con subrayado deslizante y megamenú.
   Inter en todo (la fuente de la casa). Solo escritorio (≥ 1025 px).
   ═══════════════════════════════════════════════════════════════════ */
.et-hd {
    --hd-max: var(--et-pc-max, 1280px);
    --hd-gut: var(--et-pc-gut, 24px);
    --hd-ink: #0A0A0A; --hd-ink2: #2A2A2A; --hd-ink3: #4A4A4A; --hd-ink4: #757575; --hd-ink5: #9D9D9D;
    --hd-line: #E5E3DD; --hd-soft: #F7F6F1; --hd-blue: #33519F; --hd-red: #C8102E;
    --hd-ease: cubic-bezier(.2, .7, .2, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--hd-ink);
    background: #fff;
    display: none;
}
@media (min-width: 1025px) { .et-hd { display: block; } }
.et-hd a { color: inherit; text-decoration: none; }
.et-hd__in { max-width: var(--hd-max); margin: 0 auto; padding: 0 var(--hd-gut); }

/* ── 1 · Barra de utilidades ─────────────────────────────────────── */
.et-hd__top { border-bottom: 1px solid var(--hd-line); }
.et-hd__top .et-hd__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; }
.et-hd__date { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--hd-ink3); white-space: nowrap; }
.et-hd__date span::first-letter { text-transform: uppercase; }
.et-hd__date i { font-style: normal; color: var(--hd-line); }
.et-hd__date time { font-weight: 700; color: var(--hd-ink); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.et-hd__date time b { font-weight: inherit; animation: et-hd-blink 1s steps(2, start) infinite; }
@keyframes et-hd-blink { to { opacity: .25; } }
.et-hd__city { color: var(--hd-ink4); }
.et-hd__tools { display: flex; align-items: center; gap: 2px; }
.et-hd__tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--hd-ink2); transition: background .18s var(--hd-ease), color .18s; }
.et-hd__tool:hover { background: var(--hd-soft); color: var(--hd-blue); }
.et-hd__tool b { font-weight: 800; font-variant-numeric: tabular-nums; }
.et-hd__wxic { display: inline-flex; width: 18px; height: 18px; color: var(--hd-ink2); }
.et-hd__wxic svg { width: 18px; height: 18px; display: block; }
.et-hd__mag { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 4px; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.et-hd__mag--lo { background: #E0A93A; } .et-hd__mag--mid { background: #EE7A1C; } .et-hd__mag--hi { background: #D93A3F; }
.et-hd__search { position: relative; display: flex; align-items: center; margin-left: 8px; height: 30px; border: 1px solid transparent; border-radius: 999px; transition: width .32s var(--hd-ease), border-color .2s, background .2s; width: 32px; overflow: hidden; }
.et-hd__search.is-open, .et-hd__search:focus-within { width: 260px; border-color: var(--hd-line); background: #fff; }
.et-hd__search-btn { appearance: none; border: 0; background: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--hd-ink2); cursor: pointer; flex: 0 0 auto; border-radius: 50%; }
.et-hd__search-btn:hover { color: var(--hd-blue); }
.et-hd__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13px/1 inherit; font-family: inherit; color: var(--hd-ink); padding: 0 6px 0 0; }
.et-hd__search input::placeholder { color: var(--hd-ink5); }
.et-hd__search kbd { font: 600 10px/1 inherit; font-family: inherit; color: var(--hd-ink5); border: 1px solid var(--hd-line); border-radius: 4px; padding: 3px 5px; margin-right: 6px; flex: 0 0 auto; opacity: 0; transition: opacity .2s; }
.et-hd__search.is-open kbd, .et-hd__search:focus-within kbd { opacity: 1; }

/* ── 2 · Masthead ────────────────────────────────────────────────── */
.et-hd__mast { border-bottom: 1px solid var(--hd-line); }
.et-hd__mast-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; padding-top: 18px; padding-bottom: 16px; min-height: 128px; }
.et-hd__mast-in > .et-pc-wordmark { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.et-hd__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hd-ink4); line-height: 1; }
.et-hd__pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--hd-red); flex: 0 0 auto; }
.et-hd__pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--hd-red); opacity: 0; animation: et-hd-pulse 2.2s var(--hd-ease) infinite; }
@keyframes et-hd-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* Lo último · rotativo */
.et-hd__latest { grid-column: 1; justify-self: start; width: 100%; max-width: 330px; }
.et-hd__latest-list { list-style: none; margin: 9px 0 0; padding: 0; position: relative; height: 54px; }
.et-hd__latest-it { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--hd-ease), transform .45s var(--hd-ease); pointer-events: none; }
.et-hd__latest-it.is-on { opacity: 1; transform: none; pointer-events: auto; }
.et-hd__latest-it.is-out { opacity: 0; transform: translateY(-8px); }
.et-hd__latest-it a { display: block; }
.et-hd__latest-it time { display: block; font-size: 11px; font-weight: 700; color: var(--hd-blue); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.et-hd__latest-it span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.28; letter-spacing: -.15px; color: var(--hd-ink); transition: color .2s; }
.et-hd__latest-it a:hover span { color: var(--hd-blue); }
.et-hd__latest-bar { display: block; height: 2px; margin-top: 10px; background: var(--hd-line); border-radius: 2px; overflow: hidden; }
.et-hd__latest-bar i { display: block; height: 100%; width: 100%; background: var(--hd-ink); transform-origin: left; transform: scaleX(0); }
.et-hd__latest.is-run .et-hd__latest-bar i { animation: et-hd-bar var(--hd-dur, 6s) linear forwards; }
.et-hd__latest:hover .et-hd__latest-bar i { animation-play-state: paused; }
@keyframes et-hd-bar { to { transform: scaleX(1); } }

/* Calima 2.0 */
.et-hd__cal { grid-column: 3; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: 100%; max-width: 262px; padding-left: 14px; border-left: 2px solid var(--cal, #15A34A); transition: border-color .4s; }
.et-hd__cal .et-hd__eyebrow { align-self: flex-end; }
.et-hd__live { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; font-size: 10px; font-weight: 700; letter-spacing: .8px; color: var(--cal); font-style: normal; }
.et-hd__live b { width: 6px; height: 6px; border-radius: 50%; background: var(--cal); animation: et-hd-live 1.6s ease-in-out infinite; }
@keyframes et-hd-live { 50% { opacity: .25; } }
.et-hd__cal-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 10px; width: 100%; }
.et-hd__cal-lvl { font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1; color: var(--cal); }
.et-hd__cal-pm { font-size: 11.5px; font-weight: 500; color: var(--hd-ink4); white-space: nowrap; text-align: right; }
.et-hd__cal-pm em { display: block; }
.et-hd__cal-pm b { font-weight: 800; color: var(--hd-ink); font-variant-numeric: tabular-nums; }
.et-hd__cal-pm em { font-style: normal; color: var(--cal); font-weight: 600; }
.et-hd__cal-chart { display: block; width: 100%; }
.et-hd__cal-svg { display: block; width: 100%; height: auto; overflow: visible; }
.et-hd__cal-th { stroke: var(--hd-line); stroke-width: 1; stroke-dasharray: 2 3; }
.et-hd__cal-nowline { stroke: var(--hd-line); stroke-width: 1; }
.et-hd__cal-area { fill: var(--cal); fill-opacity: .08; stroke: none; }
.et-hd__cal-past { fill: none; stroke: var(--cal); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.et-hd__cal-fut { fill: none; stroke: var(--hd-ink4); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linejoin: round; }
.et-hd__cal-now { fill: #fff; stroke: var(--cal); stroke-width: 2; }
.et-hd__cal-ax { font-size: 8.5px; font-weight: 600; fill: var(--hd-ink5); letter-spacing: .3px; text-transform: uppercase; }
.et-hd__cal-scale { display: flex; gap: 4px; width: 100%; }
.et-hd__cal-seg { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.et-hd__cal-seg i { display: block; height: 4px; border-radius: 2px; background: var(--c); opacity: .22; transition: opacity .3s; }
.et-hd__cal-seg small { font-size: 9px; font-weight: 600; letter-spacing: .2px; color: var(--hd-ink5); text-align: center; white-space: nowrap; }
.et-hd__cal-seg.is-on i { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); }
.et-hd__cal-seg.is-on small { color: var(--hd-ink); font-weight: 800; }
.et-hd__cal-isl { display: flex; gap: 10px; font-size: 11px; font-weight: 700; color: var(--hd-ink2); font-variant-numeric: tabular-nums; }
.et-hd__cal-isl em { font-style: normal; font-weight: 600; color: var(--hd-ink5); letter-spacing: .4px; }
.et-hd__cal-upd { margin-left: auto; font-weight: 500; color: var(--hd-ink5); }
.et-hd__cal:hover .et-hd__cal-lvl { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── 3 · Navegación pegajosa ─────────────────────────────────────── */
.et-hd__nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--hd-line); transition: box-shadow .25s; }
/* Al pasar el masthead, la barra queda fija (sticky no sirve: es el último hijo de .et-hd y se quedaría dentro). */
.et-hd.is-stuck { padding-bottom: 51px; }
.et-hd.is-stuck .et-hd__nav { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 10px 30px -18px rgba(10, 10, 10, .25); }
.admin-bar .et-hd.is-stuck .et-hd__nav { top: 32px; }
.et-hd.is-stuck .et-hd__cat-a { padding: 0 8px; font-size: 13px; }
.et-hd.is-stuck .et-hd__cats { gap: 0; }
@media (max-width: 1500px) { .et-hd.is-stuck .et-hd__quick-cal span { display: none; } }
.et-hd__nav-in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 50px; }
.et-hd__mini { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--hd-ease), transform .3s var(--hd-ease); pointer-events: none; }
.et-hd.is-stuck .et-hd__mini { opacity: 1; transform: none; pointer-events: auto; }
.et-hd__mini-img { display: block; max-width: 150px !important; }
.et-hd__mini-h { font-size: 19px; font-weight: 900; letter-spacing: -.8px; color: var(--hd-blue); line-height: 1; }
.et-hd__mini-h .et-pc-wordmark__pre { font-weight: 300; color: var(--hd-ink4); }
.et-hd__cats { grid-column: 2; position: relative; list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; height: 50px; }
.et-hd__cat { position: static; display: flex; }
.et-hd__cat-a { display: flex; align-items: center; padding: 0 11px; font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; color: var(--hd-ink); white-space: nowrap; transition: color .18s; }
.et-hd__cat:hover > .et-hd__cat-a, .et-hd__cat.is-open > .et-hd__cat-a { color: var(--hd-blue); }
.et-hd__cat.is-cur > .et-hd__cat-a { color: var(--hd-blue); }
.et-hd__ink { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--hd-blue); border-radius: 2px 2px 0 0; opacity: 0; transition: transform .32s var(--hd-ease), width .32s var(--hd-ease), opacity .2s; pointer-events: none; }
.et-hd__ink.is-on { opacity: 1; }
.et-hd__quick { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(8px); transition: opacity .3s var(--hd-ease), transform .3s var(--hd-ease); pointer-events: none; }
.et-hd.is-stuck .et-hd__quick { opacity: 1; transform: none; pointer-events: auto; }
.et-hd__quick a, .et-hd__quick button { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 999px; font: 700 12.5px/1 inherit; font-family: inherit; color: var(--hd-ink2); cursor: pointer; transition: background .18s; }
.et-hd__quick a:hover, .et-hd__quick button:hover { background: var(--hd-soft); color: var(--hd-blue); }
.et-hd__quick-wx svg { width: 16px; height: 16px; }
.et-hd__quick-cal i { width: 8px; height: 8px; border-radius: 50%; background: var(--cal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal) 18%, transparent); }

/* Megamenú */
.et-hd__mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--hd-line); box-shadow: 0 24px 48px -24px rgba(10, 10, 10, .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--hd-ease), transform .22s var(--hd-ease), visibility 0s linear .22s; z-index: 60; }
.et-hd__cat.is-open > .et-hd__mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.et-hd__mega::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hd-blue); }
.et-hd__mega-in { display: grid; grid-template-columns: 250px 1fr; gap: 36px; padding-top: 22px; padding-bottom: 24px; }
.et-hd__mega-side { display: flex; flex-direction: column; gap: 10px; padding-right: 28px; border-right: 1px solid var(--hd-line); }
.et-hd__mega-name { font-size: 24px; font-weight: 800; letter-spacing: -.8px; line-height: 1; color: var(--hd-ink); }
.et-hd__mega-name:hover { color: var(--hd-blue); }
.et-hd__mega-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--hd-ink4); }
.et-hd__mega-subs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.et-hd__mega-subs a { display: inline-block; padding: 5px 9px; border: 1px solid var(--hd-line); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--hd-ink2); transition: border-color .18s, color .18s; }
.et-hd__mega-subs a:hover { border-color: var(--hd-blue); color: var(--hd-blue); }
.et-hd__mega-all { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--hd-blue); }
.et-hd__mega-all span { display: inline-block; transition: transform .2s var(--hd-ease); }
.et-hd__mega-all:hover span { transform: translateX(4px); }
.et-hd__mega-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.et-hd__mega-it { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.et-hd__mega-ph { display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--hd-soft); }
.et-hd__mega-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform .6s var(--hd-ease); }
.et-hd__mega-it:hover .et-hd__mega-ph img { transform: scale(1.04); }
.et-hd__mega-tx small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--hd-blue); margin-bottom: 5px; }
.et-hd__mega-tx b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.28; letter-spacing: -.2px; color: var(--hd-ink); transition: color .18s; }
.et-hd__mega-it:hover .et-hd__mega-tx b { color: var(--hd-blue); }
/* la abertura del megamenú se maneja por JS (retardo para no abrirlo al pasar); los que no tienen datos no abren */

@media (prefers-reduced-motion: reduce) {
    .et-hd__pulse::after, .et-hd__live b, .et-hd__date time b { animation: none; }
    .et-hd__latest-it, .et-hd__mega, .et-hd__ink, .et-hd__mini, .et-hd__quick, .et-hd__search { transition: none; }
}
