:root {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-text: #1c2430;
  --color-text-muted: #5b6472;
  --color-primary: #1f5c8c;
  --color-primary-dark: #16456a;
  --color-accent: #c98a3e;
  --color-border: #e3e6ea;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(20, 30, 40, 0.06);
  --max-width: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; }

a { color: inherit; }

/* HEADER */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--color-text);
}

.logo span { color: var(--color-primary); }

.main-nav { display: flex; gap: 28px; }

.main-nav a {
  text-decoration: none;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s;
}

.main-nav a:hover { color: var(--color-primary); }

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.15s;
}

.nav-dropdown-toggle:hover { color: var(--color-primary); }

.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  min-width: 220px;
  z-index: 30;
}

.nav-dropdown-menu.open { display: flex; }

.nav-dropdown-menu a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.nav-dropdown-menu a:hover { background: var(--color-bg); color: var(--color-primary); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

/* HERO */
.hero {
  padding: 72px 0;
  background: linear-gradient(180deg, #eaf1f7 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
}

.hero-inner { max-width: 720px; }

.hero h1 { font-size: 2.25rem; }

.hero-lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s, background 0.15s;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover { background: var(--color-primary-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-ghost:hover { background: #e8f0f8; }

/* SECTIONS */
.section { padding: 72px 0; }

.section-alt { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.section-title { font-size: 1.75rem; }

.section-sub { color: var(--color-text-muted); margin-top: 0; margin-bottom: 36px; }

.section-more { margin: 32px 0 0; text-align: center; }

/* GRIDS / CARDS */
.grid {
  display: grid;
  gap: 24px;
}

.cards-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Lista de artículos de la portada: rectángulos apilados en una sola columna,
   en vez de la cuadrícula de tarjetas cuadradas que usa articulos.html. */
.cards-list {
  grid-template-columns: 1fr;
  gap: 16px;
}

.cards-list .card { padding: 20px 28px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.card-tag {
  display: inline-block;
  align-self: flex-start;
  background: #e8f0f8;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.card h3 { font-size: 1.1rem; }

.card p { color: var(--color-text-muted); flex-grow: 1; }

.card-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: 12px;
}

.card-link:hover { text-decoration: underline; }

/* CALCULATORS */
.calc-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.calc-tab-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.calc-tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Tercera "pestaña" de la portada que en realidad es un enlace al hub de calculadoras.
   Se distingue de las pestañas reales por el borde discontinuo, para que quede claro que
   navega a otra página en vez de cambiar de panel. */
.calc-tab-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.calc-tab-link:hover { background: #e8f0f8; }

.calc-panel { display: none; }

.calc-panel.active { display: block; }

.calc-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.section-alt .calc-grid { background: var(--color-bg); }

.calc-form { display: flex; flex-direction: column; gap: 16px; }

.calc-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 0;
}

.calc-form input,
.calc-form select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}

.calc-form input:focus,
.calc-form select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.calc-form button { margin-top: 6px; }

.calc-result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-placeholder { color: var(--color-text-muted); margin: 0; }

.result-headline {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 6px;
}

.result-sub { color: var(--color-text-muted); margin: 0 0 18px; }

.result-details { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.result-details li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 8px;
  font-size: 0.95rem;
}

.result-details li span:last-child { font-weight: 700; }

.result-error {
  color: #a33232;
  font-weight: 600;
  margin: 0;
}

.calc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.tabla-resultado-wrap { margin-top: 24px; }

.table-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.table-tab-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}

.table-tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.table-view { display: none; }

.table-view.active { display: block; }

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.calc-table th,
.calc-table td {
  padding: 10px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}

.calc-table th:first-child,
.calc-table td:first-child { text-align: left; }

.calc-table thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.calc-table tbody tr:last-child td { border-bottom: none; }

.calc-table tbody tr:hover { background: var(--color-bg); }

/* GRÁFICOS (SVG propio, ver js/main.js) */
.chart-wrap {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px 12px;
}

.chart-title { font-size: 1rem; margin: 0 0 4px; }

.chart-sub {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.chart-canvas { position: relative; }

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.chart-grid { stroke: var(--color-border); stroke-width: 1; }

.chart-axis-label {
  fill: var(--color-text-muted);
  font-size: 13px;
  font-family: inherit;
}

.chart-axis-title {
  fill: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}

.chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

.chart-reference {
  stroke: var(--color-text);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: 0.55;
}

.chart-marker {
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.chart-hover-line { stroke: var(--color-text); stroke-width: 1; opacity: 0.45; }

.chart-hit-area { cursor: crosshair; }

.chart-tooltip {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

.chart-tooltip-title {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.chart-tooltip-row { display: flex; align-items: center; gap: 8px; }

.chart-tooltip-row b { margin-left: auto; font-variant-numeric: tabular-nums; }

.chart-tooltip-total { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 4px; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.chart-legend-item { display: inline-flex; align-items: center; gap: 8px; }

.chart-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.chart-swatch-line { height: 4px; border-radius: 2px; }

.chart-swatch-ref {
  height: 0;
  border-top: 2px dashed var(--color-text);
  border-radius: 0;
  opacity: 0.6;
}

.chart-swatch-marker {
  height: 0;
  border-top: 2px dashed var(--color-accent);
  border-radius: 0;
}

.calc-disclaimer {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Bloque de contenido explicativo bajo cada calculadora individual */
.calc-explainer { max-width: 760px; margin-top: 48px; }

/* AEO: bloque de respuesta directa al inicio de los artículos.
   Es el fragmento que los motores de respuesta suelen citar, así que va antes que nada
   y se puede leer entero sin contexto previo. */
.answer-box {
  background: #eef4f9;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 0 0 28px;
}

.answer-box-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.answer-box p:last-child { margin-bottom: 0; }

/* AEO: preguntas frecuentes (se replican en JSON-LD FAQPage) */
.faq { margin-top: 48px; }

.faq h2 { font-size: 1.3rem; margin-bottom: 20px; }

.faq-item {
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  margin-bottom: 18px;
}

.faq-item h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.faq-item p {
  margin: 0 0 12px;
  color: var(--color-text-muted);
}

.faq-item p:last-child { margin-bottom: 0; }

/* Migas de pan (se replican en JSON-LD BreadcrumbList) */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.breadcrumbs a { color: var(--color-primary); text-decoration: none; }

.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumbs span { margin: 0 6px; opacity: 0.6; }

/* SECCIÓN "COMPRAR VIVIENDA" */

/* Caja de advertencia: el error caro concreto de cada paso */
.warning-box {
  background: #fdf4ec;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.warning-box-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a6524;
}

.warning-box p:last-child { margin-bottom: 0; }

/* Checklist de cierre de cada ficha */
.checklist { list-style: none; padding-left: 0; }

.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
}

/* Navegación secuencial entre fichas */
.step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.step-nav a {
  flex: 1 1 240px;
  min-width: 0;
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}

.step-nav a:hover { border-color: var(--color-primary); }

.step-nav .step-nav-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.step-nav .step-nav-title { font-weight: 600; color: var(--color-primary); }

.step-nav .step-nav-next { text-align: right; }

/* Índice de pasos de la landing */
.pasos-lista { counter-reset: paso; list-style: none; padding-left: 0; }

/* Las tablas de contenido hacen scroll en pantallas estrechas en vez de romper el diseño */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 24px 0;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}

.table-wrap th,
.table-wrap td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.table-wrap thead th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.table-wrap tbody tr:last-child td { border-bottom: none; }

/* Nota legal al pie de cada página de la sección */
.nota-legal {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.nota-legal p { margin: 0 0 8px; }

.nota-legal p:last-child { margin-bottom: 0; }

/* Línea de fuentes dentro de una cita destacada (datos con origen citable) */
.article-body blockquote p.fuentes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Caja de autor al pie de cada artículo */
.author-box {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.author-box a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.author-box a:hover { text-decoration: underline; }

/* FOOTER */
.site-footer {
  background: var(--color-primary-dark);
  color: #cfe0ee;
  padding: 28px 0;
}

.footer-inner { font-size: 0.85rem; text-align: center; }

.footer-disclaimer {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto;
}

.footer-links { margin-top: 14px; }

.footer-links a { color: #cfe0ee; text-decoration: underline; }

/* BANNER DE CONSENTIMIENTO DE COOKIES (ver js/consent.js) */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(20, 30, 40, 0.12);
  padding: 18px 24px;
}

.cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cookie-banner-texto { flex: 1; min-width: 0; }

.cookie-banner-texto p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cookie-banner-titulo {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px !important;
}

.cookie-banner-texto a { color: var(--color-primary); font-weight: 600; }

/* Los dos botones tienen el mismo tamaño y están en la misma capa: rechazar cuesta
   exactamente lo mismo que aceptar, como exige la AEPD. */
.cookie-banner-botones {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner-botones .btn {
  padding: 10px 24px;
  font-size: 0.9rem;
  min-width: 120px;
  text-align: center;
}

/* Enlace del pie para volver a abrir el banner */
.cookie-reset {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #cfe0ee;
  text-decoration: underline;
  cursor: pointer;
}

.cookie-reset:hover { color: #fff; }

@media (max-width: 640px) {
  .cookie-banner { padding: 16px; }

  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cookie-banner-botones .btn { flex: 1; min-width: 0; }
}

/* ARTICLE PAGES */
.article-page { padding: 56px 0 80px; }

.article-page .container { max-width: 720px; }

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.back-link:hover { text-decoration: underline; }

.article-tag {
  display: inline-block;
  background: #e8f0f8;
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.article-page h1 { font-size: 1.9rem; }

.article-meta { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 32px; }

.article-body p { margin-bottom: 18px; }

.article-body h2 { font-size: 1.3rem; margin-top: 32px; }

.article-body ul,
.article-body ol { padding-left: 20px; }

.article-body li { margin-bottom: 8px; }

.article-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg);
  border-radius: 0 8px 8px 0;
  font-size: 1.05rem;
}

.article-body blockquote p { margin: 0; }

/* RESPONSIVE */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }

  .main-nav.open { display: flex; }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0 0 12px;
    min-width: 0;
  }

  .calc-grid { grid-template-columns: 1fr; }

  .hero h1 { font-size: 1.75rem; }
}