/* ==========================================================================
   CALCULA TU COCHE — sistema de diseño
   Blog en modo claro (lectura cómoda de artículos largos).
   La calculadora vive en modo oscuro "cuadro de mandos", con su propio
   espacio de nombres (.calc-widget) para no interferir con el resto.
   ========================================================================== */

:root{
  /* -- Paleta base (modo claro, blog) -- */
  --bg:            #fcfcfb;
  --bg-alt:        #f1f3f5;
  --bg-card:       #ffffff;
  --line:          #e3e6ea;
  --line-soft:     #ebedf0;
  --text:          #1c2128;
  --text-muted:    #5b6472;
  --text-faint:    #8b93a1;

  /* -- Colores de pilar (identidad por categoría) -- */
  --pilar1: #c77a1e; /* Comprar, Renting o Leasing — ámbar */
  --pilar2: #8b7ce8; /* Ayudas y Fiscalidad — violeta */
  --pilar3: #1fa893; /* Coste Real del Coche — verde azulado */
  --pilar4: #2e7fd9; /* Eléctricos e Híbridos — azul */
  --danger: #d9432e;
  --good:   #3f9142;

  /* -- Tipografía -- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius: 12px;
  --content-width: 760px;
  --wide-width: 1180px;
}

/* -------------------------------------------------------------------- */
/* Reset ligero                                                          */
/* -------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
ul, ol{ padding-left: 1.3em; }
table{ border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

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

.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--text); color: #fff;
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* Oculta visualmente pero mantiene accesible para lectores de pantalla
   (usada por el formulario de búsqueda y cualquier otra etiqueta que
   necesite estar presente en el DOM sin verse). */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------- */
/* Contenedores                                                          */
/* -------------------------------------------------------------------- */
.wrap{ max-width: var(--wide-width); margin: 0 auto; padding: 0 20px; }
.wrap-content{ max-width: var(--content-width); margin: 0 auto; padding: 0 20px; }

/* -------------------------------------------------------------------- */
/* Header / navegación                                                  */
/* -------------------------------------------------------------------- */
.site-header{
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.site-logo{
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  text-decoration: none; color: var(--text); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.site-logo .dot{ width: 9px; height: 9px; border-radius: 2px; background: var(--pilar1); display:inline-block; }

.main-nav{ display: flex; align-items: center; }
.main-nav ul{
  display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0;
}
.main-nav li{ list-style: none; }
.main-nav a{
  text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--text-muted);
  transition: color .15s;
}
.main-nav a:hover, .main-nav a.current{ color: var(--text); }

.nav-cta{
  background: var(--pilar1); color: #fff !important; padding: 9px 16px; border-radius: 8px;
  font-size: 14px !important;
}

.nav-toggle{ display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

@media (max-width: 880px){
  .main-nav{
    position: fixed; inset: 68px 0 0 0; background: var(--bg-card);
    padding: 24px 20px; transform: translateX(100%); transition: transform .2s;
    overflow-y: auto; align-items: stretch;
  }
  .main-nav ul{ flex-direction: column; align-items: stretch; gap: 18px; }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display: block; }
}

/* -------------------------------------------------------------------- */
/* Breadcrumbs                                                          */
/* -------------------------------------------------------------------- */
.breadcrumbs{
  font-size: 13px; color: var(--text-faint); padding: 14px 0;
}
.breadcrumbs a{ text-decoration: none; color: var(--text-faint); }
.breadcrumbs a:hover{ color: var(--text-muted); }
.breadcrumbs .sep{ margin: 0 6px; }

/* -------------------------------------------------------------------- */
/* Homepage — hero                                                      */
/* -------------------------------------------------------------------- */
.hero{
  padding: 56px 0 40px;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero .wrap{ display: block; height: auto; }
.hero-eyebrow{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pilar1); font-weight: 600; margin-bottom: 14px;
}
.hero h1{
  font-family: var(--font-display); font-size: clamp(30px, 5vw, 46px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 16px; max-width: 18ch;
}
.hero p{ font-size: 18px; color: var(--text-muted); max-width: 60ch; margin: 0 0 28px; }

.hero-calc-frame{
  margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 20px 60px -30px rgba(20,23,28,.35);
}

/* Pillar grid on homepage */
.pillars-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 48px 0;
}
@media (max-width: 900px){ .pillars-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pillars-grid{ grid-template-columns: 1fr; } }

.pillar-card{
  display: block; text-decoration: none; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; border-top: 4px solid var(--pillar-color, var(--pilar1));
  transition: transform .15s, box-shadow .15s;
}
.pillar-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px -18px rgba(20,23,28,.3); }
.pillar-card h3{ font-family: var(--font-display); font-size: 19px; margin: 0 0 8px; }
.pillar-card p{ font-size: 14px; color: var(--text-muted); margin: 0; }

.section-title{
  font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 56px 0 20px;
  letter-spacing: -0.01em;
}

/* Latest posts grid */
.posts-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .posts-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .posts-grid{ grid-template-columns: 1fr; } }

