@font-face {
    font-family:'Neutra2Text';
    src:url(/assets/fonts/neutra-400.otf) format('opentype');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face {
    font-family:'Neutra2Text';
    src:url(/assets/fonts/neutra-400i.otf) format('opentype');
    font-weight:400; font-style:italic; font-display:swap;
  }
  @font-face {
    font-family:'Neutra2Text';
    src:url(/assets/fonts/neutra-700.otf) format('opentype');
    font-weight:500 700; font-style:normal; font-display:swap;
  }
  @font-face {
    font-family:'Neutra2Text';
    src:url(/assets/fonts/neutra-900.otf) format('opentype');
    font-weight:800 900; font-style:normal; font-display:swap;
  }

  :root{
    --bg:#0b0b0b;
    --bg-2:#131416;
    --surface:#1b1d20;
    --surface-2:#232629;
    --border:rgba(255,255,255,0.09);
    --text:#f5f6f7;
    --text-muted:#9aa1a8;
    --text-faint:#686f75;
    --accent:#2c72d0;
    --accent-2:#5a9bf0;
    --accent-wash:rgba(44,114,208,0.14);
    --whatsapp:#25d366;
  }



  /* header */
  .app-header{
    padding:2px 20px 14px; display:flex; align-items:center; justify-content:space-between; flex:none;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .logo{
    width:34px; height:34px; border-radius:10px; background:linear-gradient(155deg,#1b1d20,#000);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex:none;
  }
  .logo img{width:100%; height:100%; object-fit:cover;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text b{font-family:'Neutra2Text',sans-serif; font-size:14px; font-weight:700;}
  .brand-text span{font-size:11px; color:var(--text-faint);}
  .icon-btn{
    width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex:none; position:relative;
  }
  .icon-btn.is-active{color:#ff5470; border-color:rgba(255,84,112,.4);}

  .screens{position:relative; flex:1; min-height:0;}
  .screen-panel{
    position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; pointer-events:none; transform:translateY(6px);
    transition:opacity .22s ease, transform .22s ease;
  }
  .screen-panel.active{opacity:1; pointer-events:auto; transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){ .screen-panel{transition:none;} }

  .pad{padding:0 20px 100px;}

  /* section helpers */
  .section-label{font-family:'Neutra2Text',sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);}
  .stack{display:flex; flex-direction:column; gap:22px;}

  /* ---- home ---- */
  .hero-card{
    border-radius:20px; padding:22px 18px; position:relative; overflow:hidden;
    background:radial-gradient(120% 140% at 15% 0%, #1c3f6e 0%, #0b0b0b 62%);
    border:1px solid var(--border);
  }
  .hero-card span.tag{
    display:inline-block; font-family:'Neutra2Text',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent-2); background:rgba(44,114,208,.18); border:1px solid rgba(44,114,208,.4);
    padding:5px 10px; border-radius:100px; margin-bottom:10px;
  }
  .hero-card h2{font-family:'Neutra2Text',sans-serif; font-size:21px; font-weight:800; line-height:1.15; margin:0 0 8px; letter-spacing:-.01em;}
  .hero-card p{font-size:12.5px; color:var(--text-muted); line-height:1.55; margin:0 0 16px; max-width:88%;}

  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .stat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 8px; text-align:center;}
  .stat b{display:block; font-family:'Neutra2Text',sans-serif; font-size:17px; font-weight:800; color:var(--accent-2); font-variant-numeric:tabular-nums;}
  .stat span{font-size:10px; color:var(--text-faint); line-height:1.3; display:block; margin-top:3px;}

  .service-row{display:flex; flex-direction:column; gap:10px;}
  .service-card{
    display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:13px;
  }
  .service-num{
    width:30px; height:30px; border-radius:9px; background:var(--accent-wash); color:var(--accent-2); flex:none;
    display:flex; align-items:center; justify-content:center; font-family:'Neutra2Text',sans-serif; font-weight:800; font-size:12px;
  }
  .service-card b{display:block; font-family:'Neutra2Text',sans-serif; font-size:13px; font-weight:700; margin-bottom:2px;}
  .service-card p{margin:0; font-size:11.5px; color:var(--text-muted); line-height:1.5;}

  .feature-scroll{display:flex; gap:10px; overflow-x:auto; margin:0 -20px; padding:0 20px 4px;}
  .feature-scroll::-webkit-scrollbar{display:none;}
  .feature-card{
    flex:none; width:150px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:9px;
  }
  .feature-thumb{width:100%; height:80px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
  .feature-thumb svg{width:44px; height:44px;}
  .feature-card b{display:block; font-family:'Neutra2Text',sans-serif; font-size:12px; font-weight:700; line-height:1.25; margin-bottom:2px;}
  .feature-card span{font-size:12px; font-weight:700; color:var(--accent-2); font-variant-numeric:tabular-nums;}

  .quote-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px;}
  .quote-card p{margin:0 0 8px; font-size:12.5px; line-height:1.55; color:var(--text-muted); font-style:italic;}
  .quote-card b{font-family:'Neutra2Text',sans-serif; font-size:11.5px; letter-spacing:.03em;}

  /* ---- subpage header ---- */
  .subhead{display:flex; align-items:center; gap:12px; padding:2px 20px 16px;}
  .subhead .icon-btn{background:var(--surface);}
  .subhead h2{font-family:'Neutra2Text',sans-serif; font-size:18px; font-weight:800; margin:0; letter-spacing:-.01em;}

  /* ---- more menu ---- */
  .menu-list{display:flex; flex-direction:column;}
  .menu-row{
    display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--border);
    background:none; border-left:none; border-right:none; border-top:none; width:100%; color:var(--text); text-align:left;
  }
  .menu-ic{
    width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border); flex:none;
    display:flex; align-items:center; justify-content:center; color:var(--accent-2);
  }
  .menu-ic svg{width:16px; height:16px;}
  .menu-row span{flex:1; font-size:13.5px; font-weight:600;}
  .menu-row svg.chev{width:15px; height:15px; color:var(--text-faint); flex:none;}

  /* ---- catalog ---- */
  .search{
    display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:11px 14px; margin-bottom:14px;
  }
  .search svg{width:16px; height:16px; color:var(--text-faint); flex:none;}
  .search input{
    background:none; border:none; outline:none; color:var(--text); font-family:'Neutra2Text',sans-serif; font-size:14px; width:100%;
  }
  .search input::placeholder{color:var(--text-faint);}

  .chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; margin:-2px -2px 4px;}
  .chips::-webkit-scrollbar{display:none;}
  .chip{
    flex:none; font-family:'Neutra2Text',sans-serif; font-size:12px; font-weight:600; letter-spacing:.01em;
    padding:8px 14px; border-radius:100px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); white-space:nowrap;
  }
  .chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}

  .result-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .result-row span{font-size:12px; color:var(--text-faint);}

  .grid{display:flex; flex-direction:column; gap:12px;}
  .car-card{
    display:flex; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:10px;
  }
  .car-thumb{
    width:84px; height:74px; border-radius:12px; flex:none; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .car-thumb svg{width:52px; height:52px; position:relative; z-index:1;}
  .car-info{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px;}
  .car-name{font-family:'Neutra2Text',sans-serif; font-size:13px; font-weight:700; letter-spacing:-.01em;}
  .car-price{font-family:'Neutra2Text',sans-serif; font-size:14px; font-weight:700; color:var(--accent-2); font-variant-numeric:tabular-nums;}
  .car-meta{font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
  .fav-btn{
    width:28px; height:28px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; flex:none; align-self:flex-start; color:var(--text-faint);
  }
  .fav-btn.active{color:#ff5470; border-color:rgba(255,84,112,.4); background:rgba(255,84,112,.12);}
  .fav-btn svg{width:14px; height:14px;}

  /* ---- detail ---- */
  .detail-hero{
    height:220px; position:relative; display:flex; align-items:center; justify-content:center; flex:none;
  }
  .detail-hero svg{width:150px; height:150px; position:relative; z-index:1;}
  .detail-back{
    position:absolute; top:16px; left:16px; z-index:2; width:32px; height:32px; border-radius:10px;
    background:rgba(0,0,0,.35); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .detail-fav{
    position:absolute; top:16px; right:16px; z-index:2; width:32px; height:32px; border-radius:10px;
    background:rgba(0,0,0,.35); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .detail-fav.active{color:#ff5470;}
  .detail-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:3; pointer-events:none;}
  .detail-dots span{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); transition:width .15s ease, background .15s ease;}
  .detail-dots span.is-current{background:#fff; width:14px; border-radius:3px;}
  .detail-count{
    position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:2;
    background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; font-size:11px; font-weight:600;
    padding:4px 10px; border-radius:100px; font-variant-numeric:tabular-nums;
  }

  .detail-body{padding:18px 20px 100px; display:flex; flex-direction:column; gap:18px;}
  .detail-title{font-family:'Neutra2Text',sans-serif; font-weight:800; font-size:19px; letter-spacing:-.01em;}
  .detail-price{font-size:20px; font-weight:700; color:var(--accent-2); font-variant-numeric:tabular-nums; margin-top:2px;}
  .spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .spec{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px;}
  .spec b{display:block; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
  .spec span{font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em;}

  .fin-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px;}
  .fin-tabs{display:flex; gap:6px; margin:10px 0 12px;}
  .fin-tab{
    flex:1; text-align:center; padding:8px 0; border-radius:10px; font-size:12.5px; font-weight:600;
    background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); font-variant-numeric:tabular-nums;
  }
  .fin-tab.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .fin-amount{font-size:24px; font-weight:800; font-family:'Neutra2Text',sans-serif; font-variant-numeric:tabular-nums;}
  .fin-amount span{font-size:12px; font-weight:600; color:var(--text-faint); margin-left:4px;}
  .fin-note{font-size:11px; color:var(--text-faint); margin-top:6px; line-height:1.5;}

  .cta-row{display:flex; gap:10px;}
  .btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 10px; border-radius:13px;
    font-family:'Neutra2Text',sans-serif; font-weight:700; font-size:12.5px; border:none; text-decoration:none; cursor:pointer;
  }
  .btn svg{width:15px; height:15px; flex:none;}
  .btn-primary{background:var(--accent); color:#fff;}
  .btn-whatsapp{background:var(--whatsapp); color:#04210f;}
  .btn-ghost{background:var(--surface); color:var(--text); border:1px solid var(--border);}

  /* ---- forms ---- */
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:11.5px; font-weight:600; color:var(--text-muted);}
  .field input, .field select, .field textarea{
    background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 12px;
    color:var(--text); font-family:'Neutra2Text',sans-serif; font-size:13px; outline:none; resize:none;
  }
  .field textarea{min-height:70px;}

  /* ---- agenda ---- */
  .agenda-hero{text-align:left;}
  .agenda-hero h2{font-family:'Neutra2Text',sans-serif; font-size:19px; font-weight:800; margin:2px 0 4px;}
  .agenda-hero p{font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:0;}
  .day-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;}
  .day{
    flex:none; width:58px; padding:10px 0; border-radius:14px; background:var(--surface); border:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .day span:first-child{font-size:10.5px; color:var(--text-faint); text-transform:uppercase;}
  .day b{font-family:'Neutra2Text',sans-serif; font-size:15px;}
  .day.active{background:var(--accent); border-color:var(--accent);}
  .day.active span, .day.active b{color:#fff;}

  .slot-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
  .slot{
    text-align:center; padding:10px 0; border-radius:11px; background:var(--surface); border:1px solid var(--border);
    font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-muted);
  }
  .slot.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .slot.taken{opacity:.32; text-decoration:line-through;}

  .seg-tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:4px;}
  .seg-tab{flex:1; text-align:center; padding:9px 0; border-radius:10px; font-family:'Neutra2Text',sans-serif; font-weight:700; font-size:12px; color:var(--text-muted); background:none; border:none;}
  .seg-tab.active{background:var(--accent); color:#fff;}

  .role-row{display:flex; gap:8px;}
  .role-chip{flex:1; text-align:center; padding:10px 4px; border-radius:11px; background:var(--surface); border:1px solid var(--border); font-size:11.5px; font-weight:700; color:var(--text-muted);}
  .role-chip.active{background:var(--accent-wash); border-color:var(--accent); color:var(--accent-2);}

  .appt-card{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px;}
  .appt-date{flex:none; width:46px; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:7px 0;}
  .appt-date span{display:block; font-size:9.5px; text-transform:uppercase; color:var(--text-faint);}
  .appt-date b{display:block; font-family:'Neutra2Text',sans-serif; font-size:15px; margin-top:1px;}
  .appt-body{flex:1; min-width:0;}
  .appt-body>b{display:block; font-size:13px; font-weight:700;}
  .appt-body>span{display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .role-tag{display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:100px; margin-top:8px;}
  .role-tag.cliente{background:rgba(44,114,208,.16); color:#5a9bf0;}
  .role-tag.servicio{background:rgba(37,211,102,.16); color:#25d366;}
  .role-tag.admin{background:rgba(255,84,112,.16); color:#ff5470;}

  .push-preview{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:13px; display:flex; gap:10px; align-items:flex-start;}
  .push-preview-ic{width:30px; height:30px; border-radius:8px; overflow:hidden; flex:none;}
  .push-preview-ic img{width:100%; height:100%; object-fit:cover;}

  .agenda-unit{
    display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:10px;
  }
  .agenda-unit .car-thumb{width:52px; height:52px; border-radius:10px;}
  .agenda-unit .car-thumb svg{width:32px; height:32px;}
  .agenda-unit div b{font-size:13px; font-family:'Neutra2Text',sans-serif;}
  .agenda-unit div span{display:block; font-size:11px; color:var(--text-faint); margin-top:1px;}

  .confirm-state{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:30px 10px 10px;
  }
  .confirm-check{
    width:56px; height:56px; border-radius:50%; background:rgba(37,211,102,.15); border:1px solid rgba(37,211,102,.4);
    display:flex; align-items:center; justify-content:center; color:var(--whatsapp);
  }
  .confirm-check svg{width:26px; height:26px;}
  .confirm-state h3{font-family:'Neutra2Text',sans-serif; font-size:16px; margin:2px 0 0;}
  .confirm-state p{font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.5;}

  /* ---- contact / info blocks ---- */
  .info-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; gap:12px; align-items:flex-start;}
  .info-ic{width:32px; height:32px; border-radius:9px; background:var(--accent-wash); color:var(--accent-2); flex:none; display:flex; align-items:center; justify-content:center;}
  .info-ic svg{width:15px; height:15px;}
  .info-card b{display:block; font-size:12.5px; font-weight:700; margin-bottom:2px;}
  .info-card span{font-size:12px; color:var(--text-muted); line-height:1.5;}
  .info-card a{color:var(--accent-2); text-decoration:none;}

  .locations{display:flex; flex-direction:column; gap:10px;}
  .plain p{font-size:12.5px; color:var(--text-muted); line-height:1.65; margin:0 0 12px;}

  /* ---- tab bar ---- */
  .tabbar{
    flex:none; display:flex; padding:8px 14px 14px; gap:4px; background:linear-gradient(180deg, transparent, var(--bg) 30%);
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0 4px; border-radius:14px;
    color:var(--text-faint); background:none; border:none;
  }
  .tab svg{width:20px; height:20px;}
  .tab span{font-size:10px; font-weight:600; font-family:'Neutra2Text',sans-serif;}
  .tab.active{color:var(--accent-2);}


  /* ---------- app a pantalla completa ---------- */
  *{box-sizing:border-box;}
  html,body{margin:0; height:100%; background:#000;}
  body{color:var(--text); font-family:'Neutra2Text',system-ui,sans-serif; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;}
  button{font:inherit; color:inherit; cursor:pointer;}
  .screen{
    position:fixed; inset:0; margin:0 auto; max-width:560px; overflow:hidden;
    background:var(--bg); color:var(--text); display:flex; flex-direction:column;
    padding-top:env(safe-area-inset-top,0px);
  }
  @media (min-width:600px){ .screen{border-left:1px solid var(--border); border-right:1px solid var(--border);} }
  .app-header{padding-top:12px;}
  .tabbar{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}
  .header-actions{display:flex; gap:8px;}
  .icon-btn.has-user{color:var(--accent-2); border-color:rgba(44,114,208,.45);}

  /* estados de carga */
  .loading, .empty{padding:36px 10px; text-align:center; color:var(--text-faint); font-size:13px; line-height:1.6;}
  .spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--accent); animation:gira .8s linear infinite; margin:0 auto 10px;}
  @keyframes gira{to{transform:rotate(360deg)}}
  .skeleton{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%); background-size:200% 100%; animation:brillo 1.2s ease infinite; border-radius:16px; height:96px;}
  @keyframes brillo{to{background-position:-200% 0}}
  .updated{font-size:11px; color:var(--text-faint); text-align:center; margin-top:14px;}
  .detail-desc{font-size:12.5px; color:var(--text-muted); line-height:1.6; white-space:pre-line;}
  .suc-tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-muted); margin-top:4px;}

  /* cuenta */
  .account-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; display:flex; gap:12px; align-items:center;}
  .avatar{width:44px; height:44px; border-radius:50%; background:var(--accent-wash); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; flex:none;}
  .account-card b{display:block; font-size:14px;} .account-card span{font-size:12px; color:var(--text-muted);}
  .soon{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); background:var(--surface-2); padding:3px 8px; border-radius:100px;}
  .install-banner{display:none; background:var(--accent-wash); border:1px solid rgba(44,114,208,.4); border-radius:14px; padding:12px 14px; gap:10px; align-items:center;}
  .install-banner.show{display:flex;}
  .install-banner p{margin:0; font-size:12px; color:var(--text); flex:1; line-height:1.45;}
  .offline-bar{display:none; background:#3a2a00; color:#ffd479; font-size:11.5px; text-align:center; padding:6px;}
  .offline-bar.show{display:block;}
  .service-card{text-align:left; width:100%; color:inherit; font:inherit;}
  a.menu-row{color:var(--text);}

  /* compartir */
  .share-chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); color:var(--accent-2); border-radius:100px; padding:6px 12px; font-size:12px; font-weight:700;}
  .share-chip svg{width:14px; height:14px;}
  .detail-share{position:absolute; top:16px; right:56px; z-index:3; width:32px; height:32px; border-radius:10px; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;}
  .detail-fav{z-index:3;}
  .share-sheet{position:absolute; inset:0; z-index:20; background:rgba(0,0,0,.55); display:none; align-items:flex-end; justify-content:center;}
  .share-sheet.show{display:flex;}
  .share-panel{width:100%; max-width:480px; background:var(--bg-2); border:1px solid var(--border); border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:10px;}
  .share-panel b{font-size:15px;} .share-panel span{font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-bottom:4px;}
  .toast{position:absolute; left:50%; bottom:96px; transform:translateX(-50%); background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:10px 16px; border-radius:100px; font-size:12.5px; z-index:30; opacity:0; transition:opacity .2s; pointer-events:none;}
  .toast.show{opacity:1;}
  @media (min-width:1000px){ .share-sheet{align-items:center;} .share-panel{border-radius:20px;} }

  /* =========================================================
     RESPONSIVO: tableta y computadora
     ========================================================= */
  @media (min-width:700px){
    .screen{max-width:none; border:0;}
    .grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
    .service-row.cols{display:grid; grid-template-columns:repeat(3,1fr);}
  }

  @media (min-width:1000px){
    /* Encabezado con menú arriba */
    .app-header{padding:16px 40px; border-bottom:1px solid var(--border); background:var(--bg-2); position:relative; z-index:3;}
    .logo{width:40px; height:40px;}
    .brand-text b{font-size:16px;} .brand-text span{font-size:12px;}
    .tabbar{
      position:absolute; top:calc(env(safe-area-inset-top,0px) + 17px); left:50%; transform:translateX(-50%);
      padding:0; background:none; gap:6px; z-index:4;
    }
    .tab{flex-direction:row; gap:8px; padding:9px 16px; border-radius:11px; flex:none;}
    .tab span{font-size:13.5px;}
    .tab svg{width:17px; height:17px;}
    .tab.active{background:var(--accent-wash); color:var(--accent-2);}
    .tab:hover{color:var(--text);}

    /* Contenedor centrado y ancho */
    .pad{max-width:1200px; margin:0 auto; padding:28px 40px 72px;}
    .subhead{max-width:1200px; margin:0 auto; padding:28px 40px 4px;}
    .subhead h2{font-size:24px;}
    .subhead + .pad{padding-top:14px;}
    .section-label{font-size:13px;}
    .offline-bar{position:relative; z-index:5;}

    /* Inicio */
    .hero-card{padding:56px 48px; border-radius:26px; background:radial-gradient(90% 140% at 10% 0%, #1c3f6e 0%, #0b0b0b 65%);}
    .hero-card h2{font-size:40px; max-width:620px;}
    .hero-card p{font-size:16px; max-width:560px;}
    .hero-card .btn{font-size:14.5px; padding:14px 26px !important;}
    .stat{padding:22px 10px;} .stat b{font-size:28px;} .stat span{font-size:12.5px;}
    .service-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
    .service-card{padding:20px;} .service-card b{font-size:15px;} .service-card p{font-size:13px;}
    .feature-scroll{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; overflow:visible; margin:0; padding:0;}
    .feature-card{width:auto; padding:10px; cursor:pointer; transition:transform .15s ease, border-color .15s ease;}
    .feature-card:hover{transform:translateY(-2px); border-color:rgba(90,155,240,.4);}
    .feature-thumb{height:170px;}
    .feature-card b{font-size:14px; margin-top:4px;} .feature-card span{font-size:14px;}
    .feature-scroll .feature-card:nth-child(n+9){display:none;}
    #home .service-row:last-child, .quote-card{font-size:14px;}
    .quote-card p{font-size:14px;}
    [data-panel="home"] .service-row:not(.cols) .quote-card{height:100%;}

    /* Inventario en cuadrícula de tarjetas verticales */
    .search{max-width:560px;}
    [data-panel="catalog"] .pad, [data-panel="agenda"] .pad{padding-top:28px !important;}
    #detailIcon{display:none;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
    .car-card{flex-direction:column; padding:0; overflow:hidden; position:relative; border-radius:18px; transition:transform .15s ease, border-color .15s ease;}
    .car-card:hover{transform:translateY(-3px); border-color:rgba(90,155,240,.4);}
    .car-thumb{width:100%; height:190px; border-radius:0; cursor:pointer;}
    .car-thumb svg{width:70px; height:70px;}
    .car-info{padding:14px 16px 16px; cursor:pointer;}
    .car-name{font-size:15px;} .car-price{font-size:17px;} .car-meta{font-size:12.5px;}
    .fav-btn{position:absolute; top:10px; right:10px; z-index:3; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); width:34px; height:34px;}
    .skeleton{height:280px;}

    /* Ficha del auto en dos columnas */
    [data-panel="detail"]{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:32px; padding:28px 40px 72px; align-content:start; max-width:1280px; margin:0 auto;}
    .detail-hero{height:auto; aspect-ratio:4/3; border-radius:22px; overflow:hidden; position:sticky; top:0;}
    .detail-hero svg#detailIcon{width:220px; height:220px;}
    .detail-body{padding:0 0 40px;}
    .detail-title{font-size:30px;} .detail-price{font-size:28px;}
    .spec b{font-size:14.5px;}
    .fin-amount{font-size:30px;}
    .btn{font-size:14px;}
    .detail-desc{font-size:14px;}

    /* Formularios y menús a un ancho cómodo */
    [data-panel="agenda"] .pad, [data-panel="quotes"] .pad, [data-panel="sell"] .pad,
    [data-panel="more"] .pad, [data-panel="cuenta"] .pad, [data-panel="privacy"] .pad,
    [data-panel="contact"] .pad, [data-panel="areas"] .pad, [data-panel="about"] .pad, [data-panel="services"] .pad{max-width:760px;}
    [data-panel="quotes"] .subhead, [data-panel="sell"] .subhead, [data-panel="cuenta"] .subhead, [data-panel="privacy"] .subhead,
    [data-panel="contact"] .subhead, [data-panel="areas"] .subhead, [data-panel="about"] .subhead, [data-panel="services"] .subhead{max-width:760px;}
    .agenda-hero h2{font-size:28px;} .agenda-hero p{font-size:14.5px;}
    .slot-grid{grid-template-columns:repeat(4,1fr);}
    .day{width:66px;}
    .field input, .field select, .field textarea{font-size:14.5px; padding:13px 14px;}
    .field label{font-size:13px;}
    .menu-row span{font-size:15px;}
    .plain p, .info-card span{font-size:14px;}
    .info-card b{font-size:14px;}
    .confirm-state h3{font-size:22px;} .confirm-state p{font-size:14.5px;}
    .install-banner{display:none !important;}
  }

  @media (min-width:1400px){
    .grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  }

  /* =========================================================
     FOTOS: pantalla completa y descarga (v0.5.2)
     ========================================================= */
  .detail-hero img#detailImg{cursor:zoom-in;}
  .detail-expand{position:absolute; bottom:12px; right:14px; z-index:3; width:34px; height:34px; border-radius:10px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;}
  .btn-fotos{background:var(--surface); color:var(--text); border:1px solid var(--border); text-decoration:none; justify-content:center; gap:8px;}
  .btn-fotos.cargando{opacity:.6; pointer-events:none;}

  .visor{position:fixed; inset:0; z-index:1000; background:#000; display:none; flex-direction:column; user-select:none; -webkit-user-select:none; touch-action:none;}
  .visor.show{display:flex;}
  .visor-top{position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px; background:linear-gradient(rgba(0,0,0,.6),transparent);}
  .visor-count{flex:1; color:#fff; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; padding-left:6px;}
  .visor-btn{width:42px; height:42px; border-radius:12px; border:0; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .visor-stage{flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .visor-stage img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transform-origin:center center; transition:transform .18s ease; cursor:zoom-in; will-change:transform;}
  .visor-stage img.zoom{cursor:grab; transition:none;}
  .visor-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .visor-prev{left:12px;} .visor-next{right:12px;}
  .visor-tira{touch-action:pan-x; display:flex; gap:6px; overflow-x:auto; padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px)); scrollbar-width:none; justify-content:safe center;}
  .visor-tira::-webkit-scrollbar{display:none;}
  .visor-tira img{flex:none; width:62px; height:44px; object-fit:cover; border-radius:6px; opacity:.45; cursor:pointer; border:2px solid transparent;}
  .visor-tira img.is-current{opacity:1; border-color:#fff;}
  @media (max-width:640px){ .visor-nav{display:none;} .visor-tira img{width:52px; height:38px;} }
  .btn-fotos.lista{background:#16a34a; border-color:#16a34a; color:#fff; animation:fotosLista .5s ease;}
  @keyframes fotosLista{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

  /* ---- servicio (citas del taller) ---- */
  .srv-autos{display:flex; flex-direction:column; gap:8px;}
  .srv-autos:empty{display:none;}
  .srv-auto{display:flex; align-items:center; gap:10px; width:100%; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:11px 12px; font-family:'Neutra2Text',sans-serif;}
  .srv-auto b{display:block; font-size:13px;}
  .srv-auto span{display:block; font-size:11px; color:var(--text-faint); margin-top:1px;}
  .srv-auto i{flex:none; width:18px; height:18px; border-radius:50%; border:2px solid var(--border);}
  .srv-auto.active{border-color:var(--accent); background:var(--accent-wash);}
  .srv-auto.active i{border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--surface);}
  .srv-nuevo{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;}
  .srv-nuevo input{min-width:0;}
  .srv-tipos{display:flex; flex-wrap:wrap; gap:8px;}
  .srv-tipos .chip{white-space:normal; text-align:left;}
  .day.lleno{opacity:.35;}
  .srv-error{display:none; font-size:12.5px; color:#fca5a5; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); border-radius:11px; padding:10px 12px;}
  .srv-error.show{display:block;}
  .srv-home span{display:block; font-size:11px; color:var(--text-faint); margin-top:1px;}
  .srv-home b{font-size:13px; font-family:'Neutra2Text',sans-serif;}
  .cita-tag{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:100px; margin-top:8px;}
  .cita-tag.pendiente{background:rgba(245,158,11,.16); color:#fcd34d;}
  .cita-tag.confirmada{background:rgba(44,114,208,.18); color:#5a9bf0;}
  .cita-tag.en_taller{background:rgba(168,85,247,.16); color:#d8b4fe;}
  .cita-tag.terminada{background:rgba(37,211,102,.16); color:#25d366;}
  .cita-tag.cancelada, .cita-tag.no_asistio{background:var(--surface-2); color:var(--text-faint);}
  .appt-card.pasada{opacity:.6;}
  .appt-cancel{background:none; border:none; color:#fca5a5; font-family:'Neutra2Text',sans-serif; font-size:11.5px; font-weight:700; padding:6px 0 0; cursor:pointer; display:block;}
  .citas-vacio{text-align:center; font-size:12.5px; color:var(--text-muted); padding:24px 0 8px;}

  /* ---- filtros avanzados ---- */
  .filtro-row{display:flex; gap:8px; align-items:center; margin:-4px 0 12px;}
  .f-badge{background:var(--accent); color:#fff; border-radius:99px; font-size:10.5px; min-width:17px; height:17px; line-height:17px; text-align:center; padding:0 5px; margin-left:2px;}
  .f-orden{margin-left:auto; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:100px; padding:6px 10px; font-family:'Neutra2Text',sans-serif; font-size:12px; font-weight:600; max-width:55%;}
  .f-panel{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; margin-bottom:14px;}
  .f-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .f-grid .field select{background:var(--bg); width:100%; min-width:0;}
  @media (min-width:900px){ .f-grid{grid-template-columns:repeat(5,1fr);} }

  /* ---------- v0.8.0: vista 360 ---------- */
  .tag-360{position:absolute; left:8px; bottom:8px; z-index:3; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:#fff; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:2px 8px; backdrop-filter:blur(4px);}
  .detail-360{position:absolute; bottom:12px; left:14px; z-index:3; height:34px; padding:0 12px; border-radius:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; gap:6px; color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer;}
  .detail-360[hidden], .btn-360[hidden]{display:none;}
  .btn-360{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; border-radius:14px; border:1px solid var(--accent, #c8102e); background:transparent; color:var(--text); font:inherit; font-weight:700; cursor:pointer;}
  .v360{position:fixed; inset:0; z-index:1001; background:#000; display:none; flex-direction:column;}
  .v360.show{display:flex;}
  .v360-stage{flex:1; width:100%; height:100%;}
  .v360-pie{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px)); background:linear-gradient(transparent, rgba(0,0,0,.65)); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
  .v360-vistas{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; pointer-events:auto;}
  .v360-vistas button{border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.5); color:#fff; font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:100px; cursor:pointer;}
  .v360-vistas button.active{background:#fff; color:#000;}
  .v360-hint{color:rgba(255,255,255,.85); font-size:12px; transition:opacity .4s;}
  .v360 .pnlm-container{background:#000;}

  /* ---------- v0.8.0: notificaciones ---------- */
  .push-estado{display:block; font-size:11.5px; font-weight:500; color:var(--text-muted); margin-top:2px;}
  .push-accion{font-size:12.5px; color:var(--accent-2, #ef4444); flex:none;}
  .push-oferta{margin:14px auto 4px; max-width:340px; padding:14px; border-radius:14px; background:var(--surface-2); display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;}
  .push-oferta[hidden]{display:none;}
  .push-oferta b{font-size:14px;}
  .push-oferta span{font-size:12.5px; color:var(--text-muted);}
  .detail-hero .detail-360 svg{width:16px; height:16px; position:static; opacity:1; flex:none; transform:none;}

  /* ---------- v0.8.1: barra roja para activar notificaciones ---------- */
  .push-barra{display:flex; align-items:stretch; background:#c8102e; color:#fff; position:relative; z-index:6;}
  .push-barra[hidden]{display:none;}
  .push-barra-txt{flex:1; display:flex; align-items:center; gap:10px; padding:10px 6px 10px 14px; background:none; border:0; color:inherit; font:inherit; font-size:12.5px; text-align:left; cursor:pointer; line-height:1.35;}
  .push-barra-txt svg{flex:none; animation:pushTimbre 2.4s ease-in-out infinite; transform-origin:50% 10%;}
  .push-barra-txt span{flex:1;}
  .push-barra-txt em{flex:none; font-style:normal; font-weight:800; font-size:12px; background:#fff; color:#c8102e; padding:6px 12px; border-radius:100px;}
  .push-barra-x{flex:none; width:40px; background:none; border:0; color:rgba(255,255,255,.85); font-size:22px; cursor:pointer;}
  @keyframes pushTimbre{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(9deg)}90%{transform:rotate(-6deg)}}
  @media (prefers-reduced-motion: reduce){.push-barra-txt svg{animation:none}}
  @media (min-width: 1000px){
    .push-barra{height:48px;}
    .push-barra:not([hidden]) ~ .tabbar{top:calc(env(safe-area-inset-top,0px) + 65px);}
  }

  /* ---------- v0.8.4: 360 más llamativo ---------- */
  .tag-360{display:flex; align-items:center; gap:4px; left:8px; top:8px; bottom:auto; padding:4px 9px 4px 7px; font-size:11px; background:linear-gradient(135deg,#e11d48,#c8102e 60%,#8b0a1f); border:1px solid rgba(255,255,255,.35); box-shadow:0 2px 10px rgba(200,16,46,.55); animation:t360pulso 2.2s ease-out infinite;}
  .tag-360 b{font-weight:800; letter-spacing:.02em;}
  .ic-giro{animation:t360giro 2.8s linear infinite; flex:none;}
  @keyframes t360giro{to{transform:rotate(360deg);}}
  @keyframes t360pulso{0%{box-shadow:0 0 0 0 rgba(225,29,72,.65),0 2px 10px rgba(200,16,46,.5);}70%{box-shadow:0 0 0 9px rgba(225,29,72,0),0 2px 10px rgba(200,16,46,.5);}100%{box-shadow:0 0 0 0 rgba(225,29,72,0),0 2px 10px rgba(200,16,46,.5);}}
  .feature-thumb .tag-360{position:absolute; z-index:3; font-size:10px; padding:3px 8px 3px 6px;}
  .chip.chip-360{display:inline-flex; align-items:center; gap:6px; border-color:rgba(225,29,72,.55); color:#fda4af; white-space:nowrap;}
  .chip.chip-360.active{background:linear-gradient(135deg,#e11d48,#c8102e); border-color:#c8102e; color:#fff;}
  .detail-hero .detail-360{background:linear-gradient(135deg,#e11d48,#c8102e 60%,#8b0a1f); border-color:rgba(255,255,255,.4); height:38px; padding:0 14px; font-size:14px; animation:t360pulso 2.2s ease-out infinite;}
  .detail-hero .detail-360 svg{animation:t360giro 2.8s linear infinite;}
  /* Tarjeta con la vista previa en movimiento */
  .tarjeta-360{position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:112px; padding:16px; border:0; border-radius:18px; overflow:hidden; cursor:pointer; color:#fff; text-align:left; font:inherit;
    background-color:#111; background-size:480px 240px; background-repeat:repeat-x; background-position:0 50%; animation:t360paneo 26s linear infinite; box-shadow:0 0 0 1.5px rgba(225,29,72,.7), 0 8px 24px rgba(200,16,46,.28);}
  .tarjeta-360[hidden]{display:none;}
  @keyframes t360paneo{from{background-position:0 50%;}to{background-position:-480px 50%;}}
  .t360-velo{position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.15) 100%);}
  .t360-logo,.t360-txt,.t360-cta{position:relative;}
  .t360-logo{flex:none; width:58px; height:58px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#e11d48,#c8102e); animation:t360pulso 2.2s ease-out infinite;}
  .t360-logo svg{animation:t360giro 3.2s linear infinite; margin-bottom:-2px;}
  .t360-logo b{font-size:11px; font-weight:800;}
  .t360-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
  .t360-txt b{font-size:15.5px; line-height:1.2;}
  .t360-txt small{font-size:12px; color:rgba(255,255,255,.82); line-height:1.35;}
  .t360-cta{flex:none; background:#fff; color:#c8102e; font-weight:800; font-size:12.5px; padding:8px 14px; border-radius:100px;}
  @media (max-width:380px){ .t360-cta{display:none;} }
  .v360-hint{display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.55); padding:7px 12px; border-radius:100px;}
  .v360-mano{animation:t360mano 1.8s ease-in-out infinite;}
  @keyframes t360mano{0%,100%{transform:translateX(-8px);}50%{transform:translateX(8px);}}
  @media (prefers-reduced-motion: reduce){ .tag-360,.ic-giro,.detail-hero .detail-360,.detail-hero .detail-360 svg,.tarjeta-360,.t360-logo,.t360-logo svg,.v360-mano{animation:none;} }
  .car-thumb .tag-360, .feature-thumb .tag-360{position:absolute; z-index:3;}
  .car-thumb .tag-360 svg, .feature-thumb .tag-360 svg{width:13px; height:13px; position:static; opacity:1; z-index:auto;}
  .t360-logo svg{width:26px; height:26px;}

  /* ---------- v0.9.0: calculadora de enganche y plazo ---------- */
  .fin-fila{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--text-muted);}
  .fin-fila b{color:var(--text); font-size:15px; font-variant-numeric:tabular-nums;}
  .fin-lim{font-size:10.5px; color:var(--text-faint); margin-top:2px;}
  .fin-rango{width:100%; margin:8px 0 0; accent-color:var(--accent);}
  button.fin-tab{font:inherit; cursor:pointer;}
  .fin-tabs{flex-wrap:wrap;}
  .fin-resultado{background:var(--surface-2); border-radius:14px; padding:12px 14px; margin-top:4px;}
  .fin-resultado > span{font-size:11.5px; color:var(--text-muted);}
  .fin-resultado small{display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px;}
  .fin-desglose{margin:10px 0 0; display:grid; gap:6px;}
  .fin-desglose div{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; border-bottom:1px dashed var(--border); padding-bottom:5px;}
  .fin-desglose dt{color:var(--text-muted);} .fin-desglose dd{margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;}
  .fin-desglose .fin-cat{display:block;} .fin-desglose .fin-cat dd{font-weight:500; text-align:left; font-size:11.5px; margin-top:2px;}
  .fin-wa{margin-top:12px; width:100%; justify-content:center; padding:12px;}
  .fin-legal{margin-top:6px; font-size:11px; color:var(--text-faint); line-height:1.5;}
  .fin-legal summary{cursor:pointer; color:var(--text-muted); font-weight:600;}
  .fin-legal p{margin:6px 0 0;}

  /* ---------- v0.9.2: ventana emergente (publicidad) ---------- */
  .popup-fondo{position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s;}
  .popup-fondo[hidden]{display:none;}
  .popup-fondo.show{opacity:1;}
  .popup-caja{position:relative; width:100%; max-width:380px; max-height:90vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.6); transform:translateY(16px) scale(.97); transition:transform .25s;}
  .popup-fondo.show .popup-caja{transform:none;}
  .popup-caja img{display:block; width:100%; height:auto; max-height:56vh; object-fit:cover;}
  .popup-x{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:20px; cursor:pointer;}
  .popup-cuerpo{padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; text-align:center;}
  .popup-cuerpo h3{margin:0; font-size:19px; line-height:1.25;}
  .popup-cuerpo p{margin:0; font-size:13.5px; color:var(--text-muted); line-height:1.5; white-space:pre-wrap;}
  .popup-cta{padding:13px; font-size:14.5px; background:linear-gradient(135deg,#e11d48,#c8102e); border:0;}
  .popup-cta[hidden]{display:none;}
  .popup-no{background:none; border:0; color:var(--text-faint); font:inherit; font-size:12.5px; cursor:pointer; padding:4px;}
  .popup-cuerpo small{font-size:10.5px; color:var(--text-faint); line-height:1.4;}
  .popup-cuerpo small:empty{display:none;}

  /* Invitación a instalar la app (0.9.11) */
  .inst-fondo{position:fixed; inset:0; z-index:1150; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s;}
  .inst-fondo[hidden]{display:none;}
  .inst-fondo.show{opacity:1;}
  .inst-caja{width:100%; max-width:460px; background:var(--surface); border:1px solid var(--border); border-bottom:0; border-radius:22px 22px 0 0; padding:12px 20px calc(20px + env(safe-area-inset-bottom)); color:var(--text); transform:translateY(40px); transition:transform .25s; box-shadow:0 -12px 40px rgba(0,0,0,.5);}
  .inst-fondo.show .inst-caja{transform:none;}
  .inst-asa{width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.2); margin:0 auto 14px;}
  .inst-fila{display:flex; gap:12px; align-items:center;}
  .inst-fila img{width:56px; height:56px; border-radius:14px; flex:none; border:1px solid var(--border);}
  .inst-fila b{display:block; font-size:17px;}
  .inst-fila span{display:block; font-size:12.5px; color:var(--text-muted);}
  .inst-benef{list-style:none; padding:0; margin:14px 0 16px; font-size:13.5px; line-height:1.9;}
  .inst-pasos{list-style:none; padding:0; margin:14px 0 16px; display:grid; gap:8px;}
  .inst-pasos li{display:flex; gap:10px; align-items:center; background:var(--surface-2, rgba(255,255,255,.05)); border-radius:12px; padding:10px 12px; font-size:13.5px;}
  .inst-n{width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
  .inst-ico{display:inline-flex; width:22px; height:22px; border:1.5px solid var(--accent); border-radius:5px; align-items:center; justify-content:center; color:var(--accent); font-size:12px; vertical-align:middle;}
  .inst-si{width:100%; padding:14px; font-size:15px;}
  .inst-no{display:block; width:100%; background:none; border:0; color:var(--text-muted); font:inherit; font-size:13px; padding:12px 0 2px; cursor:pointer;}
  .inst-flecha{position:fixed; left:50%; bottom:calc(6px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#facc15; color:#111; font-weight:800; font-size:12px; padding:5px 10px; border-radius:8px; animation:instBrinca 1.2s ease-in-out infinite;}
  @keyframes instBrinca{50%{transform:translate(-50%,-5px);}}
  .inst-fondo.ios{align-items:flex-end;}
  .inst-fondo.ios .inst-caja{margin-bottom:42px; border-radius:22px; border-bottom:1px solid var(--border);}
  @media (min-width:700px){
    .inst-fondo{align-items:center;}
    .inst-caja{border-radius:22px; border-bottom:1px solid var(--border); padding-bottom:20px;}
  }
  .inst-pasos[hidden], .inst-benef[hidden], .inst-flecha[hidden]{display:none !important;}
  /* Datos de la agencia: redes y sucursales (0.9.16) */
  .redes-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .redes-row[hidden]{display:none;}
  .redes-row .red{width:46px; height:46px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--text);}
  .redes-row .red svg{width:22px; height:22px;}
  .redes-row .red:hover{border-color:var(--accent); color:var(--accent-2);}
  .suc-acc{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
  .suc-acc a{font-size:12px; font-weight:700; color:var(--accent-2); text-decoration:none;}
  a.info-card{color:var(--text);}
  /* Comparar y vistos recientemente (0.9.21) */
  .cmp-barra{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:900; background:var(--accent); color:#fff; border:0; border-radius:999px; padding:12px 18px; font:inherit; font-weight:800; box-shadow:0 10px 26px rgba(44,114,208,.45); cursor:pointer;}
  .cmp-barra[hidden], .cmp-fondo[hidden], #vistosBox[hidden], #cmpBtn[hidden]{display:none;}
  .cmp-barra b{background:#fff; color:var(--accent); border-radius:999px; padding:1px 8px; margin-left:6px;}
  #cmpBtn.on{border-color:var(--accent); color:var(--accent-2);}
  .cmp-fondo{position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.65); display:flex; align-items:flex-end; justify-content:center;}
  .cmp-caja{width:100%; max-width:900px; max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:22px 22px 0 0; padding:16px;}
  .cmp-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;} .cmp-cab b{font-size:17px;}
  .cmp-x{background:none; border:0; color:var(--text); font-size:28px; cursor:pointer; line-height:1;}
  .cmp-tabla table{width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed;}
  .cmp-tabla th{text-align:left; color:var(--text-muted); font-weight:600; width:92px; padding:8px 6px; vertical-align:top;}
  .cmp-tabla td{padding:8px 6px; border-top:1px solid var(--border); vertical-align:top;}
  .cmp-tabla td img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block; margin-bottom:6px;}
  .cmp-tabla .mejor{color:#4ade80; font-weight:800;}
  .cmp-tabla .cmp-q{background:none; border:0; color:var(--text-muted); font:inherit; font-size:11.5px; text-decoration:underline; cursor:pointer; padding:0;}
  @media (min-width:900px){.cmp-fondo{align-items:center;} .cmp-caja{border-radius:22px;} .cmp-barra{bottom:24px;}}

/* 0.9.27 Menú «Más» agrupado */
.menu-grupo{margin:18px 0 4px;}
.menu-grupo:first-child{margin-top:4px;}
.menu-sub{display:block; font-size:11.5px; font-weight:400; color:var(--text-muted); margin-top:2px;}
.menu-legal{text-align:center; margin:18px 0 6px; font-size:12px;}
.menu-legal a{color:var(--text-muted); text-decoration:underline;}

/* 0.9.28 Mis autos */
.autos-intro{font-size:12.5px; color:var(--text-muted); line-height:1.55; margin:0;}
.autos-cuenta{font-size:11.5px; color:var(--text-faint); margin:2px 0 0;}
.autos-lista{display:flex; flex-direction:column; gap:10px;}
.auto-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 13px; display:flex; flex-direction:column; gap:10px;}
.auto-info b{display:block; font-size:13.5px;}
.auto-info span{display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.5;}
.auto-btns{display:flex; gap:8px; align-items:center;}
.auto-btns .btn{padding:8px 14px; font-size:12.5px; flex:none;}
.auto-borrar{margin-left:auto; background:none; border:0; color:#fca5a5; font:inherit; font-size:12px; padding:6px;}
.auto-form{background:var(--surface); border:1px solid var(--accent); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:12px;}
.auto-form[hidden]{display:none;}
.auto-2col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.auto-acc{display:flex; gap:8px;}
.auto-acc .btn{flex:1; padding:12px;}
.auto-buscar{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text); padding:11px 13px; font:inherit; font-size:13px;}
.auto-buscar[hidden]{display:none;}
#srvAutoBuscar{margin-bottom:8px;}
.link-mini{background:none; border:0; color:var(--accent-2); font:inherit; font-size:11.5px; text-transform:none; letter-spacing:0; font-weight:600; padding:0; cursor:pointer;}

/* ===== 0.9.30 Inicio «Enfocado en vender» ===== */
.hv{display:flex; flex-direction:column; padding-bottom:90px;}
.hv[hidden]{display:none;}
.hv-buscar{display:flex; gap:10px; align-items:center; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px; color:var(--text-faint); font:inherit; font-size:13px; text-align:left; cursor:pointer;}
.hv-tipos{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin:10px -16px 14px; padding:0 16px;}
.hv-tipos::-webkit-scrollbar{display:none;}
.hv-tipos button{flex:none; font:inherit; font-size:12px; font-weight:700; padding:7px 13px; border-radius:99px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); cursor:pointer;}
.hv-tipos button:first-child{background:var(--accent); border-color:var(--accent); color:#fff;}
.hv-hero{position:relative; height:340px; border-radius:22px; overflow:hidden; background:var(--surface);}
.hv-hero[hidden]{display:none;}
.hv-hfoto{position:absolute; inset:0;}
.hv-hsombra{position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,8,10,.96) 8%, rgba(7,8,10,.25) 62%, rgba(7,8,10,.05)); z-index:3;}
.hv-tag{position:absolute; top:16px; left:16px; z-index:4; font-size:9.5px; letter-spacing:.14em; font-weight:700; background:rgba(44,114,208,.9); color:#fff; padding:5px 9px; border-radius:99px;}
.hv-dots{position:absolute; top:20px; right:16px; z-index:4; display:flex; gap:4px;}
.hv-dots i{width:7px; height:7px; border-radius:9px; background:rgba(255,255,255,.35); cursor:pointer;}
.hv-dots i.on{width:18px; background:#fff;}
.hv-htxt{position:absolute; left:16px; right:16px; bottom:16px; z-index:4;}
.hv-htxt h2{margin:0; font-family:'Neutra2Text',sans-serif; font-size:23px; font-weight:900; line-height:1.1;}
.hv-htxt p{margin:4px 0 8px; font-size:12px; color:#cbd2da;}
.hv-hp b{font-family:'Neutra2Text',sans-serif; font-size:26px; font-weight:900;}
.hv-hp small, .hv-en{display:block; font-size:11.5px; color:#a9c8f5;}
.hv-hbtn{display:flex; gap:8px; margin-top:12px;}
.hv-hbtn .btn{padding:11px 16px; font-size:13px;}
.hv-hbtn .btn-primary{flex:1;}
.hv-hbtn .btn-whatsapp{flex:none;}
.hv-bens{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 2px;}
.hv-bens div{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 9px; color:var(--accent-2);}
.hv-bens svg{width:18px; height:18px;}
.hv-bens b{display:block; color:var(--text); font-size:12.5px; margin-top:6px;}
.hv-bens small{display:block; font-size:10.5px; color:var(--text-muted); line-height:1.3;}
.hv-sec{display:flex; justify-content:space-between; align-items:baseline; margin:20px 0 10px;}
.hv-sec b{font-family:'Neutra2Text',sans-serif; font-size:16px; font-weight:900;}
.hv-sec button{background:none; border:0; font:inherit; font-size:12px; color:var(--accent-2); font-weight:700; cursor:pointer; padding:0;}
.hv-scroll{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 2px; scroll-snap-type:x proximity;}
.hv-scroll::-webkit-scrollbar{display:none;}
.hv-car{flex:none; width:200px; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; padding:0; color:var(--text); text-align:left; font:inherit; cursor:pointer; scroll-snap-align:start;}
.hv-ph{position:relative; height:124px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.hv-ph > svg{width:60px; height:60px;}
.hv-ci{padding:10px 11px 12px;}
.hv-ci b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hv-ci small{display:block; font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hv-pr{font-family:'Neutra2Text',sans-serif; font-size:17px; font-weight:900; margin-top:6px;}
.hv-ci .hv-en{color:#a9c8f5;}
.hv-meta{font-size:10.5px; color:var(--text-faint); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hv-pres{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.hv-pres button{background:linear-gradient(160deg,#16325a,#111316 70%); border:1px solid var(--border); border-radius:14px; padding:12px 10px; text-align:left; color:var(--text); font:inherit; cursor:pointer;}
.hv-pres small{display:block; font-size:10px; color:var(--text-muted);}
.hv-pres b{display:block; font-family:'Neutra2Text',sans-serif; font-size:15px; font-weight:900; margin:2px 0 6px;}
.hv-pres em{font-style:normal; font-size:10.5px; color:var(--accent-2);}
.hv-calc{display:flex; align-items:center; gap:12px; margin-top:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:14px; width:100%; text-align:left; color:var(--text); font:inherit; cursor:pointer;}
.hv-calc[hidden]{display:none;}
.hv-calc div{flex:1;}
.hv-calc b{display:block; font-size:14px;}
.hv-calc small{font-size:11px; color:var(--text-muted);}
.hv-calc .btn{flex:none; padding:10px 16px; font-size:13px;}
#hvCatBox[hidden]{display:none;}
.hv-sell{display:flex; align-items:center; gap:12px; margin-top:18px; border-radius:18px; padding:16px; background:linear-gradient(120deg,#123a2a,#0f1512 75%); border:1px solid rgba(37,211,102,.25); width:100%; text-align:left; color:var(--text); font:inherit; cursor:pointer;}
.hv-sico{width:44px; height:44px; border-radius:13px; background:rgba(37,211,102,.14); color:var(--whatsapp); display:grid; place-items:center; flex:none;}
.hv-sell > div:nth-child(2){flex:1;}
.hv-sell b{display:block; font-size:14.5px;}
.hv-sell small{display:block; font-size:11px; color:#b5c7bd; line-height:1.35;}
.hv-cot{flex:none; border:1px solid var(--whatsapp); color:var(--whatsapp); border-radius:11px; padding:8px 13px; font-size:12.5px; font-weight:700;}
.hv-trust{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px;}
.hv-trust div{text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 6px;}
.hv-trust b{display:block; font-family:'Neutra2Text',sans-serif; font-size:19px; font-weight:900; color:var(--accent-2);}
.hv-trust small{font-size:10.5px; color:var(--text-muted);}
#hvVistosBox[hidden]{display:none;}
.hv-fab{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:50; background:var(--whatsapp); color:#062b14; font-weight:700; font-size:12.5px; padding:11px 15px; border-radius:99px; display:flex; align-items:center; gap:7px; box-shadow:0 10px 24px rgba(0,0,0,.45); text-decoration:none;}
.screen-panel:not(.active) .hv-fab{display:none;}
@media (min-width:900px){
  .hv-hero{height:460px;}
  .hv-htxt{left:40px; bottom:36px; max-width:560px;}
  .hv-htxt h2{font-size:40px;}
  .hv-hp b{font-size:34px;}
  .hv-car{width:240px;}
  .hv-ph{height:150px;}
  .hv-fab{bottom:28px; right:28px;}
}
#homeClasica[hidden]{display:none !important;}