/* ═══════════════════════════════════════════════════════════════════════
   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;
    /* Fix hover bug: button needs border-radius to match container so hover bg is clipped */
    border-radius: 20px !important;
  }
  /* When panel is open: top corners stay rounded, bottom corners flat */
  .plans-faq-item.active .plans-faq-header {
    border-radius: 20px 20px 0 0 !important;
  }
  /* Restore overflow:hidden on item so hover bg is clipped at border-radius.
     Overrides the overflow:visible!important in app.css */
  .plans-faq-item {
    overflow: hidden !important;
  }
  /* #plans-faq-accordion uses 12px radius */
  #plans-faq-accordion .plans-faq-item { overflow: hidden !important; border-radius: 12px !important; }
  #plans-faq-accordion .plans-faq-header { border-radius: 12px !important; }
  #plans-faq-accordion .plans-faq-item.active .plans-faq-header { border-radius: 12px 12px 0 0 !important; }
  /* Home FAQ .faq-card / .faq-trigger */
  .faq-trigger { border-radius: 16px !important; }
  .faq-card .faq-panel.open ~ .faq-trigger,
  .faq-card:has(.faq-panel.open) .faq-trigger { border-radius: 16px 16px 0 0 !important; }
  .faq-card { overflow: hidden !important; }

  /* ── #13 Navbar: color inactivo Móviles → #0092BC ── */
  .nav-top-link.nav-mobile-link:not(.active) { color: #0092BC !important; font-weight: 400 !important; }
  .nav-top-link.nav-mobile-link:not(.active):hover { color: #214780 !important; font-weight: 700 !important; }

  /* ── PP-1 Header pixel-perfect (Figma 9616:2049) ──
     border-bottom #DBDBDB + drop-shadow exacto Figma */
  .main-nav {
    border-bottom: 1px solid #DBDBDB;
    box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.06);
    background: #fff;
  }

  /* ── PP-3 §1 Hero Hogar pixel-perfect (Figma 9616:1890) ──
     Section bg #F8F8F9, padding 30px, title 48px Lexend Bold #214780 */
  body.page-home [data-home-section="planes"] {
    background: #F8F8F9 !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  body.page-home [data-home-section="planes"] .section-title,
  body.page-home [data-home-section="planes"] .home-title-desktop {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
    text-align: center !important;
    max-width: 842px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page-home [data-home-section="planes"] .section-subtitle {
    font: 400 18px/1.4 'Lexend', sans-serif !important;
    color: #6E6E73 !important;
    text-align: center !important;
    margin-top: 12px !important;
  }

  /* ── PP-5 §2 Móvil Conéctate (Figma 9616:1913) ──
     bg #F8F8F9, title 48px #214780, subtitle 20px #515151 */
  body.page-home [data-home-section="moviles"] {
    background: #F8F8F9 !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  body.page-home [data-home-section="moviles"] .section-title {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
    text-align: center !important;
    max-width: 842px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page-home [data-home-section="moviles"] .section-subtitle {
    font: 400 20px/1 'Lexend', sans-serif !important;
    color: #515151 !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* ── PP-10 Plans hogar Plan Cards (Figma 9616:2387/2419/2451) ──
     Tokens exactos: padding 26, rounded 13, shadow 0 5.2px 10.4px rgba(0,0,0,.1) */
  body.page-plans .plan-card-redesign {
    background: #fff !important;
    padding: 26px !important;
    border-radius: 13px !important;
    box-shadow: 0 5.2px 10.4px rgba(0,0,0,0.1) !important;
  }
  body.page-plans .plan-card-discount-badge {
    background: #0018FF !important;
    padding: 6.5px 13px !important;
    border-radius: 6.5px !important;
    gap: 10.4px !important;
    font: 500 16px/1 'Lexend Deca', sans-serif !important;
    color: #fff !important;
  }
  body.page-plans .plan-card-name {
    font: 500 26px/0.75 'Lexend', sans-serif !important;
    color: #0092BC !important;
  }
  body.page-plans .plan-card-old-price {
    font: 700 26px/1 'Lexend', sans-serif !important;
    color: #737373 !important;
    text-decoration: line-through !important;
  }
  body.page-plans .plan-card-price {
    font: 700 62px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-plans .plan-card-price-unit {
    font: 400 31.2px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-plans .plan-card-feature img {
    width: 32px !important;
    height: 32px !important;
  }
  body.page-plans .plan-card-feature span {
    font: 500 18.2px/1.25 'Lexend Deca', sans-serif !important;
    color: #737373 !important;
  }
  body.page-plans .plan-card-btn-outline {
    border: 2.6px solid #0018FF !important;
    border-radius: 49.4px !important;
    padding: 13px 26px !important;
    font: 600 32px/1 'Lexend Deca', sans-serif !important;
    color: #0018FF !important;
    background: transparent !important;
    width: 100% !important;
  }
  body.page-plans .plan-card-note {
    font: 300 15.6px/1.3 'Lexend', sans-serif !important;
    color: #737373 !important;
    text-align: center !important;
  }

  /* ── PP-11 Plans hogar no-address (Figma 9616:2731 "Pásate a ETB") ──
     Title 48px Lexend Bold. Subtitle 16px Regular */
  body.page-plans .plans-hero-title {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #fff !important;
  }
  body.page-plans .plans-hero-subtitle {
    font: 400 16px/1 'Lexend', sans-serif !important;
    color: #fff !important;
  }
  /* "Antes de comenzar" en cards servicios 2 (9616:2724 — 453x80, ~32-36px line 1.1) */
  body.page-plans .plans-no-addr-section h2 {
    font: 700 36px/1.1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* removed: consolidated into Plan Cards 1.2 block below */

  /* ── PP-13..18 Checkout Stepper pixel-perfect (Figma 9616:293) ──
     Circles 52×52 (was 42), font 32px (was 24), lines 85×7 (current OK) */
  .co-step { width: 52px !important; height: 52px !important; font-size: 32px !important; font-weight: 700 !important; }
  .co-stepper { gap: 6px !important; }
  .co-line { width: 85px !important; height: 7px !important; border-radius: 999px !important; }

  /* ── PP-13..18 Checkout typography pixel-perfect ──
     "Resumen de tu plan" Figma 9616:311 (484x48 → Lexend Bold 48px)
     "Tus Servicios" Figma 9616:330 (321x36 → 36px Bold #214780)
     Total Figma 9616:349 (280x48 → 48px Bold)
     Service items 25px
     Siguiente Figma 9616:376 (115x30 → 30px) */
  body.page-checkout .s1-title {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s1-subs-title {
    font: 700 36px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s1-total-lbl {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s1-total-val {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  .fb-btn { font-size: 30px !important; }

  /* ── PP-14 Checkout Step 2 (Figma 9616:553) ──
     Title "Cuéntanos más sobre ti" 576x48 → 48px Bold #214780
     Inputs height 73px, placeholder 25px Lexend Regular
     "Validar" button 412x70 → 30px Bold */
  body.page-checkout .s2-title {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s2-input,
  body.page-checkout .s2-select {
    height: 73px !important;
    font: 400 20px/1 'Lexend', sans-serif !important;
    padding: 23px 25px !important;
  }
  body.page-checkout .s2-input::placeholder { font-size: 20px !important; }
  /* Floating label email — Figma 9616:563: Lexend Deca Bold 14px #214780 */
  body.page-checkout .s2-input-label {
    font: 700 14px/1 'Lexend Deca', sans-serif !important;
    color: #214780 !important;
    margin: 0 0 4px !important;
  }
  /* Inner input del wrap (email): borderless 20px sin alterar height/padding del wrap */
  body.page-checkout .s2-input-inner {
    height: auto !important;
    padding: 0 !important;
    font: 400 20px/1 'Lexend Deca', sans-serif !important;
    color: #214780 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ── PP-15 Checkout Step 3 (Figma 9616:1619) ──
     Title "Elige el momento de tu conexión" 803x48 → 48px Bold #214780
     Subtitle "Déjanos saber tu disponibilidad" 599x36 → 36px Light/Regular
     "Agendar" / "Descargar mi contrato" buttons 30px Bold */
  body.page-checkout .s3-title {
    font: 700 48px/1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s3-subtitle {
    font: 400 36px/1.1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }
  body.page-checkout .s3-addr-title {
    font: 700 26px/1.1 'Lexend', sans-serif !important;
    color: #214780 !important;
  }

  /* ── PP-16/17/18 LTE/Móvil checkout — preservar inline color #0092BC ──
     Las páginas FIJA y LTE comparten classes pero LTE setea inline color cyan.
     Estos selectores de atributo dejan que el inline LTE gane sobre nuestros !important. */
  body.page-checkout .s1-subs-title[style*="0092BC"],
  body.page-checkout .s1-total-lbl[style*="0092BC"] {
    color: #0092BC !important;
  }
  /* LTE Total: respeta inline 28px/700 (Figma LTE usa total más pequeño que FIJA) */
  body.page-checkout .s1-total-lbl[style*="font-size:28px"] {
    font-size: 28px !important;
    font-weight: 700 !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; }

  /* ── Carrusel Planes y Conexión: imágenes completas sin recorte ── */
  /* Slot center 635×400, laterales 478×300. La imagen DEBE llenar el
     contenedor (width/height 100%) — sin esto el browser usa los atributos
     width/height intrínsecos del <img> (630×400) y la imagen overflowea el
     contenedor lateral 478×300 mostrando solo un fragmento recortado. */
  #planes-carousel .planes-slide-img,
  #conexion-carousel .planes-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  /* Slides laterales: mejor calidad de render al escalar */
  .carousel-slide.left,
  .carousel-slide.right {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .carousel-slide.left .planes-slide-img,
  .carousel-slide.right .planes-slide-img {
    image-rendering: auto;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* Promo-card de los carruseles: mantener proporción correcta.
     635/400 = ratio del slot center hardcoded en app.css 3D carousel.
     NO cambiar a 630/400 — colisiona con el width:635px del slide y
     genera gap visual. */
  #planes-carousel .promo-card,
  #conexion-carousel .promo-card {
    aspect-ratio: 635 / 400 !important;
    min-height: unset !important;
    padding: 0 !important;
  }

  /* Anti-pixelado: GPU compositing aplicado SOLO a la imagen, no al
     slide. Aplicarlo al slide rompe los transform: translate(±576.5px)
     que posicionan left/right en el carrusel 3D porque el ID-specificity
     de #planes-carousel sobreescribe `.carousel-slide.left/.right`. */
  #planes-carousel .planes-slide-img,
  #conexion-carousel .planes-slide-img {
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  #planes-carousel .carousel-slide.center .planes-slide-img,
  #conexion-carousel .carousel-slide.center .planes-slide-img {
    image-rendering: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* ── §3 "Conéctate a la red" — grid desktop: main 73% + side 25% ── */
  .home-mobile-plus-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  .home-mobile-plus-main {
    flex: 0 1 635px !important;
    max-width: 635px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  /* §3 "Conéctate a la red" — layout Figma: main 635×435 + 2 laterales 180×210 */
  .home-mobile-plus-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .home-mobile-plus-main {
    flex: 0 1 635px !important;
    max-width: 635px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
  .home-mobile-plus-main img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 635 / 435 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
  .home-mobile-plus-side {
    flex: 0 1 180px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  .home-mobile-plus-side > a {
    border-radius: 16px !important;
    overflow: hidden !important;
    display: block !important;
    line-height: 0 !important;
  }
  .home-mobile-plus-side img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 180 / 210 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }

  /* ── Luz avatar: oculto en toda la barra flotante (solo se muestra en thanks) ── */
  .fb-avatar { display: none !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; }

  /* ── Step 2 inputs: sin cambio de border-width (elimina doble línea) ── */
  .s2-input { border-width: 1.3px !important; border-color: #D3D3D3 !important; font-size: 20px !important; font-weight: 400 !important; }
  .s2-input:focus {
    border-width: 1.3px !important;
    border-color: #214780 !important;
    box-shadow: 0 0 0 1.3px #214780 !important;
    color: #214780 !important;
  }
  .s2-input:not(:placeholder-shown) {
    border-width: 1.3px !important;
    border-color: #214780 !important;
    box-shadow: 0 0 0 1.3px #214780 !important;
    color: #214780 !important;
  }
  /* Email wrap — Figma 9616:561 height 73 rounded-[24px] border-[2.5px] #214780 padding pl-25 pr-15 py-15 */
  .s2-input-wrap {
    height: 73px !important;
    padding: 12px 44px 12px 25px !important;
    border-width: 1.3px !important;
    border-radius: 24px !important;
    box-shadow: 0 0 0 1.3px #214780 !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; }

  /* ── Spinner 70×70px desktop — SVG bicolor, size only (colors in SVG itself) ── */
  .validando-spinner {
    width: 70px !important; height: 70px !important;
  }
  .lm-spinner {
    width: 70px !important; height: 70px !important;
  }

  /* ── #24 Plan badge popular: 16px medium — Figma spec ── */
  .plan-badge-popular { font-size: 16px !important; font-weight: 500 !important; }
  .plan-badge-popular img, .plan-badge-popular svg { width: 13px !important; height: 13px !important; }

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

  /* ── Location Modal — sin cambio de border-width (elimina doble línea) ── */
  .lm-select, .lm-input { height: 77px !important; border-width: 1.3px !important; border-color: #D3D3D3 !important; border-radius: 20.8px !important; font-size: 20px !important; padding-left: 26px !important; }
  .lm-select:focus, .lm-input:focus {
    border-width: 1.3px !important; border-color: #214780 !important;
    box-shadow: 0 0 0 1.3px #214780 !important;
  }
  .lm-input:not(:placeholder-shown) {
    border-width: 1.3px !important; border-color: #214780 !important;
    box-shadow: 0 0 0 1.3px #214780 !important;
  }
  .lm-input::placeholder { font-size: 20px !important; }
  .lm-input-wrap { border-radius: 20.8px !important; height: 77px !important; }
  .lm-input-wrap.lm-active {
    border-width: 1.3px !important; border-color: #214780 !important;
    box-shadow: 0 0 0 1.3px #214780 !important;
  }
  /* Floating label */
  .lm-input-label { font-size: 16px !important; font-weight: 700 !important; font-family: 'Lexend Deca', sans-serif !important; color: #214780 !important; left: 26px !important; }
  .lm-input-wrap.lm-active .lm-input-inner { padding-top: 28px !important; }
  .lm-input-inner { font-size: 20px !important; height: 77px !important; padding-left: 26px !important; }
  .lm-input-inner::placeholder { font-size: 20px !important; }
  .lm-input-clear, .lm-input-clear img { width: 28px !important; height: 28px !important; }
  .lm-chevron { width: 24px !important; height: 24px !important; }
  /* Validar button — Figma: h:78px, rx:20.8px, max-width:419px centered */
  .lm-btn-validate {
    display: block !important;
    width: 100% !important;
    max-width: 419px !important;
    height: 78px !important;
    border-radius: 20.8px !important;
    margin: 20px auto 0 !important;
  }

  /* ══ Plan Cards 1.2: colores pixel-perfect Figma (2026-04-02) ══ */

  /* Badge: azul #0018FF (no teal) — sobrescribe regla anterior #22 */
  .plan-card-discount-badge {
    background: #0018FF !important;
    border-radius: 6.5px !important;
    padding: 6.5px 13px !important;
    gap: 10.4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .plan-card-redesign.active .plan-card-discount-badge {
    background: #214780 !important;
  }

  /* Nombre del plan: teal #0092BC — sobrescribe regla #25 */
  .plan-card-name {
    color: #0092BC !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 0.75 !important;
    margin-bottom: 10.4px !important;
  }

  /* Precio tachado: gris #737373, 26px */
  .plan-card-old-price {
    color: #737373 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-bottom: 10.4px !important;
  }

  /* Precio principal: 62px, 700, #214780 */
  .plan-card-price {
    color: #214780 !important;
    font-size: 62px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  /* /mes: 31.2px, 400, #214780 */
  .plan-card-price-unit {
    color: #214780 !important;
    font-size: 31.2px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  /* Features */
  .plan-card-features { gap: 6.5px !important; margin-bottom: 23.4px !important; }
  .plan-card-feature {
    color: #737373 !important;
    font-size: 18.2px !important;
    font-weight: 500 !important;
    gap: 6.5px !important;
  }
  .plan-card-feature img { width: 20px !important; height: 20px !important; }

  /* Botón: 32px, 600, height 66px, border 2.6px, radius 49.4px */
  .plan-card-btn-outline {
    font-size: 32px !important;
    font-weight: 600 !important;
    height: 66px !important;
    border-width: 2.6px !important;
    border-radius: 49.4px !important;
    margin-bottom: 6.5px !important;
  }

  /* Card: radius 13px, padding 26px, height auto */
  .plan-card-redesign {
    border-radius: 13px !important;
    padding: 26px !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
  }
  .plan-card-tag-row   { margin-bottom: 13px !important; }
  .plan-card-price-row { margin-bottom: 23.4px !important; }
  .plan-card-note      { margin: 0 !important; color: rgba(81,81,81,.75) !important; }


  /* ══ Móviles (LTE) plan cards — desktop responsive ════════════════════════
     Isolation: mv-plan-card uses only inline styles, no shared plan-card-* classes.
     Brand color: #009CAB (teal-cyan). Price: #214780 (shared dark blue). */

  /* At 900-1280px: tighten card padding to prevent overflow */
  @media (min-width: 769px) and (max-width: 1024px) {
    #mv-cards-grid { gap: 16px !important; }
  }

  /* Floating bar: ensure above vertical-contact (z:1000) on desktop */
  body.page-movil .fb-wrap { z-index: 100; }
  body.page-movil .vertical-contact-button { z-index: 110; }

  /* Chat Luz: already hidden via mobile.css @media(769px+) */
} /* 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: #fff; background: #0092BC;
  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: #0092BC; transition: background .3s;
  z-index: 1; flex-shrink: 0;
}
.co-line.done   { background: #0092BC; }
.co-line.active { background: #214780; }

  /* ── Floatbar: footer padding so WhatsApp button is visible above bar ── */
  body.page-movil .etb-footer {
    padding-bottom: 145px !important; /* floatbar 129px + 16px gap */
  }
  /* Siguiente hover via CSS (no inline handlers) */
  #mv-fb-btn:hover {
    background: #007a9c !important;
    transform: translateY(-2px);
  }

/* ═══════════════════════════════════════════════════════════════════════
   FIX: Bordes dobles — FAQ, inputs, botones
   El :focus-visible global agrega outline 2.5px + offset 3px encima de
   elementos que ya tienen border, creando doble borde visible.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── FAQ: sin outline en focus (el border del .plans-faq-item ya da feedback visual) ── */
.plans-faq-header:focus,
.plans-faq-header:focus-visible,
.faq-trigger:focus,
.faq-trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── FAQ hover: solo fondo, sin cambio de borde en el item ── */
/* CRITICAL: overflow:hidden preserva border-radius al hacer hover/open */
.plans-faq-item,
.plans-faq-item:hover,
.plans-faq-item:focus-within,
.plans-faq-item.active {
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1.5px solid #e5e7eb !important;
}
#plans-faq-accordion .plans-faq-item,
#plans-faq-accordion .plans-faq-item:hover,
#plans-faq-accordion .plans-faq-item.active {
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1.5px solid #e5e7eb !important;
}

/* Home FAQ (.faq-card): mismo fix */
.faq-card,
.faq-card:hover,
.faq-card:focus-within {
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid #d5d5d5 !important;
}

/* ── Inputs checkout: sin outline en focus (ya tienen box-shadow) ── */
.s2-input:focus-visible,
.s2-input-inner:focus-visible,
.s2-select:focus-visible,
.lm-input:focus-visible,
.lm-input-inner:focus-visible,
.lm-select:focus-visible {
  outline: none !important;
}

/* ── OTP/NIP inputs: sin outline ── */
.s2-otp-dash:focus-visible,
.s3-nip-dash:focus-visible {
  outline: none !important;
}

/* ── Botones de acción: sin doble outline ── */
.s2-btn-validate:focus-visible,
.s3-confirm-btn:focus-visible,
.s3-continuar-btn:focus-visible,
.lm-btn-validate:focus-visible,
.fb-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(33,71,128,.3) !important;
}

/* ── Radio buttons (horarios): sin outline doble ── */
.s3-slot-lbl input[type="radio"]:focus-visible {
  outline: none !important;
}
.s3-slot-lbl:focus-within {
  box-shadow: 0 0 0 2px #214780 !important;
  border-radius: 16px;
}

/* ── Checkbox: sin outline doble ── */
.s1-accept input[type="checkbox"]:focus-visible,
.s2-check-row input[type="checkbox"]:focus-visible,
#leadPopup input[type="checkbox"]:focus-visible,
#lead-autorizo:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,146,188,.3) !important;
}

/* ── Select dropdown: sin doble outline ── */
#tipoDoc:focus-visible,
#citySelect:focus-visible {
  outline: none !important;
}

/* ── Floatbar: no tapar footer en NINGUNA página de checkout ──
   El footer del checkout tiene padding-bottom suficiente (set in PHP),
   pero asegurar z-index correcto para que modales queden encima. */
.fb-wrap {
  z-index: 100 !important; /* debajo de modales (200+), debajo de lead popup (200) */
}

/* ── Checkout footer: espacio para floatbar en TODAS las páginas que lo usan ── */
.checkout-footer {
  padding-bottom: 160px !important;
}

/* ── El vertical-contact NO debe quedar detrás del floatbar ── */
.vertical-contact-button {
  z-index: 110 !important; /* encima de floatbar (100), debajo de modales (200+) */
}

/* ══════════════════════════════════════════════════════════════
   WHATSAPP QA FIXES — Abril 2, 2026
   ══════════════════════════════════════════════════════════════ */

/* ── #WA-01 Modal ubicación: inputs más pequeños, botón más grande ── */
.lm-input, .lm-input-inner {
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: 'Lexend', sans-serif !important;
}
.lm-btn-validate {
  font-size: 20px !important;
  font-weight: 600 !important;
  font-family: 'Lexend', sans-serif !important;
}

/* ── #WA-02 Hero: placeholder peso 500 ── */
.plans-hero-input {
  font-weight: 500 !important;
}

/* ── #WA-03 "¿No es tu dirección?" peso 400 ── */
.plans-hero-change-link {
  font-weight: 400 !important;
}

/* ── #WA-04 Plan card name: peso 500 (no 700) ── */
.plan-card-name {
  font-weight: 500 !important;
}

/* ── #WA-05 Plan card precio tachado: mismo tamaño que título, peso 700 ── */
.plan-card-old-price {
  font-size: 26px !important;
  font-weight: 700 !important;
  font-family: 'Lexend', sans-serif !important;
}

/* ── #WA-06 Plan card precio actual: peso 700 ── */
.plan-card-price {
  font-weight: 700 !important;
}

/* ── #WA-07 Badge: peso 500, sin espacio extra ── */
.plan-card-discount-badge {
  font-weight: 500 !important;
  padding: 4px 10px !important;
  gap: 4px !important;
}

/* ── #WA-08 Card icons: 32×32 en cuadro ── */
.plan-card-feature img,
.plan-card-feature svg {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
}

/* ── #WA-09 Botón "Seleccionar plan": texto 32 (interpretado como font-size para el botón) ── */
/* El diseñador dice "debe tener tamaño 32" — probablemente se refiere a la altura o font-size menor */
.plan-card-btn-outline {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ── #WA-10 "Revisa los términos y condiciones": #737373, 18px, 35px de distancia ── */
.plans-terms-link,
a[href*="terminos"],
.plans-section-terms {
  color: #737373 !important;
  font-size: 18px !important;
  margin-top: 35px !important;
}

/* ── #WA-11 Floating bar: +3px margin top ── */
.fb-inner {
  padding-top: 15px !important;
}

/* ── #WA-12 Stepper lines: #204780 ── */
.co-line, .checkout-line, .stepper-line {
  background: #204780 !important;
}
.co-line.active, .checkout-line.active, .stepper-line.active,
.stepper-step.completed .stepper-line {
  background: #204780 !important;
}

/* ── #WA-13 Step 1 Resumen: "Total" 24px #0092BC 500, precio 24px #204780 700 ── */
.s1-total-lbl, .total-label {
  font-size: 24px !important;
  color: #0092BC !important;
  font-weight: 500 !important;
  font-family: 'Lexend', sans-serif !important;
}
.s1-total-val, .total-price {
  font-size: 24px !important;
  color: #204780 !important;
  font-weight: 700 !important;
  font-family: 'Lexend', sans-serif !important;
}

/* ── #WA-14 Resumen: sin líneas divisoras, línea punteada remate redondo ── */
.s1-dashed, .summary-divider-dashed {
  border-top-style: dashed !important;
  border-top-color: #0092BC !important;
  border-radius: 2px !important;
}
.summary-divider {
  display: none !important;
}

/* ── #WA-15 Todas las cajas de texto: 16px, font Lexend ── */
.s2-input, .s2-input-wrap input, .checkout-input, .form-group input,
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select {
  font-size: 16px !important;
  font-family: 'Lexend', sans-serif !important;
}

/* ── #WA-16 Botones tipo "Validar": peso 600 ── */
.s2-btn-validate, .btn-validar, .lm-btn-validate,
button[type="button"].s2-btn-validate {
  font-weight: 600 !important;
  font-family: 'Lexend', sans-serif !important;
}

/* ── #WA-17 Hipervínculos: #0092bc ── */
.s2-links a, .s1-links a,
a[href*="chat"], a[href*="asesor"],
.plans-link, .s2-link {
  color: #0092bc !important;
}

/* ── #WA-18 Validación de campos: font Lexend, quitar borde verde que confunde ── */
.etb-field-err, .s2-field-err {
  font-family: 'Lexend', sans-serif !important;
}
/* Borde verde en campos válidos → quitarlo (confuso per diseñador) */
.s2-input:valid:not(:focus):not([aria-invalid="true"]),
.s2-input-wrap.valid .s2-input-inner,
input:valid:not(:focus):not(:placeholder-shown):not([aria-invalid="true"]) {
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

/* ── #WA-19 Location pill: ícono relleno, más cerca del texto ── */
.plans-hero-location-pill {
  gap: 6px !important;
}
.plans-hero-location-pill svg {
  fill: #fff !important;
}

/* ── #WA-20 Agendamiento: fecha alineada a la izquierda ── */
.s3-date-card h2, .s3-date-head {
  text-align: left !important;
}
.s3-date-card .s3-date-display {
  text-align: left !important;
}

/* ── #WA-21 Botón "Agendar": texto 24px ── */
.s3-confirm-btn, .s3-continuar-btn {
  font-size: 24px !important;
  font-weight: 600 !important;
}

/* ── #WA-22 Pospago cards: mismos estilos que Hogar ── */
.mv-plan-card .mv-plan-name {
  font-weight: 500 !important;
  color: #009CAB !important;
}
.mv-plan-card .mv-plan-btn {
  font-weight: 600 !important;
}

/* ── #WA-23 City dropdown: text no se corte ── */
.custom-dropdown .dropdown-menu,
#citySelect {
  overflow-y: auto !important;
}
#citySelect option {
  white-space: normal !important;
  word-break: break-word !important;
}

/* ══════════════════════════════════════════════════════════════
   ── Plan Cards 1.2 · Pixel-Perfect Figma (2026-04-02) ──
   Specs: Imgs 1-12 del briefing.
   ══════════════════════════════════════════════════════════════ */

/* Outer card container
   Figma: radius 13px · padding 26px · height auto · shadow exacta */
.plan-card-redesign {
  border-radius: 13px !important;
  padding: 26px !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  box-shadow: 0 5.2px 10.4px -2.6px rgba(0, 0, 0, 0.10) !important;
}

/* Espaciado interno: 13px tras el badge, 23.4px entre secciones de contenido */
.plan-card-tag-row      { margin-bottom: 13px !important; min-height: 0 !important; }
.plan-card-name         { margin-top: 0 !important; margin-bottom: 10.4px !important; }
.plan-card-old-price    { margin-top: 0 !important; margin-bottom: 10.4px !important; }
.plan-card-price-row    { margin-bottom: 23.4px !important; }
.plan-card-features     { margin-bottom: 23.4px !important; }
.plan-card-btn-outline  { margin-bottom: 6.5px !important; }
.plan-card-note         { margin: 0 !important; }

/* Badge de descuento
   Figma: #0018FF · radius 6.5px · padding 6.5/13px · gap 10.4px */
.plan-card-discount-badge {
  background: #0018FF !important;
  border-radius: 6.5px !important;
  padding: 6.5px 13px !important;
  gap: 10.4px !important;
  font-family: 'Lexend Deca', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
/* Tarjeta activa: badge navy */
.plan-card-redesign.active .plan-card-discount-badge {
  background: #214780 !important;
}

/* Nombre del plan
   Figma: Lexend 500 · 26px · line-height 19.5px · #0092BC */
.plan-card-name {
  color: #0092BC !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 0.75 !important;
}

/* Precio tachado
   Figma: Lexend 700 · 26px · line-height 100% · #737373 · tachado */
.plan-card-old-price {
  color: #737373 !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: line-through !important;
}

/* Precio principal
   Figma: Lexend 700 · 62px · line-height 100% · #214780 · letter-spacing 0 */
.plan-card-price {
  color: #214780 !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 62px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Sufijo /mes
   Figma: Lexend 400 · 31.2px · line-height 100% · #214780 */
.plan-card-price-unit {
  color: #214780 !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 31.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Features list: gap 6.5px */
.plan-card-features {
  gap: 6.5px !important;
}

/* Feature item
   Figma: Lexend Deca 500 · 18.2px · line-height 100% · #737373 · gap 6.5px */
.plan-card-feature {
  color: #737373 !important;
  font-family: 'Lexend Deca', sans-serif !important;
  font-size: 18.2px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  gap: 6.5px !important;
}
/* Ícono dentro de feature: tamaño correcto */
.plan-card-feature img {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Botón Seleccionar plan
   Figma: Lexend Deca 600 · 32px · height 66px · border 2.6px · radius 49.4px */
.plan-card-btn-outline {
  font-family: 'Lexend Deca', sans-serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  height: 66px !important;
  border-width: 2.6px !important;
  border-style: solid !important;
  border-color: #0018FF !important;
  border-radius: 49.4px !important;
  color: #0018FF !important;
  background: #fff !important;
}
.plan-card-btn-outline:hover,
.plan-card-redesign.active .plan-card-btn-outline,
.plan-card-redesign:hover .plan-card-btn-outline {
  color: #fff !important;
  background: #0018FF !important;
}

/* Nota legal */
.plan-card-note {
  color: rgba(81, 81, 81, 0.75) !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}