/* style.css — FUENTE UNICA (single source of truth).
   Editar SOLO este archivo; se sirve directo (con brotli). NO recrear style.min.css.
   Reconciliado 2026-06-05 desde el style.min.css en produccion para no perder el look. */

@keyframes fadeIn {
  0% {
    opacity:0;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes slideInRight {
  0% {
    opacity:0;
    transform:translateX(20px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}

@keyframes slideInLeft {
  0% {
    opacity:0;
    transform:translateX(-20px)
  }
  to {
    opacity:1;
    transform:translateX(0)
  }
}

@keyframes floatPhone {
  0%,to {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-6px)
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes slideUp {
  0% {
    transform:translateY(100%)
  }
  to {
    transform:translateY(0)
  }
}

*,::after,::before {
  box-sizing:border-box;
  margin:0;
  padding:0
}

:root {
  --bg:#f5f5f5;
  --surface:#ffffff;
  --surface2:#ebebeb;
  --border:#d1d1d1;
  --ml-blue:#3483fa;
  --ml-blue-bg:#f0f6ff;
  --accent:#111827;
  --muted:#999999;
  --disabled:#ebebeb;
  --disabled-t:#b0b0b0;
  --green:#00a650;
  --blue:#3483fa;
  --text:#333333;
  --text2:#666666;
  --radius:6px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow:0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:0 2px 12px rgba(0,0,0,0.10);
  --transition:0.15s ease
}

body,html {
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Proxima Nova","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}

#app {
  min-height:100vh;
  flex-direction:column;
  padding:0 16px 56px
}

.screen {
  display:none;
  width:100%;
  max-width:640px;
  animation:fadeIn .3s cubic-bezier(.4,0,.2,1)
}

.screen.active {
  display:block
}

#app,.btn-back,.header {
  display:flex;
  align-items:center
}

.header {
  width:100%;
  max-width:640px;
  padding:18px 0 14px;
  gap:12px
}

.btn-back {
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:50%;
  min-width:44px;
  height:44px;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:var(--transition);
  font-size:20px;
  box-shadow:var(--shadow)
}

.btn-back:hover {
  background:var(--surface2);
  color:var(--text)
}

.progress-bar {
  flex:1;
  height:4px;
  background:var(--surface2);
  border-radius:99px;
  overflow:hidden
}

.progress-fill {
  height:100%;
  background:var(--ml-blue);
  border-radius:99px;
  transition:width .35s ease
}

.step-label {
  font-size:12px;
  color:var(--text2);
  white-space:nowrap;
  font-weight:500
}

.landing {
  padding-top:60px;
  text-align:center
}

.landing-logo-wrap {
  margin-bottom:32px;
  display:flex;
  justify-content:center
}

.landing-logo-img {
  height:140px;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.1))
}

.landing-tagline {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--green);
  font-weight:600;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:99px;
  padding:5px 14px;
  margin-bottom:22px
}

.landing h1 {
  font-size:clamp(24px,5vw,36px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:10px;
  letter-spacing:-.3px
}

.landing p {
  font-size:16px;
  color:var(--text2);
  margin-bottom:36px;
  line-height:1.5
}

.btn-primary,.form-group input {
  font-size:16px;
  transition:var(--transition)
}

.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ml-blue);
  color:#fff;
  font-weight:600;
  padding:14px 32px;
  border-radius:var(--radius-md);
  border:0;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(52,131,250,.3)
}

.btn-primary:hover {
  background:#2968c8;
  transform:scale(1.01)
}

.btn-primary:active {
  transform:scale(.99)
}

.btn-xl {
  padding:16px 44px;
  font-size:17px
}

.btn-block {
  width:100%;
  justify-content:center;
  margin-bottom:4px
}

.screen-title {
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
  margin-top:4px
}

.screen-subtitle {
  font-size:14px;
  color:var(--text2);
  margin-bottom:24px;
  line-height:1.5
}

.form-group {
  margin-bottom:14px
}

.form-group label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:6px
}

.form-group input {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:13px 14px;
  color:var(--text);
  outline:0
}