.post-card{
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; text-decoration: none; color: var(--text); display: block;
}
.post-card:hover .post-card-title{ text-decoration: underline; }
.post-card .cat-tag{
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cat-color, var(--pilar1)); font-weight: 700; margin-bottom: 10px; display: block;
}
.post-card-title{ font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; }
.post-card .excerpt{ font-size: 13.5px; color: var(--text-muted); margin: 0; }

/* -------------------------------------------------------------------- */
/* Category archive                                                      */
/* -------------------------------------------------------------------- */
.archive-header{
  padding: 40px 0 28px; border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.archive-header .eyebrow{
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--cat-color, var(--pilar1)); font-weight: 700; margin-bottom: 10px;
}
.archive-header h1{ font-family: var(--font-display); font-size: 32px; margin: 0 0 12px; }
.archive-header .archive-desc{ color: var(--text-muted); max-width: 68ch; font-size: 16px; }

.archive-list{ display: grid; grid-template-columns: 1fr; gap: 16px; margin: 32px 0; }
.archive-item{
  display: flex; gap: 20px; padding: 20px; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--text); align-items: baseline;
  justify-content: space-between;
}
.archive-item .archive-item-title{ font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.archive-item .archive-item-date{ font-size: 13px; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }

/* -------------------------------------------------------------------- */
/* Single article                                                        */
/* -------------------------------------------------------------------- */
.article-header{ padding: 36px 0 0; }
.article-header .cat-link{
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--cat-color, var(--pilar1)); font-weight: 700; text-decoration: none;
}
.article-header h1{
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1.15;
  letter-spacing: -0.02em; margin: 14px 0 18px;
}
.article-meta{
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-faint);
  padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px;
}
.article-meta .updated{ font-family: var(--font-mono); }

.article-body{ font-size: 18px; line-height: 1.7; }
.article-body h2{
  font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 44px 0 18px;
  letter-spacing: -0.01em; scroll-margin-top: 90px;
}
.article-body h3{ font-family: var(--font-display); font-size: 20px; margin: 32px 0 14px; }
.article-body p{ margin: 0 0 20px; }
.article-body ul, .article-body ol{ margin: 0 0 20px; }
.article-body li{ margin-bottom: 8px; }
.article-body a{ color: var(--pilar4); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

.article-body table{ margin: 24px 0; font-size: 15.5px; }
.article-body th, .article-body td{ padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.article-body th{
  background: var(--bg-alt); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.article-body table caption, .article-body figcaption{
  font-size: 12.5px; color: var(--text-faint); text-align: left; margin-top: 8px;
}

/* TL;DR / Ideas clave box (blockquote de apertura) */
.article-body > blockquote:first-of-type,
.tldr-box{
  background: var(--bg-alt); border-left: 4px solid var(--pilar1); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px; margin: 28px 0 36px; font-size: 16px;
}
.tldr-box p:first-child{ margin-top: 0; }
.tldr-box p:last-child{ margin-bottom: 0; }
.article-body > blockquote:first-of-type p{ margin: 6px 0; }

/* Cápsulas de cita (citation capsules) — resto de blockquotes */
.article-body blockquote{
  border-left: 3px solid var(--line); padding: 4px 0 4px 18px; margin: 24px 0;
  color: var(--text-muted); font-style: italic;
}

/* Stat callout — el elemento firma: lectura tipo "gauge" plano */
.stat-callout{
  display: flex; align-items: center; gap: 16px; background: var(--bg-card);
  border: 1px solid var(--line); border-left: 4px solid var(--pilar1); border-radius: 10px;
  padding: 16px 20px; margin: 28px 0;
}
.stat-callout .stat-num{
  font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--pilar1);
  white-space: nowrap;
}
.stat-callout .stat-label{ font-size: 14px; color: var(--text-muted); }

/* FAQ — nativo con <details>/<summary>, cero JS */
.faq-block{ margin: 40px 0; }
.faq-item{
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden;
  background: var(--bg-card);
}
.faq-item summary{
  cursor: pointer; padding: 16px 20px; font-family: var(--font-display); font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+'; font-family: var(--font-mono); font-size: 20px; color: var(--text-faint); flex-shrink: 0;
}
.faq-item[open] summary::after{ content: '−'; }
.faq-item .faq-answer{ padding: 0 20px 18px; color: var(--text-muted); font-size: 15.5px; }

/* Fuentes citadas */
.sources-block{
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-faint);
}
.sources-block h2{
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); border: none; margin: 0 0 12px;
}
.sources-block ul{ padding-left: 1.1em; }
.sources-block li{ margin-bottom: 6px; }
.sources-block a{ color: var(--text-muted); }

/* Related articles (matched content propio) */
.related-block{ margin: 56px 0; }
.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 700px){ .related-grid{ grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Ad slots                                                              */
/* -------------------------------------------------------------------- */
.ad-slot{
  margin: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ad-slot .ad-label{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.ad-slot-inner{ width: 100%; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.ad-slot--empty .ad-slot-inner{
  background: repeating-linear-gradient(45deg, var(--bg-alt), var(--bg-alt) 10px, var(--bg) 10px, var(--bg) 20px);
  border: 1px dashed var(--line); border-radius: 8px; color: var(--text-faint); font-size: 12px;
}
.ad-slot--sidebar{ position: sticky; top: 88px; }
.ad-anchor-mobile{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--bg-card);
  border-top: 1px solid var(--line); padding: 6px 10px; display: none;
  max-height: 100px; overflow: hidden;
}
@media (max-width: 880px){ .ad-anchor-mobile.has-ad{ display: block; } }
.ad-anchor-close{
  position: absolute; top: 2px; right: 6px; background: none; border: none; font-size: 16px;
  color: var(--text-faint); cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* Article layout with sidebar                                          */
/* -------------------------------------------------------------------- */
.article-layout{
  display: grid; grid-template-columns: minmax(0, var(--content-width)) 300px; gap: 48px;
  max-width: var(--wide-width); margin: 0 auto; padding: 0 20px 60px;
}
.article-layout .article-main{ min-width: 0; }
@media (max-width: 1020px){
  .article-layout{ grid-template-columns: 1fr; }
  .article-layout aside{ display: none; }
}

/* Variante ancha para la página de la calculadora: su rejilla interna de
   formulario + resultados (.cw-grid) reparte el ancho disponible de la
   columna principal en dos columnas proporcionales; con el sidebar de
   anuncios presente, un contenedor tan estrecho como el de un artículo de
   lectura (760px) dejaría cada columna con menos de 400px. Este contenedor
   más ancho (1400px) le da más aire — verificado con capturas reales a
   1250/1300/1400/1920px de viewport. */
.calc-page-layout{
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
  max-width: 1400px; margin: 0 auto; padding: 0 20px 60px;
}
.calc-page-layout .article-main{ min-width: 0; }
@media (max-width: 1300px){
  .calc-page-layout{ grid-template-columns: 1fr; }
  .calc-page-layout aside{ display: none; }
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.site-footer{ background: var(--text); color: #d7dae0; margin-top: 80px; padding: 48px 0 28px; }
.footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #9aa2ae; margin: 0 0 14px; }
.footer-grid a{ display: block; color: #d7dae0; text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.footer-grid a:hover{ text-decoration: underline; }
.footer-brand{ font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.footer-brand-desc{ font-size: 14px; color: #9aa2ae; max-width: 40ch; }
.footer-bottom{
  border-top: 1px solid #333a45; padding-top: 20px; font-size: 12.5px; color: #9aa2ae;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a{ color: #9aa2ae; }

/* -------------------------------------------------------------------- */
/* Calculadora — namespace oscuro independiente                          */
/* Reutiliza el sistema visual de la herramienta original, aislado en    */
/* .calc-widget para no heredar ni filtrar estilos del blog claro.       */
/* -------------------------------------------------------------------- */
.calc-widget{
  --cw-bg-base:#14171c; --cw-bg-panel:#1c2029; --cw-bg-panel-alt:#242a35; --cw-bg-input:#1a1e26;
  --cw-line:#2f3644; --cw-line-soft:#252b37; --cw-text:#edeff2; --cw-text-muted:#8b93a1; --cw-text-faint:#5b6472;
  --cw-comprar:#e8963a; --cw-renting:#43d9c0; --cw-leasing:#9c8cf5; --cw-danger:#e8604c; --cw-good:#6fcf7b;

  background: var(--cw-bg-base); color: var(--cw-text); border-radius: 16px; padding: 32px;
  font-family: var(--font-body);
}
.calc-widget *{ box-sizing: border-box; }
.calc-widget .cw-title{ font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.calc-widget .cw-sub{ color: var(--cw-text-muted); font-size: 14px; margin: 0 0 24px; }
.calc-widget label{ display:block; font-size:12.5px; color:var(--cw-text-muted); margin-bottom:6px; }
.calc-widget input[type=number], .calc-widget select{
  width:100%; background: var(--cw-bg-input); border:1px solid var(--cw-line); color: var(--cw-text);
  border-radius:9px; padding:10px 11px; font-family: var(--font-mono); font-size:14px;
}
/* El resto del detalle visual (gauges, tabla, toggles) se enqueue vía calculator.css parcial reutilizado */