/* ============================================================
   GASOLINA ESPAÑA — Global Style Override
   Fuente: Barlow Condensed (headings) + Barlow (body)
   Imágenes más visibles, tipografía más comercial/llamativa
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── FUENTE BASE (toda la web) ── */
*,
*::before,
*::after {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── FUENTE DISPLAY (titulares y números) ── */
h1, h2, h3, h4, h5, h6,
.topbar h1,
.blog-header h2,
.article-header h1,
.section-title,
.post-title,
.ph-title,
.province-hero-inner .ph-title,
.page-hero-img-inner h2,
.panel-head,
.seo-content h1,
.seo-content h2,
.page-header h2,
.price-card .label,
.big-number .num,
.article-tag,
.post-tag,
.nav-link,
.article-meta,
.back-btn {
  font-family: 'Barlow Condensed', 'Barlow', -apple-system, sans-serif !important;
  letter-spacing: 0.01em;
}

/* ── NÚMEROS DE PRECIO (impacto máximo) ── */
.price-card .value,
.big-number .num,
.cost-card .val {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* ── TITULARES MÁS GRANDES Y LLAMATIVOS ── */
.topbar h1 {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.blog-header h2 {
  font-size: 1.7rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.article-header h1 {
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

.seo-content h1 {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}

.ph-title,
.province-hero-inner .ph-title {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

.page-hero-img-inner h2 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
}

.section h3,
.faq-section > h3 {
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

/* ── NÚMEROS DE PRECIO MÁS GRANDES ── */
.price-card .value {
  font-size: 2rem !important;
}

.price-card.brent .value {
  font-size: 2.4rem !important;
}

/* ── NAV LINKS más llamativos ── */
.nav-link {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* ── BOTONES más impactantes ── */
.btn-search,
.back-btn,
.btn-cta,
.cta-btn,
.post-readmore {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.92rem !important;
}

.btn-search {
  font-size: 1rem !important;
  padding: 0 1.6rem !important;
}

/* ── ARTICLE BODY texto más legible ── */
.article-body {
  font-size: 0.97rem !important;
  line-height: 1.82 !important;
}

.article-body p:first-of-type {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: #1e293b !important;
}

.article-body h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.article-body h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   IMÁGENES MÁS VISIBLES — overlays más ligeros, heroes más altos
   ═══════════════════════════════════════════════════════════════ */

/* Blog: article hero header — overlay más ligero */
.article-header::before {
  background: linear-gradient(160deg,
    rgba(10, 26, 54, 0.72) 0%,
    rgba(15, 36, 68, 0.50) 100%) !important;
}

.article-header {
  min-height: 260px !important;
}

/* Blog index hero */
.blog-header::before {
  background: linear-gradient(160deg,
    rgba(10, 26, 54, 0.75) 0%,
    rgba(15, 36, 68, 0.55) 100%) !important;
}

/* Province hero — overlay más ligero */
.province-hero::before {
  background: linear-gradient(160deg,
    rgba(10, 26, 54, 0.68) 0%,
    rgba(15, 36, 68, 0.45) 100%) !important;
}

.province-hero {
  min-height: 200px !important;
}

/* Static pages hero */
.page-hero-img::before {
  background: linear-gradient(160deg,
    rgba(10, 26, 54, 0.70) 0%,
    rgba(15, 36, 68, 0.48) 100%) !important;
}

.page-hero-img {
  min-height: 180px !important;
}

/* Main app: intro-seo y search-head */
.intro-seo::before {
  background: linear-gradient(120deg,
    rgba(10, 26, 54, 0.80) 0%,
    rgba(15, 36, 68, 0.62) 100%) !important;
}

.search-head::before {
  background: linear-gradient(135deg,
    rgba(10, 26, 54, 0.80) 0%,
    rgba(26, 58, 92, 0.68) 100%) !important;
}

/* Blog index: cards con imagen más alta */
.post-img-wrap {
  height: 200px !important;
}

/* Hover zoom más pronunciado */
.post-card:hover .post-img {
  transform: scale(1.08) !important;
}

/* ── Post title más llamativo ── */
.post-title {
  font-size: 1.0rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

/* ── Section title con más carácter ── */
.section-title {
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
}

/* ── Responsive: títulos aún más grandes en desktop ── */
@media (min-width: 640px) {
  .article-header h1 {
    font-size: 2.1rem !important;
  }

  .blog-header h2 {
    font-size: 2rem !important;
  }

  .ph-title,
  .province-hero-inner .ph-title {
    font-size: 2rem !important;
  }

  .article-header {
    min-height: 300px !important;
  }

  .province-hero {
    min-height: 240px !important;
  }

  .post-img-wrap {
    height: 220px !important;
  }
}


/* DARK MODE */
[data-theme="dark"] {
  --bg: #0d1117 !important; --surface: #161b22 !important; --surf2: #21262d !important;
  --border: #30363d !important; --text: #e6edf3 !important; --muted: #8b949e !important;
  --navy: #010409 !important; --navy2: #0d1117 !important; --blue-light: #1c2a3a !important;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #0d1117 !important; color: #e6edf3 !important; }
[data-theme="dark"] .topbar { background: #010409 !important; }
[data-theme="dark"] .nav-bar { background: #0d1117 !important; }
[data-theme="dark"] .price-card { background: #161b22 !important; border-color: #30363d !important; }
[data-theme="dark"] .panel-head { background: #161b22 !important; }
[data-theme="dark"] .search-input,
[data-theme="dark"] .fuel-select { background: #21262d !important; color: #e6edf3 !important; border-color: #30363d !important; }
[data-theme="dark"] .calc-field input,
[data-theme="dark"] .calc-field select { background: #21262d !important; color: #e6edf3 !important; border-color: #30363d !important; }
[data-theme="dark"] footer { background: #010409 !important; }

.dark-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,0.25); border-radius: 20px;
  padding: 0.28rem 0.65rem; cursor: pointer; font-size: 0.82rem;
  color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 0.3rem;
  transition: background 0.2s; white-space: nowrap; font-family: inherit;
}
.dark-toggle:hover { background: rgba(255,255,255,0.1); }

/* STICKY BOTTOM BAR */
#sticky-price-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: #0f2444; border-top: 1px solid rgba(91,184,245,0.3);
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom,0px));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
#sticky-price-bar .spb-inner { display: flex; align-items: center; justify-content: space-around; max-width: 500px; margin: 0 auto; }
#sticky-price-bar .spb-item { display: flex; flex-direction: column; align-items: center; }
#sticky-price-bar .spb-label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }
#sticky-price-bar .spb-value { font-size: 1.05rem; font-weight: 900; color: #5bb8f5; line-height: 1.2; font-family: 'Barlow Condensed', sans-serif; }
#sticky-price-bar .spb-close { background: transparent; border: none; color: rgba(255,255,255,0.4); font-size: 1.3rem; cursor: pointer; padding: 0 0.3rem; }
@media (max-width:640px) {
  #sticky-price-bar { display: block; }
  .page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom,0px)) !important; }
}

/* CALCULADORA DEPOSITO */
.calc-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.calc-head { background: var(--navy); background-image: url('/assets/img/hero-gasolina.webp'); background-size: cover; background-position: center; position: relative; overflow: hidden; padding: 0.9rem 1.25rem; }
.calc-head::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg,rgba(10,26,54,0.88) 0%,rgba(15,36,68,0.72) 100%); }
.calc-head > * { position: relative; z-index: 1; }
.calc-head h2 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.1rem; }
.calc-head p { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.calc-body { padding: 1rem 1.25rem; }
.calc-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0.8rem; }
.calc-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 90px; }
.calc-field label { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.calc-field input,.calc-field select { height: 42px; background: var(--surf2); border: 1.5px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.95rem; font-family: inherit; padding: 0 0.8rem; outline: none; transition: border-color 0.15s; }
.calc-field input:focus,.calc-field select:focus { border-color: #1d4ed8; }
.calc-result { background: var(--navy); border-radius: 8px; padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; text-align: center; margin-top: 0.8rem; }
.calc-result-item .cr-label { font-size: 0.62rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.2rem; }
.calc-result-item .cr-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 900; color: #5bb8f5; line-height: 1; }
.calc-result-item .cr-sub { font-size: 0.63rem; color: rgba(255,255,255,0.4); margin-top: 0.1rem; }

/* SPARKLINE + HACE 1 ANNO */
.price-sparkline { display: block; margin: 0.3rem 0 0.1rem; }
.year-ago { font-size: 0.64rem; color: var(--muted); margin-top: 0.1rem; }
.ya-up { color: #b91c1c; font-weight: 700; }
.ya-down { color: #15803d; font-weight: 700; }

/* WHATSAPP SHARE */
.share-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; padding: 0.6rem 0 0; }
.btn-share-wa { display: inline-flex; align-items: center; gap: 0.4rem; background: #25d366; color: #fff; border: none; border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 700; cursor: pointer; text-decoration: none; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.03em; text-transform: uppercase; transition: background 0.15s, transform 0.1s; }
.btn-share-wa:hover { background: #128c56; transform: translateY(-1px); }
.btn-share-copy { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surf2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.btn-share-copy:hover { background: var(--border); }

/* RUTA TEASER */
.ruta-teaser { background-image: url('/assets/img/hero-madrid-barcelona.webp'); background-size: cover; background-position: center; border-radius: 10px; overflow: hidden; position: relative; padding: 1.4rem 1.5rem; text-decoration: none; display: block; transition: transform 0.2s, box-shadow 0.2s; }
.ruta-teaser::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg,rgba(10,26,54,0.82) 0%,rgba(15,36,68,0.60) 100%); }
.ruta-teaser:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.ruta-teaser > * { position: relative; z-index: 1; }
.ruta-teaser h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; font-weight: 900; color: #fff; margin-bottom: 0.3rem; }
.ruta-teaser p { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 0.8rem; }
.ruta-teaser .cta-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: #5bb8f5; color: #0f2444; border-radius: 20px; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 800; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }