/* usuario-generador.css */

:root {
  /* Animation-specific vars */
  --amarillo:        #f7b500;
  --amarillo-2:      #ffcf45;
  --verde:           #22c76f;
  --celeste:         #5ab7ff;
  --azul-produccion: #1d8fff;
  --naranja-red:     #ff8b38;
  --ug-card-bg:      #071a36;
  --ug-card-bg2:     #0c2550;
  --ug-sombra-azul:  0 22px 48px rgba(4,18,42,.24);
  --ug-radio:        22px;
}

/* ── HERO ─────────────────────────────────────────────── */
.ug-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(240,180,41,.16), transparent 28%),
    radial-gradient(circle at 92% 88%, rgba(90,183,255,.10), transparent 32%),
    linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--white);
  padding: 72px 32px 84px;
}

.ug-hero-text {
  max-width: 1340px;
  margin: 0 auto 38px;
}

.ug-vis-card {
  max-width: 1340px;
  margin: 0 auto;
}

.ug-vis-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 22px;
  align-items: stretch;
}

.ug-chart-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ug-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(240,180,41,.14);
  color: var(--gold);
  font-weight: 800;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.ug-hero h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  font-size: clamp(2.1rem, 4.5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 800;
}

.ug-hero p {
  color: rgba(255,255,255,.76);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 20px 0 0;
}

.ug-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.ug-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  font-size: .95rem;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 10px 24px rgba(240,180,41,.28);
}

.ug-btn-primary:hover {
  background: #f5c030;
  transform: translateY(-2px);
}

.ug-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .18s;
}

.ug-btn-outline:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-2px);
}

/* ── ENERGY CARD ──────────────────────────────────────── */
.energy-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(circle at 85% 88%, rgba(247,181,0,.18), transparent 26%),
    linear-gradient(180deg, var(--ug-card-bg2) 0%, var(--ug-card-bg) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--ug-sombra-azul);
  backdrop-filter: blur(6px);
}

.energy-card::before {
  content: "";
  position: absolute;
  inset: -110px auto auto -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,181,0,.20), transparent 70%);
  pointer-events: none;
}

.energy-card::after {
  content: "";
  position: absolute;
  inset: auto -130px -140px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90,183,255,.15), transparent 68%);
  pointer-events: none;
}

.energy-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 auto 22px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.energy-chip,
.energy-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
}

.energy-chip {
  color: var(--amarillo-2);
  background: rgba(247,181,0,.16);
  border: 1px solid rgba(247,181,0,.24);
}

.energy-status {
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 1rem;
  padding: 10px 20px;
  transition: .25s ease;
}

.energy-status.injecting {
  color: #d8ffee;
  background: rgba(34,199,111,.22);
  border-color: rgba(34,199,111,.42);
  box-shadow: 0 0 26px rgba(34,199,111,.20);
}

.energy-status.importing {
  color: #fff1db;
  background: rgba(255,139,56,.22);
  border-color: rgba(255,139,56,.42);
  box-shadow: 0 0 26px rgba(255,139,56,.18);
}

/* ── SVG WRAP ─────────────────────────────────────────── */
.energy-svg-wrap,
.chart-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 14% 18%, rgba(247,181,0,.12), transparent 28%),
    radial-gradient(circle at 86% 26%, rgba(34,199,111,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.energy-svg-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 14px;
  min-height: 100%;
}

.energy-svg-wrap > .energy-svg {
  flex: 1 1 auto;
  align-self: stretch;
}

.diagram-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}

.diagram-notice-icon {
  font-size: 1.2rem;
  line-height: 1.2;
  filter: drop-shadow(0 0 8px rgba(90,183,255,.45));
  flex-shrink: 0;
}

.diagram-notice p {
  margin: 0;
  color: rgba(227,239,255,.86);
  font-size: .88rem;
  line-height: 1.55;
  font-weight: 500;
}

.energy-svg,
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── SVG STYLES ───────────────────────────────────────── */
.svg-label {
  font-size: 22px;
  font-weight: 900;
  fill: #eaf2ff;
  letter-spacing: -.02em;
}