.form-group input:focus {
  border-color:var(--ml-blue);
  box-shadow:0 0 0 3px rgba(52,131,250,.15)
}

.form-group input::placeholder,.search-input::placeholder {
  color:var(--muted)
}

.form-note {
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px;
  line-height:1.5
}

.skip-link {
  color:var(--text2);
  text-decoration:underline;
  cursor:pointer;
  font-size:14px
}

.brand-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:8px
}

.brand-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:var(--transition);
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow)
}

.brand-card:hover {
  border-color:var(--ml-blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px)
}

.brand-card:active {
  transform:scale(.98)
}

.brand-logo-area {
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#fafafa;
  border-bottom:1px solid #f0f0f0;
  overflow:hidden
}

.brand-product-img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:8px;
  display:block;
  box-sizing:border-box
}

.brand-icon {
  height:40px;
  width:auto;
  object-fit:contain
}

.brand-icon-lg {
  height:52px
}

.brand-name {
  padding:10px 12px 14px;
  font-size:14px;
  font-weight:600
}

.series-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px
}

.series-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:var(--transition);
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow)
}

.series-card:hover:not(.disabled) {
  border-color:var(--ml-blue);
  box-shadow:var(--shadow-md)
}

.series-card:active:not(.disabled) {
  transform:scale(.98)
}

.series-card.disabled {
  cursor:not-allowed
}

.series-img-wrap {
  background:#f8f9fa;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px
}

.series-img {
  max-height:140px;
  max-width:100%;
  object-fit:contain;
  transition:transform .25s ease
}

.series-card:hover:not(.disabled) .series-img {
  transform:scale(1.05)
}

.series-img-fallback {
  width:50px;
  opacity:.15
}

.series-label {
  padding:9px 8px 13px;
  font-size:13px;
  font-weight:600;
  border-top:1px solid #f0f0f0
}

.tag-sin-stock {
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  margin-top:2px
}

.results-layout {
  display:flex;
  flex-direction:column;
  gap:0
}

.product-hero {
  width:100%;
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-top:8px
}

.product-hero-img {
  max-height:200px;
  max-width:180px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.1));
  animation:floatPhone 4s ease-in-out infinite;
  transition:opacity .3s ease,transform .3s ease
}

.product-hero-img.crossfade-out {
  opacity:0;
  transform:scale(.95)
}

.result-phone-svg {
  width:72px;
  opacity:.15
}

.product-title-block {
  padding:14px 0 0
}

.product-name {
  font-size:22px;
  font-weight:600;
  color:var(--text);
  line-height:1.3
}

.price-summary {
  display:none
}

.selector-section {
  padding:16px 0 4px
}

.selector-label {
  font-size:16px;
  font-weight:400;
  color:var(--text);
  margin-bottom:12px
}

.selector-label strong {
  font-weight:600
}

.cap-picker {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.cap-btn {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 20px;
  font-size:15px;
  font-weight:400;
  color:var(--text);
  cursor:pointer;
  transition:var(--transition);
  min-width:80px;
  text-align:center
}

.cap-btn:hover:not(.no-stock) {
  border-color:var(--ml-blue);
  color:var(--ml-blue)
}

.cap-btn.selected {
  border:2px solid var(--ml-blue);
  background:var(--ml-blue-bg);
  color:var(--ml-blue);
  font-weight:600
}

.cap-btn.no-stock {
  border:1px dashed #bbb;
  color:var(--disabled-t);
  background:0 0;
  cursor:not-allowed;
  opacity:.6
}

.color-picker-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}

.color-name-badge {
  font-weight:600;
  font-size:16px
}

.color-thumb {
  width:58px;
  height:70px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8f9fa;
  flex-shrink:0
}

.color-thumb:hover:not(.no-stock) {
  border-color:var(--ml-blue)
}

.color-thumb.selected {
  border:2px solid var(--ml-blue);
  box-shadow:0 0 0 1px var(--ml-blue)
}

.color-thumb.no-stock {
  opacity:.35;
  cursor:not-allowed
}

