/**
 * Ebre Transition — lienzo interactivo "30 km". Tokens de marca.
 */
.ebre-transition .et-box {
  background: rgb(var(--neutral-bg, 245 247 250));
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.5);
  border-radius: var(--radius-lg, 2rem);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .ebre-transition .et-box { padding: 2.5rem; } }

.ebre-transition .et-eyebrow { color: rgb(var(--brand-accent)); }
.ebre-transition .et-title { color: rgb(var(--brand-primary)); }

.ebre-transition .et-control {
  background: #fff;
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.6);
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.ebre-transition .et-end-label { color: rgb(var(--brand-accent)); }
.ebre-transition .et-end-label--delta { color: rgb(var(--brand-primary)); }
.ebre-transition .et-slider { width: 6rem; accent-color: rgb(var(--brand-accent)); cursor: pointer; }
@media (min-width: 768px) { .ebre-transition .et-slider { width: 8rem; } }

.ebre-transition .et-window {
  width: 100%;
  height: clamp(280px, 38vw, 350px);
  background: #fff;
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.3);
  border-radius: 1rem;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.06);
}

.ebre-transition .et-badge {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading, 'Barlow', sans-serif);
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.1);
}
.ebre-transition .et-badge--dist { background: rgb(var(--neutral-text-main, 40 40 40) / 0.8); color: #fff; backdrop-filter: blur(4px); }
.ebre-transition .et-badge--dist [data-et-distance] { color: rgb(var(--brand-accent)); }
.ebre-transition .et-badge--eco {
  background: rgb(255 255 255 / 0.95); color: rgb(var(--neutral-text-main, 40 40 40));
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.3); backdrop-filter: blur(4px);
}
.ebre-transition .et-badge--eco [data-et-ecosystem] { color: rgb(var(--brand-primary)); }

.ebre-transition .et-popup {
  width: 280px; max-width: calc(100% - 32px);
  background: rgb(255 255 255 / 0.95); backdrop-filter: blur(8px);
  padding: 1rem; border-radius: 1rem;
  border: 1px solid rgb(var(--neutral-border, 224 228 234) / 0.3);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
  opacity: 0; transform: translate(-50%, -95%) scale(0.95);
  transform-origin: bottom; transition: all .3s ease-out;
}
.ebre-transition .et-popup-icon { color: rgb(var(--brand-accent)); display: inline-flex; }
.ebre-transition .et-popup-icon .material-icons-outlined { font-size: 16px; }
.ebre-transition .et-popup-title { color: rgb(var(--brand-primary)); }
.ebre-transition .et-popup-text { color: rgb(var(--neutral-text-main, 40 40 40)); }
.ebre-transition .et-popup-explore { color: rgb(var(--neutral-text-muted, 107 114 128)); }
.ebre-transition .et-popup-cta { color: rgb(var(--brand-accent)); }
.ebre-transition .et-hint { color: rgb(var(--neutral-text-muted, 156 163 175)); }