/* Oferta residencial · loaded after tokens.css + layout.css + funnel.css */

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

h1.headline {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.95; letter-spacing: -0.03em;
  margin: 0 0 24px; color: var(--ink); text-wrap: balance;
}
h1.headline em { font-style: italic; color: var(--teal-deep); }
h1.headline .yr { font-size: 0.45em; color: var(--muted); font-style: normal; letter-spacing: -0.01em; }

/* CHART */
.chart-wrap {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 24px; padding: 36px;
}
.chart-legend {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
  margin-bottom: 28px;
}
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; }
.legend-swatch.hoy { background: rgba(14,26,27,.18); }
.legend-swatch.enex { background: var(--teal); }
.chart-totals {
  margin-left: auto; display: flex; gap: 28px;
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.chart-totals b {
  color: var(--ink); font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  display: block; letter-spacing: -0.01em;
}
.chart-totals .save b { color: var(--teal-deep); }

.chart {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;
  align-items: end; height: 260px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.month { display: flex; gap: 3px; align-items: end; height: 100%; }
.bar { flex: 1; border-radius: 4px 4px 0 0; transition: opacity .2s; position: relative; }
.bar.hoy { background: rgba(14,26,27,.18); }
.bar.enex { background: var(--teal); }
.bar:hover { opacity: 0.85; }
.bar:hover::after {
  content: attr(data-tip); position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--white);
  font-family: var(--mono); font-size: 10px;
  padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; margin-bottom: 6px;
}
.chart-x {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;
  margin-top: 12px;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
}

/* TARIFA SELECTOR */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

.tariff-card {
  border-radius: 28px; padding: 36px;
  border: 2px solid var(--line); background: var(--white);
  cursor: pointer; transition: all .2s ease;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
}
.tariff-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.tariff-card.selected {
  border-color: var(--ink); background: var(--ink); color: var(--white);
  box-shadow: 0 24px 60px -20px rgba(31,138,143,.3);
}
.tariff-card.selected::before {
  content: ""; position: absolute; top: -40%; right: -20%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  opacity: 0.22; pointer-events: none;
}
.tariff-head { display: flex; justify-content: space-between; align-items: center; position: relative; }
.tariff-eyebrow {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--teal-deep);
}
.tariff-card.selected .tariff-eyebrow { color: var(--teal); }
.tariff-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tariff-card.selected .tariff-radio { border-color: var(--teal); background: var(--teal); }
.tariff-radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); opacity: 0; transition: opacity .15s;
}
.tariff-card.selected .tariff-radio::after { opacity: 1; }
.tariff-name {
  font-family: var(--serif); font-size: 32px; line-height: 1.1;
  margin: 0; font-weight: 400; letter-spacing: -0.01em;
  position: relative;
}
.tariff-name em { font-style: italic; color: var(--teal-deep); }
.tariff-card.selected .tariff-name em { color: var(--teal); }
.tariff-price { display: flex; align-items: baseline; gap: 8px; position: relative; }
.tariff-price .num {
  font-family: var(--serif); font-size: 48px; font-weight: 400; letter-spacing: -0.02em;
}
.tariff-card.selected .tariff-price .num { color: var(--teal); }
.tariff-price .unit {
  font-family: var(--mono); font-size: 12px;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.tariff-card.selected .tariff-price .unit { color: rgba(255,255,255,.6); }
.tariff-sub { font-size: 14px; color: var(--ink-2); margin: 0; position: relative; }
.tariff-card.selected .tariff-sub { color: rgba(255,255,255,.7); }
.tariff-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.tariff-list li {
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2);
}
.tariff-card.selected .tariff-list li { color: rgba(255,255,255,.85); }
.tariff-list svg { color: var(--teal-deep); flex-shrink: 0; }
.tariff-card.selected .tariff-list svg { color: var(--teal); }

