:root{
    --bg:#f5f3ee;
    --surface:#ffffff;
    --surface-2:#eeeae0;
    --text:#1c1f22;
    --text-muted:#63696f;
    --border:#e1dccf;
    --accent:#278d2b;
    --accent-strong:#1f6f24;
    --accent-ink:#ffffff;
    --success:#2f7a52;
    --success-bg:#e2f1e7;
    --pending:#b0761a;
    --pending-bg:#f6ecd9;
    --danger:#bd3a2c;
    --danger-bg:#f9e6e2;
    --dot-sedan:#4f7ba3;
    --dot-hatch:#3f8f83;
    --dot-suv:#278d2b;
    --dot-pickup:#93613f;
    --shadow:0 1px 2px rgba(28,22,14,.06),0 8px 24px -12px rgba(28,22,14,.18);
    --radius:10px;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#14161a;
      --surface:#1b1e23;
      --surface-2:#22262c;
      --text:#ece9e2;
      --text-muted:#9a9fa6;
      --border:#2b2f36;
      --accent:#3ebd45;
      --accent-strong:#52d058;
      --accent-ink:#0d1a0e;
      --success:#5cb586;
      --success-bg:#1c3327;
      --pending:#e0ab4b;
      --pending-bg:#3a2f16;
      --danger:#e2695a;
      --danger-bg:#3a201c;
      --dot-sedan:#7ea6cc;
      --dot-hatch:#6dbcae;
      --dot-suv:#3ebd45;
      --dot-pickup:#c2926f;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#14161a;
    --surface:#1b1e23;
    --surface-2:#22262c;
    --text:#ece9e2;
    --text-muted:#9a9fa6;
    --border:#2b2f36;
    --accent:#3ebd45;
    --accent-strong:#52d058;
    --accent-ink:#0d1a0e;
    --success:#5cb586;
    --success-bg:#1c3327;
    --pending:#e0ab4b;
    --pending-bg:#3a2f16;
    --danger:#e2695a;
    --danger-bg:#3a201c;
    --dot-sedan:#7ea6cc;
    --dot-hatch:#6dbcae;
    --dot-suv:#3ebd45;
    --dot-pickup:#c2926f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Work Sans",system-ui,sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  }
  h1,h2,h3{
    font-family:"Big Shoulders Display",system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    text-wrap:balance;
    margin:0;
    font-weight:800;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}
  a{color:inherit;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  .page{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);}

  /* Header */
  header.site{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;}
  .brand{display:flex;align-items:center;gap:8px;}
  .brand-logo{display:flex;align-items:center;}
  .brand-logo img{
    display:block;height:40px;width:auto;border-radius:8px;
    box-shadow:0 0 0 1px var(--border);
  }
  nav.main{display:flex;align-items:center;gap:4px;}
  nav.main a{
    font-size:13px;font-weight:600;text-decoration:none;color:var(--text-muted);
    padding:8px 12px;border-radius:8px;
  }
  nav.main a:hover{color:var(--text);background:var(--surface-2);}
  .btn{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  }
  .btn:hover{border-color:var(--accent);}
  .btn-accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
  .btn-accent:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
  .btn-ghost{border-color:transparent;background:transparent;}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-danger{border-color:var(--danger);color:var(--danger);background:transparent;}
  .btn-danger:hover{background:var(--danger-bg);}
  .btn-sm{padding:6px 10px;font-size:12px;}
  .btn:disabled{opacity:.5;cursor:not-allowed;}

  /* Hero */
  .hero{border-bottom:1px solid var(--border);}
  .hero-inner{padding-block:44px 36px;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .hero h1{font-size:clamp(34px,5vw,54px);line-height:.98;margin-block:10px 14px;}
  .hero p.lead{color:var(--text-muted);font-size:16px;max-width:46ch;margin:0 0 20px;}
  .hero-ctas{display:flex;gap:10px;flex-wrap:wrap;}
  .hero-visual{
    background:#fdfdfc;border:1px solid var(--border);border-radius:14px;
    padding:14px;box-shadow:var(--shadow);
  }
  .hero-visual img{display:block;width:100%;height:auto;border-radius:8px;}
  .stat{padding-block:6px;}
  .stat b{display:block;font-family:"Big Shoulders Display";font-size:28px;font-weight:800;}
  .stat span{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
  .stat-strip{
    display:flex;flex-wrap:wrap;border-top:1px solid var(--border);padding-block:20px;
  }
  .stat-strip .stat{
    flex:1 1 150px;text-align:center;padding-inline:18px;border-left:1px solid var(--border);
  }
  .stat-strip .stat:first-child{border-left:none;}
  .stat-strip b{font-size:27px;}

  /* Filters */
  .toolbar{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    padding-block:16px;border-bottom:1px solid var(--border);
    position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:30;background:var(--bg);
  }
  .search-input{
    flex:1 1 200px;min-width:160px;
    background:var(--surface);border:1px solid var(--border);border-radius:8px;
    padding:9px 12px;color:var(--text);font-size:13px;
  }
  .chip-row{display:flex;gap:6px;flex-wrap:wrap;}
  .chip{
    border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
    padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  }
  .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
  select.sort{
    background:var(--surface);border:1px solid var(--border);border-radius:8px;
    padding:9px 10px;color:var(--text);font-size:12px;font-weight:600;
  }
  .result-count{font-size:12px;color:var(--text-muted);padding-block:12px 4px;}

  /* Catalog grid */
  .catalog-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;
    padding-block:8px 40px;
  }
  .card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  }
  .card-art{
    aspect-ratio:16/10;background:var(--surface-2);position:relative;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--border);
  }
  .card-art svg{width:64%;height:64%;color:var(--text-muted);opacity:.85;}
  .card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .card-type-badge{
    position:absolute;top:10px;left:10px;background:var(--surface);border:1px solid var(--border);
    border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;
  }
  .dot{width:7px;height:7px;border-radius:50%;flex:none;}
  .card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .card-title{font-size:19px;font-weight:800;font-family:"Big Shoulders Display";text-transform:none;letter-spacing:0;line-height:1.05;}
  .card-meta{display:flex;gap:12px;font-size:12px;color:var(--text-muted);}
  .card-meta span{display:flex;align-items:center;gap:4px;}
  .card-price{font-size:20px;font-weight:600;margin-top:auto;}
  .card-price .cur{font-size:11px;color:var(--text-muted);font-weight:600;margin-right:3px;}
  .card-actions{display:flex;gap:8px;padding-top:2px;}
  .empty-state{
    grid-column:1/-1;text-align:center;padding:52px 20px;color:var(--text-muted);
    border:1px dashed var(--border);border-radius:var(--radius);
  }

  /* How it works */
  .steps{padding-block:8px 44px;border-top:1px solid var(--border);}
  .steps h2{font-size:26px;margin-bottom:20px;}
  .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
  .step b.num{
    display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;margin-bottom:10px;
  }
  .step h3{font-size:15px;text-transform:none;letter-spacing:0;margin-bottom:6px;}
  .step p{margin:0;font-size:13px;color:var(--text-muted);}

  /* Footer */
  footer.site{border-top:1px solid var(--border);padding-block:28px 36px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));}
  .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;}
  footer.site h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0 0 10px;font-family:"Work Sans";font-weight:700;}
  footer.site p, footer.site li{font-size:13px;color:var(--text-muted);margin:0 0 4px;}
  footer.site ul{list-style:none;padding:0;margin:0;}
  .footer-note{
    margin-top:22px;padding-top:16px;border-top:1px solid var(--border);
    font-size:11.5px;color:var(--text-muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  }
  .badge-demo{background:var(--pending-bg);color:var(--pending);border-radius:6px;padding:2px 7px;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;}

  /* Overlay / modal */
  .overlay{
    position:fixed;inset:0;background:rgba(10,8,4,.5);z-index:100;
    display:flex;align-items:flex-end;justify-content:center;padding:0;
  }
  @media (min-width:640px){ .overlay{align-items:center;padding:24px;} }
  .sheet{
    background:var(--surface);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
    border-radius:16px 16px 0 0;border:1px solid var(--border);border-bottom:none;
    padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  }
  @media (min-width:640px){ .sheet{border-radius:14px;border-bottom:1px solid var(--border);} }
  .sheet-wide{max-width:880px;}
  .sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;}
  .sheet-head h2{font-size:22px;}
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
  .field input, .field select, .field textarea{
    width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
    padding:10px 11px;color:var(--text);font-size:14px;font-family:inherit;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
  .field input[type="file"]{padding:8px;font-size:12.5px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .photo-preview{display:flex;align-items:center;gap:10px;margin-top:8px;}
  .photo-preview img{width:84px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
  .photo-preview .btn{flex:none;}
  .admin-thumb{width:48px;height:36px;object-fit:cover;border-radius:5px;border:1px solid var(--border);display:block;}
  .admin-thumb-empty{
    width:48px;height:36px;border-radius:5px;border:1px dashed var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  }
  .admin-thumb-empty svg{width:20px;height:20px;opacity:.7;}
  .hint{font-size:11.5px;color:var(--text-muted);margin-top:4px;}
  .err{font-size:12px;color:var(--danger);margin-top:6px;display:none;}
  .err.show{display:block;}
  .summary-box{background:var(--surface-2);border-radius:8px;padding:12px 14px;font-size:13px;margin-bottom:14px;}
  .summary-box b{display:block;font-size:15px;margin-bottom:2px;font-family:"Big Shoulders Display";font-size:18px;}
  .confirm-box{text-align:center;padding:10px 4px 4px;}
  .confirm-icon{
    width:52px;height:52px;border-radius:50%;background:var(--success-bg);color:var(--success);
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  }
  .confirm-box h3{font-size:20px;text-transform:none;letter-spacing:0;margin-bottom:6px;}
  .confirm-box p{color:var(--text-muted);font-size:13.5px;margin:0 0 18px;}
  .confirm-actions{display:flex;flex-direction:column;gap:8px;}
  .code{
    display:inline-block;background:var(--surface-2);border-radius:6px;padding:3px 9px;
    font-weight:700;letter-spacing:.04em;
  }

  /* Admin */
  .admin-shell{max-width:960px;margin:0;}
  .login-box{max-width:340px;margin:40px auto;}
  .login-box h2{font-size:24px;margin-bottom:4px;}
  .login-box p.hint{margin-bottom:18px;}
  .tab-row{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:16px;}
  .tab-btn{
    background:none;border:none;padding:10px 4px;margin-right:14px;font-size:13px;font-weight:700;
    color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:.04em;
  }
  .tab-btn[aria-selected="true"]{color:var(--text);border-color:var(--accent);}
  table.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
  table.admin-table th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
    padding:8px 10px;border-bottom:1px solid var(--border);
  }
  table.admin-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
  .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
  .pill{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-block;}
  .pill-pending{background:var(--pending-bg);color:var(--pending);}
  .pill-confirmed{background:var(--success-bg);color:var(--success);}
  .pill-cancelled{background:var(--danger-bg);color:var(--danger);}
  select.status-select{
    background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:12px;color:var(--text);
  }
  .row-actions{display:flex;gap:6px;}
  .admin-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
  .inline-confirm{display:flex;align-items:center;gap:6px;font-size:12px;}

  @media (max-width:820px){
    .hero-inner{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .step-grid{grid-template-columns:1fr;}
    .field-row{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    .footer-grid{grid-template-columns:1fr;}
    nav.main{display:none;}
  }

  /* Horas disponibles (estilo hora médica) */
  .slot-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:8px;
  }
  .slot-btn{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    padding:9px 4px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
  }
  .slot-btn:hover{border-color:var(--accent);}
  .slot-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
  .slot-btn[disabled]{
    background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;
    text-decoration:line-through;opacity:.6;border-color:var(--border);
  }
  .slot-empty{font-size:13px;color:var(--text-muted);padding:10px 2px;}
  .slot-loading{font-size:13px;color:var(--text-muted);padding:10px 2px;}

  /* Mensajes flash */
  .flash{border-radius:8px;padding:12px 14px;font-size:13.5px;margin-bottom:16px;}
  .flash-ok{background:var(--success-bg);color:var(--success);}
  .flash-error{background:var(--danger-bg);color:var(--danger);}

  /* Admin extras */
  .admin-wrap{padding-block:28px 60px;}
  .admin-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap;}
  .admin-header h1{font-size:26px;}
  .admin-user{font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:10px;}
  .card-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:22px;}
  .card-form h2{font-size:18px;margin-bottom:14px;}
  .toggle-row{display:flex;align-items:center;gap:8px;font-size:13px;}
  .muted-link{font-size:12.5px;color:var(--text-muted);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}
  .inactive-row{opacity:.55;}