.svg-small {
  font-size: 14px;
  font-weight: 750;
  fill: rgba(227,239,255,.74);
}

.svg-outside-label {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.25));
  pointer-events: none;
}

.svg-label-group text { text-anchor: middle; }

.svg-device {
  fill: rgba(7,21,45,.94);
  stroke: rgba(255,255,255,.18);
  stroke-width: 2;
}

.svg-device-main {
  stroke: rgba(247,181,0,.42);
  filter: drop-shadow(0 0 10px rgba(247,181,0,.10));
}

.svg-port         { fill: var(--amarillo);   filter: drop-shadow(0 0 8px rgba(247,181,0,.75)); }
.svg-port-green   { fill: var(--verde);      filter: drop-shadow(0 0 8px rgba(34,199,111,.75)); }
.svg-port-orange  { fill: var(--naranja-red); filter: drop-shadow(0 0 8px rgba(255,139,56,.75)); }

.svg-energy-line {
  fill: none;
  stroke: rgba(255,255,255,.22);
  stroke-width: 9;
  stroke-linecap: round;
}

.svg-energy-hot {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 14 20;
  opacity: 0;
  transition: opacity .25s ease;
  animation: dashFlow 1.1s linear infinite;
}

.svg-energy-hot.on       { opacity: 1; }
.svg-energy-solar        { stroke: rgba(247,181,0,.88); }
.svg-energy-ac           { stroke: rgba(90,183,255,.92); }
.svg-energy-injection    { stroke: rgba(34,199,111,.92); }
.svg-energy-import       { stroke: rgba(255,139,56,.96); }

.svg-grid-ring {
  opacity: .14;
  transition: opacity .25s ease, stroke .25s ease;
}

.svg-grid-ring.injecting {
  opacity: 1;
  stroke: rgba(34,199,111,.78);
  filter: drop-shadow(0 0 8px rgba(34,199,111,.34));
}

.svg-grid-ring.importing {
  opacity: 1;
  stroke: rgba(255,139,56,.88);
  filter: drop-shadow(0 0 8px rgba(255,139,56,.28));
}

.svg-split-node {
  fill: var(--celeste);
  filter: drop-shadow(0 0 8px rgba(90,183,255,.78));
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 1.5s infinite ease-in-out;
  transition: opacity .25s ease, fill .25s ease;
}

.svg-split-node.offline {
  opacity: .22;
  animation: none;
}

.svg-split-node.importing {
  fill: var(--naranja-red);
  filter: drop-shadow(0 0 8px rgba(255,139,56,.72));
  opacity: 1;
}

.panel-cell {
  fill: rgba(255,255,255,.15);
  transition: fill .2s ease, opacity .2s ease, filter .2s ease;
}

.panel-cell.on  { fill: rgba(247,181,0,.96); filter: drop-shadow(0 0 6px rgba(247,181,0,.62)); }
.panel-cell.off { opacity: .25; }

.svg-sun       { filter: drop-shadow(0 0 10px rgba(247,181,0,.35)); transition: opacity .25s ease; }
.moon-group    { transition: opacity .25s ease; }
.horizon-ground { fill: rgba(7,21,45,.82); }
.horizon-line  { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 3; stroke-linecap: round; }

.inverter-symbol-frame {
  fill: rgba(255,255,255,.055);
  stroke: rgba(255,255,255,.20);
  stroke-width: 1.7;
}