.color-thumb img {
  max-height:62px;
  max-width:52px;
  object-fit:contain
}

.color-dot {
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid transparent;
  transition:var(--transition);
  flex-shrink:0;
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.2)
}

.color-dot:hover:not(.no-stock) {
  transform:scale(1.08)
}

.color-dot.selected {
  border-color:var(--ml-blue);
  box-shadow:0 0 0 2px var(--ml-blue)
}

.color-dot.no-stock {
  opacity:.3;
  cursor:not-allowed
}

.color-chip {
  height:36px;
  padding:0 14px;
  border-radius:99px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center
}

.color-chip:hover:not(.no-stock) {
  border-color:var(--ml-blue);
  color:var(--ml-blue)
}

.color-chip.selected {
  border:2px solid var(--ml-blue);
  background:var(--ml-blue-bg);
  color:var(--ml-blue);
  font-weight:600
}

.color-chip.no-stock {
  opacity:.35;
  cursor:not-allowed;
  border-style:dashed
}

.grado-picker {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.grado-btn {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  min-width:110px;
  text-align:left
}

.grado-btn:hover:not(.no-stock) {
  border-color:var(--ml-blue)
}

.grado-btn.selected {
  border:2px solid var(--ml-blue);
  background:var(--ml-blue-bg)
}

.grado-btn.no-stock {
  border:1px dashed #bbb;
  color:var(--disabled-t);
  cursor:not-allowed;
  opacity:.55
}

.grado-label {
  font-size:14px;
  font-weight:400;
  color:var(--text)
}

.grado-btn.selected .grado-label,.grado-price {
  color:var(--ml-blue);
  font-weight:600
}

.grado-price {
  font-size:14px;
  color:var(--text)
}

.grado-btn.selected .grado-price,.grado-info-link {
  color:var(--ml-blue)
}

.grado-btn.no-stock .grado-label,.grado-btn.no-stock .grado-price {
  color:var(--disabled-t)
}

.grado-info-link {
  font-size:13px;
  cursor:pointer;
  margin-top:8px;
  display:inline-block;
  text-decoration:none
}

.grado-info-link:hover {
  text-decoration:underline
}

.price-block {
  padding:20px 0 12px
}

.price-main {
  font-size:42px;
  font-weight:300;
  letter-spacing:-1px;
  line-height:1;
  color:var(--text);
  margin-bottom:4px
}

.price-currency {
  font-size:24px;
  font-weight:300;
  vertical-align:super;
  margin-right:1px
}

.price-installments {
  font-size:15px;
  color:var(--green);
  margin-top:4px;
  font-weight:500
}

.payment-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--shadow)
}

.payment-card-title {
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text2);
  padding:12px 16px 10px;
  border-bottom:1px solid #f0f0f0;
  background:#fafafa
}

.pay-left,.pay-row {
  display:flex;
  align-items:center
}

.pay-row {
  justify-content:space-between;
  padding:12px 16px
}

.pay-left {
  gap:12px
}

.pay-icon {
  font-size:20px;
  width:28px;
  text-align:center;
  flex-shrink:0
}

.pay-label {
  font-size:14px;
  font-weight:500;
  color:var(--text)
}

.pay-sublabel {
  font-size:11px;
  color:var(--muted);
  margin-top:1px
}

.pay-price {
  font-size:15px;
  font-weight:600;
  white-space:nowrap
}

.pay-consultar {
  font-size:13px;
  font-weight:500;
  color:var(--ml-blue)
}

.pay-divider {
  height:1px;
  background:#f0f0f0;
  margin:0 16px
}

.pago-picker {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.pago-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  min-width:130px
}

.pago-btn:hover {
  border-color:var(--ml-blue)
}

.pago-btn.selected {
  border:2px solid var(--ml-blue);
  background:var(--ml-blue-bg)
}

.pago-btn-icon {
  font-size:18px;
  flex-shrink:0
}

.pago-btn-info {
  display:flex;
  flex-direction:column;
  gap:1px
}

.pago-btn-label {
  font-size:14px;
  font-weight:500;
  color:var(--text)
}

