/* =====================================================================
   Inversión — CSS scoped a .gd-page.inv-page
   Carga junto a:
   - soluciones-gestion-digital.css (vars · fonts · hero · compare-grid · contact-wrap)
   - soluciones-seo-tecnico.css (faq-list)

   Componentes específicos:
   - parallax foto + glass dark
   - tramo-grid (02/03 · tramos de inversión con rango)
   - budget-flow (04 · cómo se presupuesta)
   ===================================================================== */


/* ═══ HERO H1 · reducido ═══════════════════════════════════════════ */
.gd-page.inv-page .hero h1 {
  font-size: clamp(34px, 4.2vw, 56px);
}


/* ═══ FONDO · FOTO + GLASS DARK ════════════════════════════════════ */
.gd-page.inv-page {
  background-image: url('../img/pexels-tranmautritam-948050.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.gd-page.inv-page .aurora-mesh {
  position: absolute;
  inset: 0;
  background: rgba(28, 32, 36, 0.66);
  backdrop-filter: blur(4px) saturate(95%);
  -webkit-backdrop-filter: blur(4px) saturate(95%);
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
  animation: none;
}
.gd-page.inv-page > section,
.gd-page.inv-page .hero {
  position: relative;
  z-index: 1;
}


/* ═══ TÍTULOS BICOLOR + TEXTOS SUELTOS CLAROS ══════════════════════ */
.gd-page.inv-page .section-title .muted,
.gd-page.inv-page .hero h1 .muted {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}
.gd-page.inv-page .hero-meta { color: rgba(255, 255, 255, 0.6); }
.gd-page.inv-page .hero h1 { color: rgba(255, 255, 255, 0.97); }
.gd-page.inv-page .hero-summary { color: rgba(255, 255, 255, 0.78); }
.gd-page.inv-page .section-num { color: rgba(255, 255, 255, 0.55); }
.gd-page.inv-page .section-title { color: rgba(255, 255, 255, 0.97); }
.gd-page.inv-page .section-intro { color: rgba(255, 255, 255, 0.78); }

/* FAQ sobre glass · pregunta blanca, respuesta gris claro */
.gd-page.inv-page .faq-list { border-top-color: rgba(255, 255, 255, 0.35); }
.gd-page.inv-page .faq-item { border-bottom-color: rgba(255, 255, 255, 0.15); }
.gd-page.inv-page .faq-item summary { color: white; }
.gd-page.inv-page .faq-item summary::after { color: rgba(255, 255, 255, 0.55); }
.gd-page.inv-page .faq-item[open] summary::after { color: var(--accent); }
.gd-page.inv-page .faq-answer { color: rgba(255, 255, 255, 0.82); }


/* ═══ TRAMO GRID · 02 / 03 · TRAMOS DE INVERSIÓN ═══════════════════
   3 cards. La central destacada (recomendada). Cada una: tramo +
   nombre + alcance + rango/importe + lista de qué incluye. */
.gd-page.inv-page .tramo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 6 filas: num · name · scope · amount · note · list
     subgrid alinea cada fila entre cards hermanas, sin importar
     cuántas líneas tenga el texto de cada elemento. */
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: 16px;
  row-gap: 0;
  align-items: stretch;
}
.gd-page.inv-page .tramo {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px 32px;
  position: relative;
}
@supports not (grid-template-rows: subgrid) {
  .gd-page.inv-page .tramo { display: flex; flex-direction: column; }
  .gd-page.inv-page .tramo__scope { min-height: 4.4em; }
  .gd-page.inv-page .tramo__list { margin-top: auto; }
}
.gd-page.inv-page .tramo.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.gd-page.inv-page .tramo__badge {
  position: absolute;
  top: -11px;
  left: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  background: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
}
.gd-page.inv-page .tramo__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.gd-page.inv-page .tramo__name {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}
.gd-page.inv-page .tramo__scope {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 24px;
}
.gd-page.inv-page .tramo__amount {
  font-family: var(--sans);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  padding-bottom: 8px;
}
.gd-page.inv-page .tramo.is-featured .tramo__amount { color: var(--accent); }
.gd-page.inv-page .tramo__amount-unit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
}
.gd-page.inv-page .tramo__amount-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-2);
}
.gd-page.inv-page .tramo__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.gd-page.inv-page .tramo__item {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 11px 0 11px 20px;
  border-top: 1px solid var(--line-2);
  position: relative;
}
.gd-page.inv-page .tramo__item:first-child { border-top: none; }
.gd-page.inv-page .tramo__item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}


/* ═══ BUDGET FLOW · 04 · CÓMO SE PRESUPUESTA ═══════════════════════ */
.gd-page.inv-page .budget-flow {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.gd-page.inv-page .budget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.gd-page.inv-page .budget-cell {
  padding: 38px 36px;
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.gd-page.inv-page .budget-cell:nth-child(2n) { border-right: none; }
.gd-page.inv-page .budget-cell:nth-last-child(-n+2) { border-bottom: none; }
.gd-page.inv-page .budget-cell__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.gd-page.inv-page .budget-cell__title {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}
.gd-page.inv-page .budget-cell__desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.gd-page.inv-page .budget-cell__desc strong { color: var(--ink); font-weight: 500; }


/* ═══ RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .gd-page.inv-page .tramo-grid { grid-template-columns: 1fr; }
  .gd-page.inv-page .budget-grid { grid-template-columns: 1fr; }
  .gd-page.inv-page .budget-cell { border-right: none; border-bottom: 1px solid var(--line-2); }
  .gd-page.inv-page .budget-cell:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  .gd-page.inv-page .tramo { padding: 30px 26px; }
  .gd-page.inv-page .budget-cell { padding: 30px 26px; }
}