/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP FIXES — Cambios del diseñador
   TODO dentro de @media (min-width: 769px) para NO afectar mobile.
   Fuente: Cambios_Ecommerce_provisional_ETB.docx
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── Hide mobile-only elements on desktop ── */
  .nav-hamburger { display: none !important; }
  .mm-overlay, .mm-panel { display: none !important; }
  .home-mobile-only, .home-title-mobile, .home-mobile-subtitle { display: none !important; }
  .nav-links-mobile { display: none !important; }
  #mv-cards-dots { display: none !important; }
  .mv-chat-luz { display: none !important; }

  /* ── #12 FAQ: títulos bold 20px ── */
  .plans-faq-header {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  /* ── #13 Navbar: color inactivo Móviles → #0092BC ── */
  .nav-top-link.nav-mobile-link { color: #0092BC !important; }
  .nav-top-link.nav-mobile-link:hover { color: #0077A0 !important; }

  /* ── #25 Plan card name: 26px medium ── */
  .plan-card-name { font-size: 26px !important; font-weight: 500 !important; }

  /* ── #26 Plan card old price: 26px bold ── */
  .plan-card-old-price { font-size: 26px !important; font-weight: 700 !important; }

  /* ── #28 Features: gap menor ── */
  .plan-card-features { gap: 4px !important; }

  /* ── #30 Botón seleccionar: #0018FF ── */
  .plan-card-btn-outline { color: #0018FF !important; border-color: #0018FF !important; }
  .plan-card-btn-outline:hover,
  .plan-card-redesign.active .plan-card-btn-outline,
  .plan-card-redesign:hover .plan-card-btn-outline {
    background: #0018FF !important; color: #fff !important;
  }

  /* ── #22 Badge: 16px medium, auto-width ── */
  .plan-card-discount-badge { font-size: 16px !important; font-weight: 500 !important; width: auto !important; display: inline-flex !important; }
  /* ── #23 Badge icon: 13×13 ── */
  .plan-card-discount-badge svg, .plan-card-discount-badge img { width: 13px !important; height: 13px !important; }

  /* ── #31 Cards: mismo tamaño ── */
  .plan-card-redesign { width: 100% !important; height: auto !important; min-height: 380px; }

  /* ── #32 Texto términos: un solo gris ── */
  .plan-card-note { color: #878787 !important; }

  /* ── #33 Stepper: 42×42, 24px medium ── */
  .co-step { width: 42px !important; height: 42px !important; font-size: 24px !important; font-weight: 500 !important; }
  /* ── #34 Stepper: separación menor ── */
  .co-stepper { gap: 6px !important; }
  /* ── #35 Stepper: líneas 85×7px round ── */
  .co-line { width: 85px !important; height: 7px !important; border-radius: 999px !important; }

  /* ── #36 Siguiente: 24px ── */
  .fb-btn { font-size: 24px !important; }

  /* ── #37 Línea punteada: 3px, dash 13px, gap 13px ── */
  .s1-dashed {
    height: 3px !important;
    background: repeating-linear-gradient(to right, #0018ff 0, #0018ff 13px, transparent 13px, transparent 26px) !important;
    border-radius: 999px;
  }

  /* ── #48 Banner oculto ── */
  .s3-banner { display: none !important; }

  /* ── #15 Luz avatar oculto ── */
  .fb-avatar { display: flex !important; }

  /* ── #45 Título separación ── */
  .s3-back { margin-bottom: 16px !important; }
  .s3-subtitle { margin-bottom: 20px !important; }

  /* ── #50 Thanks: sin text-shadow ── */
  .ty-tagline { text-shadow: none !important; }
  /* ── #51 "creas": solo peso ── */
  .ty-tagline-cyan { color: #fff !important; font-weight: 900 !important; }

  /* ── #40 Step 2 inputs: 1.3px inactivo / 2.6px activo ── */
  .s2-input { border-width: 1.3px !important; border-color: #D9D9D9 !important; font-size: 20px !important; font-weight: 400 !important; }
  .s2-input:focus { border-width: 2.6px !important; border-color: #214780 !important; color: #214780 !important; }
  .s2-input:not(:placeholder-shown) { border-width: 2.6px !important; border-color: #214780 !important; color: #214780 !important; }
  .s2-input-wrap { border-width: 2.6px !important; }
  .s2-input-label { font-size: 16px !important; font-weight: 700 !important; }
  .s2-input-inner { font-size: 20px !important; }

  /* ── #16-17 Hero textos 24px ── */
  .plans-hero-subtitle { font-size: 24px !important; }
  .plans-hero-change-link { font-size: 24px !important; font-weight: 400 !important; }

  /* ── #18 Pill: 2.5px, 24px ── */
  .plans-hero-location-pill { border-width: 2.5px !important; font-size: 24px !important; }

  /* ── #19 Input radius 24px ── */
  .plans-hero-input-wrap { border-radius: 24px !important; }

  /* ── #38 Checkbox teal ── */
  .s1-accept input[type="checkbox"] {
    appearance: none !important; -webkit-appearance: none !important;
    width: 22px !important; height: 22px !important;
    border: 2px solid #0092BC !important; border-radius: 5px !important;
    background: #fff !important; cursor: pointer; position: relative; flex-shrink: 0; margin-top: 2px;
  }
  .s1-accept input[type="checkbox"]:checked { background: #0092BC !important; border-color: #0092BC !important; }
  .s1-accept input[type="checkbox"]:checked::after {
    content: ''; display: block; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg); position: absolute; top: 3px; left: 7px;
  }

  /* ── #46 Calendar stroke ── */
  .s3-cal-btn svg { stroke-width: 1.5px !important; }

  /* ── #47 Calendario centrado ── */
  .s3-sched-card { text-align: center !important; }
  .s3-date-row { justify-content: center !important; }
  .s3-slots { justify-content: center !important; }

  /* ── #6-7/#43 Spinner 70×70 ── */
  .validando-spinner {
    width: 70px !important; height: 70px !important;
    border: 4px solid #e8edf4 !important;
    border-top-color: #0092BC !important; border-right-color: #0092BC !important;
    border-bottom-color: transparent !important; border-left-color: transparent !important;
  }

  /* ── #10 WhatsApp btn radius 16px ── */
  .etb-footer a[aria-label="WhatsApp"],
  .checkout-footer a[aria-label="WhatsApp"] { border-radius: 16px !important; }

  /* ── Location Modal: 58px/20px, icons 32px, validar centered ── */
  .lm-select, .lm-input { height: 58px !important; border-width: 1.3px !important; font-size: 20px !important; }
  .lm-select:focus, .lm-input:focus { border-width: 2.6px !important; }
  .lm-input:not(:placeholder-shown) { border-width: 2.6px !important; }
  .lm-input::placeholder { font-size: 20px !important; }
  .lm-input-wrap { border-width: 2.6px !important; }
  .lm-input-label { font-size: 16px !important; font-weight: 700 !important; }
  .lm-input-inner { font-size: 20px !important; }
  .lm-input-inner::placeholder { font-size: 20px !important; }
  .lm-input-clear, .lm-input-clear img { width: 32px !important; height: 32px !important; }
  .lm-chevron { width: 32px !important; height: 32px !important; }
  .lm-btn-validate {
    width: auto !important; min-width: 200px; max-width: 320px;
    margin: 20px auto 0 !important; display: block !important;
    padding: 0 48px !important; height: 58px !important;
  }

} /* end @media (min-width: 769px) */

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT STEPPER — Global base styles (prevents broken display)
   ═══════════════════════════════════════════════════════════════════════ */
.co-stepper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px;
  padding: 32px 20px 8px;
}
.co-step {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex !important; justify-content: center; align-items: center;
  font: 600 24px/1 'Lexend', sans-serif;
  color: #878787; background: #e5e7eb;
  transition: all .3s; position: relative; z-index: 2;
  flex-shrink: 0;
}
.co-step.active { color: #fff; background: #214780; }
.co-step.done   { color: #fff; background: #0092BC; }
.co-line {
  width: 85px; height: 7px; border-radius: 999px;
  background: #e5e7eb; transition: background .3s;
  z-index: 1; flex-shrink: 0;
}
.co-line.done   { background: #0092BC; }
.co-line.active { background: #214780; }