.pago-btn.selected .pago-btn-label {
  color:var(--ml-blue);
  font-weight:600
}

.pago-btn-sub {
  font-size:11px;
  color:var(--muted)
}

.price-label-top {
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text2);
  margin-bottom:4px
}

.result-empty {
  text-align:center;
  padding:48px 16px;
  color:var(--text2)
}

.result-empty .empty-icon {
  font-size:40px;
  margin-bottom:12px
}

.result-empty p {
  font-size:14px;
  line-height:1.6
}

.loading-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:64px 0;
  color:var(--text2);
  font-size:14px
}

.spinner {
  width:22px;
  height:22px;
  border:2.5px solid var(--border);
  border-top-color:var(--ml-blue);
  border-radius:50%;
  animation:spin .8s linear infinite
}

.error-msg {
  background:#fff3f3;
  border:1px solid #fcc;
  border-radius:var(--radius);
  padding:12px 14px;
  font-size:13px;
  color:#c00
}

.btn-restart,.btn-volver {
  cursor:pointer;
  align-items:center;
  transition:var(--transition)
}

.btn-restart {
  display:inline-flex;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  font-size:14px;
  padding:11px 22px;
  border-radius:var(--radius);
  margin-top:4px
}

.btn-restart:hover {
  border-color:var(--ml-blue);
  color:var(--ml-blue)
}

#bottom-nav {
  width:100%;
  max-width:640px;
  padding:14px 0 0;
  border-top:1px solid var(--border);
  margin-top:12px
}

.btn-volver {
  background:0 0;
  border:0;
  color:var(--ml-blue);
  font-size:15px;
  font-weight:500;
  padding:8px 0;
  display:flex;
  gap:4px
}

.btn-volver:hover {
  text-decoration:underline
}

@media (min-width:768px) {
  #app {
    padding:0 32px 64px
  }
  #bottom-nav,.header,.screen {
    max-width:100%
  }
  .brand-grid,.series-grid {
    grid-template-columns:repeat(3,1fr);
    gap:14px
  }
  .series-grid {
    gap:12px
  }
  .brand-logo-area {
    height:120px
  }
  .series-img-wrap {
    height:180px
  }
  .results-layout {
    display:grid;
    grid-template-columns:300px 1fr;
    gap:40px;
    align-items:start
  }
  .results-col-left {
    position:sticky;
    top:24px
  }
  .product-hero {
    min-height:300px
  }
  .product-hero-img {
    max-height:250px;
    max-width:220px
  }
  .product-name {
    font-size:20px
  }
  .price-summary {
    display:block;
    margin-top:12px
  }
  .price-summary-val {
    font-size:28px;
    font-weight:300;
    color:var(--text)
  }
  .price-main {
    font-size:36px
  }
  .cap-btn {
    padding:12px 24px;
    font-size:16px
  }
  .grado-btn {
    min-width:120px;
    padding:14px 18px
  }
  .color-thumb {
    width:64px;
    height:76px
  }
  .btn-back {
    min-width:48px;
    height:48px
  }
}

@media (min-width:1024px) {
  #app {
    padding:0 56px 80px;
    max-width:1200px;
    margin:0 auto
  }
  .brand-grid,.series-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .results-layout {
    grid-template-columns:340px 1fr;
    gap:56px
  }
  .product-hero {
    min-height:340px
  }
  .product-hero-img {
    max-height:280px;
    max-width:250px
  }
}

.badge-disponibilidad {
  display:inline-block;
  margin:12px 0;
  padding:8px 18px;
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.4
}

.badge-inmediata {
  background:#dcfce7;
  color:#15803d;
  border:1px solid #bbf7d0
}

.badge-pedido {
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #bfdbfe
}

.price-filter {
  margin-bottom:16px;
  padding:12px 16px;
  background:#f8fafc;
  border-radius:12px;
  border:1px solid #e2e8f0
}

.price-filter-presets {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px
}

.pf-btn {
  padding:6px 14px;
  border:1px solid #cbd5e1;
  border-radius:20px;
  background:#fff;
  color:#334155;
  font-size:.82rem;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap
}