.inverter-symbol-diagonal {
  fill: none;
  stroke: rgba(227,239,255,.78);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.inverter-dc-line,
.inverter-ac-wave {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .25s ease;
}

.inverter-dc-line {
  stroke: rgba(247,181,0,.92);
  stroke-width: 2.5;
  stroke-dasharray: 7 8;
  animation: inverterDcFlow 1.1s linear infinite;
}

.inverter-ac-wave {
  stroke: rgba(90,183,255,.95);
  stroke-width: 3;
  stroke-dasharray: 7 9;
  animation: inverterAcFlow 1.15s linear infinite;
}

.inverter-mini-label {
  font-size: 9px;
  font-weight: 900;
  fill: rgba(227,239,255,.66);
  letter-spacing: .08em;
}

.inverter-symbol-dot {
  fill: var(--amarillo);
  filter: drop-shadow(0 0 7px rgba(247,181,0,.78));
  transform-box: fill-box;
  transform-origin: center;
  animation: inverterDotBlink 1.35s infinite ease-in-out;
  transition: opacity .25s ease;
}

.inverter-symbol-dot.dot-2 { animation-delay: .22s; }
.inverter-symbol-dot.dot-3 { animation-delay: .44s; }
.inverter-group.offline    { opacity: .38; }

/* ── CHART ────────────────────────────────────────────── */
.chart-wrap {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
  flex: 1;
}

.chart-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 6px;
}

.chart-title {
  margin: 0;
  color: #eef4ff;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #dce9fb;
  font-size: .92rem;
  font-weight: 600;
}

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

.chart-svg { padding: 4px 6px 2px; }

.chart-grid-line  { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.chart-axis-label { fill: rgba(227,239,255,.62); font-size: 13px; font-weight: 700; }

.chart-prod-area      { fill: rgba(29,143,255,.26); }
.chart-self-area      { fill: rgba(90,183,255,.54); }
.chart-inj-area       { fill: rgba(34,199,111,.40); }
.chart-grid-cons-area { fill: rgba(255,139,56,.36); }
.chart-prod-line      { fill: none; stroke: var(--azul-produccion); stroke-width: 4; filter: drop-shadow(0 0 4px rgba(29,143,255,.45)); }
.chart-cons-line      { fill: none; stroke: var(--naranja-red);     stroke-width: 4; filter: drop-shadow(0 0 4px rgba(255,139,56,.45)); }
.chart-cursor         { stroke: rgba(255,255,255,.92); stroke-width: 2.4; stroke-dasharray: 7 7; }
.chart-dot-prod       { fill: var(--azul-produccion); stroke: rgba(7,21,45,.65); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(90,183,255,.85)); }
.chart-dot-cons       { fill: var(--naranja-red);     stroke: rgba(7,21,45,.65); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255,139,56,.85)); }

.chart-region-label       { fill: rgba(255,255,255,.84); font-size: 18px; font-weight: 900; text-anchor: middle; letter-spacing: .01em; }
.chart-region-label.small { font-size: 13px; font-weight: 800; fill: rgba(255,255,255,.70); }

.chart-axis-yvalue { fill: rgba(227,239,255,.58); font-size: 12px; font-weight: 700; }
.chart-axis-title  { fill: rgba(227,239,255,.62); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.chart-floating-box   { fill: rgba(7,21,45,.94); stroke: rgba(247,181,0,.34); stroke-width: 1.4; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.chart-floating-title { fill: rgba(227,239,255,.60); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chart-floating-label { fill: #f7faff; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.chart-floating-power { fill: var(--amarillo-2); font-size: 13px; font-weight: 800; letter-spacing: .01em; }

.chart-fb-dot           { stroke: rgba(7,21,45,.6); stroke-width: 1.5; }
.chart-fb-dot.dot-prod  { fill: var(--azul-produccion); filter: drop-shadow(0 0 7px rgba(29,143,255,.8)); }
.chart-fb-dot.dot-inj   { fill: var(--verde);          filter: drop-shadow(0 0 7px rgba(34,199,111,.8)); }
.chart-fb-dot.dot-imp   { fill: var(--naranja-red);    filter: drop-shadow(0 0 7px rgba(255,139,56,.8)); }

/* ── CONTROLS ─────────────────────────────────────────── */
.ug-anim-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.test-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .2s ease;
}

.test-btn:hover {
  background: rgba(247,181,0,.20);
  border-color: rgba(247,181,0,.48);
  color: var(--amarillo-2);
  transform: translateY(-1px);
}

.range-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 0;
}

.range-wrap label {
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--amarillo);
  cursor: pointer;
  height: 6px;
}

/* ── FOOTER CARD ──────────────────────────────────────── */
.energy-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.legend-item {
  padding: 14px 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.legend-item:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-2px);
}