/* DESGLOSE POR CONCEPTO (dentro de cada tariff-card) */
.tariff-breakdown {
  list-style: none; padding: 12px 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px dashed rgba(0,0,0,.12);
  border-bottom: 1px dashed rgba(0,0,0,.12);
  position: relative;
}
.tariff-card.selected .tariff-breakdown {
  border-top-color: rgba(255,255,255,.18);
  border-bottom-color: rgba(255,255,255,.18);
}
.tariff-breakdown li {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-2);
}
.tariff-card.selected .tariff-breakdown li { color: rgba(255,255,255,.78); }
.tariff-breakdown .bk { letter-spacing: 0.01em; }
.tariff-breakdown .bv {
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap;
}
.tariff-card.selected .tariff-breakdown .bv { color: rgba(255,255,255,.92); }

/* RANGO DE AHORRO INDEXADA */
.tariff-savings-range {
  margin: 0; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tariff-card.selected .tariff-savings-range { color: rgba(255,255,255,.78); }
.tariff-savings-range em {
  font-style: normal; font-weight: 600;
  color: var(--teal-deep); font-variant-numeric: tabular-nums;
}
.tariff-card.selected .tariff-savings-range em { color: var(--teal); }
.tariff-savings-range small {
  font-size: 11px; color: var(--muted);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
}

/* INLINE EDITING (summary card) */
.summary-card .edit-toggle {
  background: transparent; border: 0;
  color: var(--teal); cursor: pointer;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0 0 0 4px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(46,182,188,.4);
}
.summary-card .edit-toggle:hover { color: var(--white); }
.summary-card.is-editing .edit-toggle { color: var(--white); text-decoration-color: rgba(255,255,255,.5); }

.summary-rows .editable input {
  font: inherit;
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--white); background: transparent;
  border: 0; border-bottom: 1px dashed rgba(255,255,255,.18);
  padding: 0 2px; margin: 0;
  width: 4ch; text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: border-color .15s, color .15s;
}
.summary-rows .editable input:hover { border-bottom-color: rgba(46,182,188,.5); }
.summary-rows .editable input:focus {
  outline: 0;
  border-bottom-color: var(--teal); color: var(--teal);
}
.summary-rows .editable .unit {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--white);
}
.summary-rows .compare .editable .old {
  color: rgba(255,255,255,.7); font-family: var(--mono);
  font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0;
}
.summary-rows .compare .editable .old input {
  font-family: var(--mono); font-size: 14px;
  color: rgba(255,255,255,.7);
  font-weight: 400; width: 5ch;
}
.summary-rows .compare .editable .old .unit {
  font-family: var(--mono); font-size: 14px;
  color: rgba(255,255,255,.5);
}
.summary-rows .compare .editable .old input:focus { color: var(--teal); }

/* Editing mode: inputs become more obvious */
.summary-card.is-editing .editable input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(46,182,188,.4);
  border-radius: 6px; padding: 2px 6px;
}
.summary-card.is-editing .compare .editable .old input { width: 6ch; }

.summary-note {
  font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,.55);
  text-transform: none; letter-spacing: 0;
  margin: 18px 0 0; line-height: 1.5;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.summary-note b { color: var(--white); font-weight: 500; }
.summary-card.recalculated .summary-note { color: var(--teal); }
.summary-card.recalculated .summary-note b { color: var(--teal); }

/* Pulse the recalculated values briefly */
@keyframes flash {
  0%   { color: var(--white); }
  40%  { color: var(--teal); }
  100% { color: var(--teal); }
}
.summary-rows .new.flash { animation: flash .8s ease; }

/* In-page CTAs that keep the funnel moving */
.hero-cta-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 0 0 32px;
}
.hero-cta-row .btn-primary { padding: 18px 28px; font-size: 16px; }
.hero-cta-row .btn-primary svg { transition: transform .2s; }
.hero-cta-row .btn-primary:hover svg { transform: translateX(3px); }

.tariff-cta-row {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.tariff-cta-row .btn-primary {
  padding: 18px 30px; font-size: 16px;
}
.tariff-cta-row .btn-primary em {
  font-style: italic; color: var(--teal);
  font-weight: 500; margin: 0 4px;
}
.tariff-cta-row .btn-primary svg { transition: transform .2s; }
.tariff-cta-row .btn-primary:hover svg { transform: translateX(3px); }
.tariff-cta-hint {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); margin: 0;
}
.tariff-cta-hint b { color: var(--ink); font-weight: 500; }