.pf-btn.selected,.pf-btn:hover {
  border-color:#3483fa;
  color:#3483fa
}

.pf-btn.selected {
  background:#3483fa;
  color:#fff
}

.price-filter-custom {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap
}

.pf-label {
  font-size:.82rem;
  color:#64748b;
  font-weight:500
}

.pf-input {
  width:90px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:.85rem;
  background:#fff;
  color:#1e293b
}

.pf-input:focus {
  border-color:#3483fa;
  outline:0
}

.pf-sep {
  color:#94a3b8;
  font-size:.85rem
}

.pf-apply {
  padding:6px 16px;
  background:#3483fa;
  color:#fff;
  border:0;
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer
}

.pf-apply:hover {
  background:#2563eb
}

.series-card.disabled {
  opacity:.45;
  pointer-events:none;
  filter:grayscale(.8)
}

.series-card.disabled .series-label,.series-card.disabled .series-price-min {
  color:#94a3b8
}

.series-card.hidden-by-filter {
  display:none
}

.series-price-min {
  font-size:.78rem;
  color:#16a34a;
  font-weight:600;
  margin-top:2px
}

@media (max-width:500px) {
  .pf-btn {
    padding:5px 10px;
    font-size:.75rem
  }
  .pf-input {
    width:70px
  }
  .price-filter {
    padding:10px 12px
  }
}

.search-bar {
  margin-bottom:12px
}

.search-input {
  width:100%;
  padding:12px 16px 12px 40px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  font-size:15px;
  color:var(--text);
  background:var(--surface)url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")14px center no-repeat;
  transition:var(--transition);
  outline:0
}

.search-input:focus {
  border-color:var(--ml-blue);
  box-shadow:0 0 0 3px rgba(52,131,250,.12)
}

.series-badge {
  position:absolute;
  top:8px;
  right:8px;
  padding:3px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  z-index:1
}

.series-badge-popular {
  background:#fef3c7;
  color:#92400e;
  border:1px solid #fde68a
}

.series-badge-bestprice {
  background:#dcfce7;
  color:#166534;
  border:1px solid #bbf7d0
}

.series-card {
  position:relative
}

.compare-bar,.series-compare-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px
}

.series-compare-btn {
  position:absolute;
  top:8px;
  left:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition:var(--transition);
  z-index:2;
  color:transparent
}

.series-compare-btn.active,.series-compare-btn:hover {
  border-color:var(--ml-blue)
}

.series-compare-btn.active {
  background:var(--ml-blue);
  color:#fff
}

.compare-bar {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:var(--ml-blue);
  color:#fff;
  padding:12px 20px;
  gap:16px;
  font-weight:500;
  z-index:100;
  box-shadow:0-2px 12px rgba(0,0,0,.15);
  animation:slideUp .25s ease
}

.compare-btn-clear,.compare-btn-go {
  border-radius:var(--radius);
  cursor:pointer
}

.compare-btn-go {
  background:#fff;
  color:var(--ml-blue);
  border:0;
  padding:8px 20px;
  font-weight:600;
  font-size:14px
}

.compare-btn-clear {
  background:0 0;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  padding:8px 16px;
  font-size:13px
}

.compare-modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:fadeIn .2s ease
}

.compare-modal-inner {
  background:#fff;
  border-radius:var(--radius-lg);
  width:90%;
  max-width:800px;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.2)
}

.compare-modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border)
}

.compare-modal-header h2 {
  font-size:18px;
  font-weight:700
}

.compare-close {
  background:0 0;
  border:0;
  font-size:20px;
  cursor:pointer;
  color:var(--text2);
  padding:4px
}

.compare-body {
  display:grid;
  gap:0;
  padding:0
}

.compare-col {
  padding:16px;
  border-right:1px solid #f0f0f0;
  text-align:center
}

.compare-col:last-child {
  border-right:none
}

.compare-col img {
  max-height:120px;
  object-fit:contain;
  margin-bottom:8px
}