.legend-item .legend-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}

.legend-item strong {
  color: #fff;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.legend-item p {
  margin: 0;
  color: rgba(227,239,255,.66);
  font-size: .82rem;
  line-height: 1.5;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(7,21,45,.4), 0 0 8px currentColor;
}

.dot-yellow { background: var(--amarillo);    color: rgba(247,181,0,.55); }
.dot-blue   { background: var(--celeste);     color: rgba(90,183,255,.55); }
.dot-green  { background: var(--verde);       color: rgba(34,199,111,.55); }
.dot-orange { background: var(--naranja-red); color: rgba(255,139,56,.55); }

.energy-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 10% 20%, rgba(247,181,0,.16), transparent 55%),
    linear-gradient(135deg, rgba(247,181,0,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(247,181,0,.28);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.info-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(247,181,0,.55));
  flex-shrink: 0;
}

.energy-info-card p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: .92rem;
  line-height: 1.55;
  font-weight: 500;
}

/* ── PAGE SECTIONS ────────────────────────────────────── */
.ug-section      { padding: 70px 32px; }
.ug-section-soft { background: #f5f6f8; }
.ug-wrap         { max-width: 1300px; margin: 0 auto; }

.ug-section-head          { max-width: 820px; margin-bottom: 36px; }
.ug-section-head h2       { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05; color: var(--navy-900); font-weight: 800; }
.ug-section-head p        { margin: 14px 0 0; color: var(--muted); font-size: 1.02rem; }

.ug-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ug-card    { background: var(--white); border: 1px solid var(--border); border-radius: var(--ug-radio); padding: 24px; box-shadow: 0 6px 22px rgba(0,0,0,.055); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ug-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.11); border-color: rgba(240,180,41,.45); }
.ug-icon    { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-light); font-size: 1.5rem; margin-bottom: 14px; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; }
.ug-card:hover .ug-icon { transform: scale(1.14) rotate(-4deg); background: #fde68a; box-shadow: 0 6px 18px rgba(240,180,41,.28); }
.ug-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 9px; font-size: 1.12rem; letter-spacing: -.02em; color: var(--navy-900); }
.ug-card p  { margin: 0; color: var(--muted); font-size: .95rem; }

.ug-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: paso; }

.ug-step         { counter-increment: paso; position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--ug-radio); padding: 24px; min-height: 220px; box-shadow: 0 6px 22px rgba(0,0,0,.055); opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform 1s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease; }
.ug-step.is-visible { opacity: 1; transform: translateY(0); }
.ug-step::before { content: counter(paso); width: 42px; height: 42px; border-radius: 50%; background: var(--navy-900); color: var(--gold); display: grid; place-items: center; font-weight: 900; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; margin-bottom: 16px; transform: scale(.6); transition: transform .65s cubic-bezier(.34,1.56,.64,1); }
.ug-step.is-visible::before { transform: scale(1); }
.ug-step h3      { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 9px; font-size: 1.05rem; color: var(--navy-900); }
.ug-step p       { margin: 0; color: var(--muted); font-size: .93rem; }

.ug-notice               { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 24px; background: var(--navy-900); color: var(--white); border-radius: 22px; margin-top: 24px; }
.ug-notice strong        { color: var(--gold); }
.ug-notice p             { margin: 0; color: rgba(255,255,255,.76); font-size: .95rem; }
.ug-notice-icon          { font-size: 1.9rem; }