.compare-col h3 {
  font-size:14px;
  font-weight:600;
  margin-bottom:12px
}

.compare-row-label {
  font-size:11px;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:2px
}

.compare-row-val {
  font-size:15px;
  font-weight:500;
  margin-bottom:12px
}

.compare-row-price {
  font-size:20px;
  font-weight:600;
  color:var(--text)
}

.savings-badge {
  display:inline-block;
  padding:8px 18px;
  border-radius:20px;
  font-size:.85rem;
  font-weight:600;
  background:#fef3c7;
  color:#92400e;
  border:1px solid #fde68a;
  margin-bottom:8px
}

.series-card.hidden-by-search {
  display:none
}

@media (max-width:500px) {
  .compare-modal-inner {
    width:95%
  }
  .series-compare-btn {
    width:22px;
    height:22px;
    font-size:12px
  }
}

.brand-sub {
  display:block;
  font-size:13px;
  font-weight:600;
  color:#555;
  margin-top:4px
}

.brand-logo-area {
  flex-direction:column
}

.msi-subpicker {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
  width:100%
}

.msi-opt {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  min-width:90px;
  flex:1
}

.msi-opt:hover {
  border-color:var(--ml-blue)
}

.msi-opt.selected {
  border:2px solid var(--ml-blue);
  background:var(--ml-blue-bg)
}

.msi-opt-meses,.msi-opt-precio {
  font-size:13px;
  font-weight:600;
  color:var(--text)
}

.msi-opt.selected .msi-opt-meses,.msi-opt.selected .msi-opt-precio,.specs-toggle:hover {
  color:var(--ml-blue)
}

.msi-opt-precio {
  font-size:15px;
  font-weight:700
}

.msi-opt-precio small {
  font-size:11px;
  font-weight:400;
  color:var(--text2)
}

.msi-disclaimer {
  width:100%;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
  font-style:italic
}

.sin-tarjeta-opt {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  flex:1;
  min-width:140px
}

.sin-tarjeta-opt:hover {
  border-color:var(--st-color,var(--ml-blue));
  background:color-mix(in srgb,var(--st-color,var(--ml-blue)) 6%,white)
}

.sin-tarjeta-label {
  font-size:15px;
  font-weight:700;
  color:var(--st-color,var(--text))
}

.sin-tarjeta-link {
  font-size:13px;
  font-weight:500;
  color:var(--st-color,var(--ml-blue))
}

.trade-in-info {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:14px 16px;
  width:100%;
  background:linear-gradient(135deg,#f0f7ff 0%,#e8f4fd 100%);
  border:1px solid #d0e3f0;
  border-radius:var(--radius)
}

.trade-in-icon {
  font-size:28px;
  flex-shrink:0
}

.trade-in-info p {
  margin:0;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  line-height:1.4
}

.specs-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  transition:var(--transition)
}

.specs-toggle:hover {
  border-color:var(--ml-blue)
}

.specs-chevron {
  font-size:16px;
  transition:transform .2s
}

.specs-chevron.open {
  transform:rotate(180deg)
}

.specs-body,.specs-body td {
  border:1px solid var(--border)
}

.specs-body {
  margin-top:8px;
  padding:12px 14px;
  background:var(--surface);
  border-radius:var(--radius);
  font-size:13px;
  color:var(--text);
  line-height:1.6
}

.specs-body ul {
  padding-left:18px;
  margin:0 0 10px
}

.specs-body li {
  margin-bottom:4px
}

.specs-body h1,.specs-body h2,.specs-body h3 {
  font-size:14px;
  font-weight:600;
  margin:10px 0 6px
}

.specs-body table {
  width:100%;
  border-collapse:collapse;
  font-size:13px
}

.specs-body td {
  padding:5px 8px;
  vertical-align:top
}

.specs-body tr:nth-child(even) td {
  background:#f8f9fa
}

.specs-body td:first-child {
  font-weight:500;
  width:40%;
  color:var(--text2)
}

.specs-loading {
  text-align:center;
  color:var(--muted);
  padding:12px
}