.ug-compare              { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.ug-compare-card         { border-radius: 26px; padding: 28px; transition: transform .24s ease, box-shadow .24s ease; }
.ug-compare-card.good    { background: linear-gradient(135deg, #fff9e8, var(--white)); border: 1px solid rgba(240,180,41,.4); }
.ug-compare-card.warn    { background: linear-gradient(135deg, #f6f6f6, var(--white)); border: 1px solid rgba(0,0,0,.10); }
.ug-compare-card.good:hover { transform: translateY(-6px); box-shadow: 0 22px 52px rgba(240,180,41,.22); }
.ug-compare-card.warn:hover { transform: translateY(-6px); box-shadow: 0 22px 52px rgba(0,0,0,.10); }
.ug-compare-card h3      { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; margin: 0 0 10px; letter-spacing: -.03em; color: var(--navy-900); }
.ug-compare-card p       { color: var(--muted); font-size: .95rem; }

.ug-checklist    { display: grid; gap: 9px; margin-top: 16px; padding: 0; list-style: none; }
.ug-checklist li { display: flex; gap: 9px; color: var(--muted); font-size: .93rem; }
.ug-checklist li::before { content: "✓"; color: var(--verde); font-weight: 900; flex-shrink: 0; }

.ug-faq               { display: grid; gap: 11px; }
.ug-faq details       { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.ug-faq summary       { cursor: pointer; font-weight: 700; list-style: none; color: var(--navy-900); font-size: .98rem; }
.ug-faq summary::-webkit-details-marker { display: none; }
.ug-faq details p     { margin: 11px 0 0; color: var(--muted); font-size: .93rem; }

.ug-source-box    { border: 1px solid var(--border); background: var(--white); border-radius: 20px; padding: 24px; }
.ug-source-box h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; color: var(--navy-900); margin: 0 0 6px; }
.ug-source-box p  { color: var(--muted); }
.ug-source-box ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }
.ug-source-box a  { color: var(--gold-dim); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.ug-cta    { background: radial-gradient(circle at 85% 15%, rgba(240,180,41,.38), transparent 30%), linear-gradient(135deg, var(--navy-900), var(--navy-800)); color: var(--white); border-radius: 30px; padding: 42px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; overflow: hidden; }
.ug-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.8rem); letter-spacing: -.05em; line-height: 1.05; }
.ug-cta p  { margin: 12px 0 0; color: rgba(255,255,255,.72); max-width: 680px; font-size: .98rem; }

/* ── ANIMATIONS ───────────────────────────────────────── */
@keyframes dashFlow        { to { stroke-dashoffset: -60; } }
@keyframes inverterDcFlow  { to { stroke-dashoffset: -30; } }
@keyframes inverterAcFlow  { to { stroke-dashoffset: -32; } }
@keyframes inverterDotBlink { 0%,100% { opacity:.35; transform:scale(1);    } 50% { opacity:1; transform:scale(1.18); } }
@keyframes nodePulse        { 0%,100% { transform:scale(1);    opacity:.85; } 50% { transform:scale(1.18); opacity:1; } }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .energy-footer { grid-template-columns: repeat(2, 1fr); }
  .energy-info-card { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .ug-vis-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .energy-svg-wrap { padding: 18px; }
}

@media (max-width: 960px) {
  .ug-grid-3, .ug-timeline, .ug-compare, .ug-cta { grid-template-columns: 1fr; }
  .chart-titlebar { padding: 14px 16px 4px; }
  .energy-head { gap: 4px; padding: 5px; }
  .energy-chip, .energy-status { font-size: .88rem; padding: 8px 14px; min-height: 36px; }
  .energy-status { font-size: .94rem; padding: 9px 16px; }
}

@media (max-width: 640px) {
  .ug-hero            { padding: 50px 18px 60px; }
  .ug-section         { padding: 50px 18px; }
  .ug-hero-actions    { flex-direction: column; }
  .ug-btn-primary,
  .ug-btn-outline     { width: 100%; justify-content: center; }
  .ug-cta             { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 22px; }
  .energy-card        { border-radius: 24px; padding: 18px; }
  .energy-svg-wrap    { padding: 12px; }
  .test-btn           { flex: 1 1 auto; }
  .range-wrap         { min-width: 100%; }
  .ug-anim-controls   { padding: 12px 14px; }
  .chart-titlebar     { flex-direction: column; align-items: flex-start; }
  .energy-footer      { grid-template-columns: 1fr; }
}